/* ── FlightGPT for Business — components layered on FlightGPT's styles.css ──
   Everything here reuses FlightGPT's CSS variables so it matches exactly. */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  /* Outlined variant — matches the downloaded SVG icon set */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* SVG icons (sidebar + search) — masked so they recolour with
   currentColor, just like a font icon. Source set per element
   via the --ico custom property. */
.svg-ico {
  display: inline-block; width: 20px; height: 20px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* Airline logo in tables */
.al-cell { display: flex; align-items: center; gap: 8px; }
.al-logo {
  width: 28px; height: 28px; border-radius: 7px;
  object-fit: contain; flex-shrink: 0; background: var(--bg-hi);
}
.al-logo-text { display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--text-dim); }

/* Flight results — same table layout as the flightgpt.in metasearch */
.flights-tablewrap { max-width: 880px; margin: 10px auto; }
.flights-table .al-logo { width: 22px; height: 22px; border-radius: 5px; background: transparent; }
.flights-table .frow-name { font-weight: 600; }
.md-table tr.frow { cursor: pointer; transition: background 0.12s; }
.md-table tr.frow:hover td { background: var(--neon-soft); }
.md-table tr.frow:hover .frow-name { color: var(--neon); }
.md-table tr.frow.sel td { background: var(--neon-soft); }
.md-table tr.frow.sel .frow-name { color: var(--neon); }
/* Small screens: big airline logo on the left spanning both lines;
   name + flight number on top, then times / duration / stops / price. */
@media (max-width: 640px) {
  /* Each result is its own bordered card (matches the flightgpt.in mobile
     results): drop the single table-box chrome, card-ify every row. */
  .flights-tablewrap {
    margin: 10px auto;
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .flights-table thead { display: none; }
  .flights-table, .flights-table tbody { display: block; }
  .flights-table tr.frow {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* even gaps: times — duration — stops — price */
    row-gap: 4px;
    padding: 12px 14px 12px 70px; /* room for the two-line logo */
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-hi);
  }
  .flights-table tr.frow:last-child { margin-bottom: 0; }
  /* Whole card reacts on tap / selection (no per-cell tint). */
  .flights-table tr.frow:hover td,
  .flights-table tr.frow.sel td { background: transparent; }
  .flights-table tr.frow:hover,
  .flights-table tr.frow.sel { border-color: var(--neon); background: var(--neon-soft); }
  .flights-table tr.frow td { display: block; border: none; padding: 0; background: transparent; }
  .flights-table tr.frow td:first-child { flex: 1 1 100%; margin-bottom: 2px; }
  .flights-table tr.frow td:not(:first-child) { color: var(--text-dim); font-size: 13.5px; }
  .flights-table tr.frow td.frow-price { color: var(--text); font-weight: 700; }
  .flights-table tr.frow .al-logo {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    /* Same height as the two text lines, so top and bottom edges line up. */
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
  /* The emptied logo wrapper must not shift the name — name and times
     start from the same point. */
  .flights-table tr.frow td:first-child > .al-cell { gap: 0; }
}

/* ── Dark-themed native date / time pickers ────────────────────── */
/* Renders the native calendar popup AND its picker icon for dark mode,
   instead of the default light popup with a near-invisible dark icon. */
html { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  transition: opacity .12s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: 10px; border: none;
  background: var(--neon); color: #000;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: box-shadow .15s, background .12s, transform .05s;
}
.btn:hover:not(:disabled) { box-shadow: 0 0 18px rgba(0, 255, 65, .5); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--border-strong); color: var(--text-dim); cursor: not-allowed; }
.btn .material-symbols-outlined { font-size: 19px; }
.btn.ghost {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
}
.btn.ghost:hover { border-color: var(--neon-line); background: var(--bg-hi); box-shadow: none; }

/* ── Panel layout helpers ──────────────────────────────────────── */
.panel-intro { color: var(--text-dim); font-size: 14.5px; margin: 0 0 16px; }
.section-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}
textarea.form-input { min-height: 250px; resize: vertical; line-height: 1.5; }
/* Upload panels fill the screen exactly via flexbox — the paste box
   flexes to take leftover space, so the page itself never scrolls. */
#view.fit-view { display: flex; flex-direction: column; overflow: hidden; }
#view.fit-view .conn-view-head,
#view.fit-view .conn-group-head,
#view.fit-view .panel-intro,
#view.fit-view .upload-row { flex: 0 0 auto; }
#view.fit-view .conn-group,
#view.fit-view .section-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#view.fit-view .conn-group { margin-bottom: 0; }
#view.fit-view textarea.upload-textarea { flex: 1 1 0; min-height: 0; height: auto; }

/* ── Route controls row ────────────────────────────────────────── */
.controls {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: 1fr 1fr .85fr .9fr 1fr auto;
}
.controls.calendar-controls { grid-template-columns: 1fr 1fr .9fr 1fr auto; }
.controls .form-field { margin-bottom: 0; }
.controls .btn { height: 44px; }

/* ── Dashboard stat cards ──────────────────────────────────────── */
/* Overview tiles — wide, short rectangles. The value font scales with
   the card width (container query) so 9-digit figures never overflow. */
/* One content width for every section — matches the FlightGPT site
   (880px max, centered) so the side gaps are identical across FlightGPT for Business. */
.conn-group { max-width: 880px; padding: 0; }
.overview-group .conn-group-head { align-items: center; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; position: relative;
  container-type: inline-size;
}
.stat-ico {
  position: absolute; top: 14px; right: 14px;
  width: 27px; height: 27px; border-radius: 7px;
  background: var(--neon-soft); color: var(--neon);
  display: grid; place-items: center;
}
.stat-ico .material-symbols-outlined { font-size: 15px; }
.stat-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); font-weight: 600; padding-right: 34px;
}
.stat-num {
  font-size: clamp(16px, 12cqi, 30px); font-weight: 700; margin-top: 5px;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-right: 34px;
}
.stat-hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; padding-right: 34px; }

/* Period filter dropdown next to the Overview heading. */
.period-select {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 12px; font-weight: 600; padding: 5px 26px 5px 10px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.period-select:hover { border-color: var(--border-strong); }

/* Quick-action cards (reuse .conn-card as a button) */
button.conn-card {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
}
.conn-logo.action-ico { background: var(--neon-soft); color: var(--neon); }
.conn-logo.action-ico .material-symbols-outlined { font-size: 20px; }

/* ── Fare calendar ─────────────────────────────────────────────── */
.cal-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav button {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--bg-elev);
  color: var(--text); cursor: pointer; font-size: 16px;
  display: grid; place-items: center;
}
.month-nav button:hover:not(:disabled) { border-color: var(--neon-line); color: var(--neon); }
.month-nav button:disabled { opacity: .35; cursor: not-allowed; }
.month-label { font-size: 15px; font-weight: 700; min-width: 172px; text-align: center; }
.legend { display: flex; gap: 13px; font-size: 12px; color: var(--text-dim); margin-left: auto; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  margin-right: 5px; vertical-align: -1px; }
.legend .cheap { background: var(--neon); }
.legend .mid { background: var(--yellow); }
.legend .high { background: var(--danger); }

/* The grid is a fixed height that fills the viewport — rows distribute
   evenly so the calendar never makes the page scroll. */
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  grid-auto-rows: minmax(0, 1fr); height: calc(100dvh - 320px); min-height: 280px;
}
.cal-dow {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 4px;
}
.cal-cell {
  min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 9px; display: flex; flex-direction: column;
  background: var(--bg); position: relative;
}
.cal-cell.clickable { cursor: pointer; transition: transform .1s, border-color .1s; }
.cal-cell.clickable:hover { transform: translateY(-2px); border-color: var(--neon-line); }
.cal-cell.blank { border: none; background: transparent; }
.cal-cell.past { opacity: .3; }
.cal-cell .d { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.cal-cell .fare { margin-top: auto; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.cal-cell .fc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cal-cell .na { margin-top: auto; font-size: 11.5px; color: var(--text-faint); }
.cal-cell.t-cheap { background: var(--neon-soft); border-color: var(--neon-line); }
.cal-cell.t-cheap .fare { color: var(--neon); }
.cal-cell.t-mid .fare { color: var(--text); }
.cal-cell.t-high { background: var(--danger-soft); border-color: var(--danger-line); }
.cal-cell.t-high .fare { color: var(--danger); }
.cal-cell.best { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon); }
.cal-cell .ribbon {
  position: absolute; top: -8px; right: 8px;
  background: var(--neon); color: #000;
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}

.summary {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px;
}
.summary .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); }
.summary .v { font-size: 18px; font-weight: 700; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.summary .v.cheap { color: var(--neon); }

/* ── Date-range calendar (ported from FlightGPT) ────────────────── */
.daterange { max-width: 340px; }
.vac-dates-summary {
  font-size: 13px; color: var(--text-dim);
  margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vac-dates-summary.set { color: var(--neon); font-weight: 600; }
.vac-cal {
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 10px 12px 12px;
}
.vac-cal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.vac-cal-title { font-size: 13.5px; font-weight: 600; }
.vac-cal-nav {
  width: 28px; height: 28px; border-radius: 7px; background: transparent;
  border: 1px solid var(--border-strong); color: var(--text);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.vac-cal-nav:hover:not(:disabled) { border-color: var(--neon-line); color: var(--neon); }
.vac-cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.vac-cal-weekdays, .vac-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.vac-cal-weekdays span {
  text-align: center; font-size: 10px; color: var(--text-faint);
  font-weight: 600; padding: 2px 0 4px;
}
.vac-cal-grid { gap: 2px; }
.vac-cal-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 7px;
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.vac-cal-cell.empty { cursor: default; }
.vac-cal-cell:not(.empty):not(.past):not(.sel):hover { background: var(--bg-hi); }
.vac-cal-cell.past { color: var(--text-faint); opacity: .4; cursor: not-allowed; }
.vac-cal-cell.in-range { background: var(--neon-soft); border-radius: 0; }
.vac-cal-cell.hover-range { background: rgba(0, 255, 65, .22); border-radius: 0; }
.vac-cal-cell.sel { background: var(--neon-deep); color: #000; font-weight: 700; }
.vac-cal-cell.sel.start { border-radius: 7px 0 0 7px; }
.vac-cal-cell.sel.end { border-radius: 0 7px 7px 0; }
.cal-clear {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline; padding: 0;
}
.cal-clear:hover { color: var(--neon); }

/* Single-date picker — FlightGPT calendar grid in a popover */
.date-pop-wrap { position: relative; }
.date-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg-elev); color: var(--text-dim);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
  transition: border-color .12s;
}
.date-trigger:hover { border-color: var(--neon-line); }
.date-trigger.set { color: var(--text); }
.date-trigger .material-symbols-outlined { font-size: 18px; color: var(--text-dim); flex-shrink: 0; }
.date-trigger-text { flex: 1; }
.date-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: 268px; box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}

/* ── Review form (AI ingestion) ────────────────────────────────── */
.conf-banner {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px;
}
.conf-banner.high { background: var(--neon-soft); border: 1px solid var(--neon-line); color: var(--neon); }
.conf-banner.medium { background: var(--yellow-soft); border: 1px solid var(--yellow-line); color: var(--yellow); }
.conf-banner.low { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }

.field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.field-grid .form-field { margin-bottom: 0; }
.field-grid .span2 { grid-column: span 2; }
.field-grid .span-full { grid-column: 1 / -1; }

/* ── Required fields + validation ────────────────────────────────── */
.req-star { color: var(--danger); font-weight: 700; }
.form-field.field-invalid .form-input { border-color: var(--danger); }
.form-field.field-invalid .form-input:focus { border-color: var(--danger); }

.flight-edit {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin-bottom: 10px; background: var(--bg-elev);
}
.flight-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.flight-edit-num {
  font-size: 11px; font-weight: 700; color: var(--neon);
  background: var(--neon-soft); border: 1px solid var(--neon-line);
  padding: 2px 9px; border-radius: 999px;
}
.flight-edit-del {
  margin-left: auto; background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; display: grid; place-items: center;
}
.flight-edit-del:hover { color: var(--danger); border-color: var(--danger-line); }
.row-actions { display: flex; gap: 10px; margin-top: 6px; }

/* ── Flight-card fare-rule chips ─────────────────────────────────── */
.rule-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.rule-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 13px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.rule-chip:hover { border-color: var(--neon-line); }
.rule-chip.on { border-color: var(--neon-line); background: var(--neon-soft); color: var(--neon); }
.rule-chip .material-symbols-outlined { font-size: 16px; }
.bag-chip .bag-kg {
  border: none; background: transparent; color: inherit;
  font: inherit; font-size: 13px; width: 38px; outline: none; text-align: right;
  font-variant-numeric: tabular-nums;
}
.bag-chip .bag-kg::-webkit-outer-spin-button,
.bag-chip .bag-kg::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bag-chip:not(.on) .bag-kg, .bag-chip:not(.on) .bag-unit { display: none; }
.bag-unit { font-size: 11px; opacity: .75; }

.upload-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.upload-row input[type=file] { display: none; }
.upload-row .file-name { font-size: 12.5px; color: var(--text-dim); }

/* ── Misc ──────────────────────────────────────────────────────── */
.pill-ok, .pill-zero {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pill-ok { background: var(--neon-soft); color: var(--neon); border: 1px solid var(--neon-line); }
.pill-zero { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }

.spinner {
  width: 30px; height: 30px; margin: 36px auto;
  border: 3px solid var(--border-strong); border-top-color: var(--neon);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast.err { border-color: var(--danger-line); color: var(--danger); }

/* Ledger — credit / debit amounts. */
.led-credit { color: var(--neon); }
.led-debit { color: var(--danger); }

/* Legal pages */
.panel-view-content .updated { font-size: 12.5px; color: var(--text-faint); margin: 0 0 20px; }
.panel-view-content h3 { font-size: 14px; color: var(--neon); margin: 22px 0 7px; }
.panel-view-content ul { margin: 6px 0 6px 20px; }
.panel-view-content li { margin-bottom: 3px; color: var(--text-dim); }
.panel-view-content strong { color: var(--text); font-weight: 600; }
.panel-view-content code {
  background: rgba(255, 255, 255, .06); padding: 1px 6px; border-radius: 4px; font-size: .92em;
}

/* ── Frozen panel heading ─────────────────────────────────────────
   The title + sub-heading stay pinned to the top; only the content
   below them scrolls. Applies to every panel via .conn-view-head.
   The view's top padding is moved into the heading so it can stick
   flush to the top with no content peeking above it. Matches the
   FlightGPT list layout — pinned heading, no separator line. */
.connectors-view { padding-top: 0; padding-bottom: 24px; }
.conn-view-head {
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: 880px;
  margin: 0 auto 16px;
  padding: 76px 0 16px;
  background: var(--bg);
}

/* ── Back link (calendar date detail) ────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  padding: 7px 13px 7px 10px; border-radius: 8px; cursor: pointer;
  margin: 24px 0 16px;
}
.back-link:hover {
  color: var(--text); border-color: var(--border-strong); background: var(--bg-hi);
}
.back-link .material-symbols-outlined { font-size: 18px; }
/* Detail views already have the back link for top spacing, so the
   heading drops the full 76px gap — avoids a big empty band. */
.back-link + .conn-view-head { padding-top: 14px; }

/* ── Price discovery (calendar date detail table) ────────────────── */
.md-table.compact th,
.md-table.compact td { padding-left: 7px; padding-right: 7px; }
.md-table.compact th { letter-spacing: .03em; }
.cell-num { width: 88px; padding: 6px 7px; font-size: 13px; }
.route-cell { display: flex; align-items: center; gap: 6px; }
.lot-tag {
  font-size: 10px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-hi); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.ota-tag {
  font-size: 10px; font-weight: 700; color: var(--neon);
  background: var(--neon-soft); border: 1px solid var(--neon-line);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap; letter-spacing: .04em;
}
.cell-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--neon-soft); border: 1px solid var(--neon-line); color: var(--neon);
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.cell-btn:hover { background: var(--neon-line); }
.cell-btn:disabled { opacity: .6; cursor: default; }
.cell-btn .material-symbols-outlined { font-size: 15px; }
.pd-cell.pd-dim, .pd-cell .pd-dim { color: var(--text-faint); }
.table-note { font-size: 11.5px; color: var(--text-faint); margin: 10px 2px 0; }

/* ── Sales panel ─────────────────────────────────────────────────── */
/* Search bar — sits inside the frozen heading, full content width
   (same as the table below it), with a leading search icon. */
.search-box { position: relative; width: 100%; margin-top: 14px; }
.search-box-ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 19px; color: var(--text-faint); pointer-events: none;
}
.search-box-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font-size: 13.5px; padding: 15px 14px 15px 40px;
}
.search-box-input::placeholder { color: var(--text-faint); }
.search-box-input:focus { outline: none; border-color: var(--neon-line); }
/* Sales / Ledger — pull the list up close to the search bar. */
.conn-view-head:has(.search-box) { padding-bottom: 6px; margin-bottom: 6px; }
.sale-card {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elev); padding: 16px 18px; margin-bottom: 12px;
}
.sale-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sale-chip {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.sale-chip.flight { background: var(--neon-soft); border: 1px solid var(--neon-line); color: var(--neon); }
.sale-chip.hotel { background: var(--yellow-soft); border: 1px solid var(--yellow-line); color: var(--yellow); }
.sale-ref {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  font-weight: 700; color: var(--text);
}
.sale-status {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: capitalize; background: var(--neon-soft); color: var(--neon);
  border: 1px solid var(--neon-line);
}
.sale-total { margin-left: auto; font-weight: 700; font-size: 16px; color: var(--text); }
/* Edit Selling Price + Download Ticket centred at the bottom of the sale card */
.ticket-row { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.ticket-row .btn { padding: 10px 22px; }
/* Edit Selling Price modal — save button centred at the bottom */
.edit-sp-form .modal-save-row { display: flex; justify-content: center; margin-top: 18px; }
.edit-sp-form .modal-save-row .modal-action { width: auto; min-width: 160px; padding: 10px 28px; }

/* ── Instant Top Up ─────────────────────────────────────────── */
.topup-tabs { margin-bottom: 16px; flex-wrap: wrap; row-gap: 8px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid-2 .form-field { margin-bottom: 0; }
.form-grid-2 + .form-grid-2, .form-grid-2 + .form-field { margin-top: 14px; }
.tp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
/* doubled class: .trav-grid alone is 4-col and declared later in the file */
.trav-grid.payto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.tp-success { text-align: center; padding: 30px 22px; }
.tp-success h2 { margin: 12px 0 4px; }
.tp-check {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--neon-soft); border: 1px solid var(--neon-line);
  color: var(--neon); font-size: 30px; font-weight: 800;
}
.tp-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px; margin: 18px auto 0; max-width: 560px; text-align: left;
}
.dr-pill {
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.dr-pending { background: var(--yellow-soft); color: var(--yellow); border: 1px solid var(--yellow-line); }
.dr-approved { background: var(--neon-soft); color: var(--neon); border: 1px solid var(--neon-line); }
.dr-rejected { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
@media (max-width: 720px) {
  .trav-grid.payto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .form-grid-2, .trav-grid.payto-grid, .tp-facts { grid-template-columns: 1fr; }
}
.sale-item { margin-bottom: 3px; }
.sale-item .al-cell { font-weight: 600; }
.sale-hotel-ico {
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  background: var(--yellow-soft); color: var(--yellow); border: 1px solid var(--yellow-line);
}
.sale-hotel-ico .material-symbols-outlined { font-size: 17px; }
.sale-item-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }
.sale-meta {
  /* One line: Sold to · Sold on · Total paid · Selling price · PNR */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 18px; padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sale-trav-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: 10px;
}
.trav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-k {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-faint);
}
.kv-v { font-size: 13.5px; color: var(--text); font-weight: 500; word-break: break-word; }
.tr-group {
  grid-column: 1 / -1; border-top: 1px dashed var(--border);
  padding-top: 12px; margin-top: 2px;
}
.tr-group-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }

@media (max-width: 980px) {
  .stat-grid, .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls, .controls.calendar-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sale-meta, .trav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Partner-style pickers for the search panels, DARK theme ──
   Same interactions as the white-label demo (calendar / seats+cabin /
   airport picker) re-skinned in the portal's black-grey-neon palette. */
.psb-ov{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.psb-pop{position:relative;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);padding:48px 22px 22px;text-align:left;color:var(--text)}
.psb-x{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);
  background:var(--bg-soft);color:var(--text-dim);cursor:pointer;font-size:.7rem;display:grid;place-items:center;line-height:1}
.psb-x:hover{color:var(--text);background:var(--bg-hi)}
.psb-fieldbtn{text-align:left;cursor:pointer;display:block}
.psb-fieldbtn .fb-sub{display:block;font-size:11px;color:var(--text-dim);font-weight:500;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-weight:700;font-size:.95rem;color:var(--text)}
.cal-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-soft);
  cursor:pointer;font-size:1rem;color:var(--text);display:grid;place-items:center}
.cal-nav:hover{background:var(--bg-hi)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{font-size:.68rem;font-weight:700;color:var(--text-dim);text-align:center;padding:4px 0}
.cal-day{aspect-ratio:1;display:grid;place-items:center;font-size:.82rem;font-weight:600;border-radius:8px;cursor:pointer;color:var(--text)}
.cal-day:hover{background:var(--bg-hi)}
.cal-day.muted{visibility:hidden}
.cal-day.dis{color:var(--text-faint);cursor:default;pointer-events:none}
.cal-day.today{box-shadow:inset 0 0 0 1px var(--neon)}
.cal-day.sel{background:var(--neon);color:#000}

.pax-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0}
.pax-row .lbl{font-weight:700;font-size:.92rem;color:var(--text)}
.pax-row .sub{font-size:.74rem;color:var(--text-dim)}
.stepper{display:flex;align-items:center;gap:.7rem}
.step-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-soft);
  color:var(--text);font-size:1rem;cursor:pointer;display:grid;place-items:center}
.step-btn:hover:not(:disabled){border-color:var(--neon);color:var(--neon)}
.step-btn:disabled{opacity:.35;cursor:default}
.step-n{min-width:18px;text-align:center;font-weight:700;color:var(--text)}
.pax-class-t{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:.8rem 0 .5rem}
.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.class-pill{border:1px solid var(--border-strong);border-radius:10px;padding:.5rem;text-align:center;
  font-size:.82rem;font-weight:600;cursor:pointer;color:var(--text)}
.class-pill:hover{border-color:var(--neon)}
.class-pill.on{background:var(--neon);border-color:var(--neon);color:#000}
.pax-done{width:100%;margin-top:1rem;padding:.7rem;border:0;border-radius:10px;background:var(--neon);color:#000;
  font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit}
.pax-done:hover{box-shadow:0 0 16px rgba(0,255,65,.45)}

.ap-title{font-weight:800;font-size:1.05rem;margin-bottom:.7rem;color:var(--text)}
.ap-search{width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;padding:.65rem .9rem;
  border:1px solid var(--border-strong);border-radius:10px;background:var(--bg-soft);color:var(--text);outline:none;margin-bottom:.6rem}
.ap-search:focus{border-color:var(--neon)}
.ap-list{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:2px}
.ap-row{display:flex;align-items:center;gap:.8rem;padding:.55rem .6rem;border:0;background:none;border-radius:10px;
  cursor:pointer;text-align:left;font:inherit;color:var(--text);width:100%}
.ap-row:hover:not(:disabled){background:var(--bg-hi)}
.ap-row:disabled{opacity:.45;cursor:default}
.ap-row.sel{background:var(--bg-hi)}
.ap-code{font-weight:800;font-size:.85rem;color:var(--neon);min-width:44px}
.ap-meta{display:flex;flex-direction:column;min-width:0}
.ap-city{font-weight:600;font-size:.92rem}
.ap-name{font-size:.74rem;color:var(--text-dim)}
.ap-tag{margin-left:auto;font-size:.68rem;color:var(--text-faint)}
.ap-empty{padding:.8rem;color:var(--text-dim);font-size:.9rem}
.search-actions{justify-content:center;margin-top:22px}
.psb-citybox{cursor:text;padding-top:10px;padding-bottom:10px}
.psb-citybox input{border:0;background:none;outline:none;font:inherit;color:var(--text);width:100%;padding:0}
.psb-citybox input::placeholder{color:var(--text-faint)}

/* City autocomplete */
.city-ac-wrap{position:relative}
.city-ac-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;
  background:var(--bg-hi);border:1px solid var(--border);border-radius:10px;
  padding:4px 0;margin:0;list-style:none;max-height:280px;overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}
.city-ac-item{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:9px 14px;cursor:pointer;transition:background .1s}
.city-ac-item:hover,.city-ac-hi{background:var(--neon-soft)}
.city-ac-item:hover .city-ac-name,.city-ac-hi .city-ac-name{color:var(--neon)}
.city-ac-name{font-size:.9rem;font-weight:500;color:var(--text)}
.city-ac-sub{font-size:.78rem;color:var(--text-dim);white-space:nowrap;flex-shrink:0}

/* ── Flight results page + booking flow ─────────────────────── */
.sort-row{display:flex;gap:10px;margin:0 auto 16px;max-width:880px}
.sort-row .class-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sort-row .class-pill .material-symbols-outlined{font-size:17px}
.fil-t{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:14px 0 8px}
.fil-lab{font-size:.9rem;color:var(--text);margin-bottom:4px}
.fil-range{width:100%;accent-color:var(--neon);margin:4px 0}
/* Dual-handle departure-time slider — one rail, two thumbs, neon fill */
.fil-range-wrap{position:relative;height:30px;margin:8px 0 6px;}
.fil-range-track{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:var(--bg-hi);border-radius:999px;}
.fil-range-fill{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:var(--neon);border-radius:999px;pointer-events:none;}
.fil-range-wrap input[type=range].fil-range{
  /* Input is exactly thumb-height and centred on the wrap, so thumb,
     rail and fill all share the same centreline. */
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;height:18px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;pointer-events:none;
}
.fil-range-wrap input[type=range].fil-range::-webkit-slider-runnable-track{height:18px;background:transparent;border:none;}
.fil-range-wrap input[type=range].fil-range::-moz-range-track{height:18px;background:transparent;border:none;}
.fil-range-wrap input[type=range].fil-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--neon);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--neon);
  cursor:pointer;pointer-events:auto;margin-top:0;
}
.fil-range-wrap input[type=range].fil-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--neon);border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--neon);cursor:pointer;pointer-events:auto;
}
.fil-head{display:flex;align-items:center;justify-content:space-between}
.fil-all{font-size:.78rem;color:var(--neon);cursor:pointer;background:none;border:0;padding:0}
.fil-air{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.fil-air:last-of-type{border-bottom:0}
.fil-air input[type=checkbox]{accent-color:var(--neon);width:16px;height:16px;flex:none}
.fil-air .al-cell{flex:1}
.fil-only{font-size:.75rem;border:1px solid var(--border-strong);border-radius:8px;padding:3px 10px;cursor:pointer;color:var(--text-dim);background:none}
.fil-only:hover{border-color:var(--neon);color:var(--text)}
.fil-actions{display:flex;gap:10px;margin-top:18px}
.fil-actions .btn{flex:1}
.bk-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;max-width:880px;margin:0 auto;align-items:start}
@media(max-width:980px){.bk-grid{grid-template-columns:1fr}}
.trav-card{margin-bottom:14px}
.trav-card-t{font-weight:700;margin-bottom:12px}
.trav-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:10px}
.trav-row .form-field{margin-bottom:0}
.trav-row.contact{grid-template-columns:1fr 1fr}
.agc-check{display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:13px;font-weight:500;color:var(--text-dim);cursor:pointer}
.agc-check input[type=checkbox]{accent-color:var(--neon);width:16px;height:16px;flex:none;cursor:pointer}
.trav-card .form-field{margin-bottom:0;margin-top:10px}
.itin-route{font-size:1.05rem;font-weight:700}
.itin-line{color:var(--text-dim);font-size:.9rem;margin-top:8px}
.itin-div{border-top:1px solid var(--border);margin:12px 0}
.fare-line{display:flex;justify-content:space-between;font-size:.92rem;color:var(--text-dim);margin-top:6px}
.fare-line.total{color:var(--text);font-weight:700;font-size:1rem;margin-top:10px}
.secured{display:flex;align-items:center;gap:6px;color:var(--neon);font-size:.85rem;justify-content:center;margin-top:12px}
.secured .material-symbols-outlined{font-size:18px}
.confirm-wrap{max-width:560px;margin:40px auto;text-align:center}
.confirm-wrap h1{font-size:24px;margin:10px 0 0}
.confirm-wrap .big-check{font-size:64px;color:var(--neon)}
.conf-ref-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:18px;margin:18px 0}
.conf-ref-l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.conf-ref{font-size:1.6rem;font-weight:800;color:var(--neon);letter-spacing:.06em;margin-top:6px;font-family:ui-monospace,SFMono-Regular,monospace}
.conf-note{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:18px;font-size:.9rem;color:var(--text-dim)}
.conf-note strong{color:var(--text)}
.conf-sum{text-align:left;display:grid;gap:10px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px}
.conf-row{display:flex;justify-content:space-between;font-size:.92rem;gap:14px}
.conf-row .k{color:var(--text-faint);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;padding-top:3px;flex:none}
.conf-row .v{font-weight:600;text-align:right}

/* Partner-parity: progress steps, hold timer, itinerary extras, field errors */
.steps-row{display:flex;align-items:center;justify-content:center;gap:34px;max-width:880px;margin:0 auto 14px}
.pstep{display:flex;flex-direction:column;align-items:center;gap:5px}
.pnum{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:700;border:1px solid var(--border-strong);color:var(--text-faint);background:var(--bg-elev)}
.pnum.done{background:var(--neon);border-color:var(--neon);color:#000}
.pnum.active{border-color:var(--neon);color:var(--neon)}
.plabel{font-size:.72rem;color:var(--text-faint)}
.plabel.done,.plabel.active{color:var(--text)}
.hold-timer{display:flex;align-items:center;justify-content:center;gap:6px;max-width:880px;margin:0 auto 18px;padding:9px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);color:var(--text-dim);font-size:.86rem}
.hold-timer .material-symbols-outlined{font-size:17px;color:var(--neon)}
.hold-timer span{font-weight:700;color:var(--text)}
.itin-leg-t{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.itin-incl{color:var(--text-faint);font-size:.78rem;line-height:1.7;margin-top:10px}
.fld-err{display:none;color:var(--danger,#f87171);font-size:.74rem;margin-top:4px}
.form-field.field-invalid .fld-err{display:block}
.conf-note p{margin:6px 0 0}

/* Partner-card results + Your Itinerary box (black + neon theme) */
.res-paxline{max-width:880px;text-align:center;color:var(--neon);font-size:.85rem;font-weight:600;margin:-8px auto 16px}
.sort-row{justify-content:center}
.sort-row .class-pill{flex:0 0 auto;border-radius:999px;padding:.45rem 1rem;font-size:.8rem}
.fcard-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.fcard{display:grid;grid-template-columns:1.3fr .8fr 1fr .8fr .7fr;align-items:center;gap:12px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .15s}
.fcard:hover{border-color:var(--neon)}
.fc-air{display:flex;align-items:center;gap:9px;min-width:0}
.fc-air .al-cell{flex:none}
.fc-an{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-code{color:var(--text-dim)}
.fc-dep,.fc-arr{font-size:.95rem;white-space:nowrap}
.fc-dep{text-align:right}
.fc-iata{color:var(--text-dim);font-size:.8rem}
.fc-mid{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.fc-dur,.fc-stop{font-size:.72rem;color:var(--text-faint)}
.fc-line{width:100%;height:2px;background:var(--neon);border-radius:2px;opacity:.85}
.fc-price{text-align:right;font-weight:800;font-size:1rem}
@media(max-width:760px){
  .fcard{grid-template-columns:1fr 1fr;grid-template-areas:'air air' 'dep arr' 'mid mid' 'price price'}
  .fc-air{grid-area:air}.fc-dep{grid-area:dep;text-align:left}.fc-arr{grid-area:arr;text-align:right}
  .fc-mid{grid-area:mid}.fc-price{grid-area:price;text-align:left}
}
.itin-h{font-weight:700;font-size:1rem;margin-bottom:12px}
.itin-route2{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.itin-iata{font-size:1.25rem;font-weight:800;letter-spacing:.02em}
.itin-rline{flex:1;height:2px;background:var(--neon);border-radius:2px}
.itin-airline{display:flex;align-items:center;gap:8px}
.itin-airline .al-cell{flex:none}
.itin-line b{color:var(--text)}
.itin-cta{width:100%;justify-content:center;margin-top:14px}
.page-freeze{position:sticky;top:0;z-index:30;background:var(--bg);padding-bottom:6px}
.page-freeze .conn-view-head{position:static}

/* Round trip: trip toggle, leg header, selected onward card */
.trip-row{display:flex;gap:10px;margin-bottom:14px;justify-content:center}
.trip-row .class-pill{flex:0 0 auto;border-radius:999px;padding:.45rem 1.1rem;font-size:.8rem}
.leg-head{display:flex;align-items:center;justify-content:center;gap:8px;max-width:880px;margin:0 auto 12px;color:var(--text);font-size:.9rem;font-weight:600}
.leg-head .material-symbols-outlined{font-size:18px;color:var(--neon)}
.change-onward{background:none;border:0;color:var(--neon);font-size:.8rem;cursor:pointer;text-decoration:underline;padding:0;margin-left:10px}
.fcard.sel{border-color:var(--neon);box-shadow:0 0 0 1px var(--neon)}

/* Partner account (Sign In / Sign Up) */
.auth-host{max-width:680px;margin:0 auto}
.auth-card{padding:22px}
.auth-tabs{justify-content:center;margin-bottom:18px}
.auth-hi{font-size:1.15rem;font-weight:700;margin-bottom:8px;text-align:center}
.auth-mail{color:var(--text-dim);text-align:center}
.auth-note{color:var(--text-dim);font-size:.9rem;margin-top:8px;text-align:center}
.auth-otp{max-width:220px;margin:16px auto 0;display:block;text-align:center;font-size:1.4rem;letter-spacing:.45em;font-family:ui-monospace,monospace}
.auth-err{color:var(--danger,#f87171);font-size:.85rem;text-align:center;margin-top:10px;min-height:1.1em}
.auth-alt{text-align:center;margin-top:12px}
.auth-one{max-width:380px;margin:0 auto}
.kyc-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kyc-3 .form-field{margin-bottom:0}

/* Agency ID + team management */
.agency-id-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:14px;text-align:center}
.agency-id{font-size:1.3rem;font-weight:800;color:var(--neon);letter-spacing:.08em;font-family:ui-monospace,SFMono-Regular,monospace;margin-top:4px}
.team-card{margin-top:16px}
.team-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.team-row.off{opacity:.45}
.team-row:last-of-type{border-bottom:0}
.team-who{display:flex;flex-direction:column;min-width:170px;flex:1}
.team-mail{color:var(--text-faint);font-size:.78rem}
.team-role{font-size:.74rem;color:var(--neon);border:1px solid var(--neon-line,rgba(0,255,65,.35));border-radius:999px;padding:3px 10px}
.team-chips{display:flex;gap:6px;flex-wrap:wrap}
.perm-chip{font-size:.74rem;border:1px solid var(--border-strong);border-radius:999px;padding:4px 10px;cursor:pointer;color:var(--text-dim);background:none}
.perm-chip.on{background:var(--neon);border-color:var(--neon);color:#000;font-weight:600}
.team-add-t{margin-top:18px}
.team-access-l{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:12px 0 6px}
.team-note{text-align:left;margin-top:10px}

/* ── Hotel search results — expandable per-hotel rows (no images) ── */
.hotel-table .col-exp{width:40px;text-align:right;padding-left:4px}
.hotel-frow .exp-arrow .material-symbols-outlined{font-size:20px;color:var(--text-dim);transition:transform .15s ease,color .15s ease}
.hotel-frow.open .exp-arrow .material-symbols-outlined{transform:rotate(180deg);color:var(--neon)}
.hotel-frow.open td{background:var(--neon-soft)}
.hotel-detail>td{padding:0;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.hotel-detail-inner{padding:12px 14px}
.hotel-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.hdh-title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}
.ta-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--neon);text-decoration:none}
.ta-link:hover{text-decoration:underline}
.ta-link .material-symbols-outlined{font-size:16px}
.hroom-list{display:flex;flex-direction:column;gap:7px}
.hroom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--bg-elev)}
.hroom-name{font-weight:600;color:var(--text);font-size:14px}
.hroom-meta{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.hroom-rate{text-align:right;white-space:nowrap}
.hroom-rate strong{font-size:14.5px;color:var(--text)}
.hroom-rate .hroom-out{color:var(--text-dim);text-decoration:line-through}
.hroom-per{font-size:12px;color:var(--text-dim);margin-left:2px}

/* Hotel results — Sort & filter bar (AJAX / no reload) */
.hotel-filters{margin:6px 0 4px}
.hf-toggle{display:inline-flex;align-items:center;gap:6px}
.hf-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--neon);color:#000;font-size:11px;font-weight:700}
.hf-panel{margin-top:10px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);display:flex;flex-direction:column;gap:10px}
.hf-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hf-l{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);min-width:96px}
.hf-input{height:36px;padding:0 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg);color:var(--text);font-size:14px}
.hf-input:focus{outline:none;border-color:var(--neon-line)}
.hf-price{width:110px}
.hf-chips{display:flex;gap:6px;flex-wrap:wrap}
.hf-chip,.hf-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}
.hf-chip{border:1px solid var(--border-strong);border-radius:999px;padding:5px 11px}
.hf-chip input,.hf-check input{accent-color:var(--neon);margin:0}
.hotel-count{font-size:13px;color:var(--text-dim);margin:8px 2px 2px}

/* Enriched expand panel address + actions */
.hd-addr{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text-dim);margin-bottom:8px}
.hd-addr .material-symbols-outlined{font-size:17px;color:var(--text-dim)}
.hd-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hd-open{padding:6px 12px;font-size:13px;height:auto}
.hd-open .material-symbols-outlined{font-size:16px}

/* Full hotel detail modal */
.hotel-detail-modal{display:flex;flex-direction:column;gap:16px;text-align:left}
.hd-links{display:flex;gap:10px;flex-wrap:wrap}
.hd-links .btn{padding:8px 14px;font-size:13px;height:auto}
.hd-links .material-symbols-outlined{font-size:17px}
.hd-sec-t{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.hd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.hd-fact{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--bg-elev)}
.hd-fk{font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim)}
.hd-fv{font-size:14px;color:var(--text);font-weight:600}
.hd-terms{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--text)}
.hd-note{font-size:12.5px;color:var(--text-dim);margin:0;line-height:1.5}

/* ── Corporate: policy banner, approvals, MIS, cost-centres ───────── */
.policy-banner{margin:0 0 12px}
.pol-ok{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  background:rgba(46,160,67,.12);color:#3fb950;font-weight:600;font-size:14px}
.pol-warn{padding:10px 12px;border-radius:10px;background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.3)}
.pol-warn-t{display:flex;align-items:center;gap:8px;color:#d29922;font-weight:700;margin-bottom:6px}
.viol-chip{display:inline-block;margin:3px 6px 0 0;padding:4px 9px;border-radius:999px;
  background:rgba(210,153,34,.14);color:#e3b341;font-size:12.5px;line-height:1.3}
.appr-card{margin-bottom:12px}
.appr-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.appr-route{font-weight:700;font-size:16px}
.appr-badge{font-size:11.5px;text-transform:capitalize;padding:3px 9px;border-radius:999px;font-weight:600}
.st-pending{background:rgba(210,153,34,.16);color:#e3b341}
.st-ok{background:rgba(46,160,67,.16);color:#3fb950}
.st-bad{background:rgba(248,81,73,.16);color:#f85149}
.appr-meta{color:var(--muted,#9a9a9a);font-size:13.5px;margin-top:4px}
.appr-amt{margin-top:8px;font-size:14px}
.appr-reason{margin-top:6px;color:var(--muted,#9a9a9a);font-size:13.5px}
.appr-viol{margin-top:8px}
.appr-ok{margin-top:8px;color:#3fb950;font-weight:600;font-size:13.5px}
.appr-by{margin-top:8px;color:var(--muted,#9a9a9a);font-size:12.5px}
.appr-note{margin-top:6px;font-size:13px}
.mis-bars{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mis-bar-row{display:grid;grid-template-columns:84px 1fr 96px;align-items:center;gap:10px}
.mis-bar-lbl{font-size:13px;color:var(--muted,#9a9a9a)}
.mis-bar-track{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.mis-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.mis-bar-val{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.cc-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.empty-note{color:var(--muted,#9a9a9a);font-size:14px;padding:14px 2px}
.dash-actions{margin-top:16px}
.stat-card.clickable{cursor:pointer}
.stat-card.clickable:hover{background:rgba(255,255,255,.04)}


/* ── Custom 24-hour time picker (timeField) ──────────────────────── */
.time-pop { padding: 6px; }
.time-cols { display: flex; gap: 6px; }
.time-col {
  max-height: 208px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 2px; width: 60px; scrollbar-width: thin;
}
.time-cell {
  appearance: none; border: 0; background: transparent; color: inherit;
  font: inherit; font-variant-numeric: tabular-nums; text-align: center;
  padding: 7px 0; border-radius: 8px; cursor: pointer;
}
.time-cell:hover { background: rgba(255,255,255,.07); }
.time-cell.sel { background: #22c55e; color: #07140c; font-weight: 600; }