/*
 * MODO OSCURO de los componentes de Bootstrap 5 / tema Ample.
 *
 * Un solo camino:
 *   1. static/admin/js/tema.js pone <html data-bs-theme="dark|light">
 *      (convención de Bootstrap 5.3).
 *   2. design-tokens.css define la paleta oscura UNA vez, en tokens --sol-*.
 *   3. Esta hoja solo dice QUÉ token usa cada componente. Sin colores
 *      literales: si un color se ve mal, se corrige el token, no esta hoja.
 *
 * Todo va bajo [data-bs-theme="dark"]: el modo claro no cambia en nada.
 * El modo oscuro propio de Ample (body[data-theme=dark]) no se usa: es una
 * paleta fija con !important que no lee los tokens.
 */

/* Variables de Bootstrap 5 que existen en la versión compilada */
[data-bs-theme="dark"] {
  --bs-body-color: var(--sol-ink);
  --bs-body-bg: var(--sol-surface-page);
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: var(--sol-surface-sunken);
  --bs-table-hover-bg: var(--sol-surface-raised);
  --bs-table-striped-color: var(--sol-ink);
  --bs-table-hover-color: var(--sol-ink);
  --bs-table-active-bg: var(--sol-accent-surface);
  color-scheme: dark;
}

/* Página y estructura */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] #main-wrapper,
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] #content {
  background-color: var(--sol-surface-page);
  color: var(--sol-ink);
}
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .topbar .navbar-header {
  background-color: var(--sol-surface-sidebar);
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .text-dark {
  color: var(--sol-ink) !important; /* Bootstrap marca .text-dark con !important */
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .help,
[data-bs-theme="dark"] .helptext,
[data-bs-theme="dark"] .form-text {
  color: var(--sol-ink-muted) !important;
}
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .breadcrumb-item a { background-color: transparent; color: var(--sol-ink-secondary); }
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--sol-ink-secondary);
}
[data-bs-theme="dark"] hr,
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: var(--sol-border) !important; /* utilidades de Bootstrap */
}
[data-bs-theme="dark"] .bg-white { background-color: var(--sol-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--sol-surface-sunken) !important; }

/* Tarjetas, paneles, desplegables y ventanas */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-body,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .module,
[data-bs-theme="dark"] fieldset,
[data-bs-theme="dark"] .inline-group,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--sol-surface);
  color: var(--sol-ink);
  border-color: var(--sol-border);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .module h2,
[data-bs-theme="dark"] .inline-group h2,
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--sol-surface-sunken);
  color: var(--sol-ink);
  border-color: var(--sol-border);
}
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .select2-dropdown,
[data-bs-theme="dark"] .ui-widget-content {
  background-color: var(--sol-surface-raised);
  color: var(--sol-ink);
  border-color: var(--sol-border-strong);
  box-shadow: var(--sol-shadow-2);
}
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .dropdown-divider { border-color: var(--sol-border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--sol-ink); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--sol-surface-sunken);
  color: var(--sol-ink);
}
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Formularios: un escalón más claros que la tarjeta y con borde visible */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] .select2-container .select2-selection,
[data-bs-theme="dark"] .select2-search__field {
  background-color: var(--sol-field);
  color: var(--sol-ink);
  border-color: var(--sol-border-strong);
}
[data-bs-theme="dark"] .input-group-text {
  background-color: var(--sol-surface-sunken);
  color: var(--sol-ink-secondary);
  border-color: var(--sol-border-strong);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] input:focus,
[data-bs-theme="dark"] select:focus,
[data-bs-theme="dark"] textarea:focus {
  background-color: var(--sol-field);
  color: var(--sol-ink);
  border-color: var(--sol-accent);
  box-shadow: var(--sol-shadow-focus);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
  background-color: var(--sol-surface-sunken);
  color: var(--sol-ink-muted);
}
[data-bs-theme="dark"] ::placeholder { color: var(--sol-ink-muted); opacity: 1; }
[data-bs-theme="dark"] .form-check-input {
  background-color: var(--sol-field);
  border-color: var(--sol-border-strong);
}
[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--sol-accent);
  border-color: var(--sol-accent);
}
[data-bs-theme="dark"] .select2-container .select2-selection__rendered { color: var(--sol-ink); }
[data-bs-theme="dark"] .select2-results__option--highlighted {
  background-color: var(--sol-accent-surface) !important; /* select2 lo fija inline */
  color: var(--sol-ink) !important;
}

/* Tablas (Bootstrap y las de Django: #result_list, inlines, reportes) */
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] table { color: var(--sol-ink); border-color: var(--sol-border); }
[data-bs-theme="dark"] .table > :not(caption) > * > *,
[data-bs-theme="dark"] table td,
[data-bs-theme="dark"] table th { border-color: var(--sol-border-subtle); }
[data-bs-theme="dark"] table thead th,
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] tfoot td {
  background-color: var(--sol-surface-sunken);
  color: var(--sol-ink-secondary);
}

/* Botones claros: superficies elevadas, no blancas */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-white,
[data-bs-theme="dark"] .btn-outline-secondary {
  background-color: var(--sol-surface-raised);
  border-color: var(--sol-border-strong);
  color: var(--sol-ink);
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-white:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--sol-border-strong);
  color: var(--sol-ink);
}

/* Avisos, paginación y listas */
[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .alert-secondary { background-color: var(--sol-surface-sunken); border-color: var(--sol-border); color: var(--sol-ink); }
[data-bs-theme="dark"] .alert-info { background-color: var(--sol-accent-surface); border-color: var(--sol-accent); color: var(--sol-ink); }
[data-bs-theme="dark"] .alert-warning { background-color: var(--sol-warn-surface); border-color: var(--sol-warn); color: var(--sol-ink); }
[data-bs-theme="dark"] .alert-danger { background-color: var(--sol-alert-surface); border-color: var(--sol-alert); color: var(--sol-ink); }
[data-bs-theme="dark"] .alert-success { background-color: var(--sol-state-ok-surface); border-color: var(--sol-state-ok); color: var(--sol-ink); }
[data-bs-theme="dark"] .page-link { background-color: var(--sol-surface); border-color: var(--sol-border); color: var(--sol-link); }
[data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--sol-surface-sunken); color: var(--sol-ink-muted); }
[data-bs-theme="dark"] .list-group-item { background-color: var(--sol-surface); border-color: var(--sol-border); color: var(--sol-ink); }

/* Calendarios (jQuery UI datepicker y FullCalendar) */
[data-bs-theme="dark"] .ui-datepicker,
[data-bs-theme="dark"] .ui-datepicker-header,
[data-bs-theme="dark"] .fc-unthemed td,
[data-bs-theme="dark"] .fc-unthemed th {
  background-color: var(--sol-surface);
  border-color: var(--sol-border);
  color: var(--sol-ink);
}
[data-bs-theme="dark"] .ui-state-default,
[data-bs-theme="dark"] .ui-widget-content .ui-state-default {
  background: var(--sol-surface-sunken);
  border-color: var(--sol-border);
  color: var(--sol-ink);
}
[data-bs-theme="dark"] .fc-unthemed td.fc-today { background-color: var(--sol-accent-surface); }

/* Menú lateral. La piel oscura de Ample (skin5) deja los enlaces al 40 % de
   opacidad: el texto quedaba casi invisible. Aquí se leen con los tokens de
   tinta: secundaria en reposo y principal en la sección abierta o la
   pantalla actual. */
[data-bs-theme="dark"] .left-sidebar,
[data-bs-theme="dark"] .left-sidebar ul {
  background-color: var(--sol-surface-sidebar) !important; /* Ample fija la piel */
}
[data-bs-theme="dark"] .left-sidebar .sidebar-item .sidebar-link {
  opacity: 1 !important; /* anula el .4 de la piel skin5 */
  color: var(--sol-ink-secondary) !important;
}
[data-bs-theme="dark"] .left-sidebar .sidebar-item .sidebar-link:hover,
[data-bs-theme="dark"] .left-sidebar .sidebar-item.selected > .sidebar-link,
[data-bs-theme="dark"] .left-sidebar .sidebar-item .sidebar-link.active {
  color: var(--sol-ink) !important;
  background-color: var(--sol-surface-raised) !important;
}
[data-bs-theme="dark"] .left-sidebar .sidebar-link .hide-menu > span[class*="ph-"],
[data-bs-theme="dark"] .left-sidebar .sidebar-link i {
  color: inherit;
  opacity: 1;
}
[data-bs-theme="dark"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-item > .sidebar-link.has-arrow::after {
  border-color: var(--sol-ink-muted) !important; /* sidebar_menu.css la fija gris oscuro */
}
[data-bs-theme="dark"] #sidebarnav li li .badge {
  background: var(--sol-accent-surface) !important; /* sidebar_menu.css la fija clara */
  color: var(--sol-link) !important;
}