/* ══════════════════════════════════════════════════════════════════════════
   GoSky Hawaii — Flight Operations Admin
   Apple Human Interface design system. Clean, breathable, functional.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Refined neutral surfaces — quiet graphite-gray, no candy tint ── */
  --bg:       #f4f5f7;   /* app background — professional, restrained */
  --white:    #ffffff;   /* card / surface */

  /* ── One restrained accent: a deep slate-blue, NOT bright iOS blue.
        Drives primary actions, links, focus, selection — sits with the
        muted group palette instead of shouting over it. ── */
  --blue:     #2f4f72;   /* slate-blue, deepened for crisper button presence */
  --accent:   #2f4f72;
  --accent-d: #243f5c;   /* pressed */

  /* ── Semantic status colours — kept (dots & money states read instantly),
        deepened a touch from neon iOS so they look considered, not toy-like. ── */
  --green:    #2f9e5b;
  --orange:   #c97a1f;
  --red:      #d6463b;
  --purple:   #7d6aa8;

  /* tinted fills (soft status backgrounds) */
  --blue-fill:   rgba(47,79,114,.10);
  --green-fill:  rgba(47,158,91,.12);
  --orange-fill: rgba(201,122,31,.12);
  --red-fill:    rgba(214,70,59,.10);
  --purple-fill: rgba(125,106,168,.12);

  /* semantic text-on-fill (darkened so it reads on the soft fill) */
  --green-d:  #237a45;
  --orange-d: #9a5b12;

  --t1:  #181b21;        /* label — primary ink (cleaner, near-neutral) */
  --t2:  #6e737d;        /* secondaryLabel */
  --t3:  #9aa0ab;        /* tertiaryLabel — meta / timestamps (more legible) */
  /* Crisp 1px hairlines define surfaces (border-first, not shadow-first). */
  --sep: rgba(30,35,45,.11);
  --fill: rgba(30,35,45,.05);

  /* ── Radius scale — tightened toward a "tool", not a toy ── */
  --r-xs:  5px;          /* badges / toggles */
  --r-sm:  7px;          /* inputs / buttons / small cards */
  --r-md:  9px;          /* booking cards / blocks */
  --r-lg:  13px;         /* panel / modal */

  /* ── Shadow scale — nearly flat; surfaces lean on borders, not lift ── */
  --sh-sm: 0 1px 1px rgba(20,28,44,.03);
  --sh-md: 0 1px 2px rgba(20,28,44,.05), 0 1px 1px rgba(20,28,44,.03);
  --sh-lg: 0 6px 18px rgba(20,28,44,.08), 0 2px 5px rgba(20,28,44,.04);
  --sh-xl: 0 16px 40px rgba(20,28,44,.12), 0 5px 14px rgba(20,28,44,.06);

  /* ── Type — Inter (loaded in index.php), system stack as fallback ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg);
  color: var(--t1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Type primitives — reused everywhere ──────────────────────────────────
   .section-label pattern: 11px / 600 / uppercase / +.5px / --t2 / mb 10px
   is applied by hand to every label class so the file stays self-contained. */

.app { display: flex; height: 100vh; }

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar (collapsible)
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--sep);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  transition: width .24s cubic-bezier(.4,0,.2,1), padding .24s cubic-bezier(.4,0,.2,1);
}
.app.nav-collapsed .sidebar { width: 76px; padding: 20px 14px; }

/* brand row */
.side-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
  box-shadow: var(--sh-sm);
}
.brand-mark:hover { background: var(--accent-d); }
.brand-text { flex: 1; min-width: 0; white-space: nowrap; }
.brand-text h1 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; color: var(--t1); }
.brand-text p { font-size: 11px; font-weight: 400; color: var(--t3); margin-top: 1px; }

.nav-collapse {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: none; border-radius: var(--r-xs);
  background: var(--fill); color: var(--t2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.nav-collapse:hover { background: rgba(60,60,67,.12); color: var(--t1); }
.nav-collapse svg { width: 16px; height: 16px; }

/* collapsed state */
.app.nav-collapsed .brand-text,
.app.nav-collapsed .nav-collapse,
.app.nav-collapsed .nav-label { display: none; }
.app.nav-collapsed .side-top { justify-content: center; }
.app.nav-collapsed .nav-row { justify-content: center; padding: 10px 0; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.1px;
  color: var(--t2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.nav-row:hover { background: var(--fill); color: var(--t1); }
.nav-row.on { color: var(--blue); background: var(--blue-fill); }
.nav-icon {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Content + toolbar
   ══════════════════════════════════════════════════════════════════════════ */
.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.toolbar {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--sep);
  box-shadow: 0 1px 3px rgba(20,28,44,.04);
  position: relative;
  z-index: 10;
}

.stepper {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.stepper button {
  background: none; border: none;
  width: 38px; height: 38px;
  cursor: pointer;
  color: var(--blue);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.stepper button:hover { background: var(--fill); }
.stepper-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.2px;
  padding: 0 14px;
  border-left: 1px solid var(--sep);
  border-right: 1px solid var(--sep);
  min-width: 172px;
  height: 38px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background .1s;
}
.stepper-label:hover { background: var(--fill); }

.t-today {
  background: none; border: none;
  color: var(--blue); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 6px 12px;
  border-radius: var(--r-xs);
  transition: background .1s;
}
.t-today:hover { background: var(--fill); }

.t-chip {
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  font-size: 13px; font-weight: 400; color: var(--t2);
  box-shadow: var(--sh-sm);
}
.t-chip b { color: var(--t1); font-weight: 600; }

.ml { margin-left: auto; }

.t-add {
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--r-sm);
  padding: 9px 18px;
  font-size: 14px; font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  transition: background .12s;
}
.t-add:hover { background: var(--accent-d); }

/* ── Views ── */
.view { flex: 1; overflow: hidden; display: none; }
.view.on { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════════════════════════
   Board (Gantt) — slots are columns, aircraft stack as rows
   ══════════════════════════════════════════════════════════════════════════ */
#slots {
  flex: 1;
  overflow: auto;
  background: var(--bg);
}
/* Empty state for a day with no capacity set up — a clean white panel. */
.board-empty {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: var(--white); text-align: center; padding: 40px;
}
.board-empty-t { font-size: 15px; font-weight: 600; color: var(--t2); letter-spacing: -.2px; }
.board-empty-s { font-size: 13px; color: var(--t3); }

/* Board loading overlay while a new booking is being created. */
#view-bookings { position: relative; }
.board-busy {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
.board-busy-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--sep); border-radius: 12px;
  box-shadow: var(--sh-lg); padding: 12px 18px;
  font-size: 13px; font-weight: 600; color: var(--t1);
}

.board {
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
}
.board-head, .board-body {
  display: grid;
  grid-template-columns: 88px repeat(var(--n), 224px);
}
.board-head { position: sticky; top: 0; z-index: 3; }
.board-body {
  grid-template-rows: repeat(var(--rows), 96px) 1fr;
  flex: 1;
  position: relative;
}
/* Faint horizontal rule every lane (96px) so empty board reads as a grid,
   not a void. Continues the full height through the trailing empty area. */
.gcol-guide {
  grid-row: 1 / -1;
  border-right: 1px solid var(--sep);
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 95px,
    rgba(30,35,45,.05) 95px, rgba(30,35,45,.05) 96px);
}
.gcol-guide.closed {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(214,70,59,.045) 8px, rgba(214,70,59,.045) 16px),
    repeating-linear-gradient(to bottom, transparent, transparent 95px, rgba(30,35,45,.05) 95px, rgba(30,35,45,.05) 96px);
}

/* drag & drop */
.drop-hint {
  position: absolute;
  border: 2px dashed var(--blue);
  background: rgba(47,79,114,.07);
  border-radius: var(--r-md);
  pointer-events: none;
  z-index: 40;
  transition: left .06s, top .06s, width .06s;
}
.drop-hint.bad { border-color: var(--red); background: rgba(255,59,48,.07); }
.drop-hint.swap { border-color: var(--orange); background: rgba(255,149,0,.09); }

/* left aircraft gutter */
.gutter-head {
  position: sticky; left: 0; z-index: 2;
  grid-column: 1;
  background: var(--white);
  border-bottom: 1px solid var(--sep);
  border-right: 1px solid var(--sep);
  display: flex; align-items: flex-end;
  padding: 14px 14px 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t3);
}
.gutter-bg {
  position: sticky; left: 0; z-index: 1;
  grid-column: 1; grid-row: 1 / -1;
  background: var(--white);
  border-right: 1px solid var(--sep);
}
.gutter-cell {
  position: sticky; left: 0; z-index: 1;
  grid-column: 1;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--sep);
}
.gutter-cell.standby { opacity: .45; }
.gutter-cell.standby .plane-no { font-weight: 600; }
.plane-tag {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.plane-ico {
  display: flex; align-items: center; justify-content: center;
  color: var(--t1);
}
.plane-ico svg { width: 26px; height: 26px; }
.plane-ico .plane-img { width: 30px; height: 30px; display: block; }
.gutter-cell.standby .plane-img { opacity: .55; }
.plane-no {
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
}

/* ── Gantt booking card (spans the slots it consumes) ── */
.gcard {
  position: relative;
  margin: 7px;
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  padding: 13px 15px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow .14s, opacity .12s;
}
.gcard:hover { box-shadow: var(--sh-md); opacity: .9; }
.gcard.sel { box-shadow: 0 0 0 1.5px rgba(0,0,0,.25), var(--sh-sm); }
/* Completed flight: thin green ring, locked from moves (no grab cursor). */
.gcard.completed { box-shadow: inset 0 0 0 1px rgba(52,199,89,.5), var(--sh-sm); cursor: default; }
.gcard.completed.sel { box-shadow: inset 0 0 0 1px rgba(52,199,89,.5), 0 0 0 1.5px rgba(0,0,0,.25); }
/* Money status dot — sits in the foot where the status text used to be:
   orange refund-due, red owes, green settled. */
.card-stat { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.gcard-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.gcard-dot.due    { background: var(--red); }
.gcard-dot.credit { background: var(--orange); }
.gcard-dot.ok     { background: var(--green); }
/* Waiver / check-in code — plain grey, aligned right of the name (no box). */
.card-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.card-top .card-name { flex: 1; min-width: 0; }
.gcard-code {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--t2); font-variant-numeric: tabular-nums;
}
/* Refunded: parked on standby, seat released — faded, dashed, not draggable. */
.gcard.refunded {
  opacity: .45;
  filter: grayscale(.5);
  border-style: dashed;
  border-color: var(--sep);
  cursor: default;
  box-shadow: none;
}
.gcard.refunded:hover { opacity: .65; transform: none; box-shadow: none; }
.gcard.refunded .card-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.card-dep.refunded { color: var(--t2); font-style: italic; font-weight: 600; }
.gcard.dragging {
  cursor: grabbing;
  z-index: 60;
  opacity: .97;
  box-shadow: var(--sh-lg);
  transform: scale(1.01);
  transition: none;
}
.gcard .card-name {
  margin-bottom: 0; font-size: 14px; font-weight: 600; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t1);
}
.gcard .card-product {
  font-size: 12px; font-weight: 400; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Assigned pilot's shortcode — a small blue badge by the money dot. Same text
   size as the grey waiver code, but tinted + pilled so it reads as a different
   thing (pilot, not check-in code). */
.pilot-sc {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .3px; line-height: 1.4;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--blue); background: var(--blue-fill); border-radius: 5px; padding: 1px 5px;
}

/* ── Column (used by the slot-list layout variant) ── */
.col {
  width: 264px;
  min-width: 264px;
  flex-shrink: 0;
  border-right: 1px solid var(--sep);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.col-head {
  padding: 14px 16px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--sep);
  border-right: 1px solid var(--sep);
  flex-shrink: 0;
}
.col-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.col-time {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  color: var(--t1);
}
.col-btns { display: flex; gap: 6px; align-items: center; }
.col-lock {
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); transition: background .1s;
  padding: 0;
}
.col-lock:hover { background: var(--fill); }
.col-lock svg { width: 20px; height: 20px; }

.col-meta {
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 0;
}
/* editable values — double-click to edit */
.col-editable {
  font-size: 14px; font-weight: 600;
  color: var(--t1); cursor: default;
  border-bottom: 1px dashed var(--t3);
  line-height: 1.1;
}
.col-edit-input {
  font-size: 14px; font-weight: 600;
  border: none; border-bottom: 1.5px solid var(--blue);
  background: none; color: var(--t1);
  text-align: left; outline: none;
  font-family: inherit;
  width: 3ch;
  -moz-appearance: textfield;
}
.col-edit-input::-webkit-inner-spin-button,
.col-edit-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Standard booking card (slot-list layout) ── */
.card {
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: box-shadow .14s;
  box-shadow: var(--sh-sm);
}
.card:hover { box-shadow: var(--sh-md); opacity: .9; }
.card.sel { box-shadow: 0 0 0 1.5px rgba(0,0,0,.25), var(--sh-sm); }
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.card-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--t1);
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-product {
  font-size: 12px;
  font-weight: 400;
  color: var(--t2);
}
.card-dep {
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
}
.card-dep.no { color: var(--t3); }

.empty-state {
  padding: 48px 20px;
  text-align: center;
  color: var(--t3);
  font-size: 14px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   Capacity view
   ══════════════════════════════════════════════════════════════════════════ */
#cap-scroll { flex: 1; overflow-y: auto; padding: 24px; }

/* Capacity day-switch loading veil — blocks clicks until the right day lands */
#view-capacity { position: relative; }
.view-loading {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
  background: rgba(244,245,247,.72);
  backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%);
}
.view-loading[hidden] { display: none; }
.vl-text { font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--t2); }
.vl-spin {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--sep); border-top-color: var(--blue);
  animation: auth-rot .8s linear infinite;
}
.cap-grid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }

.cap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.cap-cols { display: flex; gap: 16px; align-items: flex-start; }
.cap-side { width: 332px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.cap-main { flex: 1; min-width: 0; }

/* section header — the canonical 11px uppercase label */
.cap-blk-hd {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t2); margin-bottom: 14px;
}
/* Merged capacity editor: a state-coloured header band (title + live status +
   actions), then the options strip and slot table. The header background is the
   day's state at a glance — green open, red closed, blue new / multi-day. */
.cap-ed-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid transparent;
  transition: background .18s, border-color .18s;
}
.cap-hd-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cap-main-hd {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-hd-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: -.1px;
}
.cap-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }

/* State tints — full-width header background, matching status colour + accent. */
.cap-ed-hd.hd-live   { background: rgba(52,199,89,.12);  border-bottom-color: rgba(52,199,89,.30); }
.cap-ed-hd.hd-live   .cap-hd-status { color: #1f7a3d; }
.cap-ed-hd.hd-closed { background: rgba(255,59,48,.10);  border-bottom-color: rgba(255,59,48,.28); }
.cap-ed-hd.hd-closed .cap-hd-status { color: var(--red); }
.cap-ed-hd.hd-new,
.cap-ed-hd.hd-multi  { background: var(--blue-fill);     border-bottom-color: rgba(47,79,114,.28); }
.cap-ed-hd.hd-new    .cap-hd-status,
.cap-ed-hd.hd-multi  .cap-hd-status { color: var(--blue); }

.cap-ed-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* One consistent action-button shape; colour by role. */
.cap-btn {
  height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s, border-color .12s, box-shadow .12s, opacity .12s;
}
.cap-btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(47,79,114,.25); }
.cap-btn-primary:hover { background: #26415f; }
/* Close = white ghost danger; Reopen = solid green CTA (it sits on a red band). */
.cap-btn-close { background: var(--white); color: var(--red); border-color: rgba(255,59,48,.4); }
.cap-btn-close:hover { background: #fff; border-color: var(--red); box-shadow: 0 1px 2px rgba(255,59,48,.18); }
.cap-btn-reopen { background: #34A853; color: #fff; box-shadow: 0 1px 2px rgba(52,168,83,.3); }
.cap-btn-reopen:hover { background: #2c9247; }

/* Save (bulk commit) — only shown when there are unsaved edits. It pops in from
   tiny → slightly oversized → its real size, with a shimmer sweep, over ~2s so
   the operator clearly notices there's work to commit.
   NB: .cap-btn sets display:inline-flex, which would override the [hidden]
   attribute — this rule re-hides it (class+attr beats the single class). */
.cap-save[hidden] { display: none; }
.cap-save { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(47,79,114,.25); position: relative; overflow: hidden; }
.cap-save:hover { background: #26415f; }
.cap-save-sm { height: 30px; padding: 0 13px; font-size: 12px; }
.cap-save.save-pop { animation: cap-save-in 1s cubic-bezier(.22,.68,.3,1) both; transform-origin: center; }
.cap-save.save-pop::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  background-size: 220% 100%; background-repeat: no-repeat;
  animation: cap-save-shimmer 1s ease-out 1;
}
@keyframes cap-save-in {
  0%   { opacity: 0; transform: scale(.2); }
  35%  { opacity: 1; transform: scale(1.14); }
  55%  { transform: scale(.98); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes cap-save-shimmer { from { background-position: 200% 0; } to { background-position: -120% 0; } }

.cap-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
  padding: 14px 18px; background: var(--bg); border-bottom: 1px solid var(--sep);
}
.cap-form .cf { gap: 6px; }
.cap-form .cf input, .cap-form .cf select { width: 100%; }
/* No spinner arrows on the number fields. */
.cap-form .cf input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.cap-form .cf input[type=number]::-webkit-outer-spin-button,
.cap-form .cf input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Invalid base price — orange field + note, no silent rewrite. */
.cap-form .cf input.cf-error { border-color: #E0A100; box-shadow: 0 0 0 2px rgba(224,161,0,.25); }
.cf-err-msg { font-size: 10px; font-weight: 600; color: #8a6500; }
.cal-hint { font-size: 11px; color: var(--t3); margin-top: 12px; line-height: 1.45; }
.td-dim { color: var(--t3); }

/* Aircraft & pilots block header: title + its own bulk Save button. */
.cap-ac-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cap-ac-hd .cap-blk-hd { margin-bottom: 0; }

/* The loading veil is positioned to this view, so it covers the calendar too —
   blocking day clicks while a day loads. */
#view-capacity { position: relative; }

/* A subtle editor outline echoes the header state without re-tinting the form. */
#cap-editor.st-new,
#cap-editor.st-multi  { border-color: rgba(47,79,114,.35); }
#cap-editor.st-closed { border-color: rgba(255,59,48,.45); }
#cap-editor.st-live   { border-color: rgba(52,199,89,.35); }

.block {
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--sep);
}
.block:last-child { margin-bottom: 0; }
.block-pad { padding: 20px; }

/* Calendar */
.cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-m { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--t1); }
.cal-btn {
  background: none; border: none; cursor: pointer;
  color: var(--blue); font-size: 18px;
  padding: 2px 8px; border-radius: var(--r-xs);
  transition: background .1s;
}
.cal-btn:hover { background: var(--fill); }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.cal-dh {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: .3px; padding: 2px 0 8px;
}
.cal-d {
  text-align: center; padding: 5px 2px;
  font-size: 13px; font-weight: 400; border-radius: 50%;
  cursor: pointer; aspect-ratio: 1;
  color: var(--t1);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1px;
  transition: background .1s;
}
.cal-d:hover:not(.x) { background: var(--fill); }
.cal-d.today { background: var(--blue); color: #fff; font-weight: 600; }
.cal-d.chosen { background: var(--blue-fill); color: var(--blue); font-weight: 600; }
.cal-d.has::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--blue); }
.cal-d.today.has::after { background: rgba(255,255,255,.7); }
.cal-d.x { opacity: 0; pointer-events: none; }
/* Range endpoints sit solid blue; days in between get the soft "chosen" fill. */
.cal-d.rstart, .cal-d.rend { background: var(--blue); color: #fff; font-weight: 600; }
.cal-d.rstart.has::after, .cal-d.rend.has::after { background: rgba(255,255,255,.7); }
/* Clickable weekday headers — pick the whole column for the month. */
.cal-wd { cursor: pointer; border-radius: var(--r-xs); transition: background .1s, color .1s; }
.cal-wd:hover { background: var(--fill); color: var(--blue); }
.cal-wd.wd-on { background: var(--blue); color: #fff; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--white); border-radius: var(--r-md); padding: 16px 18px;
  box-shadow: var(--sh-sm); border: 1px solid var(--sep);
}
.stat-l { font-size: 11px; color: var(--t2); font-weight: 500; margin-bottom: 6px; }
.stat-v { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--t1); font-variant-numeric: tabular-nums; }

/* Aircraft & pilots */
.ac-hd {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t2); margin-bottom: 12px;
}
.ac-date { font-weight: 400; color: var(--t3); text-transform: none; letter-spacing: 0; }
.cap-aircraft { margin-top: 0; }
.ac-list { display: flex; flex-direction: column; }
.ac-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg); border-radius: var(--r-sm); padding: 10px 12px;
}
.ac-ico { display: flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; }
.ac-glider { width: 26px; height: 26px; display: block; }
.ac-name { font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -.2px; }

/* Per-lane aircraft + pilot group (left column, under the calendar) — no inner
   box; lanes simply stack, separated by a divider. */
.ac-lane { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.ac-lane:first-child { padding-top: 0; }
.ac-lane:last-child { padding-bottom: 0; }
.ac-lane + .ac-lane { border-top: 1px solid var(--sep); }
.ac-lane-hd { display: flex; align-items: center; gap: 8px; }
.ac-lane-ttl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); }
.ac-lane-body { display: flex; flex-direction: column; gap: 8px; }
.ac-field { display: flex; flex-direction: column; gap: 4px; }
.ac-field-l { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--t3); }
.ac-lane .ac-sel-wrap { width: 100%; }
.ac-empty { font-size: 13px; color: var(--t3); padding: 4px 2px; }

/* Inline "saving…" spinner shown in a slot's Open cell during a live edit. */
.cap-row-spin {
  display: inline-block; width: 16px; height: 16px; vertical-align: middle;
  border: 2px solid var(--sep); border-top-color: var(--blue); border-radius: 50%;
  animation: auth-rot .7s linear infinite;
}
.cap-row-busy { opacity: .65; }

/* Cap config strip */
.cap-cfg {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 14px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--sep);
}
.cf { display: flex; flex-direction: column; gap: 6px; }
.cf label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t2);
}
.cf-right { margin-left: auto; display: flex; align-items: flex-end; }
.btn-close {
  background: var(--red-fill); color: var(--red);
  border: none; border-radius: var(--r-sm); padding: 9px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  height: 40px;
  transition: background .12s;
}
.btn-close:hover { background: rgba(255,59,48,.18); }

/* Capacity schedule table */
table.ct { width: 100%; border-collapse: collapse; }
table.ct th {
  padding: 11px 18px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--t2);
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--sep);
}
table.ct td { padding: 12px 18px; border-bottom: 1px solid var(--sep); vertical-align: middle; }
table.ct tr:last-child td { border-bottom: none; }
table.ct tr:hover td { background: rgba(60,60,67,.025); }
.td-t { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.3px; color: var(--t1); }
.td-b { font-size: 14px; font-weight: 600; color: var(--t1); }
.fill-t { height: 3px; background: var(--fill); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.fill-b { height: 100%; background: var(--blue); border-radius: 2px; }
.fill-b.g { background: var(--green); }
.fill-b.w { background: var(--orange); }
.fill-b.f { background: var(--red); }

/* iOS toggle */
.tog {
  display: inline-block;
  width: 38px; height: 22px;
  background: rgba(120,120,128,.28);
  border-radius: 11px; position: relative;
  cursor: pointer; transition: background .22s;
}
.tog.on { background: var(--green); }
.tog::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog.on::after { left: 18px; }

/* Open toggle + slot delete: the × is positioned absolutely so it floats in the
   OPEN column's own space — a steady step to the right of the toggle, roughly the
   toggle-to-price distance — WITHOUT widening the cell or shrinking other columns. */
.cap-slot-ctl { display: inline-flex; align-items: center; position: relative; }
.cap-del { position: absolute; left: 104px; top: 50%; transform: translateY(-50%); }
.cap-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--t3);
  font-size: 17px; line-height: 1;
  transition: background .15s, color .15s;
}
.cap-del:hover { background: rgba(255,59,48,.12); color: var(--red); }

.mg-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--blue);
  padding: 3px 0; border-radius: 4px;
}
.mg-btn:hover { text-decoration: underline; }
.mg-btn.closed { color: var(--red); }

/* Create-day primary action */
.btn-create {
  background: var(--green-fill); color: var(--green-d);
  border: none; border-radius: var(--r-sm); padding: 9px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.btn-create:hover { background: rgba(52,199,89,.20); }
.cap-createday { width: 100%; margin-bottom: 8px; }
.btn-loading { opacity: .85; cursor: default; }
.btn-spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  margin-right: 7px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: auth-rot .7s linear infinite;
}

.cap-none {
  padding: 32px 20px; text-align: center; color: var(--t2); font-size: 14px; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM FIELDS — unified system
   All inputs/selects/textareas: white, 0.5px sep border, --r-sm, 40px,
   --sh-sm, focus = 2px blue outline offset -1px.
   ══════════════════════════════════════════════════════════════════════════ */
.cf input, .cf select,
.ac-sel,
.mem-sel,
.mf input,
.pay-f,
.p-ctrl,
.ctx-date input[type=date],
.pilot-add input,
.ac-name-input,
.pilot-name-input,
.notes-box {
  font-family: inherit;
  color: var(--t1);
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  font-size: 14px;
}
.cf input, .cf select,
.ac-sel,
.mem-sel,
.mf input,
.pay-f,
.p-ctrl,
.ctx-date input[type=date],
.pilot-add input {
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
}
/* No native number-input spinner arrows on amount fields (refund / payment). */
.pay-f[type=number] { -moz-appearance: textfield; appearance: textfield; }
.pay-f::-webkit-inner-spin-button,
.pay-f::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cf input:focus, .cf select:focus,
.ac-sel:focus,
.mem-sel:focus,
.mf input:focus,
.pay-f:focus,
.p-ctrl:focus,
.ctx-date input[type=date]:focus,
.pilot-add input:focus,
.notes-box:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
  border-color: transparent;
}
.cf input { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel — slides in from the right
   ══════════════════════════════════════════════════════════════════════════ */
.panel {
  position: fixed; top: 0; right: -1090px; width: 1026px; max-width: 98vw; height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--sep);
  z-index: 200; display: flex; flex-direction: column;
  transition: right .28s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--sh-xl);
}
.panel.on { right: 0; }

.panel-veil {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(20,30,50,.04);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.panel.on + .panel-veil { opacity: 1; pointer-events: auto; }

.panel-hd {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--sep);
  flex-shrink: 0;
  background: var(--bg);
}
.panel-ref { font-size: 11px; font-weight: 400; color: var(--t3); letter-spacing: .2px; margin-bottom: 4px; }
.panel-name { font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--t1); }

/* LEFT — original booking snapshot (name / date / slot) + waiver code. */
.panel-head { justify-self: stretch; min-width: 0; display: flex; align-items: center; gap: 14px; }
.ph-booked { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.phb-name {
  font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--t1); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
/* Waiver / check-in code — plain grey, floated to the right of the name
   section so it sits between the name and the centered total (no box). */
.wcode-chip {
  flex-shrink: 0; margin-left: auto; font-size: 18px; font-weight: 700; letter-spacing: 2px;
  font-variant-numeric: tabular-nums; color: var(--t2); text-transform: uppercase;
}
.phb-sub { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.phb-d, .phb-t {
  font-size: 14px; font-weight: 600; color: var(--t2);
  font-variant-numeric: tabular-nums; letter-spacing: .1px;
}
.phb-t { color: var(--t1); }
.phb-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--t3); flex-shrink: 0; }

/* MIDDLE — booking-wide money, centered. Plain figures, no boxes. */
.panel-money { justify-self: center; display: flex; align-items: center; gap: 10px; }
.phm {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 120px; padding: 2px 24px;
}
.phm > span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t2); white-space: nowrap; }
.phm > b { font-size: 18px; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }

/* RIGHT — Move group + close. */
.panel-hd-r { justify-self: end; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hd-move {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--sep); border-radius: 999px; background: var(--white);
  box-shadow: var(--sh-sm); color: var(--t1); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 15px 8px 13px; cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s, box-shadow .12s, color .12s;
}
.hd-move svg { width: 16px; height: 16px; color: var(--t2); transition: color .12s; }
.hd-move:hover { border-color: var(--blue); background: var(--blue-fill); color: var(--blue); box-shadow: var(--sh-md); }
.hd-move:hover svg { color: var(--blue); }
.panel-x {
  background: var(--fill); border: none; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer;
  color: var(--t2); font-size: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.panel-x:hover { background: rgba(60,60,67,.12); color: var(--t1); }

.panel-body { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.panel-cols { display: flex; flex-direction: row; flex: 1; min-height: 0; }
.panel-cols.blurred { pointer-events: none; user-select: none; }
/* Heads-up banner above the columns — e.g. the group can't take another guest. */
.panel-guestnote {
  flex-shrink: 0; display: flex; align-items: flex-start; gap: 9px;
  margin: 12px 16px 0; padding: 10px 13px;
  background: #FFF8E1; border: 1px solid #F0D98C; border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.45; color: #6B5618;
}
.panel-guestnote svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; color: #C99417; }
.panel-guestnote b { font-weight: 700; color: #5A4710; }

/* ── canonical section label inside the panel ── */
.p-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #48484a; margin-bottom: 10px;
}

/* ── Centred move overlay ── */
.panel-move-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20,30,50,.10);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.panel-move-card {
  width: 430px; max-width: 94%; max-height: 94%; overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
}

/* ══════════════════════════════════════════════════════════════════════════
   Panel column 1 — party list
   ══════════════════════════════════════════════════════════════════════════ */
.panel-party {
  width: 340px; min-width: 340px; border-right: .5px solid var(--sep);
  position: relative; overflow: hidden;
  background: var(--bg);
}
.party-scroll {
  height: 100%; overflow-y: auto; padding: 20px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.party-scroll.blurred { filter: blur(3px); pointer-events: none; user-select: none; }
.party-edit-hd { margin-top: 10px; }

.party-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(20,30,50,.10);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.party-overlay-card {
  width: 100%; max-width: 300px;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  max-height: 100%; overflow-y: auto;
}
.party-overlay-card .mv-form { margin-top: 0; background: none; padding: 14px; }

/* total / paid / due strip */
.party-totals { display: flex; gap: 8px; margin-bottom: 6px; }
.party-totals .pt {
  flex: 1; background: var(--white); border: 1px solid var(--sep);
  border-radius: var(--r-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--sh-sm);
}
.party-totals .pt span {
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--t2);
}
.party-totals .pt b { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--t1); font-variant-numeric: tabular-nums; }
.party-totals .pt-due b { color: var(--orange); }
.party-totals .pt-credit b { color: var(--blue); }

/* Always-on "add a guest" card at the bottom of the party list. */
.party-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 14px; margin-top: 2px;
  border: 1px dashed var(--sep); border-radius: var(--r-md);
  background: transparent; color: var(--t2);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .12s, background .12s, color .12s, opacity .12s;
}
.party-add:hover { border-color: var(--blue); background: var(--blue-fill); color: var(--blue); }
.party-add:disabled { cursor: default; }
.party-add.busy { color: var(--t2); border-style: solid; opacity: .9; }
.party-add .pa-plus { font-size: 17px; line-height: 1; }
.party-add .mini-spin { width: 15px; height: 15px; }

/* Generic "here's why you can't do that" popup. */
.ok-popup-veil {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20,30,50,.18);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ok-popup {
  width: 380px; max-width: 92%;
  background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-lg);
  box-shadow: var(--sh-xl); padding: 22px;
}
.ok-popup-t { font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.ok-popup-m { font-size: 13.5px; line-height: 1.5; color: var(--t2); }
.ok-popup-btn {
  margin-top: 18px; width: 100%; padding: 11px;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  background: var(--blue); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
  transition: filter .12s;
}
.ok-popup-btn:hover { filter: brightness(1.08); }

/* Two-button confirm dialog (styled replacement for window.confirm). */
.confirm-popup .ok-popup-m b { color: var(--t1); font-weight: 700; }
.confirm-actions { display: flex; gap: 10px; margin-top: 20px; }
.confirm-actions button {
  flex: 1; padding: 11px; border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; transition: filter .12s;
}
.confirm-cancel { background: var(--fill); color: var(--t1); border: 1px solid var(--sep); }
.confirm-ok { background: var(--blue); color: #fff; border: none; }
.confirm-ok.warn { background: #FF6100; }
.confirm-ok.danger { background: var(--red); }
.confirm-actions button:hover { filter: brightness(1.06); }

.party-row {
  position: relative;
  border: 1px solid var(--sep);
  border-radius: var(--r-md); padding: 12px 30px 12px 14px;
  cursor: pointer; background: var(--white);
  box-shadow: var(--sh-sm);
  transition: box-shadow .14s, border-color .14s;
}
/* Money status dot — directly below the details icon, centered under it. */
.party-dot {
  position: absolute; right: 38px; top: 42px;
  width: 8px; height: 8px; border-radius: 50%;
}
.party-dot.due    { background: var(--red); }
.party-dot.credit { background: var(--orange); }
.party-dot.ok     { background: var(--green); }
/* Assigned pilot's shortcode — small blue badge on the money line, just left of
   the status dot (tinted + pilled so it's not mistaken for a code). */
.party-sc {
  position: absolute; right: 50px; top: 36px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px; line-height: 1.4;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--blue); background: var(--blue-fill); border-radius: 5px; padding: 1px 5px;
}
.party-row:hover { box-shadow: var(--sh-md); border-color: rgba(0,0,0,.14); }
.party-row.sel { border-color: var(--blue); box-shadow: none; }
/* Completed flight: thin light-green border. */
.party-row.completed { border-color: rgba(52,199,89,.5); }
.party-row.completed.sel { border-color: var(--blue); }
.party-row.refunded { opacity: .55; }
.party-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.party-name { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--t1); }
.party-sub { font-size: 13px; font-weight: 400; color: var(--t2); margin-top: 3px; }
.party-foot { display: flex; gap: 5px; margin-top: 8px; }
.party-group-pay { margin-bottom: 6px; display: flex; flex-direction: column; gap: 8px; }
.party-group-pay .pay-btn, .party-group-pay .refund-btn { width: 100%; }

.pay-badge { font-size: 10px; font-weight: 700; letter-spacing: .3px; border-radius: var(--r-xs); padding: 3px 8px; }
.pay-badge.ok  { background: var(--green-fill);  color: var(--green-d); }
.pay-badge.due { background: var(--orange-fill);  color: var(--orange-d); }
.pay-badge.ref { background: var(--red-fill);  color: var(--red); }
.pay-badge.credit { background: var(--green-fill); color: var(--green-d); }

.party-day {
  display: inline-block;
  padding: 2px 7px; border-radius: var(--r-xs);
  background: var(--blue-fill); color: var(--blue);
  font-size: 11px; font-weight: 600;
}
.slot-elsewhere {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-sm);
  padding: 8px 8px 8px 12px;
  font-size: 13px; font-weight: 500; color: var(--t1);
}
.slot-elsewhere button {
  border: none; border-radius: var(--r-xs);
  background: var(--blue); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; cursor: pointer;
  transition: background .12s;
}
.slot-elsewhere button:hover { background: var(--accent-d); }

/* ── group banner / pay summary (used elsewhere in the panel flow) ── */
.grp-banner {
  padding: 16px; border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--sep);
  box-shadow: var(--sh-sm);
}
.grp-banner-t { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--t1); }
.grp-banner-s { font-size: 13px; font-weight: 400; color: var(--t2); margin-top: 4px; }

.pay-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.pay { padding: 16px; }
.pay + .pay { border-left: 1px solid var(--sep); }
.pay-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--t2); }
.pay-v { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin-top: 6px; color: var(--t1); font-variant-numeric: tabular-nums; }
.pay-v.bal { font-weight: 700; }
.pay-note { font-size: 11px; font-weight: 400; color: var(--t3); margin-top: 8px; }
.mem-ok  { color: var(--t2); font-weight: 600; }
.mem-due { color: var(--orange); font-weight: 600; }

/* pay buttons */
.pay-btn, .mem-pay-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 12px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .12s;
}
.pay-btn { margin-top: 10px; width: 100%; }
.mem-pay-btn { flex: 1 1 0; min-width: 0; }
.pay-btn:hover, .mem-pay-btn:hover { background: var(--accent-d); }

/* refunds — red, "money out" */
.refund-btn, .mem-refund-btn {
  background: var(--red-fill); color: var(--red); border: none;
  border-radius: var(--r-sm); padding: 11px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .12s;
}
.refund-btn { margin-top: 10px; width: 100%; }
.mem-refund-btn { flex: 1 1 0; min-width: 0; }
.refund-btn:hover, .mem-refund-btn:hover { background: rgba(255,59,48,.18); }
.mem-refunded {
  flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--t2);
  background: var(--fill); border-radius: var(--r-xs); padding: 6px 10px;
}
.mem-refund-txt { color: var(--t2); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel column 1 — member rows (alt list layout)
   ══════════════════════════════════════════════════════════════════════════ */
.mem-list { display: flex; flex-direction: column; gap: 12px; }
.mem-row {
  background: var(--white); border-radius: var(--r-md); padding: 16px 18px;
  border: 1px solid var(--sep);
  display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  transition: box-shadow .16s, border-color .16s, transform .16s;
  box-shadow: var(--sh-sm);
}
.mem-row:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.mem-row.sel { border-color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue); }
.mem-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.mem-name { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mem-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: none; background: var(--t3); }
.mem-dot.in   { background: var(--green); }
.mem-dot.due  { background: var(--orange); }
.mem-dot.paid { background: var(--blue); }

.mem-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mem-pay { font-size: 12px; font-weight: 400; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mem-ctrls { display: flex; gap: 8px; }
.mc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mc > span {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t2);
}
.mem-ctrls .mem-sel { width: 100%; }

/* member edit (check-in) */
.mem-edit { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.mf { display: flex; flex-direction: column; gap: 6px; }
.mf > span {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t2);
}
.mf-chk {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--t2); cursor: pointer;
}
.mf-chk input { width: 16px; height: 16px; accent-color: var(--blue); }
.mf-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mf-row .mf { flex: 1 1 0; min-width: 0; }

/* ── Contact card (collapsible) ── */
.contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--white); border: 1px solid var(--sep);
  border-radius: var(--r-sm); padding: 10px 12px;
  cursor: pointer; box-shadow: var(--sh-sm);
  transition: border-color .14s; user-select: none; margin-top: 8px;
}
.contact-card:hover { border-color: rgba(47,79,114,.3); }
.contact-card.open  { border-color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue); }
.contact-summary {
  font-size: 12.5px; font-weight: 500; color: var(--t1);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-edit-btn {
  flex-shrink: 0; border: none; background: none; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--blue);
  cursor: pointer; padding: 2px 6px; border-radius: var(--r-xs);
  transition: background .1s;
}
.contact-edit-btn:hover { background: rgba(47,79,114,.08); }
.contact-fields { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel column 2 — member detail (payment trail)
   ══════════════════════════════════════════════════════════════════════════ */
.panel-detail {
  flex: 0 0 332px; width: 332px; min-width: 0;
  overflow-y: auto; padding: 20px; background: var(--bg);
  display: flex; flex-direction: column; gap: 12px;
}
.panel-detail > * { width: 100%; }
.detail-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.detail-name { font-size: 17px; font-weight: 700; letter-spacing: -.4px; color: var(--t1); }
.detail-sub { font-size: 13px; font-weight: 400; color: var(--t2); margin-top: 3px; }
.detail-price { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--t1); font-variant-numeric: tabular-nums; }
.detail-edit {
  border: 1px solid var(--sep); border-radius: var(--r-md); padding: 14px;
  background: var(--white); box-shadow: var(--sh-sm);
}
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.refund-box {
  border: 1px dashed var(--red); color: var(--red); background: var(--red-fill);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; font-weight: 600; letter-spacing: .2px;
}
.lock-note {
  margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--t2);
  background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-sm); padding: 8px 10px;
}
.credit-box {
  margin-top: 8px; border: 1px dashed var(--blue); color: var(--blue);
  background: var(--blue-fill); border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 12px; font-weight: 600; line-height: 1.45;
}

/* ── payment trail ── */
.trail { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.trail-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  border: 1px solid var(--sep);
  border-left: 3px solid var(--green);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px;
  background: var(--white);
  box-shadow: var(--sh-sm);
}
.trail-row.refund { border-left-color: var(--red); }
.trail-row.credit { border-left-color: var(--blue); }
.trail-row[oncontextmenu] { cursor: context-menu; }
.trail-row.refunded { opacity: .6; }
.trail-row.refunded .trail-amt { text-decoration: line-through; }
.trail-row.pending { border-style: dashed; border-left-style: solid; }
.trail-main { font-weight: 600; color: var(--t1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trail-meta { color: var(--t3); font-size: 11px; font-weight: 400; margin-top: 3px; }
.trail-amt { font-weight: 700; white-space: nowrap; font-size: 14px; color: var(--t1); font-variant-numeric: tabular-nums; }
.trail-row.refund .trail-amt { color: var(--red); }
.trail-amt.credit-amt { color: var(--blue); }
.trail-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  border-radius: var(--r-xs); padding: 2px 6px;
  color: var(--green-d); background: var(--green-fill);
}
.trail-tag.refund { color: var(--red); background: var(--red-fill); }
.trail-tag.ref { color: var(--red); background: var(--red-fill); }
.trail-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--orange-d); background: var(--orange-fill);
  border-radius: var(--r-xs); padding: 2px 6px;
}
.trail-subhd {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--t2); margin: 10px 0 2px;
}
.trail-summary {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--sep);
}
.trail-summary .ts-row { display: flex; justify-content: space-between; align-items: baseline; }
.trail-summary .ts-row span { font-size: 13px; color: var(--t2); font-weight: 500; }
.trail-summary .ts-row b { font-size: 15px; font-weight: 700; color: var(--t1); letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.trail-summary .ts-row b.ts-due { color: var(--orange); }
.trail-row.failed { border-left-color: var(--red); opacity: .8; }
.trail-row.failed .trail-amt { color: var(--t3); text-decoration: line-through; }
.trail-tag.fail { color: var(--red); background: var(--red-fill); }
.trail-err { color: var(--red) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Inline payment form
   ══════════════════════════════════════════════════════════════════════════ */
.pay-inline {
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 11px;
  display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--sh-md);
}
.pay-decline {
  background: var(--red-fill); color: var(--red);
  border: 1px solid rgba(255,59,48,.25); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.mem-row .pay-inline {
  background: none; border: none; box-shadow: none;
  border-radius: 0; padding: 0; margin-top: 12px;
}
.pay-inline-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pay-inline-t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--t2); }
.pay-inline-a { font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--t1); font-variant-numeric: tabular-nums; }
.pay-tabs { display: flex; gap: 4px; background: var(--fill); border-radius: var(--r-sm); padding: 3px; }
.pay-tab {
  flex: 1; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--t2);
  padding: 8px 0; border-radius: calc(var(--r-sm) - 3px); transition: all .14s;
}
.pay-tab.on { background: var(--white); color: var(--t1); box-shadow: var(--sh-sm); }
.pay-cash-note {
  font-size: 13px; font-weight: 400; color: var(--t2); line-height: 1.5;
  background: var(--bg); border-radius: var(--r-sm); padding: 11px 12px;
}
.pay-cash-note b { color: var(--t1); font-weight: 600; }
.pay-2col { display: flex; gap: 9px; }
.pay-2col .pay-f { flex: 1; min-width: 0; }
.pay-inline-ft { display: flex; gap: 8px; margin-top: 2px; }
.pay-submit {
  flex: 1;
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 12px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .12s;
  height: 40px;
}
.pay-submit:hover { background: var(--accent-d); }

/* labeled fields */
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-field > span {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--t2);
}
.pf-cardnum { letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.pay-onfile {
  background: var(--bg); border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 13px; line-height: 1.45; color: var(--t1);
}
.pay-onfile span { display: block; font-size: 11px; font-weight: 400; color: var(--t2); }
.detail-actions .pay-inline { flex: 1 1 100%; width: 100%; box-sizing: border-box; margin-top: 0; }
.pay-2col > .pf-field { flex: 1; min-width: 0; }
.pay-2col .pay-f { flex: none; }

/* saved-card vs new-card picker */
.card-srcs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.card-src {
  display: flex; align-items: center; gap: 11px;
  background: var(--white);
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  padding: 11px 12px;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: border-color .12s, box-shadow .12s;
}
.card-src.on { border-color: var(--blue); box-shadow: 0 0 0 1.5px var(--blue); }
.cs-radio {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--t3);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s;
}
.card-src.on .cs-radio { border-color: var(--blue); }
.card-src.on .cs-radio::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.cs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-info b { font-size: 14px; font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-info span { font-size: 12px; font-weight: 400; color: var(--t2); }
.cs-emoji { font-size: 18px; flex-shrink: 0; filter: grayscale(1); }

/* ══════════════════════════════════════════════════════════════════════════
   Panel column 3 — products rail
   ══════════════════════════════════════════════════════════════════════════ */
.panel-products {
  width: 340px; flex-shrink: 0; overflow: hidden;
  background: var(--bg); border-right: 1px solid var(--sep);
  display: flex; flex-direction: column;
}
.pp-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px;
}
/* Pay all / Refund all — pinned footer at the bottom of THIS column, under the
   (scrolling) History. Side by side; a lone button fills the width. */
.pp-actions {
  flex-shrink: 0; display: flex; gap: 8px;
  margin: 0 24px; padding: 14px 0 16px; border-top: 1px solid var(--sep); background: var(--bg);
}
.pp-actions .pay-btn, .pp-actions .refund-btn { flex: 1 1 0; width: auto; margin-top: 0; }
.pp-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #48484a; }
.pp-sub { font-size: 12px; font-weight: 400; color: var(--t2); margin: -4px 0 6px; }
.panel-products .prod-chip { width: 100%; }
.pp-sec { margin-top: 12px; }
.pp-sec .p-section-title { margin-bottom: 10px; }

/* right content column */
.panel-main {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 24px; display: flex; flex-direction: column; gap: 24px;
  background: var(--bg);
}

/* draggable product chips */
.prod-chip {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--sep);
  border-radius: var(--r-md); padding: 14px; cursor: grab;
  user-select: none; -webkit-user-select: none;
  box-shadow: var(--sh-sm);
  transition: box-shadow .12s, transform .12s, border-color .12s;
}
.prod-chip:hover { box-shadow: var(--sh-md); border-color: rgba(47,79,114,.35); transform: translateY(-1px); }
.prod-chip:active { cursor: grabbing; transform: scale(.98); }
.pc-grip { flex-shrink: 0; color: var(--t3); display: flex; }
.prod-chip:hover .pc-grip { color: var(--blue); }
.pc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pc-n { font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -.1px; }
.pc-m { font-size: 12px; font-weight: 400; color: var(--t2); }
.pc-price { margin-left: auto; flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--t1); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

/* per-member product cards */
.mem-prod { display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-md); transition: background .12s; }
.dragging-prod .mem-prod.dropzone {
  outline: 2px dashed rgba(47,79,114,.5); outline-offset: 3px; border-radius: var(--r-md);
}
.mem-prod.dropzone.drop-on {
  outline: 2px solid var(--blue) !important; outline-offset: 3px;
  background: var(--blue-fill);
}
.prod-card {
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  padding: 12px 14px; background: var(--white);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; font-family: inherit; text-align: left;
  box-shadow: var(--sh-sm);
}
.prod-card.span2 { grid-column: 1 / -1; }
/* A charge card is a debit — full orange border, price on the right; same
   height as the credit cards below. */
.prod-card.charge { border: 1px solid var(--orange); min-height: 56px; }
.prod-card.charge .pcc-price { color: var(--orange-d); }
.prod-card.addon { position: relative; overflow: visible; }
/* Remove ✕ sits OUTSIDE the card (top-right corner), black so it's visible —
   keeps the price flush-right and aligned with the product card above. */
.prod-rm {
  position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--sep); background: var(--white); color: var(--t1);
  font-size: 10px; line-height: 1; cursor: pointer; box-shadow: var(--sh-sm);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.prod-rm:hover { background: var(--red); color: #fff; border-color: var(--red); }
.pcc-n {
  font-size: 14px; font-weight: 600; color: var(--t1);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.pcc-sub { font-size: 12px; font-weight: 400; color: var(--t3); }
.pcc-price { font-size: 14px; font-weight: 600; color: var(--t1);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcc-price s { color: var(--t3); font-weight: 400; margin-right: 3px; }
.pcc-right { display: flex; align-items: center; gap: 8px; }
.pcc-m { font-size: 12px; font-weight: 400; color: var(--t2); }
.prod-card.empty {
  background: none; border: 1px dashed var(--t3);
  color: var(--t2); font-size: 13px; font-weight: 600; cursor: pointer;
  flex-direction: row; align-items: center; justify-content: center;
  box-shadow: none;
  transition: color .12s, border-color .12s;
}
.prod-card.empty:hover { color: var(--blue); border-color: var(--blue); }
.prod-x {
  background: none; border: none; cursor: pointer; color: var(--t3);
  font-size: 12px; padding: 0; line-height: 1; flex-shrink: 0;
  transition: color .12s;
}
.prod-x:hover { color: var(--red); }
.addon-add-btn {
  grid-column: 1 / -1; background: none; border: 1px dashed var(--t3);
  border-radius: var(--r-sm); min-height: 56px; padding: 12px 14px; cursor: pointer;
  font-family: inherit; color: var(--t2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: border-color .15s, color .15s;
}
.addon-add-btn .pcc-n { font-size: 14px; font-weight: 600; color: var(--t2); }
.addon-add-btn .pcc-price { font-size: 14px; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.addon-add-btn:hover, .addon-add-btn:hover .pcc-n, .addon-add-btn:hover .pcc-price { border-color: var(--blue); color: var(--blue); }
.mem-row.drop-on { outline: 2px dashed var(--blue); outline-offset: 2px; }

/* Freshly-added blank guest: no flight yet — a dashed drop target to assign one. */
.mem-prod.blank { border: 1px dashed var(--t3); border-radius: var(--r-md); }
.prod-blank {
  display: flex; align-items: center; justify-content: center;
  padding: 22px 14px; color: var(--t3);
}
.prod-blank .pb-plus { font-size: 26px; line-height: 1; }
.dragging-prod .mem-prod.blank, .mem-prod.blank.drop-on { border-color: var(--blue); background: var(--blue-fill); }
.mem-prod.blank.drop-on .pb-plus { color: var(--blue); }

/* ── agent notes + history ── */
.notes-box {
  width: 100%; min-height: 132px; resize: vertical; display: block;
  padding: 14px;
  line-height: 1.6;
}
.notes-box::placeholder { color: var(--t3); }
.hist-card {
  background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-md);
  padding: 16px 16px 6px; box-shadow: var(--sh-sm);
}
.hist { display: flex; flex-direction: column; }
.hist-row { display: flex; gap: 13px; }
/* Hollow timeline nodes on a hairline rail; the latest event (top) is accented. */
.hist-dot { position: relative; width: 10px; flex-shrink: 0; display: flex; justify-content: center; }
.hist-dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--t3); box-sizing: border-box;
  margin-top: 3px; z-index: 1;
}
.hist-row:first-child .hist-dot::before { border-color: var(--blue); }
.hist-dot::after { content: ''; position: absolute; top: 5px; bottom: -9px; width: 1.5px; background: var(--sep); }
.hist-row:last-child .hist-dot::after { display: none; }
.hist-c { padding-bottom: 16px; min-width: 0; }
.hist-t { font-size: 13px; font-weight: 500; color: var(--t1); line-height: 1.45; }
.hist-m { font-size: 11px; font-weight: 400; color: var(--t3); margin-top: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel detail sub-rows + pills + footer
   ══════════════════════════════════════════════════════════════════════════ */
.p-group { background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-sm); overflow: hidden; }
.p-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--sep); }
.p-row:last-child { border-bottom: none; }
.p-key { font-size: 13px; font-weight: 400; color: var(--t2); }
.p-val { font-size: 13px; font-weight: 500; color: var(--t1); }
.p-ctrl { width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; }

.p-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.p-pill {
  font-size: 12px; font-weight: 600; padding: 6px 13px;
  border-radius: var(--r-xs); cursor: pointer; border: none;
  background: var(--fill); color: var(--t2);
  text-transform: capitalize; transition: all .12s;
}
.p-pill.s-confirmed  { background: var(--green-fill);  color: var(--green-d); }
.p-pill.s-pending    { background: var(--orange-fill);  color: var(--orange-d); }
.p-pill.s-cancelled  { background: var(--red-fill);  color: var(--red); }
.p-pill.s-rescheduled{ background: var(--purple-fill); color: var(--purple); }

.panel-ft {
  padding: 14px 18px; border-top: 1px solid var(--sep);
  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
  background: var(--bg);
}
.panel-ft:empty { display: none; }
.panel-ft .pay-btn, .panel-ft .refund-btn { margin-top: 0; }
.p-cancel {
  background: var(--fill); border: none; border-radius: var(--r-sm);
  padding: 0 20px; height: 40px; font-size: 14px; font-weight: 500;
  color: var(--t2); cursor: pointer;
  transition: background .12s;
}
.p-cancel:hover { background: rgba(60,60,67,.12); }
.p-save {
  flex: 1; background: var(--blue); border: none; border-radius: var(--r-sm);
  height: 40px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer;
  transition: background .12s;
}
.p-save:hover { background: var(--accent-d); }

/* ══════════════════════════════════════════════════════════════════════════
   Toast
   ══════════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; top: 20px;
  transform: translateX(-50%) translateY(-14px);
  display: flex; align-items: center; gap: 12px;
  background: rgba(26,28,34,.95); color: #fff;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 12px 12px 12px 18px; border-radius: 13px;
  font-size: 14px; font-weight: 500; letter-spacing: -.1px;
  box-shadow: 0 10px 34px rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.09);
  opacity: 0; pointer-events: none; z-index: 500;
  max-width: min(560px, 90vw);
  transition: opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-msg {
  flex: 1; min-width: 0; line-height: 1.4;
  background: linear-gradient(100deg, rgba(255,255,255,.55) 30%, #fff 50%, rgba(255,255,255,.55) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: toast-shimmer 3.8s linear infinite;
}
@keyframes toast-shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.toast-x {
  flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 7px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.82);
  font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.toast-x:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   Context menu (right-click move)
   ══════════════════════════════════════════════════════════════════════════ */
.ctx {
  position: fixed; z-index: 300;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 6px; min-width: 240px;
  font-size: 14px;
}
/* A long pilot roster scrolls instead of running off-screen. */
.ctx.ctx-scroll { max-height: 340px; overflow-y: auto; }
.ctx-h {
  padding: 9px 11px 7px; font-size: 11px; font-weight: 600;
  color: var(--t2); text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-h-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ctx-i {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 11px; border-radius: var(--r-xs); cursor: pointer;
  color: var(--t1); font-weight: 500;
  transition: background .1s;
}
.ctx-i:hover { background: var(--fill); }
.ctx-i.ctx-danger { color: var(--red); }
.ctx-i.ctx-danger:hover { background: var(--red-fill); }
.ctx-i.ctx-dis { color: var(--t3); cursor: not-allowed; opacity: .8; }
.ctx-i.ctx-dis:hover { background: none; }
.ctx-i.ctx-warn { color: #FF6100; }
.ctx-i.ctx-warn:hover { background: rgba(255,97,0,.12); }

/* Waiver status line in the member-details modal. */
.waiver-state { margin-top: 8px; font-size: 12px; line-height: 1.4; padding: 7px 9px; border-radius: 7px; }
.waiver-state.ok { color: #1f8f4e; background: rgba(31,143,78,.10); border: 1px solid rgba(31,143,78,.30); }
.waiver-state.pending { color: var(--t2); background: var(--fill); border: 1px solid var(--line, rgba(0,0,0,.12)); }
.waiver-state a { color: #FF6100; font-weight: 700; text-decoration: none; }
.waiver-state a:hover { text-decoration: underline; }
.ctx-i.ctx-dis .ctx-sub { color: var(--t3); }
.ctx-sub { font-size: 12px; font-weight: 400; color: var(--t3); }
.ctx-date { padding: 8px 11px 10px; display: flex; flex-direction: column; gap: 10px; }
.ctx-date input[type=date] { width: 100%; }
.ctx-row { display: flex; gap: 8px; }
.ctx-cancel {
  flex: 1; background: var(--fill); border: none; border-radius: var(--r-sm);
  padding: 0; height: 40px; font-size: 13px; font-weight: 500; color: var(--t2);
  font-family: inherit; cursor: pointer; transition: background .12s;
}
.ctx-cancel:hover { background: rgba(60,60,67,.12); }
.ctx-go {
  flex: 2; background: var(--blue); border: none; border-radius: var(--r-sm);
  padding: 0; height: 40px; font-size: 13px; font-weight: 600; color: #fff;
  font-family: inherit; cursor: pointer; transition: background .12s;
}
.ctx-go:hover { background: var(--accent-d); }

/* Move menu: calendar + slot picker */
.ctx.wide { width: 300px; }
.ctx-cal { padding: 6px 8px 0; }
.ctx-cal .cal-hd { margin-bottom: 8px; }
.ctx-note { font-size: 12px; font-weight: 400; color: var(--t2); line-height: 1.45; padding: 8px 11px 2px; }
.ctx-slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 8px;
  max-height: 178px; overflow-y: auto;
}
.ctx-slot {
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white);
  padding: 8px 4px 6px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--t1);
  text-align: center; cursor: pointer;
  transition: background .1s, border-color .1s;
}
.ctx-slot span { display: block; font-size: 11px; font-weight: 500; color: var(--green); margin-top: 2px; }
.ctx-slot:hover:not(.off) { background: var(--blue-fill); border-color: var(--blue); }
.ctx-slot.off { color: var(--t3); cursor: default; }
.ctx-slot.off span { color: var(--t3); font-weight: 400; }

.ctx-cal .cal-grid, .mv-form #mv-cal { width: 266px; max-width: 100%; margin: 0 auto; }
.ctx-cal .cal-d, .mv-form .cal-d { font-size: 13px; padding: 3px 0; }
.ctx-cal .cal-d.today, .mv-form .cal-d.today,
.ctx-cal .cal-d.chosen, .mv-form .cal-d.chosen { border-radius: var(--r-sm); }

/* ══════════════════════════════════════════════════════════════════════════
   Scrollbars
   ══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(60,60,67,.18); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   Custom dropdowns (pilot / slot / aircraft)
   ══════════════════════════════════════════════════════════════════════════ */
.mem-sel, .ac-sel {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  height: 40px; padding: 0 36px 0 12px;
  font-size: 14px; font-weight: 500; font-family: inherit; color: var(--t1);
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  background-color: var(--white);
  box-shadow: var(--sh-sm);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%238e8e93" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.mem-sel:focus, .ac-sel:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent; }
.mem-sel::-ms-expand, .ac-sel::-ms-expand { display: none; }
.ac-sel { width: 240px; flex: none; margin-left: auto; }
.ac-sel-wrap { width: 240px; }

/* ── Glass dropdowns ── */
.gsel { position: relative; width: 100%; }
.gsel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  font-size: 14px; font-weight: 500; font-family: inherit; color: var(--t1);
  text-align: left; cursor: pointer;
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: border-color .12s, box-shadow .12s;
}
.gsel-btn:hover { border-color: rgba(47,79,114,.4); }
.gsel.open .gsel-btn {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--blue);
}
.gsel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-val.ph { color: var(--t3); font-weight: 400; }
.gsel-chev { color: var(--t3); flex: none; transition: transform .18s ease; }
.gsel.open .gsel-chev { transform: rotate(180deg); }
.gsel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  padding: 5px; max-height: 264px; overflow-y: auto;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sep);
  box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none;
  transition: opacity .14s ease, transform .18s cubic-bezier(.2,.9,.3,1.15);
}
.gsel.open .gsel-menu { opacity: 1; transform: none; pointer-events: auto; }
.gsel-menu::-webkit-scrollbar { width: 8px; }
.gsel-menu::-webkit-scrollbar-thumb { background: rgba(60,60,67,.18); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.gsel-menu::-webkit-scrollbar-track { background: transparent; }
.gsel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: var(--r-xs);
  font-size: 13px; font-weight: 500; color: var(--t1); cursor: pointer;
  transition: background .1s;
}
.gsel-opt:hover { background: var(--blue-fill); }
.gsel-opt:active { background: rgba(47,79,114,.18); }
.gsel-opt.on { color: var(--blue); font-weight: 600; }
.gsel-check { color: var(--blue); font-weight: 700; }
.gsel-opt.gsel-dis { color: var(--t3); cursor: not-allowed; opacity: .55; }
.gsel-opt.gsel-dis:hover, .gsel-opt.gsel-dis:active { background: none; }
.gsel-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px; text-transform: uppercase;
  color: var(--t3); background: var(--fill); padding: 2px 6px; border-radius: var(--r-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   Slot column +/new-booking button
   ══════════════════════════════════════════════════════════════════════════ */
.col-add {
  width: 32px; height: 32px; border: none; border-radius: var(--r-xs);
  background: none; color: var(--blue); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background .1s;
}
.col-add:hover { background: var(--blue-fill); }
.col-add:active { background: rgba(47,79,114,.18); }
.col-add svg { width: 14px; height: 14px; display: block; }
.col-add.off { color: var(--t3); opacity: .35; cursor: not-allowed; position: relative; }
.col-add.off:hover, .col-add.off:active { background: none; }
.col-add.off::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); right: -4px;
  background: rgba(28,28,30,.94); color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: .1px;
  padding: 6px 10px; border-radius: var(--r-xs); white-space: nowrap;
  box-shadow: var(--sh-md);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .12s ease .08s, transform .12s ease .08s;
  z-index: 70;
}
.col-add.off::before {
  content: ''; position: absolute; top: calc(100% + 2px); right: 8px;
  border: 5px solid transparent; border-bottom-color: rgba(28,28,30,.94);
  opacity: 0; transition: opacity .12s ease .08s; z-index: 70; pointer-events: none;
}
.col-add.off:hover::after, .col-add.off:hover::before { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   New-booking modal
   ══════════════════════════════════════════════════════════════════════════ */
.bkmodal-ov {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(28,28,30,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.bkmodal-ov.on { opacity: 1; pointer-events: auto; }
.bkmodal {
  width: 480px; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--sep);
  box-shadow: var(--sh-xl);
  transform: translateY(8px) scale(.985); transition: transform .18s cubic-bezier(.2,.9,.3,1.15);
}
.bkmodal-ov.on .bkmodal { transform: none; }
.bkm-hd { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 20px 10px; }
.bkm-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: var(--t1); }
.bkm-sub { font-size: 13px; font-weight: 400; color: var(--t2); margin-top: 3px; }
.bkm-body { padding: 4px 20px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.bkm-row { display: flex; gap: 10px; }
.bkm-guests {
  display: flex; align-items: center; gap: 10px; height: 40px;
  border: 1px solid var(--sep); border-radius: var(--r-sm); padding: 0 6px; background: var(--white);
  box-shadow: var(--sh-sm);
}
.bkm-guests button {
  width: 28px; height: 28px; border: none; border-radius: var(--r-xs); cursor: pointer;
  background: var(--fill); font-size: 16px; font-weight: 600; color: var(--t1);
  transition: background .1s;
}
.bkm-guests button:hover { background: rgba(60,60,67,.12); }
.bkm-guests button:disabled { opacity: .3; cursor: not-allowed; }
.bkm-guests button:disabled:hover { background: var(--fill); }
.bkm-guests b { min-width: 18px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bkm-price { font-size: 13px; }

/* New-booking price breakdown — Guest | Slot | Price | Deposit, Total in the foot. */
.bkq { background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-sm); overflow: hidden; }
.bkq table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bkq th { padding: 6px 12px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--sep); }
.bkq td { padding: 6px 12px; text-align: left; color: var(--t1); border-bottom: 1px solid var(--sep); }
.bkq th.num, .bkq td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* "Add-ons" sub-section divider row inside the quote table. */
.bkq tr.bkq-sec td { padding: 7px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); background: var(--bg); }
.bkq tfoot td { padding: 7px 12px; font-weight: 700; color: var(--t1); background: var(--bg); border-bottom: 0; }
.bkq tfoot td.lbl { color: var(--t2); }
.bkq .sk { display: inline-block; height: 10px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, #e8eaef 25%, #f2f3f6 37%, #e8eaef 63%); background-size: 280% 100%;
  animation: bkq-shimmer 1.15s ease-in-out infinite; }
@keyframes bkq-shimmer { from { background-position: 200% 0; } to { background-position: -120% 0; } }
.bkq-msg { padding: 9px 12px; font-size: 12px; color: var(--t2); background: var(--bg); border: 1px solid var(--sep); border-radius: var(--r-sm); }
.bkm-err { color: var(--red); font-size: 12px; font-weight: 600; min-height: 14px; }
.bkm-ft { display: flex; gap: 9px; padding: 10px 20px 18px; }
.bkm-ft .pay-submit { flex: 1; }

/* New-booking form: narrow slide-in panel */
.panel.narrow { width: 600px; }
.bk-wrap {
  width: 100%; box-sizing: border-box; padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  /* The new-booking form is the only child of #panel-body (overflow:hidden),
     so it must own the scroll — otherwise tall content (card fields) is clipped. */
  flex: 1; min-height: 0; overflow-y: auto;
}
.bk-wrap .bkm-ft { padding: 4px 0 0; }
/* The gap-note reuses .panel-guestnote, but here it's a flex child of .bk-wrap
   (own padding + gap), so drop the banner's standalone margin. */
.bk-wrap .panel-guestnote { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Auth gate (Keycloak)
   ══════════════════════════════════════════════════════════════════════════ */
.auth-gate {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.auth-card {
  width: 330px;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-lg);
  padding: 32px 26px 26px;
  text-align: center;
  box-shadow: var(--sh-xl);
}
.auth-card[hidden] { display: none; }
.auth-mark {
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  border-radius: var(--r-md);
  background: var(--blue); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center;
}
.auth-card h2 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 6px; color: var(--t1); }
.auth-card p { font-size: 13px; font-weight: 400; color: var(--t2); line-height: 1.5; }
.auth-spin {
  width: 22px; height: 22px;
  margin: 2px auto 12px;
  border-radius: 50%;
  border: 2.5px solid var(--fill);
  border-top-color: var(--blue);
  animation: auth-rot .8s linear infinite;
}
@keyframes auth-rot { to { transform: rotate(360deg); } }
.auth-out {
  margin-top: 18px;
  padding: 9px 22px;
  border: none; border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.auth-out:hover { background: var(--accent-d); }

/* ── Signed-in agent chip ── */
.top-user {
  position: fixed; top: 11px; right: 14px; z-index: 90;
  display: flex; align-items: center; gap: 9px;
  height: 36px;
  padding: 0 5px;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: 18px;
  box-shadow: var(--sh-md);
  white-space: nowrap;
}
.top-user[hidden] { display: none; }
.user-ava {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: center;
}
.user-name { font-size: 13px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: var(--t1); }
.user-out {
  height: 26px;
  padding: 0 12px;
  border: none; border-radius: 13px;
  background: var(--fill); color: var(--t2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.user-out:hover { background: var(--red-fill); color: var(--red); }

/* Header quick-search — sits left of the avatar inside the top-user pill */
.hsearch { position: relative; display: flex; align-items: center; }
.hsearch-ico {
  position: absolute; left: 10px; width: 15px; height: 15px;
  color: var(--t3); pointer-events: none;
}
.hsearch-in {
  width: 184px; height: 28px;
  padding: 0 11px 0 30px;
  border: 1px solid var(--sep);
  border-radius: 14px;
  background: var(--fill);
  font-size: 13px; color: var(--t1);
  outline: none;
  transition: width .18s ease, background .12s, border-color .12s, box-shadow .12s;
}
.hsearch-in::placeholder { color: var(--t2); }
.hsearch-in:focus {
  width: 248px;
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.hsearch-drop {
  position: absolute; top: 40px; left: 0;
  min-width: 280px; max-width: 360px; max-height: 64vh; overflow-y: auto;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: 14px;
  box-shadow: var(--sh-lg);
  z-index: 95;
}
.hsearch-drop[hidden] { display: none; }
.hsearch-row {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity .12s;
}
.hsearch-row:hover, .hsearch-row.on { background: var(--fill); }
.hsearch-row.dim { opacity: .38; }
.hsearch-row.loading { background: var(--fill); padding-right: 34px; cursor: default; }
.hs-spin { position: absolute; right: 11px; top: calc(50% - 8px); }
.hs-name {
  font-size: 13px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-ref { font-weight: 600; letter-spacing: .2px; }
.hs-sep { opacity: .45; }
.hsearch-empty { padding: 14px 10px; font-size: 12px; color: var(--t2); text-align: center; }

@media (max-width: 720px){
  .hsearch-in { width: 120px; }
  .hsearch-in:focus { width: 160px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Aircraft rename + pilot roster
   ══════════════════════════════════════════════════════════════════════════ */
.ac-name-input {
  flex: 1; min-width: 0;
  border: none; background: none; box-shadow: none;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--t1); letter-spacing: -.2px;
  padding: 5px 8px; margin-left: -8px; border-radius: var(--r-xs);
  height: auto;
  transition: background .12s, box-shadow .12s;
}
.ac-name-input:hover { background: var(--fill); }
.ac-name-input:focus { outline: none; background: var(--white); box-shadow: 0 0 0 2px var(--blue); border-color: transparent; }

/* Configuration roster — clickable record cards (open the detail drawer) */
.cfg-list { display: flex; flex-direction: column; gap: 8px; }
.cfg-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white); cursor: pointer; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.cfg-item:hover { border-color: rgba(47,79,114,.35); box-shadow: var(--sh-sm); }
.cfg-ava {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-fill); color: var(--blue);
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
}
.cfg-ava-ac { border-radius: var(--r-sm); }
.cfg-ava-ac svg { width: 20px; height: 20px; }
.cfg-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-item-name { font-size: 14px; font-weight: 600; color: var(--t1); letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-item-sub { font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-add {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 1px dashed rgba(47,79,114,.4); border-radius: var(--r-sm);
  background: var(--blue-fill); color: var(--blue);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cfg-add:hover { background: rgba(47,79,114,.16); border-color: var(--blue); }
.cfg-add-ico { font-size: 17px; font-weight: 700; line-height: 1; }
.cfg-item-sk { height: 60px; border-radius: var(--r-sm); }

/* Per-lane aircraft + pilot row (Capacity): two dropdowns share the width */
.ac-row .ac-sel-wrap { width: auto; flex: 1; min-width: 0; }

/* ── Configuration page ──────────────────────────────────────────────────── */
#config-scroll { flex: 1; overflow-y: auto; padding: 28px 24px 40px; }
.cfg-lede {
  max-width: 880px; margin: 0 auto 20px; padding: 0 2px;
  font-size: 13px; line-height: 1.55; color: var(--t2);
}
.config-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  align-items: start; max-width: 880px; margin: 0 auto;
}
@media (max-width: 760px){ .config-cols { grid-template-columns: 1fr; } }
.cfg-card { margin-bottom: 0; }
.cfg-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--sep);
  background: linear-gradient(180deg, rgba(47,79,114,.035), transparent);
}
.cfg-hd-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cfg-ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: var(--blue-fill); color: var(--blue);
}
.cfg-ico svg { width: 21px; height: 21px; }
.cfg-title { font-size: 15px; font-weight: 700; color: var(--t1); letter-spacing: -.2px; }
.cfg-sub { font-size: 12px; color: var(--t2); margin-top: 1px; }
.cfg-count {
  min-width: 26px; height: 24px; padding: 0 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--fill); color: var(--t2);
  font-size: 12px; font-weight: 700;
}
.cfg-body { padding: 16px 18px 18px; }

/* ── Custom date field (Day setup Start/End) ─────────────────────────────── */
.date-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 40px; padding: 0 11px;
  background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--t1);
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.date-field:hover { border-color: rgba(30,35,45,.22); }
.date-field.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-fill); }
.date-field svg { width: 15px; height: 15px; color: var(--t3); flex-shrink: 0; }
.cal-pop.cal-pop-field { position: fixed; left: auto; top: auto; z-index: 220; }
/* ── Configuration record modal (pilot / aircraft) ───────────────────────── */
.cfg-panel {
  position: fixed; top: 50%; left: 50%; width: 640px; max-width: 96vw; max-height: 90vh;
  transform: translate(-50%, -50%) scale(.96);
  background: var(--bg); border: 1px solid var(--sep); border-radius: var(--r-lg);
  z-index: 210; display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.2,.64,1); box-shadow: var(--sh-xl);
}
.cfg-panel.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.cfg-panel-veil {
  position: fixed; inset: 0; z-index: 205; background: rgba(20,30,50,.32);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.cfg-panel.on + .cfg-panel-veil { opacity: 1; pointer-events: auto; }
.cfg-panel-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--sep); background: var(--bg); flex-shrink: 0;
}
.cfg-panel-title { font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--t1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-panel-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
/* Actions sit below the body — delete pinned left, Cancel/Save grouped right. */
.cfg-panel-ft {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 14px 22px; border-top: 1px solid var(--sep); background: var(--bg);
}
.cfg-ft-sp { display: none; }

/* One aligned two-column field grid: paired fields share a row; section headers
   and full-width fields span both columns, so every row lines up horizontally. */
.cfg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-content: start; }
.cfg-span { grid-column: 1 / -1; }
@media (max-width: 600px) { .cfg-form { grid-template-columns: 1fr; } }
.cfg-sec-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t2); }
.cfg-sec-t.cfg-span { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--sep); }
.cfg-form > .cfg-sec-t:first-child { margin-top: 0; padding-top: 4px; border-top: none; }
.cfg-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cfg-f > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--t2); }
.cfg-f input, .cfg-f textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: var(--t1);
  background: var(--white); border: 1px solid var(--sep); border-radius: var(--r-sm); padding: 9px 11px;
  transition: border-color .12s, box-shadow .12s;
}
.cfg-f input { height: 40px; }
.cfg-f textarea { resize: vertical; line-height: 1.45; }
.cfg-f input:focus, .cfg-f textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-fill); }
.cfg-f input.cf-error, .cfg-f textarea.cf-error { border-color: #E0A100; box-shadow: 0 0 0 2px rgba(224,161,0,.22); }
.cfg-f-err { font-size: 10px; font-weight: 600; color: #8a6500; }
.cfg-req { color: var(--red); font-style: normal; margin-left: 2px; }
.cfg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px; border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white); color: var(--t1); font-family: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s;
}
.cfg-btn:hover { background: var(--fill); }
.cfg-btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 1px 2px rgba(47,79,114,.25); }
.cfg-btn-primary:hover { background: #26415f; }
.cfg-btn-danger { background: var(--white); color: var(--red); border-color: rgba(255,59,48,.35); }
.cfg-btn-danger:hover { background: var(--red-fill); border-color: rgba(255,59,48,.5); }
/* Delete record — a quiet trash icon; goes red on hover so intent is clear. */
.cfg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white); color: var(--t2); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.cfg-icon-btn svg { width: 18px; height: 18px; }
.cfg-del:hover { color: var(--red); border-color: rgba(255,59,48,.5); background: var(--red-fill); }
.cfg-icon-btn.busy { opacity: .5; pointer-events: none; }
/* Delete pinned to the far left; Cancel/Save grouped at the right. */
#cfg-panel-ft .cfg-del { margin-right: auto; }
#cfg-panel-ft:not(:has(.cfg-del)) { justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
   Toolbar date-jump calendar
   ══════════════════════════════════════════════════════════════════════════ */
.cal-pop {
  position: absolute; top: calc(100% + 6px); left: 52px; z-index: 120;
  width: 276px;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--sh-lg);
}
.cal-pop[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Skeleton board (day loading)
   ══════════════════════════════════════════════════════════════════════════ */
.skel { pointer-events: none; }
.skel .gutter-head { color: transparent; }
.sk, .skcard, .sk-tag {
  background: linear-gradient(100deg, rgba(60,60,67,.06) 30%, rgba(60,60,67,.12) 50%, rgba(60,60,67,.06) 70%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk { border-radius: var(--r-xs); }
.sk-time { width: 52px; height: 15px; margin-bottom: 9px; }
.sk-meta { width: 92px; height: 10px; }
.sk-tag { width: 46px; height: 20px; border-radius: var(--r-xs); }
.skcard {
  margin: 7px;
  border-radius: var(--r-md);
  border: 1px solid var(--sep);
}

/* ══════════════════════════════════════════════════════════════════════════
   Move buttons + inline move form
   ══════════════════════════════════════════════════════════════════════════ */
.mv-btn {
  width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--sh-sm);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--t1);
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .12s;
}
.mv-btn:hover { border-color: rgba(47,79,114,.4); }
.mv-group-btn {
  width: 100%;
  border: none; border-radius: var(--r-sm);
  background: var(--fill); color: var(--t1);
  padding: 11px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.mv-group-btn:hover { background: rgba(60,60,67,.12); }

.mv-form {
  margin-top: 10px;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--sh-sm);
}
.mv-form #mv-cal { width: 100%; }
.mv-form .ctx-slots { grid-template-columns: repeat(3, 1fr); }
.mv-form-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--t2);
}
.mv-cancel {
  flex-shrink: 0;
  border: 1px solid var(--sep); border-radius: var(--r-xs);
  background: var(--white); color: var(--t1);
  font-family: inherit; font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding: 5px 11px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.mv-cancel:hover { background: var(--fill); }
.mv-form .cal-hd { margin-bottom: 8px; }
.mv-form .ctx-note { padding: 8px 0 0; }
.mv-form .ctx-slots { padding: 8px 0 0; max-height: 150px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.mv-form .ctx-slot { background: var(--white); }
.mv-form .ctx-slot:hover:not(.off) { background: var(--blue-fill); border-color: var(--blue); }

.mv-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.mv-actions-l { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--t2); }
.mv-act-btn {
  width: 100%; text-align: left;
  border: 1px solid var(--sep); border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--sh-sm);
  color: var(--t1);
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .12s, background .12s;
}
.mv-act-btn:hover { border-color: var(--blue); background: var(--blue-fill); }

/* ══════════════════════════════════════════════════════════════════════════
   Panel busy veil
   ══════════════════════════════════════════════════════════════════════════ */
.panel-busy {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(244,245,247,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.panel-busy-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid var(--sep);
  border-radius: var(--r-md);
  padding: 14px 20px;
  font-size: 14px; font-weight: 600; color: var(--t1);
  box-shadow: var(--sh-lg);
}
.mini-spin {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--fill);
  border-top-color: var(--blue);
  animation: auth-rot .8s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   Centred move popup card (LAST — out-cascades generic .mv-form rules)
   ══════════════════════════════════════════════════════════════════════════ */
.panel-move-card .mv-form { margin-top: 0; background: none; border: none; box-shadow: none; padding: 12px 18px 16px; width: 100%; }
.panel-move-card #mv-cal { width: 100%; }
.panel-move-card .cal-grid { row-gap: 2px; }
.panel-move-card .cal-d {
  font-size: 13px; padding: 0; aspect-ratio: auto;
  width: 30px; height: 30px; margin: 0 auto;
}
.panel-move-card .cal-d.today, .panel-move-card .cal-d.chosen { border-radius: 50%; }
.panel-move-card .ctx-slots {
  grid-template-columns: repeat(3, 1fr);
  max-height: none; overflow-y: visible;
}
.panel-move-card .ctx-slot { border: 1px solid var(--sep); background: var(--white); padding: 6px 4px 5px; }
.panel-move-card .ctx-slot:hover:not(.off) { border-color: var(--blue); background: var(--blue-fill); }

/* ── Debit / credit ledger (booking panel) ─────────────────────────────── */
.led { display: flex; flex-direction: column; gap: 16px; }
.led-grp { display: flex; flex-direction: column; gap: 8px; }
.led-hd { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #48484a; }
/* Each charge / payment is its own card, matching the product card. */
.led-cards { display: flex; flex-direction: column; gap: 8px; }
.led-card {
  border: 1px solid var(--sep); border-radius: var(--r-sm); min-height: 56px;
  padding: 12px 14px; background: var(--white); box-shadow: var(--sh-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.led-card .lc-n {
  font-size: 14px; font-weight: 600; color: var(--t1);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.led-card .lc-n em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--t3); }
.led-card .lc-sub { font-size: 9px; font-weight: 500; color: #57575b; letter-spacing: .1px; }
.led-card .lc-amt { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.led-card .lc-amt s { color: var(--t3); font-weight: 400; margin-right: 3px; }
.led-card.debit { border-color: var(--orange); }
.led-card.debit .lc-amt { color: var(--orange-d); }
.led-card.credit { border-color: var(--green); }
.led-card.credit .lc-amt { color: var(--green-d); }
.led-card.credit.isref { border-color: var(--red); }
.led-card.credit.isref .lc-amt { color: var(--red); }
/* Totals + balance: bigger, always black — no fills, no greys, no status colours. */
.led-tot { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px; font-size: 15px; font-weight: 600; color: var(--t1); }
.mem-prod + .led-tot { margin-top: 12px; }
.led-tot b { color: var(--t1); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.led-empty { padding: 12px 14px; font-size: 12px; color: var(--t3);
  border: 1px dashed var(--sep); border-radius: var(--r-sm); }
.led-balance { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px 2px; border-top: 1px solid var(--sep);
  font-size: 15px; font-weight: 600; color: var(--t1); }
.led-balance b { font-variant-numeric: tabular-nums; font-size: 17px; color: var(--t1); }
.pay-badge.credit { background: var(--green-fill); color: var(--green-d); }
/* Inline price edit on a charge card — no background, no line, just the number. */
.led-price-in { border: 0; background: none; outline: none; font: inherit; color: inherit;
  width: 64px; text-align: right; padding: 0; }
.led-price-in::-webkit-outer-spin-button, .led-price-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Party-row details icon + member details modal ─────────────────────── */
.prow-ic { width: 24px; height: 24px; flex: 0 0 auto; border: 0; background: transparent;
  color: var(--t3); border-radius: 6px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.party-row:hover .prow-ic { color: var(--t2); }
.prow-ic:hover { background: var(--fill); color: var(--blue); }
.details-form { display: flex; flex-direction: column; }
.details-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--sep); }
.details-t { font-size: 14px; font-weight: 600; color: var(--t1); }
.details-form .mem-edit { padding: 16px; }
/* Short form — let the Pilot dropdown escape the card instead of being clipped. */
.panel-move-card:has(.details-form) { overflow: visible; }

/* Pay / Refund forms shown as a centered modal (the .pay-inline is the card). */
.panel-move-overlay > .pay-inline { margin-top: 0; width: 360px; max-width: 92%; max-height: 86%; overflow-y: auto; }

/* Refund-all confirm warning. */
.rf-warn { font-size: 13px; line-height: 1.45; color: var(--t2); }
.rf-warn b { color: var(--red); }
.led-card.credit[oncontextmenu] { cursor: context-menu; }

/* New-booking add-on (Photos & Video) — pick how many of the group get it. */
.bkm-addon { display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--sep); border-radius: var(--r-md); background: var(--white);
  padding: 12px 14px; box-shadow: var(--sh-sm); }
.bkm-addon-txt { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.bkm-addon-n { font-size: 14px; font-weight: 600; color: var(--t1); }
.bkm-addon-p { font-size: 13px; font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.bkm-addon-step { flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Cashbox — one day's cash drawer
   ══════════════════════════════════════════════════════════════════════════ */
#cbox { padding: 18px 22px; overflow-y: auto; }
.cbox-msg { padding: 40px; text-align: center; color: var(--t2); font-size: 14px; }
.cbox-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 64px 20px; color: var(--t2); font-size: 13px; font-weight: 600;
}
.cbox-table {
  width: 100%; border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--sep); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-sm);
}
.cbox-table thead th {
  text-align: left; font-size: 13px; font-weight: 700; color: var(--t1);
  background: var(--bg); padding: 14px 18px;
  border-bottom: 1px solid var(--sep);
}
.cbox-table th:nth-child(2), .cbox-table th:nth-child(3) { width: 220px; }
.cbox-table th:last-child { width: 120px; }
.cbox-table tbody td {
  padding: 14px 18px; font-size: 14px; color: var(--t1);
  border-bottom: 1px solid var(--sep);
  font-variant-numeric: tabular-nums;
}
.cbox-table tbody tr:last-child td { border-bottom: 0; }
.cbox-table .cbox-ev b { font-weight: 600; }
.cbox-table .cbox-start td { color: var(--t2); }
.cbox-table .cbox-close td { color: var(--t1); font-weight: 700; background: var(--bg); border-top: 1px solid var(--sep); }
.cbox-table .cbox-lodge .cbox-ev b { color: var(--t2); }
.cbox-none { color: var(--t3); text-align: center; font-weight: 500; }
.cbox-open { color: var(--blue); font-weight: 600; cursor: pointer; }
.cbox-open:hover { text-decoration: underline; }

.cbox-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px;
}
.cbox-onhand { font-size: 14px; color: var(--t2); font-variant-numeric: tabular-nums; }
.cbox-onhand b { color: var(--t1); font-weight: 700; }
.cbox-lodge-btn {
  border: 1px solid var(--sep); border-radius: var(--r-sm); cursor: pointer;
  background: var(--white); color: var(--t1); font-family: inherit;
  font-size: 13.5px; font-weight: 600; padding: 10px 18px; transition: filter .12s, border-color .12s;
}
.cbox-lodge-btn:hover { border-color: var(--blue); color: var(--blue); }
.cbox-lodge-err { color: var(--danger, #c0392b); font-size: 12.5px; margin-top: 8px; min-height: 1em; }

/* Opening-a-booking veil (cashbox → board sidebar handoff) */
.opening-veil {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,30,50,.18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .14s ease;
}
.opening-veil.on { opacity: 1; pointer-events: auto; }
.opening-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); color: var(--t1);
  font-size: 14px; font-weight: 600;
  padding: 16px 22px; border-radius: var(--r-md);
  border: 1px solid var(--sep); box-shadow: var(--sh-xl);
}
.opening-spin {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--fill); border-top-color: var(--blue);
  animation: auth-rot .8s linear infinite;
}