/* ═══ Routelink hub — base: tokens · reset · type · buttons · cards · tables ═══
   Visual system per app/reference/v04-app.html (frozen v0.4 design language). */
:root{
  --ink:#1B2653; --deep:#0E1633; --navy:#16204A; --panel:#1C2A5E;
  --cream:#F4F1E9; --teal:#1FC0BE; --teal-b:#2ED3CF; --teal-d:#149E9C;
  --orange:#E2683C; --red:#D14343; --amber:#D97706; --green:#1F9D55;
  --mut:#54697C; --mut-l:#9FAAC8; --line:#E3DFD2; --bg:#F7F5EF;
  --radius:13px; --shadow-pop:0 24px 70px rgba(14,22,51,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.45;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid #D8D3C4;border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);border-color:transparent}
[hidden]{display:none !important}
a{color:var(--teal-d)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- type ---------- */
h1{font-size:19px;font-weight:600;letter-spacing:-.2px}
h2{font-size:15px;font-weight:600;margin-bottom:8px}
.sub{color:var(--mut);font-size:12.5px;margin-top:2px}
.sub2{color:var(--mut);font-size:11px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- cards & tables ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.tablecard{padding:0;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12.6px}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);text-align:left;padding:7px 9px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:7px 9px;border-bottom:1px solid #EFEBDF;vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover td{background:#FBF9F2}
.note{background:var(--cream);border:1px solid #E3DCC8;border-radius:10px;padding:10px 14px;font-size:12px;color:var(--mut);margin:10px 0}
.empty{padding:34px;text-align:center;color:var(--mut);font-size:13px}
.empty b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.errbox{background:#F5E9E9;border:1px solid #E5C4C4;color:var(--red);border-radius:10px;padding:14px;font-size:12.5px;text-align:center}
.errbox .btn{margin-top:10px}

/* ---------- status pills ---------- */
.st{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;letter-spacing:.4px;white-space:nowrap}
.st.CONFIRMED{background:#E6F6F0;color:var(--green)}
.st.CHECKED-IN,.st.CHECKEDIN{background:#E0F5F4;color:var(--teal-d)}
.st.PENDING{background:#FFF4E0;color:var(--amber)}
.st.CANCEL-REQ,.st.CANCELREQ{background:#FDEBE3;color:var(--orange)}
.st.CANCELLED{background:#F5E9E9;color:var(--red)}
.st.REFUNDED{background:#EEEAF7;color:#6D28D9}
.st.NO-SHOW,.st.NOSHOW{background:#EDEDED;color:#555}
.pill{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;padding:2px 9px;border-radius:999px}
.pill.demo{background:var(--orange);color:#fff}
.rolechip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:var(--teal);color:#06272B}

/* ---------- buttons ---------- */
.btn{background:var(--ink);color:#fff;font-weight:600;font-size:12.5px;padding:8px 15px;border-radius:9px}
.btn.teal{background:var(--teal);color:#06272B}
.btn.ghost{background:#fff;border:1px solid #D8D3C4;color:var(--ink);font-weight:500}
.btn.warn{background:var(--orange)}
.btn.danger{background:var(--red)}
.btn.sm{padding:4px 10px;font-size:11.5px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- filters & segmented controls ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input[type=search],.filters input[type=text]{width:230px}
.seg{display:inline-flex;background:#ECE8DC;border-radius:9px;padding:3px;gap:2px}
.seg button{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:500;color:var(--mut)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- KPI strip ---------- */
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 16px;min-width:118px}
.kpi b{display:block;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.kpi span{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);white-space:nowrap}
.kpi.amber{border-color:#EAC98F;background:#FFF9EE}
.kpi.amber b{color:var(--amber)}

/* ---------- forms (modal grids) ---------- */
.formgrid{display:grid;grid-template-columns:120px 1fr;gap:9px 12px;align-items:center;margin:14px 0;font-size:12.8px}
.formgrid label{color:var(--mut);font-size:12px}
.formgrid input,.formgrid select{width:100%}
.formerr{background:#F5E9E9;border:1px solid #E5C4C4;color:var(--red);border-radius:9px;padding:9px 12px;font-size:12.5px;margin:10px 0}
.formfoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
.formfoot .total{margin-right:auto}
.formfoot .total .sub{font-size:11px}
.formfoot .total b{font-size:17px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:4px 10px;font-size:12.8px;margin:10px 0}
.kv span{color:var(--mut)}.kv b{font-weight:500}

@media(max-width:700px){
  html,body{overflow-x:hidden}
  .pagehead{align-items:flex-start;flex-direction:column}
  .kv{grid-template-columns:105px 1fr}
  .formgrid{grid-template-columns:100px 1fr}
  .card{overflow-x:auto}   /* wide tables scroll inside their card, never the page */
}