/**
 * Global DataTables 2 styling (Backoffice).
 * Info: Primary badge (#ff6600). Pagination: DT2 button.dt-paging-button.
 */

/* —— Generic DT block (no card background) —— */
.motorica-dt-block {
	background: transparent;
	border: 0;
	padding: 0;
}

/* —— Search input: Motorica-Blau + Primary-Unterstrich (alle DT-Listen) —— */
div.dt-container .dt-search input,
div.dt-container .dataTables_filter input {
	color: var(--motorica-secondary, #0d234b) !important;
	caret-color: var(--motorica-secondary, #0d234b);
	background-color: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--motorica-primary, #ff6600) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-width: 0;
	width: 100%;
	padding: 0.5rem 0.25rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Höhere Spezifität als dataTables.bootstrap4.css (transparent für Floating-Label) */
div.dt-container div.dt-search input::placeholder,
div.dt-container .dt-search input::placeholder,
div.dt-container div.dataTables_filter input::placeholder,
div.dt-container .dataTables_filter input::placeholder,
div.dataTables_wrapper div.dataTables_filter input::placeholder,
#customersTable_wrapper .dt-search input::placeholder,
#customersTable_wrapper .dataTables_filter input::placeholder,
#itemsTable_wrapper .dt-search input::placeholder,
#itemsTable_wrapper .dataTables_filter input::placeholder,
#employeesTable_wrapper .dt-search input::placeholder,
#employeesTable_wrapper .dataTables_filter input::placeholder,
#invoiceTable_wrapper .dt-search input::placeholder,
#invoiceTable_wrapper .dataTables_filter input::placeholder,
#offerTable_wrapper .dt-search input::placeholder,
#offerTable_wrapper .dataTables_filter input::placeholder {
	color: rgba(13, 35, 75, 0.62) !important;
	opacity: 1 !important;
}

div.dt-container div.dt-search input::-webkit-input-placeholder,
div.dt-container .dt-search input::-webkit-input-placeholder,
div.dt-container div.dataTables_filter input::-webkit-input-placeholder,
div.dt-container .dataTables_filter input::-webkit-input-placeholder,
#customersTable_wrapper .dt-search input::-webkit-input-placeholder,
#customersTable_wrapper .dataTables_filter input::-webkit-input-placeholder,
#itemsTable_wrapper .dt-search input::-webkit-input-placeholder,
#itemsTable_wrapper .dataTables_filter input::-webkit-input-placeholder,
#employeesTable_wrapper .dt-search input::-webkit-input-placeholder,
#employeesTable_wrapper .dataTables_filter input::-webkit-input-placeholder,
#invoiceTable_wrapper .dt-search input::-webkit-input-placeholder,
#invoiceTable_wrapper .dataTables_filter input::-webkit-input-placeholder,
#offerTable_wrapper .dt-search input::-webkit-input-placeholder,
#offerTable_wrapper .dataTables_filter input::-webkit-input-placeholder {
	color: rgba(13, 35, 75, 0.62) !important;
	opacity: 1 !important;
}

div.dt-container div.dt-search input::-moz-placeholder,
div.dt-container .dt-search input::-moz-placeholder,
div.dt-container div.dataTables_filter input::-moz-placeholder,
div.dt-container .dataTables_filter input::-moz-placeholder,
#customersTable_wrapper .dt-search input::-moz-placeholder,
#customersTable_wrapper .dataTables_filter input::-moz-placeholder,
#itemsTable_wrapper .dt-search input::-moz-placeholder,
#itemsTable_wrapper .dataTables_filter input::-moz-placeholder,
#employeesTable_wrapper .dt-search input::-moz-placeholder,
#employeesTable_wrapper .dataTables_filter input::-moz-placeholder,
#invoiceTable_wrapper .dt-search input::-moz-placeholder,
#invoiceTable_wrapper .dataTables_filter input::-moz-placeholder,
#offerTable_wrapper .dt-search input::-moz-placeholder,
#offerTable_wrapper .dataTables_filter input::-moz-placeholder {
	color: rgba(13, 35, 75, 0.62) !important;
	opacity: 1 !important;
}

div.dt-container .dt-search input:focus,
div.dt-container .dataTables_filter input:focus {
	outline: none !important;
	color: var(--motorica-secondary, #0d234b) !important;
	border-bottom-color: var(--motorica-primary, #ff6600) !important;
	box-shadow: 0 2px 0 0 var(--motorica-primary, #ff6600) !important;
}

/* Page-length select in card-list toolbars: no float label – avoid 1.25rem top padding clipping text */
.motorica-dt-controls-row .dt-length select,
.motorica-dt-controls-row .dataTables_length select {
	padding: 0.45rem 1.75rem 0.45rem 0.65rem !important;
	min-height: 40px;
	height: auto !important;
	line-height: 1.4;
	font-size: 0.875rem;
	color: #0f172a !important;
	-webkit-text-fill-color: #0f172a !important;
	background-color: #fff !important;
	border: 1px solid #ced4da !important;
	border-radius: 0.25rem;
	box-shadow: none !important;
}

/* —— Inactive toggle as badge —— */
.motorica-list-inactive-toggle > span:first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--secondary, #0d234b);
	color: #fff;
}

/* —— Info as Primary badge —— */
div.dt-container .dt-info,
div.dt-container .dataTables_info {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	border-radius: 0.25rem;
	background-color: var(--primary, #ff6600);
	color: #fff;
	white-space: normal;
	vertical-align: middle;
}

div.dt-container .dt-layout-row .dt-layout-start:has(.dt-info),
div.dt-container .dt-layout-row .dt-layout-start:has(.dataTables_info) {
	display: flex;
	align-items: center;
}

/* Footer rows: info + paging alignment */
div.dt-container .dt-layout-row:not(.dt-layout-table):has(.dt-info),
div.dt-container .dt-layout-row:not(.dt-layout-table):has(.dataTables_info),
div.dt-container .dt-layout-row:not(.dt-layout-table):has(.dt-paging),
div.dt-container .dt-layout-row:not(.dt-layout-table):has(.dataTables_paginate) {
	align-items: center;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

div.dt-container .dt-paging,
div.dt-container .dataTables_paginate {
	margin: 0;
}

div.dt-container .dt-layout-row.motorica-dt-layout-row--empty {
	display: none !important;
}

/* —— DataTables 2 paging (button.dt-paging-button) —— */
div.dt-container .dt-paging nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

div.dt-container .dt-paging .dt-paging-button,
div.dt-container .dt-paging button.dt-paging-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0.375rem 0.65rem;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	border-radius: 8px;
	border: 1px solid var(--secondary, #0d234b);
	background: var(--secondary, #0d234b);
	background-image: none !important;
	color: #fff !important;
	box-shadow: none;
}

div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging button.dt-paging-button:hover {
	background-color: #e65800 !important;
	border-color: #e65800 !important;
	background-image: none !important;
	color: #fff !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dt-container .dt-paging button.dt-paging-button.current,
div.dt-container .dt-paging button.dt-paging-button.current:hover {
	background-color: var(--primary, #ff6600) !important;
	border-color: var(--primary, #ff6600) !important;
	color: #fff !important;
}

div.dt-container .dt-paging .dt-paging-button.current:hover {
	background-color: #e65800 !important;
	border-color: #e65800 !important;
}

div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.next,
div.dt-container .dt-paging button.dt-paging-button.previous,
div.dt-container .dt-paging button.dt-paging-button.next {
	min-width: 2.25rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active,
div.dt-container .dt-paging button.dt-paging-button.disabled,
div.dt-container .dt-paging button.dt-paging-button.disabled:hover,
div.dt-container .dt-paging button.dt-paging-button.disabled:active {
	cursor: default;
	opacity: 0.45;
	background-color: #e2e8f0 !important;
	border-color: #e2e8f0 !important;
	color: #94a3b8 !important;
	box-shadow: none;
}

div.dt-container .dt-paging span.ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0 0.25rem;
	color: #64748b;
	font-weight: 600;
}

/* Fallback: Bootstrap pagination (legacy / rare) */
div.dt-container .pagination .page-link {
	border-radius: 8px;
	border: 1px solid var(--secondary, #0d234b);
	background-color: var(--secondary, #0d234b);
	color: #fff !important;
	margin: 0 2px;
}

div.dt-container .pagination .page-item.active .page-link {
	background-color: var(--primary, #ff6600) !important;
	border-color: var(--primary, #ff6600) !important;
	color: #fff !important;
}

div.dt-container .pagination .page-item.disabled .page-link {
	color: #94a3b8;
	border-color: #e2e8f0;
	background-color: #e2e8f0;
}

div.dt-container div.dt-paging ul.pagination {
	flex-wrap: wrap;
}

/* —— Mobile —— */
@media screen and (max-width: 767px) {
	div.dt-container .dt-layout-row:not(.dt-layout-table):has(.dt-info),
	div.dt-container .dt-layout-row:not(.dt-layout-table):has(.dt-paging) {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		text-align: center;
	}

	div.dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-start,
	div.dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-end {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	div.dt-container .dt-paging nav {
		justify-content: center;
	}

	div.dt-container .dt-paging .dt-paging-button,
	div.dt-container .dt-paging button.dt-paging-button {
		min-width: var(--motorica-touch-min, 44px);
		min-height: var(--motorica-touch-min, 44px);
	}

	div.dt-container div.dt-paging ul.pagination {
		justify-content: center !important;
	}
}

/* Mobile: keep search from overflowing right (place it on its own row) */
@media screen and (max-width: 576px) {
	div.dt-container .dt-layout-row:has(.dt-search) {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	div.dt-container .dt-layout-row:has(.dt-search) .dt-layout-end {
		width: 100%;
		flex: 0 0 100%;
	}
	div.dt-container .dt-layout-row:has(.dt-search) .dt-search {
		width: 100%;
	}
	div.dt-container .dt-layout-row:has(.dt-search) .dt-search input {
		width: 100%;
	}
}