/*
 * ICAM Abacus — unified admin dark mode.
 * Color tokens switch in /admin/theme-vars.css (html.dark block, derived from brand primary).
 * This file overrides hardcoded light surfaces in base/sidebar/changelist CSS.
 */

/* ── Canvas & header ─────────────────────────────────────────────────────── */
html.dark body,
html.dark #page,
html.dark #main,
html.dark #content,
html.dark #content-main {
  /* Fallbacks avoid a blank/black canvas if theme-vars.css fails to load. */
  background: var(--admin-background, #0f172a) !important;
  color: var(--admin-foreground, #e2e8f0) !important;
}

html.dark header,
html.dark .unfold-header,
html.dark [class*="header"] .bg-white,
html.dark .bg-white.border-b.border-base-200 {
  background: linear-gradient(
    90deg,
    var(--admin-background) 0%,
    var(--admin-sidebar) 52%,
    var(--admin-accent-soft) 100%
  ) !important;
  border-bottom-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark .bg-white.dark\:bg-base-900,
html.dark .dark\:bg-base-900,
html.dark .dark\:bg-base-800,
html.dark .dark\:bg-base-950\/20 {
  background-color: var(--admin-surface) !important;
}

/* ── Cards, modules, tables ──────────────────────────────────────────────── */
html.dark .module > .bg-base-50,
html.dark .app-list .module .bg-base-50,
html.dark #content-main .module .bg-base-50,
html.dark fieldset.module,
html.dark .inline-group .module {
  background: var(--admin-surface-raised) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark .module table,
html.dark #content-main .module table,
html.dark #result_list,
html.dark .change-list .results,
html.dark table#changelist,
html.dark body.change-list #result_list,
html.dark body.change-list table.result-list {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark .module tr.bg-white,
html.dark #result_list tbody tr,
html.dark body.change-list #result_list tbody tr {
  background: var(--admin-surface) !important;
}

html.dark .module th,
html.dark .module td,
html.dark #result_list th,
html.dark #result_list td,
html.dark body.change-list #result_list th,
html.dark body.change-list #result_list td {
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark #result_list thead th,
html.dark .change-list .results thead th,
html.dark body.change-list #result_list thead {
  background: var(--admin-accent-soft) !important;
  color: var(--admin-foreground) !important;
}

html.dark body.change-list #result_list thead {
  background: linear-gradient(
    90deg,
    var(--admin-accent-soft),
    color-mix(in oklch, var(--admin-primary), black 55%)
  ) !important;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark select,
html.dark textarea,
html.dark .vTextField,
html.dark .unfold-admin input,
html.dark .unfold-admin select,
html.dark .unfold-admin textarea {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--admin-muted-fg) !important;
}

/* ── Sidebar shell ───────────────────────────────────────────────────────── */
html.dark #nav-sidebar,
html.dark #nav-sidebar-inner,
html.dark #nav-sidebar > div,
html.dark #nav-sidebar .bg-base-50 {
  background: linear-gradient(
    168deg,
    var(--admin-sidebar-dark) 0%,
    var(--admin-sidebar) 46%,
    color-mix(in oklch, var(--admin-sidebar), white 6%) 100%
  ) !important;
  border-right-color: var(--admin-border) !important;
}

html.dark #nav-sidebar-inner .border-b,
html.dark #nav-sidebar-inner .border-t,
html.dark #nav-sidebar-inner [class*="navigation_user"] {
  background: linear-gradient(
    135deg,
    var(--admin-surface-raised) 0%,
    color-mix(in oklch, var(--admin-surface-raised), var(--admin-accent-soft) 35%) 100%
  ) !important;
  border-color: var(--admin-border) !important;
}

html.dark #nav-sidebar-apps > div:has(> h2),
html.dark #nav-sidebar-apps > .icam-nav-section,
html.dark #nav-sidebar-apps .simplebar-content > div:has(> h2),
html.dark #nav-sidebar-apps .simplebar-content > .icam-nav-section {
  --icam-nav-section-gradient: linear-gradient(
    180deg,
    color-mix(in oklch, var(--admin-accent-soft), black 8%) 0%,
    color-mix(in oklch, var(--admin-accent-soft), var(--admin-surface-raised) 35%) 45%,
    var(--admin-surface-raised) 100%
  );
  background: var(--icam-nav-section-gradient) !important;
  border-color: var(--admin-border) !important;
  box-shadow:
    0 1px 0 color-mix(in oklch, white, transparent 88%) inset,
    0 6px 20px -12px color-mix(in oklch, black, transparent 55%) !important;
}

html.dark .icam-nav-section__toggle {
  background: transparent !important;
  border-bottom-color: var(--admin-border) !important;
  color: color-mix(in oklch, var(--admin-primary), white 35%) !important;
}

html.dark .icam-nav-section__toggle:hover {
  background: color-mix(in oklch, var(--admin-accent-soft), black 12%) !important;
}

html.dark .icam-nav-section__chevron {
  background: color-mix(in oklch, var(--admin-accent-soft), black 20%) !important;
  color: color-mix(in oklch, var(--admin-primary), white 30%) !important;
}

html.dark #nav-sidebar-inner a.flex.h-\[38px\] {
  color: color-mix(in oklch, var(--admin-foreground), transparent 6%) !important;
}

html.dark #nav-sidebar-inner a.flex.h-\[38px\] .material-symbols-outlined {
  background: color-mix(in oklch, var(--admin-accent-soft), black 15%) !important;
  color: color-mix(in oklch, var(--admin-primary), white 25%) !important;
}

html.dark #nav-sidebar-inner a.flex.h-\[38px\]:hover {
  background: color-mix(in oklch, var(--admin-accent-soft), black 10%) !important;
  border-color: color-mix(in oklch, var(--admin-primary), black 40%) !important;
  color: var(--admin-foreground) !important;
}

html.dark #nav-sidebar-inner a.flex.h-\[38px\]:hover .material-symbols-outlined {
  background: color-mix(in oklch, var(--admin-primary), black 35%) !important;
  color: var(--admin-primary) !important;
}

/* ── Changelist toolbar & filters ────────────────────────────────────────── */
html.dark body.change-list #changelist-search > div,
html.dark body.change-list #toolbar form > div,
html.dark body.change-list #changelist .lg\:border.lg\:p-3 {
  background: var(--admin-surface-raised) !important;
  border-color: var(--admin-border) !important;
}

html.dark body.change-list #changelist-filter,
html.dark body.change-list #changelist-filter details,
html.dark body.change-list .changelist-filter {
  background: var(--admin-surface-raised) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark body.change-list #changelist-filter h2,
html.dark body.change-list #changelist-filter h3,
html.dark body.change-list #changelist-filter li,
html.dark body.change-list #changelist-filter a {
  color: var(--admin-foreground) !important;
}

html.dark body.change-list #changelist-filter a:hover,
html.dark body.change-list #changelist-filter a.selected {
  background: color-mix(in oklch, var(--admin-primary), black 55%) !important;
  color: #ffffff !important;
}

html.dark body.change-list .actions,
html.dark body.change-list .paginator,
html.dark body.change-list .xfull {
  background: transparent !important;
  color: var(--admin-foreground) !important;
}

html.dark body.change-list #changelist .actions select,
html.dark body.change-list .paginator a,
html.dark body.change-list .paginator span {
  color: var(--admin-foreground) !important;
}

/* ── Dropdowns & popovers ────────────────────────────────────────────────── */
html.dark nav.absolute.bg-white,
html.dark .bg-white.border.border-base-200,
html.dark .shadow-lg.bg-white {
  background: var(--admin-surface-raised) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark .icam-admin-theme-switch nav a:hover,
html.dark nav a.hover\:bg-base-100:hover {
  background: color-mix(in oklch, var(--admin-accent-soft), black 12%) !important;
  color: var(--admin-foreground) !important;
}

/* ── Admin appearance settings page ─────────────────────────────────────── */
html.dark .appearance-panel {
  background: color-mix(in oklch, var(--admin-background), white 4%) !important;
  border-color: var(--admin-border) !important;
}

html.dark .appearance-preset,
html.dark .appearance-preview,
html.dark .appearance-preview__sidebar,
html.dark .appearance-preview__main,
html.dark .appearance-preview__card,
html.dark .appearance-display-mode .border-b {
  background: var(--admin-surface-raised) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark .appearance-preview__nav {
  color: var(--admin-muted-fg) !important;
}

html.dark .appearance-preview__nav.is-active {
  color: var(--admin-primary) !important;
}

html.dark .appearance-preview input {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

/* ── Submit row & misc Unfold surfaces ───────────────────────────────────── */
html.dark .submit-row,
html.dark .sticky,
html.dark .bg-base-50,
html.dark .bg-base-100 {
  background-color: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
}

html.dark .text-font-subtle-light,
html.dark .text-subtle,
html.dark .help,
html.dark .quiet,
html.dark p.help {
  color: var(--admin-muted-fg) !important;
}

html.dark .breadcrumbs,
html.dark .breadcrumbs a {
  color: var(--admin-muted-fg) !important;
}

html.dark span.bg-primary-100,
html.dark .bg-primary-50 {
  background: color-mix(in oklch, var(--admin-primary), black 65%) !important;
  color: color-mix(in oklch, var(--admin-primary), white 40%) !important;
}

/* Select2 / autocomplete widgets */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-dropdown {
  background: var(--admin-surface) !important;
  border-color: var(--admin-border) !important;
  color: var(--admin-foreground) !important;
}

html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: color-mix(in oklch, var(--admin-primary), black 40%) !important;
  color: #ffffff !important;
}

/* Dark mode: filled buttons still need white labels (beats muted text utilities) */
html.dark body:not(.icam-admin-login) :is(a, button, input[type="submit"], input[type="button"], .button):is(
  .bg-primary-500,
  .bg-primary-600,
  .bg-primary-700,
  .bg-red-500,
  .bg-red-600,
  .bg-red-700,
  .bg-rose-500,
  .bg-rose-600,
  .bg-rose-700,
  .bg-green-500,
  .bg-green-600,
  .bg-green-700,
  .bg-emerald-500,
  .bg-emerald-600,
  .bg-emerald-700,
  .icam-admin-btn-primary,
  .icam-admin-btn-success
),
html.dark body:not(.icam-admin-login) :is(a, button, input[type="submit"])[class*="bg-primary-"]:not(.bg-primary-50):not(.bg-primary-100),
html.dark body:not(.icam-admin-login) :is(a, button, input[type="submit"])[class*="bg-red-"]:not(.bg-red-50):not(.bg-red-100),
html.dark body:not(.icam-admin-login) .submit-row input.default,
html.dark body:not(.icam-admin-login) input[type="submit"].default {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.dark body:not(.icam-admin-login) :is(a, button)[class*="bg-primary-"]:not(.bg-primary-50) :is(span, i, svg, .material-symbols-outlined),
html.dark body:not(.icam-admin-login) :is(a, button)[class*="bg-red-"]:not(.bg-red-50) :is(span, i, svg, .material-symbols-outlined),
html.dark body:not(.icam-admin-login) :is(a, button).bg-primary-600 :is(span, i, svg, .material-symbols-outlined),
html.dark body:not(.icam-admin-login) :is(a, button).bg-red-600 :is(span, i, svg, .material-symbols-outlined) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: currentColor !important;
}