/* Blings — travel desk UI.

   The palette is sampled from blings.com: a warm near-black #2F2C28, white, a
   muted white at 35%, and a warm brown-grey #5B504B. The brand carries no
   accent colour at all, and that restraint is the identity — so this interface
   does not invent one. Semantic colour appears only where the domain demands
   it (money owed cannot look like margin earned) and stays on the same warm
   axis rather than reaching for stock red and green.

   Two typefaces, split by job: a high-contrast serif carries the voice
   (titles, the wordmark, the client-facing offer), a grotesque carries the
   data. Every figure is tabular — this is a screen people read money off all
   day, and columns that do not line up are a defect, not a taste.

   Geometry follows the brand site: soft — pill-shaped actions, rounded
   surfaces, hairline rules. */

:root {
  --ink: #2F2C28;         /* blings near-black: chrome, headings, primary action */
  --ink-soft: #4A443E;
  --muted: #5B504B;       /* blings warm brown-grey: secondary text */
  --paper: #F5F3F0;       /* warm off-white: the page ground */
  --surface: #FFFFFF;
  --line: #E3DDD5;        /* hairline, on the warm axis */
  --line-soft: #EFEBE5;
  --wash: #F2EFEA;        /* quiet fill for headers and terms blocks */
  --on-dark: rgba(255, 255, 255, .92);
  --on-dark-dim: rgba(255, 255, 255, .48);
  --on-ink: #FFFFFF;      /* text on top of an --ink-filled control */

  /* Header bronze. Tokenised so the dark theme can deepen it instead of
     inheriting a light --ink into the gradient. */
  --chrome-1: #5A4635;
  --chrome-2: #3B3029;
  --chrome-3: #2F2C28;

  /* Domain semantics. Warm and desaturated so they read as information
     rather than as an accent palette the brand does not have. */
  --owed: #8C3A2E;        /* outstanding, overdue */
  --gain: #4A5B44;        /* margin, settled */
  --wait: #8A6A3B;        /* in progress, waiting on someone */

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(47, 44, 40, .05);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-primary: var(--ink);
  --bs-danger: var(--owed);
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--muted);
  --bs-border-radius: var(--radius);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-feature-settings: 'cv05' 1;
}

h1, h2, h3, h4, h5 { color: var(--ink); }
h1, .page-head h1, .offer h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
}
h2, h3 { font-weight: 600; letter-spacing: -.005em; }

a { text-decoration: none; color: var(--ink); }
a:hover { text-decoration: underline; }
.text-muted { color: var(--muted) !important; }

/* Money and counts are read in columns, so they are always tabular. */
.num, .tile .value, .table td.money, .table th.money, .offer td.money,
.leg-bar .figure, .worklist-row .amount { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------- header ---------------- */

.vy-header {
  /* The site's dark is warm bronze light, not flat near-black. */
  background: linear-gradient(120deg, var(--chrome-1) 0%, var(--chrome-2) 45%, var(--chrome-3) 100%);
  color: var(--on-dark);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.vy-brand { display: flex; align-items: baseline; gap: 11px; color: #fff; }
.vy-brand:hover { text-decoration: none; }
/* Only the ornament is taken from the supplied lockup: at header size its
   stacked wordmark shrinks to an unreadable smear, so the word is set in the
   display face beside it instead. The ornament is inlined as SVG and
   takes its colour from `currentColor`. Not class="mark": Bootstrap styles
   both the <mark> element and the .mark class as a yellow text highlight,
   which put a cream box behind the logo. */
.vy-brand .brand-mark {
  display: block;
  height: 28px;
  aspect-ratio: 30 / 31;
  width: auto;
  align-self: center;
  color: #fff;
}
.vy-brand { gap: 13px; align-items: center; }
.vy-brand .stack { display: flex; flex-direction: column; gap: 3px; }
/* The site sets the wordmark as widely letter-spaced caps under the ornament. */
.vy-brand .word {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .34em;
  line-height: 1;
  color: #fff;
}
.vy-brand .kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--on-dark-dim);
}

.vy-nav { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: wrap; }
.vy-nav a {
  color: var(--on-dark-dim);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 8px 11px 7px;
  border-bottom: 1px solid transparent;
}
.vy-nav a:hover { color: #fff; text-decoration: none; }
.vy-nav a.active { color: #fff; border-bottom-color: #fff; }

.vy-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--on-dark-dim); white-space: nowrap; }
.vy-user a { color: var(--on-dark); }
.vy-user .role {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.vy-user .btn-link { color: var(--on-dark-dim); font-size: 13px; }
.vy-user .btn-link:hover { color: #fff; }

.vy-smile-bar { height: 1px; background: rgba(255, 255, 255, .14); }

.container-page { max-width: 1240px; margin: 0 auto; padding: 30px 24px 72px; }

/* ---------------- surfaces ---------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* The itinerary carries seven numeric columns and outgrows a laptop before
     it outgrows the layout: scroll it inside the card rather than letting it
     spill past the edge, where the margin column silently disappears. */
  overflow-x: auto;
}
.card + .card { margin-top: 18px; }
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.card-body { padding: 18px; }
.card-body.tight { padding: 12px 18px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 34px; margin: 0; line-height: 1.1; }
.page-head .sub, .page-head .lede { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* ---------------- stat tiles ---------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin-bottom: 22px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile { background: var(--surface); padding: 16px 18px; }
.tile .label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.tile .value { font-size: 26px; font-weight: 600; color: var(--ink); margin-top: 8px; letter-spacing: -.02em; }
.tile .value small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tile .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tile.accent { background: linear-gradient(135deg, #4E3D2F 0%, var(--chrome-3) 80%); }
.tile.accent .label { color: var(--on-dark-dim); }
.tile.accent .value { color: #fff; }
.tile.accent .hint { color: var(--on-dark-dim); }
.tile.warn .value { color: var(--owed); }

/* ---------------- the two legs of the money ----------------
   The one thing this system exists for: every deal owes in both directions and
   cannot close until both settle. One shared axis, client above, suppliers
   below, so the gap between them is visible rather than inferred. */

.legs { display: grid; gap: 18px; }
.leg-bar .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.leg-bar .label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.leg-bar .figure { font-size: 13px; color: var(--muted); }
.leg-bar .figure strong { color: var(--ink); font-weight: 600; }
.leg-bar .track { height: 10px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: flex; }
.leg-bar .done { background: var(--ink); }
.leg-bar .open { background: repeating-linear-gradient(135deg, var(--line) 0 4px, transparent 4px 8px); }
.leg-bar.out .done { background: var(--muted); }
.leg-bar .note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.leg-bar .note .owed { color: var(--owed); font-weight: 600; }

/* ---------------- tables ---------------- */

.table { margin: 0; --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: 11px 14px; }
.table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
  white-space: nowrap;
}
.table tbody tr { border-color: var(--line-soft); }
.table-hover tbody tr:hover { background: var(--wash); }
.table .ref { font-weight: 600; color: var(--ink); white-space: nowrap; }
.table .strong { font-weight: 600; }
.table-services td:first-child, .table-services th:first-child { min-width: 300px; width: 34%; }
.table-services td:last-child { min-width: 200px; }
.table td.money, .table th.money, .table td.num, .table th.num { text-align: right; white-space: nowrap; }

/* ---------------- badges ---------------- */

.pill {
  display: inline-block;
  padding: 3px 10px 2px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.pill-new       { border-color: var(--ink); color: var(--ink); }
.pill-pricing   { border-color: #D8C6A8; color: var(--wait); }
.pill-quoted    { border-color: #C9BFB4; color: var(--ink-soft); }
.pill-accepted  { border-color: #B9C6B4; color: var(--gain); }
.pill-booked    { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill-completed { background: var(--wash); }
.pill-declined  { border-color: #D9B3AB; color: var(--owed); }
.pill-cancelled { color: var(--muted); }

.badge-test { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--wait); border: 1px solid #D8C6A8; border-radius: var(--radius-sm); padding: 2px 8px; }

.chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--wash); color: var(--ink); font-size: 12px; font-weight: 500; }
.chip-muted { color: var(--muted); }

.margin-pos { color: var(--gain); font-weight: 600; }
.margin-neg { color: var(--owed); font-weight: 600; }
.due { color: var(--owed); font-weight: 600; }
.settled { color: var(--gain); font-weight: 600; }

/* ---------------- forms & buttons ---------------- */

.form-label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; }
.form-label .muted { font-weight: 400; letter-spacing: .06em; }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  font-size: 14px;
  padding: 7px 10px;
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(47, 44, 40, .10);
}
.form-control-sm, .form-select-sm { font-size: 13px; padding: 5px 8px; }

.btn { border-radius: 999px; font-weight: 500; font-size: 13px; padding: 8px 18px; letter-spacing: .04em; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-primary:hover, .btn-primary:focus { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-danger { background: var(--owed); border-color: var(--owed); }
.btn-danger:hover { background: #74301F; border-color: #74301F; }
.btn-outline, .btn-outline-primary { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.btn-outline:hover, .btn-outline-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); text-decoration: none; }
.btn-outline-secondary { color: var(--muted); border-color: var(--line); }
.btn-outline-secondary:hover { background: var(--wash); color: var(--ink); border-color: var(--line); }
.btn-success { background: var(--gain); border-color: var(--gain); }
.btn-link { text-decoration: none; color: var(--ink); }

.alert { border-radius: var(--radius); border: 1px solid var(--line); font-size: 14px; background: var(--surface); color: var(--ink); }
.alert-success { border-left: 3px solid var(--gain); }
.alert-danger { border-left: 3px solid var(--owed); color: var(--owed); }
.alert-warning { border-left: 3px solid var(--wait); }

.hint { font-size: 12px; color: var(--muted); margin: 10px 18px 14px; }

/* ---------------- flight search ---------------- */

.flight-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 18px; align-items: end; }
.flight-form-go { display: flex; align-items: end; }
.leg { white-space: nowrap; }
.flight-no { font-weight: 600; letter-spacing: .03em; }

/* ---------------- worklist ---------------- */

.worklist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.worklist-row:last-child { border-bottom: none; }
.worklist-row:hover { background: var(--wash); }
.worklist-row .marker { width: 2px; align-self: stretch; background: var(--line); }
.worklist-row.level-danger .marker { background: var(--owed); }
.worklist-row.level-warning .marker { background: var(--wait); }
.worklist-row.level-info .marker { background: var(--muted); }
.worklist-row.level-success .marker { background: var(--gain); }
.worklist-row .why { color: var(--ink); }
.worklist-row .meta { color: var(--muted); font-size: 13px; }

/* ---------------- timeline ---------------- */

.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.timeline .entry { position: relative; padding: 0 0 14px 0; }
.timeline .entry::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--muted);
}
.timeline .entry.key::before { background: var(--ink); border-color: var(--ink); }
.timeline .when { font-size: 12px; color: var(--muted); }
.timeline .what { font-size: 14px; }

/* ---------------- itinerary lines ---------------- */

.svc { display: flex; align-items: flex-start; gap: 12px; }
.svc .icon { font-size: 17px; line-height: 1.2; }
.svc .desc { font-weight: 600; }
.svc .meta { font-size: 12.5px; color: var(--muted); }

.empty { padding: 40px 18px; text-align: center; color: var(--muted); }
.empty .big { font-size: 28px; margin-bottom: 10px; }

/* ---------------- the printable offer ----------------
   Client-facing and printed, so it stays on paper white and leans on the serif
   harder than the back office does. */

.offer { background: #fff; max-width: 830px; margin: 0 auto; padding: 52px 56px; border: 1px solid var(--line); border-radius: var(--radius); }
.offer-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--ink); padding-bottom: 20px; margin-bottom: 30px; }
.offer-head .agency { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); }
.offer-head .meta { text-align: right; font-size: 13px; color: var(--muted); }
.offer h1 { font-size: 30px; margin-bottom: 6px; }
.offer .trip-meta { color: var(--muted); margin-bottom: 28px; }
.offer table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.offer th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 8px 0; }
.offer td { padding: 14px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.offer td.money { text-align: right; white-space: nowrap; }
.offer .total-row td { border-bottom: none; font-size: 20px; font-weight: 600; color: var(--ink); padding-top: 18px; border-top: 1px solid var(--ink); }
.offer .terms { background: var(--wash); border-radius: var(--radius); padding: 16px 18px; font-size: 13.5px; white-space: pre-wrap; }
.offer .foot { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); white-space: pre-wrap; }

@media print {
  :root, :root[data-theme="dark"] {
    --ink: #2F2C28; --ink-soft: #4A443E; --muted: #5B504B;
    --paper: #FFFFFF; --surface: #FFFFFF; --line: #E3DDD5; --line-soft: #EFEBE5;
    --wash: #F2EFEA; --on-ink: #FFFFFF;
    --owed: #8C3A2E; --gain: #4A5B44; --wait: #8A6A3B;
  }
  .no-print { display: none !important; }
  /* The app chrome must never land on a client-facing PDF. Hamid's first
     quotation went out with the nav bar and "Sign out" printed across it. */
  .vy-header, .vy-smile-bar, .alert { display: none !important; }
  body { background: #fff; }
  .offer { box-shadow: none; border: none; padding: 0; max-width: none; }
  .container-page { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .vy-header { height: auto; padding: 14px 18px; flex-wrap: wrap; gap: 12px; }
  .container-page { padding: 20px 16px 56px; }
  .page-head h1 { font-size: 27px; }
}

/* Copilot thread */
.copilot-thread { display: flex; flex-direction: column; gap: .5rem; max-height: 32rem; overflow-y: auto; }
.copilot-msg { padding: .5rem .75rem; border-radius: 10px; background: var(--wash); }
.copilot-msg.copilot-question { background: transparent; border: 1px solid var(--line); }
.copilot-msg.copilot-refusal, .copilot-msg.copilot-error { background: var(--wash); border: 1px solid var(--owed); }
.copilot-msg .when { font-size: .75rem; color: var(--muted); margin-bottom: .15rem; }

/* Wide tables scroll inside their card instead of clipping the action
   buttons off the edge — on a 13" laptop the Money table's Edit/✕ were
   unreachable (caught in the live review pass). */
.table-scroll { overflow-x: auto; }
.table-scroll > .table { min-width: 640px; }

/* ---------------- dark theme ----------------
   Same warm axis, inverted: bronze chrome deepens, paper goes near-black.
   Tokens only — every component reads through them. The explicit
   [data-theme] stamps (set by theme.js from localStorage) win over the OS
   preference in both directions. */
:root[data-theme="dark"] {
  --ink: #E9E5DE; --ink-soft: #CFC8BF; --muted: #A39A90;
  --paper: #171512; --surface: #201D19; --line: #37322B; --line-soft: #2A2622;
  --wash: #2A2620; --on-ink: #171512;
  --chrome-1: #3E3226; --chrome-2: #2A241E; --chrome-3: #1D1A17;
  --owed: #D98577; --gain: #9DB48F; --wait: #CBA671;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E9E5DE; --ink-soft: #CFC8BF; --muted: #A39A90;
    --paper: #171512; --surface: #201D19; --line: #37322B; --line-soft: #2A2622;
    --wash: #2A2620; --on-ink: #171512;
    --chrome-1: #3E3226; --chrome-2: #2A241E; --chrome-3: #1D1A17;
    --owed: #D98577; --gain: #9DB48F; --wait: #CBA671;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

.theme-toggle {
  background: none; border: 1px solid rgba(255, 255, 255, .28); color: var(--on-dark-dim);
  border-radius: 999px; width: 26px; height: 26px; line-height: 1; font-size: 13px;
  cursor: pointer; padding: 0;
}
.theme-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ---------------- command palette (global) ----------------
   The kbar markup lives in base.html on every screen; its styles briefly
   lived only in the Cockpit's style block, which left a bare input sitting
   at the bottom of short classic pages. */
.kbar { position: fixed; inset: 0; background: rgba(20,24,31,.45); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 1000; }
.kbar.open { display: flex; }
.kbar-box { width: min(560px, 92vw); background: #fff; border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,.28); overflow: hidden; }
.kbar-box input { width: 100%; border: 0; outline: none; padding: 14px 16px; font-size: 15px; border-bottom: 1px solid #E7E5DF; background: #fff; color: #1C222B; }
.kbar-list { max-height: 46vh; overflow-y: auto; }
.kbar-item { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; font-size: 13.5px; color: #1C222B; text-decoration: none; }
.kbar-item .meta { color: #8A9096; font-size: 11.5px; margin-left: auto; }
.kbar-item.sel, .kbar-item:hover { background: #F2F1EC; }
.kbar-empty { padding: 14px 16px; color: #8A9096; font-size: 13px; }
.kbar-hint { padding: 7px 14px; font-size: 10.5px; color: #B9BEC5; border-top: 1px solid #F0EEE8; display: flex; gap: 12px; }