/* Dark-mode overrides for the shared components (backend + frontend).
   The compiled Mazer theme only re-colors its own components; everything in
   the shared stylesheets that hardcodes a light color (#fff backgrounds,
   navy headings) has to be re-mapped here. Scoped to html[data-bs-theme=dark],
   which is what the theme toggle (dark.js) sets. */
html[data-bs-theme="dark"] {
  --app-surface: #1e1e2d;
  --app-surface-2: #252538;
  --app-border: rgba(255, 255, 255, 0.12);
  --app-field-bg: #14141f;
  --app-field-border: #55556f;
  --app-text: #c2c2d9;
  --app-text-muted: rgba(194, 194, 217, 0.65);
  --bs-heading-color: #e9e9f5;
  --bs-secondary-color: rgba(194, 194, 217, 0.65);
  --bs-card-border-color: var(--app-border);
}

/* Cards built by us */
html[data-bs-theme="dark"] body .dashboard-card,
html[data-bs-theme="dark"] body .item-index__header {
  background: var(--app-surface);
  border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .item-index__header {
  border-left-color: #0a7e78;
}

html[data-bs-theme="dark"] body .dashboard-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

html[data-bs-theme="dark"] body .dashboard-card-value,
html[data-bs-theme="dark"] body .dashboard-card-label,
html[data-bs-theme="dark"] body .item-index__header-title {
  color: var(--bs-heading-color);
}

html[data-bs-theme="dark"] body .dashboard-card-value + .dashboard-card-label,
html[data-bs-theme="dark"] body .dashboard-card-desc,
html[data-bs-theme="dark"] body .item-index__header-subtitle {
  color: var(--app-text-muted);
}

html[data-bs-theme="dark"] body .item-index__header-title .bi {
  color: #2bc3bb;
}

/* Buttons */
html[data-bs-theme="dark"] body .btn.btn-back {
  background: transparent;
  color: var(--app-text);
  border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .btn.btn-back:hover {
  background: #475467;
  border-color: #475467;
  color: #ffffff;
}

html[data-bs-theme="dark"] body .btn-outline-primary {
  color: #2bc3bb;
  border-color: rgba(43, 195, 187, 0.5);
}

html[data-bs-theme="dark"] body .btn-outline-primary:hover,
html[data-bs-theme="dark"] body .btn-outline-primary:focus,
html[data-bs-theme="dark"] body .btn-outline-primary.show {
  color: #ffffff;
  background-color: #0a7e78;
  border-color: #0a7e78;
}

/* Tables */
html[data-bs-theme="dark"] body .table-responsive table thead th {
  background-color: rgba(43, 195, 187, 0.1) !important;
  border-bottom-color: rgba(43, 195, 187, 0.25) !important;
  color: #2bc3bb;
}

html[data-bs-theme="dark"] body .table-responsive table:has(thead) tbody tr:hover > * {
  background-color: rgba(43, 195, 187, 0.1) !important;
}

/* Form controls */
html[data-bs-theme="dark"] body .form-control,
html[data-bs-theme="dark"] body .form-select {
  background-color: var(--app-field-bg);
  border-color: var(--app-field-border);
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .form-control.is-invalid,
html[data-bs-theme="dark"] body .form-select.is-invalid {
  border-color: #f0616d;
}

html[data-bs-theme="dark"] body .form-control.is-valid,
html[data-bs-theme="dark"] body .form-select.is-valid {
  border-color: #2bc3bb;
}

html[data-bs-theme="dark"] body .form-control::placeholder {
  color: var(--app-text-muted);
}

html[data-bs-theme="dark"] body .form-control:focus,
html[data-bs-theme="dark"] body .form-select:focus {
  background-color: var(--app-field-bg);
  border-color: #2bc3bb;
  color: var(--app-text);
  box-shadow: 0 0 0 0.2rem rgba(10, 126, 120, 0.3);
}

html[data-bs-theme="dark"] body .form-control:disabled,
html[data-bs-theme="dark"] body .form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--app-text-muted);
}

html[data-bs-theme="dark"] body .form-check-input {
  background-color: var(--app-surface-2);
  border-color: rgba(255, 255, 255, 0.3);
}

html[data-bs-theme="dark"] body .form-check-input:checked {
  background-color: #0a7e78;
  border-color: #0a7e78;
}

html[data-bs-theme="dark"] body .input-group-text {
  background-color: var(--app-field-bg);
  border-color: var(--app-field-border);
  color: var(--app-text);
}

/* Select2 (Krajee BS5 theme) */
html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-selection {
  background-color: var(--app-field-bg);
  border-color: var(--app-field-border);
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__rendered {
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-selection__placeholder {
  color: var(--app-text-muted);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-selection__choice {
  background-color: rgba(10, 126, 120, 0.3);
  border-color: rgba(10, 126, 120, 0.6);
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-dropdown {
  background-color: var(--app-field-bg);
  border-color: var(--app-field-border);
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
  background-color: var(--app-surface);
  border-color: var(--app-field-border);
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-results__option {
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .select2-container--krajee-bs5 .select2-results__option[aria-selected="true"] {
  background-color: rgba(10, 126, 120, 0.25);
}

/* Accordion, tabs, dropdowns, modals, pagination */
html[data-bs-theme="dark"] body .accordion {
  --bs-accordion-bg: var(--app-surface);
  --bs-accordion-color: var(--app-text);
  --bs-accordion-border-color: var(--app-border);
  --bs-accordion-active-color: #2bc3bb;
  --bs-accordion-btn-color: var(--app-text);
  --bs-accordion-btn-bg: var(--app-surface);
}

html[data-bs-theme="dark"] body .nav-tabs {
  border-bottom-color: var(--app-border);
}

html[data-bs-theme="dark"] body .nav-tabs .nav-link {
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .nav-tabs .nav-link:hover,
html[data-bs-theme="dark"] body .nav-tabs .nav-link:focus,
html[data-bs-theme="dark"] body .nav-tabs .nav-link.active {
  color: #2bc3bb;
}

html[data-bs-theme="dark"] body .nav-tabs .nav-link.active {
  background-color: var(--app-surface);
  border-color: var(--app-border) var(--app-border) var(--app-surface);
}

html[data-bs-theme="dark"] body .dropdown-menu,
html[data-bs-theme="dark"] body .modal-content {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .dropdown-item {
  color: var(--app-text);
}

html[data-bs-theme="dark"] body .dropdown-item:hover,
html[data-bs-theme="dark"] body .dropdown-item:focus {
  background-color: rgba(10, 126, 120, 0.2);
  color: #ffffff;
}

html[data-bs-theme="dark"] body .modal-header,
html[data-bs-theme="dark"] body .modal-footer {
  border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .text-muted {
  color: var(--app-text-muted) !important;
}

html[data-bs-theme="dark"] body .field-icon,
html[data-bs-theme="dark"] body .auth-icon-badge {
  color: #2bc3bb;
  background: rgba(43, 195, 187, 0.14);
}

/* Footer (frontend) */
html[data-bs-theme="dark"] body .main-footer {
  background-color: var(--app-surface);
  border-top-color: var(--app-border);
}

/* Auth + legal pages */
html[data-bs-theme="dark"] body .auth-card-wrap {
  background: url(../images/fondo-login.png) center center / cover no-repeat, #151521;
}

html[data-bs-theme="dark"] body .auth-left-tinted {
  background:
    radial-gradient(circle at 15% 20%, rgba(10, 126, 120, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(10, 126, 120, 0.14) 0%, transparent 45%),
    #151521;
}

html[data-bs-theme="dark"] body .auth-card-logo,
html[data-bs-theme="dark"] body .sidebar-brand,
html[data-bs-theme="dark"] body .sidebar-brand:hover {
  color: #2bc3bb;
}

html[data-bs-theme="dark"] body .auth-title {
  color: var(--bs-heading-color);
}

html[data-bs-theme="dark"] body .legal-link {
  border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .legal-link:hover {
  background: rgba(43, 195, 187, 0.08);
  border-color: #2bc3bb;
}

html[data-bs-theme="dark"] body .legal-link > i:first-child {
  color: #2bc3bb;
}

html[data-bs-theme="dark"] body .legal-header {
  border-bottom-color: var(--app-border);
}

html[data-bs-theme="dark"] body .legal-section-title {
  color: var(--bs-heading-color);
  border-left-color: #2bc3bb;
}

/* Pagination (GridView pager). Mazer's dark build never matches the disabled
   state of a link inside <li class="disabled"> (its selector is malformed),
   so "Inicio"/"Fin"/"«" on the first/last page fell back to the light
   theme's white — define every state here. */
html[data-bs-theme="dark"] body .pagination {
  --bs-pagination-color: var(--app-text);
  --bs-pagination-bg: var(--app-surface);
  --bs-pagination-border-color: var(--app-field-border);
  --bs-pagination-hover-color: #ffffff;
  --bs-pagination-hover-bg: rgba(10, 126, 120, 0.25);
  --bs-pagination-hover-border-color: #2bc3bb;
  --bs-pagination-active-bg: #0a7e78;
  --bs-pagination-active-border-color: #0a7e78;
  --bs-pagination-disabled-color: rgba(194, 194, 217, 0.35);
  --bs-pagination-disabled-bg: var(--app-surface);
  --bs-pagination-disabled-border-color: var(--app-border);
  gap: 0.25rem;
}

html[data-bs-theme="dark"] body .pagination .page-link {
  background-color: var(--bs-pagination-bg);
  border-color: var(--bs-pagination-border-color);
  color: var(--bs-pagination-color);
  margin-left: 0;
}

html[data-bs-theme="dark"] body .pagination .page-link:hover {
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
  color: var(--bs-pagination-hover-color);
}

html[data-bs-theme="dark"] body .pagination .page-item.active .page-link {
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
  color: #ffffff;
}

html[data-bs-theme="dark"] body .pagination .page-item.disabled .page-link,
html[data-bs-theme="dark"] body .pagination .page-link.disabled {
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
}

/* "Filtros avanzados" accordion: closed = flat card row with a muted label and
   a downward chevron; open = tinted row with a teal accent bar, bright label
   and an upward chevron, so the state reads at a glance. */
html[data-bs-theme="dark"] body .accordion {
  --bs-accordion-bg: var(--app-surface);
  --bs-accordion-btn-bg: var(--app-surface);
  --bs-accordion-btn-color: var(--app-text);
  --bs-accordion-active-bg: rgba(43, 195, 187, 0.12);
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-border-color: var(--app-border);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c2c2d9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232bc3bb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

html[data-bs-theme="dark"] body .accordion .accordion-button {
  background-color: var(--app-surface);
  color: var(--app-text);
  box-shadow: none;
  border-left: 3px solid transparent;
}

html[data-bs-theme="dark"] body .accordion .accordion-button:not(.collapsed) {
  background-color: rgba(43, 195, 187, 0.12);
  color: #ffffff;
  font-weight: 700;
  border-left-color: #2bc3bb;
  box-shadow: inset 0 -1px 0 var(--app-border);
}

html[data-bs-theme="dark"] body .accordion .accordion-button:not(.collapsed) .bi {
  color: #2bc3bb;
}

html[data-bs-theme="dark"] body .accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(43, 195, 187, 0.25);
}

html[data-bs-theme="dark"] body .accordion .accordion-body {
  background-color: var(--app-surface);
  color: var(--app-text);
}

/* Date-range pickers (kartik DatePicker addons) */
html[data-bs-theme="dark"] body .input-group .input-group-text,
html[data-bs-theme="dark"] body .input-group .kv-date-calendar,
html[data-bs-theme="dark"] body .input-group .kv-date-remove {
  background-color: var(--app-surface-2);
  border-color: var(--app-field-border);
  color: var(--app-text);
}

/* Report picker cards: lighter surface + visible border over the page bg */
html[data-bs-theme="dark"] body .report-card {
  background: var(--app-surface-2);
  border-color: var(--app-border);
}

html[data-bs-theme="dark"] body .report-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

html[data-bs-theme="dark"] body .report-card__icon {
  color: #2bc3bb;
  opacity: 0.85;
}