/* PadelHub — Padel to the Metal */
:root, [data-theme="dark"] {
  --bg: linear-gradient(180deg, #081729 0%, #0B1F3A 40%, #0d2647 100%);
  --text:#e8f1fb; --text-soft:#bcd6f2; --text-dim:#9db8d6; --text-muted:#7d97b8; --text-faint:#5f7ba0;
  --card:rgba(22,55,95,.45); --panel2:#0d2647; --chip:#12335c;
  --border:#1d4270; --border-soft:#16375f; --border2:#2a4f7e;
  --accent:#D7F542; --accent-text:#D7F542; --on-accent:#0B1F3A;
  --accent-soft:rgba(215,245,66,.15); --accent-soft-b:rgba(215,245,66,.4); --accent-faint:rgba(215,245,66,.08);
  --red-soft:rgba(255,120,80,.12); --red-soft-b:rgba(255,120,80,.45); --red-text:#ffb49e;
  --amber-soft:rgba(255,200,80,.12); --amber-soft-b:rgba(255,200,80,.35); --amber-text:#ffd88a;
  --blue-soft:rgba(120,180,255,.12); --blue-soft-b:rgba(120,180,255,.35); --blue-text:#a8ccff;
  --green-text:#8fd6a8; --blue:#1668C7; --overlay:rgba(11,31,58,.8);
}
[data-theme="light"] {
  --bg: linear-gradient(180deg, #f4f8fc 0%, #ecf1f8 40%, #e4ebf4 100%);
  --text:#14263e; --text-soft:#2c4262; --text-dim:#41597a; --text-muted:#5d7694; --text-faint:#7f94ad;
  --card:rgba(255,255,255,.82); --panel2:#ffffff; --chip:#e3ebf5;
  --border:#c9d6e6; --border-soft:#d8e2ee; --border2:#b3c5da;
  --accent:#D7F542; --accent-text:#55700c; --on-accent:#0B1F3A;
  --accent-soft:rgba(150,190,0,.14); --accent-soft-b:rgba(120,160,0,.45); --accent-faint:rgba(150,190,0,.1);
  --red-soft:rgba(200,60,20,.08); --red-soft-b:rgba(200,60,20,.4); --red-text:#b34a2e;
  --amber-soft:rgba(200,150,20,.12); --amber-soft-b:rgba(200,150,20,.4); --amber-text:#8a6a1a;
  --blue-soft:rgba(20,90,200,.1); --blue-soft-b:rgba(20,90,200,.35); --blue-text:#2b5fa8;
  --green-text:#1e7d43; --blue:#1668C7; --overlay:rgba(255,255,255,.88);
}

* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg); background-attachment:fixed; color:var(--text);
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif; font-size:15px; }
a { color: var(--accent-text); }
h1,h2 { margin:0; }
.wrap { max-width:860px; margin:0 auto; padding:0 16px; }
.center { display:flex; align-items:center; justify-content:center; min-height:60vh; }
.dim { color:var(--text-dim); } .muted { color:var(--text-muted); } .faint { color:var(--text-faint); } .soft{color:var(--text-soft);}
.small { font-size:13px; } .tiny { font-size:12px; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--text-muted); margin-bottom:4px; }
.title { font-size:28px; font-weight:800; letter-spacing:-.5px; }
.title .lime { color:var(--accent-text); }
.sectionTitle { font-size:15px; text-transform:uppercase; letter-spacing:2px; color:var(--accent-text); margin:26px 0 14px; }
.sectionTitle:first-child { margin-top:0; }

header.top { display:flex; justify-content:space-between; align-items:center; padding:22px 0 10px; gap:10px; }
.hdrBtns { display:flex; align-items:center; gap:8px; }
nav.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border-soft); overflow-x:auto; }
.tabBtn { background:transparent; border:none; color:var(--text-dim); padding:10px 14px; font-size:14px; cursor:pointer;
  border-bottom:2px solid transparent; font-family:inherit; white-space:nowrap; }
.tabBtn:hover { color:var(--text); }
.tabBtn.active { color:var(--accent-text); border-bottom-color:var(--accent-text); font-weight:700; }
main { padding:20px 0 70px; }

.card { background:var(--card); border:1px solid var(--border); border-radius:14px; backdrop-filter:blur(4px); }
.card.pad { padding:14px; }
.hero { padding:18px; border-color:var(--accent-soft-b); }
.grid { display:grid; gap:10px; }
.g2 { grid-template-columns:repeat(2,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g4 { grid-template-columns:repeat(4,1fr); }
.row { display:flex; align-items:center; gap:10px; } .rowWrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flex1 { flex:1; min-width:0; }

button, .btn { font-family:inherit; }
.ghostBtn { background:transparent; border:1px solid var(--border2); color:var(--text-dim); border-radius:8px;
  padding:7px 12px; cursor:pointer; font-size:13px; text-decoration:none; display:inline-block; }
.ghostBtn:hover { border-color:var(--accent-text); color:var(--accent-text); }
.limeBtn { background:var(--accent); border:none; color:var(--on-accent); border-radius:8px; padding:9px 16px;
  cursor:pointer; font-weight:700; font-size:14px; }
.limeBtn:hover { filter:brightness(1.06); }
.waBtn { display:inline-block; background:#25D366; color:#06301b; border-radius:8px; padding:8px 14px;
  font-weight:700; font-size:13px; text-decoration:none; }
.attBtn { background:var(--panel2); border:1px solid var(--border2); color:var(--text-dim); border-radius:8px;
  padding:8px 12px; cursor:pointer; font-size:13px; }
.attBtn:hover { border-color:var(--accent-text); }
.attBtn.on { background:var(--accent-soft); border-color:var(--accent-text); color:var(--accent-text); font-weight:700; }
.attBtn.onRed { background:var(--red-soft); border-color:var(--red-soft-b); color:var(--red-text); font-weight:700; }

.inp, select.inp { background:var(--panel2); border:1px solid var(--border2); color:var(--text); border-radius:8px;
  padding:9px 12px; font-size:14px; width:100%; font-family:inherit; }
.inp:focus { outline:2px solid var(--accent-text); outline-offset:1px; }
.inpBare { background:transparent; border:none; color:var(--text); font-size:14px; width:100%; padding:4px; font-family:inherit; }
.inpBare:focus { outline:1px solid var(--accent-text); border-radius:4px; }
.inpBare:disabled { color:var(--text); opacity:1; }
label.lbl { display:grid; gap:6px; font-size:13px; color:var(--text-dim); }

.pill { font-size:12px; padding:4px 10px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.pWin { background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent-soft-b); }
.pLoss { background:var(--red-soft); color:var(--red-text); border-color:var(--red-soft-b); }
.pMaybe { background:var(--amber-soft); color:var(--amber-text); border-color:var(--amber-soft-b); }
.pRes { background:var(--blue-soft); color:var(--blue-text); border-color:var(--blue-soft-b); }
.pIdle { background:var(--chip); color:var(--text-muted); border-color:var(--border); }

.avatar { border-radius:50%; object-fit:cover; border:2px solid var(--accent-text); flex-shrink:0; display:block; }
.avatarTxt { border-radius:50%; background:var(--blue); color:#fff; display:inline-flex; align-items:center;
  justify-content:center; font-weight:700; flex-shrink:0; }
.gAvatar { width:28px; height:28px; border-radius:50%; background:var(--text-muted); color:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; }
.roleTag { background:var(--accent); color:var(--on-accent); font-size:10px; font-weight:800; border-radius:4px; padding:2px 5px; margin-left:6px; vertical-align:middle; }

.matchHead { display:flex; align-items:center; gap:14px; width:100%; padding:14px; background:transparent; border:none;
  color:inherit; cursor:pointer; font-size:14px; text-align:left; }
.dateBlock { background:var(--accent); color:var(--on-accent); border-radius:10px; width:54px; padding:8px 0; text-align:center; flex-shrink:0; }
.dateBlock .d { font-size:26px; font-weight:800; line-height:1; }
.dateBlock .m { font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.warn { margin:0 16px 12px; padding:8px 12px; background:var(--red-soft); border:1px solid var(--red-soft-b);
  border-radius:8px; font-size:13px; color:var(--red-text); }
.matchBody { padding:4px 16px 16px; border-top:1px solid var(--border-soft); }
.subLbl { margin:16px 0 6px; font-size:13px; color:var(--text-dim); }

.statBox { padding:14px 8px; text-align:center; }
.statBox .v { font-size:24px; font-weight:800; } .statBox .v.lime { color:var(--accent-text); }
.statBox .l { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.progress { background:var(--panel2); border-radius:999px; height:8px; }
.progress > div { background:var(--accent); height:8px; border-radius:999px; transition:width .3s; }

.standGrid { display:grid; grid-template-columns:24px 1fr 60px 60px 32px; gap:8px; padding:6px 8px; align-items:center; }
.standGrid.head { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.standGrid.us { background:var(--accent-faint); border-radius:8px; }
.rankGrid { display:grid; grid-template-columns:22px 1.6fr repeat(6,52px); gap:6px; padding:7px 4px; align-items:center; font-size:14px; min-width:480px; }
.rankGrid.head { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.scrollX { overflow-x:auto; }

.chatBox { display:grid; gap:8px; max-height:280px; overflow-y:auto; }
.bubble { background:var(--panel2); border-radius:4px 12px 12px 12px; padding:7px 11px; font-size:14px; flex:1; }
.bubble b { color:var(--accent-text); font-size:12px; }
.photoTile { position:relative; }
.photoTile img { width:110px; height:110px; object-fit:cover; border-radius:10px; border:1px solid var(--border); display:block; }
.photoDel { position:absolute; top:4px; right:4px; background:var(--overlay); border:none; color:var(--red-text);
  border-radius:50%; width:24px; height:24px; cursor:pointer; font-size:12px; }
.uploadTile { cursor:pointer; width:110px; height:110px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px dashed var(--border2); color:var(--text-dim); font-size:13px; }
.uploadTile:hover { border-color:var(--accent-text); color:var(--accent-text); }

.loginBox { max-width:460px; margin:0 auto; padding:56px 20px; }
.err { color:var(--red-text); font-size:13px; margin-top:8px; }
input[type="file"].hidden { display:none; }
@media (max-width:560px){ .g4 { grid-template-columns:repeat(2,1fr); } }

/* ---------- Mobiele optimalisatie ---------- */
html { -webkit-text-size-adjust: 100%; }
nav.tabs { scrollbar-width: none; }
nav.tabs::-webkit-scrollbar { display: none; }

@media (max-width: 640px) {
  .wrap { padding: 0 12px; }
  header.top { flex-wrap: wrap; gap: 8px; padding: 16px 0 8px; }
  header.top > div:first-child { width: 100%; }        /* titel op eigen regel */
  .hdrBtns { margin-left: auto; gap: 6px; }             /* knoppen netjes rechts eronder */
  .title { font-size: 24px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  .sectionTitle { font-size: 13.5px; letter-spacing: 1.5px; }
  .ghostBtn { padding: 6px 10px; font-size: 12.5px; }
  .tabBtn { padding: 9px 11px; font-size: 13.5px; }
  .hero { padding: 14px; }
  .card.pad { padding: 12px; }
  .matchHead { padding: 12px 10px; gap: 10px; }
  .dateBlock { width: 46px; }
  .dateBlock .d { font-size: 22px; }
  .matchBody { padding: 4px 12px 14px; }
  .warn { margin: 0 12px 12px; }
  .pill { font-size: 11px; padding: 3px 8px; }
  .attBtn { padding: 7px 10px; font-size: 12.5px; }
  .statBox .v { font-size: 20px; }
  .statBox { padding: 12px 6px; }
  .limeBtn { padding: 9px 14px; font-size: 13.5px; }
  .hero .limeBtn { width: 100%; margin-left: 0 !important; margin-top: 6px; }
  .cdNum { font-size: 30px !important; }
  .bubble { font-size: 13.5px; }
  .loginBox { padding: 36px 16px; }
  .lgFull { display: none; }                            /* "Uitloggen" wordt icoon */
}
@media (min-width: 641px) { .lgIcon { display: none; } }
@media (max-width: 380px) { .g2 { grid-template-columns: 1fr; } }