/* Navbar Styles */
/* Full-width red header bar containing the logo */

/* Sticky header that sits flush below the fixed connection bar at the top.
   Sticky (not fixed) so it scrolls into view normally on first paint and
   then pins once the user scrolls past it. */
.site-header {
    position: sticky;
    top: var(--connection-bar-height);
    width: 100%;
    z-index: 1000;
}

.navbar {
    background-color: var(--color-brand-primary);
    width: 100%;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Grid layout lets us reshape the navbar between desktop (one row: logo,
   clock, actions) and mobile (two rows: logo+clock on top, actions below).
   Named template areas describe the shape literally per breakpoint. */
.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo clock actions";
    align-items: center;
    column-gap: 1rem;
    width: 100%;
}

.logo-link {
    grid-area: logo;
    display: block;
    flex-shrink: 0;
}

.logo-link:hover {
    opacity: 0.9;
}

/* Fluid logo height for desktop (single-row navbar layout).
   - 1200px viewport: 192 → caps to 135 (the "perfect" desktop size).
   - 844px viewport: hits cap (135).
   - 769px viewport: ~108 (right before tablet breakpoint takes over).
   The tablet/mobile @media block below replaces this with a much taller
   range to match the two-row navbar's vertical extent. */
.logo-img {
    height: clamp(80px, 14vw, 135px);
    width: auto;
    display: block;
}

/* The brand-stack pairs the live clock with the "last transmission" bar
   into a single vertical unit. On desktop it occupies the "clock" grid
   area (between the logo and the actions). On tablet/mobile it just
   becomes another flex item inside .navbar-right. */
.brand-stack {
    grid-area: clock;
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

/* Today's date label, shown above the clock inside .brand-stack.
   We render BOTH the long ("Wednesday, April 29th") and short ("Wed, Apr 29th")
   strings in the DOM and let CSS pick which is visible per breakpoint —
   simpler than reading viewport width from JS. */
.header-date {
    color: var(--color-text-inverse);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

.header-date-short {
    display: none;
}

/* Live EST clock — sits inside .brand-stack, above the last-transmission
   indicator. tabular-nums keeps digit widths fixed so seconds don't shimmy. */
.live-clock {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--color-text-inverse);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

/* Header-context overrides for <LastTransmissionBar /> rendered via
   <HeaderLastTx />. The base styles (last-tx.css) assume a white card on
   a light page; in the navbar we want it transparent, smaller, and white. */
.navbar-right .last-transmission-bar {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    font-style: normal;
    color: var(--color-text-inverse);
    gap: 0.25rem;
    white-space: nowrap;
}

.navbar-right .last-tx-text {
    color: var(--color-text-inverse);
    opacity: 0.85;
}

.navbar-right .last-tx-unit {
    color: var(--color-text-inverse);
}

.navbar-right .last-tx-time {
    margin: 0 0.1rem;
}

/* Speaking-head icon at the start of the last-transmission line.
   - font-size: 1.7em makes the icon larger than surrounding text so it
     reads as the visual anchor of the line.
   - filter: brightness(0) invert(1) recolors the colored emoji glyph
     to pure white: brightness(0) flattens every pixel to black while
     preserving alpha, then invert(1) flips black to white. Lets the
     emoji sit cleanly on the red navbar without its native skin tones.
   - inline-block + line-height: 1 keeps it baseline-aligned with the
     surrounding text; the small horizontal margin gives it breathing
     room without making the bar feel sparse.
   - transform: translateY nudges the glyph up by a few px to optically
     align with the time pill: emoji glyphs are typically rendered
     toward the bottom of their em-box (font metrics reserve space
     above for accent marks), so flex centering aligns the boxes but
     the visible glyphs end up sitting low. */
.navbar-right .last-tx-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2rem 0 0;
    line-height: 1;
    font-size: 1.7em;
    filter: brightness(0) invert(1);
    transform: translateY(-2px);
}

/* Nudge every sibling EXCEPT the icon down by 1px to optically align
   with the icon's adjusted center (the icon already sits at -2px to
   compensate for emoji's low glyph baseline; pushing the rest down a
   hair finishes closing the visual gap between icon and time pill). */
.navbar-right .last-transmission-bar > *:not(.last-tx-icon) {
    transform: translateY(1px);
}

/* Solid-white pill on the red navbar gives the recency-colored text
   a high-contrast canvas. Same model as the page-body version: white
   pill + colored text inside (red = fresh, orange = warming, purple =
   cooling, black/grey = old). */
.navbar-right .last-tx-number {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: none;
    color: #333;
    font-size: 0.8rem;
    padding: 0.05rem 0.35rem;
    min-width: 1.4rem;
}

.navbar-right .last-tx-number.tx-time-red {
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.4);
}

.navbar-right .last-tx-number.tx-time-orange {
    color: #c2570a;
    border-color: rgba(230, 115, 0, 0.4);
}

.navbar-right .last-tx-number.tx-time-purple {
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.4);
}

.navbar-right .last-tx-number.tx-time-black {
    color: #555;
}

.navbar-right .polling-dots {
    color: rgba(255, 255, 255, 0.7);
}

.navbar-right .last-tx-clock {
    color: var(--color-text-inverse);
    opacity: 0.85;
    font-size: 0.7rem;
}

.live-clock-time {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.live-clock-zone {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0.8;
    text-transform: uppercase;
}

.navbar-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Allow wrapping so a squeezed window never produces horizontal overflow.
       min-width:0 lets the grid track shrink below the content's natural
       width — without it, the navbar would push the viewport wider. */
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

/* Wrapper around <LiveClock> + <.navbar-actions>. On desktop this is
   "transparent" via display:contents — its children participate directly in
   the parent grid (logo / clock / actions on a single row). On tablet and
   mobile (see the @media blocks below) it switches to a flex column so the
   clock centers horizontally over the buttons, regardless of how many
   buttons are visible (which depends on admin status). */
.navbar-right {
    display: contents;
}

.navbar-icon-btn {
    background: var(--navbar-btn-bg);
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 1.75rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.navbar-icon-btn:hover {
    background: var(--navbar-btn-bg-hover);
}

/* Buttons with a stacked label (label on top, icon on bottom, optional
   status below). Used for Scanner View, Notify, and Mark as heard.
   min-height matches the tallest variant (3-row Scanner with ON/OFF) so
   all buttons in the row stay the same height; 2-row buttons just gain
   a bit of vertical centering. */
.navbar-icon-btn.has-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.45rem 0.85rem;
    line-height: 1;
    min-height: 4.1rem;
}

.navbar-icon-btn.has-label .btn-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-text-inverse);
    white-space: nowrap;
}

.navbar-icon-btn.has-label .btn-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.navbar-icon-btn.has-label .btn-row {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1;
}

/* Status pill below the icon (e.g. ON/OFF on the Scanner View button).
   Muted white when off; bright green when the button is .active.
   The green matches the LiveButton's active state so "on" reads consistently
   across the navbar. */
.navbar-icon-btn.has-label .btn-status {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--color-text-inverse);
    opacity: 0.55;
}

.navbar-icon-btn.has-label.active .btn-status {
    color: #4ade80;
    opacity: 1;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.navbar-icon-btn.active {
    background: var(--navbar-btn-bg-active);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Mark as Read Button */
.mark-read-btn {
    position: relative;
    background: var(--color-accent, #3b82f6) !important;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mark-read-btn:hover {
    background: var(--color-accent-hover, #2563eb) !important;
}

.unplayed-count {
    font-size: 0.9rem;
    font-weight: bold;
    min-width: 1.25rem;
    text-align: center;
}

.auth-link {
    color: var(--color-text-inverse);
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-size: 1.1rem;
    background-color: var(--navbar-btn-bg);
    transition: background-color 0.2s;
}

.auth-link:hover {
    background-color: var(--navbar-btn-bg-hover);
}

/* Tablet + small-laptop adjustments — also where the navbar flips to a
   two-row layout (clock above the buttons). Container switches from grid
   to flex; the .navbar-right wrapper becomes a flex column so the clock
   auto-centers over the actions row, regardless of button count. The
   885px ceiling (wider than the conventional 768px tablet breakpoint)
   keeps the centered-group treatment for small laptops too — above 885px
   the desktop grid (logo / clock / actions) takes over. */
@media (max-width: 885px) {
    .navbar {
        padding: 0.5rem 0;
    }

    /* Tablet/mobile two-row layout: navbar is much taller (brand-stack +
       actions stacked vertically). Fluid logo size — floor of 90px keeps
       the logo readable at 360px viewports without crowding the brand-stack
       and buttons next to it; cap of 170px prevents over-inflation on
       large tablets. */
    .logo-img {
        height: clamp(90px, 22vw, 170px);
    }

    /* Tablet/mobile: center the logo and the brand-stack/buttons group
       together as a single unit, with a modest gap between them. Without
       this, justify-content: space-between would push them to opposite
       edges of the navbar — fine on phones (where every pixel counts) but
       awkward at 600-768px widths where there's a wide empty band between
       the logo and the right-hand cluster. Centering keeps them visually
       grouped at every width in this range. */
    .navbar-container {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 1rem;
    }

    .navbar-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem; /* ~8px between brand-stack and buttons */
        min-width: 0;
    }

    .brand-stack {
        /* Flex item inside .navbar-right; center its own children
           (clock + last-tx) horizontally over the buttons row. */
        justify-self: auto;
        align-items: center;
        gap: 0.1rem;
    }

    .live-clock {
        /* In flex-column context: align-self overrides parent's align-items
           if needed, but center is what we want. Reset grid props. */
        justify-self: auto;
        align-self: auto;
    }

    .navbar-right .last-transmission-bar {
        font-size: 0.8rem;
    }

    .navbar-right .last-tx-number {
        font-size: 0.85rem;
        padding: 0.02rem 0.3rem;
        min-width: 1.3rem;
    }

    .navbar-right .last-tx-clock {
        font-size: 0.75rem;
    }

    .header-date {
        font-size: 0.85rem;
    }

    .live-clock-time {
        font-size: 1.2rem;
    }

    .live-clock-zone {
        font-size: 0.65rem;
    }

    .navbar-actions {
        /* Reset grid props and let flex-column parent center it.
           Tighter gap than desktop so 3 labeled buttons fit on one row
           at the typical tablet/large-phone widths. */
        justify-self: auto;
        align-self: auto;
        gap: 0.6rem;
    }

    .navbar-icon-btn {
        font-size: 1.4rem;
        padding: 0.6rem 0.8rem;
        border-radius: 5px;
    }

    .navbar-icon-btn.has-label {
        padding: 0.4rem 0.7rem;
        min-height: 3.6rem;
    }

    .navbar-icon-btn.has-label .btn-icon {
        font-size: 1.25rem;
    }

    .navbar-icon-btn.has-label .btn-label {
        font-size: 0.6rem;
    }

    .navbar-icon-btn.has-label .btn-status {
        font-size: 0.55rem;
    }

    .auth-link {
        font-size: 0.95rem;
        padding: 0.6rem 1rem;
        border-radius: 5px;
    }
}

/* Mobile adjustments — layout shape is inherited from the tablet
   breakpoint above; this just shrinks the assets further. */
@media (max-width: 480px) {
    .navbar {
        padding: 0.4rem 0;
    }

    /* Logo height continues to follow the .logo-img clamp() above. */

    .navbar-container {
        padding: 0 0.5rem;
        column-gap: 0.5rem;
    }

    .navbar-right {
        gap: 0.4rem; /* ~6px between brand-stack and buttons on phones */
    }

    .navbar-right .last-transmission-bar {
        font-size: 0.75rem;
    }

    .navbar-right .last-tx-number {
        font-size: 0.8rem;
        padding: 0.02rem 0.25rem;
        min-width: 1.2rem;
    }

    .navbar-right .last-tx-clock {
        font-size: 0.7rem;
    }

    .live-clock {
        gap: 0.25rem;
    }

    /* On phones, swap to the abbreviated date string. */
    .header-date {
        font-size: 0.7rem;
    }

    .header-date-full {
        display: none;
    }

    .header-date-short {
        display: inline;
    }

    .live-clock-time {
        font-size: 0.95rem;
    }

    .live-clock-zone {
        font-size: 0.55rem;
    }

    .navbar-actions {
        gap: 0.4rem;
    }

    .navbar-icon-btn {
        font-size: 1.1rem;
        padding: 0.5rem 0.65rem;
        border-radius: 4px;
    }

    .navbar-icon-btn.has-label {
        padding: 0.35rem 0.5rem;
        gap: 0.15rem;
        min-height: 3rem;
    }

    .navbar-icon-btn.has-label .btn-icon {
        font-size: 1rem;
    }

    .navbar-icon-btn.has-label .btn-label {
        font-size: 0.55rem;
        letter-spacing: 0.03em;
    }

    .navbar-icon-btn.has-label .btn-status {
        font-size: 0.5rem;
    }

    .auth-link {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        border-radius: 4px;
    }
}

/* Sub-400px squeeze — the smallest phone widths (360px Android,
   375px iPhone Mini). Tightens everything one more notch so:
   1. The 3-button row (Mark heard / Scanner View / Notify) stays
      on a single line instead of wrapping Notify down.
   2. The "last transmission was N ago (HH:MM)" text wraps to a
      second centered line instead of overflowing the viewport.
   The logo's clamp() in the 768px block above already scales
   down to its 90px floor by this point, so we don't reset it. */
@media (max-width: 400px) {
    .navbar {
        padding: 0.35rem 0;
    }

    .navbar-container {
        padding: 0 0.4rem;
        column-gap: 0.4rem;
    }

    .navbar-right {
        gap: 0.35rem;
    }

    /* Allow the last-transmission text to wrap. flex-wrap lets the
       child spans (text / time pill / clock) flow to subsequent
       centered lines; white-space: normal lets the text spans break
       at word boundaries. max-width: 100% keeps the bar from pushing
       its parent wider than the available column width. */
    .navbar-right .last-transmission-bar {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        max-width: 100%;
        font-size: 0.7rem;
        gap: 0.2rem;
    }

    .navbar-right .last-tx-number {
        font-size: 0.75rem;
        padding: 0.02rem 0.3rem;
        min-width: 1.2rem;
    }

    .navbar-right .last-tx-clock {
        font-size: 0.65rem;
    }

    .brand-stack {
        min-width: 0;
        max-width: 100%;
    }

    .header-date {
        font-size: 0.65rem;
    }

    .live-clock-time {
        font-size: 0.85rem;
    }

    .live-clock-zone {
        font-size: 0.5rem;
    }

    .navbar-actions {
        gap: 0.3rem;
    }

    .navbar-icon-btn {
        font-size: 1rem;
        padding: 0.4rem 0.5rem;
    }

    .navbar-icon-btn.has-label {
        padding: 0.3rem 0.4rem;
        gap: 0.1rem;
        min-height: 2.7rem;
    }

    .navbar-icon-btn.has-label .btn-icon {
        font-size: 0.9rem;
    }

    .navbar-icon-btn.has-label .btn-label {
        font-size: 0.5rem;
        letter-spacing: 0;
    }

    .navbar-icon-btn.has-label .btn-status {
        font-size: 0.45rem;
    }

    .auth-link {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
    }
}