/* Parlay Party -- shared chrome for the admin panel, the player page and the
   password screen. GameDay palette, dark, thumb-friendly. */

:root {
  --red:#d50a0a; --gold:#ffd200; --ink:#0d1016; --panel:#171b24; --panel2:#1f2531;
  --line:#2c3440; --text:#eef1f6; --muted:#8b95a6; --green:#23d18b;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body {
  font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background:var(--ink); color:var(--text);
  padding:0 0 calc(4rem + env(safe-area-inset-bottom));
}

/* -------------------------------------------------------------- header */
header {
  background:linear-gradient(100deg,#8f0505,var(--red)); padding:14px 18px;
  border-bottom:3px solid var(--gold); position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
header h1 { font-size:20px; letter-spacing:-.01em; text-transform:uppercase; }
header a { color:#fff; opacity:.9; font-size:13px; text-decoration:none;
           border-bottom:1px solid rgba(255,255,255,.4); }
header .spacer { margin-left:auto; }

/* ------------------------------------------------------------ layout */
.wrap { max-width:1000px; margin:0 auto; padding:18px; }
section { background:var(--panel); border:1px solid var(--line); border-radius:8px;
          padding:16px; margin-bottom:16px; }
h2 { font-size:13px; letter-spacing:.14em; text-transform:uppercase;
     color:var(--gold); margin-bottom:12px; }

/* ------------------------------------------------------------ controls */
label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
        color:var(--muted); margin-bottom:3px; }
input, select, textarea, button {
  font:inherit; background:var(--ink); color:var(--text);
  border:1px solid var(--line); border-radius:5px; padding:8px 9px; width:100%;
}
input:focus, select:focus { outline:2px solid var(--gold); outline-offset:-1px; }
button { cursor:pointer; background:var(--panel2); font-weight:600; width:auto; }
button:hover { border-color:var(--gold); }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--green); color:#05231a; border-color:transparent; }
button.danger { background:#3a1414; border-color:#5a2020; color:#ff9d9d; }
button.gold { background:var(--gold); color:#231a00; border-color:transparent; }
button.ghost { background:transparent; color:var(--muted); border-color:var(--line); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.row > div { flex:1; min-width:110px; }
.btns { display:flex; gap:8px; flex-wrap:wrap; }

/* ------------------------------------------------------------ messages */
.note { font-size:13px; color:var(--muted); margin-top:8px; }
.muted { color:var(--muted); font-size:13px; }
.warn { background:#3a2d0e; border:1px solid #6b5416; color:#ffd98a;
        padding:10px 12px; border-radius:6px; font-size:13px; margin-bottom:12px; }
.err  { background:#3a1414; border:1px solid #6b1f1f; color:#ff9d9d;
        padding:10px 12px; border-radius:6px; font-size:13px; margin-bottom:12px; }
.ok   { background:#0f3325; border:1px solid #1d6b48; color:#7dffc4;
        padding:10px 12px; border-radius:6px; font-size:13px; margin-bottom:12px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line);
        border-top-color:var(--gold); border-radius:50%;
        animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg) } }

/* ------------------------------------------------------- slip dropzone */
.drop {
  border:2px dashed var(--line); border-radius:8px; padding:26px; text-align:center;
  color:var(--muted); cursor:pointer; transition:.2s; background:var(--ink);
}
.drop:hover, .drop.over { border-color:var(--gold); color:var(--text); background:#1b1f28; }
.drop b { color:var(--gold); }
#preview { max-width:100%; max-height:260px; border-radius:6px; margin-top:12px;
           display:none; border:1px solid var(--line); }

/* ------------------------------------------------------------ leg editor */
.legs { display:grid; gap:8px; }
.legcard { background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:10px; }
.legcard .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.legcard .full { grid-column:1/-1; }

/* ------------------------------------------------------------- wagers */
.parlay { border:1px solid var(--line); border-radius:6px; margin-bottom:10px; overflow:hidden; }
.parlay-head { display:flex; align-items:center; gap:10px; padding:9px 12px;
               background:var(--panel2); flex-wrap:wrap; }
.parlay-head b { font-size:15px; }
.parlay-legs { padding:6px 12px 10px; }
.pleg { display:flex; gap:8px; align-items:center; padding:6px 0;
        border-top:1px solid var(--line); flex-wrap:wrap; }
.pleg:first-child { border-top:0; }
.pleg .t { flex:1; min-width:160px; font-size:14px; }
.pleg .n { font-size:12px; color:var(--muted); width:100%; }
.pleg select { width:auto; padding:4px 6px; font-size:12px; }
.s-hit { color:var(--green); } .s-miss { color:#ff6b6b; } .s-pending { color:var(--gold); }

.tag { font-size:10px; letter-spacing:.1em; text-transform:uppercase;
       padding:2px 7px; border-radius:3px; font-weight:700; }
.tag.live { background:var(--gold); color:#231a00; }
.tag.won  { background:var(--green); color:#05231a; }
.tag.lost { background:var(--red); color:#fff; }
.tag.void { background:var(--line); color:var(--muted); }
.tag.retired { background:var(--line); color:var(--muted); }

.pid { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
       font-weight:700; background:#0b1220; border:1px solid var(--line);
       color:var(--gold); padding:2px 7px; border-radius:4px; }
.legid { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
         color:var(--muted); background:var(--ink); border:1px solid var(--line);
         padding:1px 4px; border-radius:3px; flex:none; }

/* ------------------------------------------------------------- filters */
.filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.filters button {
  font-size:13px; padding:5px 12px; border-radius:999px; width:auto;
  background:var(--ink); color:var(--muted); border:1px solid var(--line);
}
.filters button:hover { color:var(--text); }
.filters button.on { background:var(--gold); color:#231a00; border-color:transparent; font-weight:700; }
.filters button .n { opacity:.65; margin-left:5px; font-variant-numeric:tabular-nums; }
.filters button.on .n { opacity:.75; }