/* ==========================================================================
Advolo – base styles (MOD-012 restyle: clean, dense, functional)
Type: IBM Plex Sans (self-hosted, SIL OFL), tabular figures for data.
========================================================================== */
@font-face { font-family: "Plex"; src: url(../../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url(../../fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex"; src: url(../../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url(../../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex"; src: url(../../fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
/* surfaces */
--bg: #f3f4f6; /* canvas */
--card: #ffffff; /* surfaces */
--subtle: #f8f9fb; /* table heads, inset areas */
--line: #e2e5ea; /* hairlines */
--line-strong: #cbd0d8; /* control borders */
/* text */
--ink: #161a21;
--ink-2: #3a4250;
--muted: #646d7b;
--faint: #959cab;
/* action */
--primary: #2251b8;
--primary-hover: #1b4398;
--primary-soft: #eaf0fb;
--link: #2251b8;
/* status */
--ok: #18794e;
--warn: #a35c00;
--err: #c2382b;
/* legacy names used by module styles */
--navy: #1e2635;
--navy-2: #2a3446;
--accent: #2251b8;
--accent-ink: #ffffff;
--radius: 6px;
--ctl: 32px; /* control height */
font-size: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg);
line-height: 1.45; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 1.43rem; } h2 { font-size: 1.07rem; } h3 { font-size: .93rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; }
.mono { letter-spacing: .03em; font-weight: 500; }
::selection { background: #cfdcf6; }
/* Shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 216px; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 0 0 14px; flex-shrink: 0;
position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 18px; color: var(--ink); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; border-bottom: 1px solid var(--line); }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 26px; width: auto; }
.brand.big img { height: 36px; }
@media (prefers-reduced-motion: reduce) { .cal-panel { transition: none; } }
.brand.big { justify-content: center; border: 0; height: auto; padding: 0 0 18px; font-size: 1.3rem; }
.sidebar nav { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar nav a { display: flex; align-items: center; gap: 8px; color: var(--ink-2); padding: 6px 10px; border-radius: 5px; font-weight: 500; }
.sidebar nav a:hover { background: var(--subtle); color: var(--ink); text-decoration: none; }
.sidebar nav a.active { background: var(--primary-soft); color: var(--primary); }
.nav-section { font-size: .79rem; font-weight: 600; color: var(--faint); padding: 14px 10px 4px; }
.sidebar-foot { margin-top: auto; padding: 12px 18px 0; font-size: .75rem; color: var(--faint); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.topbar-title { font-weight: 600; font-size: 1.07rem; }
.topbar-user { display: flex; gap: 14px; align-items: center; font-size: .9rem; color: var(--ink-2); }
.topbar-user .badge { background: none; padding: 0; color: var(--muted); font-weight: 500; font-size: .9rem; border-left: 1px solid var(--line); padding-left: 14px; border-radius: 0; }
.content { padding: 20px 24px 40px; max-width: 1440px; width: 100%; }
/* Cards & layout */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.card.narrow { max-width: 520px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card > h2:first-child, .card > h3:first-child { margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.grid-main-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.grid-3 > .card, .grid-2 > .card { margin-bottom: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin-bottom: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.stat { padding: 14px 18px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-label { color: var(--muted); font-size: .86rem; }
.stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
/* Forms */
.form label { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; font-weight: 500; color: var(--ink-2); margin-bottom: 12px; }
.form label small { font-weight: 400; color: var(--muted); }
.form label.check, .check { flex-direction: row; align-items: center; gap: 7px; font-weight: 400; color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 22px; }
input, select, textarea { font: inherit; min-height: var(--ctl); padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; color: var(--ink); width: 100%; }
textarea { padding: 7px 9px; }
select { padding-right: 6px; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: #b3bac5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(34, 81, 184, .15); }
input[readonly] { background: var(--subtle); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 2px; margin: 0 0 16px; }
legend { font-weight: 600; font-size: .86rem; padding: 0 6px; color: var(--ink); }
form.inline { display: flex; gap: 8px; align-items: center; }
form.inline input { width: 240px; }
.w-60 { width: 64px; } .w-300 { max-width: 320px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl); padding: 0 13px; border-radius: 5px; border: 1px solid var(--line-strong);
background: #fff; color: var(--ink); font: inherit; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--subtle); border-color: #b3bac5; text-decoration: none; }
.btn:active { background: #eef0f3; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.block { width: 100%; }
/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; font-size: .82rem; font-weight: 500; color: var(--muted); background: var(--subtle); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 10px; white-space: nowrap; }
.table td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.card > .table:last-child tr:last-child td, .card > form > .table:last-child tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafbfc; }
.table.compact td { padding: 5px 10px; }
.table.compact th { padding: 5px 10px; }
.table tr.inactive td { color: var(--faint); }
.table tr.positioning td { color: var(--muted); }
.table tr.total td { font-weight: 600; border-top: 1px solid var(--ink); }
.table .num, .num { text-align: right; white-space: nowrap; }
.legs-input td { padding: 4px; } .legs-input input { padding: 4px 8px; }
.nowrap { white-space: nowrap; }
/* Bits */
.muted { color: var(--muted); } .small { font-size: .86rem; }
.badge { display: inline-block; background: #eef0f3; color: var(--ink-2); border-radius: 4px; padding: 1px 7px; font-size: .8rem; font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; padding: 1px 7px; font-size: .8rem; font-weight: 500; line-height: 1.5; vertical-align: middle; white-space: nowrap; background: #eef0f3; color: var(--ink-2); }
.pill.active { background: #e3f3ea; color: var(--ok); }
.pill.draft { background: #fbf0dc; color: var(--warn); }
.pill.inactive { background: #eef0f3; color: var(--muted); }
.ok { color: var(--ok); font-weight: 600; } .todo { color: var(--warn); font-weight: 500; }
/* MOD-095 notices: a flat tinted block – no border, no rounded corners, no coloured left edge */
.alert { padding: 10px 14px; border: 0; border-radius: 0; margin-bottom: 12px; background: #e9edf4; color: var(--ink); }
.alert.success { background: #e2f1e8; color: #12432a; }
.alert.error { background: #fae3e0; color: #7d1b12; }
.alert.warning { background: #faeed8; color: #5f3f05; }
.alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.alert.small { padding: 6px 10px; font-size: .86rem; margin-bottom: 6px; }
.dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: .93rem; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; }
details summary { cursor: pointer; color: var(--link); font-weight: 500; margin: 6px 0; }
/* Aircraft header & tabs */
.aircraft-head { margin-bottom: 8px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--primary); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
/* Quotes */
.quote-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.quote-total { text-align: right; }
.quote .price, .quote-total .price { font-size: 1.36rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.quote .price.na { font-size: 1rem; color: var(--err); }
.quote.unavailable { opacity: .75; }
/* Auth pages */
body.auth, .auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
/* MOD-094 a light, blue-grey photo of an apron behind the sign-in pages */
.auth { background: #eef0f4 url(../../brand/login-bg.webp?v=1) center 58% / cover no-repeat; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 28px; width: 100%; max-width: 380px; box-shadow: 0 18px 50px -20px rgba(22, 33, 58, .35); }
.auth-card.wide { max-width: 860px; }
form.inline select { width: auto; }
.quote-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; align-items: start; }
.scroll-x { overflow-x: auto; }
/* MOD-038: the itinerary needs ~720 px – stack the price lines below it on narrower screens */
@media (max-width: 1440px) { .quote-body { grid-template-columns: 1fr; } .price-lines { max-width: 560px; } }
/* MOD-002: badges, statuses, calendar, requests */
.nav-badge.err { background: var(--err); }
.nav-badge { display: inline-block; margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 600; text-align: center; line-height: 18px; }
.tabs .nav-badge, .btn .nav-badge, h2 .nav-badge { margin-left: 6px; }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: #fdf5f4; border-color: #e7b5ae; }
.mt { margin-top: 14px; }
.card.narrow-wide { max-width: 900px; }
.card.highlight { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
a.stat.link { color: inherit; } a.stat.link:hover { text-decoration: none; background: var(--subtle); }
.stat-value.hot { color: var(--primary); }
.inline-label { flex-direction: row !important; align-items: center; gap: 8px !important; margin: 0 !important; }
.inline-label select { width: auto; }
.search-bar { align-items: center; }
.pill.st-unanswered { background: #fbf0d9; color: var(--warn); }
.pill.st-accepted { background: #e3edfb; color: var(--link); }
.pill.st-booking_requested { background: #fde7c7; color: #9a4b00; }
.pill.st-booked { background: #ddf3e6; color: var(--ok); }
.pill.st-declined, .pill.st-cancelled { background: #eceef2; color: var(--muted); }
.st-text-booked, .st-text-accepted { color: var(--ok); font-weight: 600; }
.st-text-booking_requested, .st-text-unanswered { color: var(--warn); font-weight: 600; }
.st-text-declined, .st-text-cancelled { color: var(--muted); }
.table tr.unread td { font-weight: 600; }
.table tr.picked td { background: #f3f7fd; }
.clamp { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itin { white-space: nowrap; }
.ac-details summary { color: var(--link); }
.ac-details[open] { padding-bottom: 6px; }
/* MOD-054 search results: details in a full-width row under the result */
.ac-toggle { all: unset; cursor: pointer; color: var(--link); display: inline; line-height: 1.35; padding-left: 13px; position: relative; }
.ac-toggle::before { content: ''; position: absolute; left: 0; top: .42em; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s; }
.ac-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.ac-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.ac-toggle .muted { margin-left: 4px; white-space: nowrap; }
.ac-toggle .ac-mini { position: relative; top: -1px; }
.ac-toggle .group-pill { margin-right: 6px; }
.table.results td { line-height: 1.35; }
.ac-details { display: none; } /* MOD-136: phones only */
.table.results tr.ac-row:has(input.pick) { cursor: pointer; }
.table.results td.cat { white-space: nowrap; }
.table.results .ac-mini { margin: -6px 8px -6px 0; }
.table.results tr.open td { border-bottom-color: transparent; background: #fafbfc; }
.table.results tr.ac-more > td { background: #fafbfc; padding-top: 0; padding-bottom: 14px; }
.table.results tr.ac-more:hover td { background: #fafbfc; }
.table.results tr.ac-more.picked td { background: #f3f7fd; }
.ac-more-body { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; max-width: 980px; }
.ac-more-body p { margin: 0; }
.ac-more-body .photo-strip { margin: 0 0 2px; }
.itin-broker { border-collapse: collapse; margin-top: 4px; width: 100%; max-width: 760px; font-size: .84rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.itin-broker th { text-align: left; font-weight: 500; color: var(--muted); font-size: .76rem; padding: 6px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.itin-broker td { padding: 8px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }
.itin-broker tr:last-child td { border-bottom: 0; }
.itin-broker th.num, .itin-broker td.num { text-align: right; width: 64px; font-variant-numeric: tabular-nums; }
.itin-broker .arrow { width: 24px; text-align: center; color: var(--muted); padding-left: 0; padding-right: 0; }
.itin-broker strong { font-size: .88rem; }
.itin-broker .when { color: var(--ink2, #3b4350); font-size: .78rem; white-space: nowrap; margin-top: 1px; }
.itin-broker .via { margin-top: 3px; }
.request-bar { position: sticky; bottom: 0; display: flex; gap: 16px; align-items: flex-end; z-index: 5; border-top: 2px solid var(--primary); }
.request-bar .grow { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 8px 12px; border-radius: 6px; background: var(--subtle); border: 1px solid var(--line); }
.msg.mine { align-self: flex-end; background: var(--primary-soft); border-color: #d3def5; }
.msg-system { align-self: center; background: transparent; border: 1px dashed var(--line); font-size: .85rem; color: var(--muted); }
.msg-body { white-space: normal; }
.cal-range { margin-left: 8px; align-self: center; }
.timeline { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tl-row { display: flex; border-bottom: 1px solid var(--line); min-height: 48px; }
.tl-row:last-child { border-bottom: 0; }
.tl-head { min-height: 30px; background: var(--subtle); }
.tl-label { width: 170px; flex-shrink: 0; padding: 6px 10px; border-right: 1px solid var(--line); font-size: .88rem; }
.tl-track { position: relative; flex: 1; min-width: 0; }
.tl-day { position: absolute; top: 0; bottom: 0; font-size: .72rem; color: var(--muted); padding: 7px 4px; border-left: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.tl-day.weekend { background: #f4f5f8; }
.tl-day:hover { background: #e6eefb; text-decoration: none; }
.tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid #eef0f4; }
.tl-now { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--err); z-index: 2; }
.ev { position: absolute; top: 10px; height: 28px; border-radius: 4px; font-size: .7rem; color: #fff; overflow: hidden; white-space: nowrap; z-index: 1; display: flex; align-items: center; padding: 0 3px; min-width: 4px; }
.ev span { overflow: hidden; text-overflow: ellipsis; }
.ev:hover { text-decoration: none; filter: brightness(1.15); z-index: 3; }
.ev-trip { background: var(--navy); }
.ev-sector { background: #2f6db5; }
.ev-pos { background: #8a94a8 !important; }
.ev-standby { background: #c9d3e6 !important; color: var(--navy); top: 16px; height: 16px; }
.ev-option { background: repeating-linear-gradient(45deg, #c8a45a, #c8a45a 4px, #dcc28a 4px, #dcc28a 8px) !important; color: var(--accent-ink); }
.ev-block { background: repeating-linear-gradient(45deg, #c0392b, #c0392b 5px, #d4605a 5px, #d4605a 10px); top: 4px; height: 40px; opacity: .85; }
.legend { display: flex; gap: 18px; margin-top: 10px; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; position: static; }
.legend i.ev-trip { background: var(--navy); } .legend i.ev-sector { background: #2f6db5; } .legend i.ev-pos { background: #8a94a8; }
.legend i.ev-option { background: #c8a45a; } .legend i.ev-standby { background: #c9d3e6; position: static; height: 10px; } .legend i.ev-block { background: #c0392b; }
@media (max-width: 900px) {
.tl-label { width: 90px; }
.request-bar { flex-direction: column; align-items: stretch; }
.stat { border-right: 0; border-bottom: 1px solid var(--line); }
.grid-2, .grid-3, .grid-main-side { grid-template-columns: minmax(0, 1fr); }
.table { display: block; overflow-x: auto; }
}
[hidden] { display: none !important; }
/* MOD-004: profiles, photos */
.small-tabs { margin-bottom: 12px; }
.small-tabs a { padding: 6px 12px; font-size: .88rem; }
.inline-form { display: inline; margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.danger-text { color: var(--err); }
ul.plain { list-style: none; padding: 0; margin: 0 0 10px; }
ul.plain li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.aircraft-head { display: flex; gap: 16px; align-items: center; }
.ac-thumb { width: 120px; height: 72px; object-fit: cover; border-radius: 4px; }
.ac-mini { width: 44px; height: 28px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.photo-grid figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fafbfc; }
.photo-grid figure.main { border-color: var(--accent); }
.photo-grid img { width: 100%; height: 150px; object-fit: cover; display: block; }
.photo-grid figcaption { padding: 6px 10px; font-size: .82rem; display: flex; gap: 6px; align-items: center; }
.photo-strip { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.photo-strip img { width: 120px; height: 76px; object-fit: cover; border-radius: 6px; display: block; }
/* MOD-005: scheduled trips */
.trip-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.trip-head h1 { font-size: 1.3rem; margin: 0; }
.pill.ts-planning { background: #fff3b0; color: #6b5800; }
.pill.ts-ready { background: #e3edfb; color: var(--link); }
.pill.ts-released { background: #e8e1fa; color: #5b3fb0; }
.pill.ts-completed { background: #ddf3e6; color: var(--ok); }
.pill.ts-cancelled { background: #eceef2; color: var(--muted); }
.progress { width: 90px; height: 7px; background: #eceef2; border-radius: 4px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ok); }
.checklist .check-ok { color: var(--ok); font-weight: 800; font-size: 1.1rem; }
.checklist .check-open { color: #b9bfcc; font-size: 1.1rem; }
.check-form { display: inline-flex; gap: 6px; align-items: center; }
.note-input { width: 150px; padding: 4px 8px; font-size: .82rem; }
.notes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.note { background: var(--subtle); padding: 8px 12px; font-size: .93rem; }
.center { text-align: center; }
/* MOD-006: quote editor */
.quote-editor .legs-edit td, .quote-editor .lines-edit td { padding: 4px; vertical-align: middle; }
.quote-editor input, .quote-editor select { padding: 5px 7px; }
.w-icao { width: 70px; text-transform: uppercase; }
.w-50 { width: 56px; } .w-90 { width: 100px; } .w-name { min-width: 200px; } .w-auto { width: auto; }
.quote-editor label.check { font-size: .8rem; margin: 0; }
.quote-foot { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 12px; }
.quote-foot .totals td { padding: 5px 8px; }
@media (max-width: 900px) { .quote-foot { grid-template-columns: 1fr; } }
fieldset.locked input[readonly] { background: #f4f5f7; color: var(--muted); }
/* MOD-010: calendar views, status colours, side panel, schedule check */
.st-quote { --st: #e0a526; --st-ink: #3d2a00; --st-bg: #fff4d6; }
.st-scheduled { --st: #2f6db5; --st-ink: #fff; --st-bg: #e3edfb; }
.st-released { --st: #1f8a4c; --st-ink: #fff; --st-bg: #ddf3e6; }
.st-own { --st: #6d55a3; --st-ink: #fff; --st-bg: #ece7f6; }
.st-empty { --st: #8a94a8; --st-ink: #fff; --st-bg: #eef0f4; }
.st-standby { --st: #c9d3e6; --st-ink: var(--navy); --st-bg: #f2f5fa; }
.st-unavailable { --st: #c0392b; --st-ink: #fff; --st-bg: #fdecea; }
.st-issue { --st: #c0392b; --st-ink: #fff; --st-bg: #fff; }
.pill.err { background: #fdecea; color: var(--err); }
.cal-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; height: var(--ctl); }
.seg a { display: flex; align-items: center; padding: 0 13px; font-weight: 500; color: var(--ink-2); border-right: 1px solid var(--line-strong); }
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--primary-soft); color: var(--primary); }
.seg a:hover { text-decoration: none; }
.cal-range { margin-left: 6px; }
.cal-options { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 0; margin-bottom: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .86rem; }
.cal-options label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; color: var(--muted); white-space: nowrap; }
.cal-options select { min-height: 28px; padding: 2px 6px; font-size: .86rem; width: auto; }
.cal-options label.check { font-weight: 500; color: var(--ink); }
.cal-issues .small { margin-top: 3px; }
.sev { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--warn); }
.sev.sev-error { background: var(--err); }
/* timeline */
.ev.st-quote, .ev.st-scheduled, .ev.st-released, .ev.st-own, .ev.st-empty, .ev.st-standby, .ev.st-unavailable { background: var(--st); color: var(--st-ink); }
.ev.st-quote { background: repeating-linear-gradient(45deg, #e0a526, #e0a526 4px, #edc368 4px, #edc368 8px); }
.ev.ev-blockbar { background: repeating-linear-gradient(45deg, #c0392b, #c0392b 5px, #d4605a 5px, #d4605a 10px); top: 4px; height: 40px; opacity: .85; }
.ev.has-issue { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--err); }
.ev.has-issue.issue-warning { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--warn); }
.tl-day.today { background: #e6eefb; color: var(--navy); font-weight: 700; }
.tl-cell { position: absolute; top: 0; bottom: 0; border-left: 1px solid #eef0f4; }
.tl-cell:hover { background: rgba(47, 109, 181, .06); }
.tl-gap { position: absolute; top: 6px; height: 36px; border: 2px dashed var(--err); border-radius: 4px; background: rgba(192, 57, 43, .08); color: var(--err); font-size: .68rem; font-weight: 700;
display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 6px 1px; overflow: hidden; white-space: nowrap; z-index: 1; }
.tl-gap:hover { background: rgba(192, 57, 43, .16); text-decoration: none; }
.issue-dot { display: inline-block; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; background: var(--err); color: #fff !important; font-size: .7rem; font-weight: 800; text-align: center; margin-left: 4px; }
.issue-dot:hover { text-decoration: none; }
.legend i[class^="st-"] { background: var(--st); }
.legend i.st-quote { background: repeating-linear-gradient(45deg, #e0a526, #e0a526 3px, #edc368 3px, #edc368 6px); }
.legend i.st-unavailable { background: repeating-linear-gradient(45deg, #c0392b, #c0392b 3px, #d4605a 3px, #d4605a 6px); }
.legend i.st-issue { background: #fff; border: 2px dashed var(--err); }
/* week */
.wk-wrap { overflow-x: auto; }
.wk { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wk th, .wk td { border: 1px solid var(--line); vertical-align: top; }
.wk thead th { background: var(--subtle); font-size: .82rem; font-weight: 500; color: var(--muted); padding: 6px 8px; text-align: left; }
.wk thead th span { color: var(--faint); font-weight: 400; }
.wk th.wk-ac { width: 120px; text-align: left; padding: 8px; font-size: .9rem; background: #fbfbfc; }
.wk .weekend { background: #fafbfc; }
.wk .today { background: #f2f7ff; }
.wk-cell { padding: 4px; height: 92px; cursor: pointer; }
.wk-cell:hover { background: #f5f8fd; }
.wk-cell .idle { font-size: .72rem; color: #a3aab8; padding: 2px 4px; }
.cal-card-trip { display: block; overflow: hidden; margin-bottom: 4px; background: var(--st-bg); border-radius: 0; padding: 3px 5px; color: var(--ink); font-size: .74rem; line-height: 1.35; }
.cal-card-trip:hover { text-decoration: none; filter: brightness(.97); }
.cal-card-trip.st-quote { background: repeating-linear-gradient(45deg, #fff4d6, #fff4d6 6px, #fdebb9 6px, #fdebb9 12px); }
.ct-head { display: flex; gap: 4px; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ct-head strong { overflow: hidden; text-overflow: ellipsis; }
.ct-head .cont { color: var(--st); font-size: .65rem; }
.ct-leg { display: flex; flex-wrap: wrap; gap: 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-leg .ap { font-weight: 700; }
.ct-leg .arrow { color: var(--muted); }
.ct-leg .pax, .mo-leg .pax { margin-left: auto; color: var(--muted); }
.ct-leg.pos, .mo-leg.pos { color: var(--muted); }
.cal-chip { display: block; margin-bottom: 4px; padding: 2px 6px; border-radius: 4px; font-size: .72rem; font-weight: 700; color: #fff;
background: repeating-linear-gradient(45deg, #c0392b, #c0392b 5px, #d4605a 5px, #d4605a 10px); }
.cal-chip:hover { text-decoration: none; }
.cal-issue { display: block; margin-bottom: 4px; padding: 2px 5px; border: 1px dashed var(--warn); border-radius: 4px; font-size: .7rem; font-weight: 700; color: var(--warn); background: #fffaf0; }
.cal-issue.sev-error { border-color: var(--err); color: var(--err); background: #fff5f4; }
.cal-issue:hover { text-decoration: none; background: #fdecea; }
/* month */
.mo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.mo-wd { padding: 6px 8px; font-size: .82rem; font-weight: 500; color: var(--muted); background: var(--subtle); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mo-day { min-height: 110px; padding: 3px 4px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .72rem; min-width: 0; }
.mo-day.weekend { background: #fafbfc; }
.mo-day.out { background: #f4f5f7; }
.mo-day.out > *:not(.mo-num) { opacity: .55; }
.mo-day.today { background: #f2f7ff; }
.mo-day.today .mo-num span { background: var(--primary); color: #fff; border-radius: 4px; padding: 0 5px; }
.mo-num { display: flex; justify-content: space-between; font-weight: 600; color: var(--ink-2); margin-bottom: 3px; font-size: .82rem; }
.mo-add { visibility: hidden; color: var(--muted); font-weight: 800; padding: 0 4px; }
.mo-day:hover .mo-add { visibility: visible; }
.mo-trip { display: block; margin-bottom: 3px; background: var(--st-bg); border-radius: 0; padding: 1px 4px; color: var(--ink); overflow: hidden; }
.mo-trip.st-quote { background: repeating-linear-gradient(45deg, #fff4d6, #fff4d6 6px, #fdebb9 6px, #fdebb9 12px); }
.mo-trip:hover { text-decoration: none; filter: brightness(.96); }
.mo-trip-head { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-leg { display: flex; gap: 3px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.mo-line { display: block; margin-bottom: 3px; padding: 1px 4px; border-radius: 3px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: repeating-linear-gradient(45deg, #c0392b, #c0392b 5px, #d4605a 5px, #d4605a 10px); }
.mo-line:hover { text-decoration: none; }
.mo-idle { display: block; color: #a3aab8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-idle:hover { color: var(--navy); }
/* side panel */
.cal-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%; background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(22, 26, 33, .10); z-index: 50;
transform: translateX(105%); transition: transform .18s ease; overflow-y: auto; }
.cal-panel.open { transform: none; }
.cal-panel-close { position: absolute; top: 10px; right: 10px; border: 0; background: rgba(255,255,255,.85); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 1rem; z-index: 2; }
.cal-panel-body.loading { opacity: .5; }
.peek-head { padding: 18px 48px 14px 18px; background: var(--st-bg); }
.peek-head h3 { margin: 2px 0 4px; }
.peek > p, .peek > table, .peek-issues, .peek-actions, .peek-quick, .peek > .peek-issue { margin: 14px 18px; }
.peek > table { width: calc(100% - 36px); }
.peek-legs th, .peek-legs td { font-size: .8rem; padding: 6px 5px; }
.peek-legs tr.current td { background: #f2f7ff; font-weight: 600; }
.st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--st); margin-right: 6px; vertical-align: middle; }
.peek-issue { padding: 8px 10px; border-radius: 0; border: 0; background: #faeed8; font-size: .84rem; margin-bottom: 8px; }
.peek-issue.sev-error { border-color: #f3c0b9; background: #fdecea; }
.peek-issue .btn { margin-top: 6px; }
.peek-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.peek-quick { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.peek-quick .small.muted { width: 100%; }
.peek-quick select { padding: 5px; }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.chk-ac { margin: 18px 0 6px; }
@media (max-width: 900px) { .cal-panel { width: 100%; } .wk-cell { height: auto; } }
/* MOD-011: empty legs */
.pill.el-pending { background: #fbf0d9; color: var(--warn); }
.pill.el-published { background: #ddf3e6; color: var(--ok); }
.pill.el-withdrawn, .pill.el-cancelled { background: #eceef2; color: var(--muted); }
.pill.el-booked { background: #e3edfb; color: var(--link); }
.warn-text { color: var(--warn); }
.peek-el { margin: 14px 18px; display: grid; gap: 6px; }
.el-filter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.el-filter label { margin: 0; }
.el-list { display: grid; }
.el-item { display: grid; grid-template-columns: 96px 1.3fr 1.2fr 1.4fr auto; gap: 16px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.el-item:last-child { border-bottom: 0; }
.el-item:hover { text-decoration: none; background: #fafbfc; }
.el-photo { width: 96px; height: 60px; border-radius: 4px; overflow: hidden; background: #eef1f6; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.4rem; }
.el-photo img { width: 100%; height: 100%; object-fit: cover; }
.el-icao { font-size: 1.07rem; font-weight: 600; color: var(--ink); }
.el-icao span { color: var(--faint); font-weight: 400; }
.el-price { font-size: 1.07rem; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.el-hint .small { margin-top: 3px; }
.card form > .row-actions { margin-top: 12px; }
@media (max-width: 1100px) { .el-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .el-item { grid-template-columns: 80px 1fr 1fr; } .el-photo { width: 80px; } }
/* MOD-012: details */
.el-filter label { display: flex; flex-direction: column; gap: 5px; font-size: .86rem; color: var(--ink-2); font-weight: 500; }
.el-price .small, .quote-total .small { font-weight: 400; }
.wk th.wk-ac .small { font-weight: 400; }
.wk th.wk-ac a { font-weight: 600; }
.tl-label strong { font-weight: 600; }
/* MOD-013: airport autocomplete */
.ap-menu { position: fixed; z-index: 100; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
box-shadow: 0 8px 24px rgba(22, 26, 33, .12); max-height: 340px; overflow-y: auto; max-width: 520px; font-size: .93rem; }
.ap-menu li { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; cursor: pointer; }
.ap-menu li.on, .ap-menu li:hover { background: var(--primary-soft); }
.ap-menu li.ap-empty { display: block; color: var(--muted); cursor: default; }
.ap-menu li.ap-empty:hover { background: none; }
.ap-code { font-weight: 600; letter-spacing: .02em; }
.ap-code small { display: block; font-weight: 400; color: var(--faint); font-size: .8rem; }
.ap-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-name small { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.ap-rwy { color: var(--faint); font-size: .8rem; white-space: nowrap; }
/* MOD-022 airport fees */
.fee-filter { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.fee-filter input { width: 300px; max-width: 100%; }
.fee-table td { vertical-align: middle; padding-top: 5px; padding-bottom: 5px; }
.fee-table .fee-name { min-width: 140px; }
.fee-table .fee-basis { min-width: 200px; max-width: 250px; }
.fee-table .w-90 { width: 84px; }
.fee-table td, .fee-table th { padding-left: 6px; padding-right: 6px; }
.fee-table input:disabled { background: var(--subtle); color: var(--muted, #959cab); }
.w-time { width: 92px; }
.fee-example .grid-2 { gap: 0 12px; }
.fee-below { align-items: start; }
.fee-below .card { margin-bottom: 0; }
.fee-below { gap: 16px; margin-top: 16px; }
.fee-fieldset { min-width: 0; }
.fee-table .w-time { width: 100px; }
.checks-group { flex-basis: 100%; margin-top: 4px; font-weight: 600; }
/* MOD-024 passenger taxes */
.tax-list { display: flex; flex-direction: column; gap: 8px; }
.tax-item { display: flex !important; flex-direction: row !important; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; margin: 0 !important; color: var(--ink) !important; font-weight: 400 !important; }
.tax-item input { width: auto; min-height: 0; margin-top: 3px; }
.tax-item.on { border-color: var(--primary); background: var(--primary-soft); }
.tax-item > div { display: flex; flex-direction: column; gap: 3px; }
.tax-name { font-weight: 600; }
/* MOD-025 currencies: the second amount (converted, or as quoted) */
.fx-sub { color: var(--muted); font-size: .8rem; font-weight: 400; white-space: nowrap; }
div.fx-sub { margin-top: 1px; }
.price .fx-sub { font-size: .78rem; letter-spacing: 0; }
/* MOD-028 manual */
.topbar-help { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .84rem; color: var(--ink-2); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.topbar-help:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.topbar-help-page { color: var(--muted); }
.man-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.man-tabs { margin: 0; border: 0; }
.man-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.man-search { position: relative; }
.man-search input { width: 340px; max-width: 70vw; }
.man-suggest { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; width: 460px; max-width: 90vw; background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); overflow: hidden; }
.man-suggest a, .man-result { display: block; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.man-suggest a:hover, .man-suggest a.on, .man-result:hover { background: var(--primary-soft); text-decoration: none; }
.man-suggest .small, .man-result .small { color: var(--ink-2); margin-top: 2px; }
.man-suggest .none { padding: 9px 12px; color: var(--muted); font-size: .86rem; }
mark { background: #fff1b8; color: inherit; padding: 0 1px; border-radius: 2px; }
.man-chapters { columns: 2 420px; column-gap: 16px; }
.man-chapter { break-inside: avoid; display: inline-block; width: 100%; }
.man-chapter ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.man-chapter li a { font-weight: 600; }
.man-pick { color: var(--ink); } .man-pick:hover { border-color: var(--primary); text-decoration: none; }
.man-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.man-nav { position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; font-size: .88rem; }
.man-nav a { padding: 4px 8px; border-radius: 5px; color: var(--ink-2); }
.man-nav a:hover { background: var(--subtle); text-decoration: none; }
.man-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.man-nav .man-home { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.man-nav-chapter { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 8px 3px; }
.man-article { padding: 26px 32px 30px; }
.man-article h1 { font-size: 1.55rem; margin: 4px 0 6px; letter-spacing: -.01em; }
.man-lead { font-size: 1.02rem; color: var(--ink-2); margin: 0 0 14px; }
.man-body { max-width: 860px; line-height: 1.6; }
.man-body h2 { font-size: 1.16rem; margin: 28px 0 8px; padding-top: 6px; }
.man-body h3 { font-size: 1rem; margin: 20px 0 6px; }
.man-body p, .man-body ul, .man-body ol { margin: 0 0 12px; }
.man-body li { margin: 3px 0; }
.man-body code { background: var(--subtle); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .86em; }
.man-body a.man-screen { font-weight: 500; }
.man-body a.man-screen::after { content: " ↗"; font-size: .8em; }
.man-shot { margin: 14px 0 20px; }
.man-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 4px 16px rgba(16, 24, 40, .08); }
.man-shot figcaption { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.man-callout { border: 0; background: var(--primary-soft); border-radius: 0; padding: 10px 14px; margin: 0 0 14px; }
.man-callout.important { background: #faeed8; }
.man-callout.tip { background: #e2f1e8; }
.man-table td, .man-table th { vertical-align: top; }
.man-crumb a { color: var(--muted); }
.man-open { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; color: var(--muted); }
.man-toc { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px; background: var(--subtle); border-radius: 6px; margin: 0 0 18px; }
.man-toc strong { width: 100%; font-size: .78rem; color: var(--muted); font-weight: 600; }
.man-prevnext { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 14px; font-weight: 500; }
.man-mod { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.man-mod h3 { margin: 2px 0 4px; font-size: 1rem; }
.man-print-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.man-cover { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 40px; margin-bottom: 16px; }
.man-cover h1 { font-size: 2rem; margin: 26px 0 4px; }
.man-print-toc { columns: 2; margin-top: 24px; }
.man-print-ch { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 26px 0 10px; }
.man-print-page { background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px; }
@media (max-width: 900px) { .man-layout { grid-template-columns: 1fr; } .man-nav { position: static; max-height: none; } .man-article { padding: 18px; } }
@media print {
.sidebar, .topbar, .no-print, .man-head, .man-nav, .man-prevnext, .man-open { display: none !important; }
.shell, .main, .content { display: block; margin: 0; padding: 0; background: #fff; }
body { background: #fff; font-size: 11pt; }
.man-cover, .man-print-page { border: 0; padding: 0; page-break-after: always; }
.man-shot img { box-shadow: none; max-height: 120mm; width: auto; }
.man-shot, .man-callout, .man-table { break-inside: avoid; }
a { color: inherit; }
}
/* MOD-029 administration */
.viewas-bar { position: sticky; top: 0; z-index: 40; background: #7c2d12; color: #fff; padding: 8px 18px; font-size: .9rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.viewas-bar .btn { background: #fff; color: #7c2d12; border-color: #fff; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: var(--ink); }
a.admin-tile[href]:hover { border-color: var(--primary); text-decoration: none; }
.admin-tile.warn { border-color: #f59e0b; background: #fffbeb; }
.admin-num { font-size: 1.7rem; font-weight: 600; line-height: 1.2; margin: 2px 0; }
.err-text { color: #b42318; font-weight: 500; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-user-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.view-as-form { display: inline-flex; gap: 6px; align-items: center; }
tr.selected-row td { background: var(--primary-soft); }
.mt { margin-top: 14px; }
/* MOD-029 service desk */
.sd-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sd-msg { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--card); }
.sd-msg.admin { background: var(--primary-soft); border-color: #cddcf7; }
.sd-msg.internal { background: #fff7ed; border-color: #fed7aa; border-style: dashed; }
.sd-body { margin-top: 4px; line-height: 1.55; }
.sd-event { padding: 2px 4px; }
.sd-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sd-files a { display: flex; flex-direction: column; gap: 4px; max-width: 220px; }
.sd-files img { max-width: 220px; max-height: 140px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; }
/* MOD-030 monitoring */
.log-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 12px 14px; }
.log-filters label { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--muted); margin: 0; }
.log-filters select, .log-filters input { width: auto; max-width: 190px; font-size: .88rem; }
.log-filter-btns { display: flex; gap: 6px; }
.log-table td { vertical-align: top; }
.log-table tr.lv-warning td { background: #fdf7ec; }
.log-table tr.lv-error td, .log-table tr.lv-critical td { background: #fcefed; }
.log-url { word-break: break-all; }
.log-json { background: var(--subtle, #f6f7f9); border: 1px solid var(--line); border-radius: 5px; padding: 10px 12px; font-size: .8rem; line-height: 1.45; max-height: 520px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; }
.log-dl { grid-template-columns: 130px 1fr; }
.log-diff { border-collapse: collapse; font-size: .8rem; }
.log-diff th { text-align: left; font-weight: 500; color: var(--muted); padding: 1px 8px 1px 0; white-space: nowrap; vertical-align: top; }
.log-diff td { padding: 1px 4px; vertical-align: top; word-break: break-word; }
.log-diff td.old { color: #9b2c2c; text-decoration: line-through; text-decoration-color: rgba(155,44,44,.4); }
.log-diff td.new { color: var(--ok); }
.log-detail { border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
.log-detail summary { color: var(--ink); font-weight: 400; font-size: .9rem; }
.log-bars { display: flex; gap: 3px; align-items: flex-end; height: 150px; padding-top: 6px; }
.log-bar { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; color: var(--muted); }
.log-bar:hover { text-decoration: none; }
.log-bar .b { display: flex; flex-direction: column; justify-content: flex-end; background: #c9d8f3; border-radius: 3px 3px 0 0; min-height: 1px; overflow: hidden; }
.log-bar:hover .b { background: var(--primary); }
.log-bar .b .e { background: var(--err); } .log-bar .b .s { background: #d9911c; }
.log-bar .l { font-size: .68rem; text-align: center; margin-top: 3px; }
.log-status-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.log-status-form input { flex: 1; min-width: 220px; }
.log-keep { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.admin-tiles.log-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pill.st-cancel-req { background: #fdecea; color: #a12a1e; }
.card.highlight-warn { border-color: #e7b5ae; box-shadow: 0 0 0 1px #e7b5ae inset; background: #fffafa; }
/* MOD-036 seasonal winds */
.wind-head { color: var(--err); }
.wind-tail { color: var(--ok); }
.wind-map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.wind-map div { text-align: center; padding: .3rem 0; border-radius: 4px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.nav-badge.warn { background: var(--warn); }
/* MOD-038 calculated vs quoted price */
.dev-line { color: var(--muted); white-space: nowrap; }
.dev-over { color: var(--warn); font-weight: 600; }
.dev-hint.dev-over { font-weight: 500; }
.dev-card-warn { background: #fdf7ec; border-color: #f0e2c6; }
/* MOD-039 aircraft groups */
.group-pill { background: var(--accent-soft, #e8eefc); color: var(--accent, #1f4fd1); font-size: .72rem; }
fieldset.group-cat { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .8rem .6rem; margin: 0 0 .8rem; }
fieldset.group-cat legend { font-size: .8rem; color: var(--muted); padding: 0 .3rem; }
fieldset.group-cat label.check { display: flex; gap: .4rem; align-items: baseline; margin: .25rem 0; }
/* MOD-042 fuel stops */
.fuel-stop { color: var(--warn); font-size: .78rem; font-weight: 600; white-space: nowrap; }
/* MOD-053 airport fuel-stop use */
.ap-fuel { color: var(--ok, #1a7f4b); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.ap-fuel.never { color: var(--muted); }
.ap-note { display: block; color: var(--muted); font-size: .76rem; line-height: 1.35; margin-top: 2px; }
.fuel-check { display: inline-flex; margin-left: 4px; }
/* MOD-055 quote editor: fuel-stop toggle on the same line as the To airport */
.to-cell { display: flex; align-items: center; gap: 6px; }
.quote-editor .to-cell label.fuel-check { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; margin: 0; padding: 0 9px 0 7px;
border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; line-height: 1; align-self: stretch; box-sizing: border-box;
color: var(--muted); font-size: .76rem; font-weight: 500; font-style: normal; user-select: none; }
.quote-editor .to-cell label.fuel-check input { margin: 0; }
.quote-editor .to-cell label.fuel-check:hover { border-color: #c9ced8; color: var(--ink); }
.quote-editor .to-cell label.fuel-check:has(input:checked) { border-color: #f0b46a; background: #fff4e5; color: #a24f00; font-weight: 600; }
/* MOD-056 fuel-pump icon (helper fuel_icon) */
.fuel-icon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; flex: none; }
.fuel-stop .fuel-icon, .ap-fuel .fuel-icon { margin-right: 1px; }
/* MOD-052 sales office operated by a certificate holder */
.ema-op { color: var(--muted); font-weight: 400; }
td.seller { min-width: 190px; }
td.seller .ema-op { display: block; font-size: .86rem; }
.ema-sub { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
.ema-note { margin: 6px 0; padding: 6px 9px; background: var(--subtle); border-radius: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* MOD-057 special rates on a pricing profile */
.sr-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sr-row { display: grid; grid-template-columns: minmax(140px, 1fr) 130px 96px 110px 28px; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sr-row.sr-head { padding: 6px 0; font-weight: 500; }
.sr-row > input, .sr-row > select { width: 100%; min-width: 0; margin: 0; }
.sr-row > input[type="checkbox"] { width: auto; justify-self: center; }
.sr-unit { display: flex; align-items: center; gap: 4px; }
.sr-unit input { width: 100%; min-width: 0; margin: 0; }
.sr-when { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .86rem; }
.sr-when input[type="date"] { width: 150px; margin: 0; }
.sr-when label.check { margin: 0 0 0 6px; font-size: .82rem; white-space: nowrap; }
.sr-row[data-kind="period"] .sr-last, .sr-row[data-kind="last_minute"] .sr-period { display: none; }
.sr-period, .sr-last { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sr-tag { margin-top: 3px; }
/* MOD-060 factory reset */
.card.factory-reset { border-color: #f1c6c0; }
.card.factory-reset h2 { color: #a3261b; }
/* MOD-061 AOC checks */
.aoc-preview iframe { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.aoc-preview img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; }
.aoc-regs { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 0 0 14px; background: #fafbfc; }
.aoc-regs label.check { display: inline-flex; margin: 2px 14px 2px 0; }
.aoc-upload { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.aoc-flag { display: inline-block; margin-top: 4px; }
/* MOD-064 AOC per aircraft */
.aoc-own { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.aoc-own h3 { margin: 0 0 8px; font-size: .95rem; }
details.aoc-own summary { cursor: pointer; color: var(--link); }
.aoc-fleet td { vertical-align: top; }
/* MOD-065 company routing of e-mail notifications */
.notify-routing .routing-table { margin-top: 4px; }
.notify-routing .routing-table th.c, .notify-routing .routing-table td.c { text-align: center; width: 1%; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.notify-routing .routing-table tr.group th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #646d7b); padding-top: 12px; background: none; }
.notify-routing .routing-table.is-off td.m-company, .notify-routing .routing-table.is-off td.m-both { opacity: .45; }
.notify-routing .routing-table .m-none { border-left: 1px solid var(--line); }
.notify-routing .routing-table input[type=radio] { margin: 0; }
/* MOD-066 service desk: paste / drop screenshots */
.paste-files.pf-on > label input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.paste-files.pf-on > label { margin-bottom: 0; }
.paste-files .pf-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px; margin-top: 6px; border: 1.5px dashed var(--line); border-radius: 8px; background: rgba(127,127,127,.04); }
.paste-files .pf-drop .btn { margin: 0; }
.paste-files.pf-over .pf-drop { border-color: var(--primary, #1d4ed8); background: rgba(29,78,216,.06); }
.paste-files kbd { font: inherit; font-size: 11px; padding: 0 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--card, #fff); }
.paste-files .pf-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }
.paste-files .pf-item { position: relative; display: flex; flex-direction: column; gap: 2px; width: 160px; }
.paste-files .pf-item img, .paste-files .pf-item .pf-doc { margin-bottom: 2px; }
.paste-files .pf-item img, .paste-files .pf-doc { width: 160px; height: 100px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.paste-files .pf-doc { display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--muted, #646d7b); }
.paste-files .pf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paste-files .pf-rm { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; line-height: 24px; cursor: pointer; padding: 0; }
.paste-files .pf-rm:hover { background: #b91c1c; }
.paste-files .pf-msg { color: #b91c1c; margin-top: 6px; }
/* MOD-070 flight time rounding */
.flight-rounding label.check { align-items: flex-start; margin-bottom: 8px; }
.flight-rounding label.check small { display: block; margin-top: 1px; }
.flight-rounding label.check input { margin-top: 3px; }
/* MOD-072 quotes: select + archive / delete */
.table .w-check { width: 1%; padding-right: 0; }
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 8px 0; background: var(--primary-soft, #eaf0fb); border-radius: 6px; }
.bulk-bar .btn { margin: 0; }
.row-actions-end { margin-left: auto; display: inline-flex; gap: 8px; }
/* MOD-076 3rd party fees / disbursement */
.fee-table th.c, .fee-table td.c { text-align: center; }
.pill.tp-pill { background: #eef1f6; color: #4a5568; font-size: 10px; padding: 1px 6px; }
/* MOD-077 fee days / public holidays / period */
.fee-days { min-width: 130px; }
.fee-when-btn { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card, #fff); color: var(--muted, #646d7b); cursor: pointer; font: inherit; font-size: .8rem; }
.fee-when-btn.is-set { border-color: var(--primary); color: var(--primary); }
.fee-when-row td { padding: 0 !important; border-top: 0; } /* MOD-099 the day panel fills the row */
.fee-when-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; background: var(--primary-soft, #eaf0fb); border-radius: 0; }
.fee-when-panel label.check { margin: 0; font-size: .82rem; }
.fee-when-panel input.w-60 { padding: 4px 6px; }
/* ==========================================================================
MOD-078 Mobile: top bar with menu button, slide-in menu, bottom bar, desktop-only notice, tables as cards
========================================================================== */
.menu-btn, .topbar-logo, .tabbar, .desk-notice, .menu-backdrop, .sidebar-user, .sidebar nav a.nav-logout { display: none; }
.tab-ico { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 24px; mask-size: 24px; }
.tab-dashboard { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-requests { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-search { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-calendar { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-trips { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-ops-trips { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-empty-leg-market { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-servicedesk { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-admin { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-companies { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.tab-menu { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
@media (max-width: 900px) {
:root { --ctl: 40px; }
body.has-tabbar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.shell { display: block; }
.main { min-height: 100vh; }
/* top bar */
.topbar { position: sticky; top: 0; height: 52px; padding: 0 12px; gap: 10px; justify-content: flex-start; }
.menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; margin-left: -6px; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.menu-btn span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.topbar-logo { display: block; flex-shrink: 0; } .topbar-logo img { display: block; }
.topbar-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
.topbar-user { gap: 8px; }
.topbar-user > span, .topbar-user > .badge, .topbar-user > a[href*="logout"] { display: none; }
.topbar-help { font-size: 0; padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.topbar-help::before { content: "?"; font-size: .95rem; font-weight: 600; }
/* slide-in menu */
.sidebar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform .2s ease;
box-shadow: 0 0 40px rgba(0,0,0,.18); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
body.menu-open .sidebar { transform: none; }
body.menu-open { overflow: hidden; }
.menu-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15,20,30,.35); }
.sidebar-user { display: flex; flex-direction: column; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.sidebar-user span { color: var(--muted); font-size: .84rem; }
.sidebar nav a { padding: 10px 12px; font-size: 1rem; }
.nav-logout { display: flex !important; margin-top: 8px; border-top: 1px solid var(--line); border-radius: 0 !important; color: var(--muted) !important; }
/* bottom bar */
.tabbar { display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(0,0,0,.04); }
.tabbar > a, .tabbar > button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 500; color: var(--muted); cursor: pointer; padding: 6px 2px 4px; }
.tabbar > a:hover { text-decoration: none; }
.tabbar > a.active { color: var(--primary); }
.tabbar .tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: #fff; font-size: .68rem; font-weight: 600; line-height: 18px; text-align: center; }
/* content */
.content { padding: 12px 12px 24px; }
.card { padding: 14px; border-radius: 10px; margin-bottom: 12px; }
.card-head { align-items: flex-start; }
.grid-2, .grid-3, .grid-main-side { grid-template-columns: minmax(0, 1fr); }
input, select, textarea { font-size: 16px; } /* no zoom on iOS */
.btn { min-height: 40px; }
.row-actions { flex-wrap: wrap; }
.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: 10px 12px; }
/* desktop-only screens */
.desk-notice { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.desk-notice p { margin: 6px 0 12px; color: var(--muted); }
body:not(.desk-show) .desk-only { display: none; }
body.desk-show .desk-notice { display: none; }
/* tables marked .stack become cards: one row per card, the column name in front of each value */
.table.stack { display: block; overflow: visible; border: 0; }
.table.stack thead { display: none; }
.table.stack tbody, .table.stack tr, .table.stack td { display: block; }
.table.stack tr { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; background: var(--card); }
.table.stack td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; white-space: normal; }
.table.stack td[data-label]:not([data-label=""])::before { content: attr(data-label); display: inline-block; min-width: 92px; margin-right: 8px; color: var(--muted); font-size: .8rem; }
.table.stack td.stack-title { order: -1; font-size: 1rem; padding-bottom: 6px !important; }
.table.stack td.stack-title::before { display: none !important; }
.table.stack td:empty { display: none; }
.mobile-hide { display: none !important; }
}
@media (min-width: 901px) { .mobile-only { display: none !important; } }
/* MOD-078 dashboard: what needs attention (phones) */
.attn-list { list-style: none; margin: 0; padding: 0; }
.attn-list li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.attn-list li:last-child a { border-bottom: 0; }
.attn-list li a:hover { text-decoration: none; color: var(--primary); }
.attn-count { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--err); color: #fff; font-size: .82rem; font-weight: 600; line-height: 26px; text-align: center; }
.attn-count.warn { background: var(--warn); }
/* ==========================================================================
MOD-079 Mobile phase 2 – broker: search form, results as cards, request bar, trips
========================================================================== */
@media (max-width: 900px) {
/* search form: one block per leg */
.legs-input { display: block; overflow: visible; }
.legs-input thead { display: none; }
.legs-input tbody { display: block; }
.legs-input tr { display: grid; grid-template-columns: 1fr 1fr 74px; gap: 8px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.legs-input td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
.legs-input td::before { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 3px; }
.legs-input td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; color: var(--ink-2); }
.legs-input td:nth-child(1)::before { content: "Leg"; display: inline; margin: 0 4px 0 0; font-size: inherit; color: inherit; }
.legs-input td:nth-child(2) { grid-column: 1 / -1; } .legs-input td:nth-child(2)::before { content: "From"; }
.legs-input td:nth-child(3) { grid-column: 1 / -1; } .legs-input td:nth-child(3)::before { content: "To"; }
.legs-input td:nth-child(4)::before { content: "Date (local)"; }
.legs-input td:nth-child(5)::before { content: "Time"; }
.legs-input td:nth-child(6)::before { content: "Pax"; }
.legs-input input { width: 100%; }
.legs-input tbody tr:only-child td:nth-child(1) { display: none; }
.search-bar { gap: 10px; }
.search-bar .inline-label { flex: 1 1 45%; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--muted); }
.search-bar .inline-label select { width: 100%; }
.search-bar > .btn.primary { width: 100%; }
/* results (MOD-137): one full-width list like a mailbox – photo left (✓ when selected), aircraft and price on top, facts below,
a chevron for the details; tap a row to select it */
.results-card { margin: 12px -12px 0; padding: 0; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.results-card > .card-head { padding: 12px 16px 8px; margin: 0; }
.results-card > p { padding: 0 16px 12px; }
.table.results { display: block; overflow: visible; margin: 0; }
.table.results thead { display: none; }
.table.results tbody { display: block; }
.table.results tr.ac-row { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 56px 12px 72px;
border-top: 1px solid var(--line); background: var(--card); -webkit-tap-highlight-color: transparent; user-select: none; transition: background-color .12s; }
.table.results > tbody > tr.ac-row > td { display: block; padding: 0 !important; border: 0 !important; background: none !important; }
/* the photo is the selection mark */
.table.results tr.ac-row td.pick-cell { position: absolute; left: 16px; top: 12px; width: 44px; height: 44px; border-radius: 12px;
background: #e8edf5 var(--ph, none) center / cover no-repeat !important; }
.table.results tr.ac-row td.pick-cell:not([style])::before { content: '✈'; position: absolute; inset: 0; display: grid; place-content: center; color: #8a94a6; font-size: 20px; }
.table.results tr.ac-row td.pick-cell input.pick { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
border-radius: 12px; border: 0; background: transparent; pointer-events: none; display: grid; place-content: center; transition: background-color .12s; }
.table.results tr.ac-row td.pick-cell input.pick::after { content: ''; width: 9px; height: 17px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px); opacity: 0; }
.table.results tr.ac-row td.pick-cell input.pick:checked { background: var(--primary); }
.table.results tr.ac-row td.pick-cell input.pick:checked::after { opacity: 1; }
.table.results tr.ac-row td.pick-cell input.pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.table.results tr.ac-row.picked { background: #eef4fd; box-shadow: inset 3px 0 0 var(--primary); }
/* name + price on the first line, the facts below */
.table.results tr.ac-row td:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 1rem; }
.table.results tr.ac-row td:nth-child(9) { order: 2; position: absolute; right: 16px; top: 12px; text-align: right; font-size: 1rem; }
.table.results tr.ac-row td:nth-child(n+3):nth-child(-n+8) { order: 3; font-size: .82rem; color: var(--ink-2); text-align: left !important; }
.table.results tr.ac-row td:nth-child(3) { flex-basis: 100%; color: var(--muted); }
.table.results tr.ac-row td:nth-child(n+4):nth-child(-n+8)::before { content: attr(data-label) " "; color: var(--muted); }
.table.results tr.ac-row td.seller { flex-basis: 100%; }
.table.results .ac-toggle { pointer-events: none; color: var(--ink); padding-left: 0; text-align: left; white-space: normal; display: block; }
.table.results .ac-toggle::before, .table.results .ac-toggle .ac-mini { display: none; }
.table.results .ac-toggle .group-pill { display: table; margin: 0 0 4px; }
.table.results tr.ac-row:has(td:nth-child(9) strong) td:nth-child(2) { padding-right: 70px !important; }
/* the details: a chevron at the right */
.ac-details { display: grid; place-content: center; position: absolute; right: 10px; bottom: 8px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--muted); cursor: pointer; }
.ac-details span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ac-details::after { content: ''; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.ac-details[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ac-details:active { background: rgba(0,0,0,.06); }
.table.results tr.ac-more { display: block; background: var(--subtle); border-top: 1px dashed var(--line); }
.table.results tr.ac-more[hidden] { display: none; }
.table.results tr.ac-row.picked + tr.ac-more { background: #f3f7fd; box-shadow: inset 3px 0 0 var(--primary); }
.table.results > tbody > tr.ac-more > td { display: block; padding: 12px 16px 16px !important; border: 0 !important; background: none !important; }
.table.results > tbody > tr.ac-more > td:first-child { display: none; }
.ac-more-body { min-width: 0; border-top: 0; padding-top: 0; max-width: none; }
.table.results tbody > tr.ac-row:last-of-type, .table.results tbody > tr.ac-more:last-child { border-bottom: 1px solid var(--line); }
.itin-broker { width: 100%; font-size: .82rem; }
.itin-broker th:nth-child(6), .itin-broker td:nth-child(6) { display: none; }
/* MOD-140 photos: one swipeable row from edge to edge, two photos side by side lined up with the text; tap one for the large view */
.photo-strip { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; gap: 8px; margin: 8px -16px; padding: 0 16px 4px;
-webkit-overflow-scrolling: touch; scrollbar-width: none; }
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip > a, .photo-strip > img { flex: 0 0 auto; scroll-snap-align: start; }
.photo-strip img { width: calc((100vw - 40px) / 2); height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
/* the details of a result – photos in one swipeable row, the flight as lines instead of a wide table */
.table.results .ac-more-body { gap: 10px; font-size: .88rem; }
.table.results .ac-more-body .photo-strip { margin: 0 -16px; }
.table.results .itin-broker, .table.results .itin-broker tbody, .table.results .itin-broker tr, .table.results .itin-broker td { display: block; width: auto; }
.table.results .itin-broker thead { display: none; }
.table.results .itin-broker tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table.results .itin-broker tr:last-child { border-bottom: 0; }
.table.results .itin-broker td { padding: 0; border: 0; text-align: left !important; background: none !important; }
.table.results .itin-broker td.arrow, .table.results .itin-broker td:nth-child(6) { display: none; }
.table.results .itin-broker td:nth-child(3) { margin-top: 6px; }
.table.results .itin-broker td:nth-child(3) strong::before { content: '→ '; color: var(--muted); font-weight: 400; }
.table.results .itin-broker td.num { display: inline-block; width: auto; margin: 6px 14px 0 0; color: var(--ink-2); font-size: .8rem; }
.table.results .itin-broker td:nth-child(4)::before { content: 'PAX '; color: var(--muted); }
.table.results .itin-broker td:nth-child(5)::before { content: 'Flight time '; color: var(--muted); }
.table.results .itin-broker td.num:nth-child(6) { display: none; }
.table.results .itin-broker .when { white-space: normal; font-size: .8rem; }
/* request bar: fixed above the bottom bar, short message field */
.request-bar { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 45; margin: 0; border-radius: 0; padding: 8px 12px;
flex-direction: row !important; align-items: flex-end !important; gap: 8px; box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
.request-bar .grow { font-size: 0; gap: 0; flex: 1 1 auto; min-width: 0; }
.request-bar #send-request { flex-shrink: 0; }
.request-bar textarea.req-msg { min-height: 40px; height: 40px; resize: none; font-size: 15px; }
.request-bar textarea.req-msg:focus { height: 88px; }
.request-bar textarea.req-msg:not(:focus) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.request-bar #send-request { white-space: nowrap; }
#request-form { padding-bottom: 70px; }
/* trip: the requests as cards with an Open button */
.trip-requests .mobile-btn { display: block; text-align: center; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; }
.clamp { -webkit-line-clamp: 2; }
}
/* ==========================================================================
MOD-080 Mobile phase 3 – operator: requests, calendar agenda, trips, empty legs
========================================================================== */
.cal-agenda .ag-day { margin: 14px 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cal-agenda .ag-day.today { color: var(--primary); }
.cal-agenda .ag-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line);
border-radius: 8px; background: var(--card); color: var(--ink); }
.cal-agenda .ag-item::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; background: var(--st, var(--navy)); }
.cal-agenda .ag-item:hover { text-decoration: none; border-color: var(--primary); }
.cal-agenda .ag-time { display: flex; flex-direction: column; min-width: 46px; font-weight: 600; font-size: .92rem; }
.cal-agenda .ag-time small, .cal-agenda .ag-main small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.cal-agenda .ag-main { min-width: 0; }
.cal-agenda .ag-main strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 900px) {
.scroll-tabs, .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll-tabs a, .tabs a { white-space: nowrap; flex-shrink: 0; }
.cal-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
.cal-toolbar .row-actions { justify-content: space-between; }
.cal-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.cal-options select { width: 100%; }
.cal-issues .small { overflow-wrap: anywhere; }
.table.req-inbox tr.unread { background: var(--primary-soft); }
.table.stack tr.inactive { opacity: .6; }
.table.el-op tr.unread { background: #fdf7ec; }
input[readonly][data-mobile-readonly] { background: var(--subtle); color: var(--ink); }
}
@media (max-width: 900px) {
.fee-filter { flex-wrap: wrap; }
.fee-filter input { width: 100%; }
.fee-filter select { flex: 1 1 40%; }
.man-head, .man-tools { flex-wrap: wrap; }
.man-tools .man-search { flex: 1 1 100%; min-width: 0; }
.man-tools .man-search input { width: 100%; }
}
/* MOD-081 push notifications */
.push-state { margin: 6px 0 10px; }
.push-ios { margin-top: 10px; padding: 10px 12px; background: var(--primary-soft); border-radius: 8px; }
.push-devices { margin: 4px 0 0; padding-left: 18px; }
.push-hint { position: relative; padding-right: 40px; }
.push-hint p { margin: 4px 0 10px; }
.push-hint-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
/* ==========================================================================
MOD-082 Demo site: presenter lobby, presenter bar, demo mailbox
========================================================================== */
.demo-tag { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: #f59e0b; color: #1c1300; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.demo-card { max-width: 440px; }
.demo-card .brand.big { display: flex; align-items: center; }
.demo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.demo-start { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.demo-start legend { font-weight: 600; margin-bottom: 6px; }
.demo-persona { display: grid !important; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; }
.demo-persona input { margin: 3px 0 0; grid-row: span 2; }
.demo-persona span { color: var(--muted); font-size: 13px; }
.demo-persona:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.demo-others { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.demo-signout { margin-top: 14px; text-align: right; }
.linkish { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; }
.linkish:hover { text-decoration: underline; }
.demo-preparing { display: flex; gap: 14px; align-items: center; margin: 8px 0 4px; }
.demo-preparing p { margin: 2px 0 0; }
.demo-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--primary-soft); border-top-color: var(--primary); animation: demo-spin .8s linear infinite; flex: none; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 900; display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px;
background: #161a21; color: #fff; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 13px; max-width: calc(100vw - 24px); }
.demo-bar .demo-tag { margin: 0 4px 0 0; }
.demo-bar > form { margin: 0; display: contents; }
.demo-switch { display: flex !important; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px; }
.demo-switch button, .demo-mail-btn, .demo-end { border: 0; background: transparent; color: #d7dbe2; font: inherit; cursor: pointer; border-radius: 999px; padding: 5px 12px; line-height: 1.15; white-space: nowrap; }
.demo-switch button small { display: block; font-size: 10.5px; color: #8f97a6; }
.demo-switch button.active { background: #fff; color: var(--ink); }
.demo-switch button.active small { color: var(--muted); }
.demo-switch button:not(.active):hover, .demo-mail-btn:hover, .demo-end:hover { background: rgba(255,255,255,.12); color: #fff; }
.demo-mail-btn { position: relative; }
.demo-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #f59e0b; color: #1c1300; font-size: 11px; font-weight: 700; text-align: center; }
.demo-end { color: #fca5a5; }
.is-demo .content { padding-bottom: 90px; }
.demo-toast { position: fixed; right: 18px; bottom: 76px; z-index: 901; display: flex; gap: 10px; align-items: center; max-width: 440px; padding: 10px 12px; background: #fff;
border: 0; border-radius: 0; box-shadow: 0 8px 28px rgba(0,0,0,.16); font-size: 13px; animation: demo-in .25s ease-out; }
.demo-toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes demo-in { from { opacity: 0; transform: translateY(10px); } }
.demo-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 950; width: min(860px, 100vw); background: var(--card); box-shadow: -10px 0 40px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.demo-drawer[hidden] { display: none; }
.demo-drawer-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.demo-drawer-head .muted { flex: 1; }
.demo-x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); }
.demo-drawer-body { flex: 1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); min-height: 0; }
.demo-mails { list-style: none; margin: 0; padding: 0; overflow: auto; border-right: 1px solid var(--line); }
.demo-mails li { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.demo-mails li:hover, .demo-mails li.active { background: var(--primary-soft); }
.demo-mails li.new strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #f59e0b; vertical-align: middle; }
.demo-mails li span { display: block; color: var(--muted); font-size: 12px; }
.demo-mail-view { display: flex; flex-direction: column; min-height: 0; }
.demo-mail-meta { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.demo-mail-view iframe { flex: 1; width: 100%; border: 0; background: #f3f4f6; }
@media (max-width: 900px) {
.demo-bar { bottom: calc(68px + env(safe-area-inset-bottom)); }
.demo-switch button small, .demo-mail-label { display: none; }
.demo-drawer-body { grid-template-columns: minmax(0, 1fr); }
.demo-drawer-body.viewing .demo-mails { display: none; }
.demo-toast { left: 12px; right: 12px; bottom: calc(124px + env(safe-area-inset-bottom)); }
}
/* MOD-085 demo scripts: spotlight, balloon, script menu, presenter window */
.demo-script-wrap { position: relative; }
.demo-script-btn { border: 0; background: transparent; color: #d7dbe2; font: inherit; cursor: pointer; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.demo-script-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.demo-script-btn.running { background: #f59e0b; color: #1c1300; font-weight: 600; }
.demo-menu { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 320px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.22); overflow: hidden; }
.demo-menu-head { padding: 12px 14px 8px; display: grid; gap: 2px; }
.demo-menu-chapters { display: grid; max-height: 50vh; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.demo-menu-chapters button { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; align-items: baseline; text-align: left; border: 0; background: none; padding: 8px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.demo-menu-chapters button small { grid-column: 2; color: var(--muted); }
.demo-menu-chapters button span { color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-menu-chapters button:hover, .demo-menu-chapters button.active { background: var(--primary-soft); }
.demo-menu-chapters button.active { font-weight: 600; }
.demo-menu-foot { display: flex; gap: 6px; justify-content: space-between; padding: 10px 14px; }
.demo-layer { position: fixed; inset: 0; z-index: 880; pointer-events: none; }
.demo-hole { position: fixed; border-radius: 8px; box-shadow: 0 0 0 200vmax rgba(14, 19, 28, .52), 0 0 0 3px #f59e0b inset; transition: left .3s, top .3s, width .3s, height .3s; opacity: 0; }
.demo-layer.in .demo-hole { opacity: 1; }
.demo-hole.none { box-shadow: 0 0 0 200vmax rgba(14, 19, 28, .52); }
.demo-tip { position: fixed; pointer-events: auto; width: 360px; max-width: calc(100vw - 24px); background: #fff; color: var(--ink); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.3);
padding: 14px 16px 12px; opacity: 0; transition: opacity .2s, left .3s, top .3s; }
.demo-layer.in .demo-tip { opacity: 1; }
.demo-tip.center, .demo-tip.at-center { width: 460px; }
.demo-tip-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.demo-tip h3 { margin: 6px 0 4px; font-size: 17px; line-height: 1.3; }
.demo-tip-text { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.demo-tip-text p { margin: 0 0 8px; }
.demo-tip-missing { color: var(--warn); font-size: 13px; }
.demo-tip-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.demo-tip-nav button { border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; height: 30px; min-width: 34px; padding: 0 10px; font: inherit; cursor: pointer; }
.demo-tip-nav button.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.demo-tip-nav button:disabled { opacity: .4; cursor: default; }
.demo-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.demo-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.demo-dots i.done { background: #9fb4e3; }
.demo-dots i.on { background: var(--primary); width: 18px; border-radius: 4px; }
.demo-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 72px; pointer-events: auto; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px;
background: #fff7e6; border: 1px solid #f5c26b; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 13px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; }
.demo-pill strong { overflow: hidden; text-overflow: ellipsis; }
.demo-pill button { border: 0; background: #f59e0b; color: #1c1300; border-radius: 999px; padding: 4px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.pv-wrap { min-height: 100vh; background: var(--bg); }
.pv { max-width: 1180px; margin: 0 auto; padding: 16px; }
.pv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pv-conn { flex: 1; color: var(--warn); font-size: 13px; }
.pv-conn.ok { color: var(--ok); }
.pv-timer { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-none { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.pv-scripts { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.pv-now { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.pv-where { color: var(--muted); font-size: 13px; }
.pv-now h1 { margin: 4px 0 12px; font-size: 24px; }
.pv-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.pv-screen { background: var(--subtle); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; color: var(--ink-2); }
.pv-screen p, .pv-notes p { margin: 0 0 6px; }
.pv-notes { font-size: 18px; line-height: 1.55; background: #fdf3e0; padding: 10px 14px; margin-bottom: 14px; }
.pv-next { color: var(--ink-2); margin-bottom: 14px; }
.pv-next .pv-label { display: inline; }
.pv-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pv-controls .btn { height: 40px; padding: 0 16px; font-size: 15px; }
.pv-chapters { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: calc(100vh - 90px); overflow: auto; }
.pv-ch { margin-bottom: 10px; }
.pv-ch > strong { display: block; padding: 4px 6px; font-size: 13px; }
.pv-ch.active > strong { color: var(--primary); }
.pv-ch button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 6px 5px 18px; font: inherit; font-size: 13px; color: var(--ink-2); border-radius: 5px; cursor: pointer; }
.pv-ch button:hover { background: var(--subtle); }
.pv-ch button.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
@media (max-width: 760px) { .pv-main { grid-template-columns: minmax(0, 1fr); } }
/* MOD-088 phone: request page tightened – header price, itinerary rows, group choice, calendar legs, jump to the action, collapsed extras */
.m-jump { display: none; }
@media (max-width: 900px) {
.card-head > .quote-total { text-align: left; width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.card-head > .quote-total .price { font-size: 1.3rem; }
.table.req-legs { display: table; width: 100%; }
.dl { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; }
.m-jump { display: flex; gap: 8px; margin: -4px 0 16px; position: sticky; top: 56px; z-index: 5; padding: 6px 0; background: var(--bg); }
.m-jump .btn { height: 40px; }
.m-jump .btn.primary { flex: 1; }
.card[id] { scroll-margin-top: 120px; }
/* itinerary (price check, quote): one block per leg */
.table.itin thead { display: none; }
.table.itin, .table.itin tbody { display: block; width: 100%; }
.table.itin tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "route route route cost" "dep arr . block"; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.table.itin td { border: 0; padding: 0 !important; white-space: nowrap; }
.table.itin td:nth-child(1) { grid-area: route; font-weight: 500; white-space: normal; }
.table.itin td:nth-child(2) { grid-area: dep; color: var(--ink-2); }
.table.itin td:nth-child(3) { grid-area: arr; color: var(--ink-2); }
.table.itin td:nth-child(3)::before { content: "→ "; color: var(--muted); }
.table.itin td:nth-child(4), .table.itin td:nth-child(5) { display: none; }
.table.itin td:nth-child(6) { grid-area: block; color: var(--muted); }
.table.itin td:nth-child(6)::before { content: "block "; }
.table.itin td:nth-child(7) { grid-area: cost; font-weight: 500; text-align: right; }
.scroll-x:has(> .table.itin) { overflow: visible; }
/* group offer: which aircraft flies */
.table.group-pick thead { display: none; }
.table.group-pick, .table.group-pick tbody { display: block; width: 100%; }
.table.group-pick tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "pick ac price" "pick pos cur"; gap: 2px 8px; padding: 10px 6px; border-bottom: 1px solid var(--line); align-items: baseline; }
.table.group-pick td { border: 0; padding: 0 !important; }
.table.group-pick td:nth-child(1) { grid-area: pick; align-self: center; }
.table.group-pick td:nth-child(2) { grid-area: ac; }
.table.group-pick td:nth-child(3) { grid-area: pos; color: var(--muted); }
.table.group-pick td:nth-child(4) { grid-area: price; text-align: right; font-weight: 500; }
.table.group-pick td:nth-child(5) { grid-area: cur; text-align: right; }
.table.group-pick td:nth-child(1) input { width: 18px; height: 18px; }
/* in calendar: one compact block per leg */
.table.stack.cal-legs tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "leg leg leg st" "dep arr . ."; gap: 2px 6px; padding: 8px 12px; }
.table.stack.cal-legs td:nth-child(1) { grid-area: leg; font-weight: 500; }
.table.stack.cal-legs td:nth-child(2) { grid-area: dep; color: var(--ink-2); }
.table.stack.cal-legs td:nth-child(3) { grid-area: arr; color: var(--ink-2); }
.table.stack.cal-legs td::before { display: none !important; }
.table.stack.cal-legs td:nth-child(2)::after { content: " –"; color: var(--muted); }
.table.stack.cal-legs td:nth-child(3)::after { content: " UTC"; color: var(--muted); font-size: .8rem; }
.table.stack.cal-legs td:nth-child(4) { grid-area: st; }
/* extras folded away on a phone (tap the title) */
.card.m-collapsible > h2, .card.m-collapsible > .card-head { cursor: pointer; }
.card.m-collapsible > .card-head h2 { flex: 1; }
.card.m-collapsible > h2::after, .card.m-collapsible > .card-head h2::after { content: "▾"; float: right; color: var(--muted); font-weight: 400; transition: transform .15s; }
.card.m-collapsible.m-collapsed > h2::after, .card.m-collapsible.m-collapsed > .card-head h2::after { transform: rotate(-90deg); }
.card.m-collapsible.m-collapsed > :not(h2):not(.card-head) { display: none; }
.card.m-collapsible.m-collapsed > .card-head { margin-bottom: 0; }
.card.m-collapsible.m-collapsed h2 .small, .card.m-collapsible.m-collapsed h2 .muted { display: none; }
}
/* MOD-091 demo: script check (pill + report), presenter text editing, lobby overview */
.demo-check-pill { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 960; display: flex; gap: 10px; align-items: center; padding: 6px 6px 6px 12px;
background: #161a21; color: #fff; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 13px; }
.demo-check-pill .demo-spinner { width: 16px; height: 16px; border-width: 2px; }
.demo-check-pill button { border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
.demo-report { position: fixed; inset: 0; z-index: 970; background: rgba(14,19,28,.5); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.demo-report-box { background: var(--card); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3); width: min(760px, 100%); padding: 20px 22px; }
.demo-report-box h2 { margin: 0 0 4px; }
.demo-report-box h3 { margin: 18px 0 6px; font-size: 15px; }
.demo-report-box tr.chk-ok .chk-ico { color: var(--ok); font-weight: 700; }
.demo-report-box tr.chk-missing, .demo-report-box tr.chk-page { background: #fdf0ef; }
.demo-report-box tr.chk-missing .chk-ico, .demo-report-box tr.chk-page .chk-ico { color: var(--err); font-weight: 700; }
.demo-report-box tr.chk-data { background: #fff7e6; }
.demo-report-box tr.chk-skip { color: var(--muted); }
.ok-text { color: var(--ok); }
.pv-edit-bar { margin: -6px 0 14px; }
.pv-edit { background: var(--subtle); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.pv-edit label small { color: var(--muted); font-weight: 400; }
.demo-check-form { margin-top: 12px; }
.demo-others-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.demo-others-list ul { margin: 6px 0 8px; padding-left: 18px; }
.demo-others-list .demo-others { margin-top: 6px; padding-top: 0; border-top: 0; }
.demo-edited { margin-top: 10px; }
/* MOD-093 Starter month: choose a plan */
.plan-card { max-width: 720px; }
.plan-choices { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.plan-choices legend { font-weight: 600; font-size: .86rem; margin-bottom: 6px; padding: 0; }
.form label.plan-choice { flex-direction: row; align-items: center; gap: 12px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; cursor: pointer; font-size: .92rem; color: var(--ink); }
.form label.plan-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-choice input { margin: 0; flex-shrink: 0; }
.plan-choice > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-choice > b { white-space: nowrap; text-align: right; }
.plan-choice > b small { margin-left: 2px; font-weight: 400; }
.plan-total { font-size: .95rem; margin: 4px 0 14px; }
/* MOD-095 calendar chips: a small status square instead of a coloured left edge */
.cal-card-trip .ct-head::before, .mo-trip-head::before { content: ''; display: inline-block; flex-shrink: 0; width: 6px; height: 6px; margin-right: 4px; vertical-align: 1px; background: var(--st); }
.cal-card-trip .ct-head::before { margin-right: 0; }
/* MOD-096 flight types */
.ft-table td { vertical-align: middle; }
.ft-table input[type=text], .ft-table td > input:not([type]) { min-width: 180px; }
.ft-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ft-swatch { width: 22px; height: 22px; border: 0; padding: 0; cursor: pointer; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ft-swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.form .ft-custom { flex-direction: row; align-items: center; gap: 6px; margin: 0 0 0 4px; font-size: .8rem; font-weight: 400; color: var(--muted); cursor: pointer; }
.ft-custom input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line-strong); background: none; cursor: pointer; }
.ft-chip { display: inline-block; padding: 2px 8px; background: var(--st-bg); color: var(--ink); font-size: .8rem; font-weight: 500; }
.ft-chip::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--st); vertical-align: 1px; }
.ft-archived { margin: 4px 0; }
.ev.st-ft { background: var(--st); color: var(--st-ink); }
.leg-kind { display: inline-block; min-width: 46px; padding: 3px 7px; font-size: .78rem; font-weight: 600; text-align: center; background: var(--primary-soft); color: var(--primary); }
tr.positioning .leg-kind { background: #eef0f4; color: var(--muted); }
/* MOD-097 breathing room around buttons: never flush against a table, a field or the button next to it */
:is(table, .scroll-x) + :is(.btn, .row-actions, button) { margin-top: 12px; }
label.check + .row-actions { margin-top: 12px; }
.form > :is(input, textarea, select) + :is(.btn, .row-actions, button) { margin-top: 10px; }
:is(td, .card, p, li, dd) > .btn:not(.block) + .btn:not(.block) { margin-left: 5px; }
td > .btn + :is(.view-as-form, .check-form) { margin-left: 5px; }
:is(textarea, form) + :is(table, .scroll-x) { margin-top: 12px; }
.btn + :is(span.small, span.muted) { margin-left: 6px; }
:is(template, datalist) + :is(.btn, .row-actions) { margin-top: 12px; } /* MOD-100 also when a row template sits between the table and the button */
/* MOD-105 website widget and leads */
.wg-intro { max-width: 820px; }
.wg-intro ul.ticks { list-style: none; padding: 0; margin: 0 0 14px; }
.wg-intro ul.ticks li { position: relative; padding-left: 24px; margin: 0 0 6px; }
.wg-intro ul.ticks li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--ok); font-weight: 700; }
.wg-row { border-top: 1px solid var(--line); padding: 14px 0; }
.wg-row:first-of-type { border-top: 0; padding-top: 4px; }
.wg-row-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.wg-row-head .small { margin-top: 3px; }
.wg-code { margin-top: 10px; }
.wg-code summary { cursor: pointer; font-weight: 500; color: var(--link); font-size: .92rem; }
.wg-snippet { background: #f4f6f9; padding: 12px 14px; font: .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; margin: 8px 0; }
.wg-steps { margin: 0; padding-left: 20px; } .wg-steps li { margin: 0 0 8px; }
.wg-radios { margin: 0 0 12px; flex-direction: column; gap: 6px; }
.wg-by { margin-top: 8px; }
.wg-typegroup { margin: 0 0 10px; } .wg-typegroup > span { display: block; margin-bottom: 4px; }
.wg-example { background: #f4f6f9; padding: 10px 14px; font-size: .9rem; }
.wg-example div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.wg-example div span { color: var(--muted); }
.wg-example .total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px; }
.wg-example .total strong { font-size: 1.05rem; }
.wg-leads tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.wg-langs { margin: 0; border-bottom: 0; }
/* preview: an example website around the real widget */
.wg-site { border: 1px solid var(--line-strong); background: #fff; max-width: 1040px; }
.wg-site-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #eceff3; border-bottom: 1px solid var(--line); }
.wg-site-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd4db; }
.wg-site-bar span { margin-left: 12px; flex: 1; max-width: 420px; background: #fff; padding: 3px 10px; font-size: .8rem; color: var(--muted); }
.wg-site-page { background: #f7f5f1; }
.wg-site-nav { display: flex; gap: 22px; align-items: center; padding: 16px 28px; background: #fff; font-size: .88rem; color: #555; flex-wrap: wrap; }
.wg-site-nav strong { margin-right: auto; font-size: 1.05rem; color: #111; letter-spacing: .02em; }
.wg-site-hero { padding: 34px 28px 20px; }
.wg-site-hero h3 { margin: 0 0 6px; font: 600 1.8rem/1.2 Georgia, "Times New Roman", serif; color: #111; max-width: 560px; }
.wg-site-hero p { margin: 0; color: #666; }
.wg-site-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--site-accent, #333) !important; margin-bottom: 8px !important; font-weight: 600; }
.wg-site-embed { padding: 8px 28px 34px; max-width: 860px; }
@media (max-width: 700px) {
.wg-site-nav span { display: none; }
.wg-site-hero, .wg-site-embed { padding-left: 14px; padding-right: 14px; }
.wg-site-hero h3 { font-size: 1.4rem; }
}
.form .wg-radios label { margin-bottom: 0; }
.wg-addon-from { margin: 4px 0 12px 26px; }
.wg-addon-from label { max-width: 420px; }
/* MOD-107 market insights */
.ins-grid { align-items: start; }
.inline-form { margin: 0; }
.inline-form select { min-width: 180px; }
.ins-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin: 10px 0 4px; }
.ins-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; }
.ins-bar span { display: block; background: #b9c7e6; min-height: 2px; }
.ins-bar.busy span { background: var(--primary); }
.ins-bar.quiet span { background: #dfe3ea; }
.ins-bar small { text-align: center; font-size: .66rem; color: var(--muted); margin-top: 3px; line-height: 1; }
.ins-legend { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ins-legend i { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin: 0 3px 0 8px; }
.ins-legend i.busy { background: var(--primary); } .ins-legend i.quiet { background: #dfe3ea; }
.ins-chg.up { color: var(--ok); } .ins-chg.down { color: var(--err); }
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ins-tiles > div { background: #f4f6f9; padding: 12px 14px; }
.ins-tiles span { display: block; font-size: .8rem; color: var(--muted); }
.ins-tiles strong { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin: 2px 0; }
.ins-tiles small { color: var(--muted); }
.ins-card .ins-summary { font-size: 1.02rem; font-weight: 600; margin: 0 0 8px; }
.ins-dir { display: inline-block; width: 1.3em; }
.ins-up .ins-summary { color: var(--ok); } .ins-down .ins-summary { color: var(--warn); }
.ins-signals { list-style: none; margin: 0 0 12px; padding: 0; }
.ins-signals li { display: flex; gap: 8px; padding: 4px 0; font-size: .92rem; }
.ins-signals li span { flex: none; width: 1.1em; color: var(--muted); font-size: .8rem; padding-top: 2px; }
.ins-signals li.up span { color: var(--ok); } .ins-signals li.down span { color: var(--warn); }
.ins-band { margin-top: 6px; max-width: 560px; }
.ins-band-track { position: relative; height: 10px; background: #eef1f5; margin: 14px 0 6px; }
.ins-band-range { position: absolute; top: 0; bottom: 0; background: #c9d6f1; }
.ins-band-med { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--primary); margin-left: -1px; }
.ins-band-you, .ins-you-key { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #fff; border: 3px solid var(--ink, #1b2230); border-radius: 50%; }
.ins-you-key { position: relative; display: inline-block; top: 0; margin: 0 2px 0 0; width: 10px; height: 10px; vertical-align: -1px; }
.ins-band-labels { display: flex; justify-content: space-between; color: var(--muted); }
.ins-trip { background: #f4f6f9; padding: 8px 12px; }
/* ---------- MOD-113 Launch & growth ---------- */
.gr-num { width: 72px; min-height: 30px; padding: 3px 6px; text-align: right; }
.gr-targets td, .gr-targets th { vertical-align: middle; }
.gr-targets th.gr-group { text-align: center; border-bottom: 1px solid var(--line); }
tr.gr-now td { background: #f2f6fd; }
tr.gr-past td { color: var(--muted); }
.gr-progress { width: 100%; max-width: 160px; }
.gr-cell { display: flex; align-items: center; gap: 8px; }
.gr-cell .progress { flex: 1; min-width: 60px; }
.gr-inline { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.gr-inline label { margin-bottom: 0; }
.gr-inline .gr-num { width: 96px; }
.gr-filters select { width: auto; min-width: 130px; }
.gr-status { width: auto; min-height: 30px; padding: 2px 6px; font-size: .86rem; }
.gr-summary { margin-top: 12px; }
.gr-chart { width: 100%; height: auto; display: block; }
.gr-chart .gr-axis { stroke: var(--line-strong); }
.gr-chart .gr-tick { font-size: 11px; fill: var(--muted); }
.gr-chart .gr-bar { fill: #c9d6f2; }
.gr-chart .gr-line { fill: none; stroke: var(--primary); stroke-width: 2; }
.gr-chart .gr-dot { fill: var(--primary); }
.gr-key { display: inline-block; width: 12px; height: 10px; vertical-align: middle; margin: 0 2px 0 8px; }
.gr-key-plan { height: 2px; background: var(--primary); }
.gr-key-actual { background: #c9d6f2; }
.gr-review { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.gr-review:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.gr-review h3 { margin: 0; font-size: 1rem; }
/* MOD-115 test environment and version preview */
.dev-bar, .preview-bar { position: sticky; top: 0; z-index: 950; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 16px;
font-size: 13px; line-height: 1.35; color: #fff; }
.dev-bar { background: repeating-linear-gradient(135deg, #c2410c 0 14px, #b13a0a 14px 28px); }
.preview-bar { background: #3b2a8f; }
.dev-bar strong, .preview-bar strong { background: rgba(255,255,255,.18); border-radius: 4px; padding: 1px 7px; letter-spacing: .04em; }
.preview-bar form { margin: 0; display: inline; }
.preview-bar .btn.small { background: #fff; color: #3b2a8f; border-color: #fff; }
.preview-bar a { color: #fff; text-decoration: underline; }
.is-dev .shell, .is-preview .shell { min-height: calc(100vh - 32px); }
.versions-table tr.is-active td { background: var(--primary-soft); }
.versions-actions form { display: inline-block; margin: 0 4px 4px 0; }
.versions-table code { font-size: .78rem; }
@media (max-width: 720px) {
.dev-bar, .preview-bar { position: static; font-size: 12px; padding: 5px 12px; }
.dev-bar .dev-more { display: none; }
}
/* MOD-116 */
.versions-preview { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.versions-preview > div:first-child { flex: 1 1 420px; }
.versions-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.versions-preview-actions form { margin: 0; }
.versions-live-root { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.versions-live-root label { flex: 1 1 360px; display: flex; flex-direction: column; gap: 4px; }
/* MOD-118 */
.versions-upload { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.versions-upload input[type=file] { flex: 1 1 320px; max-width: 100%; }
/* MOD-120 */
.versions-impact { background: var(--subtle); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.6; }
/* MOD-123 Admin › Website */
.ws-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.ws-periods { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.ws-periods a { padding: 6px 12px; font-size: .86rem; color: var(--text); text-decoration: none; border-right: 1px solid var(--line); }
.ws-periods a:last-child { border-right: 0; }
.ws-periods a.active { background: var(--primary); color: #fff; }
.ws-delta { font-size: .72rem; font-weight: 600; vertical-align: middle; margin-left: 4px; }
.ws-delta.up { color: #1a7f45; }
.ws-delta.down { color: var(--err); }
.ws-share td:first-child, .ws-funnel td:first-child { position: relative; }
.ws-sharebar { position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--w); background: var(--primary-soft); border-radius: 4px; z-index: 0; }
.ws-share td:first-child span, .ws-funnel td:first-child span { position: relative; z-index: 1; padding-left: 6px; }
.ws-sub { font-size: .92rem; margin: 14px 0 6px; }
.ws-ok { color: #1a7f45; font-weight: 600; }
.ws-detail td { background: var(--subtle); }
.ws-stack { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 6px; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; max-height: 260px; }
.ws-code { background: var(--subtle); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: .82rem; overflow-x: auto; }
.ws-rate { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.ws-rate-good { background: #e5f5ec; color: #1a7f45; }
.ws-rate-needs-work { background: #fdf3dc; color: #8a5a00; }
.ws-rate-poor { background: #fdecea; color: var(--err); }
.ws-total td { background: var(--subtle); }
.ws-log-err td { background: #fff6f5; }
.ws-filter { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ws-errors code { word-break: break-all; }
@media (max-width: 720px) { .ws-bar { flex-direction: column; align-items: flex-start; } .ws-periods { max-width: 100%; overflow-x: auto; } }
.ws-log-wrap, .table-scroll { overflow-x: auto; }
.ws-filter select { width: auto; max-width: 280px; }
/* MOD-124 live, visitors, flow */
.ws-now { display: flex; align-items: center; gap: 10px; }
.ws-pulse { width: 10px; height: 10px; border-radius: 50%; background: #1a7f45; box-shadow: 0 0 0 0 rgba(26,127,69,.5); animation: ws-pulse 1.8s infinite; }
@keyframes ws-pulse { 0% { box-shadow: 0 0 0 0 rgba(26,127,69,.45); } 70% { box-shadow: 0 0 0 10px rgba(26,127,69,0); } 100% { box-shadow: 0 0 0 0 rgba(26,127,69,0); } }
@media (prefers-reduced-motion: reduce) { .ws-pulse { animation: none; } }
.ws-feed, .ws-timeline { list-style: none; margin: 0; padding: 0; }
.ws-feed li, .ws-timeline li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ws-feed li:last-child, .ws-timeline li:last-child { border-bottom: 0; }
.ws-feed-jserror, .ws-feed-resource, .ws-feed-404 { color: var(--err); }
.ws-timeline li.ws-t-pageview { font-weight: 500; }
.ws-timeline li.ws-t-engage, .ws-timeline li.ws-t-field { padding-left: 16px; }
.ws-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-flow-page { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 40px; color: var(--muted); }
.ws-flow-page code { font-size: 1rem; color: var(--text); background: var(--primary-soft); padding: 6px 10px; border-radius: 6px; }
.ws-geo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.ws-geo-actions form { margin: 0; }
.ws-geo-upload { display: flex; gap: 6px; align-items: center; }
.ws-attrib { margin-top: 4px; }
@media (max-width: 720px) { .ws-flow { grid-template-columns: minmax(0, 1fr); } .ws-flow-page { flex-direction: row; padding-top: 0; } }
/* MOD-125 */
.ws-server-row { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .92rem; margin-bottom: 8px; }
.ws-bar .btn.small { margin-right: 8px; }
/* MOD-126 */
.ws-internal-auto { margin-top: 10px; }
.ws-internal-auto .btn { margin-left: 6px; }
#internal textarea { width: 100%; font-family: var(--mono, monospace); }
/* MOD-127 internal devices */
.ws-internal-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff4e5; border: 1px solid #f5c38a; color: #6b3d00; border-radius: 8px; padding: 9px 14px; margin: 0 0 14px; font-size: .92rem; }
.ws-internal-note a { margin-left: auto; }
.ws-internal-dot { width: 9px; height: 9px; border-radius: 50%; background: #e8740c; flex: none; box-shadow: 0 0 0 3px rgba(232,116,12,.2); }
.ws-internal-pill { background: #fff4e5 !important; color: #8a4b00 !important; border-color: #f5c38a !important; }
.ws-toggle.on { background: #fff4e5; border-color: #e8740c; color: #8a4b00; }
.ws-bar .ws-toggle { margin-right: auto; margin-left: 8px; }
.ws-kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--accent, #0b57d0); margin-bottom: 2px; }
.ws-quality h2 { margin: 0 0 4px; }
.ws-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.ws-quality-box { border: 1px solid var(--border, #e2e6ee); border-radius: 8px; padding: 14px 16px; }
.ws-quality-box p { margin: 6px 0 8px; }
.ws-quality-value { font-size: 1.55rem; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.ws-quality-this { border-color: #e8740c; background: #fffaf3; box-shadow: inset 4px 0 0 #e8740c; }
.ws-mark { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.ws-mark input { flex: 1 1 180px; min-width: 0; }
.ws-live-filter { margin: 0 0 10px; }
@media (max-width: 900px) { .ws-quality-grid { grid-template-columns: 1fr; } }
/* MOD-127 flow chart */
.ws-sankey-head { align-items: flex-start; }
.ws-steps { display: flex; align-items: center; gap: 8px; flex: none; }
.ws-steps .btn.disabled { opacity: .4; pointer-events: none; }
.ws-sankey-wrap { overflow-x: auto; margin-top: 10px; padding-bottom: 6px; }
.ws-sankey { display: block; font-family: inherit; }
.ws-band { fill: #2f6fd6; fill-opacity: .13; transition: fill-opacity .12s; }
.ws-band-drop { fill: #8a94a6; fill-opacity: .14; }
.ws-band-action { fill: #1f9d6b; fill-opacity: .14; }
.ws-band:hover { fill-opacity: .35; }
.ws-focus .ws-band { fill-opacity: .05; }
.ws-focus .ws-band.on { fill-opacity: .42; }
.ws-bar { fill: #0b57d0; }
.ws-node-action .ws-bar { fill: #1f9d6b; }
.ws-node-drop .ws-bar { fill: #b7c0ce; }
.ws-node-other .ws-bar { stroke: #2f6fd6; stroke-width: 1; }
.ws-label { fill: #fff; stroke: #dfe5ee; stroke-width: 1; filter: drop-shadow(0 1px 1px rgba(16,24,40,.06)); }
.ws-label-name { font-size: 12.5px; font-weight: 600; fill: #1f2a3d; }
.ws-label-pct { font-size: 12.5px; font-weight: 600; fill: #0b57d0; }
.ws-node-action .ws-label-pct { fill: #137a52; }
.ws-node-drop .ws-label-name, .ws-node-drop .ws-label-pct { fill: #6b7486; }
.ws-node a { cursor: pointer; }
.ws-node a:hover .ws-label { stroke: #0b57d0; }
.ws-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px -1px 0; }
.ws-key-other { background: repeating-linear-gradient(45deg, #2f6fd6 0 2px, #fff 2px 4px); border: 1px solid #2f6fd6; }
.ws-key-drop { background: #b7c0ce; }
.ws-quality-devices { display: block; color: var(--text, #1f2a3d); margin-bottom: 4px; }
.ws-step-head { font-size: 12px; font-weight: 600; fill: #5b6476; letter-spacing: .02em; }
.ws-step-line { stroke: #e3e7ee; stroke-width: 1; }
/* MOD-128 code export */
.code-export-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 10px 0 4px; }
.code-export-form .btn { margin-left: auto; }
/* MOD-129 two-step login */
.mfa-code { font-size: 1.4rem; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-steps { padding-left: 1.2em; }
.mfa-steps li { margin: 0 0 14px; }
.mfa-qr { width: 200px; height: 200px; margin: 10px 0; background: #fff; border: 1px solid var(--border, #e2e6ee); border-radius: 8px; }
.mfa-qr svg { width: 100%; height: 100%; display: block; }
.mfa-key { font-size: .95rem; letter-spacing: .05em; word-break: break-all; }
.mfa-steps .mfa-form { display: flex; gap: 8px; align-items: center; max-width: 340px; margin-top: 6px; }
.mfa-steps .mfa-form input.mfa-code { flex: 1; min-width: 0; }
.mfa-codes { columns: 2; font-size: 1.05rem; padding-left: 1.4em; }
.mfa-codes li { margin: 0 0 6px; }
.mfa-codes-card { border-color: #e8740c; }
.mfa-off { margin-top: 12px; }
.confirm-agreement { border: 1px solid var(--border, #e2e6ee); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.confirm-agreement legend { font-weight: 600; padding: 0 4px; }
@media print { .mfa-codes-card { border: 0; } }
/* MOD-132 remembered devices */
.mfa-mode fieldset { border: 1px solid var(--border, #e2e6ee); border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; }
.mfa-mode legend { font-weight: 600; padding: 0 4px; }
.mfa-mode .check { display: block; margin: 6px 0; }
.mfa-mode .mfa-this { margin-left: 24px; font-size: .92rem; }
.mfa-steps .mfa-form { flex-wrap: wrap; }
.mfa-steps .mfa-remember { flex-basis: 100%; font-size: .92rem; }
.mfa-recovery { margin-top: 12px; }
/* ==========================================================================
MOD-138 phones: every section edge to edge, lists as rows like a mailbox – no card inside a card.
One pattern: a section (.card) runs the full screen width with a thin grey gap to the next; the items in it
are rows with a line between them (padding 12px 16px); a row that needs attention gets a blue (or amber) bar on the left.
========================================================================== */
@media (max-width: 900px) {
:root { --m-pad: 16px; --m-row: 12px 16px; }
/* sections */
.content .card, .desk-notice { margin: 0 -12px 8px; padding: var(--m-pad); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.content .card.narrow, .content .card.narrow-wide { max-width: none; }
.content > .stats { margin: 0 -12px 8px; border-radius: 0; border-left: 0; border-right: 0; }
.content > .stats .stat { padding: 12px 16px; }
.content .card.highlight { box-shadow: inset 3px 0 0 var(--primary); border-color: var(--line); }
.content .card.highlight-warn { box-shadow: inset 3px 0 0 #d9776a; border-color: var(--line); }
.content .card.mfa-codes-card { box-shadow: inset 3px 0 0 #e8740c; border-color: var(--line); }
.content .tabs, .content .scroll-tabs { margin-left: -12px; margin-right: -12px; padding: 0 12px; }
/* a card inside a card is no box of its own */
.content .card.results-card { margin: 0 -12px 8px; padding: 0; }
/* messages and the sticky action bar of a request: edge to edge as well */
.content > .alert, .content > form > .alert { margin: 0 -12px 8px; padding: 12px 16px; }
.m-jump { margin: -12px -12px 8px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); top: 52px; }
.content .card .card { margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* a plain fieldset in a section: a bold heading, no box */
.content .card fieldset:not([class]) { border: 0; border-radius: 0; padding: 0; margin: 16px 0; min-width: 0; }
.content .card fieldset:not([class]) > legend { padding: 0; margin: 0 0 6px; font-weight: 600; }
/* lists: tables marked .stack – one row per item, full width */
.content .card .table.stack { margin-left: calc(-1 * var(--m-pad)); margin-right: calc(-1 * var(--m-pad)); width: auto; }
.table.stack tr { margin: 0; padding: var(--m-row); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--card); }
.content .card > .table.stack:last-child, .content .card > form:last-child > .table.stack:last-child { margin-bottom: calc(-1 * var(--m-pad)); }
.content .card > .table.stack:first-child tr:first-child, .content .card > form:first-child > .table.stack:first-child tr:first-child { border-top: 0; }
/* the label in a column of its own, so a second line of a value starts under the value, not under the label */
.table.stack:not(.cal-legs) td[data-label]:not([data-label=""]):not(.stack-title) { display: flow-root; padding-left: 100px !important; }
.table.stack:not(.cal-legs) td[data-label]:not([data-label=""]):not(.stack-title)::before { float: left; width: 92px; min-width: 0; margin: 0 0 0 -100px; line-height: inherit; }
.table.stack.cal-legs tr { padding: var(--m-row); }
.table.stack.req-inbox tr.unread { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.table.stack.el-op tr.unread { background: #fdf7ec; box-shadow: inset 3px 0 0 var(--warn); }
.wg-leads tr.is-new { box-shadow: inset 3px 0 0 var(--primary); }
.wg-leads tr.is-new td:first-child { box-shadow: none; }
/* other tables: edge to edge, sideways scroll when wide */
.content .card .table:not(.stack):not(.results):not(.legs-input) { margin-left: calc(-1 * var(--m-pad)); margin-right: calc(-1 * var(--m-pad)); width: auto; max-width: none; }
.content .card .table:not(.stack):not(.results):not(.legs-input) tr > :first-child { padding-left: var(--m-pad); }
.content .card .table:not(.stack):not(.results):not(.legs-input) tr > :last-child { padding-right: var(--m-pad); }
.content .card .table.m-fits:not(.stack):not(.results):not(.legs-input) { display: table; width: calc(100% + 2 * var(--m-pad)); } /* app.js: a table that fits fills the width */
.content .card > .table:first-child, .content .card > form:first-child > .table:first-child { margin-top: calc(-1 * var(--m-pad)); }
.content .card > .table:not(.stack):first-child th, .content .card > form:first-child > .table:not(.stack):first-child th { border-top: 0; }
/* the flight in the details of a result: lines over the full width, no box */
.table.results .itin-broker { margin: 4px -16px 0; width: calc(100% + 32px); max-width: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.table.results .itin-broker tr { padding: 10px 16px; }
/* dashboard: needs your attention */
.content .card .attn-list { margin: 0 calc(-1 * var(--m-pad)); }
.attn-list li a { padding: 14px var(--m-pad); border-bottom: 0; border-top: 1px solid var(--line); }
.content .card > .attn-list:last-child { margin-bottom: calc(-1 * var(--m-pad)); }
/* calendar agenda: rows */
.content .card .cal-agenda { margin: 0 calc(-1 * var(--m-pad)); }
.cal-agenda .ag-day { margin: 0; padding: 14px var(--m-pad) 6px; }
.cal-agenda .ag-item { margin: 0; padding: var(--m-row); border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.cal-agenda .ag-item:hover { border-color: var(--line); background: var(--subtle); }
/* empty legs (broker market): photo left, route and price on top, the rest below */
.content .card .el-list { margin: 0 calc(-1 * var(--m-pad)); }
.content .card > .el-list:last-child { margin-bottom: calc(-1 * var(--m-pad)); }
.el-item { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "photo route price" "photo when when" "photo ac ac";
gap: 4px 12px; align-items: start; padding: var(--m-row); border-bottom: 0; border-top: 1px solid var(--line); }
.el-photo { grid-area: photo; width: 56px; height: 56px; border-radius: 12px; }
.el-photo .small { font-size: 0; }
.el-photo .small::before { content: '✈'; font-size: 20px; color: #8a94a6; }
.el-route { grid-area: route; min-width: 0; }
.el-price { grid-area: price; font-size: 1rem; }
.el-price .small { font-size: .75rem; }
.el-when { grid-area: when; font-size: .82rem; color: var(--ink-2); }
.el-when > * { display: inline; font-size: inherit; }
.el-when strong { font-weight: 600; color: var(--ink); }
.el-ac { grid-area: ac; font-size: .82rem; color: var(--ink-2); }
.el-ac strong { font-weight: 600; color: var(--ink); }
.el-ac .small { display: inline; font-size: inherit; }
.el-ac .small + .small::before { content: ' · '; }
.el-icao { font-size: 1rem; }
}
/* MOD-140 the large view of the photos: full screen, swipe (or arrows and keys) to the next one */
.photo-strip img { cursor: zoom-in; }
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 11, 18, .97); }
.lb-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: 64px 12px; box-sizing: border-box; }
.lb-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.lb button { position: absolute; display: grid; place-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14);
color: #fff; font: 300 30px/1 system-ui, sans-serif; cursor: pointer; }
.lb button:hover { background: rgba(255, 255, 255, .26); }
.lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lb-prev, .lb-next { top: 50%; margin-top: -22px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-prev:disabled, .lb-next:disabled { opacity: 0; pointer-events: none; }
.lb-count { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 7px; }
.lb-count i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background-color .15s, width .15s; }
.lb-count i.on { width: 18px; border-radius: 4px; background: #fff; }
@media (hover: none) { .lb-prev, .lb-next { display: none !important; } } /* phones: swipe */
/* MOD-142 insurance: what brokers see with an aircraft */
.ins-line { display: inline-block; }
.ins-line.ins-no { color: var(--warn); }
.ins-panel .table + .table { margin-top: 12px; }
.ins-upload { margin-top: 12px; }
.ins-upload > summary { cursor: pointer; color: var(--link); margin-bottom: 8px; }
/* MOD-143 integrations preview */
.pill.int-new { background: #e3edfb; color: var(--link); }
.pill.int-same { background: #ddf3e6; color: var(--ok); }
.pill.int-changed { background: #fbf0d9; color: var(--warn); }
.pill.int-unknown, .pill.int-error { background: #fdecea; color: var(--err); }
.pill.int-skip { background: #eceef2; color: var(--muted); }
.int-plan tr.int-row-skip td, .int-plan tr.int-row-unknown td { color: var(--muted); }