/* ==========================================================================
   Clinician Portal header
   ==========================================================================

   The single source for the portal's top bar. This markup used to be copied
   into clinician.view.html and account.view.html, and the two copies had
   already drifted — different brand gap, different logo box, and a different
   colour on the portal title — so the theme toggle would have had to ship
   twice and diverge a third time.

   Canonicalised on the worklist's version, which is the screen this chrome was
   designed against and the only one that carried the responsive rules.

   Colours are semantic tokens only, so assets/css/_designvars-dark.scss
   re-themes this file without it knowing dark mode exists.
   ========================================================================== */

.clinician-header {
    height: 67px;
    background: var(--surfaces-section-bg-branded-lighter, #ebf3f9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--layout-screen-page-margins-horizontal);
}

.clinician-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.clinician-logo {
    width: 135px;
    height: 31px;
    display: block;
}

/* The dark wordmark is a separate asset, so only one of the pair is ever shown.
   The hidden one still downloads; at ~10KB that is cheaper than the flash of a
   swapped src, and far cheaper than getting the brand marks wrong. */
.clinician-logo--dark {
    display: none;
}

html[data-theme="dark"] .clinician-logo--light {
    display: none;
}

html[data-theme="dark"] .clinician-logo--dark {
    display: block;
}

.clinician-portal-title {
    margin: 0;
    font-family: var(--fonts-body);
    font-size: var(--layout-font-size-sm);
    line-height: var(--layout-line-height-sm);
    letter-spacing: var(--layout-letter-spacing-sm);
    font-weight: 600;
    color: var(--text-body-text-brand, #224f77);
    white-space: nowrap;
}

/* ---- right-hand cluster: theme toggle, then the user button ---- */

.clinician-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.clinician-user-menu {
    position: relative;
}

.clinician-user-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--layout-spacing-unit-xs) 0;
    border-radius: var(--layout-radius-buttons);
}

.clinician-user-btn-text {
    font-family: var(--fonts-body);
    font-size: var(--layout-font-size-sm);
    line-height: var(--layout-line-height-sm);
    letter-spacing: var(--layout-letter-spacing-sm);
    font-weight: 600;
    color: var(--buttons-links-secondary-base, #3f3f46);
}

.clinician-caret {
    font-size: 12px;
    color: var(--buttons-links-secondary-base, #3f3f46);
    line-height: 1;
}

.clinician-user-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--layout-spacing-unit-xs));
    right: 0;
    z-index: 50;
    min-width: 150px;
    width: max-content;
    background: var(--surfaces-card-bg, #ffffff);
    border: 1px solid var(--content-borders-card-border, #d4d4d8);
    border-radius: var(--layout-radius-cards-lg, 13px);
    box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.07), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: var(--layout-spacing-unit-xs, 8px);
    display: none;
}

.clinician-user-dropdown-menu.show {
    display: block;
}

.clinician-user-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: var(--text-headline-text-neutral, #27272a);
    font-family: var(--fonts-body);
    font-size: var(--layout-font-size-sm);
    border-radius: 8px;
    transition: background-color 160ms ease;
}

.clinician-user-dropdown-item:hover {
    background: var(--surfaces-section-bg-neutral-light, #f4f4f5);
    text-decoration: none;
    color: var(--text-headline-text-neutral, #27272a);
}

.clinician-user-dropdown-item i {
    color: var(--text-subtle-text, #71717a);
    font-size: 16px;
}

/* ==========================================================================
   Theme toggle
   ==========================================================================

   Three states rather than a switch. The default is `system`, and a two-state
   switch cannot express "follow my OS" — it would have to show a position the
   clinician never chose and cannot get back to.
   ========================================================================== */

/* The directive's host element. Left inline, it would wrap the pill in a line
   box and pad it with descender space inside a flex row. */
clinician-theme-toggle {
    display: inline-flex;
}

.clinician-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--content-borders-card-border, #d4d4d8);
    border-radius: var(--layout-radius-buttons, 999px);
    background: var(--surfaces-card-bg, #ffffff);
}

.clinician-theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--layout-radius-buttons, 999px);
    background: transparent;
    cursor: pointer;
    /* currentColor drives the icon strokes, so one rule themes both. */
    color: var(--text-subtle-text, #71717a);
    transition: background-color 160ms ease, color 160ms ease;
}

.clinician-theme-option:hover {
    color: var(--text-headline-text-neutral, #27272a);
    background: var(--surfaces-section-bg-neutral-light, #f4f4f5);
}

.clinician-theme-option.is-active {
    background: var(--buttons-links-primary-base, #23537c);
    color: var(--buttons-links-primary-content, #ffffff);
}

.clinician-theme-option.is-active:hover {
    background: var(--buttons-links-primary-hover, #163550);
    color: var(--buttons-links-primary-content, #ffffff);
}

.clinician-theme-option:focus-visible {
    outline: 2px solid var(--content-borders-focus, #2d6a9f);
    outline-offset: 2px;
}

.clinician-theme-option svg {
    width: 15px;
    height: 15px;
    display: block;
}

@media (max-width: 768px) {

    .clinician-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .clinician-portal-title {
        display: none;
    }

    .clinician-header-actions {
        gap: 10px;
    }
}