@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Sans+Thai:wght@400;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; }

body {
    /* Inter for Latin glyphs, Noto Sans Thai as a fallback so the ฿
       (U+0E3F) symbol renders as the baht glyph instead of a bare 'B'
       on systems where Inter doesn't ship the Thai range. The browser
       does per-character fallback, so Latin text still uses Inter. */
    font-family: 'Inter', 'Noto Sans Thai', sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: var(--bg-sidebar);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    border-right: 1px solid var(--border);
    transition: width 0.2s ease, padding 0.2s ease;
}

.sidebar-header {
    margin-bottom: 1rem;
}

.sidebar-header h2 {
    background: var(--btn-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Bar switcher */
.bar-switcher-current {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: var(--accent-hover-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s, background 0.2s;
}
.bar-switcher-current:hover { border-color: var(--accent); }
.bar-switcher-current .bar-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0;
}
.bar-switcher-current .bar-details { flex: 1; min-width: 0; }
.bar-switcher-current .bar-details .bar-name-text {
    font-size: 0.85rem; font-weight: 700; color: var(--text-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Long bar names shrink in two tiers so they fit on one line inside the
   ~102px sidebar slot. Round-3 dropped 14+ names to 0.74rem; round-4 UX
   testing caught "The Event Horizon" (17 chars) still clipping by 2px at
   that size, so the threshold splits into two: 14-17 chars get 0.7rem,
   18+ chars get 0.62rem. The title= attribute on the wrapper still
   provides a hover-tooltip for any name that does end up truncated. */
.bar-switcher-current .bar-details .bar-name-text.bar-name-long {
    font-size: 0.7rem;
    letter-spacing: -0.015em;
}
.bar-switcher-current .bar-details .bar-name-text.bar-name-xlong {
    font-size: 0.62rem;
    letter-spacing: -0.02em;
}
.bar-switcher-current .bar-details .bar-balance-text {
    font-size: 0.7rem; color: var(--gold); font-weight: 600;
}
.bar-switcher-current .chevron {
    font-size: 0.6rem; color: var(--text-secondary); transition: transform 0.2s;
}
.bar-switcher-current.open .chevron { transform: rotate(180deg); }

.bar-switcher-list {
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.bar-switcher-list.open { display: flex; }

.bar-switcher-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    border: 1px solid transparent;
}
.bar-switcher-item:hover { background: var(--accent-hover-bg); border-color: var(--border); }
.bar-switcher-item.active { background: var(--accent-hover-bg); border-color: var(--accent-border); }
.bar-switcher-item .item-icon {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; flex-shrink: 0;
}
.bar-switcher-item .item-details { flex: 1; min-width: 0; }
.bar-switcher-item .item-name {
    font-size: 0.78rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-switcher-item .item-bal {
    font-size: 0.65rem; color: var(--gold);
}
/* "Last night's net" delta beside the balance — green ▲ / red ▼ — so an
   earner swept to ฿0 reads differently from a bar bleeding fixed costs.
   Shared by the sidebar current-bar balance and each switcher row. */
.net-delta {
    margin-left: 5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.net-delta.up { color: var(--green, #2ecc71); }
.net-delta.down { color: var(--red, #e74c3c); }

.bar-switcher-divider {
    border: none; border-top: 1px solid var(--border); margin: 0.25rem 0;
}

.nav-links {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Keep the overflow scroll behaviour (wheel/touch) but hide the
       visible scrollbar — user feedback: the chrome looked ugly on
       desktop where the nav almost always fits without scrolling. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/old Edge */
}
.nav-links::-webkit-scrollbar {     /* Chrome/Safari/Edge */
    width: 0;
    height: 0;
    display: none;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.25rem;
    transition: background 0.2s, color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    background: var(--accent-hover-bg);
    color: var(--text-heading);
}

/* Grouped navigation (MY BAR / COMPETE / COMMUNITY) */
.nav-links .nav-group { list-style: none; margin-bottom: 0.35rem; }
.nav-links .nav-group-header {
    width: 100%;
    display: flex; align-items: center; gap: 0.4rem;
    background: transparent; border: 0; padding: 0.35rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
}
.nav-links .nav-group-header:hover { color: var(--text-secondary); }
.nav-links .nav-group-caret {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 0.7rem;
    width: 10px;
}
.nav-links .nav-group:not(.open) .nav-group-caret { transform: rotate(-90deg); }
.nav-links .nav-group-body {
    display: flex; flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
    padding-left: 0.35rem;
}
.nav-links .nav-group.open .nav-group-body {
    max-height: 480px;
    padding-top: 0.1rem;
    padding-bottom: 0.2rem;
}

/* ── Desktop button system ──────────────────────────────────────────────── */
/* Base: resets + shared traits. Pair with a variant modifier below.        */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.btn:hover  { opacity: 0.85; }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Size modifiers */
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.btn-xs { padding: 0.2rem 0.55rem; font-size: 0.72rem; border-radius: 6px; }

/* Variants */
.btn-primary {
    background: var(--btn-gradient);
    color: var(--text-heading);
    border: none;
}
.btn-secondary {
    background: var(--bg-inset);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-danger {
    background: color-mix(in srgb, var(--red) 15%, transparent);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}
.btn-success {
    background: linear-gradient(135deg, var(--green), color-mix(in srgb, var(--green) 80%, black));
    color: #fff;
    border: none;
}
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
/* Shape modifier — pill buttons */
.btn-pill { border-radius: 999px; }
/* ── End button system ──────────────────────────────────────────────────── */

/* ── Page tab system — underline style, dark-theme safe ────────────────── */
/* Canonical in-page tab strip. Use .page-tabs + .page-tab everywhere.     */
/* .g-tab / .g-tabs in bar_group.html and scouting.html are aliases.       */
.page-tabs {
    display: flex; gap: 0; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.page-tab {
    padding: 0.6rem 0.9rem; font-size: 0.85rem; font-weight: 700;
    color: var(--text-secondary); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer; white-space: nowrap;
    background: none; border-top: none; border-left: none; border-right: none;
    font-family: inherit;
}
.page-tab:hover { color: var(--text-primary); }
.page-tab.active { color: var(--scheme-primary); border-bottom-color: var(--scheme-primary); }
.page-tab .tab-count { margin-left: 0.3rem; font-size: 0.72rem; opacity: 0.65; font-weight: 600; }
@media (max-width: 600px) {
    .page-tabs { gap: 0; }
    .page-tab { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
}
/* ── End page tab system ────────────────────────────────────────────────── */

/* ── Leaderboard pill tab strip ─────────────────────────────────────────── */
/* Used by _leaderboard_tabs.html; border-pill style distinct from page-tab. */
.lb-tabs {
    display: flex; gap: 0.4rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.lb-tab {
    padding: 0.45rem 0.75rem; border-radius: 20px; font-size: 0.78rem;
    font-weight: 700; cursor: pointer; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary);
    text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; white-space: nowrap;
}
.lb-tab:hover { border-color: var(--accent); color: var(--text-primary); }
.lb-tab.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 600px) {
    .lb-tabs { gap: 0.3rem; }
    .lb-tab { padding: 0.4rem 0.8rem; font-size: 0.7rem; }
}
/* ── End leaderboard pill tab strip ─────────────────────────────────────── */

/* ── Desktop card base — shared by .detail-card / .profile-card / .fa-card */
/* Each page adds its own padding, margin-bottom, or hover on top.           */
.detail-card, .profile-card, .fa-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card, none);
}
/* ── End desktop card base ──────────────────────────────────────────────── */

/* ── Page header canonical classes ─────────────────────────────────────── */
/* Use .page-h1 on the <h1> and .page-subtitle on the deck copy beneath it. */
/* Per-page wrapper classes (.bank-page h1 etc.) should defer to these.     */
.page-h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.page-subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
@media (max-width: 600px) {
    .page-h1 { font-size: 1.4rem; }
}
/* ── End page header canonical classes ──────────────────────────────────── */

/* ── Canonical desktop form input ───────────────────────────────────────── */
/* Use .d-input on text/email/password/select/textarea elements.            */
/* Override only what the page needs on top of this (e.g. width, height).   */
.d-input {
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, var(--bg-card));
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.d-input:focus { border-color: var(--scheme-primary); }
.d-input::placeholder { color: var(--text-muted); }
/* ── End canonical desktop form input ───────────────────────────────────── */

/* ── Canonical overlay + modal shell ────────────────────────────────────── */
/* .swap-overlay/.swap-modal and .dt-modal-overlay/.dt-modal both use this  */
/* base. Individual names kept for JS/content targeting; base is shared.     */
.swap-overlay, .dt-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-bg, rgba(10, 20, 30, 0.6));
    justify-content: center; align-items: center;
}
.swap-overlay.open, .dt-modal-overlay.open { display: flex; }
.swap-modal, .dt-modal {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card-solid);
    width: 90%; max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
/* ── End canonical overlay + modal shell ─────────────────────────────────── */

/* Flat nav (6-section) */
.nav-links-flat li { list-style: none; }
.nav-links-flat .nav-top {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    margin-bottom: 0.2rem;
}
.nav-links-flat .nav-top:hover { color: var(--text-heading); background: var(--accent-hover-bg); }
.nav-links-flat .nav-top.active {
    color: var(--text-heading);
    background: var(--accent-hover-bg);
    box-shadow: inset 3px 0 0 var(--scheme-primary);
}
.nav-separator {
    list-style: none; height: 1px;
    background: var(--border); margin: 0.5rem 0.75rem;
}

/* Section tabs strip (above page content) */
.section-tabs {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    margin: -0.5rem -0.25rem 1rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.section-tabs a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--text-secondary); text-decoration: none;
    border: 1px solid transparent; border-radius: 20px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.section-tabs a:hover { color: var(--text-heading); background: var(--accent-hover-bg); }
.section-tabs a.active {
    color: var(--text-heading);
    background: var(--scheme-primary);
    border-color: var(--scheme-primary);
}
.section-tabs .tab-dot {
    display: inline-block;
    width: 8px; height: 8px; margin-left: 0.35rem;
    background: var(--red); border-radius: 50%;
    animation: tabDotPulse 1.6s ease-in-out infinite;
    vertical-align: middle; text-indent: -9999px;
}
@keyframes tabDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.7; }
}
@media (max-width: 600px) {
    .section-tabs { padding: 0.5rem 0.25rem; gap: 0.25rem; }
    .section-tabs a { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
}

/* Collapsed sidebar: hide group headers' text, keep child anchors compact */
.sidebar.collapsed .nav-links .nav-group-header { justify-content: center; padding: 0.2rem; }
.sidebar.collapsed .nav-links .nav-group-caret { display: none; }
.sidebar.collapsed .nav-links .nav-group-body { max-height: none !important; padding-left: 0; }
.sidebar.collapsed .nav-links .nav-group .nav-group-header .nav-text { display: none; }
/* In collapsed mode, always show the icons — no collapsed groups */
.sidebar.collapsed .nav-links .nav-group:not(.open) .nav-group-body { max-height: none; }

.sidebar-footer {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
/* Stacked variant — profile name on top, icon cluster + version below.
   Triggered by the .sidebar-footer-stack modifier on the footer wrap. */
.sidebar-footer.sidebar-footer-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.sidebar-footer-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sidebar-version-inline {
    margin-left: auto;  /* pushes the version to the right end of the row */
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.75;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.sidebar.collapsed .sidebar-version-inline { display: none; }
.sidebar-footer .sidebar-profile-link {
    flex: 1 1 auto;
    min-width: 0;
}
.sidebar-profile-link .sidebar-username {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.sidebar-footer-icon {
    color: var(--text-muted);
    width: 26px; height: 26px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.sidebar-footer-icon:hover {
    color: var(--text-heading) !important;
    background: var(--accent-hover-bg);
}
/* Discord icon gets the Blurple brand colour on hover so it reads as a
   link to somewhere external, not an app action. */
.sidebar-discord-icon:hover {
    color: #5865F2 !important;
    background: rgba(88, 101, 242, 0.12);
}

.sidebar-footer a {
    color: var(--link-color);
    text-decoration: none;
}

.sidebar-profile-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary) !important;
    text-decoration: none;
}
.sidebar-profile-link:hover {
    color: var(--link-color) !important;
}
.sidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.sidebar-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1rem;
}

/* Hamburger button — hidden on desktop */
.hamburger {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1100;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}

/* Sidebar backdrop overlay — mobile only */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 999;
}
.sidebar-backdrop.open { display: block; }

/* Sidebar collapse toggle */
.sidebar-collapse-btn {
    display: none; /* hidden on mobile, shown on desktop via media query below */
    align-items: center; justify-content: center;
    width: 100%; padding: 0.5rem 0; margin-top: 0.5rem;
    border: none; background: var(--accent-hover-bg);
    border-radius: 6px; cursor: pointer;
    color: var(--text-secondary); font-size: 0.75rem; font-weight: 600;
    transition: background 0.2s, color 0.2s; gap: 0.4rem;
}
.sidebar-collapse-btn:hover { color: var(--text-heading); background: var(--accent-hover-bg); }
.sidebar-collapse-btn .collapse-arrow { font-size: 0.7rem; }

/* Collapsed sidebar state */
.sidebar.collapsed {
    width: 60px;
    padding: 1rem 0.5rem;
    overflow: hidden;
}
.sidebar.collapsed .sidebar-header { display: none; }
.sidebar.collapsed .nav-links a {
    padding: 0.6rem 0; text-align: center; font-size: 1.1rem;
    overflow: hidden; white-space: nowrap;
}
/* Hide text, show only emoji in collapsed mode */
.sidebar.collapsed .nav-links a span.nav-text { display: none; }

/* Narrow-rail collapsed styling — ONLY desktop. On mobile (≤768px)
   `.sidebar.collapsed` is reopened to a full-width 260px slide-out via
   the @media block near the bottom of this file, so the emoji-centered
   icon rules and pill-style active-item rules would misrender against
   wide text labels ("Bar Group" etc.). Scope these here to keep the
   mobile expanded-sidebar styling clean. */
@media (min-width: 768px) {
    /* Centre the single visible child (the emoji) inside the 60px rail —
       .nav-top defaults to `justify-content: flex-start` which leaves
       the emoji hugging the anchor's left edge. */
    .sidebar.collapsed .nav-links a { justify-content: center; }
    /* Expanded-state active uses a 3px inset left stripe, which is
       nearly invisible once the label is hidden. Swap to a filled,
       bordered pill that wraps the icon so the selection reads at a
       glance. */
    .sidebar.collapsed .nav-links-flat .nav-top.active {
        box-shadow: none;
        background: color-mix(in srgb, var(--scheme-primary) 22%, transparent);
        border: 1px solid color-mix(in srgb, var(--scheme-primary) 55%, transparent);
        border-radius: 10px;
        margin: 0 0.15rem 0.25rem;
    }
}
.sidebar.collapsed .sidebar-footer { flex-direction: column; gap: 0.3rem; font-size: 0.7rem; align-items: center; }
/* Collapsed: stack the icon cluster vertically (not in a row) and drop
   the inline version pill since there's no room. */
.sidebar.collapsed .sidebar-footer-row { flex-direction: column; gap: 0.3rem; }
.sidebar.collapsed .sidebar-version-inline { display: none; }
.sidebar.collapsed .sidebar-profile-link span { display: none; }
.sidebar.collapsed .sidebar-collapse-btn .collapse-label { display: none; }
.sidebar.collapsed .sidebar-collapse-btn { gap: 0; }
.sidebar.collapsed .sidebar-collapse-btn .collapse-arrow { font-size: 0.9rem; transform: rotate(180deg); }

/* Content */
.content {
    margin-left: 220px;
    padding: 2rem 3rem;
    flex: 1;
    overflow-x: hidden;
    max-width: 100vw;
    transition: margin-left 0.2s ease;
}
.content.sidebar-collapsed,
/* Belt-and-braces: if the `.sidebar-collapsed` class never makes it
   onto `.content` (SSR first-paint before the restore script runs,
   or a page that renders `.content` via a different path), derive
   the shift from the sidebar's own class using :has(). Keeps the
   content column glued to the sidebar instead of leaving a 160px
   dead stripe when the user had the sidebar collapsed. */
body:has(.sidebar.collapsed) .content:not(.no-sidebar) {
    margin-left: 60px;
}

.content.no-sidebar {
    margin-left: 0;
}

/* -------------------------------------------------------------------
   Desktop app-bar (Option 4 from the /home chrome audit).
   A full-width strip pinned to the top of the content column that
   sits BEHIND the floating scan-bill / bell / admin-cog icons and
   pushes the page content down so the two layers stop colliding.
   Mobile keeps the existing `.mobile-top-shield` / hamburger pattern
   untouched (rule scoped to min-width: 769px).

   Why a strip and not a container: the icons are `position: fixed`
   and referenced from several pages. A visual backdrop is far less
   invasive than relocating each icon into a new flex container, and
   it delivers the same result — the bar-header no longer reaches
   into the icons' row. If we grow the top-right cluster later, we
   can graduate this to a proper flex app-bar and move the icons
   inside it.

   Z-index layering:
     content:        (default, below 900)
     .app-bar:       900  (above content, below icons)
     sidebar:        (fixed, stays to the left — app-bar doesn't
                      cross into it on desktop)
     floating icons: 1100 (above app-bar, remain clickable)
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .app-bar {
        position: fixed;
        top: 0;
        left: 220px;                /* starts right after the sidebar */
        right: 0;
        height: 56px;
        z-index: 900;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        pointer-events: none;       /* icons on top handle clicks */
        transition: left 0.2s ease; /* mirror the sidebar collapse */
        display: flex; align-items: center;
        padding: 0 1rem;
    }
    /* Mirror sidebar-collapsed shift. Both the .content class flip
       and the raw .sidebar.collapsed sibling selector cover the
       possible DOM orderings (sidebar before or after app-bar). */
    .sidebar.collapsed ~ .app-bar,
    body:has(.sidebar.collapsed) .app-bar { left: 60px; }
    body:has(.content.no-sidebar) .app-bar { left: 0; }
    /* Reserve vertical room under the bar so bar-header etc. don't
       slide underneath. Applied via .content so pages that opt out
       of the sidebar (no-sidebar) still get the top-spacing. */
    .content { padding-top: 4rem; }
}
@media (max-width: 767px) {
    /* Mobile keeps the existing floating-icons + mobile-top-shield
       pattern. Hide the desktop app-bar entirely so it can't leak
       into narrow viewports. */
    .app-bar { display: none; }
}

/* ------------------------------------------------------------------ */
/* MOBILE — sidebar collapses to slide-out, content goes full width   */
/* ------------------------------------------------------------------ */
/* Show collapse button on desktop */
@media (min-width: 768px) {
    .sidebar-collapse-btn { display: flex; }
}

@media (max-width: 767px) {
    .hamburger { display: flex; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        /* Above mobile-top-shield (1050) and the floating buttons (1100)
           so the bar-switcher header at the sidebar top is visible when
           opened — otherwise the shield covers the first ~56px. */
        z-index: 1200;
        width: 260px;
    }
    .sidebar.open { transform: translateX(0); }
    /* Never show collapsed state on mobile */
    .sidebar.collapsed { width: 260px; padding: 1.5rem 1rem; }
    .sidebar.collapsed .sidebar-header { display: block; }
    .sidebar.collapsed .nav-links a { padding: 0.6rem 0.75rem; text-align: left; font-size: inherit; }
    .sidebar.collapsed .nav-links a span.nav-text { display: inline; }
    .sidebar.collapsed .sidebar-footer { flex-direction: row; font-size: 0.85rem; align-items: center; }
    .sidebar.collapsed .sidebar-footer > div { display: flex; }
    .sidebar.collapsed .sidebar-profile-link span { display: inline; }
    .sidebar-collapse-btn { display: none !important; }

    .content {
        margin-left: 0;
        padding: 0.5rem;
        padding-top: 3.5rem; /* room for hamburger */
        max-width: 100vw;
    }
    .content.sidebar-collapsed { margin-left: 0; }
}

/* ── Utility classes ─────────────────────────────────────────────────────── */

/* Prevent number jiggle in live-updating money/count fields */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Z-index layer map ───────────────────────────────────────────────────── */
/* Keep all z-index values here so layers don't silently conflict.
   1   — base stacking context for cards, inputs
   10  — tooltips, dropdowns within a card
   100 — sticky headers, sidebar collapse button
   200 — floating action buttons, toast notifications
   900 — side drawer overlays
   950 — toasts on top of drawers
   1000— modal overlay backdrop
   1001— modal content panel                                                  */

/* ── Icon size tokens ────────────────────────────────────────────────────── */
:root {
    --icon-sm: 14px;
    --icon-md: 18px;
    --icon-lg: 24px;
}

/* ── Focus-visible states ────────────────────────────────────────────────── */
/* Use focus-visible (not focus) so keyboard users get rings but mouse clicks don't. */
.nav-links a:focus-visible,
.lb-tab:focus-visible,
.section-tabs a:focus-visible,
.sidebar-footer-icon:focus-visible,
.sidebar-collapse-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* ── End utility classes ─────────────────────────────────────────────────── */

/* ── Role badge (LADY / FREELANCER) ───────────────────────────────────────── */
/* Used by _role_badge.html to disambiguate two same-named ladies at the
   same venue who differ only by `girls.role`. Same look-and-feel as the
   profile-role-tag pill on scouting_profile.html. */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}
.role-badge-lady {
    background: color-mix(in srgb, var(--purple, #9b59b6) 15%, transparent);
    color: var(--purple, #9b59b6);
}
.role-badge-freelancer {
    background: color-mix(in srgb, var(--green, #16a34a) 15%, transparent);
    color: var(--green, #16a34a);
}
.role-badge-compact { padding: 1px 6px; font-size: 0.62rem; }

/* ── Art primitives (desktop) ────────────────────────────────────────────────
   Wrappers for the warm-painterly illustrations in dashboard/static/img/.
   See _art.html for the macros, STYLE_GUIDE.md for the look-and-feel.
*/

.art-hero {
    display: block;
    position: relative;
    margin: 0 0 16px;
    aspect-ratio: var(--ar, 2.4) / 1;
    overflow: hidden;
    border-radius: 16px;
    background: #1a1b2e;
    box-shadow: 0 6px 22px rgba(26, 27, 46, 0.18);
}
.art-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.art-hero--warm::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(26,27,46,0.55) 0%, rgba(26,27,46,0.15) 45%, transparent 70%);
    pointer-events: none;
}
.art-hero__overlay {
    position: absolute;
    left: 24px; bottom: 22px; right: 24px;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
    z-index: 1;
}
.art-hero__overlay small,
.art-hero__overlay .eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 4px;
    font-weight: 700;
}

.art-tile {
    display: inline-block;
    overflow: hidden;
    border-radius: 12px;
    background: #f3ead8;
    box-shadow: 0 2px 8px rgba(26, 27, 46, 0.08);
    flex-shrink: 0;
}
.art-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.art-tile--sm { width: 64px; height: 64px; }
.art-tile--md { width: 96px; height: 96px; }
.art-tile--lg { width: 160px; height: 160px; }
.art-tile--xl { width: 240px; height: 240px; border-radius: 14px; }

.art-plate {
    display: inline-block;
    width: 132px; height: 132px;
    border-radius: 50%;
    overflow: hidden;
    background: #2a1f12;
    box-shadow: 0 4px 14px rgba(26, 27, 46, 0.18), inset 0 0 0 3px rgba(184, 134, 11, 0.5);
    flex-shrink: 0;
    position: relative;
}
.art-plate img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.art-plate--locked {
    filter: grayscale(1) brightness(0.55);
    opacity: 0.55;
}

.art-vignette {
    display: inline-block;
    width: 88px; height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3ead8;
    box-shadow: 0 2px 8px rgba(26, 27, 46, 0.08);
    flex-shrink: 0;
}
.art-vignette img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.art-poster {
    display: inline-block;
    width: 160px; height: 160px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3ead8;
    box-shadow: 0 4px 12px rgba(26, 27, 46, 0.18), 0 0 0 1px rgba(255,255,255,0.35) inset;
    transform: rotate(-1.2deg);
    flex-shrink: 0;
}
.art-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hide everything art-* on mobile so we never accidentally leak desktop
   art into a .m-page surface. Mobile builds its own visual system. */
@media (max-width: 720px) {
    .art-hero, .art-tile, .art-plate, .art-vignette, .art-poster { display: none !important; }
}
/* ── End art primitives ──────────────────────────────────────────────────── */