/* ═══════════════════════════════════════════════════════════════════════════
   chrome.css — site chrome (app header, top nav, user menu, admin bar)
   ---------------------------------------------------------------------------
   Consolidates the <style> blocks + inline style="..." previously scattered
   across assets/header_footer/{user_menu,admin_bar,app-header,top_nav}.php.

   Registered once, globally, from header_js_css.php right after fa_data.css.

   Tokens (--text-color, --text-muted, --border-color, --accent-color,
   --card-bg, --hover-bg) come from assets_ui/css/fa.css and are defined for
   both light and dark mode — no hardcoded fallbacks here.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   APP HEADER (app-header.php)
   ─────────────────────────────────────────────────────────────────────────── */

/* Logo link (drop the default anchor underline). */
.hdr-logo-link { text-decoration: none; }

/* Logo mark: the fadb_logo.svg zigzag (replaces the old fa-dna icon).
   Used by the header + footer wordmark. Sized in em so it tracks the
   adjacent text; keeps the SVG's 3:1 ratio. */
.fadb-logo-mark {
    height: 0.8em; width: auto;
    vertical-align: -0.05em; margin-right: 0.1em;
}

/* Theme-toggle sun/moon icon wrapper: centers the SVG and animates its flip. */
.hdr-theme-icon {
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.4s ease;
}


/* ───────────────────────────────────────────────────────────────────────────
   TOP NAV (top_nav.php)
   ─────────────────────────────────────────────────────────────────────────── */

.hdr-top-nav { gap: 0.1rem; }


/* ───────────────────────────────────────────────────────────────────────────
   USER MENU (user_menu.php)
   ─────────────────────────────────────────────────────────────────────────── */

.um-wrap { position: relative; display: inline-flex; }

.um-login {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 6px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.um-login:hover { background: var(--hover-bg); }

.um-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--accent-color); color: #fff;
    font-size: 0.75rem; font-weight: 700; cursor: pointer;
    font-family: inherit; letter-spacing: .02em;
}
.um-btn:hover { filter: brightness(1.1); }

.um-panel {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 210px; z-index: 1200;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.14);
    padding: 6px; text-align: left;
}
.um-wrap.um-open .um-panel { display: block; }

.um-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}
.um-head .um-name { font-weight: 700; font-size: 0.9rem; color: var(--text-color); }
.um-head .um-sub  { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.um-badge {
    display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 10px;
    background: #2e5d78; color: #fff; font-size: 0.62rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
}

.um-panel a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 6px;
    font-size: 0.84rem; text-decoration: none;
    color: var(--text-color);
}
.um-panel a:hover { background: var(--hover-bg); }
.um-panel a i { width: 15px; text-align: center; color: var(--text-muted); }
.um-sep { height: 1px; background: var(--border-color); margin: 6px 2px; }
.um-panel a.um-danger { color: #a33; }
.um-panel a.um-danger i { color: #a33; }


/* ───────────────────────────────────────────────────────────────────────────
   ADMIN BAR (admin_bar.php)

   Fixed bottom-right toolbar, admins only. Deliberately a fixed dark strip in
   both light and dark mode (like a devtools bar), so these colors are
   intentionally hardcoded rather than tokenized.
   ─────────────────────────────────────────────────────────────────────────── */

#admin-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-top-left-radius: 4px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100vw;
}
#admin-bar .ab-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#admin-bar a,
#admin-bar .ab-action {
    color: #fff;
    text-decoration: none;
    padding: 2px 5px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
}
#admin-bar a:hover,
#admin-bar .ab-action:hover { background: #333; }
#admin-bar .ab-sep {
    width: 1px;
    align-self: stretch;
    background: #555;
    margin: 1px 2px;
}
#admin-bar .ab-msg {
    color: #9ae69a;
    font-size: 10px;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#admin-bar .ab-collapse {
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
    background: #222;
    border-radius: 2px;
    font-size: 10px;
}
#admin-bar .ab-collapse:hover { background: #444; }

#admin-bar-expand {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background: #000;
    color: #fff;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 11px;
    border-top-left-radius: 4px;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.25);
}
#admin-bar-expand:hover { background: #333; }

/* Collapse/expand toggle (admin_bar.php JS toggles this class instead of
   element.style.display directly). Needs the #id prefix to out-rank the
   #admin-bar / #admin-bar-expand display:flex rules above. */
#admin-bar.u-hidden,
#admin-bar-expand.u-hidden { display: none; }