/* ============================================================
   SilkWay ERP — Design System
   Brand: navy #1B3A6B + gold #C8922A
   Type: IBM Plex Sans (UI) + IBM Plex Mono (codes)
   ============================================================ */

:root {
  /* Brand */
  --navy-900: #122a4f;
  --navy-800: #173258;
  --navy: #1B3A6B;
  --navy-600: #234a85;
  --navy-500: #2D5FA6;
  --navy-400: #4a7bc2;
  --navy-100: #e6eefb;
  --navy-50: #f1f6fe;

  --gold-700: #9c6f1d;
  --gold: #C8922A;
  --gold-500: #d6a23e;
  --gold-300: #ecc878;
  --gold-100: #f7ecd2;
  --gold-50: #fbf6ea;

  /* Neutrals (cool slate) */
  --ink: #16202e;
  --ink-2: #33414f;
  --muted: #647689;
  --muted-2: #8a99a8;
  --line: #e3e8ef;
  --line-2: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --bg: #f3f5f9;
  --sidebar: #16294a;
  --sidebar-2: #1d3458;

  /* Status */
  --green: #1f8a52;
  --green-bg: #e4f3ea;
  --red: #c4382f;
  --red-bg: #fae8e6;
  --amber: #b9791a;
  --amber-bg: #fbeed3;
  --blue: #2563b8;
  --blue-bg: #e3eefc;
  --violet: #6248b5;
  --violet-bg: #ece8fa;
  --teal: #0e8079;
  --teal-bg: #d9f1ef;
  --slate: #5a6b7d;
  --slate-bg: #eaeef3;

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(18,32,46,.06), 0 1px 3px rgba(18,32,46,.05);
  --shadow: 0 2px 6px rgba(18,32,46,.07), 0 8px 24px -12px rgba(18,32,46,.16);
  --shadow-lg: 0 12px 40px -8px rgba(18,32,46,.28);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.45;
}
button { font-family: inherit; }
::selection { background: var(--gold-100); color: var(--navy-900); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd4df; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #aab6c4; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

#root { height: 100vh; overflow: hidden; }

/* ============================================================ App shell */
.app { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }

.sidebar {
  background: var(--sidebar);
  color: #c9d6ea;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 18px 16px;
}
.sb-brand img { width: 34px; height: 40px; object-fit: contain; }
.sb-brand .wm { line-height: 1; }
.sb-brand .wm b { display: block; color: #fff; font-weight: 700; letter-spacing: .14em; font-size: 16px; }
.sb-brand .wm span { display: block; color: var(--gold-300); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; margin-top: 3px; }

.sb-scroll { flex: 1; overflow-y: auto; padding: 4px 12px 16px; }
.sb-group { margin-top: 16px; }
.sb-group h6 {
  margin: 0 0 6px; padding: 0 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #6f86a8; font-weight: 600;
}
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 8px;
  color: #b3c4dc; font-size: 13.5px; font-weight: 500;
  cursor: pointer; position: relative; user-select: none;
  transition: background .12s, color .12s;
}
.sb-item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }
.sb-item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover { background: rgba(255,255,255,.05); color: #e7eefb; }
.sb-item.active { background: rgba(45,95,166,.32); color: #fff; }
.sb-item.active::before {
  content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--gold);
}
.sb-item .count {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  background: rgba(255,255,255,.1); color: #cdd9ec;
  padding: 1px 7px; border-radius: 20px; font-weight: 500;
}
.sb-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; cursor: pointer; }
.sb-user:hover { background: rgba(255,255,255,.05); }
.sb-user .nm { line-height: 1.25; }
.sb-user .nm b { display: block; color: #eaf1fb; font-size: 12.5px; font-weight: 600; }
.sb-user .nm span { display: block; color: #7e93b3; font-size: 11px; }
.sb-logout { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: none; background: transparent; color: #7e93b3; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.sb-logout:hover { background: rgba(255,255,255,.08); color: #eaf1fb; }

/* main */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; background: var(--bg); }

.topbar {
  height: 58px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px; background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.crumb b { color: var(--ink); font-weight: 600; }
.crumb .sep { color: var(--muted-2); }

.gsearch {
  margin-left: 8px; flex: 1; max-width: 520px; position: relative;
}
.gsearch input {
  width: 100%; height: 38px; border: 1px solid var(--line);
  background: var(--surface-2); border-radius: 9px;
  padding: 0 12px 0 38px; font-size: 13px; font-family: var(--sans); color: var(--ink);
  transition: border .12s, box-shadow .12s, background .12s;
}
.gsearch input:focus { outline: none; border-color: var(--navy-400); background: #fff; box-shadow: 0 0 0 3px var(--navy-100); }
.gsearch input::placeholder { color: var(--muted-2); }
.gsearch .si { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); width: 16px; height: 16px; }
.gsearch kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line); background: #fff; border-radius: 5px; padding: 2px 6px;
}

.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tb-search-btn { display: none; }   /* shown only where the search box is hidden (mobile) */
.icon-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); cursor: pointer;
  display: grid; place-items: center; position: relative; transition: all .12s;
}
.icon-btn:hover { color: var(--navy); border-color: var(--navy-100); background: var(--navy-50); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); border: 1.5px solid #fff; }

.content { flex: 1; overflow-y: auto; overflow-x: hidden; }
.page { padding: 24px 28px 40px; max-width: 1520px; margin: 0 auto; }

/* ============================================================ Typo helpers */
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.page-head .sub { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.page-head .right { margin-left: auto; display: flex; gap: 9px; align-items: center; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* code chips */
.code {
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.code.clt { color: var(--navy); background: var(--navy-100); }
.code.pkg { color: var(--gold-700); background: var(--gold-100); }
.code.htl { color: var(--teal); background: var(--teal-bg); }
.code.car { color: var(--violet); background: var(--violet-bg); }
.code.lg { font-size: 13.5px; padding: 4px 11px; border-radius: 8px; }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  white-space: nowrap; line-height: 1.5;
}
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* A badge that is also a <select>: the native control sits invisibly on top so
   the pill keeps its colour and the picker keeps its native behaviour. */
.badge.statuspick { position: relative; cursor: pointer; padding-right: 7px; }
.badge.statuspick:hover { filter: brightness(0.96); }
.badge.statuspick select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none; font: inherit;
}
.badge.green { color: var(--green); background: var(--green-bg); }
.badge.red { color: var(--red); background: var(--red-bg); }
.badge.amber { color: var(--amber); background: var(--amber-bg); }
.badge.blue { color: var(--blue); background: var(--blue-bg); }
.badge.violet { color: var(--violet); background: var(--violet-bg); }
.badge.teal { color: var(--teal); background: var(--teal-bg); }
.badge.slate { color: var(--slate); background: var(--slate-bg); }
.badge.gold { color: var(--gold-700); background: var(--gold-100); }
.badge.navy { color: var(--navy); background: var(--navy-100); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); background: #fff;
}
.tag.vip { color: var(--gold-700); border-color: var(--gold-300); background: var(--gold-50); }
.tag.repeat { color: var(--teal); border-color: #aee0db; background: var(--teal-bg); }
.tag.new { color: var(--blue); border-color: #b9d3f5; background: var(--blue-bg); }
.tag.problem { color: var(--red); border-color: #f0c3bf; background: var(--red-bg); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  height: 38px; padding: 0 15px; border-radius: 9px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: all .12s; white-space: nowrap; user-select: none;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { border-color: #cfd8e3; background: var(--surface-2); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(27,58,107,.25); }
.btn.primary:hover { background: var(--navy-600); border-color: var(--navy-600); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.gold:hover { background: var(--gold-700); border-color: var(--gold-700); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-bg); border-color: #f0c3bf; }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.card-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); }
.card-head .hint { font-size: 12px; color: var(--muted); }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* a search box that lives in a card header, pushed to the right */
.dl-search { margin-left: auto; display: flex; align-items: center; gap: 7px; padding: 0 10px; height: 34px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); min-width: 200px; max-width: 320px; flex: 0 1 280px; }
.dl-search:focus-within { border-color: var(--navy-400); box-shadow: 0 0 0 3px var(--navy-50); }
.dl-search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.dl-search-x { border: none; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; padding: 2px; }
.dl-search-x:hover { color: var(--ink); }
.card-head.has-search { flex-wrap: wrap; }
@media (max-width: 640px) {
  .dl-search { margin-left: 0; flex: 1 1 100%; max-width: none; }
}

.grid { display: grid; gap: 16px; }

/* stat cards */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat .lbl { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat .lbl .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.stat .val { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .val small { font-size: 14px; font-weight: 600; color: var(--muted); }
.stat .delta { font-size: 12px; font-weight: 600; margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.stat .delta.up { color: var(--green); }
.stat .delta.down { color: var(--red); }
.stat-clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.stat-clickable:hover { border-color: var(--navy-400); box-shadow: 0 4px 14px -4px rgba(27,58,107,.22); }
.stat-clickable:hover .stat-go { opacity: 1; transform: translateX(0); }
.stat .stat-go { margin-left: auto; color: var(--muted-2); opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl thead th {
  text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0; white-space: nowrap;
}
table.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: middle; }
table.tbl tbody tr { transition: background .1s; }
table.tbl tbody tr:hover { background: var(--navy-50); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; }

/* a sortable table header */
table.tbl thead th.dl-sortable { cursor: pointer; user-select: none; }
table.tbl thead th.dl-sortable:hover { color: var(--ink-2); background: var(--navy-50); }
.dl-sort-ar { display: inline-block; margin-left: 5px; font-size: 9px; opacity: .35; vertical-align: middle; }
.dl-sort-ar.on { opacity: 1; color: var(--navy-400); }
/* phone: the sort control that stands in for clickable headers */
.dl-sortbar { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; font-size: 12.5px; }
.dl-sortbar select { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.dl-sortbar .btn.sm { min-width: 34px; }
.t-strong { font-weight: 600; color: var(--ink); }

/* avatar */
.avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex: 0 0 auto; font-size: 12px; letter-spacing: .02em; }

/* segmented / tabs */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: none; background: transparent; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 7px; cursor: pointer; transition: all .12s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button { border: none; background: transparent; padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; display: flex; align-items: center; gap: 8px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--navy); }
.tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; background: var(--gold); border-radius: 3px 3px 0 0; }
.tabs button .pill { font-family: var(--mono); font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); border-radius: 20px; padding: 0 6px; min-width: 18px; text-align: center; }
.tabs button.on .pill { background: var(--navy-100); border-color: transparent; color: var(--navy); }

/* select / input (forms) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.field > label .req { color: var(--red); }
.field .hint { font-size: 11.5px; color: var(--muted-2); }
.input, .select, textarea.input {
  height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  padding: 0 12px; font-size: 13px; font-family: var(--sans); color: var(--ink); width: 100%;
  transition: border .12s, box-shadow .12s;
}
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--navy-400); box-shadow: 0 0 0 3px var(--navy-100); }
.input.locked { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.input.auto { background: var(--gold-50); border-color: var(--gold-300); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647689' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }
.input-ic { position: relative; }
.input-ic svg { position: absolute; left: 11px; top: 50%; transform: translatey(-50%); width: 16px; height: 16px; color: var(--muted-2); }
.input-ic .input { padding-left: 36px; }
/* date field: hide native indicator, our leading calendar icon + caret open the picker */
.input-ic.date-ic { cursor: pointer; }
.input-ic.date-ic .input { cursor: pointer; padding-left: 38px; padding-right: 30px; font-variant-numeric: tabular-nums; }
.input-ic.date-ic > svg:first-child { color: var(--navy); width: 16px; height: 16px; pointer-events: none; transition: color .12s; }
.input-ic.date-ic:hover > svg:first-child { color: var(--gold-700); }
.input-ic.date-ic:hover .input { border-color: var(--navy-300); }
.input-ic.date-ic .date-caret { position: absolute; right: 6px; left: auto; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: none; background: transparent; color: var(--muted-2); cursor: pointer; border-radius: 6px; padding: 0; transition: background .12s, color .12s; }
.input-ic.date-ic .date-caret svg { width: 14px; height: 14px; transform: rotate(90deg); }
.input-ic.date-ic .date-caret:hover { background: var(--navy-50); color: var(--navy); }
.input-ic.date-ic input[type=date]::-webkit-calendar-picker-indicator { opacity: 0; -webkit-appearance: none; appearance: none; }
.input-ic.date-ic input[type=date]::-webkit-datetime-edit { color: var(--ink); }
.input-ic.date-ic input[type=date]:required:invalid::-webkit-datetime-edit { color: var(--muted-2); }
/* any remaining plain date inputs: tint the native picker icon navy */
input[type=date].input:not(.date-ic *)::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(18%) sepia(38%) saturate(1400%) hue-rotate(187deg); }

/* drawer / modal */
.scrim { position: fixed; inset: 0; background: rgba(18,32,46,.42); backdrop-filter: blur(2px); z-index: 50; opacity: 0; animation: fade .18s forwards; }
@keyframes fade { to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 94vw;
  background: var(--bg); z-index: 51; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(20px); opacity: 0; animation: slidein .22s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes slidein { to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.drawer-head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-foot { display: flex; gap: 10px; padding: 14px 20px; background: #fff; border-top: 1px solid var(--line); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-sec { margin-bottom: 6px; }
.form-sec h4 { margin: 18px 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.form-sec:first-child h4 { margin-top: 0; }
.form-sec h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* alert inline */
.alert { display: flex; gap: 10px; padding: 11px 13px; border-radius: 9px; font-size: 12.5px; align-items: flex-start; }
.alert svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.alert.warn { background: var(--amber-bg); color: #8a5a12; }
.alert.info { background: var(--navy-50); color: var(--navy-600); }
.alert.danger { background: var(--red-bg); color: #92271f; }
.alert.ok { background: var(--green-bg); color: #14613a; }

/* misc */
.kv { display: flex; flex-direction: column; gap: 3px; }
.kv .k { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kv .v { font-size: 14px; color: var(--ink); font-weight: 600; }
.divider { height: 1px; background: var(--line); margin: 0; border: none; }
.vdivider { width: 1px; align-self: stretch; background: var(--line); }
.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stars { display: inline-flex; gap: 1px; color: var(--gold); }
.stars svg { width: 14px; height: 14px; }
.stars .off { color: #d8dee6; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty svg { width: 34px; height: 34px; color: var(--muted-2); margin-bottom: 10px; }

.filterbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.chip-select { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.chip-select:hover { border-color: #cfd8e3; }
.chip-select svg { width: 15px; height: 15px; color: var(--muted); }
.chip-select select { border: none; background: transparent; font: inherit; color: inherit; cursor: pointer; outline: none; }
.chip-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 9px; background: var(--navy-50); color: var(--ink-2); font-size: 12px; font-weight: 500; }
.chip-stat b { font-size: 15px; font-weight: 800; color: var(--navy); }

/* progress / mini bar */
.pbar { height: 7px; border-radius: 6px; background: var(--line); overflow: hidden; position: relative; }
.pbar > i { display: block; height: 100%; border-radius: 6px; }
/* comparison notch: where the same measure sat in the comparison period */
.pbar-mark { position: absolute; top: -1px; bottom: -1px; width: 2px; border-radius: 2px; background: var(--ink); opacity: .45; transform: translateX(-1px); }
/* ±% chip beside a value in a breakdown row */
.cmp-chip { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 7px; letter-spacing: .01em; vertical-align: 1px; }
.cmp-chip.up { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.cmp-chip.down { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }

/* KPI drill-down: period + comparison controls */
.kpi-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.kpi-controls-cmp { display: flex; align-items: center; gap: 9px; }
@media (max-width: 640px) { .kpi-controls { flex-direction: column; align-items: stretch; }
  .kpi-controls-cmp { justify-content: space-between; }
  .kpi-controls .seg { width: 100%; }
  .kpi-controls .seg button { flex: 1; } }

/* fade-in page */
.fadein { animation: pgin .22s ease; }
@keyframes pgin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Accounts page: collapsible country ▸ bank ▸ account ---- */
.acct-chev { transition: transform .16s ease; flex: none; color: var(--muted); }
.acct-chev.open { transform: rotate(90deg); }
.acct-country { overflow: hidden; }
.acct-country-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  padding: 14px 18px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: background .12s; }
.acct-country-head:hover { background: var(--surface-2); }
.acct-country-head h3 { font-size: 16px; }
.acct-country-head .acct-head-meta { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.acct-tbl thead th { position: sticky; top: 0; }
.acct-bank-row { cursor: pointer; background: var(--surface-2); transition: background .12s; }
.acct-bank-row:hover { background: var(--line); }
.acct-bank-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.acct-acct-row .acct-acct-name { padding-left: 30px; }
.acct-fade { animation: acctfade .18s ease; }
@keyframes acctfade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .acct-country-head .acct-head-meta { white-space: normal; text-align: right; }
}

/* open-tabs bar */
.tabbar {
  display: flex; align-items: stretch; gap: 4px;
  height: 40px; flex: 0 0 auto; padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden;
}
.tabbar::-webkit-scrollbar { height: 0; }
.tab {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px 0 12px; margin: 5px 0; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  cursor: pointer; white-space: nowrap; user-select: none;
  border: 1px solid transparent; max-width: 220px; position: relative;
  transition: background .12s, color .12s, border-color .12s;
}
.tab:hover { background: var(--surface-2); color: var(--ink-2); }
.tab.on { background: var(--navy-50); color: var(--navy); border-color: var(--navy-100); font-weight: 600; }
.tab .tab-ic { flex: 0 0 auto; opacity: .8; }
.tab .tab-lbl { overflow: hidden; text-overflow: ellipsis; }
.tab .tab-x {
  display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto;
  border: none; background: transparent; color: var(--muted-2); border-radius: 5px;
  cursor: pointer; padding: 0; margin-left: 2px; transition: background .12s, color .12s;
}
.tab .tab-x:hover { background: rgba(18,32,46,.1); color: var(--ink); }
.tab.on .tab-x:hover { background: rgba(27,58,107,.16); color: var(--navy); }

/* toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 11px;
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 80; animation: toastin .25s cubic-bezier(.2,.7,.3,1);
}
.toast svg { color: var(--gold-300); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* new-record highlight */
@keyframes rowflash { 0% { background: var(--gold-100); } 100% { background: transparent; } }
tr._new td, ._newcard { animation: rowflash 2.4s ease; }

/* modal (centered) */
.modal-card {
  background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-lg);
  width: 520px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column;
  transform: translateY(10px) scale(.99); opacity: 0; animation: modalin .2s cubic-bezier(.2,.7,.3,1) forwards; overflow: hidden;
}
.modal-card.wide { width: 720px; }
.modal-card.narrow { width: 420px; }
/* Document viewer — a PDF needs real estate or the browser's own viewer
   zooms it down to ~40% and the page becomes unreadable. */
.modal-card.xl { width: 1180px; max-height: 94vh; }
@keyframes modalin { to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.modal-head .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-head .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { display: flex; gap: 10px; align-items: center; padding: 14px 20px; background: #fff; border-top: 1px solid var(--line); }

/* notification panel (top-right) */
.npanel {
  position: fixed; top: 64px; right: 16px; width: 380px; max-height: 78vh;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(-8px); opacity: 0; animation: modalin .18s ease forwards;
}

/* dropzone */
.dropzone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; background: var(--surface-2); transition: all .12s; }
.dropzone:hover { border-color: var(--navy-400); background: var(--navy-50); color: var(--navy); }

/* segmented radio (modal) */
.opt-row { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: all .12s; }
.opt:hover { border-color: #cfd8e3; background: var(--surface-2); }
.opt.on { border-color: var(--navy-400); background: var(--navy-50); box-shadow: 0 0 0 2px var(--navy-100); }
.opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; }
.opt.on .radio { border-color: var(--navy); }
.opt.on .radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }

/* avatar stack */
.astack { display: flex; }
.astack .avatar { border: 2px solid #fff; margin-left: -7px; }
.astack .avatar:first-child { margin-left: 0; }

/* ============================================================
   Trip Program Builder
   ============================================================ */
.icon-btn.xs { width: 22px; height: 22px; border-radius: 6px; }
.icon-btn.xs:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn.xs.danger:hover { color: var(--red); border-color: #f0c4c0; background: var(--red-bg); }

/* Custom dropdown (Client / Package pickers) */
.picker { position: relative; width: 100%; }
.picker-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.picker-btn:hover { border-color: #cfd8e3; }
.picker-btn.open { border-color: var(--navy-400); box-shadow: 0 0 0 3px var(--navy-100); }
.picker-btn.disabled { background: var(--surface-2); color: var(--muted-2); cursor: not-allowed; }
.picker-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-ph { flex: 1; min-width: 0; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-caret { flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.picker-btn.open .picker-caret { transform: rotate(180deg); color: var(--navy); }
.picker-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-lg); padding: 5px; max-height: 320px; overflow-y: auto;
  animation: pickerIn .12s ease;
}
/* The search box stays put while the options scroll under it — losing the
   field you are typing into as soon as the list moves is maddening. */
.picker-menu:has(.picker-search) { overflow: hidden; display: flex; flex-direction: column; }
.picker-search {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px 8px;
  border-bottom: 1px solid var(--line-2); margin-bottom: 4px; flex: 0 0 auto;
}
.picker-search svg { color: var(--muted); flex: 0 0 auto; }
.picker-search .input { height: 32px; font-size: 13px; border-radius: 8px; }
.picker-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
@keyframes pickerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.picker-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; transition: background .1s;
}
.picker-opt > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-opt:hover { background: var(--navy-50); color: var(--ink); }
.picker-opt.on { background: var(--navy-50); color: var(--navy); font-weight: 600; }
.picker-opt.on svg { color: var(--navy); flex: 0 0 auto; }
.picker-empty { padding: 12px; text-align: center; color: var(--muted-2); font-size: 12.5px; }

/* Library rail */
.lib-chip {
  display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: 12px; color: var(--ink-2); line-height: 1.4; cursor: grab;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.lib-chip:hover { border-color: var(--gold-300); background: var(--gold-50); box-shadow: var(--shadow-sm); }
.lib-chip:active { cursor: grabbing; }
.lib-chip .lib-plus { flex: 0 0 auto; margin-top: 1px; color: var(--gold-700); }

/* Segment card */
.seg-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.seg-head { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; background: var(--navy-50); border-bottom: 1px solid var(--line-2); }
/* Program calculator hotel grid (no overflow so styled dropdowns escape) */
.pcalc-grid { display: flex; flex-direction: column; }
.pcalc-row { display: grid; grid-template-columns: minmax(150px,1.7fr) minmax(130px,1.3fr) 64px 64px 86px minmax(70px,1fr) minmax(70px,1fr) 36px; gap: 9px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line-2); }
.pcalc-row:last-child { border-bottom: none; }
.pcalc-head { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.pcalc-head span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.seg-pin { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.seg-city { font-size: 14.5px; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.seg-note { padding: 10px 14px 0; }
.seg-drop {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px;
  min-height: 56px; transition: background .12s, box-shadow .12s;
}
.seg-drop.empty { padding: 10px 14px 14px; }
.seg-drop.over { background: var(--gold-50); box-shadow: inset 0 0 0 2px var(--gold-300); border-radius: 0 0 12px 12px; }
.seg-empty { display: flex; align-items: center; gap: 9px; justify-content: center; padding: 14px; border: 1.5px dashed var(--line); border-radius: 9px; color: var(--muted-2); font-size: 12px; }
.seg-empty svg { color: var(--muted-2); }

/* Day chip */
.day-chip {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: grab;
  transition: border-color .12s, box-shadow .12s;
}
.day-chip:hover { border-color: var(--navy-400); box-shadow: var(--shadow-sm); }
.day-chip:active { cursor: grabbing; }
.day-chip.drop-before { box-shadow: 0 -3px 0 -1px var(--gold); }
.day-chip .day-grip { color: var(--muted-2); flex: 0 0 auto; }
.day-chip .day-num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.day-chip .day-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); line-height: 1.35; }
.day-chip .day-acts { display: flex; gap: 3px; flex: 0 0 auto; }

/* Preview / export modal */
.prog-preview-wrap { width: min(92vw, 900px); height: 90vh; background: var(--surface-2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.prog-preview-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.prog-preview-scroll { flex: 1; overflow: auto; padding: 22px; display: flex; justify-content: center; }

/* ============================================================
   Branded program document (print sheet)
   ============================================================ */
.prog-doc {
  width: 794px; min-height: 1080px; background: #fff; color: #1a2433;
  font-size: 12px; line-height: 1.5; box-shadow: var(--shadow-lg);
  padding: 0 0 22px; align-self: flex-start;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pd-band { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; background: var(--navy); color: #fff; }
.pd-band-l { display: flex; align-items: center; gap: 13px; }
.pd-band-l img { width: 40px; height: 48px; object-fit: contain; }
.pd-brand { font-size: 22px; font-weight: 700; letter-spacing: .16em; line-height: 1; }
.pd-brand-sub { font-size: 9px; letter-spacing: .26em; color: var(--gold-300); margin-top: 4px; }
.pd-band-r { text-align: right; }
.pd-title { font-size: 15px; font-weight: 600; color: var(--gold-300); letter-spacing: .02em; }
.pd-code { font-family: var(--mono); font-size: 12px; color: #cdd9ee; margin-top: 3px; }

.pd-info { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; padding: 16px 28px; border-bottom: 2px solid var(--gold); }
.pd-guest { font-size: 17px; font-weight: 700; color: var(--navy); }
.pd-guest-ar { font-size: 13px; font-weight: 500; color: var(--muted); }
.pd-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 7px; font-size: 12px; color: var(--ink-2); }
.pd-meta b { color: var(--navy); font-weight: 600; margin-right: 4px; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.pd-times { display: flex; gap: 8px; flex: 0 0 auto; }
.pd-time { text-align: center; padding: 7px 12px; background: var(--navy-50); border-radius: 8px; min-width: 70px; }
.pd-time-l { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); }
.pd-time-v { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* program start/end journey points */
.pd-journey { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pd-jp { padding: 8px 13px; background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: 9px; min-width: 132px; }
.pd-jp-l { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.pd-jp-l svg { color: var(--gold-700); }
.pd-jp-place { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.pd-jp-time { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pd-jp-arrow { color: var(--gold); flex: 0 0 auto; }

.pd-table { width: 100%; border-collapse: collapse; margin: 16px 28px 0; width: calc(100% - 56px); }
.pd-table thead th { background: var(--navy); color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; text-align: left; }
.pd-th-ar { font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; margin-top: 2px; }
.pd-table tbody td { border: 1px solid #d7e0ec; padding: 9px 10px; vertical-align: top; }
.pd-table tbody tr:nth-child(even) td { background: #f6f9fe; }
.pd-c { text-align: center; }
.pd-date { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11px; }
.pd-city { font-weight: 700; color: var(--navy); font-size: 12.5px; }
.pd-tours { margin: 0; padding-left: 16px; }
.pd-tours li { margin-bottom: 3px; }
.pd-hotel b { color: var(--ink); }
.pd-room { font-size: 11px; color: var(--navy); font-weight: 600; margin-top: 2px; }
.pd-note { font-size: 10.5px; color: var(--gold-700); margin-top: 3px; }
.pd-muted { color: var(--muted-2); font-style: italic; }
.pd-mono { font-family: var(--mono); font-size: 11px; }

.pd-sec-h { margin: 18px 28px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.pd-transport thead th { background: var(--gold-700); }
.pd-care { display: flex; align-items: center; gap: 8px; margin: 10px 28px 0; padding: 9px 12px; background: var(--gold-50); border: 1px solid var(--gold-300); border-radius: 8px; font-size: 12px; color: var(--gold-700); }

.pd-instr { margin: 18px 28px 0; padding: 14px 16px; background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: 10px; }
.pd-instr-intro { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.pd-instr ul { margin: 0; padding-right: 20px; }
.pd-instr li { font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }

.pd-foot { display: flex; justify-content: space-between; gap: 12px; margin: 18px 28px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }

/* ---- print ----
   The programme is NOT printed from this page any more. It used to be: hide
   every element, pin #prog-print-root with position:fixed, window.print().
   A fixed element prints on the first sheet only, so every programme longer
   than one A4 page lost the rest of itself. It now builds its own document
   (program-export.js), which the print engine can paginate properly.
   .prog-doc below is therefore screen-only — the on-screen preview. */
@page { size: A4; margin: 9mm; }

/* ============================================================
   ClientPicker — searchable dropdown (opens directly below)
   ============================================================ */
.cpick { position: relative; width: 100%; }
.cpick-trigger {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 40px;
  padding: 0 12px 0 11px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font: inherit; text-align: left;
  transition: border .12s, box-shadow .12s;
}
.cpick-trigger:hover { border-color: var(--navy-300); }
.cpick-trigger.open { border-color: var(--navy-400); box-shadow: 0 0 0 3px var(--navy-100); }
.cpick-trigger > svg:first-child { width: 16px; height: 16px; color: var(--muted-2); flex: 0 0 auto; }
.cpick-ph { color: var(--muted-2); font-size: 13px; flex: 1; }
.cpick-sel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cpick-nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick-fl { font-size: 14px; flex: 0 0 auto; }
.cpick-caret { width: 15px; height: 15px; color: var(--muted-2); transform: rotate(90deg); flex: 0 0 auto; transition: transform .15s; }
.cpick-trigger.open .cpick-caret { transform: rotate(-90deg); color: var(--navy); }

.cpick-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,34,54,.16), 0 2px 8px rgba(20,34,54,.08);
  overflow: hidden; animation: cpickIn .13s ease;
}
@keyframes cpickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cpick-search { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cpick-search > svg { width: 15px; height: 15px; color: var(--muted-2); flex: 0 0 auto; }
.cpick-search input { flex: 1; border: none; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--ink); }
.cpick-clr { border: none; background: transparent; cursor: pointer; color: var(--muted-2); display: grid; place-items: center; padding: 2px; border-radius: 5px; }
.cpick-clr:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.cpick-clr svg { width: 13px; height: 13px; }
.cpick-list { max-height: 280px; overflow-y: auto; padding: 5px; }
.cpick-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.cpick-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px;
  border: none; background: transparent; cursor: pointer; border-radius: 8px; text-align: left; font: inherit;
}
.cpick-opt.hi { background: var(--navy-50); }
.cpick-opt.on { background: var(--gold-50); }
.cpick-opt-main { flex: 1; min-width: 0; }
.cpick-opt-top { display: flex; align-items: center; gap: 7px; }
.cpick-opt-nm { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick-opt-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cpick-tick { width: 16px; height: 16px; color: var(--gold-700); flex: 0 0 auto; }

.cpick-add {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px;
  border: none; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; font: inherit;
  background: var(--navy-50); color: var(--navy); transition: background .12s;
}
.cpick-add:hover { background: var(--navy-100, #dbe4f3); }
.cpick-add-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cpick-add-ic svg { width: 16px; height: 16px; }
.cpick-add-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cpick-add-t { font-size: 13px; font-weight: 700; color: var(--navy); }
.cpick-add-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* TimeField — styled time picker (hour / minute columns) */
.tf-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; min-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15,30,60,.18); padding: 8px; animation: cpickIn .13s ease;
}
.tf-cols { display: flex; gap: 6px; }
.tf-col { flex: 1; min-width: 64px; }
.tf-col-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; padding: 2px 0 6px; }
.tf-scroll { height: 184px; overflow-y: auto; padding: 2px; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; }
.tf-opt {
  border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-2); padding: 8px 0; border-radius: 7px; text-align: center; font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.tf-opt:hover { background: var(--navy-50); color: var(--navy); }
.tf-opt.tf-on { background: var(--navy); color: #fff; }
.tf-col-ap { flex: 0 0 auto; min-width: 56px; }
.tf-ap { font-size: 13px; }
.tf-ap.tf-on { background: var(--navy); color: #fff; }
.tf-col-sep { display: flex; align-items: center; font-size: 20px; font-weight: 700; color: var(--muted-2); padding-top: 22px; }
.tf-done {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px;
  padding: 8px; border: none; border-radius: 8px; background: var(--navy-50); color: var(--navy);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.tf-done:hover { background: var(--navy-100); }

/* ============================================================
   RESPONSIVE — tablet & mobile (single codebase, web + mobile)
   The desktop shell is a fixed 240px rail. Below 980px the rail
   becomes a slide-out drawer + hamburger; dense layouts reflow.
   ============================================================ */

/* hamburger lives in the topbar, hidden on desktop */
.tb-burger {
  display: none;
  width: 40px; height: 40px; flex: 0 0 auto; margin-left: -4px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 9px; place-items: center; cursor: pointer; transition: background .12s, color .12s;
}
.tb-burger:hover { background: var(--navy-50); color: var(--navy); border-color: var(--navy-100); }
.tb-burger svg { width: 20px; height: 20px; }
.sb-backdrop { display: none; }

@media (max-width: 980px) {
  /* shell collapses to a single column; sidebar overlays */
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 264px; max-width: 84vw; z-index: 80;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.2,.7,.3,1);
    box-shadow: 0 24px 60px -12px rgba(8,18,38,.55);
  }
  .app.menu-open .sidebar { transform: translateX(0); }
  .sb-backdrop {
    display: block; position: fixed; inset: 0; z-index: 79;
    background: rgba(12,24,44,.5); backdrop-filter: blur(2px);
    animation: fade .2s forwards;
  }
  .tb-burger { display: grid; }

  /* topbar: swap the wide search box for a tappable search button so the
     Assistant is still reachable on a phone (no ⌘K on touch) */
  .topbar { padding: 0 12px; gap: 10px; }
  .gsearch { display: none; }
  .tb-search-btn { display: inline-grid; place-items: center; }
  .tb-user-meta { display: none !important; }
  .tb-actions { gap: 6px; }

  .page { padding: 18px 14px 36px; }
}

/* phone */
@media (max-width: 640px) {
  body { font-size: 13.5px; }
  .topbar { height: 54px; padding: 0 10px; }
  .tb-lbl { display: none; }                 /* New Package → icon only */
  .btn.primary.sm { padding: 0 11px; }
  .page { padding: 14px 12px 32px; }

  /* page headers stack */
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-head h1 { font-size: 19px; }
  .page-head .right { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .page-head .right > * { flex: 1 1 auto; }

  /* filters wrap full width */
  .filterbar { gap: 8px; }
  .filterbar .gsearch, .filterbar .chip-select { width: 100%; }

  /* any inline grid stacks — guarantees no horizontal blow-out */
  .page [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* forms & detail layouts to one column */
  .form-grid { grid-template-columns: 1fr !important; }

  /* overlays go full-bleed */
  .drawer { width: 100%; max-width: 100vw; }
  .drawer-body, .modal-body { padding: 16px; }
  .modal-card, .modal-card.wide, .modal-card.narrow, .modal-card.xl { width: 96vw; max-width: 96vw; }
  .npanel { top: 58px; right: 8px; left: 8px; width: auto; max-height: 80vh; }

  /* tighter cards */
  .card-pad { padding: 14px; }
  .stat .val { font-size: 22px; }

  /* login: hide the marketing panel, show only the form */
  .login-shell { grid-template-columns: 1fr !important; }
  .login-brand { display: none !important; }
}

/* tablet: dense stat dashboards go 2-up instead of 4-up */
@media (min-width: 641px) and (max-width: 980px) {
  .page [style*="grid-template-columns: repeat"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* coarse-pointer affordances regardless of width */
@media (pointer: coarse) {
  .sb-item { padding: 11px 10px; }
  .btn.sm { height: 36px; }
  .tab { padding: 0 10px; }
}

/* clickable dashboard cards + rows (interactive KPIs) */
.card-link { transition: box-shadow .14s, border-color .14s, transform .14s; }
.card-link:hover { box-shadow: var(--shadow-md, 0 8px 24px -8px rgba(16,32,60,.18)); border-color: var(--navy-200, #c5d3ea); transform: translateY(-1px); }
.card-link .card-head .chevR, .card-link:hover .right svg { color: var(--navy); }
.row-link { transition: background .12s; }
.row-link:hover { background: var(--navy-50) !important; }

/* Settings side-nav — its own class. It used to reuse .sb-item, which is
   styled for the dark app sidebar (light text, white hover), so the rules
   collided on a light card and every selector matched both places. */
.set-nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5;transition:background .12s,color .12s}
.set-nav-item:hover{background:var(--navy-50)}
@media (pointer: coarse){.set-nav-item{padding:11px 10px}}

/* ============================================================
   DataList — the phone shape of a table
   ------------------------------------------------------------
   Above 640px DataList renders .tbl and these rules do nothing.
   Below it, each row becomes a card: headline and state on one
   line, a subtitle under it, then the few fields the screen said
   were worth keeping, as label/value pairs.

   Note the grid uses a class, not an inline style. The phone
   breakpoint carries a blanket
     .page [style*="grid-template-columns"] { …: 1fr !important }
   to stop any inline grid blowing out sideways, and an inline
   grid here would be flattened to one column by it.
   ============================================================ */
.dl-cards { display: flex; flex-direction: column; gap: 10px; }
/* A phone card list sitting straight inside a panel put its own border hard
   against the panel's, so the two read as one broken edge. Inset it — only
   when it is inside a card, since several screens render the list on its own
   where the page padding already does this job. */
.card > .dl-cards { padding: 12px; }
.card > .card-head + .dl-cards { padding-top: 0; }
.dl-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px 34px 12px 13px;   /* right padding leaves room for the chevron */
}
.dl-card.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dl-card.tappable:active { background: var(--navy-50); }
.dl-card.tappable:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.dl-card._new { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-bg); }

.dl-card-top { display: flex; align-items: flex-start; gap: 10px; }
.dl-card-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--ink); }
.dl-card-badge { flex: none; }
.dl-card-sub { margin-top: 4px; font-size: 13px; color: var(--ink-2, var(--muted)); }
/* the avatar+name rows screens reuse as a subtitle shouldn't shout */
.dl-card-sub .avatar { width: 22px; height: 22px; font-size: 10px; }

.dl-card-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px; margin: 11px 0 0;
  padding-top: 10px; border-top: 1px solid var(--line-2);
}
.dl-card-grid > div { min-width: 0; }
.dl-card-grid dt {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 2px;
}
.dl-card-grid dd {
  margin: 0; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-card-go {
  position: absolute; top: 13px; right: 10px;
  color: var(--muted); pointer-events: none;
}

/* A grid or flex item defaults to min-width:auto, so a wide table inside a
   card made the card's track as wide as the table — measured at a 1280 laptop,
   a 7-column breakdown took 764px of a 966px row and left the chart beside it
   202px. The card's own .tbl-wrap already scrolls; it does not also need to
   push its neighbour off the page. */
.card { min-width: 0; }

/* an empty list should say so, not render a header over nothing */
.dl-empty { text-align: center; padding: 34px 20px; }
.dl-empty-ic {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--surface-2); color: var(--muted); margin-bottom: 11px;
}
.dl-empty-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.dl-empty-body { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dl-caption { caption-side: top; text-align: left; padding: 0 14px 8px; font-size: 12px; color: var(--muted); }
.ta-r { text-align: right; }

/* ============================================================
   NiceSelect (React) — .fsel-*
   ------------------------------------------------------------
   These classes were referenced by the NiceSelect component in
   modals.jsx but never defined, so the menu rendered as a plain
   static block at the bottom of the document: present in the DOM,
   invisible on screen. Every dropdown built on it was unusable.

   The menu is portaled to <body>, so it must be position:fixed
   (the component supplies left/top/width inline) and sit above the
   modal scrim, which is z-index 55.
   ============================================================ */
.fsel-btn {
  width: 100%; height: 38px; padding: 0 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2, #f4f6fa); color: var(--ink, #16202e);
  border: 1px solid var(--line, #e3e8ef); border-radius: 10px;
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.fsel-btn:hover { border-color: var(--navy-300, #b9c8e0); }
.fsel-btn.open { border-color: var(--navy, #16294a); background: #fff; }
.fsel-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-val.ph { color: var(--muted, #94a3b8); }
.fsel-chev { flex: 0 0 auto; color: var(--muted, #94a3b8); }

.fsel-menu {
  position: fixed; z-index: 9500;
  background: #fff; border: 1px solid var(--line, #e3e8ef); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15,30,60,.20), 0 2px 6px rgba(15,30,60,.06);
  padding: 6px; overflow-y: auto; overscroll-behavior: contain;
}
.fsel-opt {
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink, #16202e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsel-opt:hover { background: var(--surface-2, #f4f6fa); }
.fsel-opt.sel { background: var(--navy, #16294a); color: #fff; font-weight: 600; }

/* NiceSelect search + scroll ------------------------------------------------
   The menu itself must NOT scroll, or the search box scrolls away with the
   options. The box is pinned and only the list below it scrolls. */
.fsel-menu { display: flex; flex-direction: column; overflow: hidden; }
.fsel-search { padding: 2px 2px 6px; flex: 0 0 auto; }
.fsel-search .input { width: 100%; height: 32px; font-size: 13px; }
.fsel-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fsel-empty { padding: 10px; font-size: 12.5px; color: var(--muted, #647689); text-align: center; }

/* ============================================================
   Connection & update bar
   ------------------------------------------------------------
   A slim strip under the topbar. Offline is the one the phone
   users will actually see, so it reads as information, not as
   an error — being offline is a normal state on the road.
   ============================================================ */
.connbar {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px; font-size: 12.5px; line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
.connbar span { flex: 1; min-width: 0; }
.connbar b { font-weight: 700; }
.connbar svg { flex: none; }
.connbar .btn { flex: none; }
.connbar.offline { background: var(--amber-bg, #fdf3e0); color: var(--amber, #8d5a10); border-bottom-color: var(--amber, #8d5a10); }
.connbar.update  { background: var(--navy-50); color: var(--navy); }
@media (max-width: 640px) {
  .connbar { padding: 8px 12px; font-size: 12px; align-items: flex-start; flex-wrap: wrap; }
}

/* ============================================================
   Phone fixes — from testing on a real handset
   ============================================================ */

/* ---- 1. the package money strip ----------------------------------------
   It was a flex row of five cells at 22px side padding. Flex items do not
   shrink below their content, so on a 375px screen the last two were simply
   off the edge — you could see "Deal Closed", "Total Cost", "Profit", and a
   sliver of "Paid". A grid wraps instead of overflowing, and the 1px gap
   over a darker background draws the dividers, so cells can reflow without
   leaving a border stranded mid-row. */
.money-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2);
}
.money-strip > div { background: var(--surface-2); padding: 12px 22px; min-width: 0; }
.money-strip .num { overflow-wrap: anywhere; }

/* ---- 2. the trip's detail fields ---------------------------------------
   Fifteen label/value pairs. The blanket one-column rule below turned them
   into fifteen full-width rows, most of a screen of scrolling to read six
   short facts. Two columns fits them all comfortably at 375px. */
.pkg-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 16px; padding: 14px 0 2px; border-top: 1px solid var(--line-2); }

@media (max-width: 640px) {
  .money-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* five cells in two columns leaves a hole; let a lone last one take the row */
  .money-strip > div:last-child:nth-child(odd) { grid-column: span 2; }
  .money-strip > div { padding: 11px 13px; }
  .money-strip .num { font-size: 17px !important; }
  .money-strip .k { font-size: 10px !important; }

  .pkg-kv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 14px; }

  /* ---- 3. stat cards go two-up, not one ----------------------------------
     The blanket rule flattens every inline grid to a single column, which is
     right for a twelve-column table and wrong for a row of small metric
     cards: eight of them became eight full-width rows of mostly white space.
     :has() lets the exception be written once, against any grid whose
     children are stat cards, rather than re-classing every dashboard. */
  .page [style*="grid-template-columns"]:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat { padding: 12px 13px; }
  .stat .val { font-size: 20px; margin-top: 8px; }
  .stat .lbl { font-size: 11.5px; gap: 6px; }
  .stat .lbl .ic { width: 22px; height: 22px; }
  .stat .delta { font-size: 11px; margin-top: 3px; }
  .stat .stat-go { display: none; }     /* no hover on a phone; it never appears */

  /* the tab strip is for desk multitasking; on a phone it costs a row of
     screen for something a thumb rarely uses. Kept, but slimmer. */
  .tabbar { padding: 4px 8px; }
  .tab { height: 30px; font-size: 12px; max-width: 140px; }
}

/* ---- 4. dragging to scroll should not select the card ------------------
   Every tappable row and card is text, so a scroll that starts on one
   selects it — a blue block across half the screen, and on iOS a callout
   menu with it. Selection is not something anyone wants from these; the
   text they might genuinely want to copy lives on the detail screens. */
.stat-clickable, .dl-card.tappable, .row-link, table.tbl tbody tr.clickable, .sb-item, .tab {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* the card's action strip — full width, thumb-sized, and it never opens the row */
.dl-card-actions { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; }
.dl-card-actions .btn { flex: 1; height: 36px; justify-content: center; }
/* a ghost button in the strip has no border of its own and reads as plain
   text once it is the only thing on the row — give it an outline so it is
   visibly something you can press */
.dl-card-actions .btn.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink-2); }

/* ============================================================
   Reservation dashboard charts
   ------------------------------------------------------------
   Three cards were held at a fixed 1.2fr / 1fr / 1.2fr. On a
   laptop the content column is about 1000px once the sidebar is
   accounted for, so each card got roughly 330px — and a donut
   plus its legend does not fit in that. The third card's legend
   was cut off mid-figure. auto-fit lets them go three-up on a
   wide screen, two-up on a laptop and one-up on a phone, with
   the legend dropping under the donut when a card is narrow.
   ============================================================ */
.res-charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px; margin-bottom: 16px; align-items: start;
}
.res-pie { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; }
.res-pie-legend { display: flex; flex-direction: column; gap: 8px; min-width: 132px; flex: 1 1 132px; }
.res-pie-legend > div { white-space: nowrap; }
@media (max-width: 640px) {
  .res-charts { grid-template-columns: 1fr !important; gap: 12px; }
  .res-pie { gap: 12px; }
  .res-pie-legend { flex-basis: 100%; }
}

/* ---- Reservation charts, redesigned: horizontal ranked bars + a 100%
   composition bar. Both are full-width and reflow, so they read the same on a
   wide desktop and a phone — no sideways scroll, no coin-sized donut. ---- */
.res-hbars { display: flex; flex-direction: column; gap: 9px; padding: 6px 0 2px; }
.res-hbar { display: grid; grid-template-columns: minmax(64px, 96px) 1fr auto; align-items: center; gap: 10px; }
/* click-to-compare bars */
.res-hbar.pick { cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; transition: background .12s, opacity .12s; }
.res-hbar.pick:hover { background: var(--navy-50); }
.res-hbar.dim { opacity: .32; }
.res-hbar.on { background: var(--navy-50); }
.res-hbar.on .res-hbar-lbl { font-weight: 800; color: var(--ink); }
.res-hbar.pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.res-stack-leg.pick { cursor: pointer; border-radius: 7px; padding: 3px 5px; margin: 0 -5px; transition: background .12s, opacity .12s; }
.res-stack-leg.pick:hover { background: var(--navy-50); }
.res-stack-leg.dim { opacity: .4; }
.res-stack-leg.on { background: var(--navy-50); }
.res-stack-leg.on .nm { font-weight: 800; color: var(--ink); }
.res-stack-leg.pick:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.res-hbar-lbl {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-hbar-track { height: 16px; border-radius: 8px; background: var(--line); overflow: hidden; }
.res-hbar-fill { height: 100%; border-radius: 8px; min-width: 4px; transition: width .5s cubic-bezier(.22,1,.36,1); }
.res-hbar-val { font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; min-width: 34px; }
.res-hbar-more { font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 2px 0; }
.res-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--muted); }

.res-stack { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 2px; }
.res-stack-total { display: flex; align-items: baseline; gap: 8px; }
.res-stack-total b { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.res-stack-total span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.res-stack-bar {
  display: flex; height: 22px; border-radius: 8px; overflow: hidden;
  background: var(--line); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.res-stack-bar > div { transition: width .5s cubic-bezier(.22,1,.36,1); min-width: 0; }
.res-stack-bar > div + div { box-shadow: -1px 0 0 rgba(255,255,255,.5); }
.res-stack-legend { display: flex; flex-direction: column; gap: 7px; }
.res-stack-leg { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 9px; font-size: 12px; }
.res-stack-leg .dot { width: 11px; height: 11px; border-radius: 3px; }
.res-stack-leg .nm { font-weight: 600; color: var(--ink-2); }
.res-stack-leg .pct { font-weight: 700; color: var(--ink); min-width: 30px; text-align: right; }

/* Sum-Nights donut (dashboard card) */
.res-donut { display: flex; align-items: center; gap: 20px; padding: 8px 2px 4px; }
.res-donut-ring { position: relative; flex: none; width: 132px; height: 132px; }
.res-donut-ring svg circle { transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1), stroke-dasharray .6s cubic-bezier(.22,1,.36,1); }
.res-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.res-donut-center b { font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.res-donut-center span { font-size: 9px; font-weight: 700; letter-spacing: .13em; color: var(--muted); margin-top: 3px; }
.res-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.res-donut-leg { display: grid; grid-template-columns: 11px 1fr auto; align-items: baseline; gap: 9px; }
.res-donut-leg .dot { width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.res-donut-leg .nm { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-donut-leg .pct { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.res-donut-leg .sub { grid-column: 2 / 4; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: -3px; }
@media (max-width: 640px) { .res-donut { gap: 14px; } }

.res-rate-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 8px; }
.res-rate-head b { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.res-rate-head span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 640px) {
  .res-hbar { grid-template-columns: minmax(58px, 84px) 1fr auto; gap: 8px; }
  .res-stack-total b { font-size: 23px; }
}

/* "show more" foot of a paged list */
.dl-more { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line-2); }
.dl-more .muted { font-size: 12px; }

/* ============================================================
   Package builder — the phone step flow
   ------------------------------------------------------------
   The form is unchanged; on a phone one numbered section shows
   at a time and the drawer footer becomes Back / Next. This
   strip is the only way to tell where you are in it.
   ============================================================ */
.pkg-progress { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 10px 0 12px; margin-bottom: 4px; }
.pkg-progress-bar { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pkg-progress-bar span { display: block; height: 100%; background: var(--navy); border-radius: 3px; transition: width .22s ease; }
@media (max-width: 640px) {
  /* the footer is the step control, so give it room and real targets */
  .drawer-foot { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .drawer-foot .btn { height: 42px; flex: 1 1 auto; justify-content: center; }
  .drawer-foot > div:first-child { flex: 1 1 100%; margin-right: 0 !important; }
}

/* ============================================================
   Program Calculator on a phone
   ------------------------------------------------------------
   .pcalc-row is an eight-column grid whose minimums add up to
   733px before gaps. On a 375px screen that does not just look
   cramped — it pushes the whole page sideways and the controls
   end up off the edge, which is what "I can't do anything"
   looked like. It is a class, so the blanket one-column rule
   for inline grids never touched it.

   Each cell now carries a data-l label: invisible on a desk,
   where the header row names the columns, and the only way to
   tell nights from rooms once the row stacks.
   ============================================================ */
.pcalc-cell { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pcalc-cell > .num, .pcalc-cell > span { min-width: 0; }
.pcalc-r { align-items: flex-end; text-align: right; }
.pcalc-del { align-items: flex-end; }
.pcalc-del-lbl { display: none; }

@media (max-width: 640px) {
  .pcalc-head { display: none; }              /* the labels moved onto the cells */
  .pcalc-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: 10px; background: #fff;
  }
  /* the two that need the room: which hotel, and which room in it */
  .pcalc-row > .pcalc-wide { grid-column: 1 / -1; }
  .pcalc-cell::before {
    content: attr(data-l);
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
  }
  .pcalc-r { align-items: flex-start; text-align: left; }
  .pcalc-del { grid-column: 1 / -1; align-items: stretch; }
  .pcalc-del::before { content: none; }
  .pcalc-del .btn { width: 100%; height: 38px; justify-content: center; gap: 7px; }
  .pcalc-del-lbl { display: inline; }         /* an X alone is not a target */

  /* Fields with a hard pixel width, and the rows that hold them.

     Letting them shrink was not enough. A shrinkable field never wraps — it
     just gets narrower — so Car Type and Driver days stayed side by side at
     about 150px each, while the select inside Car Type carries its own
     width of 200 and simply overflowed across the days box. The days input
     was on screen the whole time, underneath the dropdown.

     So: each of these fields takes a full line of its own, and nothing
     inside one is allowed to be wider than it is. */
  .card .field[style*="width"] { width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; }
  .card .field > *, .card .field .chip-select, .card .field .fsel { max-width: 100% !important; }
  .card .row { flex-wrap: wrap; }
}

/* ============================================================
   Charts and KPI rows that ran off a phone
   ------------------------------------------------------------
   Three separate ways the same symptom appeared — a figure cut
   off at the right edge.
   ============================================================ */

/* Twelve monthly bars with a 10px gap and an 11px label need about 400px
   before they will fit. That is wider than the phone, so the last month —
   the one anyone actually wants — was the one pushed off. Tighter gap and
   label brings twelve months inside 375. */
.bar-chart { gap: 10px; }
@media (max-width: 640px) {
  .bar-chart { gap: 4px; padding-left: 0; padding-right: 0; }
  .bar-chart span { font-size: 9.5px !important; }
}

/* A long agent name and a five-figure sum in one flex row: neither was
   allowed to shrink, so the money went over the edge. The name truncates —
   it is recoverable from context — and the figure never does, because a
   half-shown number is worse than none. */
.bd-row { gap: 10px; align-items: baseline; }
.bd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-value { flex: 0 0 auto; white-space: nowrap; }

/* The headline figure sat beside the title in a row that could not wrap. */
.kpi-hero-value { font-size: 30px; }
@media (max-width: 640px) {
  .kpi-hero-value { font-size: 23px; }
  .kpi-hero-value, .kpi-hero-value + * { min-width: 0; }
}

/* ============================================================
   Client card header
   ------------------------------------------------------------
   A flex row of a 66px avatar, the details, and a 108px passport
   thumb. On a 375px screen the two fixed pieces plus their gaps
   leave about 140px for the name — so "ALSIBYANI, MOHAMMED
   ISMAIL S" broke into four lines and ran under the thumb, with
   "No scan on file" printed across it.

   On a phone the thumb stops being a column and sits on its own
   line, the name gets the full width, and the detail pairs go
   two-up instead of one.
   ============================================================ */
.client-head { display: flex; gap: 20px; padding: 20px 22px; align-items: flex-start; }
.client-name { margin: 0 0 3px; font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.client-ar { font-size: 15px; margin-bottom: 12px; }
.client-kv { display: grid; grid-template-columns: repeat(4, auto); gap: 14px 36px; justify-content: start; }
.client-pass { flex: 0 0 auto; text-align: center; }
.client-money { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); background: var(--surface-2); }

@media (max-width: 640px) {
  .client-head { flex-wrap: wrap; gap: 14px; padding: 16px 14px; }
  /* avatar and name share the first line; the thumb drops below both */
  .client-head > .avatar { flex: 0 0 auto; }
  .client-head > div:nth-child(2) { flex: 1 1 60%; min-width: 0; }
  .client-name { font-size: 19px; overflow-wrap: anywhere; }
  .client-ar { font-size: 13.5px; margin-bottom: 10px; overflow-wrap: anywhere; }
  .client-kv { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 14px; }
  .client-kv .v { overflow-wrap: anywhere; }
  .client-pass { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; text-align: left; }
  .client-pass > div:first-child { flex: 0 0 auto; }
  .client-money { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   Sub-tab strips (Finance, Accounting, and anything else using
   .tabs)
   ------------------------------------------------------------
   Six tabs at roughly 130px each is about 780px of flex row in a
   card with no overflow rule. It did not merely clip: it set the
   width of the whole page, so the viewport showed the left 375px
   of a 780px document and EVERY other thing on the screen looked
   cut off — the heading, the stat cards, the Add Entry button.
   One strip, the whole page.

   The strip scrolls on its own now, so the page stays the width
   of the screen. The scrollbar is hidden because on a phone this
   is swiped, and a visible bar under six tabs is just noise.
   ============================================================ */
.tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { height: 0; }
.tabs button { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

@media (max-width: 640px) {
  .tabs { padding-left: 4px !important; padding-right: 4px !important; }
  .tabs button { padding: 10px 11px; font-size: 12.5px; gap: 6px; }
  /* a hint that there is more to the right, without a scrollbar */
  .tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}

/* a field that is wrong, and why */
.field-err { display: flex; align-items: flex-start; gap: 6px; margin-top: 5px; font-size: 11.5px; color: var(--red); line-height: 1.45; }
.field-err svg { flex: none; margin-top: 1px; }
.input.bad, .select.bad { border-color: var(--red); }
.form-stop { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--red); }

/* ============================================================
   Sign-in wait
   ------------------------------------------------------------
   Replaces a spinner over the word "Firestore". The bar is
   indeterminate on purpose — the load is a handful of queries of
   unknown length, and a fake percentage that jumps to 90 and
   sits there is worse than an honest sweep.
   ============================================================ */
.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.boot-inner { text-align: center; max-width: 320px; width: 100%; }
.boot-mark { width: 52px; height: auto; opacity: .9; margin-bottom: 18px; }
.boot-hi { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.boot-step { font-size: 13px; color: var(--muted); margin-top: 6px; min-height: 19px; }
.boot-bar { margin-top: 18px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 38%; border-radius: 3px; background: var(--navy); animation: bootsweep 1.15s ease-in-out infinite; }
@keyframes bootsweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .boot-bar span { animation: none; width: 100%; opacity: .35; } }

/* ============================================================
   iPhone safe areas
   ------------------------------------------------------------
   The PWA meta asks for viewport-fit=cover with a translucent
   status bar, which is what lets the app fill the screen edge to
   edge — and it means the browser stops reserving room at the
   top. Without an inset the header draws UNDERNEATH the clock
   and the Dynamic Island, which is exactly what happened: the
   hamburger and the title sat behind the notch on iPhone while
   Android, which has no cut-out, looked fine.

   env(safe-area-inset-*) is zero on every device without a
   cut-out, so these rules cost Android and the desktop nothing.
   ============================================================ */
.topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(58px + env(safe-area-inset-top));
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
/* the overlay sidebar starts below the island too, and clears the
   home indicator at the bottom */
.sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
/* the last row of a long page should not sit under the home bar */
.content { padding-bottom: env(safe-area-inset-bottom); }
/* full-bleed overlays: their action rows are the ones a thumb reaches for */
.drawer-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.modal-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.boot { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  .topbar { height: calc(54px + env(safe-area-inset-top)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .page { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}


/* ============================================================
   Overlay headers and the iPhone cut-out
   ------------------------------------------------------------
   The topbar was inset when the safe areas went in; the drawer
   and modal HEADS were not. On a phone the drawer is full-height
   and fixed, so its header sat under the clock and the Dynamic
   Island — with the close button behind the notch, which is why
   it could not be tapped at all.
   ============================================================ */
@media (max-width: 640px) {
  .drawer-head { padding-top: max(16px, calc(16px + env(safe-area-inset-top))); }
  .modal-card { margin-top: env(safe-area-inset-top); }
  .modal-head { padding-top: max(16px, env(safe-area-inset-top)); }
  /* a full-bleed drawer's body should not end under the home bar either */
  .drawer-body { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* A chart with more bars than the screen has room for scrolls inside its own
   card rather than pushing the page. Each bar keeps a floor width so the
   labels stay readable instead of collapsing into slivers. */
/* At EVERY width, not just on a phone. Twenty-odd cities do not fit a laptop
   card either — they were being squeezed until the labels were unreadable,
   with no way to scroll to the ones past the edge. */
.res-vbar { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.res-vbar > div { min-width: 46px; flex: 1 0 auto; }
@media (max-width: 640px) { .res-vbar > div { min-width: 44px; } }