/* ============================================================
   TRANSIT BACK OFFICE — DESIGN SYSTEM (tokens + primitives)
   Pure presentation. No business logic.
   ============================================================ */

:root {
  /* Brand */
  --bo-orange: #f7931e;
  --bo-orange-d: #e07d0a;
  --bo-yellow: #ffc20e;
  --bo-grad: linear-gradient(135deg, var(--bo-orange), var(--bo-yellow));
  --bo-blue: #29abe2;
  --bo-blue-d: #1f8fbf;
  --bo-green: #16a34a;
  --bo-amber: #d97706;
  --bo-red: #dc2626;

  /* Neutrals */
  --bo-ink: #1a1f27;
  --bo-ink-2: #2c3440;
  --bo-muted: #6b7484;
  --bo-muted-2: #8b93a1;
  --bo-line: #e6e9ef;
  --bo-line-2: #f0f3f7;
  --bo-bg: #f3f5f9;
  --bo-surface: #ffffff;
  --bo-surface-2: #f8fafc;
  --bo-dark: #1b2027;
  --bo-dark-2: #242a33;

  /* Spacing scale */
  --bo-1: 4px;
  --bo-2: 8px;
  --bo-3: 12px;
  --bo-4: 16px;
  --bo-5: 20px;
  --bo-6: 24px;
  --bo-7: 32px;
  --bo-8: 40px;

  /* Radius */
  --bo-r-sm: 8px;
  --bo-r: 12px;
  --bo-r-lg: 16px;
  --bo-r-xl: 20px;

  /* Shadow */
  --bo-shadow: 0 1px 2px rgba(24, 32, 54, .04), 0 8px 24px rgba(24, 32, 54, .06);
  --bo-shadow-lg: 0 12px 40px rgba(24, 32, 54, .12);

  /* Control */
  --bo-ctrl-h: 42px;
  --bo-ctrl-h-sm: 34px;
  --bo-touch: 40px;

  /* Layout */
  --bo-side-w: 248px;
  --bo-content-max: 1280px;
  --bo-drawer-w: min(520px, 100vw);

  /* Type */
  --bo-fs-xs: .72rem;
  --bo-fs-sm: .82rem;
  --bo-fs: .92rem;
  --bo-fs-md: 1.05rem;
  --bo-fs-lg: 1.25rem;
  --bo-fs-xl: 1.55rem;
  --bo-fw: 700;
  --bo-fw-b: 800;
  --bo-fw-x: 900;
}

/* Map legacy vars → design system (existing markup keeps working) */
:root {
  --dark: var(--bo-dark-2);
  --dark-2: var(--bo-dark);
  --orange: var(--bo-orange);
  --orange-d: var(--bo-orange-d);
  --yellow: var(--bo-yellow);
  --blue: var(--bo-blue);
  --blue-d: var(--bo-blue-d);
  --ink: var(--bo-ink);
  --muted: var(--bo-muted);
  --line: var(--bo-line);
  --bg: var(--bo-bg);
  --green: var(--bo-green);
  --red: var(--bo-red);
  --shadow: var(--bo-shadow);
  --grad: var(--bo-grad);
}

/* ---------- Shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--bo-side-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bo-bg);
}
.side {
  background: var(--bo-dark);
  color: #c5cbd6;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  border-inline-end: 1px solid #2a313c;
}
.side__brand {
  display: flex;
  align-items: center;
  gap: var(--bo-3);
  padding: var(--bo-5) var(--bo-4);
  border-bottom: 1px solid #2f3642;
}
.side__brand img { height: 32px; width: auto; }
.side__brand b {
  color: #fff;
  font-size: var(--bo-fs-md);
  font-weight: var(--bo-fw-x);
  letter-spacing: -.01em;
}
.side__brand small {
  display: block;
  color: var(--bo-orange);
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
  margin-top: 2px;
}
.side__nav { padding: var(--bo-3) var(--bo-2); }
.side__group {
  margin-bottom: var(--bo-3);
  padding-bottom: var(--bo-2);
  border-bottom: 1px solid #2a313c;
}
.side__group:last-child { border-bottom: none; }
.side__group-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bo-2) var(--bo-3);
  color: var(--bo-muted-2);
  font-size: .65rem;
  font-weight: var(--bo-fw-b);
  letter-spacing: .04em;
}
.side__badge {
  background: #343b48;
  color: #dfe3ea;
  font-size: .62rem;
  font-weight: var(--bo-fw-x);
  padding: 1px 7px;
  border-radius: 999px;
}
.side__link {
  display: flex;
  align-items: center;
  gap: var(--bo-3);
  padding: .55rem .75rem;
  border-radius: var(--bo-r-sm);
  font-weight: var(--bo-fw);
  font-size: .88rem;
  color: #c5cbd6;
  margin-bottom: 2px;
  cursor: pointer;
  min-height: var(--bo-touch);
  transition: background .12s, color .12s;
}
.side__link .ic { font-size: 1rem; width: 20px; text-align: center; flex: 0 0 auto; }
.side__link:hover { background: #2a313c; color: #fff; }
.side__link.on {
  background: var(--bo-grad);
  color: #231a08;
  font-weight: var(--bo-fw-x);
}
.side__foot {
  padding: var(--bo-4);
  font-size: var(--bo-fs-xs);
  color: #7b8494;
  border-top: 1px solid #2f3642;
  margin-top: var(--bo-4);
}
.side__foot a { color: #dbeafe; font-weight: var(--bo-fw); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  background: var(--bo-surface);
  border-bottom: 1px solid var(--bo-line);
  padding: .7rem var(--bo-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-3);
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 58px;
}
.top h1 {
  font-size: var(--bo-fs-lg);
  font-weight: var(--bo-fw-x);
  color: var(--bo-ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.top__act { display: flex; gap: var(--bo-2); align-items: center; flex-wrap: wrap; }
.content {
  padding: var(--bo-5);
  flex: 1;
  max-width: var(--bo-content-max);
  width: 100%;
  margin-inline: auto;
}

/* ---------- Buttons ---------- */
.btn {
  border: none;
  border-radius: var(--bo-r-sm);
  padding: 0 var(--bo-4);
  min-height: var(--bo-ctrl-h);
  font-weight: var(--bo-fw-b);
  font-size: var(--bo-fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bo-2);
  transition: filter .12s, border-color .12s, background .12s, color .12s;
  white-space: nowrap;
}
.btn--p {
  background: var(--bo-grad);
  color: #231a08;
  box-shadow: 0 4px 14px rgba(247, 147, 30, .28);
}
.btn--p:hover { filter: brightness(1.04); }
.btn--g {
  background: var(--bo-surface);
  border: 1.5px solid var(--bo-line);
  color: var(--bo-ink-2);
}
.btn--g:hover { border-color: #c9d0db; background: var(--bo-surface-2); }
.btn--ghost, .btn--icon {
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--bo-muted);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--bo-surface-2); color: var(--bo-ink); }
.btn--danger {
  background: #fff;
  border: 1.5px solid #f3c0bd;
  color: var(--bo-red);
}
.btn--danger:hover { background: #fef2f2; }
.btn--sm { min-height: var(--bo-ctrl-h-sm); padding: 0 .7rem; font-size: .78rem; }
.btn--ok { background: #e8f7ee; color: var(--bo-green); border: 1.5px solid #b7e4c7; }

/* ---------- Cards / panels ---------- */
.panel, .kpi, .bo-card, .tablewrap, .bo-work, .bo-dash__card, .compose, .pcard {
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-lg);
  box-shadow: var(--bo-shadow);
}
.panel { padding: var(--bo-4) var(--bo-5); }
.panel__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bo-3);
  margin-bottom: var(--bo-4);
}
.panel__h h3 {
  font-size: var(--bo-fs-md);
  font-weight: var(--bo-fw-x);
  color: var(--bo-ink);
}

/* ---------- Status badges ---------- */
.tag, .bo-badge, .pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
  padding: .18rem .55rem;
  border-radius: 999px;
  line-height: 1.3;
  background: #eef2f7;
  color: var(--bo-muted);
}
.tag--ok, .bo-badge--ok, .pill--in { background: #e8f7ee; color: var(--bo-green); }
.tag--warn, .bo-badge--warn { background: #fff7e8; color: var(--bo-amber); }
.tag--danger, .bo-badge--err, .pill--out { background: #fdeeee; color: var(--bo-red); }
.tag--info, .bo-badge--info { background: #eaf6fc; color: var(--bo-blue-d); }

/* ---------- Forms ---------- */
.fld > span, .fld > label {
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
  color: var(--bo-muted);
  letter-spacing: .01em;
}
.fld input, .fld select, .fld textarea,
.tbar input, .tbar select,
.bo-search__in {
  min-height: var(--bo-ctrl-h);
  border: 1.5px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  padding: .55rem .8rem;
  font-family: inherit;
  font-weight: var(--bo-fw);
  font-size: var(--bo-fs);
  background: var(--bo-surface);
  color: var(--bo-ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus,
.bo-search__in:focus {
  border-color: var(--bo-blue);
  box-shadow: 0 0 0 3px rgba(41, 171, 226, .14);
}
.fld textarea { min-height: 72px; resize: vertical; }

/* ---------- Occupancy / steppers (fix layout — no absolute) ---------- */
.roomrow {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--bo-3) !important;
  align-items: stretch !important;
  background: var(--bo-surface-2);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  padding: var(--bo-3) var(--bo-4) !important;
  margin-bottom: var(--bo-3);
  grid-template-columns: none !important;
}
.roomrow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-2);
}
.roomrow__n {
  font-size: var(--bo-fs-sm);
  font-weight: var(--bo-fw-x);
  color: var(--bo-ink);
  padding: 0 !important;
}
.roomrow__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(160px, 1fr));
  gap: var(--bo-3);
  align-items: end;
}
.roomrow__pax {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bo-3);
}
.roomrow .fld--pax { min-width: 0; }
/* Stepper carries its own label — hide the outer field label to avoid collision */
.fld--pax > span:first-of-type:not(.stp) { display: none; }
.fld--pax > .stp { width: 100%; }
.roomrow__ages {
  display: flex;
  flex-direction: column;
  gap: var(--bo-2);
  padding-top: var(--bo-1);
  border-top: 1px dashed var(--bo-line);
}
.roomrow__ages:empty { display: none; }
.ages {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--bo-2) !important;
  margin: 0 !important;
}
.fld--age { min-width: 0 !important; }
.fld--age select.age-in {
  max-width: none !important;
  width: 100%;
  min-height: var(--bo-ctrl-h-sm);
}

.pxg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-2);
  align-items: stretch;
}
.stp {
  display: inline-grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--bo-1);
  border: 1.5px solid var(--bo-line);
  border-radius: var(--bo-r-sm);
  padding: var(--bo-2) var(--bo-2) var(--bo-2) var(--bo-3);
  background: var(--bo-surface);
  min-width: 148px;
  min-height: 56px;
}
.stp i {
  grid-column: 1 / -1;
  grid-row: 1;
  font-style: normal;
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
  color: var(--bo-muted);
  padding: 0 0 2px !important;
  line-height: 1.2;
}
.stp__b {
  width: var(--bo-touch) !important;
  height: var(--bo-touch) !important;
  min-width: var(--bo-touch);
  min-height: var(--bo-touch);
  border: 0;
  border-radius: var(--bo-r-sm);
  background: #eef1f6;
  color: var(--bo-ink);
  font-weight: var(--bo-fw-x);
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  grid-row: 2;
}
.stp__b:hover { background: #e0e6ef; }
.stp input {
  width: 48px !important;
  border: 0 !important;
  text-align: center;
  padding: .35rem .1rem !important;
  font-weight: var(--bo-fw-x);
  font-size: 1.05rem;
  box-shadow: none !important;
  -moz-appearance: textfield;
  grid-row: 2;
  min-height: var(--bo-touch);
  background: transparent !important;
}
.stp input::-webkit-outer-spin-button,
.stp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Dashboard ---------- */
.bo-dash { display: flex; flex-direction: column; gap: var(--bo-5); }
.bo-dash__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-4);
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 !important;
}
.bo-dash__greet h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: var(--bo-fw-x);
  color: var(--bo-ink);
  letter-spacing: -.03em;
  margin: 0;
  line-height: 1.25;
}
.bo-dash__meta {
  color: var(--bo-muted);
  font-size: var(--bo-fs-sm);
  font-weight: var(--bo-fw);
  margin-top: var(--bo-2);
}
.bo-dash__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-2);
  align-items: center;
}
.bo-work {
  padding: var(--bo-4) !important;
  margin: 0 !important;
}
.bo-work__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bo-3);
  margin-bottom: var(--bo-4);
}
.bo-work__h h3 {
  margin: 0;
  font-size: var(--bo-fs-md);
  font-weight: var(--bo-fw-x);
}
.bo-work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--bo-3);
}
.bo-work__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bo-2);
  text-align: start;
  padding: var(--bo-4);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  background: var(--bo-surface-2);
  cursor: pointer;
  font: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  min-height: 112px;
}
.bo-work__card:hover {
  border-color: #d0d7e2;
  box-shadow: var(--bo-shadow);
  transform: translateY(-1px);
}
.bo-work__card--att {
  border-color: rgba(247, 147, 30, .45);
  background: linear-gradient(180deg, #fffaf4, #fff);
}
.bo-work__n {
  font-size: 1.65rem;
  font-weight: var(--bo-fw-x);
  font-variant-numeric: tabular-nums;
  color: var(--bo-ink);
  line-height: 1;
  min-width: 0 !important;
  height: auto !important;
  background: none !important;
  display: block !important;
}
.bo-work__t {
  font-size: var(--bo-fs-sm);
  font-weight: var(--bo-fw-b);
  color: var(--bo-ink-2);
  line-height: 1.35;
}
.bo-work__hint {
  font-size: var(--bo-fs-xs);
  color: var(--bo-muted);
  font-weight: var(--bo-fw);
  margin-top: auto;
}
.bo-dash__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--bo-3);
  margin: 0 !important;
}
.bo-dash__card {
  text-align: start;
  padding: var(--bo-4) !important;
  cursor: pointer;
  border: 1px solid var(--bo-line);
  box-shadow: none !important;
  background: var(--bo-surface);
  border-radius: var(--bo-r);
  transition: border-color .12s, box-shadow .12s;
}
.bo-dash__card:hover {
  border-color: var(--bo-blue);
  box-shadow: var(--bo-shadow) !important;
}
.bo-dash__lab {
  display: block;
  color: var(--bo-muted);
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
}
.bo-dash__val {
  display: block;
  margin-top: var(--bo-2);
  font-size: 1.25rem;
  font-weight: var(--bo-fw-x);
  font-variant-numeric: tabular-nums;
  color: var(--bo-ink);
  line-height: 1.2;
}
.bo-dash__note {
  font-size: var(--bo-fs-xs);
  color: var(--bo-muted-2);
  max-width: none !important;
  margin: 0;
}

/* ---------- Search ---------- */
.bo-search {
  position: relative;
  flex: 1;
  max-width: 420px;
  min-width: 160px;
}
.bo-search__in {
  width: 100%;
  padding-inline: .9rem 2rem;
}
.bo-search__drop {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  box-shadow: var(--bo-shadow-lg);
  max-height: min(420px, 70vh);
  overflow: auto;
  z-index: 80;
  padding: var(--bo-2);
}
.bo-search__gh {
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
  color: var(--bo-muted);
  padding: var(--bo-2) var(--bo-3);
}
.bo-search__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: .55rem .7rem;
  border-radius: var(--bo-r-sm);
  cursor: pointer;
  text-align: start;
  font: inherit;
}
.bo-search__item.on, .bo-search__item:focus {
  background: #eef2f7;
  outline: none;
}
.bo-search__item b { font-weight: var(--bo-fw-b); font-size: var(--bo-fs-sm); }
.bo-search__item span { font-size: var(--bo-fs-xs); color: var(--bo-muted); }

/* ---------- Composer / sticky ---------- */
.compose {
  padding: var(--bo-4) !important;
  border-radius: var(--bo-r-lg) !important;
}
.compose__add {
  position: relative;
  margin-top: var(--bo-3);
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--bo-2);
  align-items: center;
  max-width: 100%;
}
.ed__f, .modal__f {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--bo-line);
  z-index: 5;
}
.commercial {
  border-radius: var(--bo-r) !important;
  padding: var(--bo-4) !important;
}

/* ---------- Service cards density ---------- */
.pcard {
  padding: .85rem 1rem !important;
}
.pcard__m b, .edlive__p b {
  font-variant-numeric: tabular-nums;
}

/* ---------- Empty ---------- */
.empty {
  text-align: center;
  color: var(--bo-muted);
  padding: var(--bo-7) var(--bo-4);
  font-weight: var(--bo-fw);
  font-size: var(--bo-fs);
}
.empty--s { padding: var(--bo-5) var(--bo-3); font-size: var(--bo-fs-sm); }

/* ---------- Traveler chips ---------- */
.trav-panel {
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r-lg);
  padding: var(--bo-4);
  margin-bottom: var(--bo-4);
  box-shadow: var(--bo-shadow);
}
.trav-panel__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bo-3);
  flex-wrap: wrap;
  margin-bottom: var(--bo-3);
}
.trav-panel__h h3 {
  margin: 0;
  font-size: var(--bo-fs-md);
  font-weight: var(--bo-fw-x);
}
.trav-panel__b {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--bo-3);
}
.tchip {
  display: flex;
  flex-direction: column;
  gap: var(--bo-2);
  padding: var(--bo-3) var(--bo-4);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  background: var(--bo-surface-2);
  min-width: 0;
  position: relative;
}
.tchip .x { position: static; }
.tchip__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-2);
}
.tchip__main b {
  font-size: var(--bo-fs);
  font-weight: var(--bo-fw-x);
  color: var(--bo-ink);
  overflow-wrap: anywhere;
}
.tchip__meta {
  font-size: var(--bo-fs-xs);
  color: var(--bo-muted);
  font-weight: var(--bo-fw);
}
.tchip__acts {
  display: flex;
  gap: var(--bo-2);
  flex-wrap: wrap;
  margin-top: var(--bo-1);
}
.tchip__del { min-width: var(--bo-touch); padding: 0 !important; color: var(--bo-red) !important; }

/* ---------- Customer list ---------- */
.clist { display: flex; flex-direction: column; gap: var(--bo-3); }
.clist__card {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-3);
  padding: var(--bo-4);
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  box-shadow: var(--bo-shadow);
  cursor: pointer;
}
.clist__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.clist__name { font-size: var(--bo-fs); font-weight: var(--bo-fw-x); color: var(--bo-ink); }
.clist__phone { font-size: var(--bo-fs-sm); color: var(--bo-muted); font-weight: var(--bo-fw); }
.clist__meta { display: flex; flex-wrap: wrap; gap: var(--bo-2); align-items: center; margin-top: 2px; }
.clist__act { flex: 0 0 auto; }
.clist__table { display: block; }

@media (max-width: 768px) {
  .clist__card { display: flex; }
  .clist__table { display: none !important; }
}

/* ---------- Tables → cards on phone ----------
   The data tables in this app come in three flavours of markup, all of which must collapse:
   `<table class="dt">`, `<table class="tbl">`, and the plain `<table>` that app.js renders
   inside `.tablewrap`. Targeting only one of them leaves the others as 640-1180px-wide tables
   that push the whole page sideways on a phone. */
@media (max-width: 640px) {
  .tablewrap, .tblwrap, .dt { overflow: visible; min-width: 0; }
  table.dt, table.tbl, .tablewrap > table, .tblwrap > table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  table.dt thead, table.tbl thead, .tablewrap > table > thead, .tblwrap > table > thead { display: none; }
  table.dt tbody, table.tbl tbody, .tablewrap > table > tbody, .tblwrap > table > tbody {
    display: flex; flex-direction: column; gap: var(--bo-3);
  }
  table.dt tbody tr, table.tbl tbody tr, .tablewrap > table > tbody > tr, .tblwrap > table > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--bo-3) var(--bo-4);
    background: var(--bo-surface);
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-r);
    box-shadow: var(--bo-shadow);
  }
  table.dt tbody td, table.tbl tbody td, .tablewrap > table > tbody > tr > td, .tblwrap > table > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bo-2);
    border: none !important;
    border-bottom: 1px solid var(--bo-line) !important;
    padding: .45rem 0 !important;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  table.dt tbody td:last-child, table.tbl tbody td:last-child,
  .tablewrap > table > tbody > tr > td:last-child,
  .tblwrap > table > tbody > tr > td:last-child { border-bottom: none !important; }

  /* The column name, put on each cell by responsive-tables.js, so a stacked card still says
     what each value is now that the <thead> is hidden. */
  table.dt tbody td[data-label]::before,
  table.tbl tbody td[data-label]::before,
  .tablewrap > table > tbody > tr > td[data-label]::before,
  .tblwrap > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-inline-end: var(--bo-3);
    color: var(--bo-muted);
    font-size: var(--bo-fs-sm);
    font-weight: var(--bo-fw-x);
    white-space: nowrap;
  }
  /* A cell with no header (the actions column) spans the card instead of sitting half-width. */
  table.dt tbody td:not([data-label]),
  table.tbl tbody td:not([data-label]),
  .tablewrap > table > tbody > tr > td:not([data-label]),
  .tblwrap > table > tbody > tr > td:not([data-label]) { justify-content: flex-end; }

}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  /* The sidebar becomes an off-canvas drawer parked just outside the viewport. Parked or not,
     it still counts towards the page's scroll width, which is what makes a phone rubber-band
     sideways onto a strip of empty page. Clip the inline axis; the drawer slides in over the
     content rather than beside it, so nothing real is being hidden. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .menu-btn { display: inline-flex !important; }
  /* Touch targets: 22px of text is a miss on a phone, and "خروج" is not a link to miss. */
  .menu-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .side__foot a, .top a { display: inline-flex; align-items: center; min-height: 32px; padding-block: .25rem; }
  .side {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    z-index: 60;
    width: min(280px, 88vw);
    transform: translateX(100%);
    transition: transform .2s ease;
    box-shadow: var(--bo-shadow-lg);
  }
  html[dir="rtl"] .side { transform: translateX(100%); }
  html[dir="ltr"] .side { transform: translateX(-100%); }
  .side.open { transform: translateX(0) !important; }
  .content { padding: var(--bo-4); }
  .bo-work__grid { grid-template-columns: 1fr 1fr; }
  .roomrow__fields { grid-template-columns: 1fr; }
  .roomrow__pax { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .top { padding: .65rem var(--bo-3); }
  .top h1 { font-size: 1.05rem; }
  .content { padding: var(--bo-3); }
  .bo-work__grid, .bo-dash__grid { grid-template-columns: 1fr; }
  .bo-dash__quick { width: 100%; }
  .bo-dash__quick .btn { flex: 1 1 calc(50% - 4px); }
  .bo-search { max-width: none; min-width: 0; }
  /* keep search reachable via Ctrl+K even on phone — collapse visual only when empty */
  .top .bo-search:not(:focus-within) { max-width: 42px; overflow: hidden; }
  .top .bo-search:focus-within { display: block; max-width: none; position: absolute; inset-inline: var(--bo-3); top: 100%; z-index: 50; background: #fff; padding: var(--bo-2); border: 1px solid var(--bo-line); border-radius: var(--bo-r); box-shadow: var(--bo-shadow-lg); }
  .roomrow__pax { grid-template-columns: 1fr; }
  .stp { width: 100%; min-width: 0; }
  .frow { grid-template-columns: 1fr !important; }
  .trav-panel__b { grid-template-columns: 1fr; }
}

/* ---------- Closure pass: finance / ops / composer / supplier ---------- */
.bo-segbar {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bo-2);
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: var(--bo-4);
  -webkit-overflow-scrolling: touch;
}
.bo-seg {
  flex: 0 0 auto;
  border: 1.5px solid var(--bo-line);
  background: var(--bo-surface);
  color: var(--bo-ink-2);
  border-radius: 999px;
  padding: .45rem .9rem;
  font-weight: var(--bo-fw-b);
  font-size: var(--bo-fs-sm);
  min-height: var(--bo-ctrl-h-sm);
  cursor: pointer;
}
.bo-seg.on {
  background: var(--bo-grad);
  border-color: transparent;
  color: #231a08;
  font-weight: var(--bo-fw-x);
}
.fin__sum--3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bo-3);
  margin-bottom: var(--bo-4);
}
.fin__kpi {
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  padding: var(--bo-3) var(--bo-4);
  box-shadow: var(--bo-shadow);
}
.fin__kpi span { display: block; font-size: var(--bo-fs-xs); color: var(--bo-muted); font-weight: var(--bo-fw-b); }
.fin__kpi b { display: block; margin-top: 4px; font-size: var(--bo-fs-md); font-weight: var(--bo-fw-x); font-variant-numeric: tabular-nums; }
.fin__cards { display: none; flex-direction: column; gap: var(--bo-3); }
.fin__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bo-3);
  padding: var(--bo-4);
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  box-shadow: var(--bo-shadow);
}
.fin__card-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fin__card-a { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.fin__desk { display: block; }
@media (max-width: 768px) {
  .fin__cards { display: flex; }
  .fin__desk { display: none !important; }
  /* Two per row, not one: nine KPIs stacked single-file turn the dashboard into a scroll the
     user has to travel before reaching anything actionable. The dashboard renders them as
     several separate groups of three, so the odd one out spans the row rather than leaving a
     hole beside it. */
  .fin__sum--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin__sum--3 > .fin__kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fin__card { flex-direction: column; }
  .fin__card-a { flex-direction: row; flex-wrap: wrap; width: 100%; }
}
@media (max-width: 380px) {
  .fin__sum--3 { grid-template-columns: 1fr; }
}

.compose--compact { padding: var(--bo-3) var(--bo-4) !important; }
.compose__row--compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-2);
  align-items: center;
}
.compose__row--compact .compose__in {
  flex: 1 1 180px;
  min-height: var(--bo-ctrl-h);
  min-width: 0;
}
.compose__examples { display: none; }

.polstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-3);
  flex-wrap: wrap;
  padding: var(--bo-3) var(--bo-4);
  margin: 0 0 var(--bo-3);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  background: var(--bo-surface-2);
  font-size: var(--bo-fs-sm);
  font-weight: var(--bo-fw);
}
.polstrip--ok { border-color: #b7e4c7; background: #f3fbf6; color: var(--bo-green); }
.polstrip--need { border-color: #f3d9a4; background: #fffaf0; }

.otw__layout--focus { display: block; }
/* ops aside permanently removed — ignore legacy split helpers */
.otw__aside { display: none !important; }
.otw__prog--sum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-3) var(--bo-5);
  margin-top: var(--bo-3);
  padding: var(--bo-3) var(--bo-4);
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
}
.otw__when { font-size: var(--bo-fs-xs); font-weight: var(--bo-fw-b); color: var(--bo-muted); min-width: 5.5rem; }
.otw__svc-meta { display: flex; flex-wrap: wrap; gap: var(--bo-2); margin-top: 4px; align-items: center; }
.otw__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bo-fs-xs);
  font-weight: var(--bo-fw-b);
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--bo-muted);
}
.otw__pill.ok { background: #e8f7ee; color: var(--bo-green); }
.otw__pill.wait { background: #fff7e8; color: var(--bo-amber); }
.otw__ex {
  margin-top: var(--bo-3);
  padding: var(--bo-3);
  border-radius: var(--bo-r-sm);
  background: #fff7e8;
  border: 1px solid #f3d9a4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-2);
  align-items: center;
  justify-content: space-between;
}
.otw__ex-a { display: flex; gap: var(--bo-2); flex-wrap: wrap; }

.s360__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bo-3);
}
.s360__kpi {
  background: var(--bo-surface);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
  padding: var(--bo-3) var(--bo-4);
}
.s360__kpi span { font-size: var(--bo-fs-xs); color: var(--bo-muted); font-weight: var(--bo-fw-b); }
.s360__kpi b { display: block; margin-top: 4px; font-size: 1.2rem; font-weight: var(--bo-fw-x); }
.s360__sec--wide { grid-column: 1 / -1; }
.s360__tot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-3) var(--bo-5);
  align-items: baseline;
  padding: var(--bo-3) var(--bo-4);
  margin-bottom: var(--bo-3);
  background: var(--bo-surface-2);
  border: 1px solid var(--bo-line);
  border-radius: var(--bo-r);
}
.s360__chips { display: flex; flex-wrap: wrap; gap: var(--bo-2); }

@media (max-width: 1024px) {
  .s360__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .s360__grid { grid-template-columns: 1fr; }
  .otw__svc-h { flex-wrap: wrap; }
}

/* 1440 density — use width, don't stretch empty vertical */
@media (min-width: 1440px) {
  .bo-work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bo-dash__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .content { padding-block: var(--bo-5); }
  .pb__grid { align-items: start; }
}

/* Sales workflow stage bar + primary CTAs */
.wflow{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;margin:0 0 .75rem;padding:.55rem .7rem;background:var(--bo-surface-2,#f4f6f9);border:1px solid var(--bo-line,#e5e8ef);border-radius:var(--bo-r,10px);font-size:.82rem}
.wflow__s{display:inline-flex;align-items:center;gap:.3rem;color:var(--bo-muted,#6b7280);font-weight:600}
.wflow__s i{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:999px;background:#e5e8ef;font-style:normal;font-size:.7rem}
.wflow__s.is-done{color:var(--bo-ok,#1a7f4e)}
.wflow__s.is-done i{background:#d9f5e6}
.wflow__s.is-on{color:var(--bo-ink,#141a28);font-weight:800}
.wflow__s.is-on i{background:var(--bo-accent,#c9a227);color:#141a28}
.wflow__sep{width:.55rem;height:1px;background:var(--bo-line,#e5e8ef)}
.topmore{position:relative;display:inline-block}
.topmore>summary{list-style:none;cursor:pointer;padding:.25rem .55rem;border:1px solid var(--bo-line,#e5e8ef);border-radius:8px;background:#fff;font-weight:700}
.topmore>summary::-webkit-details-marker{display:none}
.topmore__m{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:40;display:flex;flex-direction:column;gap:.35rem;min-width:10rem;padding:.5rem;background:#fff;border:1px solid var(--bo-line,#e5e8ef);border-radius:10px;box-shadow:0 8px 24px rgba(20,26,40,.12)}
.prow--wf{display:flex;align-items:center;gap:.5rem;width:100%}
.prow--wf .prow__main{flex:1;display:flex;align-items:center;gap:.75rem;text-align:start;background:transparent;border:0;cursor:pointer;padding:.55rem .35rem}
.prow--wf .prow__act{flex:0 0 auto}

.segpaste-warn{margin:.5rem 0;padding:.55rem .75rem;border-radius:10px;background:#fff8e6;border:1px solid #f0d78c;color:#6b5200;font-size:.86rem;font-weight:700}

/* The hamburger belongs to the drawer layout only. `style.css` hides it with `.menu-btn
   {display:none}`, but the button also carries `.btn`, whose `display` is declared later in
   the cascade and therefore wins — leaving a drawer toggle sitting next to an already-open
   sidebar on desktop. Hide it explicitly above the drawer breakpoint. */
@media (min-width: 1025px) {
  .menu-btn { display: none !important; }
}

/* ---------- Phone overrides that must outrank the component rules above ----------
   These live at the end of the file on purpose: the components they adjust (`.prow--wf`,
   `.wflow`, `.topmore`) are declared above at the same specificity, so a media query placed
   earlier would be silently overridden by them regardless of viewport. */
@media (max-width: 640px) {
  /* The proposal row is a flex row of four fixed parts. On a phone it stacks: the row button
     takes the full width and the action becomes a full-width button under it, instead of a
     narrow chip floating in the middle of the card. */
  .prow--wf { flex-wrap: wrap; align-items: stretch; }
  .prow--wf .prow__main {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .3rem .6rem;
    padding: .2rem .1rem;
  }
  .prow--wf .prow__main > * { min-width: 0; overflow-wrap: anywhere; }
  /* reference + customer + dates take their own line; status and total share the next one,
     so every card reads the same way down the list */
  .prow--wf .prow__a { flex: 1 1 100%; }
  .prow--wf .prow__c { flex: 0 0 auto; order: 2; }
  .prow--wf .prow__d { flex: 1 1 auto; order: 3; text-align: end; }
  .prow--wf .prow__act {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 40px;
  }
  .wflow { font-size: .78rem; padding: .5rem .6rem; }
  .topmore__m { inset-inline-end: auto; inset-inline-start: 0; }

  /* 16px is not a taste choice on a phone: Safari on iOS zooms the whole page in whenever a
     focused field's text is smaller than that, and never zooms back out — every date, amount
     and search box in the back office was 14.7px, so tapping any of them threw the layout
     off. `.fld input` is declared unconditionally in this file, which is loaded after
     style.css, so style.css's own phone rule for the same selector never got a chance; this
     has to live here, at the end, to actually win. */
  .fld input, .fld select, .fld textarea,
  .form input, .form select, .form textarea,
  .tbar input, .tbar select, .bo-search__in,
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="text"], input[type="number"], input[type="email"],
  input[type="tel"], input[type="search"], input[type="password"], textarea, select {
    font-size: 16px;
  }
  /* Give the taller text back some breathing room rather than letting it crowd the borders. */
  .fld input, .fld select, .fld textarea,
  .form input, .form select, .form textarea { min-height: 44px; }
}

/* Phone: the AI box stays one compact row (input + small buttons), so the «أضف» chips stay in view. */
@media (max-width: 640px) {
  .compose--compact .compose__row.compose__row--compact { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .compose--compact .compose__row--compact .compose__in { flex: 1 1 100%; min-height: 44px; height: auto; }
  .compose--compact .compose__row--compact > .btn { flex: 1 1 0; min-height: 44px; }
}