/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 — DARK MODE
   Ping V3 | May 2026
   Triggers on OS-level dark mode preference (prefers-color-scheme).
   Strategy:
     1. Override all :root design tokens
     2. Explicitly fix surfaces that use hardcoded #fff / light values
     3. Invert status badge colours to work on dark backgrounds
     4. Adjust auth page for dark context
   The sidebar is already dark navy — it looks GREAT in dark mode as-is.
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {

  /* ────────────────────────────────────────────────────────────────
     1. ROOT TOKEN OVERRIDES
     --brand and --brand-bright are kept at their original values
     because they are used as button BACKGROUNDS (not text colour),
     so dark navy buttons stay legible on dark surfaces.
  ─────────────────────────────────────────────────────────────────*/
  :root {
    color-scheme: dark;

    /* Background layers */
    --bg:           #0d1521;
    --bg-soft:      #121d2e;

    /* Surface layers */
    --surface:      #162033;
    --surface-soft: #1c2b43;

    /* Text */
    --ink:          #d8e8ff;
    --muted:        #8099be;

    /* Borders & dividers */
    --line:         #283c5c;

    /* Brand tints — darken for dark bg */
    --brand-soft:   #19264a;

    /* Danger — stays red but slightly brighter for legibility */
    --danger:       #e0385a;

    /* Shadows deepen significantly on dark surfaces */
    --shadow:       0 18px 34px -22px rgba(0, 0, 0, 0.60);
    --shadow-sm:    0 4px 12px -6px  rgba(0, 0, 0, 0.35);
    --shadow-md:    0 8px 20px -8px  rgba(0, 0, 0, 0.45);
    --shadow-lg:    0 30px 60px -30px rgba(0, 0, 0, 0.70);
  }


  /* ────────────────────────────────────────────────────────────────
     2. BODY BACKGROUND
     Replace the light radial gradients with dark equivalents.
  ─────────────────────────────────────────────────────────────────*/
  body {
    background:
      radial-gradient(circle at 8% -10%,  rgba(30,  60, 120, 0.22) 0, transparent 36%),
      radial-gradient(circle at 90% 0%,   rgba(14,  80,  60, 0.18) 0, transparent 34%),
      var(--bg) !important;
  }


  /* ────────────────────────────────────────────────────────────────
     3. HARD WHITE SURFACES
     These elements use hardcoded #fff or near-white gradients
     that do not respond to token changes.
  ─────────────────────────────────────────────────────────────────*/

  /* Tables */
  .table-wrap {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  .table-sticky thead th,
  thead .sticky-col {
    background: var(--surface-soft) !important;
    border-bottom-color: var(--line) !important;
  }

  /* Sticky columns in scrollable tables */
  .sticky-col {
    background: var(--surface) !important;
  }

  /* Even rows inherit from --surface-soft token (already overridden above) */
  tbody tr:nth-child(even) {
    background: var(--surface-soft) !important;
  }

  tbody tr:hover {
    background: rgba(53, 91, 216, 0.12) !important;
  }

  /* ── Modal & Drawer surfaces ── */
  .modal-panel,
  .modal-panel--task-create,
  .modal-panel--task-action,
  .modal-panel--confirm-complete {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  .drawer-panel {
    background: var(--surface) !important;
    border-left-color: var(--line) !important;
  }

  /* Backdrops: deeper on dark */
  .modal-backdrop,
  .drawer-backdrop,
  .mobile-nav-backdrop {
    background: rgba(5, 10, 22, 0.82) !important;
  }

  /* ── Overflow / popup menus ── */
  .task-row-menu-pop {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.55) !important;
  }

  .task-client-suggestions,
  .assignee-list {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  /* ── Cards ── */
  .kpi-pill {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  .kpi-card,
  .kpi-card-btn {
    background: linear-gradient(170deg, var(--surface), var(--surface-soft)) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .master-card {
    background: linear-gradient(170deg, var(--surface), var(--surface-soft)) !important;
    border-color: var(--line) !important;
  }

  .master-total {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  .knowledge-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  /* Notice lite cards */
  .notice-lite-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  .notice-lite-card.total    { background: linear-gradient(170deg, #182646, #152040) !important; border-color: rgba(53,91,216,.35)   !important; }
  .notice-lite-card.overdue  { background: linear-gradient(170deg, #2c1810, #241410) !important; border-color: rgba(224,56,90,.35)   !important; }
  .notice-lite-card.critical { background: linear-gradient(170deg, #2c1020, #231020) !important; border-color: rgba(224,56,90,.30)   !important; }
  .notice-lite-card.awaiting { background: linear-gradient(170deg, #291f0f, #201910) !important; border-color: rgba(168,106,23,.35)  !important; }
  .notice-lite-card.closed   { background: linear-gradient(170deg, #112519, #0e1e15) !important; border-color: rgba(17,123,102,.35)  !important; }

  /* Aging cards */
  .aging-card,
  .notice-aging-card {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .aging-bucket-0_7,  .notice-aging-0_5  { background: linear-gradient(170deg, #122519, #0e1e15) !important; border-color: rgba(17,123,102,.35) !important; }
  .aging-bucket-8_15, .notice-aging-6_10 { background: linear-gradient(170deg, #271e0e, #20180c) !important; border-color: rgba(168,106,23,.30) !important; }
  .aging-bucket-16_30,.notice-aging-11_20{ background: linear-gradient(170deg, #2b180e, #23130c) !important; border-color: rgba(200,100,50,.30) !important; }
  .aging-bucket-30_plus,.notice-aging-30_plus { background: linear-gradient(170deg, #7a1030, #5c0c24) !important; border-color: rgba(224,56,90,.50) !important; }
  .aging-bucket-30_plus strong,
  .aging-bucket-30_plus span,
  .notice-aging-30_plus strong,
  .notice-aging-30_plus span { color: #ffd0da !important; }

  /* Detail summary divs */
  .detail-summary-grid div {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  /* ── Form surfaces ── */
  .task-filter-shell,
  .task-filter-advanced {
    background: linear-gradient(180deg, var(--surface-soft), var(--surface)) !important;
    border-color: var(--line) !important;
  }

  .task-form-section {
    background: linear-gradient(180deg, var(--surface), var(--surface-soft)) !important;
    border-color: var(--line) !important;
  }

  .task-fixed-filter {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
  }

  .task-inline-note {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
  }

  .task-step {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
  }

  .task-step.active {
    background: linear-gradient(135deg, rgba(53,91,216,.20), var(--surface)) !important;
    border-color: rgba(53,91,216,.45) !important;
    color: #9ab4f0 !important;
  }

  .task-step.done {
    background: rgba(17,123,102,.15) !important;
    border-color: rgba(17,123,102,.40) !important;
  }

  .task-step span {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
  }

  /* Task create footer (the sticky bottom bar in modal) */
  .task-create-footer {
    background: var(--surface) !important;
    border-top-color: var(--line) !important;
    box-shadow: 0 -8px 24px -16px rgba(0,0,0,.40) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Task create modal header */
  .modal-panel--task-create .drawer-head {
    background: rgba(22, 32, 51, 0.92) !important;
    border-bottom-color: var(--line) !important;
  }

  /* Task stepper (sticky inside task create modal) */
  .task-stepper {
    background: rgba(18, 29, 46, 0.90) !important;
    border-color: var(--line) !important;
  }

  /* ── Inputs and selects ── */
  input:not([type=checkbox]),
  select,
  textarea {
    background: var(--surface-soft) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  input:not([type=checkbox]):focus,
  select:focus,
  textarea:focus {
    border-color: var(--brand-bright) !important;
    box-shadow: 0 0 0 3px rgba(53, 91, 216, 0.20) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--muted) !important;
    opacity: 0.7 !important;
  }

  /* Required field gradient */
  .task-field input:required,
  .task-field select:required {
    background: var(--surface-soft) !important;
  }

  /* ── Ghost button ── */
  .ghost-btn {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
  }

  .ghost-btn:hover {
    background: var(--surface-soft) !important;
  }

  /* ── Segmented controls ── */
  .segmented button {
    background: var(--surface-soft) !important;
    color: var(--muted) !important;
    border-color: var(--line) !important;
  }

  .segmented button.active {
    background: var(--brand-soft) !important;
    border-color: rgba(53,91,216,.45) !important;
    color: #9ab4f0 !important;
  }

  /* ── Page note ── */
  .page-note {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
  }

  /* ── Panel hero / module hero ── */
  .module-hero {
    background: linear-gradient(138deg, var(--surface-soft), var(--surface)) !important;
  }

  .master-hero {
    background: linear-gradient(140deg, var(--surface-soft), var(--surface)) !important;
  }

  /* ── Dashbboard ── */
  .dashboard-hero-greeting {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
  }

  .danger-alert {
    background: linear-gradient(135deg, rgba(224,56,90,.18), rgba(224,56,90,.06)) !important;
    border-color: rgba(224,56,90,.40) !important;
    color: #f4889e !important;
  }

  /* ── Master tab buttons ── */
  .master-tab {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
  }

  .master-tab.active {
    background: var(--brand-soft) !important;
    border-color: rgba(53,91,216,.40) !important;
  }

  /* ── Complete confirm panel ── */
  .complete-confirm-panel {
    background: linear-gradient(135deg, rgba(224,56,90,.12), transparent 48%), var(--surface) !important;
    border-color: rgba(224,56,90,.30) !important;
  }

  .complete-confirm-title { color: var(--ink) !important; }
  .complete-confirm-note  { color: var(--muted) !important; }

  /* ── Chip row ── */
  .chip-btn {
    background: var(--brand-soft) !important;
    border-color: rgba(53,91,216,.35) !important;
    color: #9ab4f0 !important;
  }

  /* ── Dept workload bar ── */
  .dept-workload-row {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }

  .dept-workload-bar {
    background: var(--surface-soft) !important;
  }

  /* ── Pagination bar ── */
  .premium-table-footer,
  .pagination-bar {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
  }


  /* ────────────────────────────────────────────────────────────────
     4. STATUS TAGS — dark-friendly semantic colours
     Approach: semi-transparent background tints + lighter text.
     Maintains semantic meaning (green=good, red=bad, amber=pending).
  ─────────────────────────────────────────────────────────────────*/
  .tag {
    background: var(--surface-soft) !important;
    border: 1px solid var(--line) !important;
    color: var(--muted) !important;
  }

  .tag.pending           { background: rgba(168,106, 23,.22) !important; color: #f5c878 !important; border-color: rgba(168,106, 23,.40) !important; }
  .tag.pending_approval  { background: rgba(111, 59,183,.22) !important; color: #c49af8 !important; border-color: rgba(111, 59,183,.40) !important; }
  .tag.pending_client    { background: rgba(168,106, 23,.20) !important; color: #f5c878 !important; border-color: rgba(168,106, 23,.38) !important; }
  .tag.pending_department{ background: rgba( 95, 63,180,.22) !important; color: #c49af8 !important; border-color: rgba( 95, 63,180,.40) !important; }
  .tag.upcoming          { background: rgba( 15,111,145,.22) !important; color: #5fc9e8 !important; border-color: rgba( 15,111,145,.40) !important; }
  .tag.in_progress       { background: rgba( 53, 91,216,.22) !important; color: #8ab5f5 !important; border-color: rgba( 53, 91,216,.40) !important; }
  .tag.completed         { background: rgba( 17,123,102,.22) !important; color: #5fd3ba !important; border-color: rgba( 17,123,102,.40) !important; }
  .tag.cancelled         { background: rgba(224, 56, 90,.20) !important; color: #f4889e !important; border-color: rgba(224, 56, 90,.38) !important; }
  .tag.active            { background: rgba( 17,123,102,.22) !important; color: #5fd3ba !important; border-color: rgba( 17,123,102,.40) !important; }
  .tag.inactive          { background: rgba(224, 56, 90,.20) !important; color: #f4889e !important; border-color: rgba(224, 56, 90,.38) !important; }

  /* Risk chips */
  .risk-chip.internal-overdue { background: rgba(158, 32,56,.25) !important; border-color: rgba(224,56,90,.40)  !important; color: #f4889e !important; }
  .risk-chip.stat-overdue     { background: rgba(140, 90, 0,.25) !important; border-color: rgba(168,106,23,.40) !important; color: #f5c878 !important; }
  .risk-chip.upcoming         { background: rgba( 41, 79,150,.25)!important; border-color: rgba(53,91,216,.40)  !important; color: #8ab5f5 !important; }

  /* Row selected */
  .row-selected {
    background: rgba(53, 91, 216, 0.18) !important;
  }


  /* ────────────────────────────────────────────────────────────────
     5. AUTH PAGE
     The auth page has a purple gradient background — keep it but
     darken significantly. The card needs a dark tint.
  ─────────────────────────────────────────────────────────────────*/
  .auth-page {
    background: linear-gradient(110deg, #2e3480, #312ea0 35%, #2f2468 68%, #2c1c60) !important;
  }

  .auth-card {
    background: rgba(18, 25, 50, 0.88) !important;
    border-color: rgba(130, 150, 210, 0.30) !important;
  }

  .auth-brand-title { color: #b0bfee !important; }
  .auth-firm-name   { color: #8099be !important; }

  .auth-pill {
    background: rgba(17, 123, 102, 0.30) !important;
    color: #5fd3ba !important;
  }

  .form-grid label {
    color: #9ab4d8 !important;
  }

  .auth-submit {
    background: linear-gradient(90deg, #3f52c0, #5240a0) !important;
  }

  /* Auth card inputs */
  .auth-card input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(130, 150, 210, 0.35) !important;
    color: #d8e8ff !important;
  }


  /* ────────────────────────────────────────────────────────────────
     6. PREMIUM LAYER OVERRIDES
     Some premium CSS files use hardcoded values that need dark fixes.
  ─────────────────────────────────────────────────────────────────*/

  /* premium-empty-inline icon */
  .premium-empty-inline::before {
    color: var(--line) !important;
  }

  /* premium-filter-summary */
  .premium-filter-summary span {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
  }

  .premium-table-summary {
    background: linear-gradient(180deg, var(--surface-soft), var(--surface)) !important;
    border-color: var(--line) !important;
  }

  /* premium-table-meta count badge */
  .premium-table-meta b {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
  }

  .premium-table-meta strong {
    color: var(--ink) !important;
  }

  /* Mobile topbar — already dark, just ensure border reads on dark */
  .mobile-topbar {
    border-bottom-color: rgba(53, 91, 216, 0.25) !important;
  }

  /* Notice filter grid */
  .notice-filter-grid input,
  .notice-filter-grid select {
    background: var(--surface-soft) !important;
  }

  /* Sidebar group toggle — sidebar is already dark, minor tweaks */
  .sidebar-group-toggle {
    border-color: rgba(173,195,238,.20) !important;
  }

  /* Scrollbar tinting (webkit) */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
  }

} /* end @media (prefers-color-scheme: dark) */