/* =====================================================================
   TGILP MIS — theme.css
   Dark theme. Redefines the design tokens from styles.css under
   html[data-theme="dark"]; components inherit through the tokens, so
   only the few places with fixed colours need overrides below.
   Toggle: js/theme.js (button [data-action="toggle-theme"]).
   ===================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --c-navy: #2C64A3;            /* primary actions stay readable on dark surfaces */
  --c-navy-900: #0A1424;
  --c-navy-700: #234F82;
  --c-blue: #7DB3E8;
  --c-teal: #2DB5A4;
  --c-gold: #E2B94A;
  --c-success: #45BE66;
  --c-warning: #F0A040;
  --c-critical: #EC6B5E;

  --c-bg: #0B1626;
  --c-surface: #12223A;
  --c-surface-2: #172A45;
  --c-text: #E2E8F0;
  --c-text-2: #9FB0C6;
  --c-text-3: #6E829C;
  --c-border: #22374F;
  --c-border-strong: #31496A;
  --c-ink: #F1F5FA;
  --c-hover: #18304F;
  --c-sidebar: #0A1424;
  --c-panel-bg: #12223A; --c-panel-head: #182D4B; --c-panel-border: #2E4766;
  --c-th-bg: #1F3D63;  --c-th-hover: #2A4F7E;  --c-th-text: #F1F5FA;
  --c-band: #152740;   --c-row-hover: #1C3555; --c-row-line: #22374F; --c-tfoot: #1A3150;
  --c-on-tint-gold: #F0D489;
  --c-on-tint-warning: #F5BC7A;

  --t-navy: rgba(125, 179, 232, 0.14);
  --t-blue: rgba(125, 179, 232, 0.14);
  --t-teal: rgba(45, 181, 164, 0.16);
  --t-gold: rgba(226, 185, 74, 0.15);
  --t-success: rgba(69, 190, 102, 0.15);
  --t-warning: rgba(240, 160, 64, 0.15);
  --t-critical: rgba(236, 107, 94, 0.16);

  --heat-1: #15283D;
  --heat-2: #163F46;
  --heat-3: #175A59;
  --heat-4: #1C7C71;
  --heat-5: #2DB5A4;

  --chart-1: #7DB3E8; --chart-2: #2DB5A4; --chart-3: #E2B94A; --chart-4: #4A86C5;
  --chart-5: #8FD3C8; --chart-6: #C29A4A; --chart-7: #8696AD;
  --chart-grid: #1E3350;
  --chart-tooltip: #040B16;

  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 3px rgba(125, 179, 232, 0.45);

  --bs-body-color: var(--c-text);
  --bs-body-bg: var(--c-bg);
  --bs-border-color: var(--c-border);
  --bs-secondary-bg: var(--c-surface-2);
  --bs-tertiary-bg: var(--c-surface-2);
  --bs-emphasis-color: var(--c-ink);
  --bs-link-color: var(--c-blue);
  --bs-link-color-rgb: 125, 179, 232;
  --bs-link-hover-color: #A9CCF0;
}

/* Fixed-colour spots */
html[data-theme="dark"] .heat-1,
html[data-theme="dark"] .heat-2,
html[data-theme="dark"] .heat-3 { color: #D7EFEB; }
html[data-theme="dark"] .heat-4,
html[data-theme="dark"] .heat-5 { color: #fff; }
html[data-theme="dark"] .heat-5 { color: #06231F; }
html[data-theme="dark"] .demo-ribbon { border-bottom-color: rgba(226, 185, 74, 0.35); color: #F0D489; }
html[data-theme="dark"] .demo-ribbon span.note { color: #D9C27F; }
html[data-theme="dark"] .app-footer strong { color: #F0D489; }
html[data-theme="dark"] .pw-conv.is-low { background: rgba(236, 107, 94, 0.12); border-color: rgba(236, 107, 94, 0.45); }
html[data-theme="dark"] .pw-conv.is-mid { background: rgba(240, 160, 64, 0.12); border-color: rgba(240, 160, 64, 0.45); color: #F5BC7A; }
html[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--c-surface-2); color: var(--c-ink); }
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .toast { background-color: var(--c-surface); color: var(--c-text); }
html[data-theme="dark"] .dropdown-item { color: var(--c-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: var(--c-hover); color: var(--c-ink); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .official-banner { background: linear-gradient(90deg, #0F1E33, #12233B 60%, #10203A); }
html[data-theme="dark"] .ob-logo { background: #fff; }
html[data-theme="dark"] .text-body { color: var(--c-ink) !important; }

/* Smooth hand-over between themes, without animating on first paint */
html.theme-ready body,
html.theme-ready .panel,
html.theme-ready .kpi,
html.theme-ready .app-sidebar,
html.theme-ready .topbar { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  html.theme-ready body, html.theme-ready .panel, html.theme-ready .kpi,
  html.theme-ready .app-sidebar, html.theme-ready .topbar { transition: none; }
}