/* ==========================================================================
   1. DESIGN TOKENS (The Raw Palette)
   ========================================================================== */
:root {
    /* Brand Colors */
    --color-orange-600: #ea580c;
    --color-orange-500: #f97316;
    
    /* Neutral Palette - Dark */
    --color-black: #0a0a0a;
    --color-gray-900: #121212; /* #151515 */
    --color-gray-800: #191919; 

    /* --color-black: #ff0000;
    --color-gray-900: #00ff00;
    --color-gray-800: #e1ff00;  */
  

    /* Neutral Palette - Light */
    --color-white: #ffffff;
    --color-slate-50: #f8fafc;
    --color-slate-200: #e2e8f0;
    --color-slate-900: #0f172a;
    --color-muted: rgba(15, 23, 42, 0.05);
    --color-dim: rgba(15, 23, 42, 0.2);
    --color-trans: rgba(0, 0, 0, 0.8);
    --color-grad-lt-start: rgba(245, 245, 245, 0.7);
    --color-grad-lt-end: rgba(255, 255, 255, 0.7);
    --color-grad-dk-start: rgba(59, 59, 59, 0.4);
    --color-grad-bk-mid: rgba(25, 25, 25, 0.7);
    --color-grad-dk-end: rgba(7, 7, 7, 0.7);

    /* Feedback */
    --color-safe: #22c55e;
    --color-risk: #dc2626;

    /* Typography Scale (Systematic rem usage) */
    --text-xs: 0.625rem;  /* 10px */
    --text-sm: 0.75rem;   /* 12px */
    --text-base: 0.875rem;/* 14px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.5rem;    /* 24px */
    --text-readable: 1rem;

    /* Readability tokens (older users) */
    --text-body: 1rem;
    --text-caption: 0.875rem;
    --text-small: 0.75rem;
    /* Hub / module header tagline — .page-subtitle only (see partials + admin top bar) */
    --text-page-subtitle: 0.6rem;

    /* Glass & Gradients Logic */
    --glass-blur: blur(16px);

    /* DEFAULT: NIGHT OPS (DARK) */
    --bg-app: var(--color-gray-900);
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-module: rgba(19, 19, 19, 0.7);
    --bg-drawer: var(--color-gray-900);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-input-hover: rgba(255, 255, 255, 0.1);
    --bg-panel-inner: rgba(255, 255, 255, 0.06);

    /* Borders: main (default), muted (subtle), subtle-strong (emphasis) */
    --border-main: rgba(255, 255, 255, 0.08);
    --border-muted: rgba(255, 255, 255, 0.05);
    --border-subtle-strong: rgba(255, 255, 255, 0.15);
    
    --text-main: var(--color-white);
    --text-muted: rgba(255, 255, 255, 0.3);
    --text-dim: rgba(255, 255, 255, 0.1);

    /* Drawer typography (semantic; defaults match main/muted) */
    --text-drawer-header: var(--text-main);
    --text-drawer-subtitle: var(--text-muted);
    
    --accent: var(--color-orange-600);
    /* --grad-card: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(18, 18, 18, 0.7) 100%); */
    --grad-card: linear-gradient(
        180deg, 
        var(--color-grad-dk-start) 0%, 
        var(--color-grad-dk-end) 100%
    );

    /* Portal index column cap — matches app/index.html body max-w-md */
    --portal-shell-max-w: 28rem;

    /* Drawer Width Tokens (desktop; mobile stays w-full) */
    --drawer-w-compact: 28rem;
    --drawer-w-default: 42rem;
    --drawer-w-wide: 72rem;
    --drawer-w-widest: 80rem;
    /* Bottom-sheet top corners (admin / executive / portal; top-only) */
    --drawer-radius-top: 2rem;
}

/* Backup when compiled Tailwind omits .rounded-t-[var(--drawer-radius-top)] (keep safelist + `npm run build:css` in app/). */
[class*="(--drawer-radius-top)"] {
    border-top-left-radius: var(--drawer-radius-top);
    border-top-right-radius: var(--drawer-radius-top);
}

/* ==========================================================================
   2. SEMANTIC THEMES (The Logic Bridge)
   ========================================================================== */

/* DAYLIGHT PROTOCOL (LIGHT MODE) */
body.light-mode {
    --bg-app: var(--color-white);
    --bg-card: var(--color-slate-200);
    --bg-module: var(--color-slate-50);
    --bg-drawer: var(--color-white);
    --bg-input: var(--color-white);
    --bg-input-hover: rgba(0, 0, 0, 0.05);
    --bg-panel-inner: rgba(255, 255, 255, 0.92);

    /* Borders: main (default), muted (subtle), subtle-strong (emphasis) */
    --border-main: var(--color-slate-200);
    --border-muted: var(--color-muted);
    --border-subtle-strong: rgba(15, 23, 42, 0.2);
    
    --text-main: var(--color-slate-900);
    --text-muted: rgba(15, 23, 42, 0.55);
    --text-dim: var(--color-dim);

    --text-drawer-header: var(--text-main);
    --text-drawer-subtitle: var(--text-muted);
    
    /* --grad-card: linear-gradient(180deg, rgba(245, 245, 245, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%); */

    --grad-card: linear-gradient(
        180deg, 
        var(--color-grad-lt-start) 0%, 
        var(--color-grad-lt-end) 100%
    );
}

/* Text size system (Normal / Large / Extra Large) */
html { font-size: 16px; }
html.text-large {
    font-size: 18px;
    --text-body: 1.125rem;
    --text-caption: 1rem;
    --text-small: 0.875rem;
    --text-page-subtitle: 0.6875rem;
}
html.text-xlarge {
    font-size: 20px;
    --text-body: 1.25rem;
    --text-caption: 1.125rem;
    --text-small: 1rem;
    --text-page-subtitle: 0.8125rem;
}

/* ==========================================================================
   3. GLOBAL STYLES & LAYOUT
   ========================================================================== */
body { 
    background-color: var(--bg-app); 
    color: var(--text-main); 
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.5s ease, color 0.5s ease;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.05em;
}

h1 { font-size: var(--text-xl); font-weight: 900; text-transform: uppercase; font-style: italic; }
h2 { font-size: var(--text-lg); font-weight: 900; text-transform: uppercase; }
h3 { font-size: var(--text-base); font-weight: 700; text-transform: uppercase; }
p, label { font-size: var(--text-sm); }

/* Readability utility classes */
.text-body { font-size: var(--text-body); }
.text-caption { font-size: var(--text-caption); }
.text-small { font-size: var(--text-small); }

/* Shared semantic typography roles — scale with html.text-large / html.text-xlarge */
.page-title { font-size: var(--text-body); font-weight: 900; }
.page-subtitle { font-size: var(--text-page-subtitle); }
.section-heading { font-size: var(--text-caption); }
.meta-label { font-size: var(--text-small); }
.small-action { font-size: var(--text-small); }
.table-header { font-size: var(--text-small); }
.body-copy { font-size: var(--text-body); }
.body-copy-sm { font-size: var(--text-caption); }

/* Sidebar & Navigation */
aside, #admin-sidebar {
    background-color: var(--bg-app);
    border-right: 1px solid var(--border-main);
}

/* ==========================================================================
   THEME TOGGLE SYSTEM
   ========================================================================== */

/* THE TRACK */
#site-light-btn {
    background-color: rgba(34, 197, 94, 0.2); /* Default Night Ops Greenish */
    transition: background-color 0.4s ease;
}

/* THE DOT (Default: Night Ops) */
#site-light-dot {
    background-color: var(--color-safe); /* Green */
    transform: translateX(4px); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.4s ease;
}

/* DAYLIGHT OVERRIDES (Activated by .light-mode class) */
body.light-mode #site-light-btn {
    background-color: rgba(15, 23, 42, 0.1); /* Subtle Slate */
}

body.light-mode #site-light-dot {
    background-color: var(--accent); /* Forensic Orange */
    transform: translateX(24px);    /* Slid to Right */
}

/* Glass card: light-mode uses semantic gradient */
body.light-mode .glass-card {
    background: var(--grad-card);
}

/* ==========================================================================
   4. COMPONENTS (Surgical Precision)
   ========================================================================== */

.glass-card { 
    border-radius: 28px;
    border: 3px solid var(--border-main);
    background: linear-gradient(0deg, var(--color-grad-dk-start) 20%, var(--color-grad-dk-end));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px -5px var(--color-dim);
    overflow: hidden;
}

.module-card {
    border: 1px solid var(--border-main);
    background: linear-gradient(180deg, var(--color-grad-lt-start) 0%, var(--color-grad-bk-mid) 80%, var(--color-grad-dk-end) 100%);
    box-shadow: 0 10px 30px -5px var(--color-dim);
}

/* Inputs, Textareas, Selects */
input, select, textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    border-radius: 12px;
    padding: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
}

/* Specific UI Utilities */
.module-bg { background-color: var(--bg-input); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }

/* Feedback Classes */
.text-risk { color: var(--color-risk); }
.text-action { color: var(--accent); }
.text-safe { color: var(--color-safe); }

/* ==========================================================================
   5. SPECIAL ELEMENTS (Preserved from Old CSS)
   ========================================================================== */

/* Custom Scrollbar for Forensic Ledger */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--border-muted); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: var(--accent); 
    border-radius: 10px; 
    opacity: 0.3;
}

/* Forensic Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast {
    background: var(--color-trans);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--accent); /* Default Orange */
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    animation: toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast-in {
    from { transform: translateX(100%) scale(0.9); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

.toast-out {
    animation: toast-out 0.4s ease-in forwards;
}

@keyframes toast-out {
    to { transform: translateX(20px); opacity: 0; }
}

/* Number Input Reset */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Scrollbar Hiding (Dispatch Specific) */
#directive-description::-webkit-scrollbar { display: none; }
#directive-description {
    -ms-overflow-style: none;
    scrollbar-width: none;
    resize: none;
}

/* @keyframes toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
} */

@media print {
    body { background: white !important; color: black !important; }
    .glass-card { border: 1px solid #eee !important; background: none !important; backdrop-filter: none !important; }
    .nav-item, aside, #admin-sidebar, button { display: none !important; }
}

/* Certify checkbox wrapper (clickability) */
.certify-wrap {
    position: relative;
    z-index: 50;
}
.certify-wrap input#certify {
    pointer-events: auto;
}
body.light-mode .certify-wrap {
    position: relative;
    z-index: 50;
}

/* Forensic Checkbox Restoration */
.certify-checkbox {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #ea580c;
}

/* Visibility for "Other" Credential input */
.credential-other-wrap {
    display: none;
    margin-top: 0.5rem;
}

.credential-other-wrap.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#triage-modal {
    z-index: 99999 !important; /* Force it to the very front */
    display: none; /* Default state */
}

/* Tailwind 'hidden' normally handles this, but let's be explicit */
#triage-modal:not(.hidden) {
    display: flex !important;
}



/* ==========================================================================
   DISPATCH
   ========================================================================== */