/* ═══════════════════════════════════════════════════════════════════
   ERP THEME VARIANTS — selectable colour themes (per-tenant)
   ═══════════════════════════════════════════════════════════════════
   Each theme is a set of --erp-* token overrides layered ON TOP of the
   base palette in erp-themes.css. It is scoped by a data-theme attribute
   on <html> (set server-side in the layout), so it never flashes.

   • Light variant  →  html[data-theme="<id>"]
   • Dark variant   →  html[data-theme="<id>"].dark   (wins over html.dark
                        by specificity: attribute + class)

   The DEFAULT theme has NO block here on purpose — it falls through to the
   base :root / html.dark palette, so the current look is unchanged. Only
   brand tokens (primary / accent / info / chart / surfaces / text / border)
   are re-skinned; the semantic success / warning / danger tokens stay shared
   so their traffic-light meaning is constant across themes.

   Catalog + validation live in config/themes.php (keys must match the
   data-theme ids below).
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   VISION — the Vision 2031 tracker look (plan §4)
   navy #212844 · deep blue #0079B0 · sky #01A1DF · RAG green / amber / red
   ═══════════════════════════════════════════════════════════════════
   Unlike the other variants, Vision also re-skins a few COMPONENTS (navy
   sidebar + header band, navy table headers, cards with a deep-blue top
   bar, tracker pills). Those rules sit in the "components" section below,
   all scoped by html[data-theme="vision"], and carry !important where the
   base rule in erp-overrides.css does (that file loads after this one).
   The RAG tokens follow the tracker pills, so status colours match it. */

/* ─── Vision · LIGHT tokens ──────────────────────────────────────── */
html[data-theme="vision"] {
  --vision-navy:            #212844;
  --vision-navy-2:          #2E3658;   /* controls on the navy band */
  --vision-navy-3:          #4A5378;   /* control borders on the navy band */
  --vision-deep:            #0079B0;
  --vision-sky:             #01A1DF;
  --vision-sky-soft:        #7FD0F2;
  --vision-on-navy:         rgba(255, 255, 255, 0.82);
  --vision-on-navy-muted:   rgba(255, 255, 255, 0.55);
  --vision-on-navy-hover:   rgba(255, 255, 255, 0.08);
  --vision-on-navy-rule:    rgba(255, 255, 255, 0.10);
  --vision-table-head:      #212844;
  --vision-reason-bg:       #FFF8E6;
  --vision-reason-border:   #F0D58A;

  /* RGB channels — feed shadows, rings, glass */
  --erp-primary-deep-rgb:   33, 40, 68;      /* navy */
  --erp-primary-glow-rgb:   1, 161, 223;     /* sky */
  --erp-shadow-tint-rgb:    20, 24, 40;
  --erp-glass-tint-rgb:     227, 242, 250;   /* --light */
  --erp-glass-border-rgb:   33, 40, 68;
  --erp-success-rgb:        46, 139, 87;
  --erp-warning-rgb:        217, 154, 0;
  --erp-danger-rgb:         200, 64, 47;

  /* Surfaces — tracker --bg / white cards */
  --erp-bg:             #ffffff;
  --erp-bg-page:        #F7F7F9;
  --erp-bg-muted:       #EEF0F4;
  --erp-bg-accent:      #E6E8EE;     /* tracker group rows */

  /* Text — ink body, navy headings, tracker grey */
  --erp-text:           #212844;
  --erp-text-medium:    #2B2B2B;
  --erp-text-secondary: #464B58;
  --erp-text-tertiary:  #6B6F7B;
  --erp-text-faint:     #9AA0AA;

  /* Borders — tracker --rule */
  --erp-border:         #DADCE2;
  --erp-border-strong:  #C3C7D0;
  --erp-border-row:     #ECEDF0;

  /* Primary — deep blue buttons, sky focus ring */
  --erp-primary:        #0079B0;
  --erp-primary-fg:     #ffffff;
  --erp-primary-hover:  #00658F;
  --erp-primary-ring:   rgba(1, 161, 223, 0.35);
  --erp-primary-light:  #E3F2FA;

  /* RAG — tracker pills (G #DFF1E6 / A #FBEFD0 / R #F7DEDA) */
  --erp-success-bg:      #DFF1E6;
  --erp-success-bg-solid:#2E8B57;
  --erp-success-bg-dark: #246F45;
  --erp-success-border:  #A9D6BB;
  --erp-success-text:    #2E8B57;
  --erp-success-icon:    #2E8B57;
  --erp-success-light:   #4FB37D;
  --erp-warning-bg:      #FBEFD0;
  --erp-warning-bg-solid:#D99A00;
  --erp-warning-bg-dark: #B07D00;
  --erp-warning-border:  #F0D58A;
  --erp-warning-text:    #946800;
  --erp-warning-icon:    #D99A00;
  --erp-danger-bg:       #F7DEDA;
  --erp-danger-bg-solid: #C8402F;
  --erp-danger-bg-dark:  #A73424;
  --erp-danger-border:   #EDB5AC;
  --erp-danger-text:     #C8402F;
  --erp-danger-icon:     #C8402F;
  --erp-danger-light:    #DE6B5C;
  --erp-danger-strong:   #8F2A1E;

  /* Info / accent — sky */
  --erp-info-bg:        #E3F2FA;
  --erp-info-bg-mid:    #CDE9F6;
  --erp-info-bg-solid:  #01A1DF;
  --erp-info-bg-dark:   #0079B0;
  --erp-info-border:    #A6D8EF;
  --erp-info-text:      #005E8A;
  --erp-info-icon:      #01A1DF;
  --erp-info-light:     #7FD0F2;
  --erp-accent-bg:      #E3F2FA;
  --erp-accent-bg-mid:  #CDE9F6;
  --erp-accent-border:  #A6D8EF;
  --erp-accent-text:    #005E8A;
  --erp-accent-icon:    #01A1DF;
  --erp-accent-light:   #7FD0F2;

  --erp-scrollbar:       #DADCE2;
  --erp-scrollbar-hover: #B5BAC6;
  --erp-overlay:         rgba(20, 24, 40, 0.45);   /* tracker modal backdrop */
  --erp-gradient-from:   #ffffff;

  /* Charts — navy, deep, sky, then RAG + grey */
  --erp-chart-1: #212844;
  --erp-chart-2: #0079B0;
  --erp-chart-3: #01A1DF;
  --erp-chart-4: #2E8B57;
  --erp-chart-5: #D99A00;
  --erp-chart-6: #C8402F;
  --erp-chart-7: #7FD0F2;
  --erp-chart-8: #9AA0AA;
  --erp-chart-1-light: #4A5378;
  --erp-chart-2-light: #7FD0F2;
  --erp-chart-label: #6B6F7B;
}

/* ─── Vision · DARK tokens (the navy surfaces deepen) ────────────── */
html[data-theme="vision"].dark {
  --vision-navy:            #10142A;
  --vision-navy-2:          #1E2440;
  --vision-navy-3:          #343C5E;
  --vision-table-head:      #10142A;
  --vision-reason-bg:       rgba(217, 154, 0, 0.12);
  --vision-reason-border:   rgba(240, 213, 138, 0.35);

  --erp-primary-deep-rgb:   1, 161, 223;
  --erp-primary-glow-rgb:   1, 161, 223;
  --erp-shadow-tint-rgb:    6, 8, 18;
  --erp-glass-tint-rgb:     30, 36, 64;
  --erp-glass-border-rgb:   1, 161, 223;
  --erp-surface-glass-rgb:  27, 33, 56;

  /* Surfaces — deep navy */
  --erp-bg:             #1B2138;
  --erp-bg-page:        #141829;
  --erp-bg-muted:       #232A45;
  --erp-bg-accent:      #2E3658;

  /* Text — near-white, cool tint */
  --erp-text:           #F1F4FA;
  --erp-text-medium:    #DDE2EE;
  --erp-text-secondary: #B9C0D2;
  --erp-text-tertiary:  #929AB0;
  --erp-text-faint:     #6E768E;

  /* Borders */
  --erp-border:         #343C5E;
  --erp-border-strong:  #4A5378;
  --erp-border-row:     #262D4A;

  /* Primary — a lighter deep blue that still carries white text */
  --erp-primary:        #0B8AC0;
  --erp-primary-fg:     #ffffff;
  --erp-primary-hover:  #1A9DD4;
  --erp-primary-ring:   rgba(1, 161, 223, 0.40);
  --erp-primary-light:  rgba(1, 161, 223, 0.18);

  /* Info / accent — sky */
  --erp-info-bg:        rgba(1, 161, 223, 0.16);
  --erp-info-bg-mid:    rgba(1, 161, 223, 0.22);
  --erp-info-bg-solid:  #0B8AC0;
  --erp-info-bg-dark:   #0079B0;
  --erp-info-border:    rgba(1, 161, 223, 0.40);
  --erp-info-text:      #7FD0F2;
  --erp-info-icon:      #33B5E8;
  --erp-info-light:     #7FD0F2;
  --erp-accent-bg:      rgba(1, 161, 223, 0.10);
  --erp-accent-bg-mid:  rgba(1, 161, 223, 0.16);
  --erp-accent-border:  rgba(1, 161, 223, 0.28);
  --erp-accent-text:    #7FD0F2;
  --erp-accent-icon:    #33B5E8;
  --erp-accent-light:   #7FD0F2;

  --erp-overlay:        rgba(4, 6, 14, 0.6);
  --erp-gradient-from:  #1B2138;

  /* Charts — brighter for dark navy */
  --erp-chart-1: #7FD0F2;
  --erp-chart-2: #33B5E8;
  --erp-chart-3: #0B8AC0;
  --erp-chart-4: #4FB37D;
  --erp-chart-5: #F0B93A;
  --erp-chart-6: #E0705F;
  --erp-chart-7: #B9C0D2;
  --erp-chart-8: #929AB0;
  --erp-chart-label: #929AB0;
  --erp-chart-border: #141829;
}

/* ═══════════════════════════════════════════════════════════════════
   VISION — components
   ═══════════════════════════════════════════════════════════════════ */

/* Type — tracker font stack (14px body is Tailwind's text-sm already) */
html[data-theme="vision"] body {
  font-family: 'Segoe UI', Calibri, Arial, ui-sans-serif, system-ui, sans-serif;
}

/* ─── Navy header band ──────────────────────────────────────────── */
html[data-theme="vision"] .erp-header {
  background-color: var(--vision-navy) !important;
  border-bottom: 1px solid var(--vision-navy) !important;
  box-shadow: 0 1px 3px rgba(20, 24, 40, 0.25) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="vision"] .erp-header #erp-breadcrumb,
html[data-theme="vision"] .erp-header #erp-breadcrumb * {
  color: var(--vision-on-navy) !important;
}
html[data-theme="vision"] .erp-header #erp-breadcrumb a:hover {
  color: #ffffff !important;
}
/* Icon buttons sitting on the band (hamburger, dark toggle, layout, bell, user) —
   only the band's own buttons (child depth ≤ 2), never the white dropdowns. */
html[data-theme="vision"] .erp-header > button,
html[data-theme="vision"] .erp-header > div > button,
html[data-theme="vision"] .erp-header > form > button:not(.bg-amber-500),
html[data-theme="vision"] .erp-header > div > button span:not(#notif-count),
html[data-theme="vision"] .erp-header > div > button i,
html[data-theme="vision"] .erp-header > button i {
  color: var(--vision-on-navy) !important;
}
html[data-theme="vision"] .erp-header > button:hover,
html[data-theme="vision"] .erp-header > div > button:hover {
  background-color: var(--vision-on-navy-hover) !important;
  color: #ffffff !important;
}
/* Bordered selectors on the band (site, year, impersonate) — tracker header selects */
html[data-theme="vision"] .erp-header > div > button.border {
  background-color: var(--vision-navy-2) !important;
  border-color: var(--vision-navy-3) !important;
  color: #ffffff !important;
}
html[data-theme="vision"] .erp-header > div > button.border:hover {
  background-color: var(--vision-navy-3) !important;
}

/* ─── Navy sidebar ───────────────────────────────────────────────── */
html[data-theme="vision"] .erp-sidebar {
  background-color: var(--vision-navy) !important;
  border-right: 1px solid var(--vision-navy) !important;
  box-shadow: 1px 0 3px rgba(20, 24, 40, 0.2) !important;
}
html[data-theme="vision"] .erp-sidebar .erp-sidebar-header,
html[data-theme="vision"] .erp-sidebar #drawer-control-row,
html[data-theme="vision"] .erp-sidebar .border-zinc-200,
html[data-theme="vision"] .erp-sidebar .border-zinc-100 {
  border-color: var(--vision-on-navy-rule) !important;
}
/* Every link / group / toggle text + icon on the navy surface */
html[data-theme="vision"] .erp-sidebar a:not(.bg-zinc-900),
html[data-theme="vision"] .erp-sidebar button:not(.bg-zinc-900),
html[data-theme="vision"] .erp-sidebar a:not(.bg-zinc-900) span,
html[data-theme="vision"] .erp-sidebar button:not(.bg-zinc-900) span,
html[data-theme="vision"] .erp-sidebar .erp-sidebar-group-title,
html[data-theme="vision"] .erp-sidebar .text-zinc-400,
html[data-theme="vision"] .erp-sidebar .text-zinc-500,
html[data-theme="vision"] .erp-sidebar .text-zinc-900 {
  color: var(--vision-on-navy) !important;
}
html[data-theme="vision"] .erp-sidebar a:not(.bg-zinc-900) i,
html[data-theme="vision"] .erp-sidebar button:not(.bg-zinc-900) i,
html[data-theme="vision"] .erp-sidebar .erp-sidebar-link:not(.bg-zinc-900) .erp-nav-icon,
html[data-theme="vision"] .erp-sidebar .erp-sidebar-submenu a:not(.bg-zinc-900) i:not(.erp-sidebar-label) {
  color: var(--vision-sky-soft) !important;
}
html[data-theme="vision"] .erp-sidebar .erp-chevron,
html[data-theme="vision"] .erp-sidebar .erp-module-chevron,
html[data-theme="vision"] .erp-sidebar .erp-page-chevron {
  color: var(--vision-on-navy-muted) !important;
}
html[data-theme="vision"] .erp-sidebar a:not(.bg-zinc-900):hover,
html[data-theme="vision"] .erp-sidebar button:not(.bg-zinc-900):hover {
  background-color: var(--vision-on-navy-hover) !important;
  color: #ffffff !important;
}
html[data-theme="vision"] .erp-sidebar a:not(.bg-zinc-900):hover span,
html[data-theme="vision"] .erp-sidebar button:not(.bg-zinc-900):hover span {
  color: #ffffff !important;
}
/* Active page — deep blue with the tracker's sky accent */
html[data-theme="vision"] .erp-sidebar a.bg-zinc-900,
html[data-theme="vision"] .erp-sidebar button.bg-zinc-900 {
  background: var(--vision-deep) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--vision-sky) !important;
}
html[data-theme="vision"] .erp-sidebar a.bg-zinc-900 i,
html[data-theme="vision"] .erp-sidebar a.bg-zinc-900 span {
  color: #ffffff !important;
}

/* ─── Logos on the navy band / sidebar: always the white logo ─────── */
html[data-theme="vision"] .erp-header .erp-logo-light,
html[data-theme="vision"] .erp-sidebar .erp-logo-light {
  display: none !important;
}
html[data-theme="vision"] .erp-header .erp-logo-dark,
html[data-theme="vision"] .erp-sidebar .erp-logo-dark {
  display: inline-block !important;
}

/* ─── Navy table headers (DataTables + plain tables in cards) ─────── */
html[data-theme="vision"] table.dataTable thead th,
html[data-theme="vision"] table.dataTable thead td {
  background: var(--vision-table-head) !important;   /* shorthand: beats the base gradient */
  color: #ffffff !important;
  border-bottom: 1px solid var(--vision-table-head) !important;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
html[data-theme="vision"] table.dataTable thead th .dt-column-order::before,
html[data-theme="vision"] table.dataTable thead th .dt-column-order::after {
  color: rgba(255, 255, 255, 0.7) !important;
}
html[data-theme="vision"] table.dataTable tbody tr:hover {
  background-color: var(--erp-primary-light) !important;
}

/* ─── Cards: 3px deep-blue top border, tracker radius ─────────────── */
html[data-theme="vision"] #erp-content .rounded-lg.border.bg-white.shadow-sm {
  border-top: 3px solid var(--vision-deep) !important;
  border-radius: 4px;
}
html[data-theme="vision"].dark #erp-content .rounded-lg.border.bg-white.shadow-sm {
  border-top-color: var(--erp-primary) !important;
}

/* ─── Reason box (remark prompt) — tracker pale yellow ────────────── */
html[data-theme="vision"] textarea.erp-prompt-input,
html[data-theme="vision"] textarea.remarks-field,
html[data-theme="vision"] textarea[name="user_remark"] {
  background-color: var(--vision-reason-bg) !important;
  border-color: var(--vision-reason-border) !important;
}

/* ─── Login hero — navy into deep blue ────────────────────────────── */
html[data-theme="vision"] .auth-hero,
html[data-theme="vision"] .auth-hero-mobile {
  background: linear-gradient(135deg, #212844 0%, #1F3A66 55%, #0079B0 100%);
}
html[data-theme="vision"].dark .auth-hero,
html[data-theme="vision"].dark .auth-hero-mobile {
  background: linear-gradient(135deg, #10142A 0%, #182447 60%, #0B5F8A 100%);
}
/* The navy "S" mark (favicon) sits on the navy hero — show it white there */
html[data-theme="vision"] .auth-hero .auth-glass-logo img,
html[data-theme="vision"] .auth-hero-mobile .auth-glass-logo img {
  filter: brightness(0) invert(1);
}
html[data-theme="vision"].dark .erp-logo-wrap--login-card img[src$="favicon.png"] {
  filter: brightness(0) invert(1);
}