/* ============================================================
   frontend.css – FIFA WC 2026 – Family Betting Overview
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --bg:           #0f1117;
    --bg-surface:   #1a1d27;
    --bg-hover:     #22263a;
    --border:       #2e3347;
    --text:         #e2e6f0;
    --text-muted:   #7a829a;
    --text-faint:   #4a5068;
    --accent:       #3b82f6;
    --success:      #22c55e;
    --warning:      #f59e0b;
    --danger:       #ef4444;
    --radius:       6px;
    --font:         'Segoe UI', system-ui, sans-serif;
    --font-mono:    'Consolas', 'SF Mono', monospace;

    /* bet result colours */
    --exact:        #16a34a;   /* green – exact score */
    --exact-bg:     rgba(22, 163, 74, 0.18);
    --correct:      #ca8a04;   /* amber – right outcome */
    --correct-bg:   rgba(202, 138, 4, 0.15);
    --wrong:        rgba(239, 68, 68, 0.10);
    --wrong-text:   #7a829a;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family:    var(--font);
    background:     var(--bg);
    color:          var(--text);
    font-size:      14px;
    line-height:    1.5;
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
}

/* ── Site header ───────────────────────────────────────────── */
.site-header {
    background:     var(--bg-surface);
    border-bottom:  1px solid var(--border);
    padding:        16px 24px;
    position:       sticky;
    top:            0;
    z-index:        10;
}

.site-header__inner {
    display:        flex;
    align-items:    center;
    gap:            12px;
    max-width:      1800px;
    margin:         0 auto;
}

.site-header__logo  { font-size: 26px; }
.site-header__title { font-size: 18px; font-weight: 700; letter-spacing: .3px; }

/* ── Main content ──────────────────────────────────────────── */
.site-main {
    flex:       1;
    padding:    24px 16px;
    max-width:  1800px;
    margin:     0 auto;
    width:      100%;
}

/* ── Table wrapper (horizontal scroll on small screens) ───── */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    background:     var(--bg-surface);
}

/* ── Bet table ─────────────────────────────────────────────── */
.bet-table {
    width:              100%;
    border-collapse:    collapse;
    white-space:        nowrap;
}

/* -- Header row ------------------------------------------------ */
.bet-table thead tr {
    background: var(--bg);
}

.bet-table th {
    padding:            10px 14px;
    font-size:          12px;
    text-transform:     uppercase;
    letter-spacing:     .5px;
    color:              var(--text-muted);
    border-bottom:      1px solid var(--border);
    vertical-align:     bottom;
    white-space:        nowrap;
}

.bet-table th.col-match {
    text-align:     left;
    min-width:      200px;
    position:       sticky;
    left:           0;
    z-index:        2;
    background:     var(--bg);
}

.bet-table th.col-user {
    text-align:     center;
    min-width:      90px;
}

.user-inactive {
    color: var(--text-faint) !important;
}

.user-inactive-mark {
    font-size:  7px;
    color:      var(--text-faint);
    vertical-align: middle;
    margin-left: 2px;
}

/* -- Body rows ------------------------------------------------- */
.bet-table tbody tr {
    border-bottom: 1px solid var(--border);
}
.bet-table tbody tr:last-child { border-bottom: none; }
.bet-table tbody tr:hover td   { background: var(--bg-hover); }

/* -- Match info cell ------------------------------------------- */
.bet-table td.col-match {
    padding:        12px 14px;
    text-align:     left;
    vertical-align: middle;
    min-width:      200px;
    position:       sticky;
    left:           0;
    z-index:        1;
    background:     var(--bg-surface);
}

/* keep sticky cell background consistent on hover */
.bet-table tbody tr:hover td.col-match {
    background: var(--bg-hover);
}

.match-teams {
    display:    flex;
    align-items: center;
    gap:        6px;
    font-size:  14px;
    font-weight: 600;
}

.match-teams .vs {
    color:      var(--text-faint);
    font-size:  11px;
    font-weight: 400;
}

.match-result {
    margin-top: 4px;
}

.result {
    font-family:    var(--font-mono);
    font-size:      20px;
    font-weight:    700;
    color:          var(--success);
    letter-spacing: 1px;
}

.result-et {
    margin-left:    6px;
    font-size:      11px;
    color:          var(--text-muted);
}

.match-meta {
    margin-top: 5px;
    display:    flex;
    align-items: center;
    gap:        8px;
}

.match-date {
    font-size:  11px;
    color:      var(--text-muted);
}

/* -- Bet score cell -------------------------------------------- */
.bet-table td.col-bet {
    text-align:     center;
    vertical-align: middle;
    padding:        10px 10px;
}

.bet-score {
    font-family:    var(--font-mono);
    font-size:      15px;
    font-weight:    600;
}

.bet-empty,
.bet-deleted {
    color:      var(--text-faint);
    font-size:  16px;
}

/* -- Result colour classes on <td> ----------------------------- */
td.exact {
    background: var(--exact-bg);
}
td.exact .bet-score {
    color: var(--exact);
}

td.correct {
    background: var(--correct-bg);
}
td.correct .bet-score {
    color: var(--correct);
}

td.wrong {
    background: var(--wrong);
}
td.wrong .bet-score {
    color: var(--wrong-text);
}

td.no-bet {
    /* no special background */
}

/* -- Row state classes ----------------------------------------- */
.row-cancelled td.col-match .match-teams .team,
.row-cancelled td.col-match .match-teams .vs {
    opacity: 0.45;
    text-decoration: line-through;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    display:        inline-block;
    padding:        2px 7px;
    border-radius:  999px;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .3px;
    white-space:    nowrap;
}

.badge-upcoming  { background: rgba(59,130,246,.15); color: #93c5fd; }
.badge-played    { background: rgba(34,197,94,.15);  color: #86efac; }
.badge-cancelled { background: rgba(239,68,68,.15);  color: #fca5a5; }
.badge-inactive  { background: rgba(122,130,154,.15); color: var(--text-muted); }

/* ── Legend ────────────────────────────────────────────────── */
.legend {
    display:    flex;
    flex-wrap:  wrap;
    gap:        16px;
    margin-top: 16px;
    padding:    0 4px;
    font-size:  12px;
    color:      var(--text-muted);
}

.legend-item {
    display:    flex;
    align-items: center;
    gap:        6px;
}

.legend-dot {
    display:        inline-block;
    width:          12px;
    height:         12px;
    border-radius:  3px;
    flex-shrink:    0;
}

.legend-dot.exact   { background: var(--exact-bg);    border: 1px solid var(--exact); }
.legend-dot.correct { background: var(--correct-bg);  border: 1px solid var(--correct); }
.legend-dot.wrong   { background: var(--wrong);       border: 1px solid rgba(239,68,68,.3); }
.legend-dot.no-bet  { background: transparent;        border: 1px solid var(--border); }

/* ── No data message ───────────────────────────────────────── */
.no-data {
    padding:    40px;
    text-align: center;
    color:      var(--text-muted);
    font-style: italic;
}

/* ── Site footer ───────────────────────────────────────────── */
.site-footer {
    text-align:     center;
    padding:        16px 24px;
    font-size:      12px;
    color:          var(--text-faint);
    border-top:     1px solid var(--border);
    margin-top:     32px;
}


/* ============================================================
   Responsive layout – desktop table vs mobile cards
   Breakpoint: 640px
   ============================================================ */

/* -- Default: show desktop table, hide mobile cards ----------- */
.desktop-view { display: block; }
.mobile-view  { display: none;  }

@media (max-width: 900px) {
    .desktop-view { display: none;  }
    .mobile-view  { display: flex;  }
}


/* ============================================================
   Mobile card layout
   ============================================================ */

.mobile-view {
    flex-direction: column;
    gap:            10px;
}

/* -- Card container ------------------------------------------- */
.match-card {
    background:     var(--bg-surface);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    overflow:       hidden;
}

/* -- Row 1: match info ---------------------------------------- */
.card-match {
    padding:        12px 14px 10px;
    border-bottom:  1px solid var(--border);
}

.card-match .match-teams {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      15px;
    font-weight:    600;
    flex-wrap:      wrap;
}

.card-match .vs {
    color:      var(--text-faint);
    font-size:  11px;
    font-weight: 400;
}

.card-match .match-result {
    margin-top: 5px;
}

.card-match .match-meta {
    margin-top: 5px;
    display:    flex;
    align-items: center;
    gap:        8px;
}

.card-match .match-date {
    font-size:  11px;
    color:      var(--text-muted);
}

/* -- Cancelled card: strikethrough on team names -------------- */
.card-cancelled .card-match .team,
.card-cancelled .card-match .vs {
    opacity:         0.45;
    text-decoration: line-through;
}

/* -- Row 2: tips row ------------------------------------------ */
.card-tips {
    display:    flex;
    width:      100%;
}

/* -- Individual tip cell ------------------------------------- */
.tip-cell {
    flex:           1;          /* all 5 cells share the width equally */
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        8px 4px;
    gap:            3px;
    border-right:   1px solid var(--border);
}

.tip-cell:last-child {
    border-right: none;
}

.tip-name {
    font-size:   10px;
    color:       var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
}

.tip-score {
    font-family: var(--font-mono);
    font-size:   14px;
    font-weight: 700;
}

.tip-empty {
    color:       var(--text-faint);
    font-weight: 400;
}

/* -- Tip result colours (on .tip-cell) ----------------------- */
.tip-cell.exact {
    background: var(--exact-bg);
}
.tip-cell.exact .tip-score {
    color: var(--exact);
}

.tip-cell.correct {
    background: var(--correct-bg);
}
.tip-cell.correct .tip-score {
    color: var(--correct);
}

.tip-cell.wrong {
    background: var(--wrong);
}
.tip-cell.wrong .tip-score {
    color: var(--wrong-text);
}

/* -- Inactive user in mobile card ---------------------------- */
.tip-cell.user-inactive .tip-name {
    color: var(--text-faint);
}


/* ============================================================
   Pagination bar
   ============================================================ */

.pager {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            6px;
    margin-top:     24px;
    flex-wrap:      wrap;
}

.pager-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    min-width:      36px;
    height:         36px;
    padding:        0 10px;
    border-radius:  var(--radius);
    font-size:      14px;
    font-weight:    500;
    text-decoration: none;
    border:         1px solid var(--border);
    background:     var(--bg-surface);
    color:          var(--text);
    transition:     background .15s, border-color .15s, color .15s;
}

a.pager-btn:hover {
    background:     var(--bg-hover);
    border-color:   var(--accent);
    color:          var(--accent);
}

.pager-current {
    background:     var(--accent);
    border-color:   var(--accent);
    color:          #fff;
    cursor:         default;
}

.pager-disabled {
    color:          var(--text-faint);
    border-color:   var(--border);
    background:     transparent;
    cursor:         default;
}

.pager-ellipsis {
    color:          var(--text-muted);
    padding:        0 4px;
    line-height:    36px;
}