/**
 * ADMIN NAV — self-contained tenant nav bar styles
 * Polite Platform :: Control Plane
 * ----------------------------------
 * Path: /control-plane/public/assets/reference/css/admin-nav.css
 * Description: Styles for the shared tenant nav bar rendered by
 *   admin-nav.js. Deliberately NOT part of admin.css: this file is loaded
 *   on pages that run their own separate token systems (storyboard.css,
 *   layout-editor.css, piper-settings' inline styles) as well as pages
 *   that share admin.css. Every color/spacing reference below is a
 *   locally-shadowed `--nav-*` custom property declared on `#tenant-nav`
 *   (see that rule) — never the shared `--surface`/`--accent`/etc. names
 *   directly — so this stylesheet never has to agree with, or collide
 *   with, whatever token names and values the host page happens to define.
 * Context: UI
 * Author: Polite Platform Team
 * Date: 2026-09-06T20:52:44Z
 * Generated by: GPT-5 Codex (exact port of the Admin Dashboard reference)
 */

/* Fixed to the viewport top at all times — not `sticky`, which only pins
   once scroll reaches the element's natural flow position. That left a
   gap on load on pages with their own top padding/margin (e.g.
   platform.html's `body { padding: 40px 20px }`). Fixed removes it from
   flow entirely, so `body:has(#tenant-nav)` compensates with matching
   padding-top, and the `.header` offset rule below pushes the host
   page's own sticky header (position:sticky; top:0) down by the same
   amount so the two bars stack without overlapping. Keep 44px in sync
   with `.tenant-nav-inner`'s min-height. */
#tenant-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;

    /* Local token shadow with real hardcoded fallbacks (admin.css's dark
       theme values). On pages that load admin.css, `--surface`/`--accent`/
       etc. ARE defined, so these pick them up and stay reactive to theme
       switches (including ones made via the picker this bar hosts) —
       var() only falls back when the referenced property is completely
       undefined. On pages that don't load admin.css and don't define
       these names themselves (layout-editor.css's own dark palette,
       piper-settings' self-contained `--bg-0..3` styles), the literal
       fallback applies — no reliance on the host page, no risk of
       colliding with a same-named token that means something different
       there. storyboard.css (TD-42) is a middle case: it doesn't load
       admin.css either, but as of its close it defines `--surface`/
       `--border`/`--text`/`--text-dim`/`--accent` itself under these same
       names with matching dark-theme values, so the var() resolves to
       storyboard's own token instead of the literal fallback — same
       result, by design, not a collision to worry about. */
    --nav-surface: var(--surface, #1a1a1c);
    --nav-surface-hover: var(--surface-hover, #222224);
    --nav-border: var(--border, #2a2a2c);
    --nav-text: var(--text, #e5e5e5);
    --nav-text-dim: var(--text-dim, #a1a1a1);
    --nav-accent: var(--accent, #60a5fa);
    --nav-purple: var(--purple, #a78bfa);
    --nav-purple-dim: var(--purple-dim, rgba(167, 139, 250, 0.15));
    --nav-radius-sm: var(--radius-sm, 4px);
    --nav-radius-md: var(--radius-md, 8px);
    --nav-spacing-xs: var(--spacing-xs, 4px);
    --nav-spacing-sm: var(--spacing-sm, 8px);
    --nav-spacing-md: var(--spacing-md, 16px);
    --nav-spacing-lg: var(--spacing-lg, 24px);
    --nav-transition-fast: var(--transition-fast, 0.15s ease);
}

body:has(#tenant-nav) {
    padding-top: 44px;
}

/* `~ *` (not `~ .header` directly) because some hosts render their header
   nested inside a wrapper (e.g. storyboard.html, piper-settings.html both
   use `<body><div class="app"><div class="header">`) rather than as a
   direct sibling of #tenant-nav (e.g. layout-editor.html, the migrated
   admin.css editors). This matches `.header` at either depth. Harmless on
   pages whose own `.header` isn't sticky-positioned (piper-settings) —
   `top` on a non-positioned element does nothing. */
#tenant-nav ~ * .header,
#tenant-nav ~ .header {
    top: 44px;
}

.tenant-nav {
    background: var(--nav-surface);
    border-bottom: 1px solid var(--nav-border);
}

.tenant-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nav-spacing-md);
    padding: 0 var(--nav-spacing-lg);
    min-height: 44px;
}

.tenant-nav-primary {
    display: flex;
    align-items: center;
    gap: var(--nav-spacing-xs);
    height: 100%;
}

.tenant-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--nav-spacing-xs);
    min-height: 44px;
    padding: 0 var(--nav-spacing-sm);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--nav-text-dim);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--nav-transition-fast), border-color var(--nav-transition-fast);
}

.tenant-nav-item:hover {
    color: var(--nav-text);
}

.tenant-nav-item.active,
.tenant-nav-item[aria-current="page"] {
    color: var(--nav-text);
    border-bottom-color: var(--nav-accent);
}

.tenant-nav-dropdown {
    position: relative;
    padding: 0;
}

.tenant-nav-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nav-spacing-xs);
    height: 100%;
    min-height: 44px;
    padding: 0 var(--nav-spacing-sm);
    background: none;
    border: none;
    color: var(--nav-text-dim);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--nav-transition-fast);
}

.tenant-nav-dropdown-btn:hover {
    color: var(--nav-text);
}

.tenant-nav-dropdown.active .tenant-nav-dropdown-btn {
    color: var(--nav-text);
}

.tenant-nav-dropdown-menu,
.tenant-nav-user-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 200px;
    background: var(--nav-surface);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 200;
    overflow: hidden;
    padding: var(--nav-spacing-xs) 0;
}

.tenant-nav-dropdown-menu.show,
.tenant-nav-user-menu.show {
    display: block;
}

.tenant-nav-dropdown-menu a,
.tenant-nav-user-menu a {
    display: flex;
    align-items: center;
    gap: var(--nav-spacing-xs);
    min-height: 44px;
    padding: var(--nav-spacing-xs) var(--nav-spacing-md);
    color: var(--nav-text);
    font-size: 13px;
    text-decoration: none;
}

.tenant-nav-dropdown-menu a:hover,
.tenant-nav-user-menu a:hover {
    background: var(--nav-surface-hover);
}

/* Separates the everyday account actions (theme, logout) from the
   Platform Admin escape hatch below — see accountBlockHtml() in
   admin-nav.js for why that link lives here and not in the primary row. */
.tenant-nav-menu-divider {
    height: 1px;
    margin: var(--nav-spacing-xs) 0;
    background: var(--nav-border);
}

/* Qualified with `a.` to out-specificity the `.tenant-nav-user-menu a`
   base rule above (both are one-class-plus-element otherwise, and cascade
   order alone isn't a safe bet to rely on here). */
a.tenant-nav-platform-link {
    color: var(--nav-purple);
}

a.tenant-nav-platform-link[aria-current="page"] {
    background: var(--nav-purple-dim);
}

.tenant-nav-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nav-spacing-sm);
    min-width: 160px;
    height: 100%;
}

.tenant-nav-account-skeleton {
    width: 120px;
    height: 18px;
    border-radius: var(--nav-radius-sm);
    background: var(--nav-surface-hover);
}

.tenant-nav-login {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--nav-spacing-sm);
    color: var(--nav-accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.tenant-nav-user {
    position: relative;
}

.tenant-nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nav-spacing-xs);
    min-height: 44px;
    padding: 0 var(--nav-spacing-sm);
    background: none;
    border: none;
    color: var(--nav-text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--nav-transition-fast);
}

.tenant-nav-user-btn:hover {
    color: var(--nav-text);
}

.tenant-nav-user-menu {
    left: auto;
    right: 0;
    min-width: 220px;
    padding: var(--nav-spacing-sm);
    /* Unset the shared rule's overflow:hidden (needed there only to clip
       the Presets dropdown's plain links to the rounded corners) — this
       menu hosts the theme picker's own nested popup, which needs to
       render outside the menu's box without being clipped. */
    overflow: visible;
}

.tenant-nav-user-email {
    color: var(--nav-text);
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
}

.tenant-nav-user-role {
    color: var(--nav-text-dim);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--nav-spacing-xs);
}

.tenant-nav-user-tier {
    color: var(--nav-text-dim);
    font-size: 12px;
    margin-top: var(--nav-spacing-xs);
}

.tenant-nav-theme-slot {
    margin-top: var(--nav-spacing-sm);
    padding-top: var(--nav-spacing-sm);
    border-top: 1px solid var(--nav-border);
}

.tenant-nav-theme-slot .theme-picker {
    display: block;
    width: 100%;
}

.tenant-nav-theme-slot .theme-picker-btn {
    width: 100%;
}

.tenant-nav-logout {
    display: flex;
    min-height: 44px;
    padding: var(--nav-spacing-xs) var(--nav-spacing-sm);
    margin-top: var(--nav-spacing-xs);
}