/* =====================================================================
   YK Travel APP — "VIP Travel Services"
   Elegant blush-and-raspberry theme. Soft, feminine, and professional.
   ===================================================================== */
:root {
  --bg: #fdf5f8;
  --bg-2: #f7e9f0;
  --card: #ffffff;
  --ink: #3b2a33;
  --muted: #9c8791;
  --line: #f1dde7;
  --brand: #b8477e;         /* raspberry rose */
  --brand-2: #d76aa0;       /* lighter rose for gradients */
  --brand-deep: #8f3462;    /* hover / pressed */
  --brand-ink: #ffffff;
  --accent: #c79a54;        /* soft gold */
  --ok-bg: #e8f6ee;  --ok-fg: #1c8f59;
  --warn-bg: #fbeedd; --warn-fg: #a9741c;
  --muted-bg: #f3e9ef; --muted-fg: #8a7681;
  --err-bg: #fbe2ec;  --err-fg: #c0326b;
  --shadow: 0 6px 20px rgba(157, 60, 110, 0.10);
  --radius: 14px;
  --display: "Georgia", "Iowan Old Style", "Palatino Linotype", serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  background: linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-2) 100%);
  color: var(--brand-ink);
  padding: 0.7rem 1.5rem;
  box-shadow: var(--shadow);
}
.topbar .brand { color: #fff; display: flex; flex-direction: column; line-height: 1.15; }
.topbar .brand:hover { text-decoration: none; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; }
.brand-motto { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ffe3ef; opacity: 0.9; }
.topnav { display: flex; align-items: center; gap: 1.2rem; flex: 1; }
.topnav a { color: #ffe0ee; font-size: 0.95rem; }
.topnav a:hover { color: #fff; }
.topnav .spacer { flex: 1; }
.topnav .who { color: #f4cade; font-size: 0.88rem; }
/* In the topbar these sit on the raspberry gradient; everywhere else a
   .btn-link is a link-looking button and must drop the native button chrome
   (otherwise a <button class="btn-link"> renders as a grey box with pale,
   unreadable text — as the flexible-date "Save as option" buttons did). */
.topbar .btn-link { color: #ffe0ee; }
.btn-link {
  color: var(--brand); background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

.container { max-width: 1040px; margin: 1.75rem auto; padding: 0 1.25rem; }
.footer { text-align: center; color: var(--muted); font-size: 0.82rem; padding: 2.5rem 1rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
h1 { font-family: var(--display); font-size: 1.65rem; margin: 0 0 0.75rem; color: var(--brand-deep); font-weight: 700; }

/* ---- Cards ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.3rem;
  box-shadow: var(--shadow);
}
.form label { display: block; margin-bottom: 0.85rem; font-weight: 600; font-size: 0.9rem; }
.form input, .form select, .form textarea {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-weight: 400; background: #fffdfe;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(215, 106, 160, 0.18);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block; cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: var(--brand-deep); padding: 0.5rem 1rem;
  border-radius: 999px; font: inherit; font-weight: 600; transition: all 0.15s ease;
}
.btn:hover { background: #fdeef5; text-decoration: none; }
.btn.primary {
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(184, 71, 126, 0.28);
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted-fg); }
.btn.ghost:hover { background: #fdeef5; }

.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1.25rem; }
.filters label { font-size: 0.85rem; font-weight: 600; }
.filters input { margin-top: 0.25rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; }

/* ---- Tables ---- */
.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.grid th, .grid td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); }
.grid th { background: #fbeef4; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-deep); font-weight: 700; }
.grid tr:last-child td { border-bottom: none; }
.grid.selectable tbody tr:hover { background: #fdf3f8; }
.grid tr.is-selected td { background: #fbe8f1; }

/* ---- Pills ---- */
.pill { display: inline-block; padding: 0.12rem 0.65rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.muted { background: var(--muted-bg); color: var(--muted-fg); }

.alert { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; }
.alert.error { background: var(--err-bg); color: var(--err-fg); }
.empty { color: var(--muted); padding: 2rem 0; }

/* ---- Auth / login ---- */
.auth-wrap { max-width: 400px; margin: 3.5rem auto; }
.auth-brand { text-align: center; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.auth-name { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--brand-deep); }
.auth-motto { font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.auth-wrap h1 { text-align: center; font-size: 1.2rem; color: var(--ink); }
.auth-wrap .card.form { margin-top: 1rem; }
.auth-wrap .btn { width: 100%; }

/* ---- Bulk select / delete bar ---- */
.bulk-bar { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; }
.bulk-count { color: var(--muted); font-size: 0.85rem; }
.col-check { width: 2.4rem; text-align: center; }
.col-check input { width: auto; cursor: pointer; accent-color: var(--brand); transform: scale(1.15); }
.open-link { font-weight: 600; }

/* Danger button (bulk delete) */
.btn.danger-btn {
  color: var(--err-fg); border-color: #f3c3d6; background: #fff;
}
.btn.danger-btn:hover:not(:disabled) { background: var(--err-fg); color: #fff; border-color: var(--err-fg); }
.btn.danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Admin forms ---- */
h1 .sub { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin: -0.25rem 0 1rem; }
.hint code { background: #f7e6ef; padding: 0.05rem 0.35rem; border-radius: 5px; color: var(--brand-deep); }
.form.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form.grid2 .full { grid-column: 1 / -1; }
.form.grid2 label.checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.form.grid2 label.checkbox input { width: auto; margin: 0; }
.form-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.grid td.actions { display: flex; gap: 0.75rem; align-items: center; white-space: nowrap; }
.grid td.actions form { margin: 0; }
.btn-link.danger { color: var(--err-fg); background: none; border: none; cursor: pointer; font: inherit; padding: 0; }
.btn-link.danger:hover { text-decoration: underline; }
.alert.error ul { margin: 0; padding-left: 1.1rem; }
.alert.flash.success { background: var(--ok-bg); color: var(--ok-fg); }
.alert.flash.info { background: #f7e9f2; color: var(--brand-deep); }
.alert.flash.error { background: var(--err-bg); color: var(--err-fg); }
@media (max-width: 640px) { .form.grid2 { grid-template-columns: 1fr; } }

/* ---- Search form / records ---- */
.block { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; background: #fff; box-shadow: var(--shadow); }
.block legend { font-family: var(--display); font-weight: 700; padding: 0 0.4rem; color: var(--brand-deep); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.radio-row { display: flex; gap: 1.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.radio input { width: auto; margin: 0; accent-color: var(--brand); }
.pax-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.6rem; margin-bottom: 0.6rem; align-items: center; }
.leg-row { margin-bottom: 0.75rem; background: #fdf6fa; }
.head-actions { display: flex; gap: 0.6rem; align-items: center; }
.head-actions form { margin: 0; }
.danger-btn { color: var(--err-fg); }

.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; }
.summary .k { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.summary .v { font-weight: 600; }
@media (max-width: 640px) { .summary { grid-template-columns: 1fr 1fr; } }

h2 { font-family: var(--display); font-size: 1.3rem; margin: 1.85rem 0 0.75rem; color: var(--brand-deep); }
h2 .sub { font-size: 0.85rem; font-weight: 400; color: var(--muted); font-family: system-ui, sans-serif; }
.warn-text { color: var(--warn-fg); }

.options { display: flex; flex-direction: column; gap: 1rem; }
.option-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.option-head .rank { font-weight: 700; color: var(--brand); font-family: var(--display); }
.option-head .price { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.option-head .src { color: var(--muted); font-size: 0.82rem; }
.option-head .spacer { flex: 1; }
.option-head form { margin: 0; }
.option-meta { margin: 0.5rem 0; color: var(--ink); font-size: 0.9rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.option-meta .note { color: var(--muted); font-style: italic; }
.legs { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.88rem; }
.legs th, .legs td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); }
.legs th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; }
.leg-badge.train { color: var(--accent); }
.leg-badge.flight { color: var(--brand); }
.gateway-panel { margin-bottom: 1.5rem; background: #fbf3e9; border-color: #f0e2cf; }
h2.tight { margin-top: 0; }
.grid.compact th, .grid.compact td { padding: 0.45rem 0.65rem; font-size: 0.88rem; }
.muted-txt { color: var(--muted); font-style: italic; }
.doc-actions { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.doc-actions form { margin: 0; }
.dd-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; }
.note-label { font-weight: 600; font-size: 0.85rem; }
.note-label textarea { width: 100%; margin-top: 0.3rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.doc-list { margin-top: 1rem; }

/* ---- Benchmark panel ---- */
.benchmark-panel { margin: 1.5rem 0 0.5rem; background: linear-gradient(120deg, #fff 0%, #fdeef5 100%); border-color: #f0cfe0; }
.bm-main { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bm-figure { display: flex; flex-direction: column; gap: 0.15rem; }
.bm-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.bm-amount { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--brand-deep); }
.bm-cap { display: flex; align-items: end; gap: 0.6rem; margin: 0; }
.bm-cap label { font-size: 0.78rem; font-weight: 600; display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted-fg); }
.bm-cap input { width: 5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }

/* ---- Filter bar ---- */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip {
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--brand-deep);
  padding: 0.35rem 0.85rem; border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 600;
  transition: all 0.15s ease;
}
.chip:hover { background: #fdeef5; }
.chip.active { background: linear-gradient(100deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; border-color: transparent; }
.filter-bar .sort { font-size: 0.82rem; font-weight: 600; color: var(--muted-fg); display: flex; align-items: center; gap: 0.4rem; }
.filter-bar .sort select { padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.filter-empty { padding: 1rem 0; }

/* ---- Option deltas, badges, metrics ---- */
.delta { font-size: 0.8rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; }
.delta.over { background: var(--err-bg); color: var(--err-fg); }
.delta.within { background: var(--ok-bg); color: var(--ok-fg); }
.badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.badge { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 6px; letter-spacing: 0.02em; }
.badge.bench { background: #f6ecc9; color: #8a6d17; }
.badge.cheap { background: var(--ok-bg); color: var(--ok-fg); }
.badge.fast { background: #e6eef9; color: #2c5b93; }
.badge.stops { background: #efe7f5; color: #6a4a8a; }
.badge.overcap { background: var(--warn-bg); color: var(--warn-fg); }
.option-metrics { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0; font-size: 0.85rem; color: var(--muted-fg); }
.option-metrics .src { color: var(--muted); font-size: 0.8rem; }
.option[hidden] { display: none; }

/* =====================================================================
   Live map (/map) — traveller positions derived from their itinerary.
   ===================================================================== */
main.container:has(.map-page) { max-width: 1360px; }

.map-lead { color: var(--muted-fg); margin: -0.4rem 0 1rem; max-width: 70ch; }
.map-foot { color: var(--muted); font-size: 0.82rem; margin-top: 1.2rem; max-width: 85ch; }
.map-note { margin: 0.5rem 0 1rem; }

.live-meta { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; color: var(--muted-fg); }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 0 rgba(184, 71, 126, 0.55); animation: livePulse 2.2s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 71, 126, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(184, 71, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 71, 126, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.map-filters { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.map-filters label { font-size: 0.8rem; font-weight: 600; color: var(--muted-fg); display: flex; flex-direction: column; gap: 0.25rem; }
.map-filters select { padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.map-filters label.checkbox { flex-direction: row; align-items: center; gap: 0.45rem; }

/* ---- Status strip ---- */
.status-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.status-strip .stat {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.85rem; font-size: 0.83rem; color: var(--muted-fg); box-shadow: var(--shadow);
}
.status-strip .stat b { color: var(--brand-deep); font-size: 0.95rem; margin-right: 0.15rem; }
.status-strip .stat.in_transit b { color: var(--brand); }
.status-strip .stat.layover b { color: var(--warn-fg); }
.status-strip .stat.arrived b { color: var(--ok-fg); }
.status-strip .stat.total { margin-left: auto; }

/* ---- Map + list split ---- */
.map-split { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .map-split { grid-template-columns: 1fr; } }

.map-panel { padding: 0.55rem 0.55rem 0.35rem; }
#liveMap { height: 620px; border-radius: 10px; z-index: 0; }
@media (max-width: 900px) { #liveMap { height: 420px; } }

.map-legend {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.5rem 0.35rem 0.15rem; font-size: 0.78rem; color: var(--muted-fg);
}
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.3rem; }
.map-legend button { margin-left: auto; color: var(--brand); background: none; border: 0; font: inherit; cursor: pointer; }
.dot.in_transit, .pill.status.in_transit { background: var(--brand); }
.dot.layover,    .pill.status.layover    { background: var(--accent); }
.dot.awaiting,   .pill.status.awaiting   { background: #8ea9c9; }
.dot.arrived,    .pill.status.arrived    { background: var(--ok-fg); }
.dot.unknown,    .pill.status.unknown    { background: var(--muted); }
.pill.status { color: #fff; }

/* ---- Map pins ---- */
.pin {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; line-height: 1; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(90, 30, 60, 0.35);
}
.pin.in_transit { background: var(--brand); }
.pin.layover    { background: var(--accent); }
.pin.awaiting   { background: #8ea9c9; }
.pin.arrived    { background: var(--ok-fg); }
.pin.unknown    { background: var(--muted); }
.pin-glyph { display: block; transform-origin: 50% 50%; }
.pin-count {
  position: absolute; top: -6px; right: -8px; background: #fff; color: var(--brand-deep);
  border-radius: 999px; font-size: 10px; font-weight: 700; padding: 0 5px; border: 1px solid var(--line);
}
.leaflet-marker-icon .pin { position: relative; }

/* ---- Popup ---- */
.map-popup h4 { font-family: var(--display); color: var(--brand-deep); margin: 0.4rem 0 0.2rem; font-size: 1.05rem; }
.map-popup .where { font-weight: 600; margin: 0 0 0.2rem; }
.map-popup .detail, .map-popup .next, .map-popup .opt { margin: 0.15rem 0; font-size: 0.82rem; color: var(--muted-fg); }
.map-popup .pax-list, .map-popup .leg-list { margin: 0.5rem 0; padding-left: 1rem; font-size: 0.82rem; }
.map-popup .leg-list { list-style: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 0.4rem; }
.map-popup .leg { display: flex; flex-direction: column; padding: 0.25rem 0; border-bottom: 1px dashed var(--line); }
.map-popup .leg:last-child { border-bottom: 0; }
.map-popup .leg.current .leg-route { color: var(--brand); font-weight: 700; }
.map-popup .leg.done { opacity: 0.55; }
.map-popup .leg-when, .map-popup .leg-svc { color: var(--muted); font-size: 0.76rem; }

/* ---- Trip cards ---- */
.map-list { max-height: 660px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; padding-right: 0.2rem; }
@media (max-width: 900px) { .map-list { max-height: none; } }
.trip-card {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: 12px; padding: 0.75rem 0.9rem; box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.trip-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(157, 60, 110, 0.16); }
.trip-card.in_transit { border-left-color: var(--brand); }
.trip-card.layover    { border-left-color: var(--accent); }
.trip-card.awaiting   { border-left-color: #8ea9c9; }
.trip-card.arrived    { border-left-color: var(--ok-fg); }
.trip-card header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.trip-card .pax { font-size: 0.78rem; color: var(--muted-fg); font-weight: 600; }
.trip-card h3 { font-family: var(--display); font-size: 1.02rem; color: var(--brand-deep); margin: 0.4rem 0 0.15rem; }
.trip-card .where { font-weight: 600; font-size: 0.86rem; margin: 0 0 0.2rem; }
.trip-card .detail, .trip-card .next, .trip-card .names { font-size: 0.8rem; color: var(--muted-fg); margin: 0.15rem 0; }
.trip-card .next { color: var(--brand); font-weight: 600; }
.trip-card .names { color: var(--muted); }
.trip-card footer { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.45rem; font-size: 0.76rem; color: var(--muted); }
.trip-card footer .btn-link { color: var(--brand); }

.map-unlocated { margin-top: 1.2rem; }
.map-unlocated h3 { font-family: var(--display); color: var(--brand-deep); margin: 0 0 0.4rem; font-size: 1.05rem; }
.map-unlocated ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; }
.map-unlocated code { background: #fbeef4; padding: 0.05rem 0.3rem; border-radius: 5px; font-size: 0.82em; }

/* ---- Record page route map ---- */
.route-map-card { padding: 0.55rem 0.55rem 0.7rem; margin-bottom: 1.4rem; }
#routeMap { height: 420px; border-radius: 10px; z-index: 0; }
@media (max-width: 640px) { #routeMap { height: 300px; } }
.route-legend { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 0.35rem 0.1rem; }
.route-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--brand-deep);
  padding: 0.3rem 0.8rem; border-radius: 999px; font: inherit; font-size: 0.82rem; font-weight: 600;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.route-chip i { width: 12px; height: 4px; border-radius: 2px; background: var(--route-colour, var(--brand)); }
.route-chip:hover { background: #fdeef5; }
.route-chip.is-off { opacity: 0.42; }
.route-legend .btn-link { margin-left: auto; background: none; border: 0; font: inherit; cursor: pointer; color: var(--brand); }
.route-map-card .hint { padding: 0 0.35rem; margin: 0.35rem 0 0; }
.filters .fare-count { margin-left: auto; font-size: 0.82rem; color: var(--muted-fg); font-weight: 600; }

/* ---- Rail fare picker (manual option form) ---- */
.fare-picker { margin: 1.2rem 0 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fffdfe; }
.fare-picker > summary {
  cursor: pointer; padding: 0.75rem 1rem; font-weight: 700; color: var(--brand-deep);
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; list-style: none;
}
.fare-picker > summary::-webkit-details-marker { display: none; }
.fare-picker > summary::before { content: '▸'; color: var(--brand-2); }
.fare-picker[open] > summary::before { content: '▾'; }
.fare-picker > summary .sub { font-weight: 400; font-size: 0.82rem; color: var(--muted-fg); }
.fare-picker-body { padding: 0 1rem 1rem; }
.fare-picker-body .hint { margin: 0.2rem 0 0.6rem; }
.fare-search { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted-fg); margin-bottom: 0.5rem; }
.fare-search input { display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.fare-list { max-height: 340px; overflow-y: auto; border-radius: 10px; }
.fare-list .grid { box-shadow: none; }
.fare-row.is-relevant td:first-child { border-left: 3px solid var(--brand-2); font-weight: 600; }
.fare-row[hidden] { display: none; }
.fare-actions { white-space: nowrap; display: flex; gap: 0.35rem; }
.fare-actions .btn { padding: 0.2rem 0.55rem; font-size: 0.78rem; }
.fare-feedback { background: var(--ok-bg); color: var(--ok-fg); border-radius: 9px; padding: 0.5rem 0.75rem; font-size: 0.85rem; margin: 0 0 0.6rem; }
.leg-row.just-filled { box-shadow: 0 0 0 3px rgba(215, 106, 160, 0.35); transition: box-shadow 0.3s ease; }

/* ---- Flight picker (airports, past flights, aviationstack lookup) ---- */
.pick-target { font-size: 0.84rem; color: var(--muted-fg); margin: 0.2rem 0 0.8rem; }
.pick-target strong { color: var(--brand); }
.pick-section { border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.8rem; }
.pick-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.pick-section h4 { font-family: var(--display); color: var(--brand-deep); margin: 0 0 0.5rem; font-size: 1rem; }
.pick-section h4 .sub { font-family: inherit; font-weight: 400; font-size: 0.78rem; color: var(--muted-fg); margin-left: 0.4rem; }
.airport-results { max-height: 260px; overflow-y: auto; }
.airport-hit {
  display: grid; grid-template-columns: 3.2rem 1fr auto auto; gap: 0.6rem; align-items: center;
  padding: 0.4rem 0.5rem; border-bottom: 1px dashed var(--line); font-size: 0.86rem;
}
.airport-hit:last-child { border-bottom: 0; }
.airport-hit .code { font-weight: 700; color: var(--brand-deep); letter-spacing: 0.03em; }
.airport-hit .meta { color: var(--muted); font-size: 0.78rem; }
.airport-hit .acts { display: flex; gap: 0.3rem; }
.airport-hit .btn { padding: 0.15rem 0.55rem; font-size: 0.76rem; }
@media (max-width: 640px) { .airport-hit { grid-template-columns: 3rem 1fr; } .airport-hit .meta { grid-column: 2; } }
.lookup-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lookup-row input { width: 9rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; text-transform: uppercase; }
.lookup-row .budget { font-size: 0.8rem; color: var(--muted-fg); font-weight: 600; }
.fare-feedback.is-error { background: var(--err-bg); color: var(--err-fg); }

/* Shown only when the tile server refuses us — see assets/js/map-tiles.js */
.tile-warning {
  margin: 0.5rem 0.35rem 0; padding: 0.55rem 0.8rem; border-radius: 9px;
  background: var(--warn-bg); color: var(--warn-fg); font-size: 0.82rem; line-height: 1.5;
}
.tile-warning code { background: rgba(255,255,255,0.6); padding: 0.05rem 0.3rem; border-radius: 5px; }

/* ---- Flexible dates panel ---- */
.flex-panel { margin-bottom: 1.4rem; }
.flex-head { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.flex-head form { margin: 0; }
.flex-meta { font-size: 0.8rem; color: var(--muted-fg); }
.flex-axis { margin-top: 1rem; }
.flex-axis h4 { font-family: var(--display); color: var(--brand-deep); font-size: 0.95rem; margin: 0 0 0.45rem; }
.flex-strip { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.flex-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 5.6rem;
  border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.5rem; background: #fff;
}
.flex-cell .day { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); }
.flex-cell .price { font-weight: 700; color: var(--brand-deep); font-size: 0.95rem; }
.flex-cell .delta { font-size: 0.72rem; font-weight: 700; }
.flex-cell .delta.down { color: var(--ok-fg); }
.flex-cell .delta.up { color: var(--err-fg); }
.flex-cell .delta.base { color: var(--muted); font-weight: 600; }
.flex-cell.is-base { border-color: var(--brand-2); box-shadow: 0 0 0 2px rgba(215, 106, 160, 0.15); }
.flex-cell.is-best { background: var(--ok-bg); border-color: var(--ok-fg); }
.flex-cell.is-best .price { color: var(--ok-fg); }
.flex-cell.is-empty .price { color: var(--muted); font-weight: 500; }
.flex-table { margin-top: 1rem; }
.flex-table tr.is-base td { background: #fdf3f8; }
.flex-table form { margin: 0; }
.flex-table .delta.down { color: var(--ok-fg); font-weight: 700; }
.flex-table .delta.up { color: var(--err-fg); font-weight: 700; }
.flex-panel.is-suggested { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(215, 106, 160, 0.18); }
.flex-suggest { background: var(--warn-bg); color: var(--warn-fg); border-radius: 9px; padding: 0.6rem 0.85rem; margin: 0 0 0.9rem; font-size: 0.88rem; }
.flex-options { display: flex; align-items: end; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.flex-options label { font-size: 0.8rem; font-weight: 600; color: var(--muted-fg); display: flex; flex-direction: column; gap: 0.25rem; }
.flex-options label.checkbox { flex-direction: row; align-items: center; gap: 0.4rem; }
.flex-options select { padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.flex-cost { margin: 0 0 0.4rem; font-size: 0.82rem; }
.flex-panel .flex-meta { display: block; margin: 0.2rem 0 0.6rem; }

/* ---- Itinerary "travel information" fill-in block ---- */
.itinerary-form { display: flex; flex-direction: column; gap: 0.7rem; align-items: start; }
.doc-fill { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fffdfe; }
.doc-fill > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 700; color: var(--brand-deep); font-size: 0.9rem; list-style: none; }
.doc-fill > summary::-webkit-details-marker { display: none; }
.doc-fill > summary::before { content: '▸ '; color: var(--brand-2); }
.doc-fill[open] > summary::before { content: '▾ '; }
.doc-fill > summary .sub { font-weight: 400; color: var(--muted-fg); font-size: 0.8rem; }
.doc-fill-body { padding: 0 0.9rem 0.9rem; display: grid; gap: 0.75rem; }
.doc-fill-body label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted-fg); }
.doc-fill-body input, .doc-fill-body textarea {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff;
}
.presets { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.35rem; }
.preset {
  cursor: pointer; border: 1px dashed var(--line); background: #fff; color: var(--brand-deep);
  padding: 0.15rem 0.55rem; border-radius: 999px; font: inherit; font-size: 0.75rem; font-weight: 600;
}
.preset:hover { background: #fdeef5; border-style: solid; }

/* ---- Users admin + attribution ---- */
.grid tr.is-inactive td { opacity: 0.55; }
.grid td.handled { font-size: 0.84rem; }
.grid td.handled .muted-txt { display: block; font-size: 0.76rem; }
.auth-narrow { max-width: 460px; }
.alert.flash.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* ---- Reports, bookings, FX ---- */
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.report-card { display: block; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(157, 60, 110, 0.16); text-decoration: none; }
.report-card h3 { font-family: var(--display); color: var(--brand-deep); margin: 0 0 0.35rem; font-size: 1.05rem; }
.report-card p { margin: 0; font-size: 0.85rem; color: var(--muted-fg); }
.report-scroll { overflow-x: auto; }
.report-scroll .grid { min-width: 720px; }
.report-note { margin-top: 0.6rem; }
.booking-panel .status-strip { margin-bottom: 0.9rem; }
.booking-panel .grid { margin-bottom: 0.9rem; }
.booking-add { margin-top: 0.5rem; }
.booking-form .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0.9rem; }
.booking-form .grid3 .full { grid-column: 1 / -1; }
.booking-form label { font-size: 0.78rem; font-weight: 600; color: var(--muted-fg); }
.booking-form input, .booking-form select {
  display: block; width: 100%; margin-top: 0.2rem; padding: 0.42rem 0.55rem;
  border: 1px solid var(--line); border-radius: 9px; font: inherit; background: #fff;
}
@media (max-width: 720px) { .booking-form .grid3 { grid-template-columns: 1fr 1fr; } }
.fx-form { display: flex; gap: 0.9rem; align-items: end; flex-wrap: wrap; }
.fx-form label { font-size: 0.8rem; font-weight: 600; color: var(--muted-fg); display: flex; flex-direction: column; gap: 0.25rem; }
.fx-form input { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; font: inherit; }

/* ---- Usage / quota ---- */
.usage-card { margin-bottom: 1.2rem; }
.usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.usage-figure { font-family: var(--display); font-size: 2.1rem; font-weight: 700; color: var(--brand-deep); }
.usage-figure small { font-family: inherit; font-size: 0.95rem; font-weight: 400; color: var(--muted-fg); margin-left: 0.3rem; }
.usage-left { font-size: 0.88rem; color: var(--muted-fg); }
.meter { height: 12px; border-radius: 999px; background: var(--muted-bg); overflow: hidden; margin: 0.7rem 0 1rem; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.meter.is-warn span { background: linear-gradient(90deg, var(--warn-fg), var(--accent)); }
.meter.is-full span { background: linear-gradient(90deg, var(--err-fg), #e0709e); }
.usage-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 0.6rem; }
.usage-facts div { display: flex; flex-direction: column; }
.usage-facts b { font-family: var(--display); font-size: 1.3rem; color: var(--brand-deep); }
.usage-facts span { font-size: 0.8rem; color: var(--muted-fg); }
.usage-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.usage-split h3 { font-family: var(--display); color: var(--brand-deep); margin: 0 0 0.6rem; font-size: 1.02rem; }
@media (max-width: 720px) { .usage-split { grid-template-columns: 1fr; } }

/* ---- Operator console ---- */
.meter.mini { height: 6px; margin: 0.3rem 0 0; max-width: 160px; }
.usage-cell { min-width: 150px; }
.pill.flag { display: inline-block; margin: 0 0.2rem 0.2rem 0; font-weight: 600; }