/* ============================================================
   MSA Application Stylesheet
   - Layer-1 + Layer-2 tokens come from assets/css/tokens.css
   - This file is Layer-3 only: component recipes assembled from
     semantic tokens (--bg, --accent, --ok, etc.)
   - No hard-coded hex outside tokens.css. No theme branches here —
     [data-theme="aurora"|"sunshine"] just swaps the tokens.
   See: doc/design/MSA配色标准.md
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */
html, body {
    font-size: 13px;
    min-height: 100vh;
    margin: 0;
    /* Tells Chrome/Edge to render native pickers (datalist popup, date picker,
       scrollbars) in dark scheme instead of the default white. */
    color-scheme: dark;
}
body {
    padding: 0;
    background: var(--bg);
    color: var(--text);
}

/* Native number-input spinners removed across the app — every number field
   should be a clean numeric textbox. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Native form controls are forced to dark-theme background + custom dropdown
   arrow. Browsers otherwise paint <select> popovers and date inputs in their
   own near-white system color, which clashes hard with the aurora shell.
   color-scheme: dark also drives the datalist popup (flight #) to use dark
   chrome on browsers that honor it. */
.tour-entry select,
.tour-entry input[type="text"],
.tour-entry input[type="number"],
.tour-entry input[type="date"],
.tour-entry input[type="url"],
.tour-entry input[type="email"],
.tour-entry input[list],
.tour-entry textarea {
    background-color: var(--bg-elev);
    color: var(--text);
    color-scheme: dark;
    accent-color: var(--accent);
}
.tour-entry select {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 11px) 50%, calc(100% - 6px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 20px !important;
}
.tour-entry select:focus { background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                                              linear-gradient(135deg, var(--accent) 50%, transparent 50%); }
.tour-entry input[readonly], .tour-entry input:disabled {
    background-color: var(--bg) !important;
    color: var(--muted) !important;
    cursor: default;
}
h1, h2, h3, h4 { color: var(--text-strong); margin: 0 0 8px; font-weight: 600; }
h1 { font-size: 1.5rem; letter-spacing: .3px; }
h2 { font-size: 1.15rem; margin-top: 24px; }
h3 { font-size: 1rem; }
p  { margin: 0 0 8px; }
.muted    { color: var(--muted); }
.text-strong { color: var(--text-strong); }
hr        { border: 0; border-top: 1px solid var(--border-soft); margin: 16px 0; }

code, .mono {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--bg-elev);
    color: var(--text);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* ── Shell (full-bleed) ────────────────────────────────────── */
.shell    { max-width: none; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: none; margin: 0; padding: 0; }

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-fg);
    padding: 10px 18px;
    border-radius: 0;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}
.topbar .brand {
    color: var(--topbar-fg);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
}
.topbar .brand strong { font-weight: 700; }
.topbar .brand .sub {
    font-size: 11px;
    font-weight: 400;
    opacity: .75;
    margin-left: 10px;
    letter-spacing: .5px;
}
.topbar .nav { display: flex; gap: 4px; flex: 1; margin-left: 12px; }
.topbar .nav a {
    color: var(--topbar-fg);
    opacity: .78;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-fast) ease;
}
.topbar .nav a:hover { opacity: 1; color: var(--accent); background: var(--accent-bg); text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* User chip in topbar */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--topbar-fg);
    opacity: .9;
}
.role-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 14px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border-soft);
}
.role-tag.role-admin    { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.role-tag.role-operator { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.role-tag.role-driver   { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.role-tag.role-guide    { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }

/* Theme switch inside topbar */
.theme-switch { display: inline-flex; gap: 2px; }
.theme-switch button {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    transition: all var(--duration-fast) ease;
}
.theme-switch button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Page ──────────────────────────────────────────────────── */
.page {
    background: var(--bg-card);
    border: 0;
    border-radius: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
}
/* Pages that aren't the full-bleed Tour Entry need their own inner padding */
.page > .page-header,
.page > .table-wrap,
.page > .filter-bar,
.page > .tour-list-toolbar,
.page > .tlt-tabs,
.page > #tour-table,
.page > .form,
.page > .card-grid,
.page > .flash,
.page > .invoice-card,
.page > .api-list,
.page > .kv,
.page > h2,
.page > h3,
.page > p,
.page > dl {
    padding-left: 22px;
    padding-right: 22px;
}
.page > .page-header { padding-top: 22px; }
.page > .table-wrap:last-child,
.page > .form:last-child,
.page > .card-grid:last-child { padding-bottom: 28px; }
/* Tour Entry view bypasses page padding — it manages its own full-bleed layout */
.page > .tour-entry { padding: 0; }
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}
.page-header h1 { margin: 0 0 4px; }
.page-header p  { margin: 0; }
.page-header .actions { display: flex; gap: 8px; align-items: center; }
/* Compact variant — dense working pages (e.g. Finance > Order List) where
   the header is just a label + filter row, not a hero. */
.page-header.page-header--compact {
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
}
.page > .page-header.page-header--compact { padding-top: 10px; }
/* Title keeps the site-standard h1 size (1.5rem) — only the paddings are
   compact, so the label doesn't read smaller than sibling pages. */
.page-header.page-header--compact h1 { margin: 0; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    transition: all var(--duration-fast) ease;
    font-family: inherit;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 4px 10px; font-size: 11.5px; }
.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); filter: brightness(1.06); }
.btn-link {
    background: transparent;
    border: 0;
    padding: 2px 0;
    color: var(--accent);
    font-weight: 500;
}
.btn-link:hover { text-decoration: underline; color: var(--accent-strong); }
.btn-danger {
    color: var(--bad);
    border-color: var(--bad);
    background: var(--bad-bg);
}
.btn-danger:hover { background: var(--bad); color: var(--on-accent); border-color: var(--bad); }

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table thead th {
    background: var(--bg-elev);
    color: var(--accent);
    padding: 9px 10px;
    border-bottom: 2px solid var(--border);
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.data-table thead th.r { text-align: right; }
.data-table thead th.c { text-align: center; }
/* Sortable column headers — the header text is a link that htmx-swaps the table. */
.data-table thead th .th-sort {
    display: inline-flex; align-items: center; gap: 3px;
    color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.data-table thead th .th-sort:hover,
.data-table thead th .th-sort.active { color: var(--text-strong); text-decoration: none; }
/* Faint ⇅ marks a sortable column; the active column's ▲/▼ shows full strength. */
.th-arrow { font-size: 8px; line-height: 1; opacity: .35; }
.data-table thead th .th-sort:hover .th-arrow { opacity: .7; }
.data-table thead th .th-sort.active .th-arrow { opacity: 1; font-size: 9px; }
.data-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    vertical-align: middle;
}
.data-table tbody td.r { text-align: right; }
.data-table tbody td.c { text-align: center; }
.data-table tbody tr:nth-child(even) td { background: var(--bg-elev); }
.data-table tbody tr:hover td { background: var(--accent-bg); }
.data-table tbody tr.inactive { opacity: .55; }
.data-table tbody tr.inactive td { text-decoration: line-through; }
.data-table .empty {
    text-align: center;
    color: var(--muted);
    padding: 28px;
    font-style: italic;
}
.data-table .row-actions { display: inline-flex; gap: 4px; align-items: center; }

/* ── Tour-code monospace + clickable affordance ────────────── */
.tour-code {
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
}
.tour-code:hover { text-decoration: underline; }

/* ── Source / agency badges ────────────────────────────────── */
.src {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .4px;
    background: var(--bg-elev);
    color: var(--muted);
    border: 1px solid var(--border-soft);
}
.src.direct { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.src.MM     { color: #c2410c; border-color: #fb923c; background: rgba(251,146,60,.14); }
.src.TN     { color: #6b21a8; border-color: #a855f7; background: rgba(168,85,247,.14); }
.src.ALI    { color: #1d4ed8; border-color: #60a5fa; background: rgba(96,165,250,.14); }
.src.ZL     { color: #1d4ed8; border-color: #60a5fa; background: rgba(96,165,250,.14); }
.src.ZX     { color: #047857; border-color: #34d399; background: rgba(52,211,153,.14); }

/* ── Package pill ──────────────────────────────────────────── */
.pkg {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    background: var(--accent-bg);
    color: var(--accent);
    font-family: var(--font-mono);
    letter-spacing: .3px;
}
.pkg.flagship { background: var(--warn-bg); color: var(--warn); }

/* ── Status pill with leading dot ──────────────────────────── */
.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
/* Colored-dot marker removed — status label + background already convey
   the state visually, the dot added noise without new info. */
.status.draft       { background: var(--bg-elev); color: var(--muted); }
.status.confirmed   { background: var(--info-bg); color: var(--info); }
.status.in_progress { background: var(--warn-bg); color: var(--warn); }
.status.completed   { background: var(--ok-bg);   color: var(--ok); }
.status.cancelled   { background: var(--bad-bg);  color: var(--bad); }
.status.issued      { background: var(--info-bg); color: var(--info); }
.status.partial_paid{ background: var(--warn-bg); color: var(--warn); }
.status.paid        { background: var(--ok-bg);   color: var(--ok); }

/* Type badges (supplier, booking_type, customer_type) */
.tbadge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: var(--bg-elev);
    color: var(--muted);
    border: 1px solid var(--border-soft);
}
.tbadge.agency       { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.tbadge.direct       { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.tbadge.fit          { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.tbadge.group        { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.tbadge.hotel        { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.tbadge.restaurant   { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.tbadge.activity     { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.tbadge.camp         { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.tbadge.vehicle_fleet{ color: var(--muted); border-color: var(--border); background: var(--bg-elev); }
.tbadge.other        { color: var(--muted); border-color: var(--border); background: var(--bg-elev); }

/* ── Key-value list ────────────────────────────────────────── */
.kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 18px;
    max-width: 700px;
    margin: 0 0 24px;
}
.kv dt {
    color: var(--muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.kv dd { margin: 0; color: var(--text); }
.kv dd strong { color: var(--text-strong); font-size: 1.05em; }

/* ── Cards ─────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.card {
    display: block;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-fast) ease;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.card h3 { margin: 0 0 6px; color: var(--text-strong); }
.card p, .card ul { margin: 0; color: var(--muted); font-size: 12px; }
.card ul { padding-left: 18px; line-height: 1.7; }
.card ul code { font-size: 10.5px; padding: 0 4px; }

/* ── Forms ─────────────────────────────────────────────────── */
.form { max-width: 760px; }
/* Tour Entry form uses its own multi-column grid layout — let it fill its container */
.tour-entry .form { max-width: none; }
.form .field { display: block; margin: 12px 0; }
.form .field > span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.form .field > span small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.form .field input[type=text],
.form .field input[type=number],
.form .field input[type=url],
.form .field input[type=date],
.form .field input[type=password],
.form .field select,
.form .field textarea,
.field-inline input[type=text] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-elev);
    color: var(--text);
    transition: all var(--duration-fast) ease;
}
.form .field input:focus,
.form .field select:focus,
.form .field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.form .field textarea { resize: vertical; font-family: inherit; }
.form .field .err {
    display: block;
    margin-top: 4px;
    color: var(--bad);
    font-size: 11.5px;
    font-weight: 500;
}
.form .field input[type=checkbox] { width: auto; margin: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row .field { margin: 6px 0; }
.field-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-size: 13px;
    color: var(--text);
}
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

/* ── Supplier payment detail: compact header + 4-up meta grid ─── */
.pmt-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}
.pmt-head-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.pmt-head-title h2 { margin: 0; }
.pmt-head-supplier { color: var(--muted); font-size: .92em; }
.pmt-head-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.pmt-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem 1rem;
    padding: .7rem .9rem;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}
.pmt-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmt-meta .k,
.pmt-notes .k {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.pmt-meta .v { color: var(--text); overflow-wrap: anywhere; }
.pmt-notes {
    margin-top: .6rem;
    padding: .55rem .9rem;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}
.pmt-notes .k { display: block; margin-bottom: 2px; }
.pmt-notes.pmt-void .v { color: var(--bad, #c66); }
@media (max-width: 620px) { .pmt-meta-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Supplier edit: compact header (title left, back-link right) ─ */
.page > .page-header.supplier-edit-header { padding-top: 12px; }
.supplier-edit-header { align-items: center; margin-bottom: 12px; }
.supplier-edit-header h1 { font-size: 20px; margin: 0; }
.supplier-edit-header .actions { align-self: center; }

/* ── Supplier edit: two-column layout (basic info | contacts) ─ */
.supplier-form { max-width: 1080px; }
.supplier-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .supplier-grid { grid-template-columns: 1fr; }
}
.sup-panel {
    padding: 18px 20px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.sup-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    color: var(--text-strong);
}
.sup-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}
.panel-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── Contacts: accordion list (click a row → edit inline) ───── */
.contact-list { display: flex; flex-direction: column; gap: 8px; }
.contact-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-elev);
    overflow: hidden;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.contact-card.open { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.contact-card-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.contact-card-head:hover { background: var(--accent-bg); }
.contact-card-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.cc-star { color: var(--border-strong); font-size: 13px; line-height: 1; flex: 0 0 auto; margin-top: 3px; }
.cc-star.on { color: var(--amber-400, var(--accent)); }
.cc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.cc-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cc-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-empty { color: var(--muted); font-weight: 400; font-style: italic; }
.cc-role {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    color: var(--muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cc-line2 { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text); }
.cc-field { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.cc-lbl {
    flex: 0 0 auto;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.cc-empty-sub { color: var(--muted); font-style: italic; font-size: 12px; }
.cc-caret {
    flex: 0 0 auto;
    align-self: center;
    color: var(--muted);
    font-size: 16px;
    transition: transform var(--duration-fast) ease;
}
.contact-card.open .cc-caret { transform: rotate(90deg); }
.contact-card-body {
    display: none;
    padding: 4px 12px 12px;
    border-top: 1px solid var(--border-soft);
}
.contact-card.open .contact-card-body { display: block; }
.contact-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}
.contact-card-foot .field-inline { margin: 6px 0; }
.contact-add { margin-top: 10px; }

/* ── Flash messages ────────────────────────────────────────── */
.flash {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 12.5px;
    border: 1px solid;
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok);
}
.flash.err  { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad); }
/* Brief pulse to draw attention to a freshly-displayed error / hint flash
   (e.g. modal validation error that the operator might otherwise miss). */
.flash-pulse { animation: flash-pulse 0.8s ease-out; }
@keyframes flash-pulse {
    0%, 100% { transform: scale(1); }
    20%      { transform: scale(1.04); box-shadow: 0 0 0 3px var(--bad); }
    50%      { transform: scale(1); }
}
.flash.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.flash.info { background: var(--info-bg); color: var(--info); border-color: var(--info); }

/* A table row that was just created — fades from an ok tint back to normal. */
.data-table tbody tr.row-highlight { animation: row-highlight 2.4s ease-out; }
@keyframes row-highlight {
    0%   { background: var(--ok-bg); }
    100% { background: transparent; }
}

/* ── Login ─────────────────────────────────────────────────── */
.login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    display: block;          /* drop grid — absolute children below */
    position: relative;
    background: var(--bg);
    overflow: hidden;
}
/* Real <img> + overlay <div> render the background instead of a CSS
   background-image — guarantees the photo covers the shell exactly,
   no `background-attachment: fixed` sub-pixel issues, no surprises with
   browser bg-image sizing. */
.login-bg, .login-bg-overlay {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 0;
    pointer-events: none;
}
.login-bg { object-fit: cover; }
.login-bg-overlay {
    background: linear-gradient(180deg, rgba(5, 11, 26, .35) 0%, rgba(5, 11, 26, .65) 100%);
}
/* Lift the foreground above the bg layer. Grid items establish their own
   stacking context once z-index is non-auto — no need to mess with their
   position (would break .login-logo's absolute positioning). */
.login-shell > .login-logo,
.login-shell > .login-brand,
.login-shell > .login-card { z-index: 1; }

/* Three-line stacked brand wordmark on the left half.
   Italic Cormorant Garamond — gives the aurora photo a magazine-cover
   feel without competing with the glass card on the right. */
.login-brand {
    position: absolute;
    top: 50%;
    left: calc(68% + 200px);
    transform: translate(-50%, calc(-50% - 200px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(44px, 4.8vw, 84px);
    line-height: 1;
    letter-spacing: .005em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 4px 28px rgba(0, 0, 0, .55);
    user-select: none;
}
.login-brand span:nth-child(1) { color: rgba(255, 255, 255, .86); padding-left: 0; }
.login-brand span:nth-child(2) { color: var(--accent); font-weight: 500; padding-left: 0; }
.login-brand span { white-space: nowrap; }

/* OPTION B: corner-stamp logo + big wordmark center-left */
.login-logo {
    position: absolute;
    top: 28px;
    left: 32px;
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
    opacity: .92;
    pointer-events: none;
}

@media (max-width: 860px) {
    .login-brand { display: none; }
    .login-card  { right: 50%; transform: translate(50%, -50%); width: calc(100vw - 32px); max-width: 380px; }
    .login-logo  { width: 96px; height: 96px; }
}
.login-card {
    position: absolute;
    top: 50%;
    left: 296px;
    right: auto;
    transform: translateY(-50%);
    background: rgba(10, 24, 40, .72);         /* night-800 @ 72% — sits on top of the aurora */
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
    width: 380px;
    max-width: calc(100vw - 60px);
    box-sizing: border-box;
}
.login-card h1 { margin: 0 0 6px; font-size: 1.4rem; }
.login-card > p { color: var(--muted); margin-bottom: 18px; font-size: 12.5px; }
.login-card .field { display: block; margin: 12px 0; }
.login-card .field span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.login-card input[type=text],
.login-card input[type=password] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    background: var(--bg-elev);
    color: var(--text);
    font-family: inherit;
}
.login-card input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.login-card .btn-primary { width: 100%; padding: 10px; margin-top: 4px; justify-content: center; }
.login-hint {
    margin-top: 18px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

/* ── Quick-login (dev) ─────────────────────────────────────── */
.quick-login { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.quick-login .muted {
    font-size: 11px;
    display: block;
    margin-bottom: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.quick-login-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.quick-login-row .btn { width: 100%; justify-content: center; font-size: 11.5px; font-weight: 700; }
.quick-login-row .role-admin    { color: var(--bad);  border-color: var(--bad);  background: var(--bad-bg); }
.quick-login-row .role-operator { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.quick-login-row .role-driver   { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.quick-login-row .role-admin:hover    { background: var(--bad);  color: var(--on-accent); }
.quick-login-row .role-operator:hover { background: var(--info); color: var(--on-accent); }
.quick-login-row .role-driver:hover   { background: var(--ok);   color: var(--on-accent); }

/* ── API endpoint list ─────────────────────────────────────── */
.api-list { padding: 0; list-style: none; margin: 0; }
.api-list li {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--bg-elev);
    border-radius: var(--radius-sm);
    font-size: 12px;
    border-left: 3px solid var(--accent);
}
.api-list code { background: transparent; padding: 0; font-size: 11.5px; color: var(--text-strong); }

/* ============================================================
   Tour Entry page (two-col + tab nav + sticky financial panel)
   Mirrors prototype/prototype-tour-entry.html
   ============================================================ */

/* The Tour Entry page no longer has a standalone sub-topbar — its back link
   and Tour ID chip live in a slim strip atop the right column, above the
   Financial Summary panel (see .entry-meta below). */
.tour-entry { display: flex; flex-direction: column; min-height: calc(100vh - 48px); }

/* Slim meta strip at the top of the right column: back link + Tour ID. */
.entry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.entry-meta .back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
}
.entry-meta .back-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.entry-meta .id-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
}
.entry-meta .id-block .lbl { opacity: .7; letter-spacing: .5px; font-weight: 500; }
.entry-meta .id-block .val { font-family: var(--font-mono); color: var(--text); font-weight: 700; letter-spacing: .3px; font-size: 12px; }

.tour-entry .main-layout {
    display: grid;
    /* Three columns:
       1fr    = tabs + main working content
       260px  = Comments (top-aligned with Financial Summary)
       285px  = Financial Summary (−25% from the old 380px)
       Comments as its own column means its TOP is the page-content top,
       same y-coordinate as Financial Summary. */
    grid-template-columns: 1fr 260px 285px;
    gap: 0;
    align-items: stretch;
    margin-top: 0;
    flex: 1 1 auto;
    min-height: 0;
}
/* Hide Comments column when a doc-embedding tab is active (Itinerary /
   Invoice / BC) — their iframes carry floating buttons (Print, PDF, lang
   switch) that clash with the Comments column visually, and the iframe
   itself deserves the extra room. Financial Summary stays for reference. */
.tour-entry[data-active-tab="itinerary"] .main-layout,
.tour-entry[data-active-tab="invoice"]   .main-layout,
.tour-entry[data-active-tab="bc"]        .main-layout {
    grid-template-columns: 1fr 285px;
}
.tour-entry[data-active-tab="itinerary"] .mid-col,
.tour-entry[data-active-tab="invoice"]   .mid-col,
.tour-entry[data-active-tab="bc"]        .mid-col {
    display: none;
}
.tour-entry .left-col {
    background: var(--bg-card);
    border: 0;
    border-right: 1px solid var(--border);  /* full-height divider between left + right cols */
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tour-entry .left-col .tab-pane { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Tab bar */
.tab-bar {
    display: flex;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    padding: 0 8px;
    gap: 2px;
}
.tab-bar .tab {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 9px 14px 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    font-family: inherit;
}
.tab-bar .tab:hover { color: var(--text); }
.tab-bar .tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-card);
}
.tab-bar .tab .count {
    background: var(--bg-card);
    color: var(--muted);
    padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    min-width: 16px;
    text-align: center;
    border: 1px solid var(--border);
}
.tab-bar .tab.active .count {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

.tab-pane { display: none; padding: 14px; }
.tab-pane.active { display: block; }

/* Document tab — Invoice / BC embedded as live iframe preview */
.doc-tab-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin: -4px 0 10px;
}
.doc-tab-actions { display: inline-flex; gap: 8px; }
.doc-iframe {
    width: 100%; height: calc(100vh - 200px); min-height: 600px;
    border: 1px solid var(--border); border-radius: 6px;
    background: #fff;  /* paper-style docs render on light bg */
}

/* Card section inside a tab pane */
.te-card { padding: 6px 14px 8px; color: var(--text); border-bottom: 1px solid var(--border); margin: -14px -14px 0; }
.tab-pane > .te-card:last-child { border-bottom: 0; margin-bottom: -14px; }
/* Section heading: one tight row. No extra horizontal rule — the te-card
   border-bottom between sections already separates them; an h2-level line
   was redundant. Meta floats to the right end. */
.te-card h2 {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.te-card h2 .badge {
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    text-transform: none;
}
.te-card h2 .meta {
    margin-left: auto;          /* push meta to the right end of the row */
    font-weight: 400;
    color: var(--muted);
    font-size: 10.5px;
    text-transform: none;
    letter-spacing: 0;
}
/* Action controls (buttons / selects) hoisted into the section title row
   to save a row of vertical space. First one in the row pins to the right
   end via margin-left:auto; subsequent ones sit next to it. */
.te-card h2 .section-action {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--accent);
    border: 1px dashed var(--accent);
    cursor: pointer;
    line-height: 1.4;
}
.te-card h2 .section-action:hover { background: var(--accent-bg, rgba(56, 189, 248, .14)); }
.te-card h2 .section-action.section-select {
    /* native <select> needs solid borders + breathing padding to not look weird */
    border-style: solid;
    border-color: var(--border);
    color: var(--text);
    background: var(--bg-elev);
}
/* Comments preset picker specifically — one step smaller than the other
   .section-select controls (Optional Items picker) so the option list
   sits comfortably inside the narrower Comments header. */
.te-card h2 .section-action#remark-preset-picker { font-size: 10px; }
.te-card h2 .section-action:first-of-type { margin-left: auto; }
.te-card h2 .section-action + .section-action { margin-left: 4px; }
/* Icon-only variant — tight square footprint so the button doesn't
   compete with a real word-label control next to it. */
.te-card h2 .section-action.section-icon-btn {
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
    min-width: 0;
}

/* Tour Basics row */
.tour-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.tour-row + .tour-row { margin-top: 6px; }
.tour-row .te-field { display: flex; flex-direction: column; min-width: 0; }
.tour-row .te-field label {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 1px;
    line-height: 1.3;
    letter-spacing: .3px;
}
.tour-row .te-field label .required { color: var(--bad); }
.tour-row .te-field label .flight-meta {
    margin-left: 6px;
    padding: 1px 5px;
    background: var(--accent-bg, rgba(56, 189, 248, .14));
    color: var(--accent, #38bdf8);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
}
.tour-row .te-field label .flight-meta:empty { display: none; }
.tour-row .te-field input,
.tour-row .te-field select,
.tour-row .te-field textarea {
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-elev);
    color: var(--text);
    line-height: 1.4;
    width: 100%;
}
.tour-row .te-field input:focus,
.tour-row .te-field select:focus,
.tour-row .te-field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.tour-row .te-field input[readonly] { background: var(--bg); color: var(--muted); }
.tour-row .te-field .hint { font-size: 9.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

.tour-row .tf-type       { flex: 0 0 110px; }
.tour-row .tf-source     { flex: 0 0 140px; }     /* renamed label "Agency" — fits "—ALI · 阿里多倫多" */
.tour-row .tf-leadsource { flex: 0 1 140px; min-width: 120px; }
.tour-row .tf-arrival    { flex: 0 0 76px; }      /* MM-DD masked display — narrower */
.tour-row .tf-nights     { flex: 0 0 50px; }
.tour-row .tf-pre        { flex: 0 0 50px; }      /* same as Nights — was unset before */
.tour-row .tf-post       { flex: 0 0 50px; }
.tour-row .tf-departure  { flex: 0 0 76px; }
.tour-row .tf-billto     { flex: 0 0 130px; }
.tour-row .tf-pax        { flex: 0 0 56px; }
.tour-row .tf-seq        { flex: 0 0 50px; }
.tour-row .tf-contact    { flex: 0 1 160px; min-width: 110px; }
.tour-row .tf-email      { flex: 0 1 200px; min-width: 140px; }
.tour-row .tf-code       { flex: 0 0 auto; min-width: 230px; max-width: 320px; }
.tour-row .tf-remark     { flex: 1 1 auto; }

/* Row 3: Billing + 4 flight fields */
.tour-row .tf-billing        { flex: 0 0 150px; }
/* Non-blocking reminder under Billing when agency + guest-direct-pay is chosen. */
.tf-billing .billing-warn {
    display: block; margin-top: 4px;
    color: var(--warn); font-size: 10px; line-height: 1.35;
}
.tf-billing .billing-warn b { font-weight: 700; }
/* Wider than strictly needed for "AC8443" so Chrome's datalist popup —
   whose width = input width — can show "WS685 · 13:25 · YYC" in full. */
.tour-row .tf-arr-flight-no  { flex: 0 0 130px; }
.tour-row .tf-arr-flight-time{ flex: 0 0 110px; }
.tour-row .tf-dep-flight-no  { flex: 0 0 130px; }
.tour-row .tf-dep-flight-time{ flex: 0 0 110px; }
/* time-only input — native control still pads itself; cap inner width too */
.tour-row .tf-arr-flight-time input[type="time"],
.tour-row .tf-dep-flight-time input[type="time"] { width: 100%; min-width: 0; }
/* Force 24h display: hide AM/PM toggle (Chrome/WebKit), strip its padding */
input[type="time"]::-webkit-datetime-edit-ampm-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
    display: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    width: 0;
}
.tour-row .te-field select:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Orders Tab ───────────────────────────────────────────────────────── */
.orders-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 12px;
}
.orders-actions { display: flex; gap: 8px; }
.orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Pin the time columns: auto-layout was squeezing End to ~35px under long
   Chinese descriptions. min-width forces them to keep their declared width. */
.orders-table .time-cell { min-width: 60px; }
.orders-table thead th:nth-child(5),
.orders-table thead th:nth-child(6) { min-width: 60px; }
/* Attachment lightbox — fullscreen preview, click backdrop or ESC to close */
.attachment-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
}
.attachment-lightbox.open { display: flex; }
.attachment-lightbox .al-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: zoom-out;
}
.attachment-lightbox .al-img {
    position: relative; z-index: 1;
    max-width: 92vw; max-height: 86vh;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    background: #fff;
}
.attachment-lightbox .al-caption {
    position: absolute; bottom: 18px;
    left: 50%; transform: translateX(-50%);
    color: #eee; font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 10px; border-radius: 12px;
    z-index: 2;
    max-width: 80vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-lightbox .al-close {
    position: absolute; top: 14px; right: 18px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.15); color: #fff;
    border: 0; border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 18px; cursor: pointer;
}
.attachment-lightbox .al-close:hover { background: rgba(255, 255, 255, 0.3); }
.attachment-grid .attachment-card img.thumb { cursor: zoom-in; }

/* Subsection header above each orders table (Activities vs Hotels split) */
.orders-group-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent);
    margin: 4px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border-soft);
}
.orders-table th {
    text-align: left; padding: 6px 8px; background: var(--bg);
    border-bottom: 1px solid var(--border); font-weight: 600; color: var(--muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.orders-table td {
    padding: 6px 8px; border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.orders-table tr.conflict {
    background: rgba(248, 113, 113, 0.12);
    border-left: 3px solid var(--bad, #f87171);
}
.orders-table tr.conflict td:first-child { padding-left: 5px; }
.orders-table tr.overridden { background: rgba(251, 191, 36, 0.04); }
/* Description now single-line, single-cell — Supplier moved to its own
   dedicated column so operators can scan "who's doing what" without
   parsing a two-line stack. */
.orders-table .desc-cell {
    font-size: 13px;
    line-height: 1.3;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.orders-table .supplier-col .supplier-name {
    font-size: 12px;
    line-height: 1.2;
    color: var(--accent);
}
.orders-table .supplier-col .supplier-name.muted { color: var(--muted); opacity: 0.65; }
/* Red asterisk pinpoints time-conflict rows. Sits inline next to the
   Start time input so operators can see WHICH row is the offender at a
   glance. */
.orders-table .conflict-mark {
    color: var(--bad, #ef4444);
    font-weight: 700;
    margin-left: 3px;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}
/* Summary line above the tables turns red when any conflicts exist —
   pairs with the per-row asterisks. Replaces the ⚠ banner that used to
   describe conflicts but didn't tell you WHICH row. */
/* Only the Conflicts segment reddens (when > 0); Total/Optional stay muted. */
#orders-summary .oc-conflicts { color: var(--muted); }
#orders-summary .oc-conflicts.active { color: var(--bad, #ef4444); font-weight: 600; }
/* alternating shaded bands by service date — first row of a group also gets a thin separator */
/* alternating bands by service date — date groups must be clearly distinguishable */
.orders-table tr.date-group-odd  > td { background: rgba(99, 102, 241, 0.28); }
.orders-table tr.date-group-even > td { background: rgba(255, 255, 255, 0.06); }
/* Date-group separator — thinner (1px) + brighter (higher alpha, lighter
   slate) so the divider reads as a clean line, not a heavy bar. */
.orders-table tr.date-group-first > td { border-top: 1px solid rgba(203, 213, 225, 0.55); }
.orders-table tr.date-group-first:first-child > td { border-top: 0; }
/* conflict / overridden override the band tint */
.orders-table tr.conflict   > td { background: rgba(248, 113, 113, 0.22); }
/* 2026-07-22 user feedback: the manual/overridden yellow wash was loud and
   the badge letter blended into its amber background. Row tint dialled way
   down; the badge (below) carries the signal instead. */
.orders-table tr.overridden > td { background: rgba(251, 191, 36, 0.06); }
.orders-table input[type="datetime-local"],
.orders-table input[type="number"],
.orders-table .conf-col input[type="text"] {
    padding: 2px 4px; font-size: 12px; width: 100%;
    border: 1px solid transparent; background: transparent;
    border-radius: 3px;
}
.orders-table input[type="datetime-local"]:focus,
.orders-table input[type="number"]:focus,
.orders-table .conf-col input[type="text"]:focus {
    border-color: var(--accent); background: var(--card);
    outline: none;
}
/* Confirmation column: monospace reads better for booking codes; the
   dashed underline hints "type here" when still empty. */
.orders-table .conf-col input[type="text"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.orders-table .conf-col input[type="text"]:placeholder-shown {
    border-bottom: 1px dashed var(--border);
}
.orders-table .kind-badge {
    display: inline-block; padding: 2px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--bg); color: var(--muted);
}
.orders-table .kind-aurora { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.orders-table .kind-hotel  { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.orders-table .kind-airport_pickup,
.orders-table .kind-airport_dropoff { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.orders-table .kind-city_tour { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.orders-table .kind-optional  { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.orders-table .src-badge {
    display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px;
    background: var(--bg); color: var(--muted);
}
.orders-table .src-template_auto { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.orders-table .src-optional_auto { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.orders-table .src-manual_add    { background: rgba(251, 191, 36, 0.15); color: #f59e0b; }
.orders-table .override-badge {
    display: inline-block; margin-left: 4px; padding: 1px 4px; border-radius: 3px;
    /* Faint amber chip, bright amber letter — reads on the dark theme
       without shouting (2026-07-22 user feedback: letter vs background
       were too close, overall tint too heavy). */
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
    font-size: 9px; font-weight: 600;
}
.orders-table .row-action-btn {
    padding: 2px 6px; font-size: 11px; border: 1px solid var(--border);
    background: var(--card); color: var(--muted); border-radius: 3px; cursor: pointer;
}
.orders-table .row-action-btn:hover { background: var(--bg); color: var(--text); }
/* Icon-only variant — the "Edit" text was redundant once the Action
   column header labels it. Compact square footprint. */
.orders-table .row-action-btn.action-icon-btn {
    padding: 2px 5px; font-size: 12px; line-height: 1; min-width: 0;
}
.orders-table .row-action-btn.action-icon-btn + .action-icon-btn { margin-left: 2px; }
/* Date column — compact YY-MM-DD codes read cleaner in monospaced font
   so the dashes align vertically across rows. */
.orders-table .date-cell { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3px; }
/* Pax cell — numbers read easier centered than left/right in a narrow
   column. Applies to both the header column and the input inside. */
.orders-table td:has(> input[data-field="service_pax_count"]) { text-align: center; }
.orders-table input[data-field="service_pax_count"] { text-align: center; }
/* Supplier column — the code is 3-6 chars, keep it centered so short
   handles (SNOW / DOG / EXP) sit visually balanced in the narrower cell. */
.orders-table .supplier-col { text-align: center; }
.orders-table .supplier-col .supplier-name { font-size: 12px; }

/* Service column — driver/guide handoff. Left-aligned so names read
   naturally at a glance; the "dual" state stacks two smaller lines
   (D:/G:) flush left too. */
.orders-table .service-col { text-align: left; font-size: 12px; line-height: 1.25; padding-left: 8px; }
.orders-table .service-col .svc-cell.single { font-weight: 600; color: var(--text); }
.orders-table .service-col .svc-cell.empty  { color: var(--muted); opacity: .55; }
.orders-table .service-col .svc-cell.dual   {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.orders-table .service-col .svc-cell.dual .svc-line {
    font-size: 10.5px; line-height: 1.2; color: var(--text); font-weight: 600;
    letter-spacing: 0;
}
.tab .badge-red {
    display: inline-block; margin-left: 4px; color: var(--bad, #f87171);
    font-size: 11px;
}

/* Orders table: Day badge + Hours + clickable rows */
.orders-table .day-cell {
    text-align: center; font-weight: 600; color: var(--accent);
    font-size: 10px; letter-spacing: 0.2px;
}
.orders-table .day-cell.day-early { color: var(--muted); font-style: italic; }
.orders-table .hours-cell {
    text-align: center; font-variant-numeric: tabular-nums; color: var(--text);
    font-size: 12px;
}
.orders-table .hours-cell.empty { color: var(--muted); }
.orders-table .time-cell input[type="time"],
.orders-table .time-cell input[type="text"] {
    width: 100%; padding: 2px 4px; font-size: 12px;
    border: 1px solid transparent; background: transparent; border-radius: 3px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text);
    font-family: inherit;
}
.orders-table .time-cell input[type="time"]:focus,
.orders-table .time-cell input[type="text"]:focus {
    border-color: var(--accent); background: var(--card); outline: none;
}
.orders-table .time-cell .time-empty { color: var(--muted); padding: 0 4px; }
/* Merged Start–End cell: two HH:MM inputs sharing one column with a dash. */
.orders-table .time-range { white-space: nowrap; text-align: center; }
.orders-table .time-range input[type="text"] { width: 44px; }
.orders-table .time-range .time-dash { color: var(--text-2); margin: 0 1px; }
.orders-table .time-range .time-empty { padding: 0 1px; }
.orders-table tr.editable-row { cursor: pointer; }
.orders-table tr.editable-row:hover { background: var(--accent-bg); }
.orders-table tr.editable-row.conflict:hover { background: rgba(248, 113, 113, 0.20); }

/* Order edit / add modal */
.order-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.order-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.order-modal-card {
    position: relative;
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    width: 720px; max-width: calc(100vw - 40px); max-height: calc(100vh - 60px);
    display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.order-modal-card header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
}
.order-modal-card header h3 { margin: 0; font-size: 15px; color: var(--accent); }
/* Operator-facing modal ID — small monospaced chip in the header so issue
   reports can reference "M01" instead of "the supplier order popup". */
.modal-id-tag {
    margin-left: auto; margin-right: 8px;
    padding: 2px 7px; border-radius: 3px;
    background: var(--bg-elev); color: var(--muted);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .5px; user-select: all;
}
.order-modal-x {
    background: none; border: 0; color: var(--muted); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 3px;
}
.order-modal-x:hover { background: var(--bg-elev); color: var(--text); }
.order-modal-body {
    padding: 16px 18px; overflow: auto; flex: 1 1 auto;
}
.order-modal-card footer {
    display: flex; gap: 8px; padding: 12px 18px;
    border-top: 1px solid var(--border-soft); align-items: center;
}
.omf-row {
    display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-end;
}
.omf-row label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    flex: 0 1 auto; min-width: 140px;
}
.omf-row label.grow { flex: 1 1 auto; }
.omf-row label small { text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.omf-row input,
.omf-row select,
.omf-row textarea {
    padding: 6px 8px; font-size: 13px;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit;
}
.omf-row input:focus,
.omf-row select:focus,
.omf-row textarea:focus { border-color: var(--accent); outline: none; }
.omf-row textarea { resize: vertical; min-height: 50px; }
.om-hint {
    color: var(--muted); font-size: 11px;
    align-self: flex-end; padding-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.btn-danger  { border-color: var(--bad);    color: var(--bad); }
.btn-danger:hover  { background: var(--bad);    color: #fff; }
/* Tour Entry top banner — surfaces tour_code + Tour ID so it's never hidden
   in the side panel (suppliers ask for the Tour ID). */
.te-header-bar {
    display: flex; align-items: baseline; gap: 16px;
    padding: 6px 14px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}
.te-header-code { font-size: 16px; font-weight: 700; color: var(--accent); }
.te-header-tid  { font-size: 12px; color: var(--muted); }
.te-header-tid strong { color: var(--text); font-weight: 700; margin-left: 4px; }
/* Back-to-list link merged into the header bar, sitting immediately left
   of Tour ID on the right side. margin-left:auto pushes it (and the
   trailing Tour ID) to the right edge; Tour Code stays anchored left. */
.te-header-back {
    font-size: 11.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; padding: 2px 8px;
    border: 1px solid var(--border); border-radius: 3px;
    line-height: 1.4; white-space: nowrap;
    margin-left: auto;
}
.te-header-back:hover { color: var(--accent); border-color: var(--accent); }

/* Tour list pre/post-night flags — quickly spot early arrivals + late departures */
.tour-flag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.tour-flag.pre  { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.tour-flag.post { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }

/* ── Tour list toolbar — ONE row: search · date · months · tabs · actions ──
   The list has no separate title row; this is the top row. It carries the
   bottom border line; the active date tab's underline overlaps it and the
   table below drops its top border so they read as one connected surface. */
.tour-list-toolbar {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: nowrap;
    margin: 16px 0 0;
    border-bottom: 1px solid var(--border);
}
/* Controls lift off the border line; the date tabs sit on it. */
.tlt-search, .tlt-datepick, .tlt-months, .tlt-actions { margin-bottom: 6px; }
.tlt-arrow { margin-bottom: 7px; }

/* Right-pinned actions: cancelled-eye toggle + New tour */
.tlt-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.tlt-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 14px; line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.tlt-iconbtn:hover { border-color: var(--accent); }
.tlt-iconbtn.active { background: var(--accent-bg); border-color: var(--accent); }

.tour-list-toolbar + #tour-table .table-wrap,
.tour-list-toolbar + .table-wrap {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tlt-search { display: flex; align-items: center; gap: 4px; flex: 1 1 340px; min-width: 220px; }
.tlt-search input[type="search"] {
    flex: 1 1 auto; min-width: 120px;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: var(--accent-bg);   /* light accent tint so the search box stands out */
    color: var(--text);
    font-size: 13px;
}
.tlt-search input[type="search"]::placeholder { color: var(--accent); opacity: .75; }
.tlt-search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.tlt-search-btn {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 13px; line-height: 1;
    cursor: pointer;
}
.tlt-search-btn:hover { border-color: var(--accent); }
.tlt-search .tlt-clear {
    flex: 0 0 auto;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    padding: 0 2px;
}
.tlt-search .tlt-clear:hover { color: var(--text); }

/* Jump-to-day picker, right after the search button */
.tlt-datepick {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--muted);
    flex: 0 0 auto;
}
.tlt-datepick input[type="date"] {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 12.5px;
    color-scheme: dark;
}
.tlt-datepick input[type="date"]:focus { outline: none; border-color: var(--accent); }

/* Month quick-switch — jumps the date strip to that month's first day */
.tlt-months { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tlt-month {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tlt-month:hover { border-color: var(--accent); color: var(--accent); }
.tlt-month.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Date tabs strip — takes the remaining row width and scrolls horizontally */
.tlt-tabs-track {
    display: flex; gap: 1px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;             /* Firefox */
    flex: 0 1 500px; min-width: 0;     /* ~10 days visible; the rest scroll */
    padding: 0;
    cursor: grab;                      /* hold-drag to pan (see list.php) */
}
.tlt-tabs-track::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
/* While dragging: grabbing cursor, no text selection, and instant scroll
   (smooth would animate each scrollLeft write and lag the drag). */
.tlt-tabs-track.dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.tlt-arrow {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 15px; line-height: 1;
    cursor: pointer;
    user-select: none;
}
.tlt-arrow:hover { border-color: var(--accent); color: var(--accent); }
/* Two-line tab — date on top, weekday (+ count) below. The bottom edge sits
   on the strip's border line so the active tab connects to the table. */
.tlt-date-chip {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 4px 6px 5px;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tlt-date-chip .d { display: block; font-weight: 700; font-size: 12.5px; color: var(--text); }
.tlt-date-chip .w { display: block; font-size: 10px; color: var(--text-2); margin-top: 1px; }
.tlt-date-chip:hover { background: var(--bg-elev); }
/* Selected day fills with the accent — same look as the New tour button */
.tlt-date-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.tlt-date-chip.active .d,
.tlt-date-chip.active .w { color: var(--on-accent); opacity: 1; }
.tlt-date-chip-all .d { color: var(--accent); }
/* Weekends (Sat / Sun) get a warm accent so they're easy to spot */
.tlt-date-chip.weekend .d,
.tlt-date-chip.weekend .w { color: #fb923c; }
.tlt-date-chip.weekend.active .d,
.tlt-date-chip.weekend.active .w { color: var(--on-accent); }
/* Continuous strip: days with no tours (n=0) recede so populated days pop.
   The count is always shown; it's just bolder on days that have tours. */
.tlt-date-chip .w .n { font-weight: 700; }
.tlt-date-chip.empty { opacity: .68; }   /* was .5 — kept readable (~7.4:1) */
.tlt-date-chip.empty .w .n { font-weight: 400; }
.tlt-date-chip:hover, .tlt-date-chip.active { opacity: 1; }

/* Brightness lift for the Tour list: its secondary/muted cells (Agency, "—",
   source) sat at ~6.6:1 and read as dim. Bump them to --text-2 (~10:1 on the
   dark card). Scoped to the table so other pages keep their muted tone. */
#tour-table .muted { color: var(--text-2); }

/* Tighter rows on the Tour list so the pager fits without scrolling
   (7px → 5px vertical padding). Scoped — other data tables keep 7px. */
#tour-table .data-table tbody td { padding-top: 5px; padding-bottom: 5px; }

/* Merged Arrival → Departure cell: dates sit close with an "N" nights chip
   between them. Arrival carries the year; departure is MM-DD. */
.dates-cell { white-space: nowrap; }
.dates-cell .d-arr,
.dates-cell .d-dep { color: var(--text); }
.dates-cell .d-nights {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 10.5px; font-weight: 600;
    vertical-align: middle;
}
.dates-cell .d-mid { margin: 0 6px; white-space: nowrap; }
/* Extra nights join the package "Ns" tightly: pre reads "1+3N", post "3N+1".
   Amber = covered by a hotel order; RED = the extra night isn't booked yet. */
.dates-cell .d-extra {
    color: var(--warn);
    font-size: 11px; font-weight: 700;
    vertical-align: middle;
    cursor: help;
}
.dates-cell .d-extra.d-uncovered { color: #f87171; }   /* red — no hotel order covers this night */
.dates-cell .d-extra-pre  { margin-right: 1px; }
.dates-cell .d-extra-post { margin-left: 1px; }
.dates-cell .d-arrow { color: var(--text-2); }

/* Activity icons (replaces the old Agency/Source column). One row of emoji —
   base package (🌌) plus every add-on the tour includes (fishing, snowmobile,
   gear, extra hotel, meal …), driven by the tour's invoice/BC line items. */
/* Hotel bookings — every hotel order is shown, coloured by its state:
   confirmed = green, pending/quoting = neutral grey, spare = purple.
   Applies to both the primary hotel code and each extra (over-booking) chip. */
.hotel-cell { white-space: nowrap; }
.hotel-extra-group { margin-left: 4px; }
/* Primary hotel code */
.hotel-cell code.hotel-confirmed { color: #34d399; }               /* green — all confirmed */
.hotel-cell code.hotel-partial   { color: #f87171; font-weight: 700; }  /* red — partly confirmed */
.hotel-cell code.hotel-spare     { color: #a78bfa; }               /* purple — frozen/spare */
/* .hotel-pending → default code colour (normal white) */
/* Extra (over-booking) chips */
.hotel-extra {
    display: inline-block;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 10px; font-weight: 600;
    vertical-align: middle;
    cursor: help;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--muted);                                           /* pending = neutral grey */
}
.hotel-extra.hotel-confirmed { color: #34d399; border-color: #34d399; background: rgba(52, 211, 153, .14); }
.hotel-extra.hotel-partial   { color: #f87171; border-color: #f87171; background: rgba(248, 113, 113, .16); }  /* red — partly confirmed */
.hotel-extra.hotel-spare     { color: #a78bfa; border-color: #a78bfa; background: rgba(167, 139, 250, .14); }
/* "× N" multiplier when the same hotel has several orders (CHT × 2). */
.hx-mult { font-weight: 700; opacity: .85; }

/* Notes column (replaces the old Open button — the tour code opens the tour).
   One line, width-capped with ellipsis; the full note shows on hover (title). */
.notes-cell { max-width: 240px; }
.tour-note {
    display: block;
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-2);
    font-size: 12px;
    cursor: help;
}

.activity-cell { white-space: nowrap; }
.activity-icons { display: inline-flex; gap: 3px; justify-content: center; align-items: center; }
.activity-icon { font-size: 15px; line-height: 1; cursor: default; }
/* Bundled meal plate — small, tucked tight to its activity (e.g. fishing 🎣🍽️). */
.activity-icon-sm { font-size: 10px; margin-left: -1px; align-self: flex-start; }

/* ── Recent-edited tours (localStorage, tag strip at the page bottom) ─── */
.recent-tours {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 18px 2px 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.recent-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-2);
}
.recent-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.recent-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 12px; text-decoration: none;
    white-space: nowrap;
}
.recent-tag:hover { border-color: var(--accent); color: var(--accent); }
.recent-tag .recent-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 10px; color: var(--muted);
}
.recent-tag .recent-x:hover { background: var(--bad-bg); color: var(--bad); }
.recent-clear {
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: transparent; color: var(--muted);
    font-size: 11px; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.recent-clear:hover { border-color: var(--bad); color: var(--bad); }

/* ── Tour list pager (15/page) ───────────────────────────────────────── */
.tour-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 12px 2px 4px;
}
.tp-info { font-size: 12px; color: var(--text-2); }
.tp-links { display: flex; align-items: center; gap: 4px; }
.tp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elev);
    color: var(--text);
    font-size: 12.5px; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tp-btn:hover { border-color: var(--accent); color: var(--accent); }
.tp-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tp-btn.active:hover { color: var(--on-accent); }
.tp-btn.disabled { opacity: .45; pointer-events: none; }
.tp-ellipsis { color: var(--text-2); padding: 0 2px; }

/* These outline-style overrides are scoped to the supplier-order modal footer.
   Used to be globals — but they neutered the filled-style .btn-primary
   everywhere (text became invisible against bg). */
.order-modal .btn-primary { background: transparent; border-color: var(--accent); color: var(--accent); box-shadow: none; }
.order-modal .btn-primary:hover { background: var(--accent); color: var(--bg); }

/* Wider modal for the full editor + tabbed dense layout */
.order-modal-card { width: 920px; }

/* Tab bar inside the modal (between header and body) */
.om-tabs {
    display: flex;
    gap: 2px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
    flex: 0 0 auto;
}
.om-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.om-tab:hover { color: var(--text); }
.om-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Tab panes — only the active one renders; tighter padding than sections */
/* Legacy .om-pane (kept for JS compat) — but modal now flows single-page. */
.om-pane { display: none; padding: 12px 0 4px; }
.om-pane.active { display: block; }
/* Single-page modal: all sections visible, stacked vertically with a
   thin divider + section title. Replaces the old 5-tab navigation. */
.order-modal-body-flow .om-section { display: block; padding: 6px 0 10px; }
.order-modal-body-flow .om-section + .om-section {
    margin-top: 6px; padding-top: 12px;
    border-top: 1px solid var(--border-soft, var(--border));
}
.order-modal-body-flow .om-section-title {
    font-size: 12px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin: 0 0 8px; padding-bottom: 4px;
    border-bottom: 1px dashed var(--border);
    display: flex; align-items: center; gap: 6px;
}
.om-pane-subhead {
    display: flex; align-items: center;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--border-soft);
}

/* Dense form rows: tighter gaps, smaller fields, brighter labels (so they read
   as information, not watermarks). Override the global .omf-row defaults that
   were tuned for the old section layout. */
.om-pane .omf-row {
    gap: 8px;
    margin-bottom: 6px;
    align-items: flex-end;
}
.om-pane .omf-row label {
    min-width: 100px;
    font-size: 10.5px;
    color: var(--text);                  /* WAS muted — now full text color */
    opacity: 0.72;                       /* slightly subdued, still readable */
}
.om-pane .omf-row label.grow { min-width: 0; }
/* Width utilities — compact fields so a row carries more information.
   .sm = tiny numerics (Pax, Currency); .md = short selects (Kind, Status,
   phones). Both break out of the 100px default min-width. */
.om-pane .omf-row label.sm { min-width: 0; flex: 0 0 64px; }
.om-pane .omf-row label.md { min-width: 0; flex: 0 0 118px; }
/* Inline Start/End datetime cluster — lives in the same row as Kind +
   Status. Date inputs at natural width, HH:MM boxes tight. Hidden for
   hotel orders via #om-times-inline (room lines carry check-in/out). */
.om-times-inline {
    display: flex; gap: 6px; align-items: flex-end; flex: 1 1 auto; min-width: 0;
}
.om-times-inline label.dt { min-width: 0 !important; flex: 0 0 122px; }
.om-times-inline label.tm { min-width: 0 !important; flex: 0 0 58px; }
.om-times-inline .om-hint { white-space: nowrap; padding-bottom: 5px; }
.om-pane .omf-row input,
.om-pane .omf-row select,
.om-pane .omf-row textarea {
    padding: 4px 6px;
    font-size: 12.5px;
    color: var(--text);                  /* explicit — was inherited */
}
.om-pane .omf-row textarea { min-height: 38px; }
/* M01 (supplier-order modal) dropdowns: the native open-list highlight paints
   the selected option with the bright aurora accent (#22d3ee, inherited from
   `.tour-entry select { accent-color }`); light text on it was only ~1.5:1 —
   unreadable. Deepen the highlight to a darker aurora (ice-800) and keep a
   pure-white, max-bright font so it reads at ~7.3:1. */
#order-modal select { accent-color: #155e75; }
#order-modal select option { background-color: var(--bg-elev); color: var(--text); }
#order-modal select option:checked,
#order-modal select option:hover {
    background-color: #155e75;   /* ice-800 — deep aurora */
    color: #ffffff;
}
.om-pane .omf-row input::placeholder,
.om-pane .omf-row textarea::placeholder {
    color: var(--muted);
    opacity: 0.45;                       /* clearly distinguishable from content */
}
.om-pane .om-hint {
    align-self: flex-end;
    padding-bottom: 6px;
    font-size: 11px;
    color: var(--text);
    opacity: 0.6;
}

/* Line items mini table inside modal */
.om-details-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.om-details-table th {
    text-align: left; padding: 4px 6px; background: var(--bg-elev);
    color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-soft);
}
.om-details-table td { padding: 4px 6px; border-bottom: 1px dashed var(--border-soft); vertical-align: middle; }
.om-details-table td.action { text-align: right; }
.om-details-table input[type="text"],
.om-details-table input[type="number"] {
    padding: 3px 5px; font-size: 12px; width: 100%;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 3px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.om-details-table input.line-total {
    background: var(--bg); color: var(--muted);
}
.om-details-table input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }
.om-details-table .row-action-btn {
    padding: 1px 5px; font-size: 11px;
    border: 1px solid var(--border); background: var(--card); color: var(--muted);
    border-radius: 3px; cursor: pointer;
}
.om-details-table .row-action-btn:hover { color: var(--bad); border-color: var(--bad); }
.btn-sm { padding: 3px 9px; font-size: 11px; }

/* Orders list — Supplier + Total columns + confirmation badge */
.orders-table .supplier-cell { font-size: 11px; color: var(--text); }
.orders-table .supplier-cell.muted { color: var(--muted); }
.orders-table .total-cell {
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--text); font-size: 12px;
}
.orders-table .total-cell.zero { color: var(--muted); font-weight: 400; }
.orders-table .conf-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    background: rgba(34, 197, 94, 0.15); color: #22c55e;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
}

/* Hotels quick-quote bar — one-click parallel hotel quotes next to the
   Hotels group title. Buttons stay small/quiet (they sit inside a heading);
   ✓ + green tint marks hotels that already have an order on this tour. */
.hotel-quick-bar { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-weight: 400; }
.hotel-quick-label { font-size: 11px; color: var(--muted); letter-spacing: 0.2px; }
.hotel-quick-btn {
    padding: 1px 8px; font-size: 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.hotel-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
.hotel-quick-btn:disabled { opacity: .5; cursor: wait; }
.hotel-quick-btn.has-order {
    border-color: rgba(34, 197, 94, 0.5); color: #22c55e;
}
.hotel-quick-more {
    padding: 1px 4px; font-size: 11px; border-radius: 6px; max-width: 90px;
    border: 1px solid var(--border); background: var(--card); color: var(--muted);
}

/* Spare-room badges (V051): hotel rooms held without guests. Spare = amber
   (needs attention / reusable), resold = green (recovered), released = grey
   (written off). Global — used on the Tour Orders tab AND the Finance
   order book. Row tint only for the actionable 'spare' state. */
.spare-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px;
}
.spare-badge.spare-spare    { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.spare-badge.spare-resold   { background: rgba(34, 197, 94, 0.15);  color: #22c55e; }
.spare-badge.spare-released { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.orders-table tr.row-spare td { background: rgba(245, 158, 11, 0.05); }

/* ── Tour Details sub-layout: main column (Section 1/2) + sticky Comments side ──
   Sits inside #tab-tour and only wraps Section 1 + Section 2; Section 3
   (Optional Items) sits below the grid full-width. */
.te-grid {
    display: grid;
    /* Comments moved to the top-level right column (next to Financial
     * Summary) so the Tour tab main area now flows single-column. */
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}
.te-grid-main { min-width: 0; display: flex; flex-direction: column; }
.te-grid-main > .te-card + .te-card { margin-top: 4px; }
.te-grid-side {
    position: sticky;
    top: 8px;
    /* The side card is its own bordered box, unlike the stacked cards in main */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    padding: 9px 14px 11px;
    color: var(--text);
}
.te-grid-side h2 {
    margin: 0 0 7px;
    font-size: 11px;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.te-grid-side textarea {
    width: 100%;
    min-height: 260px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}
.te-grid-side textarea:focus {
    outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.te-grid-side .hint {
    font-size: 9.5px; color: var(--muted); margin-top: 4px; line-height: 1.3;
}

/* Rich-text Comments editor (contenteditable + tiny toolbar) */
.rt-toolbar {
    display: flex; gap: 2px; flex-wrap: wrap;
    padding: 4px 6px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.rt-toolbar button {
    appearance: none; border: 0; cursor: pointer;
    background: transparent;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    line-height: 1;
    font-family: inherit;
}
.rt-toolbar button:hover { background: var(--bg-card); color: var(--text); }
.rt-toolbar button.bold   { font-weight: 800; }
.rt-toolbar button.italic { font-style: italic; }
.rt-toolbar .swatch {
    width: 18px; height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    margin: 0 1px;
}
.rt-toolbar .swatch:hover { transform: scale(1.15); }
.rt-toolbar .sep { width: 1px; background: var(--border); margin: 0 4px; }
.rt-toolbar .clear { color: var(--muted); }

.rt-editor {
    min-height: 260px;
    max-height: 600px;
    overflow: auto;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 12.5px;
    font-family: inherit;
    line-height: 1.55;
    outline: 0;
    resize: vertical;
}
.rt-editor:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.rt-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}
.rt-editor b, .rt-editor strong { font-weight: 700; }
.rt-editor i, .rt-editor em { font-style: italic; }

/* Date mask — a wrapper that displays the chosen date as "MM-DD" while
   keeping a native <input type="date"> behind it for the calendar picker.
   The input is rendered transparent and stretched over the wrapper so the
   click target is the whole field. Year is intentionally not displayed
   because the operator already knows which year they're booking. */
.date-mask {
    position: relative;
    display: flex;
    align-items: center;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    padding: 0 6px;
    cursor: pointer;
    overflow: hidden;
    font-family: var(--font-mono);
}
.date-mask:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.date-mask input[type="date"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent;
    font-size: 12px;
    outline: none;
    cursor: pointer;
    -webkit-text-fill-color: transparent;
}
.date-mask input[type="date"]::-webkit-datetime-edit { color: transparent; }
.date-mask input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.date-mask .date-display {
    pointer-events: none;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text);
    letter-spacing: .5px;
    line-height: 1;
}
.date-mask .date-display.empty { color: var(--muted); }
.date-mask .date-display.typing { color: var(--accent); font-weight: 700; }
.date-mask .date-display.bad { color: var(--bad); font-weight: 700; animation: dm-shake .35s; }
@keyframes dm-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 0); }
    75% { transform: translate(2px, 0); }
}
.date-mask[data-readonly="1"] { background: var(--bg); cursor: default; }
.date-mask[data-readonly="1"] input[type="date"] { pointer-events: none; cursor: default; }
.date-mask[data-readonly="1"] .date-display { color: var(--muted); }
.tour-row textarea {
    width: 100%;
    resize: vertical;
    min-height: 46px;
}

/* Segmented control (FIT / Group) */
.seg {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-elev);
    height: 26px;
}
/* Hide the actual radio visually but keep it focusable for keyboard flow.
   Stays in the layout but invisible; labels render the visible chips. */
.seg input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.seg input[type="radio"]:focus-visible + label {
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}
.seg label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    margin: 0;
    line-height: 1;
    padding: 0 4px;
    border-right: 1px solid var(--border);
    user-select: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.seg label:last-of-type { border-right: 0; }
.seg label:hover { background: var(--bg-card); color: var(--text); }
.seg input[type="radio"]:checked + label {
    background: var(--accent);
    color: var(--on-accent);
}

/* Tour code live preview */
.tour-code-preview {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--warn);
    font-weight: 700;
    background: var(--warn-bg);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--warn);
    letter-spacing: .5px;
    height: 26px;
    display: flex;
    align-items: center;
    /* Long tour codes (e.g. PlaywrightTest-2 = 30 chars) used to wrap to a
       second line. Keep it single-line; tf-code below grows to fit. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Package row */
.pkg-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
}
.pkg-row .te-field { display: flex; flex-direction: column; min-width: 0; }
.pkg-row .pf-package    { flex: 0 1 220px; min-width: 170px; }
/* Item dropdown bg matches the plain inputs (PAX / Rooms / etc.) so all
   cells in the row sit on the same dark base. */
.pkg-row .pf-package select { background-color: var(--bg); }
.pkg-row .pf-occupancy  { flex: 0 0 156px; }   /* fits 4-cell 1/2/3/4 segment */
.pkg-row .pf-pax        { flex: 0 0 50px; }
.pkg-row .pf-rooms      { flex: 0 0 50px; }
.pkg-row .pf-pkgstart   { flex: 0 0 86px; }
.pkg-row .pf-price      { flex: 0 0 70px; }    /* halved — value+CAD fits */
.pkg-row .pf-total      { flex: 0 0 80px; }    /* halved */
/* Center-align ALL numeric cells in the package row so columns line up
   regardless of digit count (599 vs 1198 vs 711.20 etc.). */
.pkg-row .pf-occupancy select,
.pkg-row .pf-pax input,
.pkg-row .pf-rooms input,
.pkg-row .pf-pkgstart input,
.pkg-row .pf-price input,
.pkg-row .pf-total input { text-align: center; }
.pkg-row .pf-occupancy select { padding: 4px 6px; }
/* Center labels too so they sit above their (now-centered) values */
.pkg-row .pf-occupancy > label,
.pkg-row .pf-pax > label,
.pkg-row .pf-rooms > label,
.pkg-row .pf-pkgstart > label,
.pkg-row .pf-price > label,
.pkg-row .pf-total > label { text-align: center; }
/* Match Tour Basics typography exactly — same label + input sizing/spacing
   as .tour-row, so the two sections read as one consistent form. */
.pkg-row .te-field > label {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 1px;
    line-height: 1.3;
    letter-spacing: .3px;
}
.pkg-row .te-field input,
.pkg-row .te-field select,
.pkg-row .te-field textarea {
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    background: var(--bg-elev);
    color: var(--text);
    line-height: 1.4;
}
.pkg-row .money-input input { font-weight: 400; }    /* unbold the Total */

/* Packages subtable — numeric editable cells (PAX / Rooms) centered + tight.
   The `table.subtable td input` rule below carries equal specificity; bump
   ours to .subtable td input.pkg-num-cell so text-align:center always wins. */
.subtable td input.pkg-num-cell {
    width: 100%;
    max-width: 56px;
    padding: 4px 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    margin: 0 auto;
    display: block;
}
/* $ prefix inside the Packages subtable money cells (Unit + Total). Pattern
   copied from the right-panel `.pay-inputs .money-input .prefix` chip. */
.subtable .money-input.pkg-money {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-elev);
    align-items: stretch;
}
.subtable .money-input.pkg-money .prefix {
    padding: 0 7px;
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; color: var(--muted);
    background: var(--bg);
    border-right: 1px solid var(--border-soft);
    user-select: none;
}
.subtable .money-input.pkg-money input {
    padding: 4px 7px;
    border: 0;
    background: transparent;
    text-align: right;
    width: 100%;
}

/* V038: on_site (客人现场自付) optional lines — visually subdued so the
   operator can see at a glance that this row is NOT on the client's
   Invoice/BC. Subtotal still shows the price (for supplier reconciliation)
   but with a muted color + strikethrough on the row. */
.subtable tr.onsite-line { background: rgba(217, 119, 6, .07); }
.subtable tr.onsite-line td { color: var(--muted); }
.subtable tr.onsite-line .line-subtotal {
    text-decoration: line-through;
    text-decoration-color: rgba(217, 119, 6, .55);
    opacity: 0.75;
}
.subtable select.pay-mode-select {
    font-size: 11px; padding: 2px 4px;
    background: var(--bg); border: 1px solid var(--border-soft);
    border-radius: 4px; color: var(--fg);
    width: 100%;
}
/* Orders tab "自费" badge — inline next to activity_kind or hotel desc. */
.pay-badge {
    display: inline-block; padding: 1px 6px; font-size: 10.5px; font-weight: 700;
    border-radius: 3px; margin-left: 4px; letter-spacing: 0.02em;
}
.pay-badge.pay-onsite { background: #fef3c7; color: #b45309; }

/* Add Order dropdown: button + attached menu. Menu absolutely-positioned
   below the button, hidden by default, revealed via the [hidden] toggle
   on the JS side. Matches the app's dark-card aesthetic. */
.add-order-dropdown { position: relative; display: inline-block; }
.add-order-dropdown .caret { font-size: 10px; margin-left: 4px; opacity: 0.75; }
.add-order-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 500;
    min-width: 220px; padding: 6px 0;
    background: var(--bg-card, var(--card)); border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.add-order-menu button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 14px;
    background: none; border: 0; color: var(--text, inherit);
    font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.add-order-menu button:hover { background: var(--bg-elev, rgba(255,255,255,.05)); }
.add-order-menu button .ico { width: 16px; text-align: center; }
.add-order-menu .add-order-sep {
    height: 1px; margin: 4px 8px; background: var(--border-soft, rgba(255,255,255,.08));
}

/* Hotel picker sub-modal — reuses order-modal skin, narrower card. */
.msa-hotel-picker-card { width: 440px; max-width: calc(100vw - 40px); }
.msa-hotel-picker-root .order-modal-body { padding: 16px 18px; }
/* Same treatment for the restaurant picker so the two feel like siblings. */
.msa-restaurant-picker-card { width: 460px; max-width: calc(100vw - 40px); }
.msa-restaurant-picker-root .order-modal-body { padding: 16px 18px; }
.msa-restaurant-picker-root textarea {
    width: 100%; padding: 6px 8px; font-size: 13px; font-family: inherit;
    background: var(--bg-elev, rgba(255,255,255,.04));
    color: var(--text, inherit); border: 1px solid var(--border);
    border-radius: 4px; resize: vertical;
}

/* Comment presets manager (V042) — reuses order-modal skin. Editable
   list with save-per-row + add-at-bottom pattern (no separate edit page). */
.msa-preset-mgr-card { width: 520px; max-width: calc(100vw - 40px); }
.preset-mgr-list { list-style: none; margin: 0 0 12px; padding: 0;
                   max-height: 40vh; overflow-y: auto; }
.preset-mgr-list li { display: flex; gap: 6px; align-items: center;
                      padding: 5px 0; border-bottom: 1px dashed var(--border-soft, rgba(255,255,255,.08)); }
.preset-mgr-list li:last-child { border-bottom: 0; }
.preset-mgr-list .pm-label {
    flex: 1 1 auto; padding: 5px 8px; font-size: 13px;
    background: var(--bg-elev, rgba(255,255,255,.04));
    color: var(--text, inherit); border: 1px solid var(--border);
    border-radius: 4px;
}
.preset-mgr-list button {
    padding: 4px 8px; font-size: 12px; cursor: pointer;
    background: transparent; color: var(--muted); border: 1px solid var(--border);
    border-radius: 4px; flex: 0 0 auto;
}
.preset-mgr-list .pm-save-btn:hover { color: var(--good, #16a34a); border-color: var(--good, #16a34a); }
.preset-mgr-list .pm-del-btn:hover  { color: var(--bad,  #ef4444); border-color: var(--bad,  #ef4444); }
.preset-mgr-add { display: flex; gap: 6px; align-items: stretch; margin-top: 4px; }
.preset-mgr-add input {
    flex: 1 1 auto; padding: 6px 10px; font-size: 13px;
    background: var(--bg-elev, rgba(255,255,255,.04));
    color: var(--text, inherit); border: 1px solid var(--border);
    border-radius: 4px;
}

/* Styled confirm dialog (showConfirm) — reuses order-modal skin so the app
   has one dark-card look. Narrower + no scroll body since prompts are short. */
.msa-confirm-root .msa-confirm-card { width: 460px; max-width: calc(100vw - 40px); }
.msa-confirm-root .order-modal-body { padding: 18px; }
.msa-confirm-root p { line-height: 1.5; font-size: 13px; }
.msa-confirm-root footer .btn { padding: 6px 14px; }
/* The MM-DD overlay in extra package rows needs to fit the column too.
   PKG-start variants render "MM-DD WED" (weekday abbr), so widen enough
   to keep the chip on one line without clipping. */
.subtable .date-mask { display: inline-block; }
.subtable .date-mask input[type="date"] { width: 120px; }

/* Segmented occupancy picker — 4 squares with hover/checked accent.
   Inherits .seg from Tour Basics; this just widens to fit 4 cells. */
.seg.seg-occ { height: 24px; }
.seg.seg-occ label {
    font-size: 10.5px;   /* shrunk so 1/2/3/4 don't bloat the row */
    min-width: 24px;
    border-right: 1px solid var(--border-soft);
}
.seg.seg-occ label:last-of-type { border-right: 0; }

/* Currency-suffix input */
.money-input { position: relative; display: flex; }
.money-input input {
    padding: 4px 36px 4px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-elev);
    color: var(--text);
    width: 100%;
}
.money-input input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.money-input .suffix {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9.5px;
    color: var(--muted);
    font-family: var(--font-mono);
    pointer-events: none;
    letter-spacing: .3px;
}

/* Subtable for optional items / travelers */
table.subtable { width: 100%; border-collapse: collapse; }
table.subtable th {
    background: var(--bg-elev);
    color: var(--accent);
    padding: 5px 6px;
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: 10.5px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .5px;
}
table.subtable td {
    padding: 3px 4px;
    border: 1px solid var(--border-soft);
    vertical-align: middle;
    color: var(--text);
}
table.subtable td input,
table.subtable td select {
    width: 100%;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 11.5px;
    background: transparent;
    color: var(--text);
    line-height: 1.4;
}
table.subtable td input:hover,
table.subtable td select:hover {
    border-color: var(--border);
    background: var(--bg-elev);
}
table.subtable td input:focus,
table.subtable td select:focus {
    border-color: var(--accent);
    background: var(--bg-elev);
    outline: 0;
}
table.subtable td.num { text-align: right; }
table.subtable td.num input { text-align: right; }
/* Center-aligned counts (PAX, QTY) — the "how many" columns read more
   naturally centered than right-aligned since they're not money. */
table.subtable td.num-center,
table.subtable th.num-center { text-align: center; }
table.subtable td.num-center input { text-align: center; }
/* Compact unit-price input — no $-prefix chrome, tighter cell footprint
   so Description gets more horizontal space. */
table.subtable input.unit-price-input {
    padding: 3px 4px;
    width: 100%;
}
table.subtable td.action { text-align: center; width: 32px; }
table.subtable .del-btn {
    background: transparent;
    border: 0;
    color: var(--bad);
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}
.add-row { margin-top: 6px; text-align: right; }
.add-row button {
    background: var(--bg-card);
    border: 1px dashed var(--accent);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    margin-left: 4px;
    font-family: inherit;
}
.add-row button:hover { background: var(--accent-bg); }

/* Empty state shown when a tour has no packages (new mode, or all packages
   deleted in edit mode). Centers a single call-to-action button instead of
   rendering the subtable. */
.pkg-empty {
    padding: 16px 14px;
    text-align: center;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}
.pkg-empty p { text-align: left; }
.btn-add-pkg {
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: .3px;
}
.btn-add-pkg:hover { filter: brightness(1.08); }

/* Right financial panel */
.right-col,
.mid-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
}
/* Divider between Comments (mid-col) and Financial Summary (right-col)
   so both look like two clean cards side-by-side. */
.mid-col { border-right: 1px solid var(--border); }
.right-panel {
    background: var(--bg-card);
    border: 0;
    border-radius: 0;
    padding: 14px 18px 16px;
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    align-self: start;
}
/* Comments panel — same skin as Financial Summary (background/padding/
   color) so both look like one continuous top-aligned pair. */
.right-panel.rp-comments h3 {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 8px; font-size: 11px;
    color: var(--accent);
    text-transform: uppercase; letter-spacing: 1px;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 3px;
}
/* Preset row — dropdown + edit button, sits BELOW the h3 divider so the
   header stays clean. */
.right-panel.rp-comments .preset-row {
    display: flex; align-items: center; gap: 4px;
    margin: 0 0 6px;
}
.right-panel.rp-comments .preset-row .section-select { flex: 1 1 auto; }
.right-panel.rp-comments .rt-editor { max-height: 260px; overflow-y: auto; }
/* Tips panel sits BELOW Comments in the mid-col. Not sticky — otherwise
   it would fight Comments for the top:0 slot and slide underneath as
   the user scrolls. Regular document flow keeps it directly below. */
.right-panel.rp-tips { position: static; padding-top: 8px; }
.right-panel.rp-tips .tip-breakdown { margin-top: 0; }
.right-panel h3 {
    margin: 0 0 8px 0;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px;
}
.total-hero {
    text-align: center;
    padding: 12px 0 8px;
    border-bottom: 1px dashed var(--border-soft);
    margin-bottom: 8px;
}
.total-hero .label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }
.total-hero .amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--warn);
    font-family: var(--font-mono);
    margin: 4px 0 2px;
    line-height: 1;
}
.total-hero .note { font-size: 10px; color: var(--muted); }

/* Agency-net hero: list price (large reference, struck) → final price (bold).
   Shows the discount flow at-a-glance so the operator immediately sees both
   numbers without scrolling down to BC. */
.bc-hero {
    text-align: center;
    padding: 10px 0 8px;
    border-bottom: 1px dashed var(--border-soft);
    margin-bottom: 8px;
}
.bc-hero .bc-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
.bc-hero .bc-label small { text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 9.5px; font-weight: 400; }
.bc-hero .bc-list-amount {
    font-size: 22px;
    font-weight: 600;
    color: var(--muted);
    font-family: var(--font-mono);
    text-decoration: line-through;
    margin: 2px 0 4px;
    line-height: 1;
}
.bc-hero .bc-arrow { font-size: 14px; color: var(--muted); line-height: 1; margin: 2px 0; }
.bc-hero .bc-final-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--warn);
    font-family: var(--font-mono);
    margin: 2px 0;
    line-height: 1;
}
.breakdown .discount-amt { color: var(--bad); }
.breakdown .bc-discount-row small { font-weight: 700; color: var(--bad); }
/* V035: extra-discount row inputs. Inline mode select + value field so the
   whole row reads "Extra discount [% ▼] [_____] -$XX.XX". Reason input
   shows beneath when value > 0. */
.breakdown .fs-extra-discount-row .ed-mode-select {
    margin-left: 4px;
    padding: 0 4px;
    font-size: 10.5px;
    height: 18px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 2px;
}
.breakdown .fs-extra-discount-row .ed-value {
    width: 50px;
    margin-left: 4px;
    padding: 0 4px;
    font-size: 10.5px;
    height: 18px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 2px;
    text-align: right;
}
.breakdown .fs-extra-discount-reason-row {
    padding-top: 2px;
}
.breakdown .fs-extra-discount-reason-row .ed-reason {
    width: 100%;
    padding: 2px 6px;
    font-size: 10.5px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: inherit;
}

.breakdown { font-size: 11.5px; }
.breakdown .row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text); }
.breakdown .row.sub { font-size: 10.5px; color: var(--muted); padding: 2px 0; }
.breakdown .row.divider { border-top: 1px dashed var(--border-soft); margin-top: 4px; padding-top: 5px; }
.breakdown .row .val { font-family: var(--font-mono); font-weight: 600; }

.pay-inputs { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
/* Shown instead of deposit/balance inputs when tour is on agency_net (monthly
   settlement). Same vertical real estate so the panel doesn't jump on flip. */
.bc-settlement-note {
    margin-top: 8px; padding: 10px 12px;
    border-top: 1px dashed var(--border-soft);
    text-align: center;
}
.bc-settlement-note .settlement-badge {
    display: inline-block;
    padding: 2px 8px; margin-bottom: 4px;
    border-radius: 3px;
    background: var(--accent-bg, rgba(56, 189, 248, .14));
    color: var(--accent, #38bdf8);
    font-weight: 700; font-size: 11px; letter-spacing: .3px;
}
.bc-settlement-note .muted { display: block; line-height: 1.5; }
.pay-inputs .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
}
.pay-inputs .row label { color: var(--muted); }
.pay-inputs .money-input {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-elev);
}
.pay-inputs .money-input .prefix {
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg);  /* darker chip, not a translucent white-ish wash */
    border-right: 1px solid var(--border-soft);
    display: inline-flex;
    align-items: center;
    letter-spacing: .3px;
    user-select: none;
}
.pay-inputs .money-input input {
    border: 0;
    border-radius: 0;
    background: transparent;
    width: 78px;
    padding: 2px 6px;
    text-align: right;
    font-size: 11.5px;
    font-family: var(--font-mono);
    color: var(--text);
    outline: none;
}
.pay-inputs .money-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }

.balance-line {
    display: flex;
    justify-content: space-between;
    background: var(--accent-bg);
    color: var(--accent);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    margin-top: 8px;
}
.balance-line .val { font-family: var(--font-mono); }
.outstanding-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    font-size: 11px;
    margin-top: 4px;
    border-radius: var(--radius-sm);
}
.outstanding-line.over { background: var(--bad-bg); color: var(--bad); }
.outstanding-line.ok { background: var(--ok-bg); color: var(--ok); }

.panel-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.panel-actions button {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 0;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    width: 100%;
    font-family: inherit;
}
.panel-actions .btn-draft {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
}
.panel-actions .btn-draft:hover { border-color: var(--accent); color: var(--accent); }
.panel-actions .btn-generate {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: var(--on-accent);
    box-shadow: var(--shadow-sm);
}
.panel-actions .btn-generate:hover { filter: brightness(1.08); }
.panel-hint { color: var(--muted); font-size: 10px; margin-top: 8px; line-height: 1.5; }

/* FIT Tip block */
.tip-block {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    background: var(--bg-elev);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.tip-block .tip-calc {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}
.tip-block .tip-calc .lbl { color: var(--muted); font-size: 11px; }
.tip-block .tip-calc .op { color: var(--muted); font-weight: 600; padding: 0 2px; }
.tip-block .tip-calc .pax-echo {
    color: var(--text-strong);
    font-family: var(--font-mono);
    background: var(--bg-card);
    padding: 1px 7px;
    border-radius: 3px;
    border: 1px solid var(--border-soft);
    font-size: 12px;
}
.tip-block .tip-total {
    color: var(--bad);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    background: var(--bad-bg);
    padding: 2px 8px;
    border-radius: 3px;
}
.tip-block .money-input.small input { width: 60px; padding: 2px 5px; }
.tip-block .money-input.small .prefix { padding: 1px 5px; font-size: 9.5px; }
.tip-breakdown {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.tip-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: var(--font-mono);
}
.tip-breakdown-table thead th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 2px 6px 4px;
    border-bottom: 1px solid var(--border-soft);
}
/* First column doubles as the panel title — read it as a heading, not a label. */
.tip-breakdown-table thead th:first-child {
    color: var(--text-strong);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.tip-breakdown-table th.num,
.tip-breakdown-table td.num { text-align: right; white-space: nowrap; }
.tip-breakdown-table tbody td {
    padding: 4px 6px;
    border-bottom: 1px dotted var(--border-soft);
    vertical-align: top;
}
.tip-breakdown-table tbody td .muted { font-size: 10px; }
.tip-breakdown-table tr.tip-transfer-row td { background: var(--bg-soft, rgba(0,0,0,.02)); }
.tip-breakdown-table tfoot .tip-total-row td {
    padding: 5px 6px;
    border-top: 1px solid var(--border);
    color: var(--text-strong);
    font-size: 12px;
    white-space: nowrap;            /* keep "$340.00" together with no wrap */
}
.tip-breakdown-table tfoot #tip-grand-total { color: var(--bad); }
.tip-block .tip-policy {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-soft);
    font-size: 10.5px;
    color: var(--muted);
    line-height: 1.5;
}
.tip-block .tip-policy .disclosed {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    background: var(--ok-bg);
    color: var(--ok);
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* Attachment grid (Communication tab) */
.paste-zone {
    margin: 4px 0 10px;
    padding: 28px 14px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elev);
    cursor: copy;
    text-align: center;
    color: var(--muted);
    transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.paste-zone:hover, .paste-zone:focus { border-color: var(--accent); color: var(--accent); outline: 0; }
.paste-zone.drag { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.paste-zone .big { font-size: 28px; margin-bottom: 4px; }
.paste-zone .small { font-size: 10.5px; color: var(--muted); margin-top: 6px; }

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.attachment-card {
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}
.attachment-card .thumb {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    background: var(--bg);
}
.attachment-card .meta {
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    font-size: 10.5px;
    color: var(--muted);
}
.attachment-card .del-x {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--duration-fast);
}
.attachment-card:hover .del-x { opacity: 1; }
.attachment-card .del-x:hover { background: var(--bad); }

/* ── Invoice summary card on tour show ─────────────────────── */
.invoice-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin: 16px 0;
    max-width: 460px;
    border-left: 4px solid var(--ok);
}
.invoice-card .invoice-no {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.invoice-card .invoice-line {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12.5px;
}
.invoice-card .invoice-line.total {
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--text-strong);
    font-size: 14px;
}

/* ── Flights — JSON maintenance editor ─────────────────────── */
.json-editor {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elev);
    padding: 12px 14px;
}
.json-editor > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-strong);
    list-style: none;
}
.json-editor > summary::before { content: "▸ "; color: var(--muted); }
.json-editor[open] > summary::before { content: "▾ "; }
.json-editor > summary:hover { color: var(--accent); }
.json-editor p.muted { margin: 8px 0 10px; }
.code-area {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    tab-size: 2;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    resize: vertical;
    white-space: pre;
    overflow: auto;
}
.code-area:focus {
    outline: none;
    border-color: var(--accent);
}

/* Inline row editor */
.data-table tr.flights-edit-row td { background: var(--accent-bg); }
.data-table tr.flights-edit-row.has-error td { background: var(--bad-bg); }
.cell-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px 6px;
    font: inherit;
    font-size: 12px;
}
.cell-input:focus { outline: none; border-color: var(--accent); }
.cell-input.cell-time { width: 64px; text-align: center; }
.cell-error {
    margin-top: 4px;
    font-size: 11px;
    color: var(--bad);
    max-width: 220px;
    white-space: normal;
    text-align: left;
}

/* ════════════════════════════════════════════════════════════════════════
   Item catalog admin — compact toolbar, chip filters, modal editor
   ════════════════════════════════════════════════════════════════════════ */

/* Header: title + chips on the left, search + New on the right. */
.items-header-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.items-header-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.item-count { font-size: 14px; font-weight: 400; }

/* Clickable category filter chips (each active one carries an × to clear). */
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-elev);
    color: var(--muted); font-size: 12px; line-height: 1.6;
    text-decoration: none; transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip-x { font-weight: 700; opacity: .85; }

/* Live search box with an × clear affordance. */
.items-search { position: relative; display: flex; align-items: center; }
.items-search input[type="search"] {
    padding: 6px 26px 6px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-elev);
    color: var(--text); font-size: 13px; min-width: 210px;
}
.items-search input[type="search"]:focus { outline: none; border-color: var(--accent); }
.search-x {
    position: absolute; right: 8px; color: var(--muted);
    text-decoration: none; font-size: 16px; line-height: 1;
}
.search-x:hover { color: var(--text); }

/* Display rows advertise the double-click-to-edit affordance. */
.items-table tbody tr.items-row { cursor: pointer; }
.items-table tbody tr.items-row:hover { background: var(--accent-bg); }

/* Modal editor — wide enough to hold the 11-col variants table without an
   inner horizontal scrollbar; caps at the viewport on smaller screens. */
.item-editor .order-modal-card { width: min(1320px, calc(100vw - 32px)); }

/* Dense item-field grid (kills the old full-page form's empty right half). */
.ie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px 13px; }
.ie-field {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .4px;
}
.ie-field input, .ie-field select, .ie-field textarea {
    padding: 6px 8px; font-size: 13px; font-family: inherit;
    text-transform: none; letter-spacing: 0;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.ie-field input:focus, .ie-field select:focus, .ie-field textarea:focus { outline: none; border-color: var(--accent); }
.ie-field textarea { resize: vertical; min-height: 42px; }
.ie-field .err { color: var(--bad); font-size: 11px; text-transform: none; letter-spacing: 0; }
.ie-span2 { grid-column: span 2; }
.ie-span4 { grid-column: span 4; }
.ie-check { flex-direction: row; align-items: center; gap: 7px; align-self: end; padding-bottom: 6px; }
.ie-check span { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 13px; }

.ie-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ie-hint { font-size: 11px; }

/* Variants section inside the modal. */
.ie-variants-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 20px 0 8px; gap: 12px;
}
.ie-variants-head h4 { margin: 0; font-size: 13px; color: var(--accent); }
.variants-table th, .variants-table td { padding: 4px 6px; vertical-align: middle; }
.variants-table .cell-input { font-size: 12px; }

/* ── Finance > Order List (two-pane: supplier tree + order book) ─────── */
.finance-orders {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.finance-orders .supplier-tree {
    flex: 0 0 20%;
    min-width: 190px;
    max-width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}
.finance-orders .orders-pane { flex: 1; min-width: 0; }

/* Scope shortcuts (All orders / Unassigned) pinned above the type groups. */
.supplier-tree ul.tree-scopes {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--border-soft);
}
.supplier-tree ul.tree-scopes .tree-name { font-weight: 600; }

.supplier-tree details { margin-bottom: 2px; }
.supplier-tree summary {
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--text-strong);
    user-select: none;
}
.supplier-tree summary:hover { background: var(--accent-bg); color: var(--accent); }
.supplier-tree ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 10px; }
.supplier-tree li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
}
.supplier-tree li a:hover { background: var(--accent-bg); color: var(--accent); }
.supplier-tree li a.active {
    background: var(--accent);
    color: var(--on-accent);
}
.supplier-tree li a.inactive { opacity: .5; }
.supplier-tree .tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.supplier-tree .tree-badges { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.supplier-tree .tree-due,
.supplier-tree .tree-count {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
}
.supplier-tree .tree-due  { color: var(--warn); border: 1px solid var(--warn); background: var(--warn-bg); }
.supplier-tree .tree-count { color: var(--muted); border: 1px solid var(--border); background: var(--bg-elev); }
.supplier-tree li a.active .tree-due,
.supplier-tree li a.active .tree-count {
    color: var(--on-accent);
    border-color: var(--on-accent);
    background: transparent;
}

/* Order book table reads denser than most lists — bump it above the
   global 12.5px .data-table size for comfortable scanning. */
.orders-pane .data-table { font-size: 13.5px; }

/* One toolbar row above the order table: supplier summary + clickable
   status chips + the Create Payment action pinned far right. */
.orders-pane .orders-toolbar {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.orders-pane .orders-toolbar .orders-create-btn { margin-left: auto; }
.orders-pane .status-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.orders-pane .status-chips a {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    text-decoration: none;
}
.orders-pane .status-chips a span { color: var(--muted); margin-left: 2px; font-size: 11px; }
.orders-pane .status-chips a:hover { border-color: var(--accent); color: var(--accent); }
.orders-pane .status-chips a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.orders-pane .status-chips a.active span { color: var(--on-accent); opacity: .85; }
.orders-pane .status-chips a.none { opacity: .5; }
/* Spare chip — amber accent to match the row badges; separated from the
   status chips because it filters room_state, not status. */
.orders-pane .status-chips a.chip-spare { border-color: rgba(245, 158, 11, 0.5); }
.orders-pane .status-chips a.chip-spare.active {
    background: #f59e0b; border-color: #f59e0b; color: #1a1305;
}
.orders-pane .status-chips a.chip-spare.active span { color: #1a1305; }

.orders-placeholder {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
}

/* Order status / payment status pills on the order book table. */
.order-status {
    display: inline-block;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--bg-elev);
}
.order-status.st-confirmed, .order-status.st-amended { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.order-status.st-sent                                 { color: var(--info); border-color: var(--info); background: var(--info-bg); }
.order-status.st-cancelled                            { color: var(--bad);  border-color: var(--bad);  background: var(--bad-bg); }
.order-status.pay-paid                                { color: var(--ok);   border-color: var(--ok);   background: var(--ok-bg); }
.order-status.pay-partial                             { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }

@media (max-width: 900px) {
    .finance-orders { flex-direction: column; }
    .finance-orders .supplier-tree { position: static; max-width: none; width: 100%; max-height: 40vh; }
}

/* ── Quick filter row (qf-form) — single-row layout ─────────────── */
form.qf-form {
    align-items: center;
    gap: .4rem !important;
    padding: 4px 0;
}
form.qf-form input,
form.qf-form select,
form.qf-form button.btn { height: 26px; font-size: 12.5px; }
/* Native controls otherwise keep the browser's grey border — match the
   qf-preset-select look so the whole filter row reads as one family. */
form.qf-form input,
form.qf-form select {
    background: var(--bg-elev, #f3f4f6);
    color: var(--text);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 4px;
}
form.qf-form input:focus,
form.qf-form select:focus { border-color: var(--accent); outline: none; }
/* Compact selects (placeholder-style first option, e.g. Kinds / Status /
   Payment on the Order List) — one size down, same as the quick-range. */
form.qf-form select.qf-sm { font-size: 12px; }
/* Global search box — magnifying glass inside a wider input. */
form.qf-form .qf-search { position: relative; display: inline-flex; align-items: center; }
form.qf-form .qf-search .qf-search-ico {
    position: absolute;
    left: 8px;
    font-size: 11px;
    opacity: .55;
    pointer-events: none;
}
form.qf-form .qf-search input[type="search"] {
    width: 17rem;
    padding-left: 26px;
}
form.qf-form input[type="date"] { padding: 2px 6px; }
form.qf-form input[type="text"],
form.qf-form input[type="search"] { padding: 3px 8px; }

/* ── flatpickr (Order List date range) — themed via app variables ────── */
.flatpickr-calendar {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bg-card); }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--bg-card); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday { color: var(--text-strong); fill: var(--text-strong); background: transparent; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--bg-card); color: var(--text-strong); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--bg-card); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--muted); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--muted); }
.flatpickr-day { color: var(--text); }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled { color: var(--muted); opacity: .45; }
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--accent-bg); border-color: transparent; color: var(--text); }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.flatpickr-day.inRange {
    background: var(--accent-bg);
    border-color: transparent;
    box-shadow: -5px 0 0 var(--accent-bg), 5px 0 0 var(--accent-bg);
    color: var(--text);
}
form.qf-form select.qf-preset-select,
form.qf-form select.qf-recent-select {
    padding: 2px 6px; font-size: 12px; color: var(--muted, #6b7280);
    background: var(--bg-elev, #f3f4f6);
    border: 1px solid var(--border, #d1d5db); border-radius: 4px;
    max-width: 12rem;
}


/* ── Topbar dropdown submenu (Finance) ──────────────────────────────── */
.topbar .nav .nav-dropdown { position: relative; }
.topbar .nav .nav-dropdown > a { display: inline-block; }
.nav-caret { font-size: 9px; opacity: .7; margin-left: 2px; }
.nav-drop-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 170px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 50;
}
.nav-dropdown:hover .nav-drop-menu,
.nav-dropdown:focus-within .nav-drop-menu { display: flex; }
.topbar .nav .nav-drop-menu a {
    color: var(--text);
    opacity: 1;
    padding: 7px 12px;
    white-space: nowrap;
}
.topbar .nav .nav-drop-menu a:hover { color: var(--accent); background: var(--accent-bg); }


/* ── Home dashboard ─────────────────────────────────────────────────── */
.dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}
.dash-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-strong);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-fast) ease;
}
.dash-action:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.dash-action--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dash-action--primary:hover { opacity: .92; }
.dash-action-icon { font-size: 15px; line-height: 1; }

.dash-section-title {
    margin: 26px 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.dash-tile {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
}
.dash-tile--link:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.dash-tile-num { font-size: 26px; font-weight: 700; color: var(--text-strong); line-height: 1.15; }
.dash-tile-label { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text); }
.dash-tile-sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}
.dash-grid--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dash-card {
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}
.dash-card--link { display: block; text-decoration: none; transition: all var(--duration-fast) ease; }
.dash-card--link:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.dash-card-head h3 { margin: 0; font-size: 13.5px; color: var(--text-strong); }
.dash-card-head .muted { font-size: 11.5px; }
.dash-amount { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.dash-card p { margin: 0; font-size: 12px; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-table td { padding: 5px 8px 5px 0; border-top: 1px solid var(--border); vertical-align: top; }
.dash-table tr:first-child td { border-top: 0; }
.dash-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-card-link { display: inline-block; margin-top: 8px; font-size: 11.5px; }

.dash-warn { color: var(--warn); font-weight: 600; }
.dash-empty { margin: 0; font-size: 12px; color: var(--muted); }
.dash-error {
    padding: 12px 16px;
    border: 1px solid var(--warn);
    border-radius: var(--radius-lg);
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 12.5px;
}

/* ── System → Settings ─────────────────────────────────────── */
.settings-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: start;
}
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 16px;
}
.settings-nav a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    border-left: 2px solid transparent;
}
.settings-nav a:hover { background: var(--bg-elev); }
.settings-nav a.active {
    background: var(--bg-elev);
    border-left-color: var(--accent);
    color: var(--text-strong);
    font-weight: 600;
}
.settings-nav-hint { font-size: 11px; padding: 10px 12px 0; line-height: 1.5; }
.settings-body { min-width: 0; max-width: 860px; }
@media (max-width: 760px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .settings-nav-hint { display: none; }
}

/* Customer Info notes (mid-col, below Comments) — plain-text paste box for
   guest names / jacket sizes from booking emails (V059 tour.customer_info).
   Shown on the dispatch pickup rows. */
.rp-customer-info .ci-textarea {
    width: 100%; min-height: 150px; resize: vertical;
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px; font-size: 12.5px; line-height: 1.45;
    font-family: inherit;
}
.rp-customer-info .ci-textarea:focus { border-color: var(--accent); outline: none; }