/*
 * Light and dark theme (docs/THEME.md). nivtrix.css already holds both colour sets: :root (light) and .dark (dark), and
 * every page built from its tokens (bg-background, bg-card, text-foreground, border-border, ...) follows the class "dark"
 * on <html> by itself. This file covers the rest:
 *
 *  - the fixed status colours pages write by hand (red, green, amber, slate, ...). Templates write them as
 *    var(--nx-c-<hex>, #<hex>): light mode uses the exact colour from the fallback, dark mode a lighter shade from below.
 *    A new hand-written colour should follow the same shape (ThemeColoursTest checks the templates);
 *  - native controls (inputs, date pickers, scrollbars) through color-scheme;
 *  - Tailwind's bg-white, which some pages use for a panel;
 *  - the toggle button itself.
 */

.dark { color-scheme: dark; }

/* text: reds, greens, ambers, greys, near-black, violet, blue */
.dark {
  --nx-c-b91c1c: #f87171; --nx-c-dc2626: #f87171; --nx-c-991b1b: #fca5a5;
  --nx-c-15803d: #4ade80; --nx-c-16a34a: #4ade80; --nx-c-166534: #86efac;
  --nx-c-b45309: #fbbf24; --nx-c-92400e: #fcd34d; --nx-c-854d0e: #fcd34d; --nx-c-d97706: #fbbf24;
  --nx-c-475569: #cbd5e1; --nx-c-64748b: #94a3b8; --nx-c-6b7280: #9ca3af;
  --nx-c-111827: hsl(var(--foreground)); --nx-c-0f172a: hsl(var(--foreground));
  /* the destructive token is a deep red for backgrounds; as text it needs a lighter one */
  --nx-danger-text: hsl(0 85% 70%);
  --nx-c-6d28d9: #c4b5fd; --nx-c-1d4ed8: #93c5fd; --nx-c-4f46e5: #a5b4fc;

  /* light panel backgrounds and borders (pure white is left alone: logos, signatures and print stay white) */
  --nx-c-f8fafc: hsl(var(--muted)); --nx-c-f3f4f6: hsl(var(--muted)); --nx-c-e5e7eb: hsl(var(--border));
  --nx-c-d1d5db: hsl(var(--border)); --nx-c-cbd5e1: hsl(var(--border)); --nx-c-e2e8f0: hsl(var(--border));
  --nx-c-fefce8: rgba(234, 179, 8, .14); --nx-c-fef2f2: rgba(220, 38, 38, .14); --nx-c-dcfce7: rgba(22, 163, 74, .16);
  --nx-c-fecaca: rgba(248, 113, 113, .45);
}

/* the "fallback utilities" at the end of nivtrix.css are written with fixed light colours, not the tokens: their dark
   versions (the light ones are left exactly as they were) */
.dark .bg-primary\/5 { background-color: hsl(var(--primary) / .08); }
.dark .bg-primary\/10 { background-color: hsl(var(--primary) / .14); }
.dark .bg-primary\/20 { background-color: hsl(var(--primary) / .24); }
.dark .hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / .9); }
.dark .border-primary\/20 { border-color: hsl(var(--primary) / .3); }
/* primary as text: the company's own colour (branding) can be dark, so on a dark background it is mixed toward white */
.dark .text-primary { color: hsl(var(--primary)); color: color-mix(in srgb, hsl(var(--primary)) 62%, white); }
.dark .bg-success\/10 { background-color: hsl(162 60% 40% / .16); }
.dark .text-success { color: hsl(162 60% 55%); }
.dark .border-success\/20 { border-color: hsl(162 60% 45% / .3); }
.dark .border-success\/30 { border-color: hsl(162 60% 45% / .4); }
.dark .bg-warning\/10 { background-color: hsl(38 92% 50% / .14); }
.dark .text-warning { color: hsl(38 92% 62%); }
.dark .border-warning\/20 { border-color: hsl(38 92% 50% / .3); }
.dark .bg-destructive\/10 { background-color: hsl(0 72% 51% / .16); }
.dark .hover\:bg-destructive\/10:hover { background-color: hsl(0 72% 51% / .16); }
.dark .text-destructive, .dark .hover\:text-destructive:hover { color: var(--nx-danger-text); }
.dark .border-destructive\/40 { border-color: hsl(0 72% 60% / .45); }
.dark .bg-muted\/20 { background-color: hsl(var(--muted) / .5); }
.dark .bg-muted\/30 { background-color: hsl(var(--muted) / .6); }
.dark .hover\:bg-muted:hover { background-color: hsl(var(--muted)); }

/* a panel written with Tailwind's bg-white follows the card colour */
.dark .bg-white { background-color: hsl(var(--card)); }
/* ...except an email preview, which shows the email as it will arrive */
.dark iframe.bg-white { background-color: #fff; }

/* the toggle */
.nx-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: .6rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground));
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.nx-theme-toggle:hover { background: hsl(var(--muted)); }
.nx-theme-toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.nx-theme-toggle .nx-theme-sun { display: none; }
.dark .nx-theme-toggle .nx-theme-sun { display: block; }
.dark .nx-theme-toggle .nx-theme-moon { display: none; }
.nx-theme-floating { position: fixed; top: 1rem; right: 1rem; z-index: 60; }
@media print { .nx-theme-toggle, .nx-theme-floating { display: none !important; } }