/* ============================================================
   CSM-VSK coach app — mobile-first, thumb-first.
   Same Modernist ink as the parked site: flat, 0 radius, 2px rules.
   ============================================================ */

:root {
  --blue: #1f4491;
  --blue-100: #eaf0fb;
  --blue-200: #cddcf5;
  --blue-300: #9fbaea;
  --blue-600: #173570;
  --blue-700: #12294f;
  --navy: #0b1a38;
  --red: #d51f30;
  --red-600: #b3121f;
  --green: #1a7a4c;
  --green-100: #e6f4ec;
  --amber: #9a6b00;
  --amber-100: #fdf3d7;
  --ink: #201e1d;
  --ink-500: #605d5d;
  --ink-400: #7d7979;
  --ink-300: #9b9797;
  --rule: #d7d3d3;
  --ground: #f3f2f2;
  --white: #fff;
  --nav-h: 62px;
}

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
a { color: var(--blue); text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy); color: #fff; border-bottom: 3px solid var(--blue);
  padding-top: env(safe-area-inset-top);
}
.top-in {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.top-brand { display: flex; align-items: center; gap: 10px; color: #fff; min-width: 0; }
.top-brand img { width: 34px; height: 34px; object-fit: contain; background: #fff; padding: 2px; flex: 0 0 auto; }
.top-title { font-weight: 800; font-size: 14px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-300); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-right a { color: var(--blue-200); font-size: 12px; font-weight: 700; padding: 6px 4px; }
.top-lang {
  display: flex; border: 1px solid var(--blue-300);
}
.top-lang a { padding: 4px 8px; font-size: 11px; font-weight: 800; color: var(--blue-200); }
.top-lang a.is-on { background: var(--blue); color: #fff; }

/* ---------- bottom nav ---------- */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--white); border-top: 2px solid var(--ink);
  display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}
.bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--ink-400); font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.bnav a svg { width: 22px; height: 22px; stroke-width: 2; }
.bnav a.is-on { color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }

/* ---------- layout ---------- */
.main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; }
.page-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-h h1 { font-size: 24px; margin: 6px 0; text-transform: uppercase; }
.lead { color: var(--ink-500); font-size: 13px; margin: 0 0 18px; max-width: 70ch; }
.card { background: var(--white); border: 1px solid var(--rule); padding: 16px; margin-bottom: 16px; }
.card > h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.card > h2 .muted { font-weight: 600; color: var(--ink-400); text-transform: none; letter-spacing: 0; font-size: 12px; }
.muted { color: var(--ink-400); font-size: 13px; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-400); font-size: 14px; background: var(--white); border: 1px dashed var(--rule); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 12px 18px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  border: 0; font-family: inherit; background: var(--blue); color: #fff; text-align: center;
}
.btn:active { background: var(--blue-600); }
.btn-red { background: var(--red); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-sm { padding: 8px 12px; font-size: 11px; }
.btn-block { display: block; width: 100%; }

/* ---------- forms ---------- */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.field { display: grid; gap: 5px; }
.field > label, .lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-400);
}
.field .hint { font-size: 11px; color: var(--ink-300); font-weight: 500; letter-spacing: 0; text-transform: none; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], select, textarea {
  border: 1px solid var(--ink); background: var(--white); padding: 12px;
  font-family: inherit; font-size: 16px; border-radius: 0; color: var(--ink); width: 100%;
}
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.check input { width: 20px; height: 20px; accent-color: var(--blue); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

/* ---------- flash ---------- */
.flash { padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px; border: 1px solid; }
.flash-ok { background: var(--green-100); border-color: var(--green); color: var(--green); }
.flash-err { background: #fdeaea; border-color: var(--red); color: var(--red-600); }

/* ---------- pills ---------- */
.pill { display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pill-blue { background: var(--blue-100); color: var(--blue-700); }
.pill-green { background: var(--green-100); color: var(--green); }
.pill-amber { background: var(--amber-100); color: var(--amber); }
.pill-grey { background: var(--ground); color: var(--ink-500); border: 1px solid var(--rule); }
.pill-solid { background: var(--blue); color: #fff; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--navy); }
.login-box { width: 100%; max-width: 380px; background: var(--white); border-top: 6px solid var(--blue); padding: 32px 28px; }
.login-box img { width: 56px; height: 56px; object-fit: contain; }
.login-box h1 { font-size: 20px; margin: 16px 0 4px; text-transform: uppercase; }
.login-box .sub { font-size: 12px; color: var(--ink-400); margin: 0 0 22px; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.today-slot {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.today-slot:last-child { border-bottom: 0; }
.slot-name { font-size: 14px; font-weight: 800; flex: 1 1 auto; }
.slot-state { font-size: 12px; color: var(--ink-400); text-align: right; }
.slot-state b { color: var(--green); font-size: 15px; }
.match-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.match-teams { font-size: 15px; font-weight: 800; }
.match-score { font-size: 20px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.match-meta { font-size: 12px; color: var(--ink-400); width: 100%; }

/* ============================================================
   ATTENDANCE
   ============================================================ */
.slot-tabs { display: flex; margin-bottom: 14px; }
.slot-tabs a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px;
  text-align: center; padding: 11px 6px; border: 1px solid var(--ink); margin-left: -1px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--white); color: var(--ink);
}
.slot-tabs a:first-child { margin-left: 0; }
.slot-tabs a.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }

.date-row { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.date-row input[type=date] { flex: 1 1 auto; }
.date-row .btn { flex: 0 0 auto; }

.att-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.att-row:last-child { border-bottom: 0; }
.att-name { flex: 1 1 auto; font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-seg { display: flex; flex: 0 0 auto; }
.att-seg label { position: relative; }
.att-seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.att-seg span {
  display: flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 44px; padding: 9px 8px; border: 1px solid var(--ink); margin-left: -1px;
  font-size: 12px; font-weight: 800; background: var(--white); color: var(--ink-400);
}
.att-seg label:first-child span { margin-left: 0; }
.att-seg input:checked + span { color: #fff; }
.att-seg .s-present input:checked + span { background: var(--green); border-color: var(--green); }
.att-seg .s-absent  input:checked + span { background: var(--red); border-color: var(--red); }
.att-seg .s-excused input:checked + span { background: var(--amber); border-color: var(--amber); }
.att-seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.quick-row { display: flex; gap: 8px; margin: 0 0 12px; }

.recent-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.recent-row:last-child { border-bottom: 0; }
.recent-when { flex: 1 1 auto; min-width: 0; }
.recent-date { font-size: 14px; font-weight: 800; }
.recent-slot { font-size: 11px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .06em; }
.recent-counts { font-size: 12px; color: var(--ink-500); text-align: right; white-space: nowrap; }

/* ============================================================
   EVALUATION
   ============================================================ */
.ev-row { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ev-row:last-child { border-bottom: 0; }
.ev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ev-name { font-size: 14px; font-weight: 800; flex: 1 1 auto; }
.ev-grade { width: 74px; flex: 0 0 auto; }
.ev-grade input { text-align: center; font-weight: 800; font-size: 18px; padding: 8px; }
.ev-note input { font-size: 16px; padding: 9px 10px; }
.grade-chip { font-size: 16px; font-weight: 800; color: var(--blue); }

/* ============================================================
   MATCHES / REPORT / SUMMARY
   ============================================================ */
.m-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.m-row:last-child { border-bottom: 0; }
.m-when { flex: 0 0 auto; min-width: 84px; }
.m-date { font-size: 14px; font-weight: 800; }
.m-time { font-size: 11px; color: var(--ink-400); }
.m-mid { flex: 1 1 200px; min-width: 0; }
.m-teams { font-size: 14px; font-weight: 700; }
.m-comp { font-size: 11px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .06em; }
.m-score { font-size: 18px; font-weight: 800; white-space: nowrap; }
.m-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }

.score-grid { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.score-tbl { border-collapse: collapse; min-width: 480px; width: 100%; }
.score-tbl th, .score-tbl td { border: 1px solid var(--rule); padding: 6px; text-align: center; }
.score-tbl thead th {
  background: var(--navy); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 9px 6px;
}
.score-tbl th.side { text-align: left; background: var(--white); color: var(--ink); font-size: 12px; font-weight: 800; min-width: 120px; letter-spacing: 0; text-transform: none; }
.score-tbl input { width: 52px; text-align: center; padding: 9px 2px; font-size: 16px; font-weight: 700; border: 1px solid var(--rule); }
.score-tbl .final-col { background: var(--blue-100); }
.score-tbl .final-col input { font-weight: 800; color: var(--blue); }

.report-grid { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.report-tbl { border-collapse: collapse; width: 100%; min-width: 760px; background: var(--white); }
.report-tbl thead th {
  background: var(--blue); color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 9px 4px; text-align: center;
  position: sticky; top: 0; z-index: 2;
}
.report-tbl thead th.player-col { text-align: left; min-width: 160px; }
.report-tbl td { border-bottom: 1px solid var(--rule); padding: 4px; text-align: center; }
.report-tbl td.player-col { text-align: left; font-size: 13px; font-weight: 700; }
.report-tbl tbody tr.is-playing { background: #f7faff; }
.report-tbl input[type=number], .report-tbl input[type=text] {
  width: 48px; text-align: center; padding: 8px 2px; font-size: 16px; font-weight: 700;
  border: 1px solid var(--rule);
}
.report-tbl .total-col { font-size: 15px; font-weight: 800; color: var(--blue); min-width: 36px; }
.report-tbl .divider { border-left: 2px solid var(--rule); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-500); margin-top: 12px; }
.legend b { color: var(--ink); }

.sticky-save {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 5;
  background: var(--white); border-top: 2px solid var(--ink);
  padding: 12px 16px; margin: 16px -16px -16px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap;
}
.sticky-save .totals { margin-left: auto; font-size: 12px; color: var(--ink-500); }
.sticky-save .totals b { font-size: 15px; color: var(--blue); }

/* summary */
.sum-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sum-score { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.sum-badge { padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.sum-badge.win { background: var(--green); }
.sum-badge.loss { background: var(--red); }
.sum-badge.draw { background: var(--ink-400); }
.sum-meta { width: 100%; font-size: 13px; color: var(--ink-500); }
.qtable { border-collapse: collapse; width: 100%; max-width: 460px; }
.qtable th, .qtable td { border: 1px solid var(--rule); padding: 7px 6px; text-align: center; font-size: 13px; }
.qtable thead th { background: var(--navy); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.qtable td.side { text-align: left; font-weight: 800; font-size: 12px; }
.qtable td.fin { background: var(--blue-100); font-weight: 800; color: var(--blue); }
.scorer-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.scorer-row:last-child { border-bottom: 0; }
.scorer-row .n { flex: 1 1 auto; font-size: 14px; font-weight: 700; }
.scorer-row .g { font-size: 16px; font-weight: 800; color: var(--blue); }
.scorer-row .x { font-size: 11px; color: var(--ink-400); }

/* ============================================================
   PLAYERS
   ============================================================ */
.p-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.p-row:last-child { border-bottom: 0; }
.p-row img { width: 42px; height: 54px; object-fit: cover; background: var(--blue-700); flex: 0 0 auto; }
.p-info { flex: 1 1 auto; min-width: 0; }
.p-name { font-size: 14px; font-weight: 800; }
.p-meta { font-size: 11px; color: var(--ink-400); }
.p-side { text-align: right; font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.p-side b { color: var(--blue); font-size: 15px; }

/* profile */
.prof-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.prof-head img { width: 92px; height: 120px; object-fit: cover; background: var(--blue-700); flex: 0 0 auto; }
.prof-head h1 { font-size: 22px; margin: 0 0 6px; text-transform: uppercase; line-height: 1; }
.prof-vitals { font-size: 12px; color: var(--ink-500); display: grid; gap: 3px; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.stat-tile { background: var(--white); border: 1px solid var(--rule); padding: 12px 10px; }
.stat-tile .v { font-size: 24px; font-weight: 800; color: var(--blue); letter-spacing: -.02em; }
.stat-tile .l { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin-top: 2px; }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 56px; margin: 10px 0 4px; }
.bars .bar { flex: 1; background: var(--blue-200); position: relative; min-height: 3px; }
.bars .bar i { position: absolute; left: 0; right: 0; bottom: 100%; text-align: center; font-size: 9px; font-style: normal; color: var(--ink-400); padding-bottom: 1px; }
.att-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.att-dot { width: 22px; height: 22px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; }
.att-dot.d-present { background: var(--green); }
.att-dot.d-absent { background: var(--red); }
.att-dot.d-excused { background: var(--amber); }
.ev-list-row { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ev-list-row:last-child { border-bottom: 0; }
.ev-list-head { display: flex; gap: 10px; align-items: baseline; }
.ev-list-when { font-size: 12px; color: var(--ink-400); flex: 1 1 auto; }
.ev-list-note { font-size: 13px; color: var(--ink-500); margin-top: 2px; }

/* tables (season stats) */
.tbl { width: 100%; border-collapse: collapse; background: var(--white); }
.tbl thead tr { background: var(--blue); color: #fff; }
.tbl th { text-align: left; padding: 9px 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.tbl .num { text-align: right; }

/* more menu */
.menu-row {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: var(--white); border: 1px solid var(--rule); margin-bottom: 8px;
  color: var(--ink); font-size: 14px; font-weight: 700;
}
.menu-row svg { width: 20px; height: 20px; color: var(--blue); }
.menu-row .arr { margin-left: auto; color: var(--ink-300); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .bnav {
    position: sticky; top: 57px; bottom: auto; height: auto; z-index: 19;
    border-top: 0; border-bottom: 2px solid var(--ink);
    justify-content: flex-start; padding: 0 max(16px, calc((100% - 1100px) / 2 + 16px));
  }
  .bnav a { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 13px 16px; font-size: 12px; }
  .bnav a.is-on { box-shadow: inset 0 -3px 0 var(--blue); }
  .main { padding: 28px 16px 60px; }
  .page-h h1 { font-size: 30px; }
  .card { padding: 22px; }
  .score-grid, .report-grid { margin: 0; padding: 0; }
  .sticky-save { bottom: 0; margin: 20px -22px -22px; padding: 14px 22px; }
  .stat-tiles { max-width: 560px; }
  .grid-form-max { max-width: 720px; }
}