/* #	#	#	DATATABLES	#	#	# */

/* Container & Algemene Styling */
.card.min-height-table {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	background: #ffffff;
}

/* Wrapper layout verbeteringen */
.dataTables_wrapper {
	padding: 1rem 0;
}

.dataTables_length, 
.dataTables_filter {
	margin-bottom: 1.5rem;
}

.dataTables_filter input {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 0.5rem 1rem;
	margin-left: 10px;
	outline: none;
	transition: border-color 0.2s;
}

.dataTables_filter input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* De Tabel zelf */
table.dataTable.no-footer {
	border-bottom: 1px solid #f1f5f9 !important;
	margin-bottom: 1.5rem !important;
}

#invoices {
	border-collapse: separate !important;
	border-spacing: 0;
	border: none !important;
}

#invoices thead th, 
#invoices thead td {
	background-color: #f8fafc;
	color: #64748b;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	padding: 12px 16px;
	border-bottom: 2px solid #edf2f7;
}

#invoices tbody tr {
	transition: background-color 0.2s;
}

#invoices tbody td {
	padding: 16px;
	vertical-align: middle;
	color: #334155;
	border-bottom: 1px solid #f1f5f9;
}

#invoices.table-hover tbody tr:hover {
	background-color: #f1f5f9 !important;
	cursor: pointer;
}

/* Status Badge styling (Specifiek voor de 'Betaald' kolom) */
#invoices td:nth-child(5) {
	font-weight: 600;
}

/* Knoppen & Acties */
.btn-success {
	background-color: #10b981 !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 6px 16px !important;
	font-size: 0.875rem !important;
	text-transform: none !important;
	box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-success:hover {
	background-color: #059669 !important;
	transform: translateY(-1px);
}

/* Paginering (De 'Vorige/Volgende' knoppen) */
.dataTables_paginate {
	padding-top: 1.5rem !important;
}

.paginate_button {
	border-radius: 8px !important;
	border: 1px solid #e2e8f0 !important;
	margin: 0 4px !important;
	background: white !important;
	color: #64748b !important;
	transition: all 0.2s ease;
}

.paginate_button.current {
	background: #3b82f6 !important;
	color: white !important;
	border-color: #3b82f6 !important;
}

.paginate_button:hover:not(.current):not(.disabled) {
	background: #f8fafc !important;
	color: #3b82f6 !important;
	border-color: #3b82f6 !important;
}

.dataTables_info {
	color: #94a3b8 !important;
	font-size: 0.875rem;
	padding-top: 1.5rem !important;
}

/* #	#	#	END DATATABLES	#	#	# */