/* Shared top-navigation dropdowns (see nav.js).
   Lives in its own file rather than theme.css because the war monitor does not
   load theme.css — it has its own stylesmain.css and would otherwise miss out. */

.topbar-nav--grouped {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Labels must never break mid-word. Without this the row silently squeezes
   "Faction Monitor" onto two lines instead of reflowing. */
.topbar-nav--grouped a,
.topbar-nav--grouped .nav-group-toggle {
    white-space: nowrap;
}

.topbar-nav--grouped > .nav-link,
.nav-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-family: inherit;
    /* Pinned rather than inherited. The toggles are <button>, so they picked up
       whatever each page's stylesheet does to buttons — 700 on the pages that
       load theme.css, the browser default on the war monitor, which loads only
       its own. Stating it here makes every page agree, links included. */
    font-weight: 700;
    line-height: 1.4;
    padding: 5px 10px;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.topbar-nav--grouped > .nav-link:hover,
.nav-group-toggle:hover {
    color: var(--text);
    background: var(--surface-2);
}

.topbar-nav--grouped > .nav-link.active,
.nav-group-toggle.active {
    color: var(--primary);
    background: var(--surface-2);
}

.nav-caret {
    font-size: 0.65em;
    opacity: 0.7;
    transition: transform 0.15s;
}

.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-group {
    position: relative;
}

.nav-group-menu {
    display: none;
    /* Fixed, not absolute. Under 700px the pages turn .topbar-nav into a
       horizontal scroller (overflow-x: auto), and a box that clips one axis
       clips the other with it — an absolutely positioned menu sitting below
       the nav was cut away completely, so tapping a group on a phone looked
       like it did nothing. Fixed leaves the scroll container behind.
       top / left / min-width are supplied by placeMenu() in nav.js, in
       viewport coordinates. */
    position: fixed;
    top: 0;
    left: 0;
    /* nav.js clamps the menu's position into the viewport; this is the other
       half of that — a menu can never be wider than the window it sits in. */
    max-width: calc(100vw - 16px);
    padding: 4px;
    background: var(--surface-1, var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 200;
}

.nav-group.open .nav-group-menu { display: block; }

.nav-group-menu a {
    display: block;
    padding: 7px 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-sm, 4px);
}

/* nav.js sets [hidden] on a link whose grant the caller does not hold, and on a
   group with nothing left in it. The UA rule that implements `hidden` is a bare
   `[hidden] { display: none }` — specificity 0,1,0 — which BOTH `.nav-group-menu
   a` and theme.css's `.topbar-nav a` outrank at 0,1,1. Without this, hiding a
   link sets the attribute and changes nothing on screen, which is exactly how
   Money Log and Reimbursement Admin stayed visible to every member.
   styles/home.css carries the same override for `.topbar-nav` after hitting it
   the first time. Verify a change here with getComputedStyle, never with
   `el.hidden` — that only reads back the property you just set. */
.topbar-nav [hidden],
.nav-group[hidden],
.nav-group-menu a[hidden] { display: none !important; }

.nav-group-menu a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.nav-group-menu a.active {
    color: var(--primary);
    background: var(--surface-2);
}

@media (max-width: 700px) {
    .topbar-nav--grouped { flex-wrap: nowrap; }
    /* Fingers, not a mouse pointer. */
    .nav-group-menu a { padding: 10px 12px; }
}

.topbar-nav--grouped {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.nav-bell {
    position: relative;
    flex: 0 0 auto;
}

.nav-bell-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 5px 6px;
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.nav-bell-toggle:hover { color: var(--text); background: var(--surface-2); }
.nav-bell-toggle.has-unread { color: var(--primary); }

.nav-bell-icon { display: block; }

.nav-bell-icon svg {
    display: block;
    width: 19px;
    height: 19px;
}

.nav-bell-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--primary);
    color: #111113;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.nav-bell-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: min(360px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    background: var(--surface-1, var(--surface, var(--bg)));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 200;
}

.nav-bell.open .nav-bell-panel { display: block; }

.nav-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
}

.nav-bell-clear {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-bell-clear:hover { color: var(--primary); }

.nav-bell-list {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

.nav-bell-empty {
    margin: 0;
    padding: 16px 12px;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

.nav-bell-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    border-left: 2px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.78rem;
}

.nav-bell-item:last-child { border-bottom: none; }
a.nav-bell-item:hover { background: var(--surface-2); }

.nav-bell-item.unread {
    border-left-color: var(--primary);
    background: rgba(247, 148, 29, 0.06);
}

.nav-bell-item strong {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
}

.nav-bell-item.unread strong { color: var(--primary); }

.nav-bell-item-body { line-height: 1.35; overflow-wrap: anywhere; }

.nav-bell-item-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 1px;
}

.nav-bell-tag {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-bell-tag.kind-reimbursement_accepted,
.nav-bell-tag.kind-payout_complete { color: var(--online); }
.nav-bell-tag.kind-reimbursement_rejected,
.nav-bell-tag.kind-oc_item_missing { color: var(--status-hosp); }
.nav-bell-tag.kind-oc_flight_delay,
.nav-bell-tag.kind-reimbursement_submitted { color: var(--status-travel); }
.nav-bell-tag.kind-manual { color: var(--primary); }

.nav-bell-item-when {
    color: var(--text-muted);
    font-size: 0.68rem;
    opacity: 0.8;
}

@media (max-width: 700px) {
    .nav-bell-item { padding: 11px 12px; }

    .topbar-brand { width: auto; flex: 1 1 auto; min-width: 0; }
    .nav-bell { order: 1; }
    .topbar-nav--grouped { order: 2; justify-content: flex-start; }
}