/* Technical Officials Scheduler – responsive layout for iPhone, iPad, Mac and browsers. */
:root {
  --bg: #F4F6FA; --surface: #FFFFFF; --surface2: #EEF1F6; --text: #16202C; --muted: #5D6B7C; --line: #DCE2EA;
  --brand: #14467A; --accent: #1F6FD1; --accent-ink: #FFFFFF; --danger: #C62828;
  --ok: #DDF3E3; --ok-ink: #1E6B35; --tight: #FFF1C2; --tight-ink: #7A5A00; --bad: #FFD9DD; --bad-ink: #A3141F;
  --unf: #FCE0CC; --unf-ink: #8A3B06; --loc: #DDEBF7; --loc-ink: #22507E; --meet: #EFE6F7;
  --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px);
  --left: env(safe-area-inset-left, 0px); --right: env(safe-area-inset-right, 0px);
  --tabbar: 58px; --header: 56px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F141A; --surface: #18202A; --surface2: #222C38; --text: #E7ECF2; --muted: #9AA8B8; --line: #2D3946;
    --brand: #6FA8E8; --accent: #4C94F0; --accent-ink: #FFFFFF; --danger: #FF6B6B;
    --ok: #17402A; --ok-ink: #9FE2B5; --tight: #4A3B0B; --tight-ink: #FFDD80; --bad: #4D1A20; --bad-ink: #FFB3BC;
    --unf: #4B2814; --unf-ink: #FFC69E; --loc: #1C3550; --loc-ink: #B6D5F5; --meet: #2E2440;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body { font-size: 15px; line-height: 1.4; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* ---------------------------------------------------------------- frame */
#app { display: grid; height: 100vh; height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "main" "tabs"; }
.topbar { grid-area: top; display: flex; align-items: center; gap: 10px; padding: calc(var(--top) + 8px) calc(var(--right) + 12px) 8px calc(var(--left) + 12px);
  background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; z-index: 5; }
.home { border: 0; background: none; padding: 0; width: 38px; height: 38px; border-radius: 9px; cursor: pointer; flex: none; }
.home img { width: 34px; height: 34px; border-radius: 8px; display: block; margin: 2px; }
.titles { flex: 1 1 140px; min-width: 0; }
.doc-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.auto { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 0 4px; cursor: pointer; }
.pill { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pill.ok { background: var(--ok); color: var(--ok-ink); } .pill.tight { background: var(--tight); color: var(--tight-ink); }
.pill.bad { background: var(--bad); color: var(--bad-ink); } .pill.unf { background: var(--unf); color: var(--unf-ink); }
.sidebar { grid-area: side; display: none; }
.main { grid-area: main; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 calc(var(--right) + 14px) 28px calc(var(--left) + 14px); outline: none; }
.tabbar { grid-area: tabs; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: 4px calc(var(--right) + 4px) calc(var(--bottom) + 4px) calc(var(--left) + 4px); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted);
  font-size: 11px; padding: 5px 0; min-height: 48px; cursor: pointer; border-radius: 10px; }
.tab.active { color: var(--accent); font-weight: 600; }
.subnav { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 0 -2px;
  background: linear-gradient(var(--bg) 85%, transparent); scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.empty-subnav { padding: 6px 0; }
.seg { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; min-height: 36px; }
.seg.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

@media (min-width: 960px) {
  #app { grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top" "side main"; }
  .sidebar { display: block; overflow: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 10px 10px calc(var(--bottom) + 16px) calc(var(--left) + 10px); }
  .tabbar { display: none; }
  .subnav { display: none; }
  .main { padding-top: 16px; }
}
.side-group { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 14px 8px 4px; }
.side-group:first-child { margin-top: 4px; }
.side-link { display: block; padding: 8px 10px 8px 32px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.side-link:hover { background: var(--surface2); }
.side-link.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------------------------------------------------------------- section basics */
.section { max-width: 1400px; margin: 0 auto; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.sec-head h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.01em; }
.sec-head p { margin: 0; max-width: 820px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .strong { font-weight: 700; }
.note { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: 14px; }
.note.warn { background: var(--tight); color: var(--tight-ink); } .note.bad { background: var(--bad); color: var(--bad-ink); }
.note.small { font-size: 12.5px; padding: 6px 10px; }
.empty { padding: 26px 12px; text-align: center; color: var(--muted); }
.empty.ok { color: var(--ok-ink); background: var(--ok); border-radius: 10px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.inline { display: flex; gap: 8px; align-items: flex-end; }
.inline > * { flex: 1; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2.wide-left { grid-template-columns: 1.3fr 1fr; } }
.cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 1500px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.race-card { border-top: 4px solid var(--race, var(--accent)); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; vertical-align: middle; }

/* ---------------------------------------------------------------- controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--surface2); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.small { min-height: 34px; padding: 5px 10px; font-size: 13.5px; }
.btn.tiny { min-height: 26px; padding: 2px 8px; font-size: 12px; border-radius: 7px; }
.btn.icon { min-width: 40px; padding: 8px; }
.btn.icon.small { min-width: 0; padding: 5px 9px; font-size: 12.5px; }
.danger-text { color: var(--danger); }
.btn.lock { color: var(--muted); border-color: transparent; background: transparent; }
.btn.lock { opacity: .45; }
.btn.lock.on { color: var(--accent); opacity: 1; }
.row-btns { display: flex; gap: 6px; align-items: center; }
.row-btns.wrap { flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.flabel { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fhint { font-size: 12px; color: var(--muted); }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 16px; }
textarea { min-height: 90px; resize: vertical; line-height: 1.35; }
input.short { max-width: 110px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .seg:focus-visible, .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; flex: none; }
input.switch { -webkit-appearance: none; appearance: none; width: 42px; height: 26px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
input.switch:checked { background: #34C759; }
input.switch:checked::after { left: 19px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.form-grid.g4 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.form-grid.g3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 12px; }
.form-grid .span2 { grid-column: span 2; }
@media (max-width: 420px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span2 { grid-column: 1 / -1; } .form-grid.g3 { grid-template-columns: 1fr; } }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper input { width: 76px; text-align: center; }
details.adv { border-top: 1px solid var(--line); padding-top: 8px; }
details.adv > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; list-style-position: inside; }
.race-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.race-sum .strong { color: var(--text); }
.race-line { display: flex; gap: 10px; align-items: flex-start; }
.race-line .swatch { margin-top: 5px; }

/* ---------------------------------------------------------------- chips, stats */
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip.ok { background: var(--ok); color: var(--ok-ink); } .chip.tight { background: var(--tight); color: var(--tight-ink); }
.chip.bad { background: var(--bad); color: var(--bad-ink); } .chip.unf { background: var(--unf); color: var(--unf-ink); }
.chip.loc { background: var(--loc); color: var(--loc-ink); } .chip.neutral { background: var(--surface2); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.stat strong { font-size: 22px; } .stat span { color: var(--muted); font-size: 12.5px; }
.stat.bad { background: var(--bad); color: var(--bad-ink); } .stat.unf { background: var(--unf); color: var(--unf-ink); } .stat.tight { background: var(--tight); color: var(--tight-ink); }
.stat.bad span, .stat.unf span, .stat.tight span { color: inherit; }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; align-items: end; }

/* ---------------------------------------------------------------- lists */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card .list { border: 0; border-radius: 0; background: transparent; }
.list-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.list-row:first-child, .list-head + .list-row, .list-day + .list-row { border-top: 0; }
.list .list-head { display: none; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; background: var(--surface2); }
.list-day { padding: 8px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--surface2); text-transform: uppercase; letter-spacing: .03em; }
.grow { flex: 1; min-width: 0; }
.list-row.edited { box-shadow: inset 3px 0 0 #E0A100; }
.list-row.off { opacity: .55; }
.list-row.na { opacity: .5; }
.list-row.key strong { color: var(--brand); }
.field.narrow { flex: none; width: 120px; }
.field.end { justify-content: flex-end; }

/* assignments */
.asg-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "pos st" "race time" "who lock"; gap: 6px 10px; }
.asg-pos { grid-area: pos; min-width: 0; display: flex; flex-direction: column; }
.asg-race { grid-area: race; display: flex; gap: 6px; align-items: center; font-size: 13.5px; min-width: 0; }
.asg-race span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asg-time { white-space: nowrap; grid-area: time; font-size: 13.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.asg-who { grid-area: who; min-width: 0; }
.asg-row .lock { grid-area: lock; }
.asg-st { grid-area: st; text-align: right; }
.asg-row.st-CONFLICT { background: color-mix(in srgb, var(--bad) 45%, transparent); }
.asg-row.st-UNFILLED { background: color-mix(in srgb, var(--unf) 45%, transparent); }
.asg-row.st-TIGHT { background: color-mix(in srgb, var(--tight) 35%, transparent); }
.asg-row.first { border-top: 1px solid var(--line); }
@media (min-width: 1000px) {
  .list .list-head.asg-row { display: grid; }
  .asg-row { grid-template-columns: minmax(170px, 2fr) minmax(110px, 1.2fr) 205px minmax(170px, 1.5fr) 44px 112px; grid-template-areas: "pos race time who lock st"; align-items: center; }
  .asg-row .asg-time { text-align: left; }
}
/* officials */
.off-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.off-row > .field:first-child, .off-row > .field:nth-child(3) { grid-column: 1 / -1; }
.off-row.dup { box-shadow: inset 3px 0 0 var(--danger); }
.off-row .field.end { align-items: flex-end; }
@media (min-width: 1100px) {
  .off-row { grid-template-columns: 1.5fr .6fr 1.6fr .75fr .85fr .85fr .5fr 44px; align-items: center; }
  .off-row > .field:first-child, .off-row > .field:nth-child(3) { grid-column: auto; }
  .list .list-head.off-row { display: grid; }
  .officials-list .list-row .flabel { display: none; }
  .officials-list .check span { display: none; }
}
/* meetings */
.meet-row { flex-wrap: wrap; align-items: flex-start; }
.meet-row > input[type=checkbox] { margin-top: 4px; }
.meet-row .grow { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.meet-times { display: grid; grid-template-columns: 165px 125px 125px; gap: 8px; }
.meet-times .field:nth-child(4) { grid-column: 1 / -1; }
@media (max-width: 560px) { .meet-times { grid-template-columns: 1.4fr 1fr 1fr; width: 100%; } }
.pos-row, .duty-row, .exp-row, .conf-row { flex-wrap: wrap; }
.pos-row .grow, .duty-row .grow, .exp-row .grow { flex: 1 1 240px; }
.conf-row { align-items: flex-start; }
.tl-row .tl-time, .tl-item .tl-time { font-variant-numeric: tabular-nums; width: 96px; flex: none; color: var(--muted); font-size: 13.5px; }
.tl-row .tl-time { width: 52px; }
.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.tl-item:first-child, .list-day + .tl-item { border-top: 0; }
.tl-item.meet strong { color: #7B4FA0; }
.tl-item.st-CONFLICT { background: var(--bad); } .tl-item.st-TIGHT { background: color-mix(in srgb, var(--tight) 55%, transparent); }
.sched .card-head { align-items: baseline; }

/* tables */
.table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card .table-wrap { border: 0; }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--surface2); font-size: 12.5px; color: var(--muted); position: sticky; top: 0; z-index: 1; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl.compact td { padding: 6px 8px; }
.tbl tr.strong td { font-weight: 700; }
.tbl caption { caption-side: bottom; text-align: left; padding-top: 8px; }
.tbl.part th.sticky { position: sticky; left: 0; background: var(--surface); z-index: 2; white-space: nowrap; }
.tbl.part thead th.sticky { z-index: 3; background: var(--surface2); }
.tbl .center { text-align: center; }
.th-race { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.th-race .row-btns { margin-top: 2px; }

/* calendar & library */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.cal-day { position: relative; aspect-ratio: 1 / 1; min-height: 40px; border: 1px solid transparent; border-radius: 10px; background: var(--surface2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px; }
.cal-day.today { border-color: var(--accent); font-weight: 700; }
.cal-day.cur { background: color-mix(in srgb, var(--accent) 18%, var(--surface2)); }
.cal-day.sel { background: var(--accent); color: var(--accent-ink); }
.cal-day .dot { position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: #E8743B; }
.cal-day.sel .dot { background: #fff; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 4px 4px; }
.lib-item.current { border-color: var(--accent); }
.lib-open { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 8px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; border-radius: 9px; }
.lib-open:hover { background: var(--surface2); }
.lib-open > * { overflow: hidden; text-overflow: ellipsis; }

/* gantt */
.gantt-wrap { overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; max-height: calc(100dvh - 260px); }
.gantt-wrap svg { display: block; }
.gantt-wrap rect[stroke] { cursor: pointer; }

/* misc */
pre.refs { white-space: pre-wrap; font: 13px/1.5 ui-monospace, Menlo, monospace; margin: 0; }
.bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--bottom) + 16px); transform: translate(-50%, 20px); max-width: min(92vw, 560px);
  background: rgba(20, 28, 38, .94); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 960px) { .toast { bottom: 24px; } }
dialog.dlg { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog.dlg::backdrop { background: rgba(10, 16, 24, .45); }
dialog.dlg form { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
dialog.dlg h2 { margin: 0; padding: 16px 18px 6px; font-size: 19px; }
.dlg-body { padding: 8px 18px 14px; overflow: auto; }
.dlg-body textarea { min-height: 180px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px calc(12px + var(--bottom)); border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .topbar { gap: 6px; }
  .pill { order: 5; width: 100%; text-align: center; padding: 5px 10px; }
  .sec-head h2 { font-size: 21px; }
  .actions .btn { flex: 1 1 auto; }
  .main { padding-left: calc(var(--left) + 10px); padding-right: calc(var(--right) + 10px); }
  .card { padding: 12px; }
  .list-row { padding: 10px; }
}
@media print { .topbar, .sidebar, .tabbar, .subnav, .actions, .toast { display: none !important; } #app { display: block; height: auto; } .main { overflow: visible; } }