/* Buyer-site chrome: docked left navigation sidebar + slide-out right account
   drawer. Replaces the Bootstrap top navbar that used to be copy-pasted into
   every page.

   Structurally this mirrors the admin panel's sidebar (static/css/admin.css
   L23-129) but is deliberately a separate file under .site-app rather than a
   reuse of admin.css: the admin rules are global selectors whose sizing comes
   from vars scoped to `.admin.admin-app`, so loading them here would give the
   class names without the variables and collapse the grid. */

.site-app {
    --site-sidebar-w: 240px;
    --site-topbar-h: 56px;
}

/* Hide the legacy top navbar. This file is only loaded on pages that have the
   chrome, so the rule can be unconditional — it does NOT need to be scoped to
   .site-app, and must not be: mounting moves the page wrapper inside the shell,
   so any `.site-app > .container-md > .navbar` descendant selector stops
   matching the moment it would matter, leaving the old bar visible.

   Unconditional also kills the flash: the nav is hidden at first paint rather
   than when the script gets round to removing it.

   Targets navbar-expand-LG (the header) only. The footer nav on every page is
   `navbar-expand` and is legitimate — Reviews / TOS / FAQs / copyright. */
.navbar.navbar-expand-lg { display: none !important; }

/* ── Shell ────────────────────────────────────────────────────────────────── */
.site-app-grid {
    display: grid;
    grid-template-columns: var(--site-sidebar-w) 1fr;
    min-height: 100vh;
}

.site-sidebar {
    grid-column: 1;
    background: #0d0d0d;
    border-right: 1px solid var(--dolph-panel-border, #2a2a2a);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    /* 100dvh (dynamic viewport height) instead of 100vh: on mobile Safari the
       bottom URL/toolbar overlays 100vh, pushing the sidebar footer (Logout)
       off-screen behind it. dvh tracks the *visible* viewport, so the footer
       stays reachable. vh kept as a fallback for older browsers. */
    height: 100vh;
    height: 100dvh;
    z-index: 1040;
}

.site-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.15rem 1.1rem;
    border-bottom: 1px solid var(--dolph-panel-border, #2a2a2a);
    text-decoration: none;
}
.site-sidebar-brand .nav-brand-text {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
}
.site-sidebar-brand:hover .nav-brand-text { color: var(--dolph-accent, #d4af37); }

/* ── Identity block ───────────────────────────────────────────────────────── */
.site-identity-wrap { padding: .75rem .6rem 0; }
.site-identity {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .5rem .5rem .65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.site-identity:hover, .site-identity:focus-within { border-color: rgba(212, 175, 55, .45); background: rgba(212, 175, 55, .07); }
.site-identity-main {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}
.site-identity-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .45);
    transition: background .15s, color .15s;
}
.site-identity-settings:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.site-identity-settings svg { width: 15px; height: 15px; }
.site-identity-avatar {
    width: 32px; height: 32px; flex: none;
    border-radius: 50%;
    background: var(--dolph-accent, #d4af37);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .85rem;
}
.site-identity-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.site-identity-name {
    color: #fff; font-size: .82rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-identity-balance { color: var(--dolph-accent, #d4af37); font-size: .78rem; font-weight: 700; }
.site-identity--guest { color: rgba(255, 255, 255, .8); font-size: .88rem; font-weight: 600; gap: .5rem; }
.site-identity--guest:hover { color: #fff; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.site-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .6rem .75rem;
}
.site-sidebar-nav::-webkit-scrollbar { width: 4px; }
.site-sidebar-nav::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

.site-nav-section { padding-top: .9rem; }
.site-nav-section + .site-nav-section { border-top: 1px solid rgba(255, 255, 255, .05); margin-top: .35rem; }
.site-nav-section-title {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .3);
    padding: 0 .75rem .4rem;
}

.site-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .75rem;
    margin-bottom: 2px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.site-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .045); }
.site-nav-link.active { color: #fff; background: rgba(212, 175, 55, .14); }
/* Accent bar makes the current page readable at a glance, not only by hue. */
.site-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--dolph-accent, #d4af37);
}
.site-nav-link svg { flex-shrink: 0; opacity: .85; }
.site-nav-link.active svg { stroke: var(--dolph-accent, #d4af37); opacity: 1; }

/* ── Collapsible group (Casino) ───────────────────────────────────────────── */
.site-nav-group-btn .site-nav-caret {
    margin-left: auto;
    transition: transform .2s ease;
    transform: rotate(90deg);            /* expanded: pointing down */
    opacity: .5;
}
.site-nav-group.collapsed .site-nav-caret { transform: rotate(0deg); }
.site-nav-group-items {
    overflow: hidden;
    max-height: 20rem;
    transition: max-height .2s ease;
}
.site-nav-group.collapsed .site-nav-group-items { max-height: 0; }
.site-nav-sub {
    padding-left: 2.4rem;
    font-size: .86rem;
    color: rgba(255, 255, 255, .6);
}
.site-nav-sub.active { color: #fff; }

/* Content column. .loadable-content is required here, not decorative:
   auth.js's enforceAuthGate falls back to wiping document.body when it can't
   find one, which would destroy the chrome. */
.site-main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.site-main-inner { flex: 1; min-width: 0; }

/* ── Topbar (mobile menu button + cart) ───────────────────────────────────── */
.site-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    height: var(--site-topbar-h);
    padding: 0 1rem;
    border-bottom: 1px solid var(--dolph-panel-border, #2a2a2a);
    background: rgba(10, 10, 10, .75);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.site-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--dolph-panel-border, #2a2a2a);
    border-radius: 8px;
    color: #fff;
    width: 38px;
    height: 38px;
    cursor: pointer;
    margin-right: auto;
}

/* Cart entry — ported from the old navbar badge (main.css L13639-13665). */
.site-cart-link { position: relative; display: inline-flex; align-items: center; color: #fff; padding: .35rem; }
.site-cart-link span {
    position: absolute; top: -2px; right: -6px;
    background: var(--dolph-accent, #d4af37); color: #fff;
    font-size: .62rem; font-weight: 800; line-height: 1;
    min-width: 16px; padding: 2px 4px; border-radius: 10px; text-align: center;
}

/* Sidebar footer — sits below the scrollable nav, holds Logout. Previously
   Logout lived in a right-side account drawer; the drawer was removed and its
   contents (Add Balance, Logout) folded into the sidebar itself. */
.site-sidebar-foot {
    padding: .6rem;
    /* Extra bottom padding for the iOS home-indicator / Safari toolbar area so
       the Logout button never sits flush against (or under) it. env() is 0 on
       browsers/devices without an inset, so this is a no-op elsewhere. */
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex: none;
}
.site-sidebar-foot .site-nav-link { width: 100%; }

/* Backdrop for the mobile sidebar overlay. Defined at base scope (admin.css
   only defines its backdrop inside the mobile query, leaving a stray unstyled
   block on desktop). */
.site-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1035;
}
.site-backdrop.show { display: block; }

/* ── Mobile: sidebar becomes an overlay ───────────────────────────────────── */
@media (max-width: 991.98px) {
    .site-app-grid { grid-template-columns: 1fr; }
    .site-sidebar {
        position: fixed;
        left: 0; top: 0;
        width: var(--site-sidebar-w);
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .5);
    }
    .site-sidebar.show { transform: translateX(0); }
    .site-menu-toggle { display: inline-flex; }
    .site-main { grid-column: 1; }
}

@media (max-width: 575.98px) {
    .site-app { --site-sidebar-w: min(82vw, 260px); }
}

/* ── Home dashboard ───────────────────────────────────────────────────────────
   Lives here rather than inline on the page so the tiles share the chrome's
   surface treatment instead of becoming a second visual language. */

.home-banner { margin: 1.25rem 0 1.75rem; text-align: center; }
.home-banner img { width: 100%; max-width: 680px; height: auto; display: inline-block; border-radius: .5rem; }

.home-section-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    margin: 1.75rem 0 .75rem;
}

/* Stat cards */
.home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .85rem;
}
.home-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.1rem 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(17,17,17,.95) 0%, rgba(29,29,29,.95) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.home-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, .45);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
.home-stat-k {
    font-size: .66rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.home-stat-v { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.15; }
.home-stat-sub { font-size: .78rem; color: var(--dolph-accent, #d4af37); font-weight: 600; }

/* ── Account overview panel ───────────────────────────────────────────────── */
/* Reuses the .home-stat surface treatment (same gradient, border and radius) so
   the overview reads as part of the same system rather than a second one. */
.ov {
    margin-top: 1.25rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(17,17,17,.95) 0%, rgba(29,29,29,.95) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
}

.ov-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .25);
}
.ov-tab {
    flex: 1 1 auto;
    min-width: 120px;
    padding: .8rem .75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, .45);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
}
.ov-tab:hover { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .03); }
.ov-tab.active {
    color: #fff;
    background: rgba(255, 255, 255, .05);
    border-bottom-color: var(--dolph-accent, #d4af37);
}

.ov-body { padding: 1.25rem 1.15rem 1.4rem; }
.ov-head { text-align: center; margin-bottom: 1.1rem; }
.ov-title { color: #fff; font-size: 1.15rem; font-weight: 800; margin: 0; }
.ov-alltime { color: rgba(255, 255, 255, .45); font-weight: 600; font-size: .95rem; }
.ov-caption {
    color: rgba(255, 255, 255, .3);
    font-size: .78rem;
    margin: .25rem 0 0;
}

.ov-windows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .8rem;
}
.ov-window {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 1rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
}
.ov-w-k {
    font-size: .64rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.ov-w-v { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1.2; }
/* Divider between the window total and its per-day average. */
.ov-w-sep {
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    width: 100%;
    text-align: center;
}

/* Trend chart */
.ov-chart { margin-top: 1.3rem; }
.ov-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
.ov-chart-main { display: flex; gap: .55rem; }
/* Y-axis labels live in HTML, not the SVG: the SVG is stretched by
   preserveAspectRatio="none" and would squash the glyphs. */
.ov-chart-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    flex: none;
    min-width: 2.5rem;
    font-size: .66rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .35);
    /* Nudge so each label sits centred on its gridline rather than below it. */
    margin: -.45rem 0;
    padding: .45rem 0;
}
.ov-chart-plot { position: relative; flex: 1; min-width: 0; height: 120px; }
.ov-chart-x {
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    padding-left: 3.05rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .28);
}
.ov-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* A dot on every day that had activity, so individual days are readable
   even where the line between them is flat. */
.ov-dot {
    position: absolute;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--dolph-accent, #d4af37);
    box-shadow: 0 0 0 2px rgba(10, 10, 10, .9);
    pointer-events: none;
}

/* Hover readout */
.ov-guide {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
.ov-tip {
    position: absolute;
    top: -.25rem;
    white-space: nowrap;
    padding: .3rem .55rem;
    border-radius: 7px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
.ov-chart-plot.is-hover .ov-guide,
.ov-chart-plot.is-hover .ov-tip { opacity: 1; }

.ov-chart svg {
    width: 100%;
    height: 120px;
    display: block;
    overflow: visible;
}
.ov-spark-line {
    fill: none;
    stroke: var(--dolph-accent, #d4af37);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* The viewBox is stretched by preserveAspectRatio="none"; without this the
       stroke would be scaled horizontally along with it and look uneven. */
    vector-effect: non-scaling-stroke;
}
.ov-spark-fill { fill: rgba(212, 175, 55, .16); stroke: none; }
.ov-chart-k, .ov-chart-peak {
    font-size: .64rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: rgba(255, 255, 255, .3);
}
.ov-chart-peak { color: rgba(255, 255, 255, .45); }

/* Status breakdown */
.ov-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .8rem;
}
.ov-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.1rem .9rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .06);
}
.ov-s-v { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.ov-ok   .ov-s-v { color: #2ecc71; }
.ov-bad  .ov-s-v { color: #e8385d; }
.ov-warn .ov-s-v { color: #f0c419; }
.ov-mute .ov-s-v { color: rgba(255, 255, 255, .55); }