/* dashboard/index.css — Wave 8b composition. Mobile-first. DARK ONLY. */

/* ─── Atoms ────────────────────────────────────────────────────────── */
@import url('../../_components/atoms/page-shell/page-shell.css');

/* ─── Molecules ────────────────────────────────────────────────────── */
@import url('../../_components/molecules/stat-card/stat-card.css');
@import url('../../_components/molecules/pagination-controls/pagination-controls.css');

/* ─── Sections ─────────────────────────────────────────────────────── */
@import url('../../_components/sections/header-full/header-full.css');
@import url('../../_components/sections/footer-full/footer-full.css');
@import url('../../_components/sections/mobile-menu/mobile-menu.css');
@import url('../../_components/sections/age-gate-modal/age-gate-modal.css');
@import url('../../_components/sections/account-sidebar/account-sidebar.css');
@import url('../../_components/sections/stats-grid/stats-grid.css');
@import url('../../_components/sections/dash-main-panel/dash-main-panel.css');

/* ─── Page-scoped overrides ────────────────────────────────────────── */

.page-dashboard .dashboard-main {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page-dashboard .dashboard-container {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  position: relative;
  z-index: 1;
}

/* Hide wins counter — dashboard uses avatar instead per Figma */
.page-dashboard [data-wins-counter] { display: none !important; }

/* Replace login avatar (icon) with user avatar (picsum) on desktop side --end */
.page-dashboard .header-full__avatar:not(.header-full__avatar--mobile) {
  overflow: hidden;
  padding: 0;
  position: relative;
}
.page-dashboard .header-full__avatar:not(.header-full__avatar--mobile) .header-full__avatar-icon {
  display: none;
}
.page-dashboard .header-full__avatar:not(.header-full__avatar--mobile)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://picsum.photos/seed/dashboard-user/48/48');
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

/* Layout (mobile-first single column → desktop 270 + 1fr) */
.page-dashboard .dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.page-dashboard .dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

/* Main-panel row (Figma: panel at left column, empty right column) */
.page-dashboard .main-panel-row {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Pagination wrap — centered below main panel content */
.page-dashboard .pagination-wrap {
  margin-top: 48px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Pagination — dashboard variant (white-current vs leaks cyan-current per Figma 1822:2411)
   Default chips use --line bg (vs --soft elsewhere); current uses --lead bg with --line border. */
.page-dashboard .pagination {
  margin-top: 0;
}
.page-dashboard .pagination-summary {
  margin-top: 0;
}
.page-dashboard .pagination__page {
  background: rgb(var(--color-line));
  color: rgb(var(--color-subs));
}
.page-dashboard .pagination__page--indicator {
  background: rgb(var(--color-line));
  color: rgb(var(--color-lead));
}
.page-dashboard .pagination__page--current {
  background: rgb(var(--color-lead));
  color: rgb(var(--color-fore));
  border: none;
  box-shadow: 0 0 0 4px rgb(var(--color-lead));
  min-width: 44px;
}

/* Decorative glows hidden on mobile */
.page-dashboard .dash-glow { display: none; }

/* Tablet */
@media (min-width: 768px) {
  .page-dashboard .dashboard-container {
    padding: 32px 24px 96px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .page-dashboard .dashboard-container {
    padding: 40px 16px 96px;
  }

  /* 270w sidebar + 1fr content (per Wave 8a handoff) */
  .page-dashboard .dashboard-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 48px;
    align-items: start;
  }

  /* Figma main-panel sits in its own row below stats, anchored to left col (282w) */
  .page-dashboard .main-panel-row {
    display: grid;
    grid-template-columns: 282px 1fr;
    gap: 48px;
    margin-top: 522px;
  }

  /* Pagination — Figma Group 80 at x=345 w=444 (relative to container at x=120 → left:225, width:444) */
  .page-dashboard .pagination-wrap {
    margin-top: 610px;
    margin-left: 225px;
    width: 444px;
    align-items: center;
  }

  /* Page-glow decoration: dashboard uses content-list glow pattern at top */
  .page-dashboard .dash-glow {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
  }
  .page-dashboard .dash-glow--top {
    top: -184px;
    left: 50%;
    transform: translateX(-50%);
    width: 1456px;
    height: 448px;
  }
}