:root {
    --mcs-navy: #060B3D;
    --mcs-navy-2: #0B1345;
    --mcs-crimson: #8C1116;
    --mcs-crimson-2: #6B0D11;
    --mcs-gold: #F0B429;
    --mcs-gold-light: #FFE59A;
    --mcs-royal: #1D3FAE;
    /* A subtle off-white backdrop a few pages use for an emphasized summary/total row
       (advisory_summary.php's AVERAGE row) via inline style — kept as a variable so dark mode
       can repoint it instead of leaving a bright box hardcoded into an otherwise dark table. */
    --mcs-surface-alt: #F8FAFC;
    /* Brand navy that never changes with the theme. --mcs-navy above doubles as a heading/link
       TEXT color, so dark mode lightens it — anything that paints navy as a BACKGROUND (sidebar,
       avatar initials, login panel) must use these instead or it turns pale lavender at night. */
    --mcs-brand-navy: #060B3D;
    --mcs-brand-navy-2: #0B1345;
    --mcs-sidebar-from: var(--mcs-brand-navy);
    --mcs-sidebar-to: var(--mcs-brand-navy-2);
    --mcs-sidebar-edge: transparent;

    /* Status colors for chips/labels whose colors are set from PHP arrays (inline styles that
       theme.css's class remapping can't reach). Pages reference these instead of raw hex so
       dark mode can swap them in one place. */
    --mcs-red-bg: #FEE2E2;    --mcs-red-text: #B91C1C;
    --mcs-red-bg-soft: #FEF2F2;
    --mcs-blue-bg: #DBEAFE;   --mcs-blue-text: #1D4ED8;
    --mcs-green-bg: #DCFCE7;  --mcs-green-text: #15803D;
    --mcs-green-bg-soft: #F0FDF4; --mcs-green-icon: #16A34A;
    --mcs-amber-bg: #FFF7E6;  --mcs-amber-text: #92620A;
    --mcs-gray-bg: #E2E8F0;   --mcs-gray-text: #475569;
    --mcs-gray-bg-soft: #F1F5F9; --mcs-gray-text-soft: #94A3B8;
}

/*
 * Dark mode — driven by data-theme="dark" on <html> (set in includes/head.php from the
 * logged-in user's Settings > Appearance preference). This app builds every page directly out
 * of Tailwind utility classes (bg-white, text-slate-700, ...) rather than Tailwind's dark:
 * variant system, so retrofitting a real dark: class onto every element across 40+ pages isn't
 * practical here — instead these rules re-target the common structural utility classes
 * directly wherever data-theme="dark" is set. This covers page backgrounds, cards, borders,
 * body text, and form inputs sitewide without editing every page. Brand-colored elements
 * (navy/crimson sidebar, gradient buttons, the login panel) already read fine as-is in a dark
 * UI and are intentionally left alone. A few page-specific light backgrounds may still need a
 * follow-up pass if you spot one that doesn't match.
 *
 * Screen only: printers and the PDF export (includes/pdf.php) drop background colors, so the
 * dark theme's light text would land on white paper and be unreadable. Printouts always use
 * the light theme.
 */
@media screen {
[data-theme="dark"] {
    color-scheme: dark;

    /* Night palette — one navy-tinted scale derived from the brand navy, so every surface,
       border and text tone belongs to the same family instead of generic grey. Ordered darkest
       to lightest: sidebar < page < card < raised < pressed. */
    --dk-sidebar-from: #04061a;
    --dk-sidebar-to:   #070b24;
    --dk-bg:        #0d1229;   /* page background */
    --dk-surface:   #151b37;   /* cards, topbar, dropdowns, inputs */
    --dk-surface-2: #1d2446;   /* hover rows, chips, search box */
    --dk-surface-3: #283055;   /* pressed / hover on chips */
    --dk-border:    #242c4e;
    --dk-border-2:  #333c66;
    --dk-text:   #e8eaf6;      /* primary text   (~14:1 on card) */
    --dk-text-2: #c6cbe2;      /* secondary text (~10:1) */
    --dk-text-3: #a3a9c8;      /* tertiary text  (~7:1)  */
    --dk-text-4: #8a91b4;      /* muted / captions (~5:1, still passes AA) */
    --dk-text-5: #5d6590;      /* decorative only (dashes, separators) */

    /* --mcs-navy/--mcs-royal are used sitewide via inline style="color:var(--mcs-navy)" for
       headings and links. Left at their light-mode values they'd be near-invisible on the dark
       surfaces, so they're lightened here. Backgrounds use --mcs-brand-navy instead (see :root). */
    --mcs-navy: #cdd5ff;
    --mcs-royal: #9db8ff;
    --mcs-surface-alt: var(--dk-surface-2);

    /* Sidebar: darker than the page at night, with a hairline edge so it doesn't melt into it. */
    --mcs-sidebar-from: var(--dk-sidebar-from);
    --mcs-sidebar-to: var(--dk-sidebar-to);
    --mcs-sidebar-edge: rgba(157,184,255,0.08);

    --mcs-red-bg: rgba(248,113,113,0.16);   --mcs-red-text: #fca5a5;
    --mcs-red-bg-soft: rgba(248,113,113,0.12);
    --mcs-blue-bg: rgba(157,184,255,0.16);  --mcs-blue-text: #9db8ff;
    --mcs-green-bg: rgba(52,211,153,0.16);  --mcs-green-text: #6ee7b7;
    --mcs-green-bg-soft: rgba(52,211,153,0.12); --mcs-green-icon: #6ee7b7;
    --mcs-amber-bg: rgba(251,191,36,0.14);  --mcs-amber-text: #fcd34d;
    --mcs-gray-bg: rgba(198,203,226,0.12);  --mcs-gray-text: #c6cbe2;
    --mcs-gray-bg-soft: rgba(198,203,226,0.08); --mcs-gray-text-soft: #8a91b4;
}

/* Surfaces */
[data-theme="dark"] body,
[data-theme="dark"] .bg-slate-50 { background-color: var(--dk-bg); }
[data-theme="dark"] .bg-white,
[data-theme="dark"] table thead { background-color: var(--dk-surface); }
[data-theme="dark"] .bg-white\/90 { background-color: rgba(21,27,55,0.9); }
[data-theme="dark"] .bg-slate-100 { background-color: var(--dk-surface-2); }
[data-theme="dark"] .bg-slate-200 { background-color: var(--dk-surface-3); }
[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--dk-surface-2); }
[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: var(--dk-surface-3); }
[data-theme="dark"] .bg-blue-50\/30 { background-color: rgba(157,184,255,0.06); }

/* Borders */
[data-theme="dark"] .border,
[data-theme="dark"] .border-slate-50,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-gray-200 { border-color: var(--dk-border); }
[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dk-border); }

/* Text */
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-\[\#0B1F3A\] { color: var(--dk-text); }
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--dk-text-2); }
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .hover\:text-slate-600:hover,
[data-theme="dark"] .hover\:text-gray-600:hover { color: var(--dk-text-3); }
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-gray-400 { color: var(--dk-text-4); }
[data-theme="dark"] .text-slate-300 { color: var(--dk-text-5); }

/* Status tints — light-mode pastel backgrounds become translucent washes, and the dark
   status text that sat on them is lifted so it stays readable on navy. */
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(248,113,113,0.12); }
[data-theme="dark"] .hover\:bg-red-100:hover { background-color: rgba(248,113,113,0.2); }
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-green-50 { background-color: rgba(52,211,153,0.12); }
[data-theme="dark"] .bg-amber-50 { background-color: rgba(251,191,36,0.12); }
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .hover\:bg-amber-100:hover { background-color: rgba(251,191,36,0.2); }
[data-theme="dark"] .bg-blue-50 { background-color: rgba(157,184,255,0.12); }
[data-theme="dark"] .border-red-100 { border-color: rgba(248,113,113,0.25); }
[data-theme="dark"] .border-emerald-100,
[data-theme="dark"] .border-green-100 { border-color: rgba(52,211,153,0.25); }
[data-theme="dark"] .border-blue-100 { border-color: rgba(157,184,255,0.25); }
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700 { color: #fca5a5; }
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-green-700 { color: #6ee7b7; }
[data-theme="dark"] .text-amber-500,
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-amber-700 { color: #fcd34d; }
[data-theme="dark"] .text-blue-700\/80,
[data-theme="dark"] .text-blue-800 { color: var(--mcs-royal); }

/* Form controls */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--dk-surface);
    color: var(--dk-text);
    border-color: var(--dk-border-2);
}
[data-theme="dark"] .bg-transparent { background-color: transparent; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--dk-text-4); }
[data-theme="dark"] input:disabled,
[data-theme="dark"] .disabled\:bg-gray-100:disabled { background-color: var(--dk-bg); color: var(--dk-text-4); }

/* Cards lift with a soft navy shadow instead of the light-mode one */
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
[data-theme="dark"] .bg-white.rounded-2xl.border.border-slate-100.shadow-sm:hover {
    box-shadow: 0 12px 32px -14px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,180,41,0.18);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dk-border-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #46507e; }
} /* end @media screen (dark theme) */
/* The <meta name="color-scheme"> says "dark" for dark-mode users; paper is always light. */
@media print { :root { color-scheme: only light; } }

/* Sidebar shell — colors come from the --mcs-sidebar-* tokens so it is brand navy by day
   and a deeper near-black navy at night, always with white text. */
.mcs-sidebar {
    background: linear-gradient(180deg, var(--mcs-sidebar-from) 0%, var(--mcs-sidebar-to) 100%);
    border-right: 1px solid var(--mcs-sidebar-edge);
}

/* Lift + glow on major content cards, sitewide, no per-page edits needed */
.bg-white.rounded-2xl.border.border-slate-100.shadow-sm {
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.bg-white.rounded-2xl.border.border-slate-100.shadow-sm:hover {
    box-shadow: 0 10px 30px -12px rgba(6,11,61,0.18), 0 0 0 1px rgba(240,180,41,0.15);
    transform: translateY(-2px);
}

/* Gold shimmer sweep for primary CTA buttons */
.mcs-btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mcs-navy-2), var(--mcs-crimson));
    box-shadow: 0 8px 24px -8px rgba(140,17,22,0.45);
}
.mcs-btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(240,180,41,0.35) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}
.mcs-btn-primary:hover::after { transform: translateX(120%); }

/* Glow ring utility (gold) */
.mcs-glow-gold {
    box-shadow: 0 0 0 1px rgba(240,180,41,0.45), 0 0 22px rgba(240,180,41,0.28);
}
.mcs-glow-crimson {
    box-shadow: 0 0 0 1px rgba(140,17,22,0.4), 0 0 22px rgba(140,17,22,0.22);
}
.mcs-glow-royal {
    box-shadow: 0 0 0 1px rgba(29,63,174,0.4), 0 0 22px rgba(29,63,174,0.22);
}

@keyframes mcsPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,0.45); }
    50% { box-shadow: 0 0 0 8px rgba(240,180,41,0); }
}
.mcs-pulse-ring { animation: mcsPulseGlow 2.4s ease-in-out infinite; }

@keyframes mcsFadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.mcs-fade-in { animation: mcsFadeSlideIn .28s ease-out; }

@keyframes mcsTypingDot {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
.mcs-typing-dot { animation: mcsTypingDot 1.1s ease-in-out infinite; }
.mcs-typing-dot:nth-child(2) { animation-delay: .15s; }
.mcs-typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes mcsCountIn {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}
.mcs-count-in { animation: mcsCountIn .35s ease-out; }

/* Sidebar active nav glow accent bar */
.mcs-nav-active {
    position: relative;
}
.mcs-nav-active::before {
    content: '';
    position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 2px;
    background: var(--mcs-gold);
    box-shadow: 0 0 10px rgba(240,180,41,0.7);
}

/* Toggle switch used in Settings */
.mcs-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.mcs-toggle input { opacity: 0; width: 0; height: 0; }
.mcs-toggle-track {
    position: absolute; cursor: pointer; inset: 0; background: #cbd5e1;
    border-radius: 999px; transition: background .2s;
}
.mcs-toggle-track::before {
    content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
    background: white; border-radius: 50%; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.mcs-toggle input:checked + .mcs-toggle-track { background: linear-gradient(135deg, var(--mcs-navy-2), var(--mcs-crimson)); }
.mcs-toggle input:checked + .mcs-toggle-track::before { transform: translateX(18px); }

/* Notification bell subtle glow when unread items exist */
.mcs-bell-glow { box-shadow: 0 0 0 3px rgba(240,180,41,0.18); }

/* Slowly drifting, pulsing ambient blobs on the login page's branded panel — same colors/sizes/
   positions as before, just given gentle motion so the panel doesn't read as static/plain.
   Respects reduced-motion preferences. */
@keyframes mcsDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
    50% { transform: translate(-30px, 40px) scale(1.18); opacity: 0.6; }
}
@keyframes mcsDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    50% { transform: translate(45px, -35px) scale(1.22); opacity: 0.45; }
}
@keyframes mcsDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.18; }
    50% { transform: translate(-25px, -25px) scale(1.3); opacity: 0.38; }
}
.mcs-login-blob-1 { animation: mcsDrift1 9s ease-in-out infinite; }
.mcs-login-blob-2 { animation: mcsDrift2 12s ease-in-out infinite; }
.mcs-login-blob-3 { animation: mcsDrift3 7.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .mcs-login-blob-1, .mcs-login-blob-2, .mcs-login-blob-3 { animation: none; }
}

/* Soft gold ambient glow sweeping across the login panel's logo badge */
@keyframes mcsLogoGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,0.35), 0 8px 24px -8px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 28px 6px rgba(240,180,41,0.45), 0 8px 24px -8px rgba(0,0,0,0.4); }
}
.mcs-login-logo-glow { animation: mcsLogoGlow 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .mcs-login-logo-glow { animation: none; }
}