/* ==========================================================================
   Dashboard v2 — scoped design system (all selectors prefixed with .dash2
   so nothing here can leak into or collide with the rest of the site).
   Tokens mirror the site's existing brand palette under the names used in
   the design brief.
   ========================================================================== */

.dash2 {
    --ball: #D9E635;
    --ball-soft: #EEF38C;
    --forest: #1F3A26;
    --ink: #141613;
    --cream: #F7F5EE;
    --muted: rgba(20,22,19,.6);
    --subtle: rgba(20,22,19,.4);
    --border: rgba(20,22,19,.09);
    --win: #2C7A3F;
    --loss: #C0392B;
}

/* ---------- Header ---------- */
.dash2 .top { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.dash2 .top-left { display:flex; align-items:center; gap:.85rem; min-width:0; }
.dash2 .top-avatar {
    width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden;
    background:var(--forest); border:2px solid var(--ball);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--font-mono); font-weight:700; font-size:.95rem;
}
.dash2 .top-avatar img { width:100%; height:100%; object-fit:cover; }
.dash2 .top-eyebrow { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.dash2 .top-greeting { font-size:27px; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.25; margin-top:.15rem; }
.dash2 .top-right { display:flex; align-items:center; gap:.6rem; flex-wrap:nowrap; }
.dash2 .weather-chip {
    flex:0 0 auto; white-space:nowrap;
    display:inline-flex; align-items:center; gap:.35rem;
    background:#fff; border:1px solid var(--border); border-radius:999px;
    padding:.45rem .9rem; font-family:var(--font-mono); font-size:12px; color:var(--ink); font-weight:600;
}
.dash2 .top-cta {
    flex:0 0 auto; white-space:nowrap;
    display:inline-flex; align-items:center; gap:.4rem;
    background:var(--ink); color:var(--ball);
    border-radius:999px; padding:.6rem 1.15rem; font-weight:700; font-size:.85rem;
    text-decoration:none;
}
.dash2 .top-cta:hover { background:var(--forest); color:var(--ball); }

/* ---------- Tabs ---------- */
.dash2 .tabs { display:inline-flex; width:max-content; background:rgba(20,22,19,.06); border-radius:999px; padding:5px; gap:2px; margin-bottom:1.25rem; }
.dash2 .tab {
    border:none; background:transparent; cursor:pointer;
    display:inline-flex; align-items:center; gap:.4rem;
    font-family:var(--font-sans); font-weight:700; font-size:.85rem;
    color:var(--muted); padding:.5rem 1.1rem; border-radius:999px;
    transition:background .15s ease, color .15s ease;
    min-height:44px;
}
.dash2 .tab[aria-selected="true"] { background:var(--ink); color:var(--cream); }
.dash2 .tab .pip { background:var(--ball); color:var(--ink); font-family:var(--font-mono); font-size:10px; font-weight:800; border-radius:999px; padding:.05rem .42rem; min-width:1.1rem; text-align:center; }

/* ---------- Action bar ---------- */
.dash2 .actionbar { display:grid; grid-template-columns:1fr auto; gap:.75rem; align-items:stretch; margin-bottom:1.25rem; }
.dash2 .alert {
    background:#fff; border:1px solid var(--border); border-left:4px solid var(--ball);
    border-radius:12px; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; padding:.55rem 1rem; min-height:44px;
}
.dash2 .alert-tag {
    flex:0 0 auto; background:var(--ball-soft); color:var(--ink); font-family:var(--font-mono);
    font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    border-radius:999px; padding:.28rem .6rem; white-space:nowrap;
}
.dash2 .alert-msg { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; color:var(--ink); }
.dash2 .alert-countdown { flex-basis:100%; font-size:.76rem; color:var(--text-muted,rgba(20,22,19,.55)); margin-top:.2rem; }
.dash2 .alert-review {
    flex:0 0 auto; border:1px solid var(--border); background:transparent; color:var(--ink);
    font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.05em;
    border-radius:999px; padding:.4rem .85rem; cursor:pointer; text-decoration:none;
    transition:background .15s ease, color .15s ease;
}
.dash2 .alert-review:hover { background:var(--ball); color:var(--ink); border-color:var(--ball); }
.dash2 .alert-inline-actions { flex:0 0 auto; display:flex; gap:.4rem; }
.dash2 .alert-accept, .dash2 .alert-reject {
    font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.05em;
    border-radius:999px; padding:.4rem .75rem; cursor:pointer; white-space:nowrap;
    transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.dash2 .alert-accept { border:none; background:var(--ball); color:var(--ink); }
.dash2 .alert-accept:hover { background:var(--ball-soft); }
.dash2 .alert-reject { border:1px solid var(--border); background:transparent; color:var(--text-muted,rgba(20,22,19,.55)); }
.dash2 .alert-reject:hover { border-color:var(--loss); color:var(--loss); }
.dash2 .alert-accept:disabled, .dash2 .alert-reject:disabled { opacity:.5; cursor:default; }

.dash2 .dash-hook { font-size:.82rem; font-weight:600; color:var(--forest,#1F3A26); margin:0 0 .6rem; }
.dash2 .quick { display:inline-grid; grid-template-columns:auto 66px 66px; gap:.6rem; align-items:stretch; }
.dash2 .btn-record {
    background:var(--ball); color:var(--ink); border:none; border-radius:999px;
    font-weight:800; font-size:.92rem; padding:0 1.6rem; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; min-height:44px;
}
.dash2 .btn-record:hover { background:var(--ball-soft); }
.dash2 .tile {
    width:66px; background:#fff; border:1px solid var(--border); border-radius:12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
    cursor:pointer; color:var(--ink); min-height:44px;
}
.dash2 .tile:hover { background:var(--cream); border-color:var(--ink); }
.dash2 .tile svg { width:19px; height:19px; }
.dash2 .tile span { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--muted); }

/* ---------- Club header ---------- */
.dash2 .club-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:#fff; border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.25rem; margin-bottom:1.25rem; }
.dash2 .club-head-left { display:flex; align-items:center; gap:.9rem; min-width:0; }
.dash2 .club-head-name { font-size:1.3rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.25; }
.dash2 .club-head-meta { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em; color:var(--muted); margin-top:.2rem; }
.dash2 .club-head-desc { font-size:.85rem; color:var(--muted); margin-top:.45rem; max-width:56ch; line-height:1.5; }
.dash2 .club-switch { border:1px solid var(--border); background:var(--cream); border-radius:999px; padding:.55rem 1.1rem; font-family:var(--font-sans); font-weight:700; font-size:.82rem; color:var(--ink); flex-shrink:0; cursor:pointer; }

/* ---------- Stat strip ---------- */
.dash2 .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }
.dash2 .stat { background:#fff; border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.25rem; }
.dash2 .stat-label { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--subtle); font-weight:700; margin-bottom:.5rem; }
.dash2 .stat-row { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.55rem; }
.dash2 .stat-num { font-family:var(--font-mono); font-weight:700; font-size:2rem; letter-spacing:-.04em; color:var(--ink); line-height:1; }
.dash2 .stat-wl { font-family:var(--font-mono); font-size:.82rem; font-weight:700; }
.dash2 .stat-wl b.w { color:var(--win); }
.dash2 .stat-wl b.l { color:var(--loss); }
.dash2 .stat-status { font-family:var(--font-mono); font-size:.78rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.dash2 .stat-status.w { color:var(--win); }
.dash2 .stat-status.l { color:var(--loss); }
.dash2 .stat-bar { height:4px; border-radius:999px; background:rgba(192,57,43,.18); overflow:hidden; display:flex; margin-bottom:.5rem; }
.dash2 .stat-bar-w { height:100%; background:var(--win); }
.dash2 .stat-foot { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
.dash2 .stat-foot b { color:var(--forest); font-weight:700; }

/* ---------- Content row ---------- */
.dash2 .grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:1.25rem; align-items:stretch; }
.dash2 .side { display:contents; }
.dash2 .grid .card { background:#fff; border:1px solid var(--border); border-radius:13px; overflow:hidden; display:flex; flex-direction:column; max-height:420px; }
.dash2 .card__head, .dash2 .card__foot { flex:0 0 auto; }
.dash2 .card__scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.dash2 .card__scroll::-webkit-scrollbar { width:8px; }
.dash2 .card__scroll::-webkit-scrollbar-thumb { background:rgba(20,22,19,.16); border-radius:999px; }
.dash2 .card__head { background:var(--forest); color:#fff; padding:.75rem 1.1rem; display:flex; align-items:center; gap:.55rem; }
.dash2 .card__head-title { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.dash2 .card__head-title::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ball); flex-shrink:0; }
.dash2 .card__badge { margin-left:auto; background:rgba(255,255,255,.16); color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700; border-radius:999px; padding:.1rem .55rem; }
.dash2 .card__foot { background:#fbfaf6; border-top:1px solid var(--border); padding:.6rem 1.1rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dash2 .card__foot-note { font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.dash2 .lb-explainer { font-size:.72rem; color:var(--muted); padding:.5rem 1.1rem .25rem; line-height:1.4; }
.dash2 .card__foot-link { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--forest); text-decoration:none; flex-shrink:0; }
.dash2 .card__foot-link:hover { text-decoration:underline; }

/* game row */
.dash2 .g { display:grid; grid-template-columns:auto 1fr auto; gap:.65rem; align-items:center; padding:.65rem 1.1rem; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.dash2 .g:last-child { border-bottom:none; }
.dash2 .g:hover { background:rgba(20,22,19,.03); }
.dash2 .g-badge { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:.8rem; flex-shrink:0; }
.dash2 .g-badge.w { background:rgba(44,122,63,.13); color:var(--win); }
.dash2 .g-badge.l { background:rgba(192,57,43,.13); color:var(--loss); }
.dash2 .g-badge.p { background:rgba(245,158,11,.15); color:#b45309; }
/* Status pill variant — full words (WIN/LOSS/PENDING/DISPUTED) don't fit the fixed-size square
   badge above, which is shared with the rank (#1) badge elsewhere in this feed, so this is a
   separate auto-width modifier rather than changing .g-badge itself. */
.dash2 .g-badge--status { width:auto; height:auto; display:inline-flex; align-items:center; gap:.36rem; border-radius:999px; padding:.3rem .62rem .3rem .5rem; font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; border:1px solid transparent; }
.dash2 .g-badge--status::before { content:''; width:9px; height:9px; flex-shrink:0; background:currentColor; }
.dash2 .g-badge--status.w { background:rgba(44,122,63,.1); color:var(--win); border-color:rgba(44,122,63,.24); }
.dash2 .g-badge--status.w::before {
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dash2 .g-badge--status.l { background:rgba(192,57,43,.1); color:var(--loss); border-color:rgba(192,57,43,.24); }
.dash2 .g-badge--status.l::before {
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dash2 .g-badge--status.p { background:rgba(245,158,11,.12); color:#b45309; border-color:rgba(245,158,11,.3); }
.dash2 .g-badge--status.p::before { border-radius:50%; animation:g-badge-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dash2 .g-badge--status.p::before { animation:none; } }
@keyframes g-badge-pulse { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
/* Game-type pill (SINGLES/DOUBLES) — neutral coloring, deliberately not win/loss/pending colors since
   it labels the format, not a result. Same auto-width shape as .g-badge--status. */
.dash2 .g-badge--type { width:auto; height:auto; display:inline-flex; align-items:center; border-radius:999px; padding:.3rem .55rem; font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.06em; background:rgba(20,22,19,.06); color:var(--ink); }
.dash2 .g-info { min-width:0; }
.dash2 .g-teams { font-size:.86rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash2 .g-teams a { color:inherit; text-decoration:none; }
.dash2 .g-teams a:hover { color:var(--forest); text-decoration:underline; }
.dash2 .g-sub { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:.15rem; }
.dash2 .g-score { font-family:var(--font-mono); font-weight:700; font-size:.85rem; flex-shrink:0; white-space:nowrap; }
.dash2 .g-score .win { color:var(--ink); }
.dash2 .g-score .lose { color:var(--subtle); }

/* empty state */
.dash2 .empty { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem 1.25rem; gap:.5rem; }
.dash2 .empty-icon { width:38px; height:38px; border-radius:10px; background:var(--cream); display:flex; align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; }
.dash2 .empty-icon svg { width:18px; height:18px; }
.dash2 .empty-title { font-size:13.5px; font-weight:700; color:var(--ink); }
.dash2 .empty-text { font-size:12px; color:var(--muted); max-width:220px; line-height:1.5; }
.dash2 .empty-cta { margin-top:.35rem; background:var(--ink); color:var(--cream); font-size:.78rem; font-weight:700; border-radius:999px; padding:.5rem 1rem; text-decoration:none; }

/* organizer upsell — shown on the Organize tab to players who aren't organizers yet */
.dash2 .organize-teaser { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; max-width:480px; margin:2rem auto; padding:2rem 1.5rem; background:#fff; border:1px solid var(--border); border-radius:13px; }
.dash2 .organize-teaser .empty-icon { width:44px; height:44px; }
.dash2 .organize-teaser .empty-icon svg { width:20px; height:20px; }
.dash2 .organize-teaser h3 { margin:.25rem 0 0; font-size:1.05rem; color:var(--ink); }
.dash2 .organize-teaser-sub { margin:0; font-size:.85rem; color:var(--muted); }
.dash2 .organize-teaser-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; text-align:left; }
.dash2 .organize-teaser-list li { font-size:.83rem; color:var(--ink); line-height:1.5; padding-left:1.1rem; position:relative; }
.dash2 .organize-teaser-list li::before { content:"✓"; position:absolute; left:0; color:var(--forest); font-weight:700; }
.dash2 .organize-teaser .empty-cta { margin-top:.5rem; }

/* ---------- Organize panel ---------- */
.dash2 .tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.25rem; }
.dash2 .tcard { background:#fff; border:1px solid var(--border); border-radius:13px; padding:1.1rem 1.2rem; }
.dash2 .tcard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.25rem; }
.dash2 .tcard-name { font-weight:700; font-size:.95rem; color:var(--ink); text-decoration:none; }
.dash2 .tcard-name:hover { color:var(--forest); }
.dash2 .tcard-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.75rem; }
.dash2 .tcard-pill { font-family:var(--font-mono); font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:.2rem .55rem; flex-shrink:0; white-space:nowrap; }
.dash2 .tcard-pill.live { background:var(--ball-soft); color:var(--forest); }
.dash2 .tcard-pill.open { background:rgba(44,122,63,.13); color:var(--win); }
.dash2 .tcard-pill.draft, .dash2 .tcard-pill.done, .dash2 .tcard-pill.cancelled { background:rgba(20,22,19,.08); color:var(--muted); }
.dash2 .tcard-progress { height:4px; border-radius:999px; background:rgba(20,22,19,.08); overflow:hidden; margin-bottom:.3rem; }
.dash2 .tcard-progress-fill { height:100%; background:var(--forest); }
.dash2 .tcard-progress-label { font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-bottom:.85rem; }
.dash2 .tcard-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.dash2 .tcard-action { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--border); border-radius:999px; padding:.35rem .7rem; color:var(--ink); text-decoration:none; }
.dash2 .tcard-action:hover { background:var(--cream); }
.dash2 .tcard-cta { border:1px dashed var(--border); border-radius:13px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; justify-content:center; gap:.35rem; }
.dash2 .tcard-cta h4 { margin:0; font-size:.95rem; }
.dash2 .tcard-cta p { margin:0; font-size:.8rem; color:var(--muted); }
.dash2 .tcard-cta a { align-self:flex-start; background:var(--ink); color:var(--cream); font-size:.78rem; font-weight:700; border-radius:999px; padding:.5rem 1rem; text-decoration:none; margin-top:.35rem; }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
    .dash2 .grid { grid-template-columns:1fr; }
    .dash2 .grid .card { max-height:none; }
    .dash2 .stats { grid-template-columns:repeat(2,1fr); }
    .dash2 .actionbar { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .dash2 .top { grid-template-columns:1fr; align-items:flex-start; gap:.75rem; }
    .dash2 .top-right { flex-wrap:wrap; }
    .dash2 .quick { grid-template-columns:auto 1fr 1fr; }
    .dash2 .stats { grid-template-columns:1fr; }
}