/* ──────────────────────────────────────────────────────────────
   SpinChain desktop dashboard chrome.
   The screens/components are the SAME as the Mini App / PWA (full
   feature parity) — this only adds the classic browser layout:
   a left sidebar + sticky topbar + fluid, centered content. Built
   on the shared design tokens (styles/tokens.css). Responsive with
   content-based breakpoints; sidebar becomes an off-canvas drawer on
   narrow screens; keyboard + focus accessible.
   ────────────────────────────────────────────────────────────── */

.dash-body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 700px at 80% -10%, #1b1140 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #1a0f3a 0%, transparent 55%),
    var(--bg, #07060d);
  color: var(--text-1, #fff);
}

.dash {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100dvh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.dash-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(22, 14, 62, 0.72), rgba(10, 8, 30, 0.72));
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  z-index: 40;
}
.dash-brand { display: flex; align-items: center; justify-content: center; padding: 6px 6px 14px; text-decoration: none; }
.dash-brand-logo { max-width: 168px; height: auto; }
.dash-brand-fallback { display: none; font-family: var(--font-display, system-ui); font-weight: 900; font-size: 22px; color: var(--gold-2, #ffd84a); letter-spacing: 1px; }
.dash-brand-logo:not([src]) + .dash-brand-fallback,
.dash-brand-logo[src=""] + .dash-brand-fallback { display: inline; }

.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-nav-item {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--text-2, #c9c7d6);
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .15s, color .15s, transform .05s;
}
.dash-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-1, #fff); }
.dash-nav-item:active { transform: translateY(1px); }
.dash-nav-item:focus-visible { outline: 2px solid var(--gold-2, #ffd84a); outline-offset: 2px; }
.dash-nav-item.active {
  background: linear-gradient(135deg, rgba(255, 216, 74, 0.18), rgba(245, 166, 35, 0.10));
  color: var(--gold-2, #ffd84a);
  box-shadow: inset 3px 0 0 var(--gold-2, #ffd84a);
}
.dash-nav-ico { font-size: 19px; width: 24px; text-align: center; }

.dash-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 6px 2px; }
.dash-logout {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 42px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03);
  color: var(--text-2, #c9c7d6); font-size: 14px; font-weight: 600; cursor: pointer;
}
.dash-logout:hover { background: rgba(255, 80, 80, 0.12); color: #ff8a8a; border-color: rgba(255, 80, 80, 0.3); }
.dash-side-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.dash-side-links a {
  color: var(--text-3, #8b88a0); font-size: 12px; font-weight: 600; text-decoration: none;
  padding: 4px 2px; border-radius: 6px; transition: color .15s;
}
.dash-side-links a:hover { color: var(--gold-2, #ffd84a); }
.dash-side-links a:focus-visible { outline: 2px solid var(--gold-2, #ffd84a); outline-offset: 2px; }
.dash-side-legal { margin: 0; text-align: center; color: var(--text-3, #8b88a0); font-size: 11px; }

/* ── Main + topbar ───────────────────────────────────────────── */
.dash-main { min-width: 0; display: flex; flex-direction: column; }
.dash-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: rgba(10, 8, 26, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}
.dash-title { margin: 0; font-family: var(--font-display, system-ui); font-weight: 800; font-size: 22px; letter-spacing: .3px; }
.dash-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dash-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.dash-balance { color: var(--success, #4ade80); }
.dash-spins { color: var(--gold-2, #ffd84a); }
.dash-menu-btn { display: none; background: none; border: 0; color: var(--text-1, #fff); cursor: pointer; padding: 4px; border-radius: 8px; }
.dash-menu-btn:focus-visible { outline: 2px solid var(--gold-2, #ffd84a); }

/* ── Content rail — desktop dashboards want HORIZONTAL layout, not a narrow
   column floating in empty space. Generous cap + fluid gutters; per-screen
   caps below. Everything here is scoped to .dash-content (exists ONLY in
   dashboard.html) so the Mini App / PWA / Telegram are untouched. ───────── */
.dash-main { --gutter: clamp(18px, 2vw, 40px); }
/* NOTE: app-shell.css styles `#app` (an ID) with big top/bottom padding to clear
   the Mini App's FIXED appbar + tabbar. The dashboard's topbar is sticky/in-flow,
   so that padding would leave a large empty gap at the top. We must beat the ID
   selector — hence `#app.dash-content` (id+class) rather than `.dash-content`. */
#app.dash-content { padding: clamp(20px, 1.6vw, 32px) var(--gutter) 64px; min-height: auto; }
.dash-content > * { max-width: 1320px; margin-inline: auto; width: 100%; }

/* SPIN + RANKS are centred heroes; WHEELS / PROFILE / PAYOUT are real
   multi-column dashboards (caps below). */
.dash-content .sp-screen { max-width: 900px; }
.dash-content .lb-root   { max-width: 820px; }
.dash-content .po-screen { max-width: 1120px; }
.dash-content .wc-screen { max-width: 1200px; }
.dash-content .pf-root   { max-width: 1280px; }

/* Big monetary values: tabular figures, single line, NEVER clipped
   (fixes "$200,306.62" → "$200,3"). Cards stop hiding overflow. */
.dash-content .stat-value {
  font-size: clamp(1.2rem, 0.9rem + 1.1vw, 1.75rem);
  white-space: nowrap; overflow: visible; text-overflow: clip;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.dash-content .stat-card, .dash-content .pf-stat-card { overflow: visible; }
.dash-content .dash-balance, .dash-content .dash-spins,
.dash-content .po-balance-num { font-variant-numeric: tabular-nums; }

/* Names + referral link: wrap on desktop instead of the mobile ellipsis. */
.dash-content .pf-name {
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: break-word; line-height: 1.15;
}
.dash-content .pf-link-text {
  white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all;
}

/* STATS grid — intrinsically responsive (auto-fit); cards stay wide enough
   that long values fit, and it collapses cleanly with no breakpoint columns. */
.dash-content .pf-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(12px, 1vw, 18px);
}

/* PROFILE — a true multi-column dashboard on desktop. Header + Stats span the
   full width; the remaining cards flow as a balanced masonry via CSS
   multi-column (no row-gap artefacts; cards never split). */
@media (min-width: 1000px) {
  .dash-content .pf-root {
    display: block;
    column-width: 380px;
    column-gap: clamp(18px, 1.5vw, 26px);
  }
  .dash-content .pf-root > * {
    break-inside: avoid;
    margin: 0 0 clamp(16px, 1.4vw, 24px);
  }
  .dash-content .pf-header,
  .dash-content .pf-section[aria-label="My Stats"] { column-span: all; }
}

/* WHEELS — responsive card grid (≈3-up on wide); the hero + Change-Your-Life
   card span full width. Cards are ≥340px so prize labels never truncate. */
@media (min-width: 1024px) {
  .dash-content .wc-screen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(16px, 1.3vw, 24px);
    align-items: start;
  }
  .dash-content .wc-screen > .wc-hero,
  .dash-content .wc-screen > .wc-card--clw { grid-column: 1 / -1; }
}
/* Prize rows: give the label room + let it wrap (no "$10…" / "$75…"). */
.dash-content .wc-prow { grid-template-columns: 12px minmax(110px, 1fr) 60px 42px; gap: 9px; }
.dash-content .wc-pname {
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: break-word; line-height: 1.3;
}

/* PAYOUT — balance + title full width, then form / addresses / history as an
   auto-fit grid (uses the width instead of a tall mobile stack). */
@media (min-width: 1000px) {
  .dash-content .po-screen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: clamp(18px, 1.4vw, 26px);
    align-items: start;
  }
  .dash-content .po-screen > .po-title,
  .dash-content .po-screen > .po-balance-card { grid-column: 1 / -1; }
}

/* Auth gate: take over the whole canvas (chrome hidden). */
.dash-body.nav-hidden .dash-sidebar,
.dash-body.nav-hidden .dash-topbar { display: none; }
.dash-body.nav-hidden .dash { grid-template-columns: 1fr; }
.dash-body.nav-hidden #app.dash-content { padding: 0; min-height: 100dvh; }
.dash-body.nav-hidden .dash-content > * { max-width: none; }

/* ── Off-canvas drawer (tablet / small screens) ──────────────── */
.dash-backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(0, 0, 0, 0.55);
}
@media (max-width: 1023px) {
  .dash { grid-template-columns: 1fr; }
  .dash-menu-btn { display: inline-flex; }
  .dash-sidebar {
    position: fixed; left: 0; top: 0; width: 264px;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .dash-body.drawer-open .dash-sidebar { transform: translateX(0); }
  .dash-body:not(.drawer-open) .dash-backdrop { display: none; }
}
@media (min-width: 1024px) {
  .dash-backdrop { display: none; }
}

/* Tighter padding on phones (the dashboard URL still works on mobile). */
@media (max-width: 560px) {
  #app.dash-content { padding: 16px 12px 48px; }
  .dash-topbar { padding: 12px 14px; }
  .dash-title { font-size: 18px; }
  .dash-spins-lbl { display: none; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .dash-sidebar { transition: none; }
}