/* BCS CRM dark theme (the default; "html.dark" is set in base.html before the page paints).
   The pages use a small set of Tailwind colour utilities; this file re-maps each of them for dark mode, so no
   template needs dark: variants. Screen only: printed invoices/estimates/orders always come out light.
   Customer-facing pages (crm/public/...) and emails have their own templates and stay light. */
@media screen {
  html.dark {
    color-scheme: dark;                      /* native selects, date pickers, scrollbars, checkboxes go dark too */
    --bg: #090e1a;
    --surface: #101828;
    --surface-2: #151f33;
    --surface-3: #1b263d;
    --sunken: #0c1322;
    --border: #1e2a40;
    --border-strong: #2a3852;
    --text: #e6ebf4;
    --text-2: #c6d0df;
    --text-3: #a3b0c4;
    --muted: #8796ae;
    --faint: #67768f;
    --accent: #38bdf8;
    --accent-soft: #7dd3fc;
  }

  /* ---------- page, frame, sidebar ---------- */
  html.dark body {
    background: radial-gradient(1100px 520px at 75% -8%, rgba(56, 189, 248, .07), transparent 62%),
                radial-gradient(900px 480px at -10% 105%, rgba(99, 102, 241, .05), transparent 60%), var(--bg);
    background-attachment: fixed;
    color: var(--text-2);
  }
  html.dark *, html.dark ::before, html.dark ::after { border-color: var(--border); }
  html.dark ::selection { background: rgba(56, 189, 248, .3); color: #fff; }
  html.dark h1, html.dark h2, html.dark h3 { color: var(--text); }

  html.dark #nav { background: #060a14; border-right: 1px solid var(--border); }
  html.dark #nav .navlink { color: #aab6c9; transition: background .15s, color .15s; }
  html.dark #nav .navlink:hover { background: rgba(148, 163, 184, .08); color: #fff; }
  html.dark #nav .navlink.bg-slate-800 {         /* current page */
    background: linear-gradient(90deg, rgba(56, 189, 248, .16), rgba(56, 189, 248, .04));
    color: #e0f2fe; box-shadow: inset 2px 0 0 var(--accent);
  }
  html.dark #nav .border-slate-800 { border-color: var(--border); }

  html.dark header.bg-white {
    background: rgba(9, 14, 26, .72); backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px); border-color: var(--border);
  }

  /* ---------- components from base.html ---------- */
  html.dark .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, 0) 120px), var(--surface);
    border-color: var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .7);
  }
  html.dark .btn-primary {
    background: linear-gradient(180deg, #0ea5e9, #0284c7); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px rgba(14, 165, 233, .7);
  }
  html.dark .btn-primary:hover { background: linear-gradient(180deg, #38bdf8, #0ea5e9); }
  html.dark .btn-light { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-2); }
  html.dark .btn-light:hover { background: var(--surface-3); color: #fff; }
  html.dark .btn-dark { background: #24324b; color: #fff; }
  html.dark .btn-dark:hover { background: #2d3d5a; }
  html.dark .lbl { color: var(--muted); }
  html.dark .link { color: var(--accent-soft); }
  html.dark .link:hover { color: #bae6fd; }

  /* every form field, styled with .inp or not */
  html.dark .inp,
  html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
  html.dark select, html.dark textarea {
    background-color: var(--sunken); color: var(--text); border-color: var(--border-strong);
  }
  html.dark input::placeholder, html.dark textarea::placeholder { color: var(--faint); }
  html.dark .inp:focus, html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
    border-color: rgba(56, 189, 248, .6); box-shadow: 0 0 0 3px rgba(56, 189, 248, .18); outline: none;
  }
  html.dark input[type=checkbox], html.dark input[type=radio] { accent-color: var(--accent); }

  /* tables */
  html.dark table.data th { color: var(--muted); border-bottom-color: var(--border); }
  html.dark table.data td { border-bottom-color: #172135; }
  html.dark table.data tr:hover td { background: rgba(56, 189, 248, .045); }
  html.dark table.stack tr { border-bottom-color: var(--border); }
  html.dark table.stack td::before { color: var(--muted); }

  /* ---------- Tailwind utilities used by the templates, re-mapped ---------- */
  /* surfaces */
  html.dark .bg-white { background-color: var(--surface); }
  html.dark .bg-slate-50 { background-color: var(--sunken); }
  html.dark .bg-slate-100 { background-color: var(--surface-3); }
  html.dark .bg-slate-300 { background-color: #33415a; }
  html.dark .bg-slate-800 { background-color: #22304a; }
  html.dark .bg-slate-900 { background-color: var(--bg); }
  html.dark .hover\:bg-white:hover, html.dark .hover\:bg-slate-50:hover { background-color: var(--surface-2); }
  html.dark .hover\:bg-slate-800:hover, html.dark .hover\:bg-slate-900:hover { background-color: #2b3a57; }
  html.dark .hover\:bg-sky-50:hover { background-color: rgba(56, 189, 248, .1); }
  html.dark .shadow-xl, html.dark .shadow-lg { box-shadow: 0 20px 45px -15px rgba(0, 0, 0, .8), 0 0 0 1px var(--border); }

  /* text */
  html.dark .text-slate-800 { color: var(--text); }
  html.dark .text-slate-700 { color: var(--text-2); }
  html.dark .text-slate-600 { color: var(--text-3); }
  html.dark .text-slate-500 { color: var(--muted); }
  html.dark .text-slate-400 { color: var(--faint); }
  html.dark #nav .text-slate-400, html.dark #nav .text-slate-500 { color: #6f7f99; }

  /* borders */
  html.dark .border-slate-200, html.dark .border-slate-800 { border-color: var(--border); }
  html.dark .border-slate-300 { border-color: var(--border-strong); }

  /* sky (brand accent) */
  html.dark .text-sky-600 { color: var(--accent); }
  html.dark .text-sky-700 { color: var(--accent-soft); }
  html.dark .text-sky-800 { color: #bae6fd; }
  html.dark .bg-sky-50 { background-color: rgba(56, 189, 248, .08); }
  html.dark .bg-sky-100 { background-color: rgba(56, 189, 248, .16); }
  html.dark .bg-sky-600 { background-color: #0ea5e9; }
  html.dark .hover\:bg-sky-700:hover { background-color: #0284c7; }
  html.dark .border-sky-300, html.dark .border-sky-400 { border-color: rgba(56, 189, 248, .45); }

  /* rose (errors, overdue) */
  html.dark .text-rose-600 { color: #fb7185; }
  html.dark .text-rose-700 { color: #fda4af; }
  html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, .1); }
  html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, .18); }
  html.dark .border-rose-200, html.dark .border-rose-300 { border-color: rgba(244, 63, 94, .35); }

  /* amber (warnings, side-by-side banner) */
  html.dark .text-amber-600 { color: #fbbf24; }
  html.dark .text-amber-700 { color: #fcd34d; }
  html.dark .text-amber-800 { color: #fde68a; }
  html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .09); }
  html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .18); }
  html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245, 158, 11, .3); }

  /* emerald (paid, success) */
  html.dark .text-emerald-600 { color: #34d399; }
  html.dark .text-emerald-700 { color: #6ee7b7; }
  html.dark .text-emerald-800 { color: #a7f3d0; }
  html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .1); }
  html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .18); }
  html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .3); }

  /* ticket status badges (templatetags/crm.py STATUS_COLORS) */
  html.dark .text-rose-800 { color: #fecdd3; }
  html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, .2); }
  html.dark .text-violet-800 { color: #c4b5fd; }

  /* list pages: filter bar + sortable headers */
  html.dark .lc-on { border-color: rgba(56, 189, 248, .7); box-shadow: 0 0 0 1px rgba(56, 189, 248, .5), 0 0 12px -2px rgba(56, 189, 248, .35); }
  html.dark .lc-badge { background: rgba(56, 189, 248, .16); color: #bae6fd; }
  html.dark a.sort-th:hover { color: var(--accent-soft); }
  html.dark a.sort-th.on { color: var(--accent); }

  html.dark .border-l-sky-400 { border-left-color: #38bdf8; }     /* customer replies on a ticket */

  /* login card */
  html.dark #captcha-box img.captcha { border-color: var(--border-strong); }

  /* theme switch button (base.html) */
  .theme-toggle .ico-sun { display: none; }
  html.dark .theme-toggle .ico-sun { display: block; }
  html.dark .theme-toggle .ico-moon { display: none; }
}
@media print {
  .theme-toggle { display: none !important; }
}