/*
 * "Facebook" theme (added 2026-09-14) — an alternate accent/surface palette, selectable from
 * the new theme-picker icon next to the Dark Mode toggle (see wwwroot/js/custom.js's
 * initThemePicker()). Uses the EXACT SAME mechanism as dark-mode.css: re-targets the app's
 * existing Tailwind class vocabulary via an `html.theme-facebook` ancestor selector instead of
 * touching any .cshtml view — this file is a near-mirror of dark-mode.css's own selector list
 * (copied deliberately, since that file already represents a verified, complete catalog of
 * every class needing a theme override across the app), with Facebook's own colors instead.
 *
 * Independent of Dark Mode — the two combine: `html.theme-facebook` alone gives Facebook's
 * LIGHT palette, `html.theme-facebook.dark` gives Facebook's actual DARK-mode palette (real FB
 * colors, not a tinted version of this app's own dark theme). Loaded after dark-mode.css in
 * _Layout.cshtml; `html.theme-facebook.dark` (2 classes) naturally wins over dark-mode.css's
 * plain `html.dark` (1 class) on specificity alone for anything both files touch, so file order
 * doesn't matter for correctness — only load order for legibility.
 */

/* ── Design tokens — LIGHT (Facebook's classic white/light-gray look) ── */
html.theme-facebook:not(.dark) {
    --fb-bg: #f0f2f5;
    --fb-surface: #ffffff;
    --fb-surface-recessed: #f7f8fa;
    --fb-fill: #e4e6eb;
    --fb-fill-strong: #dadde1;
    --fb-border: #dddfe2;
    --fb-border-soft: #e4e6eb;
    --fb-border-strong: #ccd0d5;
    --fb-text-heading: #050505;
    --fb-text-body: #65676b;
    --fb-text-faint: #8a8d91;
    --fb-accent: #1877f2;
    --fb-accent-solid: #1877f2;
    --fb-accent-hover: #166fe5;
    --fb-hover-tint: rgba(24, 119, 242, 0.06);
    --fb-hover-tint-strong: rgba(24, 119, 242, 0.1);
    --focus-accent: var(--fb-accent);
    --focus-ring: rgba(24, 119, 242, 0.25);
    color-scheme: light;
}

/* ── Design tokens — DARK (Facebook's own real dark-mode palette) ── */
html.theme-facebook.dark {
    --fb-bg: #18191a;
    --fb-surface: #242526;
    --fb-surface-recessed: #1c1d1e;
    --fb-fill: #3a3b3c;
    --fb-fill-strong: #4e4f50;
    --fb-border: #3e4042;
    --fb-border-soft: #3a3b3c;
    --fb-border-strong: #545659;
    --fb-text-heading: #e4e6eb;
    --fb-text-body: #b0b3b8;
    --fb-text-faint: #8a8d91;
    --fb-accent: #2d88ff;
    --fb-accent-solid: #2d88ff;
    --fb-accent-hover: #4599ff;
    --fb-hover-tint: rgba(45, 136, 255, 0.1);
    --fb-hover-tint-strong: rgba(45, 136, 255, 0.16);
    --focus-accent: var(--fb-accent);
    --focus-ring: rgba(45, 136, 255, 0.25);
    color-scheme: dark;
}

html.theme-facebook { font-family: Helvetica, Arial, "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif !important; }
html.theme-facebook body { color: var(--fb-text-heading); }

/* ── Page background ── */
html.theme-facebook body.bg-white {
    background-color: var(--fb-bg) !important;
    background-image: none !important;
}

/* ── Surfaces ── */
html.theme-facebook .bg-white { background-color: var(--fb-surface) !important; }
html.theme-facebook .bg-zinc-50 { background-color: var(--fb-surface-recessed) !important; }
html.theme-facebook .bg-zinc-100 { background-color: var(--fb-fill) !important; }
html.theme-facebook .bg-zinc-200 { background-color: var(--fb-fill-strong) !important; }

/* CTA buttons, active sidebar pill, notification badge, avatar circle — Facebook's signature
   blue instead of this app's near-black, same "one accent for CTAs/active states" convention
   dark-mode.css already established, just a different accent hue. */
html.theme-facebook .bg-zinc-900 { background-color: var(--fb-accent-solid) !important; }
html.theme-facebook .bg-zinc-700,
html.theme-facebook .bg-zinc-800 { background-color: var(--fb-accent-hover) !important; }
html.theme-facebook .bg-zinc-900\/40 { background-color: rgba(0, 0, 0, 0.5) !important; }
html.theme-facebook .bg-zinc-50\/40,
html.theme-facebook .bg-zinc-50\/50,
html.theme-facebook .bg-zinc-50\/60 { background-color: var(--fb-hover-tint) !important; }
html.theme-facebook .bg-zinc-200\/60 { background-color: var(--fb-hover-tint-strong) !important; }

/* ── Text ── */
html.theme-facebook .text-zinc-700,
html.theme-facebook .text-zinc-800,
html.theme-facebook .text-zinc-900 { color: var(--fb-text-heading) !important; }
html.theme-facebook .text-zinc-500,
html.theme-facebook .text-zinc-600 { color: var(--fb-text-body) !important; }
html.theme-facebook .text-zinc-300,
html.theme-facebook .text-zinc-400 { color: var(--fb-text-faint) !important; }
html.theme-facebook .placeholder\:text-zinc-400::placeholder { color: var(--fb-text-faint) !important; }

/* ── Borders / rings / dividers ── */
html.theme-facebook .border-zinc-100 { border-color: var(--fb-border-soft) !important; }
html.theme-facebook .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--fb-border-soft) !important; }
html.theme-facebook .border-zinc-200 { border-color: var(--fb-border) !important; }
html.theme-facebook .border-zinc-300 { border-color: var(--fb-border-strong) !important; }
html.theme-facebook .border-zinc-400 { border-color: var(--fb-accent) !important; }
html.theme-facebook .border-zinc-900 { border-color: var(--fb-accent-solid) !important; }
html.theme-facebook .ring-zinc-100 { --tw-ring-color: rgba(24, 119, 242, 0.12) !important; }
html.theme-facebook .ring-zinc-500\/10,
html.theme-facebook .ring-zinc-900\/10 { --tw-ring-color: rgba(24, 119, 242, 0.2) !important; }

/* ── Hover / focus (same rationale as dark-mode.css: Tailwind compiles these to their own
   distinct selectors the plain rules above don't match) ── */
html.theme-facebook .hover\:bg-zinc-50:hover,
html.theme-facebook .hover\:bg-zinc-100:hover,
html.theme-facebook .hover\:bg-zinc-200:hover,
html.theme-facebook .hover\:bg-zinc-50\/40:hover,
html.theme-facebook .hover\:bg-zinc-50\/50:hover,
html.theme-facebook .hover\:bg-zinc-50\/60:hover { background-color: var(--fb-hover-tint) !important; }
html.theme-facebook .hover\:bg-zinc-200\/60:hover { background-color: var(--fb-hover-tint-strong) !important; }
html.theme-facebook .has-\[\:checked\]\:bg-zinc-50:has(:checked),
html.theme-facebook .has-\[\:checked\]\:bg-zinc-100:has(:checked) { background-color: var(--fb-hover-tint) !important; }
html.theme-facebook .capa-nc-group:hover td { background-color: var(--fb-hover-tint-strong) !important; }
html.theme-facebook .capa-nc-group:hover td:first-child,
html.theme-facebook tbody:not(.capa-nc-group) tr:not([class*="hover:bg"]):hover td:first-child {
    box-shadow: inset 3px 0 0 0 var(--fb-accent) !important;
}
html.theme-facebook tbody:not(.capa-nc-group) tr:not([class*="hover:bg"]):hover { background-color: var(--fb-hover-tint-strong) !important; }
html.theme-facebook .hover\:bg-zinc-700:hover,
html.theme-facebook .hover\:bg-zinc-800:hover { background-color: var(--fb-accent-hover) !important; }
html.theme-facebook .hover\:text-zinc-600:hover { color: var(--fb-text-body) !important; }
html.theme-facebook .hover\:text-zinc-700:hover,
html.theme-facebook .hover\:text-zinc-800:hover,
html.theme-facebook .hover\:text-zinc-900:hover { color: var(--fb-text-heading) !important; }
html.theme-facebook .hover\:border-zinc-400:hover { border-color: var(--fb-accent) !important; }
html.theme-facebook .hover\:border-zinc-900:hover { border-color: var(--fb-accent-solid) !important; }
html.theme-facebook .focus\:border-zinc-400:focus { border-color: var(--fb-accent) !important; }
html.theme-facebook .focus\:ring-zinc-100:focus { --tw-ring-color: rgba(24, 119, 242, 0.15) !important; }
html.theme-facebook .focus\:ring-zinc-900:focus { --tw-ring-color: rgba(24, 119, 242, 0.25) !important; }

/* ── Form controls ── */
html.theme-facebook input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.theme-facebook select,
html.theme-facebook textarea {
    background-color: var(--fb-surface) !important;
    color: var(--fb-text-heading) !important;
    border-color: var(--fb-border) !important;
}
html.theme-facebook input::placeholder,
html.theme-facebook textarea::placeholder { color: var(--fb-text-faint) !important; }
html.theme-facebook input[type="checkbox"],
html.theme-facebook input[type="radio"] { accent-color: var(--fb-accent-solid); }
html.theme-facebook.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
html.theme-facebook input[type="date"],
html.theme-facebook input[type="time"],
html.theme-facebook input[type="datetime-local"],
html.theme-facebook input[type="month"],
html.theme-facebook input[type="week"] { color-scheme: inherit; }

/* ── Scrollbar (Chromium/Edge — cosmetic only) ── */
html.theme-facebook ::-webkit-scrollbar-track { background: transparent; }
html.theme-facebook ::-webkit-scrollbar-thumb { background: var(--fb-border-strong); border-radius: 999px; }
html.theme-facebook ::-webkit-scrollbar-thumb:hover { background: var(--fb-accent); }

/* Status/badge -50/-100 backgrounds + -600/-700 text read fine as-is on Facebook's own light
   surface (they're the same Tailwind palette FB's own UI loosely echoes) and get the same
   translucent-tint treatment as dark-mode.css when the dark FB variant is active. */
html.theme-facebook.dark .bg-amber-50, html.theme-facebook.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.14) !important; }
html.theme-facebook.dark .text-amber-600, html.theme-facebook.dark .text-amber-700, html.theme-facebook.dark .text-amber-800 { color: #fbbf24 !important; }
html.theme-facebook.dark .bg-blue-50, html.theme-facebook.dark .bg-blue-100 { background-color: rgba(45, 136, 255, 0.16) !important; }
html.theme-facebook.dark .text-blue-600, html.theme-facebook.dark .text-blue-700, html.theme-facebook.dark .text-blue-800 { color: #6ab0ff !important; }
html.theme-facebook.dark .bg-emerald-50, html.theme-facebook.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.14) !important; }
html.theme-facebook.dark .text-emerald-600, html.theme-facebook.dark .text-emerald-700, html.theme-facebook.dark .text-emerald-800 { color: #34d399 !important; }
html.theme-facebook.dark .bg-red-50, html.theme-facebook.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.14) !important; }
html.theme-facebook.dark .text-red-600, html.theme-facebook.dark .text-red-700 { color: #f87171 !important; }
html.theme-facebook.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.14) !important; }
html.theme-facebook.dark .text-violet-600, html.theme-facebook.dark .text-violet-700 { color: #a78bfa !important; }
html.theme-facebook.dark .bg-sky-50 { background-color: rgba(45, 136, 255, 0.14) !important; }
html.theme-facebook.dark .text-sky-600 { color: #6ab0ff !important; }
html.theme-facebook.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.14) !important; }
html.theme-facebook.dark .text-teal-600, html.theme-facebook.dark .text-teal-700 { color: #2dd4bf !important; }
html.theme-facebook.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.14) !important; }
html.theme-facebook.dark .text-rose-600 { color: #fb7185 !important; }
html.theme-facebook.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.14) !important; }
html.theme-facebook.dark .text-orange-600, html.theme-facebook.dark .text-orange-700 { color: #fb923c !important; }
html.theme-facebook.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.14) !important; }
html.theme-facebook.dark .text-indigo-600 { color: #818cf8 !important; }