/* census-header-dr-overlay.css
 * ARCHITECTURE: Dark Roast warm-up overlay for census header terminal theme.
 * WHY: The header uses --term-* tokens (cold mint, 0-radius, neon glow) which
 *      clash with the Dark Roast landing page below. The dr-compat.css bridge
 *      handles ~80% of the color migration by remapping --term-* values. This
 *      file fixes the remaining ~20%: geometry (radii), hardcoded colors,
 *      glow warmth, and guest-mode spacing.
 * TRADEOFF: Thin overlay (~100 lines) vs full rewrite of 688-line header CSS.
 *           Keeps terminal DNA intact while warming it for visual coherence.
 * NOTE: Load AFTER census-header-terminal.css. All rules scoped to
 *       .sol-top-nav[data-theme="terminal"] for safe specificity override.
 */


/* ==========================================================================
   S1  GEOMETRY — border-radius warm-up
   Sharp 0-radius → soft 4px to match Dark Roast radii (4-12px range).
   ========================================================================== */

.sol-top-nav[data-theme="terminal"] .sol-search-box input,
.sol-top-nav[data-theme="terminal"] .sol-quick-action-btn,
.sol-top-nav[data-theme="terminal"] .sol-quick-action-btn.primary,
.sol-top-nav[data-theme="terminal"] .sol-quick-action-btn.secondary,
.sol-top-nav[data-theme="terminal"] .sol-refresh-btn,
.sol-top-nav[data-theme="terminal"] .sol-settings-btn,
.sol-top-nav[data-theme="terminal"] .sol-sign-in-btn,
.sol-top-nav[data-theme="terminal"] .sol-alert-badge,
.sol-top-nav[data-theme="terminal"] .sol-debug-badge,
.sol-top-nav[data-theme="terminal"] .sol-user-avatar {
    border-radius: 4px;
}

.sol-top-nav[data-theme="terminal"] .sol-quick-notes-group {
    border-radius: 4px;
    overflow: hidden;
}

.sol-top-nav[data-theme="terminal"] .sol-nav-substats {
    border-radius: 4px;
}

.sol-top-nav[data-theme="terminal"] .sol-nav-status-chip {
    border-radius: 4px;
}


/* ==========================================================================
   S2  GLOW WARMTH — neon mint → warm teal
   Hardcoded rgba(0, 255, 208, ...) values that the bridge can't reach.
   ========================================================================== */

/* Logo diamond mark — warm teal glow instead of neon mint */
.sol-top-nav[data-theme="terminal"] .sol-logo-mark {
    text-shadow: 0 0 10px rgba(76, 196, 180, 0.25);
}

/* Status chip text — warm teal glow */
.sol-top-nav[data-theme="terminal"] .sol-status-text {
    text-shadow: 0 0 8px rgba(76, 196, 180, 0.25);
}

/* Section prefix arrow — warm teal glow */
.sol-top-nav[data-theme="terminal"] .sol-section-prefix {
    text-shadow: 0 0 8px rgba(76, 196, 180, 0.25);
}

/* Active section link — warm teal glow */
.sol-top-nav[data-theme="terminal"] .sol-section-link--active,
.sol-top-nav[data-theme="terminal"] .sol-section-link.sol-section-link--active {
    text-shadow: 0 0 8px rgba(76, 196, 180, 0.2);
}

/* Sign In button hover — warm teal glow */
.sol-top-nav[data-theme="terminal"] .sol-sign-in-btn:hover {
    box-shadow:
        0 0 2px rgba(255, 255, 255, 0.3),
        0 0 8px rgba(76, 196, 180, 0.35),
        0 0 20px rgba(76, 196, 180, 0.12);
}

/* Primary button hover — warm teal glow */
.sol-top-nav[data-theme="terminal"] .sol-quick-action-btn.primary:hover,
.sol-top-nav[data-theme="terminal"] #navAddPatientBtn:hover {
    box-shadow:
        0 0 2px rgba(255, 255, 255, 0.3),
        0 0 8px rgba(76, 196, 180, 0.35),
        0 0 20px rgba(76, 196, 180, 0.12);
}

/* Search focus — warm teal ring */
.sol-top-nav[data-theme="terminal"] .sol-search-box input:focus {
    box-shadow: 0 0 8px rgba(76, 196, 180, 0.12);
}

/* Transfer badge — warm teal glow */
.sol-top-nav[data-theme="terminal"] .sol-transfer-badge {
    box-shadow: 0 0 6px rgba(76, 196, 180, 0.25);
}

/* Status chip — warm background tint */
.sol-top-nav[data-theme="terminal"] .sol-nav-status-chip {
    background: rgba(76, 196, 180, 0.03);
}


/* ==========================================================================
   S3  BOTTOM ACCENT LINE — amber warmth
   Gold gradient → amber-tinted for DR coherence.
   ========================================================================== */

.sol-top-nav[data-theme="terminal"]::after {
    background: linear-gradient(
        to right,
        transparent,
        rgba(230, 154, 76, 0.2),
        transparent
    );
}


/* ==========================================================================
   S4  VOICE BUTTON — harmonize with Sign In
   The white-bg pill is visually disconnected from both themes.
   ========================================================================== */

.sol-top-nav[data-theme="terminal"] .sol-voice-btn,
.sol-top-nav[data-theme="terminal"] button[aria-label="Voice"],
.sol-top-nav[data-theme="terminal"] .sol-nav-right > button:last-child {
    border-radius: 4px;
}


/* ==========================================================================
   S5  GUEST-MODE SPACING — hide auth-only controls for visitors
   Saves ~785px of horizontal space when guest hero is visible.
   ========================================================================== */

/* Hide quick actions (Add Patient, Refresh, Quick Notes) for guests */
body:has(.sol-guest-hero:not(.hidden)) .sol-quick-actions {
    display: none !important;
}

/* Hide section switcher for guests — they don't have access to these pages */
body:has(.sol-guest-hero:not(.hidden)) .sol-section-switcher {
    display: none !important;
}

/* Hide debug tab for guests */
body:has(.sol-guest-hero:not(.hidden)) .sol-nav-tabs {
    display: none !important;
}

/* Hide refresh button for guests — no patient data to refresh */
body:has(.sol-guest-hero:not(.hidden)) .sol-refresh-btn {
    display: none !important;
}

/* Hide settings for guests */
body:has(.sol-guest-hero:not(.hidden)) .sol-settings-btn {
    display: none !important;
}

/* Give nav-right more breathing room in guest mode */
body:has(.sol-guest-hero:not(.hidden)) .sol-nav-right {
    gap: 10px;
}


/* ==========================================================================
   S5b  QUICK GEN DROPDOWN — compact replacement for 785px quick actions row
   WHY: The old inline button group needed ~785px. This dropdown trigger is
        ~110px and expands on click. All button IDs preserved for JS binding.
   ========================================================================== */

.sol-quickgen-dropdown {
    position: relative;
    flex-shrink: 0;
}

.sol-quickgen-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--dr-font-mono, 'Share Tech Mono', monospace);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--dr-crema, #FFF7EE);
    background: var(--dr-grain, #2A1C13);
    border: 1px solid var(--dr-crater, #3C2A21);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.sol-quickgen-trigger:hover {
    border-color: var(--dr-crater-lt, #4D3B31);
    background: var(--dr-grain-hover, #382818);
}

.sol-quickgen-trigger i:first-child {
    color: var(--dr-teal, #4CC4B4);
    font-size: 0.85rem;
}

.sol-quickgen-caret {
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.2s;
}

/* Menu — hidden by default, shown on trigger click or focus-within */
.sol-quickgen-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--dr-obsidian, #160E08);
    border: 1px solid var(--dr-crater, #3C2A21);
    border-radius: 6px;
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 310; /* Above content-area z-index: 300 elements (problem cards, modals) */
}

/* Show when .open class is set by JS toggle */
.sol-quickgen-dropdown.open .sol-quickgen-menu {
    display: block;
}

.sol-quickgen-dropdown.open .sol-quickgen-caret {
    transform: rotate(180deg);
}

.sol-quickgen-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-family: var(--dr-font-mono, 'Share Tech Mono', monospace);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dr-bone, #EBE1D7);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.sol-quickgen-item:hover {
    background: rgba(76, 196, 180, 0.06);
    color: var(--dr-crema, #FFF7EE);
}

.sol-quickgen-item i {
    color: var(--dr-mocha, #8B7355);
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
}

.sol-quickgen-item:hover i {
    color: var(--dr-teal, #4CC4B4);
}

.sol-quickgen-divider {
    height: 1px;
    background: var(--dr-crater, #3C2A21);
    margin: 4px 10px;
}

/* Hide for guests — they can't generate notes */
body:has(.sol-guest-hero:not(.hidden)) .sol-quickgen-dropdown {
    display: none;
}


/* Debug tab hidden from header — accessible via user menu "State Inspector".
   Uses visibility: hidden (not display: none) so programmatic .click() still
   fires reliably across browsers including Safari. */
.sol-top-nav[data-theme="terminal"] .sol-nav-tabs {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Section links must never wrap — wrapping causes 81px height explosion */
.sol-top-nav[data-theme="terminal"] .sol-section-link {
    white-space: nowrap;
}

/* Kill horizontal scroll — no scrollbar in the header, ever.
   Items that don't fit are handled by responsive hide rules. */
.sol-top-nav[data-theme="terminal"] .sol-nav-left {
    overflow: hidden;
}

/* Allow nav-right to shrink — base CSS sets flex-shrink: 0 which causes
   left side overflow. Search box and gaps can compress. */
.sol-top-nav[data-theme="terminal"] .sol-nav-right {
    flex-shrink: 1;
}

.sol-top-nav[data-theme="terminal"] .sol-search-box {
    flex-shrink: 1;
    min-width: 120px;
}

.sol-top-nav[data-theme="terminal"] .sol-search-box input {
    min-width: 100px;
}

/* Prevent button text wrapping — "Sign In" must stay on one line */
.sol-top-nav[data-theme="terminal"] .sol-sign-in-btn,
.sol-top-nav[data-theme="terminal"] .sol-quickgen-trigger {
    white-space: nowrap;
}


/* ==========================================================================
   S6  RESPONSIVE DENSITY — fit all auth controls in a single row
   WHY: At 1440px the left side needs 1906px but gets 806px. Quick Notes
        group (785px) is the main offender. Progressive density reduction
        ensures everything is accessible without horizontal scroll.
   ========================================================================== */

/* Add Patient + Refresh hidden below 1920px — they're accessible from
   the census view body. Quick Gen dropdown stays at all widths. */
@media (max-width: 1920px) {
    .sol-top-nav[data-theme="terminal"] .sol-quick-actions {
        display: none;
    }
}

/* ── Below 1600px: hide secondary section links ── */
/* Dictum IR is a secondary entry point. */
@media (max-width: 1600px) {
    .sol-top-nav[data-theme="terminal"] #navDictumLink {
        display: none;
    }
}

/* ── Below 1600px: compact status + hide Admissions + shrink search ── */
@media (max-width: 1600px) {
    .sol-top-nav[data-theme="terminal"] #navAdmissionsLink {
        display: none;
    }

    /* Compact the status chip — hide timestamp to save ~80px */
    .sol-top-nav[data-theme="terminal"] .sol-status-sub,
    .sol-top-nav[data-theme="terminal"] .sol-status-sep {
        display: none;
    }

    /* Debug tab visually hidden globally (S5b), no breakpoint override needed */

    /* Shrink search box to give left side room */
    .sol-top-nav[data-theme="terminal"] .sol-search-box input {
        width: 160px;
    }
}

/* ── Below 1280px: compact section switcher ── */
/* Hide all section links except the active one (Census). Saves 150+px. */
@media (max-width: 1280px) {
    .sol-top-nav[data-theme="terminal"] .sol-section-link:not(.sol-section-link--active) {
        display: none;
    }

    .sol-top-nav[data-theme="terminal"] .sol-section-switcher {
        gap: 12px;
        margin-left: 12px;
    }

    /* Hide Add Patient + Refresh to save another ~240px */
    .sol-top-nav[data-theme="terminal"] .sol-quick-actions {
        display: none;
    }
}

/* ── Below 1024px: minimal header ── */
@media (max-width: 1024px) {
    /* Hide section switcher entirely */
    .sol-top-nav[data-theme="terminal"] .sol-section-switcher {
        display: none;
    }

    /* Hide debug tab */
    .sol-top-nav[data-theme="terminal"] .sol-nav-tabs {
        display: none;
    }

    /* Hide quick actions entirely */
    .sol-top-nav[data-theme="terminal"] .sol-quick-actions {
        display: none;
    }

    /* Compact brand block gap */
    .sol-top-nav[data-theme="terminal"] .sol-brand-block {
        gap: 8px;
    }

    .sol-top-nav[data-theme="terminal"] .sol-nav-left {
        gap: 8px;
    }

    /* Compact search */
    .sol-top-nav[data-theme="terminal"] .sol-search-box input {
        width: 160px;
        min-width: 120px;
    }

    .sol-top-nav[data-theme="terminal"] .sol-nav-right {
        gap: 6px;
    }
}