/* =============================================================================
   DASHBOARD PAGE STYLES - ParlayBuilder
   ============================================================================= */

/* Import parlay-specific styles (cards, legs, results, scoreboards, etc.) */
@import url('dashboard-parlays.css');

/* =============================================================================
   DASHBOARD ROOT & LAYOUT
   ============================================================================= */

/* Dashboard root container - hidden by default */
#dashboard-root {
  display: none;
  min-height: 100vh;
  background: var(--bg-base, #0a1628);
}

#dashboard-root:empty {
  display: none;
}

/* When dashboard is active, hide everything else and show dashboard */
body.dashboard-active #dashboard-root {
  display: block !important;
}

body.dashboard-active .navbar,
body.dashboard-active #cover-page,
body.dashboard-active .workbench-layout,
body.dashboard-active .sidebar,
body.dashboard-active #main-app-wrapper {
  display: none !important;
}

/* Show landing-nav on dashboard - fixed at top */
body.dashboard-active .landing-nav {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/* Keep bottom nav visible on dashboard */
body.dashboard-active .pb-bottom-nav {
  display: flex !important;
}

body.dashboard-active {
  padding-bottom: calc(var(--pb-bottom-nav-height, 64px) + max(env(safe-area-inset-bottom), 12px));
}

.dashboard-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  padding-top: calc(70px + env(safe-area-inset-top, 0px) + 0px);
  padding-bottom: 100px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* =============================================================================
   LOADING, EMPTY, AND NOT LOGGED IN STATES
   ============================================================================= */

.dashboard-loading,
.dashboard-empty,
.dashboard-not-logged-in {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-60, #b4d7c4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dashboard-loading {
  /* Bouncing-spheres loader: center vertically in the page area, not at
     the top of an 80px-padded box. */
  justify-content: center;
  min-height: 46vh;
}

.dashboard-loading p {
  font-size: 15px;
}

.dashboard-loading i {
  font-size: 24px;
}

.dashboard-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--ink-40, #7a9f8c);
  margin-bottom: 8px;
}

.dashboard-empty h2,
.dashboard-not-logged-in h2 {
  margin: 0;
  font-size: 22px;
  color: var(--ink-100, #ffffff);
}

.dashboard-empty p,
.dashboard-not-logged-in p {
  margin: 0;
  color: var(--ink-50, #9ab8a8);
}

/* =============================================================================
   BUTTONS
   ============================================================================= */

.dashboard-page .btn {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-page .btn-primary {
  background: var(--theme-gradient-primary, linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%));
  color: #000;
}

.dashboard-page .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 211, 189, 0.3);
}

/* =============================================================================
   OVERVIEW CARDS (Quick Stats)
   ============================================================================= */

.dashboard-overview {
  margin-bottom: 18px;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.overview-card {
  position: relative;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  padding-left: 64px;
  text-align: left;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.overview-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.overview-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.overview-icon.profit {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.overview-icon.total {
  background: rgba(231, 76, 175, 0.15);
  color: #e74caf;
}

.overview-icon.legshit {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.overview-icon.weekly {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.overview-icon.active {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
}

.overview-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-100, #ffffff);
  line-height: 1.2;
  margin-bottom: 2px;
}

.overview-value.positive {
  color: #2ecc71;
}

.overview-value.negative {
  color: #e74c3c;
}

.overview-label {
  font-size: 11px;
  color: var(--ink-50, #9ab8a8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =============================================================================
   RANK OVERVIEW (above overview cards)
   ============================================================================= */

.dashboard-rank-overview {
  margin-bottom: 16px;
}

/* Compact tier title — shown in horizontal rank strip layout */

.dashboard-rank-overview:empty {
  display: none;
}

/* =============================================================================
   ANALYTICS SECTION
   ============================================================================= */

.dashboard-analytics {
  margin-bottom: 32px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.analytics-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.analytics-card-wide {
  grid-column: span 2;
}

.analytics-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-80, #e8ffe9);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.analytics-card-title i {
  color: var(--theme-accent, #00D3BD);
  font-size: 16px;
}

/* Parlay Analytics Stats */
.analytics-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.analytics-stat {
  text-align: center;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.analytics-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--theme-accent, #00D3BD);
  margin-bottom: 4px;
}

.analytics-stat-label {
  display: block;
  font-size: 11px;
  color: var(--ink-50, #9ab8a8);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* No data message */
.no-data {
  text-align: center;
  padding: 24px;
  color: var(--ink-50, #9ab8a8);
  font-size: 14px;
}

/* Section title */
.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-100, #ffffff);
  margin: 0 0 20px 0;
}

/* Parlays section wrapper */
.dashboard-parlays-section {
  margin-top: 0;
}

/* =============================================================================
   TWO-COLUMN LAYOUT (Parlays + Analytics)
   ============================================================================= */

.dashboard-main-content {
  --col-header-overlap: 14px;   /* how far pill sits inside the first card */
  --col-header-lift: 0px;    /* extra space pushing cards below the pill */
  --col-header-shift: 0px;    /* translateY on the pill itself (negative = up) */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* =============================================================================
   DESKTOP / MOBILE CONTENT VISIBILITY
   ============================================================================= */

/* Desktop duels column: hidden by default, shown on parlay tabs via body class */
.desktop-duels-column {
  display: none;
}

/* Column headers — pill chips on top border of first card, desktop only */
.dashboard-col-header {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 auto calc(-1 * var(--col-header-overlap));
  text-align: center;
  position: relative;
  z-index: 2;
  background: #0a1628;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 6px 22px;
  width: fit-content;
  transform: translateY(var(--col-header-shift));
}

.dashboard-col-header + .tab-parlays-content,
.dashboard-col-header + .tab-duels-content {
  padding-top: var(--col-header-lift);
}

/* Show overview cards on desktop (>1000px) — desktop gets different stat cards */
@media (min-width: 1001px) {
  #dashboard-overview {
    display: block;
    margin-bottom: 0;
  }
}

/* =============================================================================
   DESKTOP STAT CARDS (2x2 grid)
   ============================================================================= */

.desktop-stat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.desktop-stat-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease;
}

.desktop-stat-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.desktop-stat-icon {
  font-size: 18px;
  color: var(--theme-accent, #00D3BD);
  margin-bottom: 8px;
}

.desktop-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}

.desktop-stat-label {
  font-size: 11px;
  color: var(--ink-50, #9ab8a8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =============================================================================
   RR MOVEMENT CHART CARD
   ============================================================================= */

.rr-movement-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.rr-movement-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-80, #e8ffe9);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rr-movement-title i {
  color: var(--theme-accent, #00D3BD);
  font-size: 16px;
}

.rr-movement-chart-wrap {
  height: 200px;
  position: relative;
}

/* Large screens: side-by-side layout */
@media (min-width: 1001px) {
  .dashboard-page {
    max-width: 1320px;
  }

  .dashboard-main-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  /* No height cap: the parlay list grows and the PAGE scrolls.
     This was `max-height: 1000px; overflow-y: auto` — a magic number, not a
     viewport-relative one, so the column always ended exactly 1000px below its
     own top no matter how tall the window was. Any change to the header stack
     above it (hiding the overview strip moved this box's top from 250px to
     152px) slid that hard bottom edge up the screen and left visible dead space
     under the last card. The rail below stays `position: sticky`, so it still
     pins while these scroll — same feel, no constant to keep in sync. */
  .dashboard-parlays-section {
    flex: 3;
    min-width: 0;
    padding-right: 2px;
  }

  .dashboard-right-column {
    flex: 2;
    min-width: 0;
    max-height: 1000px;
    overflow-y: auto;
    position: sticky;
    top: calc(70px + env(safe-area-inset-top, 0px) + 16px);
  }

  /* Hide desktop duels column — duels now mixed into left column via content toggle */
  .desktop-duels-column {
    display: none !important;
  }

  /* Hide column headers on desktop — tabs now live in standalone bar */
  .dashboard-col-header {
    display: none !important;
  }

  /* Hide rank card tabs on desktop — replaced by standalone tab bar */
  .rank-card-tabs {
    display: none !important;
  }

  .duel-placeholder,
  .parlay-placeholder,
  .dashboard-no-results-centered {
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .duel-placeholder span,
  .parlay-placeholder span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: 0.3px;
  }

  /* Remove extra top margin so first parlay aligns with first duel.
     Also disable inner scroll — outer .dashboard-parlays-section handles it on desktop.
     Zero out the flex gap so the pill header's negative margin can overlap the first card border. */
  .parlays-control-card .dashboard-parlays {
    margin-top: 0;
    max-height: none;
    overflow-y: visible;
    gap: 0;
  }

  /* Vertical gaps between stacked cards on desktop */
  .tab-parlays-content,
  .tab-duels-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Analytics grid becomes single column in sidebar */
  .dashboard-right-column .analytics-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-right-column .analytics-card-wide {
    grid-column: span 1;
  }

  /* Smaller stats in sidebar */
  .dashboard-right-column .analytics-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Ranked stats grid in sidebar — 2 or 3 columns */
  .dashboard-right-column .ranked-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================================================
   RESPONSIVE - Medium screens (tablets)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1000px) {
  .dashboard-page {
    max-width: 1000px;
  }

  /* Analytics stays in 2-column grid on medium screens */
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Old mobile tab bar — removed, tabs now integrated in rank card */
.mobile-dashboard-tabs {
  display: none;
}

/* =============================================================================
   CONTENT TOGGLE (Parlays / Duels) — works at all screen sizes
   Scope to .tab-parlays-content > child so parlay cards nested inside
   duel cards (for showing each side's legs) are not affected.
   ============================================================================= */

body.mobile-content-parlays .tab-parlays-content > .duel-card { display: none !important; }
body.mobile-content-duels .tab-parlays-content > .parlay-card { display: none !important; }
body.mobile-content-duels .tab-parlays-content > .parlay-placeholder { display: none !important; }
body.mobile-content-duels .tab-parlays-content > .dashboard-no-results:not(.duel-empty-state) { display: none !important; }
body.mobile-content-parlays .tab-parlays-content > .duel-placeholder { display: none !important; }
body.mobile-content-parlays .tab-parlays-content > .duel-empty-state { display: none !important; }
body.mobile-content-duels .tab-parlays-content > .parlay-empty-state { display: none !important; }

/* =============================================================================
   RESPONSIVE - Small screens (mobile)
   ============================================================================= */

@media (max-width: 1000px) {

  /* On mobile: hide desktop duels column */
  .desktop-duels-column {
    display: none !important;
  }

  .dashboard-page {
    padding: 12px;
    padding-top: calc(70px + env(safe-area-inset-top, 0px) + 30px);
    padding-bottom: 140px;
  }

  /* ── Rank overview: always visible on mobile, edge-to-edge ── */
  .dashboard-rank-overview {
    display: block !important;
    margin-left: -12px;
    margin-right: -12px;
    margin-top: -6px;
  }

  .dashboard-rank-overview .rank-overview-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
  }

  .dashboard-rank-overview:empty {
    display: none !important;
  }

  /* Hide overview cards on mobile */
  #dashboard-overview {
    display: none;
  }

  /* Open tab: show parlays, hide right column */
  body.mobile-tab-open .dashboard-parlays-section {
    display: block;
  }

  body.mobile-tab-open .dashboard-right-column {
    display: none;
  }

  /* Settled tab: show parlays, hide right column */
  body.mobile-tab-settled .dashboard-parlays-section {
    display: block;
  }

  body.mobile-tab-settled .dashboard-right-column {
    display: none;
  }

  /* Rank overview card stays fully visible on all mobile tabs */

  /* Overview cards inside mobile stats tab */
  .mobile-analytics-overview .overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .mobile-analytics-overview .overview-card {
    padding: 14px;
    padding-left: 56px;
  }

  .mobile-analytics-overview .overview-card-active {
    display: block;
  }

  .dashboard-overview {
    margin-bottom: 20px;
  }

  /* Main content gap on mobile */
  .dashboard-main-content {
    gap: 20px;
  }

  .dashboard-analytics {
    margin-bottom: 0;
  }

  /* Overview cards responsive */
  .overview-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .overview-card {
    padding: 18px;
    padding-left: 62px;
  }

  .overview-card-active {
    display: none;
  }

  .overview-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
    left: 14px;
  }

  .overview-value {
    font-size: 26px;
  }

  .overview-label {
    font-size: 12px;
  }

  .rr-movement-card {
    padding: 28px;
  }

  .rr-movement-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .rr-movement-title i {
    font-size: 18px;
  }

  .rr-movement-chart-wrap {
    height: 300px;
  }

  /* Analytics grid responsive */
  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .analytics-card {
    padding: 16px;
  }

  .analytics-card-title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .analytics-card-wide {
    grid-column: span 1;
  }

  .analytics-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .analytics-stat-value {
    font-size: 26px;
  }

  .analytics-stat-label {
    font-size: 13px;
  }

  /* Logged-out state: larger text on mobile */
  .dashboard-not-logged-in {
    gap: 28px;
  }

  .dashboard-not-logged-in h2 {
    font-size: 34px;
  }

  .dashboard-not-logged-in p {
    font-size: 24px;
  }

  .dashboard-not-logged-in .btn-primary {
    font-size: 22px;
    font-weight: 700;
    padding: 20px 48px;
    border-radius: 16px;
  }

  /* Empty state: larger text on mobile */
  .dashboard-empty {
    gap: 32px;
  }

  .dashboard-empty h2 {
    font-size: 40px;
  }

  .dashboard-empty p {
    font-size: 28px;
  }

  .dashboard-empty .btn-primary {
    font-size: 26px;
    font-weight: 700;
    padding: 22px 56px;
    border-radius: 16px;
  }

  .dashboard-loading {
    min-height: 70vh;
    padding: 0 20px;
    justify-content: center;
    gap: 24px;
  }

  .dashboard-loading i {
    font-size: 44px;
  }

  .dashboard-loading p {
    font-size: 32px;
  }
}

/* =============================================================================
   DESKTOP OVERVIEW CARDS (label-at-top variant)
   ============================================================================= */

.desktop-overview-cards .overview-card {
  padding-top: 32px;
}

.overview-card-title {
  display: none;
}

@media (min-width: 1001px) {
  .overview-card-title {
    display: block;
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-50, #9ab8a8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

/* New icon color classes */
.overview-icon.record {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.overview-icon.streak {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.overview-icon.duels {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

/* Streak badges row */
.streak-badges-row {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}

.streak-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
}

.streak-win {
  background: #2ecc71;
}

.streak-loss {
  background: #e74c3c;
}

/* =============================================================================
   DESKTOP TAB BAR (standalone)
   ============================================================================= */

.desktop-tab-bar-wrapper {
  display: none;
}

@media (min-width: 1001px) {
  .desktop-tab-bar-wrapper {
    display: block;
    margin: 16px 0;
  }
}

.desktop-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 6px 8px;
}

.dtb-tabs {
  display: flex;
  gap: 4px;
}

.dtb-pill {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-60, #b4d7c4);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dtb-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.dtb-pill.active {
  background: var(--theme-accent, #00D3BD);
  color: #000;
  border-color: var(--theme-accent, #00D3BD);
}

.dtb-pill-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}

.dtb-pill.active .dtb-pill-count {
  opacity: 1;
}

.dtb-content-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 3px;
}

.dtb-toggle-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-50, #9ab8a8);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.dtb-toggle-btn:hover {
  color: #fff;
}

.dtb-toggle-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* =============================================================================
   DESKTOP SIDEBAR
   ============================================================================= */

.desktop-sidebar {
  display: none;
}

@media (min-width: 1001px) {
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

/* Sidebar card */
.sidebar-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* =============================================================================
   SHARED EXPOSURE CARD
   The players carrying more than one open parlay. Amber, not teal: this is
   neither a good nor a bad number, it is the one to look at — and the dashboard
   uses teal for good and red for lost, with nothing yet for "attention".
   Renders only inside #desktop-sidebar, which is display:none below 1001px.
   ============================================================================= */
.exposure-row {
  margin-bottom: 11px;
}

.exposure-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.exposure-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-100, #ffffff);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exposure-meta {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exposure-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.exposure-bar i {
  display: block;
  height: 100%;
  background: #f0a63a;
  opacity: 0.8;
}

.exposure-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

.sidebar-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-60, #b4d7c4);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-card-title i {
  color: var(--theme-accent, #00D3BD);
  font-size: 14px;
}


/* =============================================================================
   TONIGHT'S SLATE CARD
   ============================================================================= */

.slate-games {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Scrollbar styling for slate */
.slate-games::-webkit-scrollbar {
  width: 4px;
}

.slate-games::-webkit-scrollbar-track {
  background: transparent;
}

.slate-games::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.slate-team-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.slate-game {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.slate-game:hover {
  background: rgba(255, 255, 255, 0.04);
}

.slate-game:last-child {
  border-bottom: none;
}

.slate-team-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* A track sized to the longest club name, so the score column lines up all
     the way down the card. Club names vary by ~56px ("Reds" to "Diamondbacks"),
     and that slack has to sit somewhere: it goes between the LOGO and the NAME,
     not between the name and the score. Logos hold their outer column, names
     hug the score from both sides. Shrinks (0 1) before the row overflows. */
  flex: 0 1 126px;
}

/* Logos bookend the matchup: [logo] Away | score | Home [logo].
   The auto margins are what pin the two logo columns to the outer edges while
   the names collapse inward against the score. */
.slate-team-group.slate-away { justify-content: flex-start; }
.slate-team-group.slate-away .slate-team { margin-left: auto; text-align: right; }
.slate-team-group.slate-home { justify-content: flex-start; }
.slate-team-group.slate-home .slate-team-logo { margin-left: auto; }

.slate-team {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slate-at {
  font-size: 12px;
  color: var(--ink-40, #7a9f8c);
}

.slate-score {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-80, #e8ffe9);
  text-align: center;
  flex: 0 0 58px;
  font-variant-numeric: tabular-nums;
}

.slate-clock-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}

.slate-clock-badge.live {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.slate-clock-badge.final {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-50, #9ab8a8);
}

.slate-clock-badge.upcoming {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-50, #9ab8a8);
}

.slate-empty {
  text-align: center;
  padding: 16px;
  color: var(--ink-40, #7a9f8c);
  font-size: 13px;
}

/* =============================================================================
   RECENT ACTIVITY CARD
   ============================================================================= */

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-badge {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
}

.activity-badge-win {
  background: #2ecc71;
}

.activity-badge-loss {
  background: #e74c3c;
}

.activity-desc {
  font-size: 13px;
  color: var(--ink-80, #e8ffe9);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-date {
  font-size: 11px;
  color: var(--ink-40, #7a9f8c);
  flex-shrink: 0;
}

.activity-profit {
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}

.activity-profit-pos {
  color: #2ecc71;
}

.activity-profit-neg {
  color: #e74c3c;
}

/* ── Live-game popup (MLB scoreboard click) ─────────────────────────────
   Hosts the real /mlb/game page in embed mode. Desktop: centered sheet;
   mobile: full screen. Body scroll locks while open. */
body.mlb-game-modal-lock { overflow: hidden; }

.mlb-game-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mlb-game-modal {
  display: flex;
  flex-direction: column;
  width: min(940px, 100%);
  height: min(946px, 96vh);
  background: #0b1017;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.mlb-game-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.mlb-game-modal-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.9);
}

.mlb-game-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mlb-game-modal-open {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.mlb-game-modal-open:hover { background: rgba(255, 255, 255, 0.14); }
.mlb-game-modal-open i { font-size: 10px; margin-right: 4px; }

.mlb-game-modal-close {
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
}
.mlb-game-modal-close:hover { color: #fff; }

.mlb-game-modal-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #0b1017;
}

@media (max-width: 768px) {
  .mlb-game-modal-overlay { padding: 0; }
  .mlb-game-modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }
}

/* Touch-friendly header on mobile/tablet layouts: taller bar, bigger
   tap targets (44px+ hit areas). */
/* Tablet band only (phones ≤768px are already full-screen — this must not
   override their height: 100%). */
@media (max-width: 1000px) and (min-width: 769px) {
  .mlb-game-modal {
    height: min(1196px, 98vh);
  }
}

@media (max-width: 1000px) {
  .mlb-game-modal-header {
    padding: 14px 16px;
    gap: 14px;
  }
  .mlb-game-modal-title {
    font-size: 17px;
  }
  .mlb-game-modal-open {
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 10px;
  }
  .mlb-game-modal-open i { font-size: 13px; margin-right: 6px; }
  .mlb-game-modal-close {
    font-size: 28px;
    padding: 8px 14px;
  }
}

/* ── MLB player game-log popup (leg click) ─────────────────────────────── */
.mlb-player-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;   /* above the game modal */
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mlb-player-modal {
  display: flex;
  flex-direction: column;
  width: min(700px, 100%);
  max-height: min(900px, 92vh);
  background: #0b1017;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.mlb-player-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.mlb-player-modal-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mlb-player-modal-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #0e1520;
}

.mlb-player-modal-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.mlb-player-modal-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.mlb-player-modal-page {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.mlb-player-modal-page:hover { background: rgba(255, 255, 255, 0.14); }
.mlb-player-modal-page i { font-size: 10px; margin-right: 4px; }

.mlb-player-modal-body {
  overflow-y: auto;
  padding: 8px 0;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.mlb-player-modal-body > .loader-wrapper { margin: auto; }

.mpm-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  padding: 40px 16px;
  margin: auto;
}

.mpm-pa { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mpm-pa:last-child { border-bottom: none; }

.mpm-pa-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
}
.mpm-pa-row:hover { background: rgba(255, 255, 255, 0.03); }

.mpm-pa-inning {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  min-width: 44px;
}

.mpm-pa-result {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.mpm-vs {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Outcome coloring: the result text itself carries the event's nature. */
.mpm-res-good { color: var(--brand-teal, #2de0ba) !important; }
.mpm-res-bad { color: #ff6577 !important; }
.mpm-res-neutral { color: rgba(255, 255, 255, 0.55) !important; }

.mpm-chev {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.mpm-pitches {
  padding: 2px 16px 12px 70px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mpm-pitch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
}

.mpm-pitch-n {
  min-width: 14px;
  color: rgba(255, 255, 255, 0.35);
}

.mpm-pitch-type {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 5px;
  min-width: 24px;
  text-align: center;
}

.mpm-pitch-mph { min-width: 64px; color: rgba(255, 255, 255, 0.85); }
.mpm-pitch-call { color: rgba(255, 255, 255, 0.55); }
.mpm-bip { color: var(--brand-teal, #2de0ba); font-size: 11.5px; }

/* Tablet band: bigger still, anchored high (centered felt buried). */
@media (max-width: 1000px) and (min-width: 769px) {
  .mlb-player-modal-overlay {
    align-items: flex-start;
    padding-top: 18vh;
  }
  .mlb-player-modal {
    width: min(756px, 100%);
    max-height: min(940px, 88vh);
  }
}

/* Touch-friendly sizing for the whole popup at mobile/tablet widths:
   taller rows (44px+ targets), larger type, bigger avatar/chevrons. */
@media (max-width: 1000px) {
  .mlb-player-modal-avatar { width: 60px; height: 60px; }
  .mlb-player-modal-name { font-size: 20px; }
  .mlb-player-modal-sub { font-size: 13px; }
  .mlb-player-modal-header { padding: 16px 18px; }
  .mlb-player-modal-page { font-size: 16px; padding: 13px 18px; border-radius: 10px; }
  .mlb-game-modal-close { font-size: 30px; padding: 10px 16px; }
  .mpm-pa-row { padding: 24px 22px; gap: 16px; }
  .mpm-pa-inning { font-size: 15px; min-width: 62px; }
  .mpm-pa-result { font-size: 20px; }
  .mpm-vs { font-size: 16px; }
  .mpm-chev { font-size: 18px; }
  .mpm-pitch { font-size: 15px; gap: 11px; }
  .mpm-pitch-type { font-size: 13px; padding: 4px 7px; min-width: 32px; }
  .mpm-pitch-mph { min-width: 80px; }
  .mpm-bip { font-size: 14px; }
  /* Live at-bat card (tracker mini) scales up too. */
  .pbr-mini-count { font-size: 27px; }
  .pbr-mini-call { font-size: 18px; }
  .pbr-mini-sub { font-size: 15px; }
  .pbr-mini-row { padding: 14px 16px; }
  .pbr-mini-num { width: 30px; height: 30px; font-size: 14px; }
}

@media (max-width: 768px) {
  .mlb-player-modal-overlay { padding: 0; align-items: flex-end; }
  .mlb-player-modal {
    width: 100%;
    max-height: 96vh;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
  }
  .mlb-player-modal-header { padding: 14px 16px; }
  .mlb-player-modal-page { font-size: 14px; padding: 10px 14px; }
  .mpm-pitches { padding-left: 60px; }
}

/* The tracker's play modal (dynamic-imported for at-bat detail) must sit
   above the dashboard's own overlays (game modal 10000, player 10001);
   on the game page itself it keeps its native 1300. */
body .pbr-modal { z-index: 10002; }

/* =============================================================================
   DESKTOP CARD SURFACE — lifted grey panels instead of black-on-black
   =============================================================================
   Wide only. Every card at <=1000px keeps its #000 fill; this whole block is
   inside @media (min-width: 1001px).

   Why: the page paints #000 cards on a #000 ground separated only by a hairline,
   while the workbench next door uses a lifted panel. Borrowing just the fill is
   what makes the two pages read as one product. Fill only — borders, radii and
   shadows are deliberately untouched, and the rgba(0,0,0,.15-.3) wells inside the
   cards (progress tracks, action buttons, badges) now read as recessed, which is
   what they were always meant to be.

   Scoped to #dashboard-content for two reasons, both load-bearing:
     1. dashboard.css is linked globally (templates/index.html:104) and
        .parlay-card / .duel-card also render on /user/duel and /user/profile.
     2. The ID does the specificity work:
          (1,1,0) beats .parlays-control-card .parlay-card  (0,2,0)  dashboard-parlays.css:123
          (1,1,0) beats .duel-card                          (0,1,0)  duel.css:65, which
          loads AFTER this file, so an unqualified rule would tie and lose.
   ============================================================================= */

@media (min-width: 1001px) {
  #dashboard-content .parlay-card,
  #dashboard-content .duel-card,
  #dashboard-content .sidebar-card,
  #dashboard-content .overview-card,
  #dashboard-content .desktop-tab-bar {
    background: #111319;
  }

  /* Duel cards strip their two nested parlay cards back to bare legs
     (duel.css:1541 `.duel-parlay-side .parlay-card { background: none }`).
     That rule is (0,2,0) and loses to the (1,1,0) above, which would sink a grey
     card inside a grey card. Re-strip it explicitly at (1,2,0). */
  #dashboard-content .duel-parlay-side .parlay-card {
    background: none;
  }

  /* ---------------------------------------------------------------------
     Overview stat cards live in the RIGHT RAIL, below Tonight's Slate.
     _renderDesktopSidebar composes them into #desktop-sidebar, so the
     full-width strip above the feed is left empty here — hide it rather than
     leave its 18px margin behind. This overrides the display:block at :410
     (same specificity, later in the file).

     NOTE: #dashboard-overview is now hidden at EVERY width — :672 already hid
     it below 1001px ("Hide overview cards on mobile"), which predates this.
     The mobile createOverviewCards() write in dashboardPage.js therefore
     renders into a permanently hidden node; left alone, but it is dead work.
     --------------------------------------------------------------------- */
  #dashboard-overview {
    display: none;
  }

  .dashboard-right-column .overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* The 5th card would otherwise sit alone at half width. */
  .dashboard-right-column .overview-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* The rail is roughly a third the width the strip had, so the base card's
     64px icon gutter and 26px value no longer fit. createDesktopOverviewCards
     emits no .overview-icon at all now, so the gutter goes with it and the
     value drops a step — measured to clear "12.4K chips" and "SINCE FEB 2026"
     without wrapping at a 245px card. */
  .dashboard-right-column .overview-card {
    padding: 28px 12px 12px;
  }

  .dashboard-right-column .overview-card-title {
    top: 10px;
    left: 12px;
  }

  .dashboard-right-column .overview-value {
    font-size: 22px;
  }

  .dashboard-right-column .overview-label {
    font-size: 10px;
  }
}