/* Volleymate's shared look: tokens, base elements and the components both
   pages use (the app: app.css; the what-if planner: division-setup.css).
   Patterns used in several places are written once here, as grouped
   selectors — add a selector to the group rather than repeating the rule. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ---- tokens ---- */
:root{
  /* dark-first: scoreboard under lights */
  --bg:#0e1620; --surface:#16212d; --surface-2:#1c2a38; --fg:#e8edf2;
  --muted:#8ca0b3; --accent:#2fd9c4; --accent-2:#ff6b4a; --border:#233244;
  --on-accent:#071012;  /* text on an accent background, either theme */
  --font-body:'Source Sans 3', system-ui, sans-serif;
  --font-display:'Barlow Condensed', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ring:0 0 0 1px var(--accent) inset;  /* with border-color:var(--accent): selected */
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eef1ec; --surface:#ffffff; --surface-2:#e4e9e2; --fg:#15201c;
    --muted:#5b6b63; --accent:#0e8f7f; --accent-2:#d9512f; --border:#cdd6cb;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#eef1ec; --surface:#ffffff; --surface-2:#e4e9e2; --fg:#15201c;
  --muted:#5b6b63; --accent:#0e8f7f; --accent-2:#d9512f; --border:#cdd6cb;
  color-scheme:light;
}

/* ---- base ---- */
*{box-sizing:border-box;}
/* Many elements set their own display (flex rows, inline styles) with
   specificity equal to or higher than the UA [hidden] rule; this always wins. */
[hidden]{display:none !important;}
body{background:var(--bg); color:var(--fg); font-family:var(--font-body); padding-inline:16px; margin-inline:0;}
h1, h2, h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; margin:0;}
h1{font-size:30px; font-weight:700; text-wrap:balance;}
section{margin-top:28px;}
code{font-family:var(--font-mono); font-size:.9em;}
.mono{font-family:var(--font-mono);}
.muted{color:var(--muted);}
.sub{color:var(--muted); font-size:14px; margin-top:6px;}
.count-label{color:var(--muted); font-size:13px; margin-top:4px;}
.empty{color:var(--muted); font-size:13.5px; padding:6px 2px;}
.small{font-size:12.5px; margin-top:6px;}

/* ---- shared patterns ---- */
/* Small uppercase labels. */
.eyebrow, .stat .l, .pool-opt .tag, .table th, .round-label, .add-team-title, .dlg-grid .h{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.eyebrow{font-family:var(--font-display); letter-spacing:.14em; color:var(--accent); font-size:12.5px; margin:0 0 6px;}
/* Plain detail text inside a display heading. */
.pool-card h2 .meta, .pool-card .courts, .finals-block > h2 .meta, .sched-court h3 .meta,
.court-head span, .court-height-summary, .pool-editor-unassigned h4 .meta{
  font-family:var(--font-body); text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted);
}
/* Number boxes without the browser's up/down arrows. */
.no-spin, #teamCount, .dlg-grid input, .cp-count{-moz-appearance:textfield; appearance:textfield;}
:is(.no-spin, #teamCount, .dlg-grid input, .cp-count)::-webkit-inner-spin-button,
:is(.no-spin, #teamCount, .dlg-grid input, .cp-count)::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
/* What follows the pointer (dragging, hover popups). */
.drag-ghost, .div-drag-preview, .pool-editor-drop-preview, .pool-editor-drag-ghost, .cp-ghost, .game-popup{
  position:fixed; z-index:1000; pointer-events:none; margin:0;
}

/* ---- cards ---- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px;}
.card-title{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:10px;}

/* ---- buttons ---- */
.btn{
  background:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:8px;
  padding:7px 12px; font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer;
}
.btn:hover{border-color:var(--muted);}
.btn.danger{color:var(--accent-2);}
.btn:disabled{opacity:.45; cursor:default;}
a.btn{text-decoration:none; display:inline-block;}
.icon-btn{
  width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--muted); cursor:pointer;
}
.icon-btn:hover{color:var(--accent-2); border-color:var(--accent-2);}
.row-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;}

/* ---- form controls ---- */
.field-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;}
.field-row label{font-size:13.5px; color:var(--muted);}
.check-row{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-top:14px; cursor:pointer;}
.check-row input{width:16px; height:16px; accent-color:var(--accent);}
.inline-pair{display:flex; gap:8px; align-items:center;}
/* Text boxes and selects share one look; each sets only its size. */
.form-grid input, .form-grid select, .div-name, .add-team input, .court-name, .court-short,
.minutes-input, .cp-count, .cp-label-input, .app-menu-role select, .dialog-field input, .rules-select{
  background:var(--surface-2); color:var(--fg); border:1px solid var(--border); border-radius:8px;
}
:is(.form-grid input, .form-grid select, .div-name, .add-team input, .court-name, .court-short,
.minutes-input, .cp-count, .cp-label-input, .app-menu-role select, .dialog-field input):focus{outline:none; border-color:var(--accent);}
.form-grid input, .form-grid select, .div-name, .add-team input, .court-name, .court-short{padding:8px 10px; font:inherit; font-size:14.5px; min-width:0;}
.rules-select{padding:7px 10px; font-family:var(--font-body); font-size:13px; cursor:pointer; max-width:220px;}
/* Every select gets the same drawn chevron, 11px from the right. */
select.rules-select, .app-menu-role select, .form-grid select, .slot-grid select{
  -webkit-appearance:none; appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:10px 6px;
}
.minutes-input{width:90px; text-align:right; padding:7px 10px; font-size:15px; font-weight:600;}
.minutes-input:invalid, .minutes-input:invalid:focus{border-color:var(--accent-2);}
.inline-pair .minutes-input[type=time]{width:120px;}
.stepper{display:flex; align-items:center; gap:8px;}
.stepper button{
  width:28px; height:28px; border-radius:6px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--fg); cursor:pointer;
}
.stepper .val{font-family:var(--font-mono); font-weight:600; min-width:20px; text-align:center;}
.toggle2{display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.toggle2 button{
  flex:1; padding:7px 10px; background:var(--surface-2); color:var(--muted); white-space:nowrap;
  border:none; font-family:var(--font-body); font-size:13px; cursor:pointer;
}
.toggle2 button[aria-pressed="true"]{font-weight:600;}

/* ---- chips and option cards ---- */
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  font-family:var(--font-mono); font-weight:600; font-size:13px;
  background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:3px 8px; color:var(--fg);
}
.chips a.chip{text-decoration:none; color:var(--muted);}
/* buttons don't inherit the page font by default */
.format-card, .pool-opt{font:inherit; color:inherit;}
.format-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px; cursor:pointer; text-align:left;}
.format-card .f-name{font-weight:600; font-size:15px;}
.format-card .f-desc{color:var(--muted); font-size:12.5px; margin-top:4px; line-height:1.4;}
.pool-options{display:flex; flex-direction:column; gap:8px;}
.pool-opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer;
}
.pool-opt .tag{text-align:left; font-weight:400;}
.pool-opt .meta{color:var(--muted); font-size:12px; white-space:nowrap;}

/* ---- stats ---- */
.stat{text-align:center;}
.stat .n{font-family:var(--font-mono); font-weight:700; font-size:21px; font-variant-numeric:tabular-nums;}
.stat .n.accent{color:var(--accent);}
.stat .l{font-size:10.5px; font-weight:400; margin-top:2px;}

/* ---- tables ---- */
.table{width:100%; border-collapse:collapse; font-size:14px;}
.table th{text-align:left; padding:4px 6px; border-bottom:1px solid var(--border); white-space:nowrap;}
.table td{padding:6px; border-bottom:1px solid var(--border); vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table .num{text-align:right; white-space:nowrap; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.table .seed{font-family:var(--font-mono); color:var(--muted); width:2.5em;}

/* ---- dialogs ---- */
dialog{
  background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:12px;
  padding:18px; width:min(440px, calc(100vw - 32px));
}
dialog::backdrop{background:rgba(0,0,0,.55);}
.modal-dialog{width:min(360px, calc(100vw - 32px)); border-radius:10px;}
.modal-dialog h2{font-size:21px;}
.dialog-field{display:flex; flex-direction:column; gap:5px; margin-top:14px; color:var(--muted); font-size:13px; font-weight:600;}
.dialog-field input{width:100%; padding:8px 10px; font:inherit;}

/* ---- save bar ---- */
.save-bar{
  position:sticky; bottom:0; z-index:5; margin-top:20px; display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  box-shadow:0 -6px 18px rgba(0,0,0,.08);
}
.save-bar .count-label{margin:0 auto 0 0;}
.save-bar a{color:var(--accent);}

/* ---- current and selected (after the components, so these win) ---- */
/* The accent fill of whatever is current or pressed. */
.btn.primary, .toggle2 button[aria-pressed="true"], .tabs a[aria-current="page"], .app-menu a[aria-current="page"],
.chips a.chip[aria-current="page"], .chips button.chip[aria-pressed="true"]{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
/* Selected: an accent outline. */
.format-card[aria-pressed="true"], .format-card[aria-current="true"], .pool-opt[aria-pressed="true"],
.court-pick:has(input:checked), .pool-editor-team.drop-target, .pool-editor-empty.drop-target{
  border-color:var(--accent); box-shadow:var(--ring);
}