/* Light and dark theme.

   Dark is the default and the original design: every token's dark value is the colour the page used
   before there was a theme, so dark mode looks exactly as it did. Light mode is <html data-theme="light">,
   set by the server from the fixii-theme cookie (ThemeCookie) and switched by the toggle in the top bar
   (js/theme.js).

   Two parts:
   1. Tokens (--fx-*). Scripts and pages use these in inline styles: var(--fx-card), var(--fx-ink),
      rgba(var(--fx-fg-rgb), 0.06). Status colours (red, amber, green on fills, borders and chart series)
      are not tokens; they read on both backgrounds.
   2. Light-mode overrides for the Tailwind classes the pages use (bg-navy, text-white, text-cyan…), so
      the pages need no change. The top bar stays dark in both modes (the logo is drawn for a dark
      background), so it puts the dark tokens back for everything inside it. */

:root,
html[data-theme="light"] .fixed-top-menu {
    /* Surfaces */
    --fx-page: #0a1929;
    --fx-navy: #0d1e33;
    --fx-card: #0d2137;
    --fx-card-alt: #0b1f33;
    --fx-card-deep: #061525;
    --fx-well: #0a0f1c;
    --fx-raised: #16324e;
    --fx-control: #1e3a5f;
    --fx-widget-bg: rgba(15, 23, 42, 0.05);
    --fx-widget-bg-hover: rgba(15, 23, 42, 0.85);
    --fx-widget-border: rgba(255, 255, 255, 0.05);
    --fx-widget-border-hover: rgba(255, 255, 255, 0.12);
    --fx-tint-green: #1a3a2a;
    --fx-tint-yellow: #2a2a0d;
    --fx-tint-orange: #2a1a0d;
    --fx-tint-slate: #1a1a2a;
    --fx-tint-green-deep: #0f2a1a;
    --fx-tint-yellow-deep: #1e1e08;
    --fx-tint-orange-deep: #1e1208;
    --fx-tint-slate-deep: #10101e;

    /* Lines */
    --fx-line: #1e3a5f;
    --fx-line-strong: #2d4a6e;
    --fx-sep: #334155;

    /* Text, strongest to faintest. --fx-fg-rgb is the text colour as r,g,b for washes and hairlines. */
    --fx-heading: #ffffff;
    --fx-fg-rgb: 255, 255, 255;
    --fx-ink-bright: #e2e8f0;
    --fx-ink: #a9b7c6;
    --fx-ink-dim: #94a3b8;
    --fx-ink-mute: #64748b;

    /* Accents */
    --fx-cyan: #22d3ee;
    --fx-teal: #00e5d4;
    --fx-cyan-soft: #82c7d6;
    --fx-sky: #38bdf8;
    --fx-magenta: #d946ef;
    --fx-magenta-soft: #f0abfc;

    /* Light tints that read only on dark, and status colours used as text */
    --fx-red-soft: #fca5a5;
    --fx-red-mid: #f87171;
    --fx-green-soft: #4ade80;
    --fx-mint: #34d399;
    --fx-amber-soft: #fbbf24;
    --fx-yellow: #facc15;
    --fx-gold: #ecc94b;
    --fx-violet-soft: #a78bfa;
    --fx-red-text: #ef4444;
    --fx-amber-text: #f59e0b;
    --fx-green-text: #10b981;

    /* What the Tailwind classes resolve to in light mode (see part 2) */
    --fx-tw-navy: #0d1e33;
    --fx-tw-navy-dark: #061525;
    --fx-tw-navy-darker: #020b15;
    --fx-tw-navy-light: #2d4054;
    --fx-tw-navy-lighter: #536274;
    --fx-tw-white: #ffffff;
    --fx-tw-cyan: #5bb5c9;
    --fx-tw-cyan-light: #82c7d6;
    --fx-tw-magenta: #e63d8f;
    --fx-tw-gray-300: #d1d5db;
    --fx-tw-gray-400: #9ca3af;
    --fx-tw-red: #f87171;
    --fx-tw-green: #4ade80;
    --fx-tw-yellow: #facc15;
    --fx-tw-blue: #93c5fd;
}

html[data-theme="light"] {
    color-scheme: light;

    --fx-page: #f3f5f9;
    --fx-navy: #eef2f7;
    --fx-card: #ffffff;
    --fx-card-alt: #f7f9fc;
    --fx-card-deep: #ffffff;
    --fx-well: #f1f4f8;
    --fx-raised: #e8eef5;
    --fx-control: #ffffff;
    --fx-widget-bg: #ffffff;
    --fx-widget-bg-hover: #fbfcfe;
    --fx-widget-border: #d9e0ea;
    --fx-widget-border-hover: #b9c5d4;
    --fx-tint-green: #e3f4ea;
    --fx-tint-yellow: #faf4dc;
    --fx-tint-orange: #fbeadc;
    --fx-tint-slate: #eceef6;
    --fx-tint-green-deep: #eef8f2;
    --fx-tint-yellow-deep: #fcf8e8;
    --fx-tint-orange-deep: #fdf2e9;
    --fx-tint-slate-deep: #f3f4f9;

    --fx-line: #d5dde8;
    --fx-line-strong: #c3cedb;
    --fx-sep: #cbd5e1;

    --fx-heading: #0f172a;
    --fx-fg-rgb: 15, 23, 42;
    --fx-ink-bright: #1e293b;
    --fx-ink: #334155;
    --fx-ink-dim: #4b5a6e;
    --fx-ink-mute: #66748a;

    --fx-cyan: #0891b2;
    --fx-teal: #0d9488;
    --fx-cyan-soft: #0e7490;
    --fx-sky: #0284c7;
    --fx-magenta: #c026d3;
    --fx-magenta-soft: #a21caf;

    --fx-red-soft: #b91c1c;
    --fx-red-mid: #dc2626;
    --fx-green-soft: #15803d;
    --fx-mint: #047857;
    --fx-amber-soft: #a16207;
    --fx-yellow: #a16207;
    --fx-gold: #a16207;
    --fx-violet-soft: #7c3aed;
    --fx-red-text: #dc2626;
    --fx-amber-text: #b45309;
    --fx-green-text: #047857;

    --fx-tw-navy: #ffffff;
    --fx-tw-navy-dark: #ffffff;
    --fx-tw-navy-darker: #e9edf3;
    --fx-tw-navy-light: #e6ebf2;
    --fx-tw-navy-lighter: #d5dde8;
    --fx-tw-white: #0f172a;
    --fx-tw-cyan: #0e7490;
    --fx-tw-cyan-light: #155e75;
    --fx-tw-magenta: #be185d;
    --fx-tw-gray-300: #475569;
    --fx-tw-gray-400: #64748b;
    --fx-tw-red: #b91c1c;
    --fx-tw-green: #15803d;
    --fx-tw-yellow: #a16207;
    --fx-tw-blue: #1d4ed8;
}

/* White text stays white on a solid brand or status fill (buttons, badges), in either mode. */
html[data-theme="light"] :is(.bg-magenta, .bg-magenta-dark, .bg-cyan, .bg-cyan-dark, .bg-success, .bg-error,
    .bg-alert, .bg-warning, .bg-accent, .btn-primary, .btn-secondary, .btn-danger, .btn-success,
    [class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-green-500"], [class~="bg-green-600"],
    [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-yellow-600"], [class~="bg-yellow-700"], [class~="bg-yellow-900"]):not([class*="bg-opacity"]) {
    --fx-tw-white: #ffffff;
    --fx-heading: #ffffff;
    --fx-fg-rgb: 255, 255, 255;
}

/* Part 2: Tailwind classes in light mode */
html[data-theme="light"] .bg-navy { background-color: var(--fx-tw-navy); }
html[data-theme="light"] .bg-navy-dark { background-color: var(--fx-tw-navy-dark); }
html[data-theme="light"] .bg-navy-darker { background-color: var(--fx-tw-navy-darker); }
html[data-theme="light"] .bg-navy-light { background-color: var(--fx-tw-navy-light); }
html[data-theme="light"] .bg-navy-lighter { background-color: var(--fx-tw-navy-lighter); }
html[data-theme="light"] .hover\:bg-navy:hover { background-color: var(--fx-tw-navy-darker); }
html[data-theme="light"] .hover\:bg-navy-light:hover,
html[data-theme="light"] .hover\:bg-navy-lighter:hover { background-color: var(--fx-tw-navy-light); }
html[data-theme="light"] .bg-gray-700 { background-color: #e2e8f0; }
html[data-theme="light"] .bg-gray-800 { background-color: #f1f5f9; }

html[data-theme="light"] .border-navy,
html[data-theme="light"] .border-navy-light,
html[data-theme="light"] .border-navy-lighter { border-color: var(--fx-tw-navy-lighter); }
html[data-theme="light"] .divide-navy-lighter > :not([hidden]) ~ :not([hidden]) { border-color: var(--fx-tw-navy-lighter); }

/* !important because Bootstrap (loaded by the Blazor pages) declares .text-white !important, which
   otherwise keeps the text white on a light surface. A solid fill above still gets white: it sets the token. */
html[data-theme="light"] .text-white,
html[data-theme="light"] .hover\:text-white:hover { color: var(--fx-tw-white) !important; }
html[data-theme="light"] .text-cyan,
html[data-theme="light"] .hover\:text-cyan:hover { color: var(--fx-tw-cyan); }
html[data-theme="light"] .text-cyan-light { color: var(--fx-tw-cyan-light); }
html[data-theme="light"] .text-cyan-light\/60 { color: color-mix(in srgb, var(--fx-tw-cyan-light) 60%, transparent); }
html[data-theme="light"] .text-magenta,
html[data-theme="light"] .hover\:text-magenta:hover { color: var(--fx-tw-magenta); }
html[data-theme="light"] .text-gray-300 { color: var(--fx-tw-gray-300); }
html[data-theme="light"] .text-gray-400 { color: var(--fx-tw-gray-400); }
html[data-theme="light"] :is(.text-red-200, .text-red-300, .text-red-400, .text-red-500) { color: var(--fx-tw-red); }
html[data-theme="light"] :is(.text-green-300, .text-green-400, .text-green-500) { color: var(--fx-tw-green); }
html[data-theme="light"] :is(.text-yellow-200, .text-yellow-300, .text-yellow-400, .text-yellow-500) { color: var(--fx-tw-yellow); }
html[data-theme="light"] :is(.text-blue-300, .text-blue-500) { color: var(--fx-tw-blue); }
html[data-theme="light"] .text-pink-300 { color: var(--fx-tw-magenta); }

/* Shared stylesheet rules (app.css) that assume a dark page */
html[data-theme="light"] .dropdown-link { color: var(--fx-tw-cyan); }
html[data-theme="light"] .fixed-top-menu .dropdown-link { color: #a9d9e3; }
html[data-theme="light"] code,
html[data-theme="light"] pre { color: inherit; }

/* The theme toggle in the top bar */
.theme-toggle .theme-icon-light { display: none; }
html[data-theme="light"] .theme-toggle .theme-icon-light { display: inline; }
html[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; }