/* ===========================================
   TOPBAR.CSS — Desktop topbar (≥900px)
   ===========================================

   Structure:
     <div class="topbar" role="navigation" aria-label="Site context">
       <div class="topbar-pill" data-topbar-pill aria-live="polite">
         <button class="hospital-selector-btn topbar-hospital-btn">
           <span class="hospital-site-name">…</span>
           <span class="hospital-specialty-name">…</span>
           <svg class="hospital-selector-chevron">…</svg>
         </button>
       </div>
       <div class="topbar-actions" data-topbar-actions>
         <div class="theme-toggle topbar-theme-toggle" …>…</div>
       </div>
     </div>

   The topbar is hidden below 900px.
   =========================================== */

.topbar {
    display: none;
}

@media (min-width: 900px) {
    .topbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
        height: var(--topbar-height);
        padding: 0 1.25rem;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-subtle);
        position: sticky;
        top: 0;
        z-index: 140;
        flex-shrink: 0;
    }

    /* ---------- Pill (left slot) ---------- */

    .topbar-pill {
        display: flex;
        align-items: center;
        min-width: 0;
        grid-column: 1;
        justify-self: start;
    }

    .topbar-hospital-btn {
        appearance: none;
        background: transparent;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: 32px;
        padding: 0 0.625rem;
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 0.875rem;
        font-weight: 600;
        transition: background 0.12s ease;
        min-width: 0;
    }

    @media (hover: hover) {
        .topbar-hospital-btn:hover {
            background: var(--bg-tertiary);
        }
    }

    .topbar-hospital-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring-nhs-green);
    }

    .topbar-hospital-btn .hospital-site-name {
        color: var(--text-primary);
    }

    .topbar-hospital-btn .hospital-specialty-name {
        color: var(--theme-primary, var(--nhs-blue));
        font-weight: 700;
    }

    .topbar-hospital-btn .hospital-specialty-name::before {
        content: '·';
        color: var(--text-muted);
        margin-right: 0.375rem;
        font-weight: 400;
    }

    .topbar-hospital-btn .hospital-site-name,
    .topbar-hospital-btn .hospital-specialty-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .topbar-hospital-btn .hospital-selector-chevron {
        flex-shrink: 0;
        color: var(--text-muted);
    }

    /* ---------- Actions (right slot) ---------- */

    .topbar-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        grid-column: 3;
        justify-self: end;
    }

    .topbar-theme-toggle {
        flex-shrink: 0;
        padding: 0.1875rem;
        border: none;
    }

    .topbar-theme-toggle::before {
        top: 0.1875rem;
        left: 0.1875rem;
        width: 24px;
        height: 24px;
    }

    [data-theme="dark"] .topbar-theme-toggle::before {
        transform: translateX(calc(24px + 0.25rem));
    }

    .topbar-theme-toggle .theme-option {
        width: 24px;
        height: 24px;
    }

    .topbar-theme-toggle .theme-option svg {
        width: 14px;
        height: 14px;
    }

    /* Patient mode hides the entire clinician topbar (site selector, theme toggle). */
    body.patient-mode .topbar {
        display: none;
    }
}