/* ===========================================================================
   WE Safari Africa Shuttle & Tours — Design System
   ---------------------------------------------------------------------------
   One stylesheet for the whole product: the staff app, the public booking page
   and the printed quote/invoice/voucher. Custom properties in :root are the
   only place a colour is decided.

   Built mobile-first in intent even though the rules read desktop-first: the
   people using this are standing at a counter in Marloth Park with a phone, or
   sitting with a tablet, far more often than they are at a desk. Every
   breakpoint below exists because something was uncomfortable to tap.

   Palette is the bushveld: deep acacia green for structure, a sunset amber for
   anything the user acts on, savanna gold for accents.
   =========================================================================== */
:root{
  --bush-900:#10231a; --bush-800:#16301f; --bush-700:#1f4430; --bush-600:#2c5c41;
  --brand:#b8621b; --brand-dark:#8f4a12; --brand-soft:#fdf0e3;
  --gold:#d4a03c; --teal:#0f7d72;
  --amber:#c2760a; --red:#c0392b; --green:#1f7a44; --purple:#6d43b8;
  --ink:#14201c; --muted:#5f6f68; --line:#e2e8e3; --line-2:#eef2ef;
  --bg:#f6f7f4; --card:#ffffff; --field:#ffffff;
  --shadow-sm:0 1px 2px rgba(16,35,26,.06),0 1px 3px rgba(16,35,26,.08);
  --shadow-md:0 4px 12px rgba(16,35,26,.09),0 2px 4px rgba(16,35,26,.04);
  --shadow-lg:0 20px 40px -12px rgba(16,35,26,.28);
  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
a{color:var(--brand-dark);text-decoration:none}
button{font-family:inherit}
img,svg,canvas,video{max-width:100%}
/* Nothing may force the page wider than the screen. min-width:0 lets grid and
   flex children shrink so their text wraps instead of pushing the layout out. */
.grid>*,.form-grid>*,.wizard>*,.tour-grid>*,.pipeline>*{min-width:0}
p,li,td,th{overflow-wrap:break-word}
.hidden{display:none !important}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--muted)}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  border:1px solid transparent;border-radius:var(--radius-sm);padding:.62rem 1.05rem;
  font-weight:600;font-size:.92rem;cursor:pointer;transition:.15s;white-space:nowrap;
  background:var(--brand);color:#fff;text-decoration:none}
.btn:hover{background:var(--brand-dark)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.secondary:hover{background:#f4f7f4;border-color:#cbd6ce}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--line-2);color:var(--ink)}
.btn.danger{background:var(--red)}
.btn.danger:hover{background:#96271c}
.btn.success{background:var(--green)}
.btn.success:hover{background:#155f34}
.btn.dark{background:var(--bush-800)}
.btn.dark:hover{background:var(--bush-900)}
.btn.lg{padding:.85rem 1.4rem;font-size:1rem}
.btn.sm{padding:.4rem .75rem;font-size:.82rem}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
.btn-row.end{justify-content:flex-end}

/* ---------- Badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;
  padding:.22rem .6rem;border-radius:999px;letter-spacing:.02em;text-transform:uppercase;
  background:var(--line-2);color:var(--muted);white-space:nowrap}
.badge.enquiry{background:#eef2f7;color:#4a5b6e}
.badge.quoted{background:#fff4e2;color:var(--amber)}
.badge.confirmed{background:var(--brand-soft);color:var(--brand-dark)}
.badge.paid{background:#e6f5ec;color:var(--green)}
.badge.completed{background:#e4f0ec;color:var(--teal)}
.badge.cancelled{background:#fdecea;color:var(--red)}
.badge.tour{background:#eef6ee;color:var(--green)}
.badge.transfer{background:#eaf1fa;color:#2b5f9e}
.badge.shared_shuttle{background:#f4eefb;color:var(--purple)}
.badge.warn{background:#fdecea;color:var(--red)}
.badge.ok{background:#e6f5ec;color:var(--green)}
.badge.gold{background:#fbf3df;color:#8a6212}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--bush-900),var(--bush-700));
  color:#cfdcd3;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.brand b{color:#fff;font-size:.98rem;display:block;line-height:1.15}
.brand span{font-size:.71rem;color:#93ac9c;display:block;line-height:1.3}
/* ---- Brand mark ----
   The official logo is SQUARE with a white background, so every slot below is a
   1:1 box sized on height, with `object-fit:contain` as a safety net if a
   differently-proportioned file is ever dropped in. On the dark green sidebar
   and the dark document band it sits on a white rounded chip — a white-
   background JPEG floating on dark green reads as a printing error.

   The mark already contains the words "WE Safari Africa", but they are
   illegible below roughly 90px, which is why the sidebar and the documents
   still set the name in live text beside it. */
.brand .logo-img{height:46px;width:46px;object-fit:contain;
  background:#fff;border-radius:10px;padding:3px;flex:none;box-shadow:var(--shadow-sm)}
/* The wordmark wraps rather than truncating — "WE Safari A…" is worse than two
   tidy lines, and the sidebar has the vertical room. */
.brand > div{min-width:0}
.brand b{line-height:1.2}
.topbar-logo{display:none;height:34px;width:34px;object-fit:contain;flex:none;
  border-radius:8px}
/* Big enough on the login card for the mark's own lettering to be readable —
   below about 140px the "WE Safari Africa" inside the artwork turns to mush. */
.login-logo{height:156px;width:156px;object-fit:contain;display:block;border-radius:16px}
@media(max-width:1024px){.topbar-logo{display:block}}
.nav{padding:.75rem .6rem;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:.75rem;color:#aec1b5;padding:.62rem .8rem;
  border-radius:10px;font-weight:600;font-size:.9rem;margin-bottom:2px;cursor:pointer}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.active{background:var(--brand);color:#fff}
.nav a .count{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:.68rem;
  font-weight:800;padding:.1rem .42rem;border-radius:999px;min-width:20px;text-align:center}
.nav a.active .count{background:rgba(0,0,0,.22)}
.nav .section{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:#77907f;
  padding:.9rem .9rem .4rem}
.sidebar .foot{padding:.9rem 1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem}
.sidebar .foot .env{display:inline-block;margin-top:.3rem;font-size:.66rem;padding:.15rem .5rem;border-radius:6px}
.env.demo{background:#3a2c05;color:#f0c14b}
.env.live{background:#06301c;color:#37d18c}

/* ---------- Account block ---------- */
.acct{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;min-width:0}
.acct .av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff;
  font-weight:700;font-size:.78rem;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.acct .id{min-width:0}
.acct .id b{display:block;color:#fff;font-weight:600;font-size:.8rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .id span{display:block;color:#93ac9c;font-size:.68rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signout,.install-link{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  margin-top:.7rem;padding:.55rem .7rem;border-radius:9px;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:600;transition:.16s}
.signout{background:rgba(255,255,255,.05);color:#c7d6cc;border:1px solid rgba(255,255,255,.13)}
.signout:hover{background:rgba(192,57,43,.2);border-color:rgba(232,120,110,.5);color:#fbd5d0}
.signout:active{transform:translateY(1px)}
.install-link{display:none;color:#8fd9b4;background:rgba(55,209,140,.1);border:1px solid rgba(55,209,140,.3)}
.install-link:hover{background:rgba(55,209,140,.18)}
.topbar .avatar-btn{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff;
  font-weight:700;font-size:.76rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow-sm);transition:.16s}
.topbar .avatar-btn:hover{filter:brightness(1.08)}
.acct-menu{position:absolute;right:0;top:calc(100% + .5rem);z-index:130;min-width:214px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:.5rem;animation:fade .12s}
.acct-menu .hd{padding:.5rem .6rem .6rem;border-bottom:1px solid var(--line-2);margin-bottom:.4rem}
.acct-menu .hd b{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-menu .hd span{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-menu button{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .6rem;
  border:none;background:none;border-radius:8px;cursor:pointer;font:inherit;font-size:.82rem;
  color:var(--ink);text-align:left}
.acct-menu button:hover{background:var(--line-2)}
.acct-menu button.danger{color:var(--red)}
.acct-menu button.danger:hover{background:#fdecea}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:.85rem 1.6rem;display:flex;align-items:center;gap:1rem}
.topbar h1{font-size:1.15rem}
.topbar .sub{color:var(--muted);font-size:.83rem;margin-top:1px}
.topbar .spacer{flex:1}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:.3rem;color:var(--ink)}
.content{padding:1.6rem;max-width:1280px;width:100%;min-width:0;margin:0 auto}

/* ---------- Cards & grids ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.card.pad{padding:1.4rem}
.card-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:1.14rem;font-weight:800}
.card-head .spacer{flex:1}
.card-body{padding:1.4rem}
.card-foot{padding:1rem 1.4rem;border-top:1px solid var(--line-2);display:flex;gap:.6rem;flex-wrap:wrap}
.grid{display:grid;gap:1.2rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.tight{gap:.8rem}
.section-title{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:800;margin:1.7rem 0 .8rem;display:flex;align-items:center;gap:.5rem}
.section-title .spacer{flex:1}

/* ---------- Stat tiles ---------- */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.25rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .k{font-size:.74rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:1.95rem;font-weight:800;margin-top:.25rem;line-height:1.05;font-variant-numeric:tabular-nums}
.stat .d{font-size:.79rem;color:var(--muted);margin-top:.35rem}
.stat .ic{width:34px;height:34px;border-radius:10px;margin-bottom:.6rem;
  display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.stat.green .v{color:var(--green)} .stat.green .ic{background:#e6f5ec;color:var(--green)}
.stat.red .v{color:var(--red)}     .stat.red .ic{background:#fdecea;color:var(--red)}
.stat.amber .v{color:var(--amber)} .stat.amber .ic{background:#fff4e2;color:var(--amber)}
.stat.teal .v{color:var(--teal)}   .stat.teal .ic{background:#e4f0ec;color:var(--teal)}
.stat.clickable{cursor:pointer;transition:.13s}
.stat.clickable:hover{border-color:var(--brand);box-shadow:0 0 0 2px rgba(184,98,27,.15);transform:translateY(-2px)}

/* ---------- Forms ---------- */
.field{margin-bottom:1rem}
.field > label{display:block;font-weight:600;font-size:.83rem;margin-bottom:.35rem;color:#2c3b34}
.field .hint{font-size:.76rem;color:var(--muted);margin-top:.3rem}
input,select,textarea{width:100%;min-width:0;max-width:100%;padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.92rem;font-family:inherit;
  background:var(--field);color:var(--ink);transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(184,98,27,.14)}
textarea{resize:vertical;min-height:90px}
input[type=checkbox],input[type=radio]{width:1.05rem;height:1.05rem;min-width:0;max-width:none;
  padding:0;border:none;background:none;box-shadow:none;flex:0 0 auto;accent-color:var(--brand);cursor:pointer}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:0 0 0 3px rgba(184,98,27,.2)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 1.2rem}
.form-grid .full{grid-column:1/-1}
.form-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.req::after{content:" *";color:var(--red)}
.checkline{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;cursor:pointer;
  padding:.4rem 0;color:#2c3b34}
.checkline span{flex:1}

/* Disclaimer clauses — each is its own tickbox in its own row, deliberately:
   a risk waiver has to draw attention to each point individually, not bury
   them under one blanket "I agree". */
.waiver-clauses{display:flex;flex-direction:column;gap:.15rem}
.waiver-clause{padding:.65rem .7rem;border-radius:var(--radius-sm);border:1px solid transparent;
  line-height:1.5;transition:.12s}
.waiver-clause:hover{background:#f6f7f4}
.waiver-clause input:checked ~ span{color:var(--ink)}
.waiver-clause:has(input:checked){background:var(--brand-soft);border-color:var(--brand)}

/* number stepper — pax counts get set with a thumb far more than a keyboard */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.stepper-b{border:none;background:#f6f7f4;color:var(--ink);cursor:pointer;padding:0 .8rem;
  display:grid;place-items:center;transition:.12s}
.stepper-b:hover{background:var(--brand-soft);color:var(--brand-dark)}
.stepper-v{border:none;border-radius:0;text-align:center;width:3.4rem;padding:.55rem .2rem;
  font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.stepper-v:focus{box-shadow:none}
.stepper-v::-webkit-outer-spin-button,.stepper-v::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* choice chips */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.42rem .9rem;
  font-size:.85rem;font-weight:600;cursor:pointer;color:#33473d;transition:.12s;user-select:none}
.chip:hover{border-color:#c2cfc6}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.on.green{background:var(--green);border-color:var(--green)}
.chip.on.dark{background:var(--bush-700);border-color:var(--bush-700)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
table.data th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:.7rem .9rem;border-bottom:1px solid var(--line);
  background:#fafbf9;white-space:nowrap;font-weight:800}
table.data td{padding:.7rem .9rem;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr{cursor:pointer;transition:.1s}
table.data tbody tr:hover{background:#f7faf7}
table.data th.r,table.data td.r{text-align:right}
.cell-name{font-weight:600}
.cell-sub{color:var(--muted);font-size:.78rem}

/* ---------- Toolbar / filters ---------- */
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem}
.toolbar .search{flex:1;min-width:190px}
.toolbar select,.toolbar input{max-width:230px}
.toolbar .spacer{flex:1}

/* ---------- Pipeline board ---------- */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;align-items:start}
.pipe-col{background:#f1f4f0;border:1px solid var(--line);border-radius:var(--radius);
  padding:.7rem;min-height:120px}
.pipe-col > h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  display:flex;align-items:center;gap:.4rem;margin-bottom:.6rem;padding:0 .2rem}
.pipe-col > h4 .n{margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.05rem .45rem;font-size:.7rem;color:var(--ink)}
.pipe-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;
  margin-bottom:.5rem;cursor:pointer;transition:.12s;box-shadow:var(--shadow-sm)}
.pipe-card:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.pipe-card b{display:block;font-size:.85rem;line-height:1.3}
.pipe-card .l2{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.pipe-card .l3{display:flex;align-items:center;gap:.4rem;margin-top:.45rem;
  font-size:.74rem;font-weight:700;color:var(--brand-dark)}
.pipe-card .l3 .spacer{flex:1}
.pipe-empty{font-size:.76rem;color:#9aa8a0;text-align:center;padding:.9rem .2rem}

/* ---------- Tour / route catalogue cards ---------- */
.tour-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
.tour-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:.14s}
.tour-card:hover{box-shadow:var(--shadow-md);border-color:#cbd6ce;transform:translateY(-2px)}
.tour-card .banner{height:88px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:.7rem .9rem;color:#fff;gap:.5rem;
  background:linear-gradient(135deg,var(--bush-700),var(--bush-900))}
.tour-card .banner.t1{background:linear-gradient(135deg,#2c5c41,#10231a)}
.tour-card .banner.t2{background:linear-gradient(135deg,#b8621b,#7a3d0d)}
.tour-card .banner.t3{background:linear-gradient(135deg,#0f7d72,#0a4a44)}
.tour-card .banner.t4{background:linear-gradient(135deg,#d4a03c,#8a6212)}
.tour-card .banner.t5{background:linear-gradient(135deg,#6d43b8,#3f2570)}
.tour-card .banner .ico{opacity:.9}
.tour-card .banner .dur{font-size:.7rem;font-weight:700;background:rgba(0,0,0,.28);
  padding:.15rem .5rem;border-radius:999px;white-space:nowrap}
.tour-card .body{padding:.95rem 1rem;flex:1;display:flex;flex-direction:column}
.tour-card h4{font-size:1rem;line-height:1.3;margin-bottom:.3rem}
.tour-card .desc{font-size:.82rem;color:var(--muted);line-height:1.45;flex:1}
.tour-card .meta{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 .1rem}
.tour-card .price{display:flex;align-items:baseline;gap:.4rem;margin-top:.8rem;
  padding-top:.75rem;border-top:1px solid var(--line-2)}
.tour-card .price .from{font-size:.7rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700}
.tour-card .price .amt{font-size:1.22rem;font-weight:800;color:var(--brand-dark)}
.tour-card .price .pp{font-size:.74rem;color:var(--muted)}
.tour-card .price .spacer{flex:1}

/* rate card table (published tier ladder) */
table.rates{width:100%;border-collapse:collapse;font-size:.85rem}
table.rates th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:.45rem .6rem;border-bottom:1px solid var(--line);font-weight:800}
table.rates td{padding:.45rem .6rem;border-bottom:1px solid var(--line-2);font-variant-numeric:tabular-nums}
table.rates tr:last-child td{border-bottom:none}
table.rates td.r,table.rates th.r{text-align:right}
table.rates tr.hit td{background:var(--brand-soft);font-weight:700}

/* ---------- Quote panel (wizard + detail + public page) ---------- */
.quote-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.quote-box .qh{background:var(--bush-800);color:#fff;padding:.7rem 1rem;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:.5rem}
.quote-box .qh .spacer{flex:1}
.qline{display:flex;gap:.8rem;padding:.6rem 1rem;border-bottom:1px solid var(--line-2);font-size:.86rem}
.qline .l{flex:1;min-width:0}
.qline .l b{font-weight:600;display:block}
.qline .l small{color:var(--muted);font-size:.75rem}
.qline .q{color:var(--muted);font-size:.8rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.qline .a{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:5.5rem;text-align:right}
.qline.discount .a{color:var(--green)}
.qline.discount .l b{color:var(--green)}
.qtotals{padding:.8rem 1rem;background:#fafbf9}
.qtotals .row{display:flex;justify-content:space-between;gap:1.2rem;padding:.24rem 0;font-size:.88rem}
.qtotals .row span{color:var(--muted)}
.qtotals .row b{font-variant-numeric:tabular-nums}
.qtotals .row.grand{border-top:2px solid var(--bush-800);margin-top:.45rem;padding-top:.55rem;font-size:1.16rem}
.qtotals .row.grand span{color:var(--ink);font-weight:800}
.qtotals .row.grand b{font-weight:800;color:var(--brand-dark)}
.qtotals .row.sub{font-size:.8rem}
.qtotals .row.sub b{font-weight:600}
.qwarn{display:flex;gap:.55rem;padding:.6rem 1rem;background:#fff8e8;border-top:1px solid #f2e0b8;
  font-size:.8rem;color:#7a5410;line-height:1.45}
.qwarn svg{flex:none;margin-top:.1rem;color:var(--amber)}

/* ---------- Map panel (places.js) ----------
   The preview is an OpenStreetMap iframe; the buttons are plain links that open
   the phone's own navigation app. The frame keeps a fixed aspect so the layout
   does not jump while the tiles load, and the actions stay usable even if the
   iframe never loads at all (no signal, blocked embed) — which is the whole
   reason the buttons are siblings of the map rather than overlaid on it. */
.map-panel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.map-frame{position:relative;aspect-ratio:16/9;background:#e8eee9;
  background-image:linear-gradient(135deg,#e8eee9 25%,#dfe7e1 25%,#dfe7e1 50%,
    #e8eee9 50%,#e8eee9 75%,#dfe7e1 75%);background-size:16px 16px}
.map-frame.compact{aspect-ratio:2/1}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-badge{position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  background:rgba(16,35,26,.88);color:#fff;font-size:.74rem;font-weight:700;
  padding:.28rem .65rem;border-radius:999px;backdrop-filter:blur(3px);
  max-width:calc(100% - 1.2rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none}
/* Shown over the frame when the tiles never arrive — see places.js. */
.map-stall{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:.7rem;padding:1rem;text-align:left;color:var(--muted);background:#eef2ef}
.map-stall svg{flex:none;opacity:.5}
.map-stall b{display:block;font-size:.85rem;color:var(--ink)}
.map-stall span{font-size:.76rem;line-height:1.4}
.map-actions{display:flex;flex-wrap:wrap;gap:.45rem;padding:.75rem;
  border-top:1px solid var(--line-2);align-items:center}
.map-actions .map-go{flex:1 1 auto;min-width:200px}
.map-note{padding:0 .8rem .75rem;font-size:.76rem;color:var(--muted);line-height:1.5}
.map-note.warn{color:#7a5410}

/* ---------- Notes / callouts ---------- */
.note{display:flex;gap:.7rem;padding:.85rem 1rem;border-radius:var(--radius-sm);
  font-size:.85rem;line-height:1.5;border:1px solid var(--line);background:#fafbf9;color:#334a41}
.note svg{flex:none;margin-top:.1rem}
.note.info{background:#eef5fb;border-color:#cfe0f0;color:#20496f}
.note.info svg{color:#2b5f9e}
.note.warn{background:#fff8e8;border-color:#f2e0b8;color:#7a5410}
.note.warn svg{color:var(--amber)}
.note.danger{background:#fdecea;border-color:#f3ccc7;color:#8c281c}
.note.danger svg{color:var(--red)}
.note.ok{background:#e9f6ee;border-color:#c5e5d1;color:#155f34}
.note.ok svg{color:var(--green)}
.note b{font-weight:700}

/* ---------- Key/value detail blocks ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.42rem 1rem;font-size:.87rem;align-items:baseline}
.kv dt{color:var(--muted);font-weight:600;white-space:nowrap}
.kv dd{margin:0;font-weight:600}
.kv dd.plain{font-weight:400}

/* ---------- Day sheet / schedule ---------- */
.daysheet{display:flex;flex-direction:column;gap:1.1rem}
.day-block{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  box-shadow:var(--shadow-sm)}
.day-block > .dh{display:flex;align-items:center;gap:.7rem;padding:.75rem 1.1rem;
  background:linear-gradient(135deg,var(--bush-800),var(--bush-700));color:#fff}
.day-block > .dh b{font-size:.95rem}
.day-block > .dh .rel{font-size:.74rem;color:#a9c2b3;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.day-block > .dh .spacer{flex:1}
.day-block > .dh .tot{font-size:.78rem;background:rgba(255,255,255,.14);padding:.2rem .6rem;border-radius:999px}
.day-block.today > .dh{background:linear-gradient(135deg,var(--brand),var(--brand-dark))}
.trip{display:flex;gap:.9rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line-2);cursor:pointer;
  transition:.12s;align-items:flex-start}
.trip:last-child{border-bottom:none}
.trip:hover{background:#f7faf7}
.trip .time{font-weight:800;font-size:.9rem;width:3.4rem;flex:none;font-variant-numeric:tabular-nums;
  color:var(--brand-dark)}
.trip .core{flex:1;min-width:0}
.trip .core b{display:block;font-size:.9rem;line-height:1.3}
.trip .core .l2{font-size:.79rem;color:var(--muted);margin-top:.15rem}
.trip .core .l3{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.trip .side{flex:none;text-align:right}
.trip .side .amt{font-weight:800;font-variant-numeric:tabular-nums;font-size:.9rem}
.trip .side .pax{font-size:.75rem;color:var(--muted);margin-top:.15rem}

/* unassigned vehicle/driver warning strip on a trip */
.trip.unassigned{border-left:3px solid var(--amber)}
.trip.unassigned .core b::after{content:" · needs a vehicle";color:var(--amber);font-weight:700;font-size:.76rem}

/* ===========================================================================
   CALENDAR (calendar.js)
   Month grid, week columns and the vehicle-utilisation matrix. Chips are
   colour-coded by what the entry IS (departure / tour / transfer / shuttle)
   and gain an amber left edge when nothing is allocated to them.
   =========================================================================== */
.cal-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.cal-bar .spacer{flex:1}
.cal-nav{display:flex;gap:.35rem;align-items:center}
.cal-period{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;min-width:9rem}
.cal-modes .chip{padding:.38rem .85rem;font-size:.83rem}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.cal-dow{background:#fafbf9;padding:.5rem .6rem;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.cal-cell{background:#fff;min-height:118px;padding:.4rem .4rem .5rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.25rem;transition:.12s;position:relative}
.cal-cell:hover{background:#f7faf7}
.cal-cell.out{background:#fbfcfb}
.cal-cell.out .cal-daynum{color:#b6c2ba}
.cal-cell.weekend:not(.out){background:#fcfdfb}
.cal-cell.weekend:not(.out):hover{background:#f5f9f4}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--brand)}
.cal-daynum{display:flex;align-items:center;justify-content:space-between;gap:.3rem;
  font-size:.82rem;font-weight:700;color:var(--ink);padding:.05rem .1rem .1rem}
.cal-cell.today .cal-daynum > span:first-child{background:var(--brand);color:#fff;
  border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.76rem}
.cal-daynum .cnt{font-size:.66rem;font-weight:800;color:var(--muted);
  background:var(--line-2);border-radius:999px;padding:.05rem .38rem}
.cal-chips{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-more{font-size:.68rem;color:var(--muted);font-weight:700;padding-left:.15rem}

/* the chip itself — shared by month, week and the vehicle matrix */
.cal-chip{display:flex;align-items:center;gap:.3rem;width:100%;text-align:left;
  border:none;border-left:3px solid var(--muted);border-radius:4px;
  background:var(--line-2);color:var(--ink);cursor:pointer;
  padding:.16rem .3rem;font:inherit;font-size:.7rem;line-height:1.3;
  overflow:hidden;transition:.1s}
.cal-chip:hover{filter:brightness(.96);transform:translateX(1px)}
.cal-chip .t{font-weight:800;font-variant-numeric:tabular-nums;flex:none;opacity:.75}
.cal-chip .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-chip .s{flex:none;font-weight:800;font-variant-numeric:tabular-nums;opacity:.8}
.cal-chip.departure{background:#fbf1dc;border-left-color:var(--gold);color:#6d4c0c}
.cal-chip.departure.full{background:#e6f5ec;border-left-color:var(--green);color:#14532d}
.cal-chip.departure.low{background:#fdf3ef;border-left-color:#d98b6a;color:#8a4526}
.cal-chip.departure.over{background:#fdecea;border-left-color:var(--red);color:#8c281c}
.cal-chip.tour{background:#eaf3ea;border-left-color:var(--green);color:#1b4f31}
.cal-chip.transfer{background:#e9eff8;border-left-color:#2b5f9e;color:#1d4270}
.cal-chip.shared_shuttle{background:#f2ecfa;border-left-color:var(--purple);color:#432a75}
.cal-chip.warn{border-left-color:var(--amber);box-shadow:inset 2px 0 0 var(--amber)}

.cal-totals{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:.9rem;padding:.75rem 1rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  font-size:.83rem;color:var(--muted)}
.cal-totals b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

.cal-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:1rem;
  font-size:.76rem;color:var(--muted)}
.cal-legend .spacer{flex:1}
.cal-legend span{display:inline-flex;align-items:center;gap:.4rem}
.cal-legend .k{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.cal-legend .k.departure{background:#fbf1dc;border-left:3px solid var(--gold)}
.cal-legend .k.tour{background:#eaf3ea;border-left:3px solid var(--green)}
.cal-legend .k.transfer{background:#e9eff8;border-left:3px solid #2b5f9e}
.cal-legend .k.shared_shuttle{background:#f2ecfa;border-left:3px solid var(--purple)}
.cal-legend .k.warn{background:#fff4e2;border-left:3px solid var(--amber)}

/* ---- week ---- */
.wk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.wk-col{background:#fff;display:flex;flex-direction:column;min-height:220px}
.wk-col.today{box-shadow:inset 0 0 0 2px var(--brand)}
.wk-head{padding:.55rem .5rem;border-bottom:1px solid var(--line-2);background:#fafbf9;
  text-align:center;cursor:pointer;transition:.12s}
.wk-head:hover{background:var(--brand-soft)}
.wk-head b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted)}
.wk-head span{display:block;font-size:.84rem;font-weight:700;margin-top:.1rem}
.wk-head .cnt{display:inline-block;margin-top:.2rem;font-size:.64rem;font-weight:800;
  background:var(--brand);color:#fff;border-radius:999px;padding:.03rem .4rem}
.wk-body{padding:.4rem;display:flex;flex-direction:column;gap:3px;flex:1}
.wk-empty{text-align:center;color:#b6c2ba;font-size:.8rem;padding:.8rem 0}

/* ---- vehicle utilisation matrix ---- */
table.vh-grid{width:100%;border-collapse:collapse;font-size:.84rem;min-width:900px;background:#fff}
table.vh-grid th{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);
  background:#fafbf9;vertical-align:top}
table.vh-grid thead th{text-align:center;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:800}
table.vh-grid thead th b{display:block;color:var(--ink);font-size:.72rem}
table.vh-grid thead th span{display:block;font-weight:600;font-size:.7rem;margin-top:.1rem}
table.vh-grid thead th.today{background:var(--brand-soft);color:var(--brand-dark)}
table.vh-grid tbody th{width:170px;border-right:1px solid var(--line)}
table.vh-grid tbody th b{display:block;font-size:.87rem}
table.vh-grid tbody th span{display:block;font-size:.72rem;color:var(--muted);margin-top:.1rem}
table.vh-grid tbody th .util{display:inline-block;margin-top:.35rem;font-size:.66rem;font-weight:800;
  background:var(--line-2);color:var(--muted);border-radius:999px;padding:.1rem .45rem}
table.vh-grid tbody th .util.warm{background:#fff4e2;color:var(--amber)}
table.vh-grid tbody th .util.hot{background:#e6f5ec;color:var(--green)}
table.vh-grid td{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);
  padding:.35rem;vertical-align:top;cursor:pointer;transition:.1s;min-width:105px}
table.vh-grid td:hover{background:#f7faf7}
table.vh-grid td.today{background:#fffaf4}
table.vh-grid td.today:hover{background:#fff3e6}
.vh-free{color:#c4cfc7;font-size:.74rem;text-align:center;padding:.5rem 0;font-style:italic}
tr.vh-orphan th{background:#fff8e8}
tr.vh-orphan th .util.hot{background:#fdecea;color:var(--red)}

/* ---------- Seat gauge (departures.js) ---------- */
.seat-gauge{min-width:150px}
.seat-gauge .bar{position:relative;height:8px;background:var(--line-2);border-radius:99px;
  overflow:hidden}
.seat-gauge .fill{height:100%;border-radius:99px;transition:width .25s}
.seat-gauge .fill.low{background:linear-gradient(90deg,#d98b6a,#c2760a)}
.seat-gauge .fill.ok{background:linear-gradient(90deg,var(--gold),var(--brand))}
.seat-gauge .fill.full{background:linear-gradient(90deg,#2f9e5f,var(--green))}
.seat-gauge .fill.over{background:linear-gradient(90deg,#e06552,var(--red))}
.seat-gauge .notch{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);
  opacity:.45;border-radius:2px}
.seat-gauge .lbl{font-size:.74rem;margin-top:.28rem;color:var(--muted);line-height:1.3}
.seat-gauge .lbl b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.seat-gauge.compact{min-width:120px}
.seat-gauge.compact .bar{height:6px}

/* ---------- Departure rows (departures.js board) ---------- */
.dep-row{border-bottom:1px solid var(--line-2)}
.dep-row:last-child{border-bottom:none}
.dep-main{display:flex;gap:.9rem;padding:.85rem 1.1rem;cursor:pointer;align-items:center;
  transition:.12s}
.dep-main:hover{background:#f7faf7}
.dep-time{font-weight:800;font-size:.9rem;width:3.4rem;flex:none;
  font-variant-numeric:tabular-nums;color:var(--brand-dark)}
.dep-core{flex:1;min-width:0}
.dep-core b{display:block;font-size:.92rem;line-height:1.3}
.dep-core .l2{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.dep-seats{flex:none}
.dep-status{flex:none;width:6.5rem;text-align:right}
.dep-parties{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1.1rem .8rem 5.4rem}
.dep-party{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:.22rem .6rem;font:inherit;font-size:.76rem;
  cursor:pointer;color:var(--ink);transition:.12s}
.dep-party:hover{border-color:var(--brand);color:var(--brand-dark)}
.dep-party .n{font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Wizard ---------- */
.wizard{display:grid;grid-template-columns:250px 1fr;gap:1.4rem;align-items:start}
.steps{position:sticky;top:82px}
.steps ol{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:.7rem;padding:.55rem .6rem;border-radius:10px;cursor:pointer;color:#4e6157;
  font-size:.86rem;font-weight:600;align-items:flex-start}
.steps li:hover{background:var(--line-2)}
.steps li.active{background:var(--brand-soft);color:var(--brand-dark)}
.steps li .n{width:26px;height:26px;border-radius:50%;border:2px solid #ccd8d0;display:grid;
  place-items:center;font-size:.78rem;flex:none;background:#fff;color:#6a7d73;transition:.15s}
.steps li.active .n{border-color:var(--brand);color:var(--brand)}
.steps li.done .n{background:var(--green);border-color:var(--green);color:#fff}
.steps li small{display:block;font-weight:500;color:#93a49a;font-size:.72rem}
.wizard-panel{min-width:0}
.step-head{margin-bottom:1.2rem}
.step-head h2{font-size:1.25rem}
.step-head p{color:var(--muted);margin:.3rem 0 0}
.wizard-foot{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;padding-top:1.2rem;
  border-top:1px solid var(--line-2)}
.wizard-foot .spacer{flex:1}
.progressbar{height:6px;background:var(--line-2);border-radius:99px;overflow:hidden;margin-bottom:1.2rem}
.progressbar > span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--gold));transition:.3s}

/* selectable product tile inside the wizard / public page */
.pick{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .95rem;cursor:pointer;
  background:#fff;transition:.12s;display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.55rem}
.pick:hover{border-color:#c2cfc6;background:#fafbf9}
.pick.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
.pick .tick{width:22px;height:22px;border:2px solid #c2cfc6;border-radius:50%;flex:none;
  display:grid;place-items:center;margin-top:1px;color:#fff;transition:.12s}
.pick.on .tick{background:var(--brand);border-color:var(--brand)}
.pick .tick svg{opacity:0}
.pick.on .tick svg{opacity:1}
.pick .txt{flex:1;min-width:0}
.pick .txt b{display:block;font-size:.9rem;line-height:1.3}
.pick .txt small{color:var(--muted);font-size:.78rem;display:block;margin-top:.15rem;line-height:1.4}
.pick .amt{flex:none;font-weight:800;color:var(--brand-dark);font-size:.9rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
.pick .amt small{display:block;font-weight:500;color:var(--muted);font-size:.7rem}

/* ---------- Modal / overlay ---------- */
.overlay{position:fixed;inset:0;background:rgba(16,35,26,.55);backdrop-filter:blur(2px);z-index:100;
  display:grid;place-items:center;padding:1.5rem;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;
  max-width:580px;max-height:90vh;overflow:auto;animation:pop .18s}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal.wide{max-width:920px}
.modal-head{display:flex;align-items:center;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-2)}
.modal-head h3{font-size:1.05rem}
.modal-head .x{margin-left:auto;background:none;border:none;cursor:pointer;font-size:1.4rem;
  color:var(--muted);line-height:1}
.modal-body{padding:1.4rem}
.modal-foot{padding:1rem 1.4rem;border-top:1px solid var(--line-2);display:flex;gap:.6rem;
  justify-content:flex-end;flex-wrap:wrap}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:110}

/* ---------- Toast ---------- */
#toasts{position:fixed;bottom:1.2rem;right:1.2rem;z-index:200;display:flex;flex-direction:column;gap:.6rem}
.toast{background:var(--bush-800);color:#fff;padding:.8rem 1.1rem;border-radius:10px;
  box-shadow:var(--shadow-lg);font-size:.88rem;display:flex;gap:.6rem;align-items:center;
  animation:slide .2s;max-width:340px}
@keyframes slide{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.ok{background:#125c33}.toast.err{background:#8c281c}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(1100px 620px at 15% -10%,#2c5c41 0,transparent 62%),
             radial-gradient(900px 520px at 100% 100%,#b8621b 0,transparent 58%),var(--bush-900)}
.login-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:420px;padding:2.2rem;animation:pop .2s}
/* .brand is the SIDEBAR block re-used on a WHITE card, so both its layout and
   its colours must be overridden here — b is white for the green sidebar. */
.login-card .brand{border:none;padding:0;margin:0 0 1.4rem;
  flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.login-card .brand b{color:var(--ink);font-size:1.05rem}
.login-card .brand span{color:var(--muted);font-size:.79rem}
.login-card h2{font-size:1.3rem;margin-bottom:.3rem;text-align:center}
.login-card .lead{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem;text-align:center}
.demo-note{margin-top:1.2rem;font-size:.8rem;color:var(--muted);background:#fafbf9;padding:.85rem;
  border-radius:10px;border:1px solid var(--line);line-height:1.5}
.demo-note code{background:#eef2ef;padding:.05rem .3rem;border-radius:4px;font-size:.92em}

/* ---------- Empty / loading ---------- */
.empty{text-align:center;padding:3rem 1.5rem;color:var(--muted)}
.empty svg{width:46px;height:46px;opacity:.32;margin-bottom:.7rem}
.empty p{margin:0 0 1rem}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;margin:2rem auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===========================================================================
   PUBLIC BOOKING PAGE (book.html)
   A different animal from the staff app: one column, big targets, no sidebar,
   works on a 360px phone held one-handed in poor signal.
   =========================================================================== */
.pub{max-width:660px;margin:0 auto;padding:0 1rem 4rem}
.pub-hero{background:linear-gradient(150deg,var(--bush-900),var(--bush-700) 55%,var(--brand-dark));
  color:#fff;padding:2.2rem 1.2rem 2.6rem;text-align:center;margin-bottom:-1.6rem}
.pub-hero .logo-img{height:112px;width:112px;object-fit:contain;background:#fff;
  border-radius:18px;padding:6px;margin-bottom:.9rem;box-shadow:var(--shadow-md)}
.pub-hero h1{color:#fff;font-size:1.5rem;line-height:1.25}
.pub-hero p{color:#c3d6c9;margin:.45rem 0 0;font-size:.92rem}
.pub-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:1.4rem;position:relative}
.pub-tabs{display:flex;gap:.4rem;background:#eef2ef;padding:.32rem;border-radius:999px;margin-bottom:1.4rem}
.pub-tabs button{flex:1;border:none;background:none;padding:.6rem .5rem;border-radius:999px;
  font:inherit;font-size:.87rem;font-weight:700;color:var(--muted);cursor:pointer;transition:.14s}
.pub-tabs button.on{background:#fff;color:var(--brand-dark);box-shadow:var(--shadow-sm)}
.pub-foot{text-align:center;padding:1.6rem 1rem;color:var(--muted);font-size:.82rem;line-height:1.7}
.pub-foot a{font-weight:600}
.pub-contact{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.8rem}
.pub-contact a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:.45rem .9rem;font-size:.83rem;font-weight:600;
  color:var(--ink)}
.pub-contact a:hover{border-color:var(--brand);color:var(--brand-dark)}
.pub-done{text-align:center;padding:1rem .5rem}
.pub-done .tick{width:64px;height:64px;border-radius:50%;background:#e6f5ec;color:var(--green);
  display:grid;place-items:center;margin:0 auto 1rem}
.pub-done h2{font-size:1.3rem;margin-bottom:.5rem}
.pub-done p{color:var(--muted);line-height:1.6;margin:0 0 .8rem}
.pub-done .ref{display:inline-block;background:var(--bush-800);color:#fff;font-weight:800;
  letter-spacing:.06em;padding:.5rem 1.1rem;border-radius:10px;font-size:1.05rem;margin:.4rem 0 1rem}

/* ===========================================================================
   PRINTED DOCUMENTS — quote, invoice, voucher (screen preview + print)
   =========================================================================== */
.doc-sheet{background:#fff;max-width:860px;margin:0 auto;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden;font-size:13.5px;color:#1a2620}
.doc-band{background:linear-gradient(120deg,var(--bush-900),var(--bush-700));color:#fff;
  padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1.4rem;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-band .brandline{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:#a9c2b3;font-weight:800}
.doc-band h1{font-size:1.6rem;margin:.2rem 0 .5rem;color:#fff}
.doc-band .meta{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.82rem}
.doc-band .meta .l{color:#a9c2b3;text-transform:uppercase;font-size:.6rem;letter-spacing:.08em;display:block}
.doc-band .meta b{color:#fff;font-variant-numeric:tabular-nums}
.doc-band .logo-img{height:78px;width:78px;object-fit:contain;background:#fff;
  border-radius:10px;padding:4px;flex:none}
.doc-body{padding:1.5rem 2rem 2rem}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.3rem}
.dbox{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.dbox-h{background:#f4f7f4;border-bottom:1px solid var(--line);padding:.5rem .85rem;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--bush-700)}
.dbox-b{padding:.75rem .85rem}
.dbox-b p{margin:.2rem 0}
table.doc-items{width:100%;border-collapse:collapse;margin:.2rem 0 1rem;font-size:.86rem}
table.doc-items th{background:var(--bush-800);color:#fff;text-align:left;padding:.55rem .7rem;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
table.doc-items th.r,table.doc-items td.r{text-align:right}
table.doc-items td{padding:.55rem .7rem;border-bottom:1px solid var(--line-2);vertical-align:top;
  font-variant-numeric:tabular-nums}
table.doc-items tbody tr:last-child td{border-bottom:1px solid var(--line)}
table.doc-items td small{color:var(--muted);display:block;font-size:.76em}
.doc-totals{width:330px;max-width:100%;margin-left:auto;font-size:.9rem}
.doc-totals .row{display:flex;justify-content:space-between;gap:1.5rem;padding:.3rem 0}
.doc-totals .row span{color:var(--muted)}
.doc-totals .row b{font-variant-numeric:tabular-nums}
.doc-totals .row.grand{border-top:2px solid var(--bush-800);margin-top:.4rem;padding-top:.55rem;font-size:1.15rem}
.doc-totals .row.grand span{color:var(--ink);font-weight:800}
.doc-terms{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);line-height:1.6}
.doc-terms h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:.4rem}
.doc-terms ol{margin:.2rem 0;padding-left:1.1rem}
.doc-terms li{margin-bottom:.25rem}

/* The printed/PDF copy of a signed disclaimer — plain wrapped text, not a
   list, because it is a verbatim snapshot of what the guest was shown. */
.waiver-text{white-space:pre-wrap;font:inherit;font-size:.86rem;line-height:1.6;
  background:#fbfbf9;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem 1.1rem;margin:0}

/* ============================= Sign on glass ============================= */
/* touch-action:none stops the page scrolling under a finger mid-stroke — the
   single most important line here on an actual tablet. */
.sigpad{position:relative;border:2px dashed var(--line-2);border-radius:var(--radius);
  background:#fbfbf9;overflow:hidden}
.sigpad-canvas{display:block;width:100%;touch-action:none;cursor:crosshair}
.sigpad-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.85rem;pointer-events:none;text-align:center;padding:0 1rem}
.sigpad.has-ink .sigpad-hint{display:none}

/* ==================== Vehicle checklist (checklist.html) ==================== */
.tyre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:.5rem}
.tyre-card{background:#fbfbf9}
.tyre-card-title{font-weight:800;font-size:.85rem;margin-bottom:.6rem}
.tyre-card .chips{margin-bottom:.4rem}
.tyre-card .chips:last-child{margin-bottom:0}
.checklist-row{padding:.9rem 0;border-bottom:1px solid var(--line-2)}
.checklist-row:last-child{border-bottom:none}
.checklist-row-label{font-weight:600;font-size:.88rem;margin-bottom:.5rem}

/* ============================= Responsive ============================= */

/* Tablets and below: the drawer AND the two-column collapse happen together,
   so there is never a width where a form spills off the edge. */
@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(290px,86vw);z-index:120;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .hamburger{display:block}
  .content{padding:1.15rem}
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .pipeline{grid-template-columns:repeat(2,1fr)}
  /* The month grid stays seven columns — a calendar that is not a week wide is
     not a calendar — but the cells get shorter and the chips lose their times. */
  .cal-cell{min-height:92px}
  .cal-chip .t{display:none}
  /* Week view stacks: seven readable rows beat seven unreadable columns. */
  .wk-grid{grid-template-columns:1fr}
  .wk-col{min-height:0}
  .wk-head{display:flex;align-items:center;gap:.5rem;text-align:left}
  .wk-head b,.wk-head span{display:inline}
  /* 16px avoids iOS zooming the page on focus */
  input,select,textarea{font-size:16px}
  .toolbar .search{flex:1 1 100%;min-width:0}
  .toolbar select,.toolbar input{max-width:none;flex:1 1 auto}
  /* wizard steps become a horizontal strip above the panel */
  .wizard{grid-template-columns:1fr}
  .steps{position:static}
  .steps ol{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:.4rem;padding-bottom:.5rem}
  .steps li{flex:none;flex-direction:column;align-items:center;text-align:center;min-width:84px}
  .steps li small{display:none}
}

/* Small tablets / large phones → documents become one readable column */
@media (max-width:768px){
  .tyre-grid{grid-template-columns:repeat(2,1fr)}
  .doc-sheet{border-radius:10px}
  .doc-band{flex-direction:column;align-items:flex-start;padding:1.3rem 1.4rem;gap:1rem}
  .doc-band h1{font-size:1.4rem}
  .doc-body{padding:1.3rem 1.4rem 1.6rem}
  .doc-grid{grid-template-columns:1fr;gap:1rem}
  .modal-body{padding:1.1rem}
  .modal-head,.modal-foot{padding:1rem 1.1rem}
}

/* Phones → single column everywhere so nothing is cramped */
@media (max-width:600px){
  .form-grid,.form-grid.cols-3{grid-template-columns:1fr}
  .tyre-grid{grid-template-columns:1fr}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .pipeline{grid-template-columns:1fr}
  .pipe-col{min-height:0}
  .content{padding:.85rem}
  .topbar{padding:.7rem 1rem;gap:.6rem}
  .topbar h1{font-size:1.05rem}
  .topbar .sub{display:none}
  .topbar .btn.secondary{display:none}      /* Dashboard lives in the menu on phones */
  .card.pad{padding:1.1rem}
  .card-head{padding:.9rem 1.1rem}
  .card-body{padding:1.1rem}
  .card-head h3{font-size:1.04rem}
  .grid{gap:1rem}
  .stat{padding:1rem}
  .stat .v{font-size:1.65rem}
  table.data{font-size:.82rem;min-width:520px}
  table.data th,table.data td{padding:.6rem .7rem}
  .tour-grid{grid-template-columns:1fr}
  /* Phone month grid: the day number and a count dot are all that fit. Tapping
     the day opens the detail panel, which is the real interaction on a phone. */
  .cal-cell{min-height:62px;padding:.25rem}
  .cal-chips{display:none}
  .cal-more{display:none}
  .cal-daynum{justify-content:center;gap:.25rem;font-size:.78rem}
  .cal-dow{padding:.35rem .2rem;font-size:.6rem}
  .cal-period{font-size:1rem;min-width:0}
  .cal-bar{gap:.5rem}
  .cal-totals{gap:.3rem .9rem;font-size:.78rem}
  .dep-main{flex-wrap:wrap;padding:.75rem .9rem;gap:.6rem}
  .dep-status{width:auto;text-align:left}
  .dep-seats{flex:1 1 100%}
  .dep-parties{padding-left:.9rem}
  .trip{padding:.8rem .9rem;gap:.7rem}
  .trip .time{width:2.9rem;font-size:.85rem}
  /* modals go near-fullscreen for easy thumb use */
  .overlay{padding:0;place-items:stretch}
  .modal,.modal.wide{max-width:none;max-height:100vh;height:100%;border-radius:0}
  .modal-foot{flex-direction:column-reverse;gap:.5rem}
  .modal-foot .btn{width:100%}
  .btn-row .btn{flex:1 1 auto}
  .doc-totals{width:100%}
  .login-card{padding:1.6rem}
  .pub-card{padding:1.1rem;border-radius:var(--radius)}
  .pub-hero{padding:1.7rem 1rem 2.4rem}
  .pub-hero h1{font-size:1.28rem}
  .kv{grid-template-columns:1fr;gap:.1rem .5rem}
  .kv dt{margin-top:.5rem}
}

/* Touch devices: bigger, thumb-friendly hit areas everywhere */
@media (pointer:coarse){
  .btn{min-height:44px;padding:.72rem 1.15rem}
  .btn.sm{min-height:38px;padding:.5rem .9rem}
  .btn.lg{min-height:52px}
  .nav a{padding:.8rem .85rem}
  .chip{padding:.55rem 1rem;font-size:.9rem}
  .pick{padding:1rem 1.05rem}
  .pick .tick{width:26px;height:26px}
  input,select,textarea{padding:.72rem .8rem}
  .stepper-b{padding:0 1rem}
  .stepper-v{padding:.7rem .2rem}
  table.data tbody td{padding:.85rem .9rem}
  .modal-head .x{padding:.3rem .5rem;font-size:1.7rem}
  .pub-tabs button{padding:.75rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================= Print ============================= */
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff}
  .sidebar,.topbar,.wizard-foot,.no-print,#toasts,.steps,.toolbar,.pub-tabs{display:none !important}
  .app{display:block}
  .content{padding:0;max-width:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .doc-sheet{box-shadow:none;border:none;max-width:none;margin:0;border-radius:0}
  .doc-body{padding:0}
  .doc-band{border-radius:0}
  .card{box-shadow:none;break-inside:avoid}
  .day-block{break-inside:avoid}
  a[href]::after{content:""}
}