/* ═══════════════════════════════════════════════════════════
   PadelMesh SPA — Styles
   Dark theme, native-feel, zero frameworks
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg: #0a0f1a;
    --surface: #111827;
    --surface2: #1a2236;
    --surface3: #222d42;
    --border: #1e2a3e;
    --text: #e8ecf1;
    --muted: #6b7a90;
    --green: #8DC63F;
    --green-dim: rgba(141,198,63,.12);
    --orange: #f59e0b;
    --orange-dim: rgba(245,158,11,.12);
    --red: #f87171;
    --red-dim: rgba(248,113,113,.12);
    --blue: #60a5fa;
    --blue-dim: rgba(96,165,250,.12);
    --radius: 14px;
    --radius-sm: 10px;
    --header-h: 56px;
    --tab-h: 68px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --transition: .22s cubic-bezier(.4,0,.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

/* ── App shell ── */
#app-header {
    position: fixed; top:0; left:0; right:0;
    height: var(--header-h);
    background: rgba(10,15,26,.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
}
.header-inner {
    max-width: 600px; margin: 0 auto;
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
}
.header-logo {
    display: flex; align-items: center; gap: 10px;
    font-size: .95rem; font-weight: 800;
    letter-spacing: -.02em; cursor: pointer;
}
.header-logo span { color: var(--green); }

#header-user { font-size: .78rem; color: var(--muted); }
#header-user a { color: var(--green); text-decoration: none; font-weight: 600; }
#header-user .user-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface2); padding: 5px 12px 5px 8px;
    border-radius: 20px; font-weight: 600; color: var(--text);
}
#header-user .user-badge .av {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green); color: #0a0f1a;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 800;
}

#app {
    max-width: 600px; margin: 0 auto;
    padding: calc(var(--header-h) + 12px) 16px calc(var(--tab-h) + var(--safe-bottom) + 16px);
    min-height: 100vh;
}

/* ── View transitions ── */
.view-enter { animation: viewIn var(--transition) forwards; }
.view-exit  { animation: viewOut .15s forwards; }
@keyframes viewIn  { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@keyframes viewOut { to { opacity:0; transform:translateY(-4px) } }

/* ── Tab bar ── */
#tab-bar {
    position: fixed; bottom:0; left:0; right:0;
    height: calc(var(--tab-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(10,15,26,.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-around; align-items: flex-start;
    z-index: 100;
}
.tab {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 10px 12px 4px;
    color: var(--muted); text-decoration: none;
    font-size: .62rem; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase;
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.tab.active { color: var(--green); }
.tab svg { transition: transform var(--transition); }
.tab.active svg { transform: scale(1.12); }

/* ── Cards ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card:active { transform: scale(.985); }
.card.live {
    border-color: rgba(141,198,63,.3);
    box-shadow: 0 0 20px rgba(141,198,63,.06);
}
.card.next {
    border-color: rgba(245,158,11,.2);
}
.card-tap { cursor: pointer; }
.card-tap:hover { border-color: rgba(141,198,63,.2); }

/* ── Scoreboard table ── */
.stbl { width:100%; border-collapse:collapse; }
.stbl th { font-size:.6rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; padding:0 4px 8px; text-align:center; }
.stbl th:first-child { text-align:left; }
.stbl td { padding:6px 4px; text-align:center; vertical-align:middle; }
.stbl .tname { text-align:left; font-weight:600; font-size:.82rem; }
.stbl .sc-set { font-size:1rem; font-weight:700; color:var(--muted); }
.stbl .sc-set.w { color:var(--green); }
.stbl .sc-set.e { color:var(--border); }
.stbl .sc-game { font-size:1.2rem; font-weight:800; color:var(--text); }
.stbl .sc-pts { font-size:1.1rem; font-weight:800; color:var(--green); min-width:36px; }

/* ── Pills ── */
.pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:20px;
    font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.pill-live { background:var(--green-dim); color:var(--green); border:1px solid rgba(141,198,63,.25); }
.pill-next { background:var(--orange-dim); color:var(--orange); border:1px solid rgba(245,158,11,.2); }
.pill-free { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }

/* ── Stats cards ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.stat-card {
    background:var(--surface2); border-radius:var(--radius-sm);
    padding:14px 8px; text-align:center;
    border:1px solid var(--border);
}
.stat-number { font-size:1.5rem; font-weight:900; line-height:1; color:var(--green); }
.stat-label { font-size:.6rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }

/* ── Section title ── */
.section-title {
    font-size:.68rem; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:1px;
    margin: 20px 0 10px;
}
.page-title { font-size:1.2rem; font-weight:800; margin-bottom:16px; }

/* ── Avatar ── */
.avatar {
    width:34px; height:34px; border-radius:50%;
    background:var(--surface3); color:var(--green);
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:800; flex-shrink:0;
}
.avatar.lg { width:52px; height:52px; font-size:1.1rem; }

/* ── List items ── */
.list-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    margin-bottom:8px;
    transition: transform var(--transition);
}
.list-item:active { transform:scale(.985); }
.list-item .info { flex:1; min-width:0; }
.list-item .name { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item .meta { font-size:.72rem; color:var(--muted); }

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:11px 20px; border-radius:var(--radius-sm);
    font-size:.82rem; font-weight:700; border:none; cursor:pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(.96); }
.btn-primary { background:var(--green); color:#0a0f1a; }
.btn-primary:hover { background:#9dd44f; }
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
.btn-danger { background:var(--red-dim); color:var(--red); border:1px solid rgba(248,113,113,.25); }
.btn-sm { padding:7px 14px; font-size:.75rem; }
.btn-block { width:100%; }

/* ── Forms ── */
.fg { margin-bottom:14px; }
.flbl { display:block; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.finput, .fselect {
    width:100%; padding:11px 14px;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text);
    font-size:.88rem; outline:none;
    transition:border-color var(--transition);
}
.finput:focus, .fselect:focus { border-color:var(--green); }
.finput::placeholder { color:var(--muted); }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fsect { font-size:.72rem; font-weight:700; color:var(--text); margin:16px 0 8px; }
.radio-inline { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.radio-opt { font-size:.82rem; color:var(--text); display:flex; align-items:center; gap:6px; cursor:pointer; }

/* ── Tabs (login) ── */
.tab-switch { display:flex; background:var(--surface2); border-radius:var(--radius-sm); padding:3px; margin-bottom:20px; }
.tab-switch button {
    flex:1; padding:10px; border:none; background:transparent;
    color:var(--muted); font-size:.82rem; font-weight:700;
    border-radius:8px; cursor:pointer; transition:all var(--transition);
}
.tab-switch button.active { background:var(--green); color:#0a0f1a; }

/* ── Empty state ── */
.empty-state { text-align:center; padding:40px 20px; }
.empty-state .emoji { font-size:2.4rem; margin-bottom:12px; }
.empty-state .title { font-size:.95rem; font-weight:700; margin-bottom:6px; }
.empty-state .desc { font-size:.82rem; color:var(--muted); }

/* ── Toast ── */
.toast {
    position:fixed; bottom:calc(var(--tab-h) + var(--safe-bottom) + 12px);
    left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--surface2); color:var(--text);
    padding:10px 20px; border-radius:var(--radius-sm);
    font-size:.82rem; font-weight:600;
    border:1px solid var(--border);
    box-shadow:0 8px 30px rgba(0,0,0,.4);
    opacity:0; pointer-events:none;
    transition:opacity .3s, transform .3s;
    z-index:200;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Install banner ── */
.install-banner {
    position:fixed; top:calc(var(--header-h) + 8px);
    left:12px; right:12px;
    background:var(--surface2); border:1px solid var(--green);
    border-radius:var(--radius-sm);
    padding:12px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size:.84rem; font-weight:600;
    z-index:150;
    animation:slideDown .3s ease;
}
.install-banner.hidden { display:none; }
.install-banner .btn-close { background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; padding:4px; }
@keyframes slideDown { from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Skeleton loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
.skel-card { height:100px; margin-bottom:12px; border-radius:var(--radius); }
.skel-text { height:14px; margin-bottom:8px; width:60%; }
.skel-text.w100 { width:100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Autocomplete dropdown ── */
.ac-dropdown {
    position:absolute; left:0; right:0; top:100%;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm);
    max-height:180px; overflow-y:auto;
    z-index:50; display:none;
}
.ac-dropdown .ac-item {
    padding:10px 14px; cursor:pointer;
    font-size:.84rem; border-bottom:1px solid var(--border);
    transition:background var(--transition);
}
.ac-dropdown .ac-item:hover, .ac-dropdown .ac-item:active { background:var(--surface3); }

/* ── Grid ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ── Responsive ── */
@media (max-width:380px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .frow { grid-template-columns:1fr; }
}