/* ============================================================
   School Bus Booking — styles
   Mobile first: parents are on phones, administrators on a desktop.
   ============================================================ */
:root{
  --bg:#f5f7fa;         --surface:#ffffff;      --surface-2:#f9fbfd;
  --ink:#132030;        --ink-soft:#5a6b7f;     --ink-faint:#8a9aad;
  --line:#e2e8f0;       --line-strong:#cbd5e1;
  --brand:#12507e;      --brand-ink:#0e3f64;    --brand-soft:#e8f1f9;
  --accent:#0f8a6a;     --accent-soft:#e4f4ef;
  --warn:#a8690b;       --warn-soft:#fdf3e2;
  --danger:#b3261e;     --danger-soft:#fdeceb;
  --amber:#fdeec2; --green:#dcefdc; --peach:#fbe0d4; --blue:#dee6f7;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,32,48,.06), 0 8px 24px -12px rgba(16,32,48,.18);
  --shadow-lg:0 8px 40px -12px rgba(16,32,48,.28);
  --tap:46px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e151d; --surface:#161f2a; --surface-2:#1b2632;
    --ink:#e8eef5; --ink-soft:#9fb0c2; --ink-faint:#7387a0;
    --line:#26333f; --line-strong:#354655;
    --brand:#5aa7dd; --brand-ink:#8cc4ec; --brand-soft:#17293a;
    --accent:#4cc4a0; --accent-soft:#14302a;
    --warn:#e0a54a; --warn-soft:#2e2517;
    --danger:#f08a82; --danger-soft:#331e1c;
    --amber:#4a3f22; --green:#1e3325; --peach:#3d281f; --blue:#1f2b40;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.01em}
h1{font-size:1.35rem} h2{font-size:1.1rem} h3{font-size:.95rem}
a{color:var(--brand); text-underline-offset:2px}
small,.small{font-size:.8rem}
.muted{color:var(--ink-soft)} .faint{color:var(--ink-faint)}
.nums{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.app{max-width:960px; margin:0 auto; padding:0 14px 96px}
.app.wide{max-width:1180px}
header.top{
  position:sticky; top:0; z-index:40; background:var(--brand);
  color:#fff; padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
header.top .inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:12px}
header.top .brand{font-weight:700; font-size:1rem; letter-spacing:-.01em}
header.top .sub{font-size:.72rem; opacity:.8; margin-top:1px}
header.top .spacer{flex:1}
header.top button{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); color:#fff}
header.top button:hover{background:rgba(255,255,255,.24)}

/* ---------- bottom navigation (phone) ---------- */
nav.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
nav.tabs a{
  flex:1; text-align:center; padding:9px 4px 7px; text-decoration:none;
  color:var(--ink-faint); font-size:.68rem; font-weight:600; display:block;
}
nav.tabs a .ic{display:block; font-size:1.15rem; line-height:1.25}
nav.tabs a.on{color:var(--brand)}
@media (min-width:820px){
  nav.tabs{position:static; border:0; background:none; max-width:1180px; margin:14px auto -4px; padding:0 14px; gap:6px}
  nav.tabs a{flex:0 0 auto; padding:8px 16px; border-radius:999px; font-size:.85rem; background:var(--surface); border:1px solid var(--line)}
  nav.tabs a .ic{display:inline; margin-right:6px; font-size:.95rem}
  nav.tabs a.on{background:var(--brand); color:#fff; border-color:var(--brand)}
  .app{padding-bottom:40px}
}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
      padding:16px; margin:14px 0; box-shadow:var(--shadow)}
.card.tight{padding:12px}
.card h2{margin-bottom:4px}
.card .cap{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
           color:var(--ink-faint); font-weight:700; margin-bottom:8px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.between{justify-content:space-between}
.grid{display:grid; gap:12px}
@media (min-width:700px){ .grid.two{grid-template-columns:1fr 1fr} .grid.three{grid-template-columns:repeat(3,1fr)} }
.stack>*+*{margin-top:10px}
hr.sep{border:0; border-top:1px solid var(--line); margin:14px 0}

/* ---------- buttons ---------- */
button,.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:10px 15px; min-height:var(--tap); display:inline-flex; align-items:center;
  justify-content:center; gap:7px; text-decoration:none; transition:.12s;
}
button:hover,.btn:hover{background:var(--surface-2)}
button:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset:2px}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.btn-danger:hover{background:var(--danger-soft)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--brand)}
.btn-sm{padding:6px 11px; min-height:36px; font-size:.85rem}
.btn-block{width:100%}
button[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- forms ---------- */
label.f{display:block; font-size:.78rem; font-weight:700; color:var(--ink-soft); margin:0 0 5px}
label.f .req{color:var(--danger)}
input,select,textarea{
  width:100%; font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:11px 12px; min-height:var(--tap);
}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
textarea{min-height:80px; resize:vertical}
input[type=checkbox],input[type=radio]{width:auto; min-height:0; accent-color:var(--brand)}
.field{margin-bottom:12px}
.field .hint{font-size:.75rem; color:var(--ink-faint); margin-top:4px}
.field.err input,.field.err select{border-color:var(--danger)}
.field .err-msg{font-size:.78rem; color:var(--danger); margin-top:4px}
fieldset{border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; margin:0 0 12px}
legend{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
       color:var(--ink-faint); padding:0 6px}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700;
       padding:3px 9px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.badge.open{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.badge.draft{background:var(--surface-2); color:var(--ink-faint); border-color:var(--line)}
.badge.closed{background:var(--warn-soft); color:var(--warn)}
.badge.done{background:var(--brand-soft); color:var(--brand)}
.badge.danger{background:var(--danger-soft); color:var(--danger)}
.dot{width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block}

/* ---------- lists ---------- */
.list{display:flex; flex-direction:column; gap:10px}
.item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
      padding:13px 14px; display:flex; gap:12px; align-items:center}
.item .grow{flex:1; min-width:0}
.item .name{font-weight:650}
.item .meta{font-size:.8rem; color:var(--ink-soft); margin-top:2px}
.avatar{width:38px; height:38px; border-radius:11px; background:var(--brand-soft); color:var(--brand);
        display:grid; place-items:center; font-weight:700; flex:none; font-size:.9rem}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{padding:9px 11px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line)}
th{background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
   color:var(--ink-soft); position:sticky; top:0}
td.txt,th.txt{text-align:left}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.c-fare{background:var(--amber)} td.c-total{background:var(--green); font-weight:700}
td.c-qty{background:var(--peach)} td.c-sum{background:var(--blue); font-weight:600}

/* tables collapse into a list on phones */
@media (max-width:560px){
  table.stack-sm thead{display:none}
  table.stack-sm tr{display:block; border-bottom:1px solid var(--line); padding:10px 12px}
  table.stack-sm tr:last-child{border-bottom:0}
  table.stack-sm td{display:flex; justify-content:space-between; gap:12px;
    border:0; padding:3px 0; white-space:normal; text-align:right; background:none !important}
  table.stack-sm td::before{content:attr(data-l); color:var(--ink-soft); font-size:.8rem;
    font-weight:600; text-align:left}
  table.stack-sm td.txt{font-weight:700; padding-bottom:6px}
  table.stack-sm td.txt::before{content:none}
}

/* ---------- sheets (modals) ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,20,30,.5); z-index:60;
       display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(2px)}
.sheet{background:var(--surface); width:100%; max-width:560px; max-height:92vh; overflow:auto;
       border-radius:20px 20px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom));
       box-shadow:var(--shadow-lg); animation:rise .18s ease-out}
@keyframes rise{from{transform:translateY(16px); opacity:.6} to{transform:none; opacity:1}}
@media (min-width:700px){
  .scrim{align-items:center}
  .sheet{border-radius:var(--r); max-height:88vh; animation:none}
}
.sheet header{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.sheet header h2{flex:1}
.sheet .x{border:0; background:transparent; font-size:1.4rem; line-height:1; padding:4px 8px; min-height:0; color:var(--ink-faint)}

/* ---------- notices ---------- */
.note{border-radius:var(--r-sm); padding:11px 13px; font-size:.85rem; border:1px solid transparent}
.note.info{background:var(--brand-soft); color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.note.ok{background:var(--accent-soft); color:var(--accent)}
.note.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.note.err{background:var(--danger-soft); color:var(--danger)}
.toast{position:fixed; left:50%; bottom:78px; transform:translateX(-50%); z-index:80;
       background:var(--ink); color:var(--bg); padding:11px 17px; border-radius:999px;
       font-size:.87rem; font-weight:600; box-shadow:var(--shadow-lg); max-width:92vw}
@media (min-width:820px){ .toast{bottom:24px} }

/* ---------- stat tiles ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px}
.stat .k{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700}
.stat .v{font-size:1.5rem; font-weight:700; margin-top:3px; letter-spacing:-.02em; white-space:nowrap}
@media (max-width:520px){
  .stats{gap:8px}
  .stat{padding:10px 11px}
  .stat .v{font-size:1.15rem}
  .stat .k{font-size:.66rem}
}
.stat .s{font-size:.75rem; color:var(--ink-soft)}

/* ---------- stop picker ---------- */
.picker{display:grid; gap:8px}
.pick{display:flex; align-items:center; gap:11px; border:1px solid var(--line-strong);
      border-radius:var(--r-sm); padding:11px 13px; cursor:pointer; background:var(--surface)}
.pick:hover{background:var(--surface-2)}
.pick.on{border-color:var(--brand); background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand)}
.pick .grow{flex:1}
.pick .price{font-weight:700; font-variant-numeric:tabular-nums}

/* ---------- misc ---------- */
.empty{text-align:center; padding:36px 18px; color:var(--ink-soft)}
.empty .ic{font-size:2.2rem; opacity:.55; display:block; margin-bottom:8px}
.spin{width:20px; height:20px; border:2.5px solid var(--line-strong); border-top-color:var(--brand);
      border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.center{display:grid; place-items:center; min-height:55vh}
.hide{display:none !important}
.auth-wrap{max-width:420px; margin:8vh auto; padding:0 16px}
.brandmark{text-align:center; margin-bottom:20px}
.brandmark .logo{width:60px; height:60px; border-radius:18px; background:var(--brand); color:#fff;
                 display:grid; place-items:center; font-size:1.7rem; margin:0 auto 10px; box-shadow:var(--shadow)}
.seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:3px}
.seg button{flex:1; border:0; background:transparent; min-height:38px; border-radius:8px; font-size:.88rem; color:var(--ink-soft)}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

@media print{
  header.top,nav.tabs,.no-print,button{display:none !important}
  body{background:#fff}
  .card{break-inside:avoid; box-shadow:none; border-color:#ccc}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
}