/* Booking Paris Transfer admin panel — Design/admin/designs/admin_*.png (light) and *_dark.png (dark, prefers-color-scheme).
   Desktop sizes are the designs' pixels at 1536×1024; below 900 px the sidebar becomes a top bar and tables stack.
   Colours: the Booking Paris Transfer greens of docs/BRAND.md in the --amber*, --btn* and --stat-ic tokens (names kept);
   buttons #15803D with white text (5.0:1); the --amberc-* status chips stay amber (a warning, not the brand). Logo: the
   owner's files in assets/brand/ (sidebar: the full logo; top bar on phones: the emblem). */
@font-face { font-family: 'Plus Jakarta Sans'; src: url(fonts/PlusJakartaSans-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url(fonts/PlusJakartaSans-Medium.ttf) format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url(fonts/PlusJakartaSans-SemiBold.ttf) format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url(fonts/PlusJakartaSans-Bold.ttf) format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url(fonts/PlusJakartaSans-ExtraBold.ttf) format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --page: #F6F8F6; --side: #FFFFFF; --card: #FFFFFF; --line: #EFECE7; --line-soft: #F2F1EF; --thead: #FAFAFA;
  --ink: #0B0F0C; --ink2: #23232B; --muted: #6B6E78; --muted2: #8A8D96;
  --amber: #16A34A; --btn: #15803D; --btn-hover: #14532D; --btn-ink: #FFFFFF; --amber-ink: #15803D; --amber-soft: #F0FDF4; --amber-soft2: #DCFCE7;
  --amber-line: #16A34A; --icon-bg: #DCFCE7; --btn-ink-strong: #FFFFFF; --label-soft: #4F4E5A; --stat-ic: #15803D; --btn-head-bg: #F0FDF4; --tile: #F1F1F1; --panel: #F6F6F6; --avatar: #ECECEC;
  --input: #FFFFFF; --input-line: #E1E2E6; --focus-glow: rgba(21, 128, 61, .32);
  /* the keyboard focus ring: solid green, 5.0:1 on white and 4.6:1 on the grey bars (WCAG 3:1 for non-text) */
  --focus: #15803D;
  --shadow: 0 1px 2px rgba(11, 26, 18, .035), 0 6px 22px rgba(11, 26, 18, .045);
  --overlay: rgba(28, 28, 30, .38);
  --green-bg: #E2F6E5; --green-ink: #18742F; --green-dot: #1EA33B;
  /* the amber chips' text: a dark brown-amber (5.1:1 on --amberc-bg; it was 3.2:1), mockups 01, 13; the dot stays bright */
  --amberc-bg: #FEF4E2; --amberc-ink: #9A5800; --amberc-dot: #E08F1C;
  --blue-bg: #E7F2FD; --blue-ink: #1546A3; --blue-dot: #1C62DA;
  --grey-bg: #F2F2F3; --grey-ink: #4A4E59; --grey-dot: #6D717B;
  --slate-bg: #EBEEF2; --slate-ink: #5A6170; --slate-dot: #7A8190;
  --red-bg: #FEE5E5; --red-ink: #C5231C; --red-dot: #DF261F;
  --dark-bg: #F0F0F0; --dark-ink: #24242A; --dark-dot: #18181C;
  --urgent-bg: #FED2CE; --urgent-ink: #D22A1F; --soft-bg: #E8E8EA; --soft-ink: #4A4E59;
  --bad: #C5231C;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #131317; --side: #1B1B1F; --card: #1B1B1F; --line: #2C2C31; --line-soft: #26262B; --thead: #212125;
    --ink: #F3F1ED; --ink2: #E2E0DC; --muted: #9A999E; --muted2: #7E7D83;
    --amber: #16A34A; --btn: #15803D; --btn-hover: #14532D; --btn-ink: #FFFFFF; --amber-ink: #3CC878; --amber-soft: #1A3325; --amber-soft2: #1E3A2B;
    --amber-line: #15803D; --icon-bg: #1A3325; --btn-ink-strong: #FFFFFF; --label-soft: #D2D2D6; --stat-ic: #3CC878; --btn-head-bg: transparent; --tile: #313134; --panel: #252529; --avatar: #3C3C3F;
    --input: #1C1C20; --input-line: #3A3A40; --focus-glow: rgba(60, 200, 120, .35); --focus: #3CC878;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25);
    --overlay: rgba(0, 0, 0, .55);
    --green-bg: #1A3423; --green-ink: #5FD77A; --green-dot: #2BD957;
    --amberc-bg: #3A2F1E; --amberc-ink: #FBBF24; --amberc-dot: #FBBF24;
    --blue-bg: #18283C; --blue-ink: #78AEFF; --blue-dot: #3D8BFF;
    --grey-bg: #2E2E31; --grey-ink: #CFCED3; --grey-dot: #A3A2A8;
    --slate-bg: #292B2F; --slate-ink: #B9BDC6; --slate-dot: #8C919C;
    --red-bg: #3D1B1E; --red-ink: #FF6B61; --red-dot: #FF4A3F;
    --dark-bg: #27282C; --dark-ink: #E7E6EA; --dark-dot: #0B0B0D;
    --urgent-bg: #5A2424; --urgent-ink: #FF9C92; --soft-bg: #2F2F33; --soft-ink: #CFCED3;
    --bad: #FF6B61;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.45 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.i .knock { stroke: var(--card); }
.i.solid { fill: currentColor; stroke-width: 1.4; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.center { text-align: center; }
.block { display: block; }
.text-bad { color: var(--bad); }
.strong-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---- shell -------------------------------------------------------------------------------------------------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.shell { display: grid; grid-template-columns: 282px minmax(0, 1fr); min-height: 100vh; }
.topbar, .nav-scrim { display: none; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 16px 14px 46px; z-index: 30; }
.brand { display: block; padding: 0 0 0 13px; text-decoration: none; }
.logo { display: block; }
/* Mockups 01–06 (12 Nov 2026): the larger logo and the widely spaced ADMINISTRATION under it. */
.logo img { display: block; width: 196px; height: auto; }
.brand-sub { display: block; margin-top: 20px; font-size: 14.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nav { display: grid; gap: 7px; margin-top: 17px; }
.nav-item { display: flex; align-items: center; gap: 22px; height: 56px; padding: 0 23px; border-radius: 12px; color: var(--ink); font-size: 19.5px; font-weight: 500; text-decoration: none; border: 0; background: none; width: 100%; cursor: pointer; text-align: left; }
.nav-item .i { width: 27px; height: 27px; stroke-width: 1.9; }
.nav-item:hover { background: var(--amber-soft); }
.nav-item.active { background: var(--amber-soft2); color: var(--amber-ink); font-weight: 700; }
.side-foot { margin: auto 14px 0; border-top: 1px solid var(--line); padding-top: 24px; }
.side-foot form { margin: 18px 0 0 -14px; }
.side-version { margin: 6px 0 14px; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.who { display: flex; align-items: center; gap: 12px; font-size: 16.5px; color: var(--muted); overflow-wrap: anywhere; }
.who .i { width: 22px; height: 22px; display: none; }
a.who { text-decoration: none; border-radius: 6px; }
a.who:hover, a.who[aria-current] { color: var(--ink); }
a.who:hover span { text-decoration: underline; }
.logout { height: 48px; font-size: 18px; gap: 18px; padding-left: 10px; color: var(--muted); }
.logout .i { width: 24px; height: 24px; }

.main { padding: 25px 24px 48px 26px; min-width: 0; }
/* The header wraps (stage G3): the French titles, subtitles and buttons are longer, so the actions move under the title
   rather than past the right edge (1280–1440 px); the actions wrap among themselves too. */
/* Mockups 01–06 (12 Nov 2026): the title on the left with the search and the header buttons beside it, the subtitle under
   both (.titles is display: contents, so its title row and subtitle are cells of the header grid); the actions keep at
   most 64 % of the width and wrap among themselves; under 1180 px they go under the subtitle. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 24px; margin-bottom: 24px; }
.page-head .titles { display: contents; }
.page-head .title-row { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
.page-head .subtitle { grid-column: 1 / -1; grid-row: 2; max-width: 1180px; }
.page-head .head-actions { grid-column: 2; grid-row: 1; max-width: min(760px, 64vw); }
.page-head h1 { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.subtitle { margin-top: 4px; font-size: 19px; color: var(--muted); }
.head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 16px; align-items: center; min-width: 0; max-width: 100%; }
.search { display: flex; align-items: center; gap: 16px; width: 452px; max-width: 100%; height: 57px; padding: 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.search .i { width: 26px; height: 26px; color: var(--ink); stroke-width: 2; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.head-actions:has(.btn-head) .search { width: 382px; }
.search:focus-within { border-color: var(--amber-line); box-shadow: 0 0 0 3px var(--focus-glow); }

/* ---- buttons ------------------------------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 46px; padding: 0 20px; border-radius: 10px; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: none; color: var(--ink); }
.btn .i { width: 22px; height: 22px; }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-outline { border-color: var(--input-line); background: var(--card); }
.btn-outline:hover { border-color: var(--amber-line); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--amber-soft); }
.btn-head { height: 54px; border-color: var(--amber-line); color: var(--amber-ink); background: var(--btn-head-bg); font-size: 19px; padding: 0 20px; }
.btn-head .i { width: 26px; height: 26px; }
.btn-head:hover, .inv-toolbar .btn-outline:hover { background: var(--amber-soft); }
/* Mockups 01–05: the header's main action filled green (white text 5.0:1), the others outlined green on white. */
.btn-head { border-width: 1.5px; font-weight: 700; }
.btn-head.btn-primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn-head.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.page-head .btn-head:not(.btn-primary) { background: var(--card); }
.page-head .btn-head:not(.btn-primary):hover { background: var(--amber-soft); }
.btn-lg { height: 50px; font-size: 18px; }
.btn-xl { height: 68px; font-size: 21px; font-weight: 700; border-radius: 12px; }
.btn-xl .i { width: 30px; height: 30px; }
.btn-block { display: flex; width: 100%; }
.btn-danger-text { color: var(--bad); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.link { color: var(--amber-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 17px; display: inline-flex; gap: 6px; align-items: center; }
.link-plain { color: inherit; text-decoration: none; }
.link-plain:hover, .ref-link:hover { color: var(--amber-ink); text-decoration: underline; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); text-decoration: none; border: 0; background: none; cursor: pointer; }
.icon-btn:hover { background: var(--amber-soft); }
.icon-btn .i { width: 28px; height: 28px; stroke-width: 1.6; }

/* ---- chips -------------------------------------------------------------------------------------------------- */
.chip { --bg: var(--grey-bg); --ink-c: var(--grey-ink); --dot-c: var(--grey-dot); display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 13px 0 12px; border-radius: 999px; background: var(--bg); color: var(--ink-c); font-size: 17px; font-weight: 500; white-space: nowrap; text-decoration: none; line-height: 1; }
.chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dot-c); flex: none; }
.chip-green { --bg: var(--green-bg); --ink-c: var(--green-ink); --dot-c: var(--green-dot); }
.chip-amber { --bg: var(--amberc-bg); --ink-c: var(--amberc-ink); --dot-c: var(--amberc-dot); }
.chip-blue { --bg: var(--blue-bg); --ink-c: var(--blue-ink); --dot-c: var(--blue-dot); }
.chip-grey { --bg: var(--grey-bg); --ink-c: var(--grey-ink); --dot-c: var(--grey-dot); }
.chip-slate { --bg: var(--slate-bg); --ink-c: var(--slate-ink); --dot-c: var(--slate-dot); }
.chip-red { --bg: var(--red-bg); --ink-c: var(--red-ink); --dot-c: var(--red-dot); }
.chip-dark { --bg: var(--dark-bg); --ink-c: var(--dark-ink); --dot-c: var(--dark-dot); }
.chip-urgent { --bg: var(--urgent-bg); --ink-c: var(--urgent-ink); font-weight: 700; height: 30px; font-size: 16px; padding: 0 12px; border-radius: 9px; }
.chip-solid-amber { --bg: var(--btn); --ink-c: #fff; font-weight: 700; height: 30px; font-size: 16px; padding: 0 12px; border-radius: 9px; }
.chip-soft { --bg: var(--soft-bg); --ink-c: var(--soft-ink); font-weight: 600; height: 30px; font-size: 15.5px; padding: 0 12px; border-radius: 9px; }
.chip-outline { --bg: var(--card); --ink-c: var(--amber-ink); border: 1.5px solid var(--amber-line); border-radius: 9px; height: 36px; padding: 0 13px; font-size: 16px; font-weight: 600; }
.chip-outline:hover { background: var(--amber-soft); }
.chip-sm { height: 26px; font-size: 14px; padding: 0 10px; gap: 6px; }
.chip-lg { height: 46px; font-size: 19px; padding: 0 18px; gap: 12px; }
.chip-lg .dot { width: 14px; height: 14px; }
.chip-check::before { content: ''; width: 14px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.chip-stack small { font-size: 13px; opacity: .85; }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pills { display: inline-flex; gap: 8px; align-items: center; }

/* ---- cards and stats ---------------------------------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 22px 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.card-h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.card-h3 { font-size: 22px; font-weight: 800; }
.see-all { display: inline-flex; align-items: center; gap: 8px; color: var(--amber-ink); font-weight: 600; font-size: 18px; text-decoration: none; }
.see-all .i { width: 22px; height: 22px; stroke-width: 2.4; }
.empty { padding: 26px 4px; color: var(--muted); text-align: center; }

.stats { display: grid; gap: 21px; }
.stats-4 { grid-template-columns: 264fr 283fr 316fr 277fr; }
.stats-2 { grid-template-columns: 284px 327px; margin-top: 22px; }
.stats-3 { grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 24px 0; }
.stat { display: flex; gap: 16px; align-items: flex-start; min-height: 148px; padding: 19px 12px 18px 19px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
.stats-2 .stat { min-height: 129px; }
.stats-3 .stat { min-height: 115px; padding: 20px 20px 18px 22px; gap: 33px; align-items: center; }
.stat-link { text-decoration: none; color: inherit; display: block; }
.stat-link .stat { height: 100%; }
.stats > div[title] > .stat { height: 100%; }
.stat-ic { width: 68px; height: 68px; border-radius: 50%; background: var(--icon-bg); color: var(--stat-ic); display: grid; place-items: center; flex: none; }
.stats-3 .stat-ic { width: 72px; height: 72px; }
.stat-ic .i { width: 36px; height: 36px; stroke-width: 2.2; }
.stat-body { display: flex; flex-direction: column; min-width: 0; padding-top: 5px; }
.stats-3 .stat-body { padding-top: 0; }
.stats-3 .stat-label { color: var(--ink2); font-weight: 500; }
.stat-label { font-size: 17.5px; color: var(--label-soft); line-height: 1.25; }
.stat-value { font-size: 41px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-top: 10px; white-space: nowrap; }
.stat-wide .stat-value { font-size: 32px; margin-top: 12px; }
.stats-3 .stat-value { font-size: 38px; margin-top: 8px; }
.stat-sub { font-size: 17px; color: var(--muted); margin-top: 3px; }

/* ---- tables ------------------------------------------------------------------------------------------------- */
.table-card { margin-top: 22px; padding: 16px 20px 0; }
.table-card .card-head { padding: 0 2px 0 2px; margin-bottom: 15px; }
.table-card.flush { padding: 0; overflow: hidden; }
.table-card.flush th:first-child, .table-card.flush td:first-child { padding-left: 24px; }
.table-card.flush th:last-child, .table-card.flush td:last-child { padding-right: 22px; }
.table-card.flush .pager { padding: 22px 22px 20px 24px; }
.table-card.flush .empty { padding: 40px 24px; }
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 18px; }
.table th { text-align: left; font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .045em; color: var(--muted); background: var(--thead); padding: 11px 12px; white-space: nowrap; }
.table td { padding: 14px 12px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:first-child td { border-top-color: var(--line-soft); }
.table tbody tr:last-child td { border-bottom: 1px solid var(--line-soft); }
.table .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }
.muted-cell { color: var(--muted); }
.ref-link { font-weight: 700; text-decoration: none; }
.th-right { text-align: right !important; }

/* orders */
.filters { display: flex; gap: 16px 20px; margin: -2px 0 0; flex-wrap: wrap; }
.filters .filter-card { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.filter-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 13px 15px; display: flex; align-items: center; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg-item { display: inline-flex; align-items: center; justify-content: center; height: 47px; padding: 0 21px; font-size: 17px; font-weight: 500; color: var(--ink2); text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; }
.seg-item.active, .seg-item:has(input:checked) { background: var(--amber-soft2); color: var(--ink); font-weight: 600; }
.seg-item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.seg-item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.filters .seg-item:first-child { min-width: 98px; }
.select-like, .select-wrap { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 16px; border: 1px solid var(--input-line); border-radius: 10px; background: var(--input); cursor: pointer; font-size: 18px; font-weight: 500; list-style: none; position: relative; }
.select-like::-webkit-details-marker { display: none; }
.select-like .chev, .select-wrap .chev { margin-left: auto; width: 22px; height: 22px; stroke-width: 2.4; pointer-events: none; }
.filters .select-like { width: 298px; }
.select-wrap { padding: 0; }
.select-wrap select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 100%; width: 100%; padding: 0 48px 0 16px; font-size: 18px; font-weight: 500; cursor: pointer; outline: none; }
.select-wrap .chev { position: absolute; right: 14px; }
.select-wrap > .i:first-child { position: absolute; left: 18px; width: 24px; height: 24px; pointer-events: none; }
.select-wrap:has(> .i:first-child) select { padding-left: 56px; }
.filters .select-wrap { width: auto; min-width: 240px; max-width: 100%; }
.filters .select-wrap select { width: auto; max-width: 100%; }
.select-wrap.small { height: 38px; font-size: 16px; }
.select-wrap.small select { font-size: 15.5px; padding: 0 38px 0 14px; }
.select-wrap.small .chev { right: 10px; width: 18px; height: 18px; }
.dropdown { position: relative; }
.dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 320px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .14); display: grid; gap: 12px; }
.row-btns { display: flex; justify-content: flex-end; gap: 10px; }
.orders-table td { padding-top: 10px; padding-bottom: 10px; }
.orders-table .cell-sub { font-size: 14.5px; line-height: 1.3; margin-top: 1px; }
.orders-table th:first-child, .orders-table td:first-child { padding-left: 22px; }
.orders-table td:nth-child(1), .orders-table td:nth-child(2), .orders-table td:nth-child(3) { white-space: nowrap; }
.orders-table td:nth-child(2) > span:first-child, .orders-table td:nth-child(3) > span:first-child { font-size: 16.5px; }
.orders-table td { font-size: 16.5px; line-height: 1.3; }
/* Stage G3: the route, client and vehicle wrap and the French headers may take two lines, so the nine columns fit the
   1440 px window (narrower windows scroll the table inside its card, never the page). */
.orders-table td:nth-child(n+7) { white-space: nowrap; }
.orders-table td:nth-child(4) { min-width: 140px; }
.orders-table th { white-space: normal; }
.orders-table th, .orders-table td { padding-left: 8px; padding-right: 8px; }
.orders-table .chip { font-size: 16px; }
.orders-table .chip-outline { font-size: 15.5px; }

.pager { display: flex; justify-content: space-between; align-items: center; padding: 26px 2px 20px; gap: 16px; flex-wrap: wrap; }
.pager-info { color: var(--muted); font-size: 17px; }
.pager-nav { display: flex; gap: 9px; align-items: center; }
.pg-btn { display: inline-grid; place-items: center; min-width: 41px; height: 41px; padding: 0 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); text-decoration: none; font-size: 17px; font-weight: 500; }
.pg-btn.active { background: var(--amber-soft2); border-color: var(--amber-line); }
.pg-arrow { background: var(--tile); border-color: transparent; }
.pg-arrow .i { width: 22px; height: 22px; stroke-width: 2.2; }
.pg-btn.disabled { opacity: .45; }
.pg-gap { width: 41px; text-align: center; color: var(--muted); letter-spacing: 2px; }

/* ---- order detail ------------------------------------------------------------------------------------------- */
.crumbs { display: flex; gap: 8px; font-size: 18px; margin-top: -12px; color: var(--muted); }
.crumbs a { color: var(--amber-ink); text-decoration: none; font-weight: 500; }
.order-title { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 0 0 12px; }
.ref-title { font-size: 37px; font-weight: 800; letter-spacing: -0.02em; }
.order-title .chip { height: 34px; font-size: 19px; padding: 0 14px; }
.booked { font-size: 16px; color: var(--ink2); margin-left: 22px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 530fr); gap: 24px; align-items: start; }
.detail-grid .col { display: grid; gap: 15px; min-width: 0; }
.detail-grid .col > * { min-width: 0; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; }
.card-icon { display: flex; gap: 22px; align-items: flex-start; padding: 10px 22px 13px; }
.card-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--tile); display: grid; place-items: center; flex: none; }
.card-ic .i { width: 24px; height: 24px; }
.card-main { flex: 1; min-width: 0; }
.card-icon .card-title { margin: 4px 0 5px; }
.strong-line { font-weight: 700; font-size: 19px; margin-bottom: 3px; }
.ic-line { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ink2); margin: 3px 0; overflow-wrap: anywhere; }
.ic-line .i { width: 20px; height: 20px; }
.ic-line a { text-decoration: none; }
.small-line { font-size: 15px; margin-top: 6px; }
.plain-lines p { font-size: 18px; color: var(--ink2); line-height: 1.5; }
.plain-lines p:first-child { color: var(--ink2); }
.kv { display: grid; gap: 4px; margin: 0; }
.kv > div { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 12px; font-size: 18px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.card-icon .kv dt { color: var(--label-soft); }
.kv.compact > div { grid-template-columns: 170px 1fr; font-size: 16px; }
.kv-inline { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 18px; color: var(--ink2); }
.kv-inline .chip { height: 32px; font-size: 17px; }
.trip-card .card-title-row { margin-bottom: 14px; }
.trip-row { display: flex; align-items: center; gap: 22px; font-size: 19px; }
.trip-row .i { width: 24px; height: 24px; color: var(--ink); }
.trip-row.muted .i { color: var(--muted); }
.route { position: relative; margin: 10px 0 0 0; display: grid; gap: 22px; padding-bottom: 14px; }
.route::before { content: ''; position: absolute; left: 11px; top: 26px; bottom: 44px; width: 2px; background: var(--amber); border-radius: 1px; }
.stop { display: flex; gap: 27px; align-items: flex-start; }
.stop strong { font-size: 19px; font-weight: 700; display: block; }
.stop-sub { display: none; }
.stop-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); margin: 5px 0 0 5px; flex: none; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--card); }
.trip-meta { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.trip-meta .trip-row { font-size: 18px; color: var(--ink2); }
.price-lines { display: grid; gap: 7px; margin: 12px 0 0; }
.price-lines > div { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; color: var(--ink2); }
.price-lines dd { margin: 0; white-space: nowrap; }
.price-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 13px; font-size: 21px; font-weight: 700; }
.price-total strong { font-size: 24px; font-weight: 800; }
.price-after { margin-top: 10px; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; position: relative; }
.timeline li { display: flex; gap: 22px; align-items: flex-start; position: relative; }
.timeline li:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 26px; height: calc(100% - 8px); width: 2px; background: var(--green-dot); opacity: .55; }
.tl-ic { width: 24px; height: 24px; color: var(--green-dot); margin-top: 2px; }
.timeline li.bad .tl-ic { color: var(--red-dot); }
.timeline li.warn .tl-ic { color: var(--amber); }
.tl-text { display: block; font-size: 19px; color: var(--ink); line-height: 1.3; }
.tl-time { display: block; font-size: 15.5px; color: var(--muted); }
.invoice-card .card-main { min-height: 96px; }
.invoice-card .center { margin: 10px 0 20px; font-size: 18px; color: var(--ink2); }
.invoice-card { padding-bottom: 20px; }
.invoice-card .btn-primary.btn-block { margin-left: -64px; width: calc(100% + 64px); height: 47px; font-size: 20px; font-weight: 700; color: var(--btn-ink-strong); }
.invoice-card .btn-primary .i { width: 24px; height: 24px; }
.inv-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 6px; }
.chip-rank { padding-left: 4px; }
.chip-rank .rank-badge { width: 22px; height: 22px; flex: none; }
.inv-number { font-size: 21px; font-weight: 800; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-row .btn { height: 42px; font-size: 16px; padding: 0 14px; gap: 8px; }
.btn-row .btn .i { width: 20px; height: 20px; }
.inv-actions { margin-left: -64px; gap: 8px; }
.inv-actions .btn { flex: 1 1 auto; font-size: 15.5px; padding: 0 12px; }
.doc-list { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 15.5px; }
.doc-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.doc-actions { display: inline-flex; align-items: center; gap: 8px; }
.doc-actions .chip { height: 28px; font-size: 14px; }
.plain-list { margin: 8px 0; padding-left: 18px; }
.verified { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 14px; color: var(--green-ink); }
.verified .i { width: 15px; height: 15px; stroke-width: 2.6; }

/* ---- forms -------------------------------------------------------------------------------------------------- */
.field { display: grid; gap: 7px; margin: 0; border: 0; padding: 0; min-width: 0; }
.label { font-size: 17px; font-weight: 500; color: var(--ink2); padding: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search]:not(.search input) { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--input-line); border-radius: 10px; background: var(--input); font-size: 17px; color: var(--ink); outline: none; }
input::placeholder { color: var(--muted2); }
input:focus { border-color: var(--amber-line); box-shadow: 0 0 0 3px var(--focus-glow); }
input[readonly] { background: var(--input); color: var(--ink); font-size: 19px; }
.hint { font-size: 16px; color: var(--muted); }
.field-error { color: var(--bad); font-size: 15px; }
.field-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.4; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--btn); flex: none; }
.check.small { font-size: 15px; color: var(--ink2); }
.check.small input { width: 18px; height: 18px; margin-top: 1px; }
.note { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink2); }
.note .i { width: 18px; height: 18px; }
.callout { background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--ink2); border-radius: 10px; padding: 10px 14px; font-size: 15px; display: grid; gap: 4px; }
.callout-bad { background: var(--red-bg); border-color: var(--red-dot); color: var(--red-ink); }
.form-error { display: flex; gap: 10px; align-items: flex-start; background: var(--red-bg); color: var(--red-ink); border-radius: 10px; padding: 11px 14px; font-size: 15.5px; }
.form-error .i { width: 20px; height: 20px; color: var(--red-dot); }
.form-notice { background: var(--amber-soft); border-radius: 10px; padding: 11px 14px; font-size: 15.5px; }

/* ---- modal -------------------------------------------------------------------------------------------------- */
/* centred while it fits; a dialog taller than the window starts at the top and scrolls (auto margins never push it above 0) */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: 24px; overflow-y: auto; }
.modal-scrim { position: fixed; inset: 0; background: var(--overlay); }
.modal { position: relative; margin: auto 0; width: min(560px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, .25); padding: 22px 24px 24px; }
.modal-wide { width: min(908px, 100%); padding: 16px 18px 20px 20px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-head h2 { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; }
.modal-close .i { width: 28px; height: 28px; stroke-width: 2; }
.modal-actions { display: flex; gap: 18px; margin-top: 6px; }
.modal-actions .btn { flex: 1; }
.modal-actions .btn-outline { flex: 0 0 142px; }
.dialog-form { display: grid; gap: 16px; font-size: 16.5px; }
.send-grid { display: grid; grid-template-columns: 375px minmax(0, 1fr); gap: 0; }
.send-form { display: grid; gap: 11px; padding-right: 17px; border-right: 1px solid var(--line); align-content: start; }
.send-form .label { font-size: 16.5px; }
.send-form input[type=text], .send-form input[type=email] { height: 40px; font-size: 16.5px; padding: 0 14px; }
.send-form .seg { display: grid; grid-template-columns: 1fr 1fr; border: 0; gap: 0; }
.send-form .seg-item { height: 40px; border: 1px solid var(--input-line); font-size: 16.5px; }
.send-form .seg-item:first-child { border-radius: 8px 0 0 8px; }
.send-form .seg-item:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.send-form .seg-item:has(input:checked) { border: 1.5px solid var(--amber-line); }
.send-form .field { gap: 4px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.label-aside { font-size: 13.5px; color: var(--muted); }
.address-field { gap: 6px !important; }
.address-field .field-row { grid-template-columns: 96px 1fr 1fr; gap: 8px; }
.check.tiny { font-size: 13.5px; color: var(--muted); gap: 6px; align-items: center; }
.check.tiny input { width: 15px; height: 15px; }
.send-form .check.confirm { font-size: 14.5px; margin-top: 4px; }
.send-form .modal-actions { margin-top: 10px; }
.send-form .modal-actions .btn { height: 50px; font-size: 18px; }
.send-form .btn-primary, .msg-detail-card .btn-primary { color: var(--btn-ink-strong); }
.send-form .callout { font-size: 13.5px; line-height: 1.4; padding: 8px 12px; }
.preview { padding-left: 17px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The browser's PDF viewer draws a dark margin around the page: the frame clips a few pixels on every side so only the
   page shows (white card with a soft shadow, as in the design). */
.preview-frame { position: relative; width: 100%; aspect-ratio: 210 / 297; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 2px 14px rgba(11, 26, 18, .08); }
.preview-frame iframe { position: absolute; top: -4px; left: -5px; width: calc(100% + 10px); height: calc(100% + 12px); border: 0; display: block; background: #fff; }
.preview-refresh { align-self: flex-end; font-size: 14.5px; }
.preview-refresh[hidden] { display: none; }
.preview-refresh .i { width: 16px; height: 16px; }

/* ---- invoices ----------------------------------------------------------------------------------------------- */
.inv-toolbar { display: flex; gap: 19px; align-items: center; flex-wrap: wrap; margin-top: -2px; }
.month-select { width: 266px; height: 50px; background: var(--card); box-shadow: var(--shadow); border-color: var(--line); }
.inv-toolbar .btn-outline { height: 50px; border: 1.5px solid var(--amber-line); color: var(--amber-ink); background: var(--btn-head-bg); font-size: 18px; }
.inv-toolbar .btn-outline .i { width: 24px; height: 24px; }
.invoices-table th { text-transform: none; font-size: 17px; letter-spacing: 0; font-weight: 600; color: var(--ink2); padding: 13px 12px; }
.invoices-table th:first-child, .invoices-table td:first-child { padding-left: 22px; }
.invoices-table td { padding: 6px 12px; font-size: 17.5px; }
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.th-sort .i { width: 20px; height: 20px; stroke-width: 2.2; }
.i.flip { transform: rotate(180deg); }
.num-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.doc-no { font-weight: 500; }
.status-wrap { display: inline-flex; align-items: center; gap: 36px; }
.resend-link { font-size: 17px; }
.pdf-cell { text-align: right; white-space: nowrap; }
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .16); padding: 6px; display: grid; text-align: left; }
.menu-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 16px; }
.menu-panel a:hover { background: var(--amber-soft); }
.menu-panel .i { width: 20px; height: 20px; }
.pdf-links { margin-top: 22px; }
.pdf-links .muted { margin: 4px 0 10px; font-size: 15px; }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.link-list a { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-ink); font-size: 15.5px; text-decoration: none; }
.link-list .i { width: 18px; height: 18px; }

/* ---- messages ----------------------------------------------------------------------------------------------- */
.messages-grid { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 637fr); gap: 27px; align-items: start; margin-top: -10px; }
.msg-list-card { padding: 0; overflow: hidden; }
.msg-list-card .card-head { padding: 18px 22px 0 22px; margin-bottom: 12px; }
.msg-list { list-style: none; margin: 0; padding: 0; }
.msg-item { display: grid; grid-template-columns: 14px 56px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 16px 26px 15px 10px; text-decoration: none; color: inherit; border-top: 1px solid var(--line-soft); }
.msg-list li:first-child .msg-item { border-top: 0; }
.msg-item:hover { background: var(--amber-soft); }
.msg-item.active { background: var(--amber-soft); }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; margin: 24px 0 0 4px; }
.msg-item.unread .unread-dot { background: var(--amber); }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--avatar); display: grid; place-items: center; font-weight: 700; font-size: 20px; color: var(--ink2); }
.avatar-lg { width: 66px; height: 66px; font-size: 25px; }
/* name | time, then topic and preview on the left with the priority chip centred beside them (admin_messages.png) */
.msg-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name time" "topic prio" "preview prio"; gap: 1px 12px; min-width: 0; line-height: 1.35; align-items: baseline; }
.msg-name { grid-area: name; font-size: 18.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-time { grid-area: time; justify-self: end; }
.msg-prio { grid-area: prio; align-self: center; justify-self: end; display: flex; }
.msg-prio .chip { flex: none; }
.msg-time { font-size: 16px; color: var(--muted); white-space: nowrap; }
.msg-topic { grid-area: topic; font-size: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg-preview { grid-area: preview; font-size: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg-detail-card { padding: 24px 26px 20px 28px; }
.msg-head { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.msg-who h2 { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; }
.msg-who a { font-size: 18px; text-decoration: none; overflow-wrap: anywhere; }
.msg-when { display: grid; justify-items: end; font-size: 18px; color: var(--muted); align-self: start; }
.msg-when span:first-child { color: var(--ink2); }
.msg-subject { font-size: 31px; font-weight: 800; letter-spacing: -0.02em; margin-top: 20px; }
.msg-ref { font-size: 17.5px; margin-top: 2px; }
.suggest { display: flex; align-items: center; gap: 14px; background: var(--amber-soft); border-radius: 10px; padding: 13px 18px; margin: 18px 0 12px; font-size: 18px; color: var(--ink2); }
.suggest .i { width: 30px; height: 30px; color: var(--btn); }
.suggest strong { color: var(--amber-ink); font-weight: 700; }
.msg-body { display: grid; gap: 12px; font-size: 18px; line-height: 1.42; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.app-details { background: var(--panel); border-radius: 12px; padding: 16px 20px; margin: 20px 0 22px; }
.app-details h4 { font-size: 18.5px; font-weight: 700; margin-bottom: 12px; }
.app-details dl { margin: 0; display: grid; gap: 5px; }
.app-details dl > div { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 12px; font-size: 16.5px; line-height: 1.35; }
.app-details dt { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.app-details dt .i { width: 19px; height: 19px; }
.app-details dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 15px; }
.msg-filter { margin: 0; }
.msg-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ---- settings ----------------------------------------------------------------------------------------------- */
.settings-top { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 528fr); gap: 22px; align-items: stretch; margin-top: 2px; }
.settings-bottom { display: grid; grid-template-columns: minmax(0, 393fr) minmax(0, 414fr) minmax(0, 340fr); gap: 22px; margin-top: 22px; align-items: stretch; }
.settings-bottom .settings-card { display: flex; flex-direction: column; }
.card-foot { margin-top: auto; padding-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.subs { font-size: 15px; margin-left: 8px; }
.settings-card { padding: 24px 26px 24px; }
.settings-card .card-h2 { font-size: 31px; margin-bottom: 18px; }
.company-card .card-title-row { margin-bottom: 20px; }
.company-card .card-h2 { margin: 0; }
.kv-wide { gap: 5px; }
.kv-wide > div { grid-template-columns: 198px minmax(0, 1fr); font-size: 17px; line-height: 1.35; }
.env-help { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.env-help summary { cursor: pointer; color: var(--amber-ink); font-weight: 600; }
.env-help dl { margin: 10px 0 6px; display: grid; gap: 3px; }
.env-help dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.env-help dd { margin: 0; overflow-wrap: anywhere; }
.env-help code { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink2); }
.env-note { display: block; font-size: 13px; color: var(--muted2); margin-top: 1px; }
.seg-vat { display: grid; grid-template-columns: auto auto; width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.seg-vat .seg-item { height: 56px; font-size: 16.5px; padding: 0 14px; white-space: nowrap; }
.seg-item.is-disabled { opacity: .5; cursor: not-allowed; }
.seg-item.is-disabled input { cursor: not-allowed; }
.vat-lock { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.vat-lock .i { width: 18px; height: 18px; margin-top: 1px; }
.vat-text { margin: 18px 0 18px; font-size: 16px; min-height: 23px; }
.vat-form .btn-primary { height: 60px; font-size: 21px; font-weight: 700; border-radius: 10px; }
.vat-facts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); gap: 8px; }
.vat-facts > div { grid-template-columns: 136px minmax(0, 1fr); font-size: 15px; }
.vat-card > .vat-foot { margin-top: 12px; font-size: 13.5px; }
.settings-bottom .field { margin-bottom: 12px; }
.settings-bottom .label { font-size: 18px; color: var(--muted); font-weight: 400; }
.settings-bottom input[readonly] { height: 52px; padding: 0 18px; }
.warn-banner { display: flex; gap: 12px; align-items: flex-start; margin: -8px 0 16px; padding: 7px 14px; font-size: 14.5px; gap: 2px 12px; }
.warn-banner .i { margin-top: 0; }
.warn-banner .i { width: 22px; height: 22px; color: var(--btn); }

/* ---- standalone backend (STANDALONE.md section 10): header chip, banner, dashboard, orders source -------------- */
code { font: 500 .86em/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel); color: var(--ink2); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mode-chip { height: 30px; padding: 0 12px; gap: 8px; font-size: 15px; font-weight: 600; }
.mode-chip .dot { width: 9px; height: 9px; }
.mode-chip:hover { filter: brightness(.96); }
.sim-banner { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 10px 16px; border: 1px solid var(--red-dot); border-radius: 12px; background: var(--red-bg); color: var(--red-ink); font-size: 15.5px; line-height: 1.4; }
.sim-banner .i { width: 22px; height: 22px; color: var(--red-dot); }
.stats-small { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.stats-small .stat { min-height: 129px; }
.attention { margin-top: 22px; padding: 14px 18px 16px; gap: 8px; }
.attention-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.attention-title .i { width: 22px; height: 22px; color: var(--red-dot); }
.attention-list { margin: 0; padding-left: 32px; display: grid; gap: 4px; font-size: 15.5px; color: var(--ink2); }
.attention a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.filters-sub { margin-top: 12px; }
.filters-sub .filter-card:last-child { flex: 0 1 auto; }
.filters-sub .filter-card { padding: 8px 12px; gap: 12px; }
.filter-label { margin-left: 4px; font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.seg-sm .seg-item { height: 38px; padding: 0 16px; font-size: 15.5px; }
.orders-table .src-chip { height: 22px; margin-top: 4px; padding: 0 8px; font-size: 12.5px; font-weight: 600; }
.btn[disabled]:not([aria-busy]) { cursor: not-allowed; }

/* ---- settings: Backend card, Data export, API and data ----------------------------------------------------------- */
.backend-card { margin: 2px 0 0; }
.backend-head { flex-wrap: wrap; }
.backend-card .card-h2, .export-card .card-h2, .system-card .card-h2 { margin-bottom: 0; }
.backend-status { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.backend-since { margin: 6px 0 16px; font-size: 15px; }
.backend-card .callout, .export-card .callout { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 15px; }
.backend-card .callout .i { width: 20px; height: 20px; flex: none; color: var(--btn); }
.backend-card .callout-bad .i { color: var(--red-dot); }
.backend-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 28px; align-items: start; }
.backend-choice { display: grid; gap: 14px; max-width: 560px; }
.backend-choice .vat-lock { margin-top: -2px; }
.backend-choice [hidden] { display: none !important; }
.seg-backend .seg-item > span { display: inline-flex; align-items: center; gap: 8px; }
.seg-lock { width: 18px !important; height: 18px !important; }
.steps-title { margin: 26px 0 8px; font-size: 20px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 7px 0; }
.step:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 42px; bottom: -5px; width: 2px; background: var(--line); }
.step.done:not(:last-child)::before { background: var(--green-dot); opacity: .5; }
.step-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tile); color: var(--muted); font-size: 16px; font-weight: 700; }
.step.done .step-n { background: var(--green-bg); color: var(--green-ink); }
.step.current .step-n { background: var(--amber-soft2); color: var(--amber-ink); box-shadow: 0 0 0 2px var(--amber-line); }
.step-n .i { width: 18px; height: 18px; stroke-width: 2.8; }
.step-body { padding-top: 5px; min-width: 0; }
.step-body strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.step-text { display: block; margin-top: 1px; font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.backend-actions { margin-top: 16px; }
.backend-actions .btn { height: 46px; padding: 0 18px; font-size: 16.5px; }
.conn-panel { background: var(--panel); border-radius: 12px; padding: 18px 20px 16px; min-width: 0; }
.conn-panel .card-h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 20px; }
.conn-panel .card-h3 .i { width: 22px; height: 22px; color: var(--stat-ic); }
.kv.conn-kv { gap: 7px; }
.kv.conn-kv > div { grid-template-columns: 128px minmax(0, 1fr); font-size: 15.5px; align-items: baseline; }
.test-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conn-kv .cell-sub { font-size: 13.5px; }
.ops-help { margin-top: 6px; }
.ops-list { margin: 6px 0 0; font-size: 13px; line-height: 1.7; }
.conn-test { margin-top: 14px; }
.conn-test .btn { height: 44px; font-size: 16px; }
.conn-test .btn .i { width: 20px; height: 20px; }
.conn-note { margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
.rules { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; font-size: 14.5px; color: var(--ink2); }
.rules li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.rules .i { width: 18px; height: 18px; margin-top: 1px; color: var(--stat-ic); }
.history-help { margin-top: 14px; }
.history-list { display: grid; gap: 3px; margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink2); }
.settings-backend-sub { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; margin: 22px 0; }
.export-card .card-title-row { flex-wrap: wrap; margin-bottom: 8px; }
.export-card .btn-primary { height: 44px; font-size: 16px; padding: 0 16px; gap: 10px; }
.export-card .btn-primary .i { width: 20px; height: 20px; }
.export-card > .muted { margin-bottom: 14px; line-height: 1.45; }
.export-card .empty { padding: 18px 4px; }
.exports-table { font-size: 15px; }
.exports-table th { padding: 9px 10px; font-size: 13px; }
.exports-table td { padding: 10px; vertical-align: top; }
.exports-table th:first-child, .exports-table td:first-child { padding-left: 0; }
.exports-table code { font-size: 12.5px; }
.file-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.file-link { display: inline-flex; align-items: center; gap: 5px; color: var(--amber-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.file-link .i { width: 16px; height: 16px; }
.file-link:hover span { text-decoration: underline; }
.system-card .card-h2 { margin-bottom: 10px; }
.kv.system-kv { gap: 0; }
.kv.system-kv > div { grid-template-columns: 150px minmax(0, 1fr); padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 15.5px; align-items: baseline; }
.kv.system-kv > div:first-child { border-top: 0; }
.system-kv dd .muted { font-size: 13.5px; }
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; }
.job-list li { display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.from-to { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.from-to .i { width: 20px; height: 20px; color: var(--muted); }
.dialog-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; line-height: 1.4; color: var(--ink2); }
.dialog-facts li { display: flex; gap: 10px; align-items: flex-start; }
.dialog-facts .i { width: 18px; height: 18px; margin-top: 2px; color: var(--amber); }
/* hooks of admin/customers.mjs and admin/bookings-cards.mjs (WP-A2) */
.server-booking-card .app-details { margin: 14px 0 0; }
.server-booking-card .card-title-row + .app-details, .server-booking-card .card-main > .app-details:first-of-type { margin-top: 8px; }
.account-card .kv-inline { gap: 8px; margin-top: 8px; }
.customers-table td { font-size: 16px; }

/* ---- toast -------------------------------------------------------------------------------------------------- */
.toast { position: fixed; top: 20px; right: 24px; z-index: 200; display: flex; gap: 12px; align-items: flex-start; max-width: min(460px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green-dot); border-radius: 12px; box-shadow: 0 16px 50px rgba(0, 0, 0, .18); padding: 14px 12px 14px 16px; font-size: 16px; }
.toast-error { border-left-color: var(--red-dot); }
.toast-info { border-left-color: var(--amber); }
.toast-icon { width: 24px; height: 24px; color: var(--green-dot); margin-top: 1px; }
.toast-error .toast-icon { color: var(--red-dot); }
.toast-info .toast-icon { color: var(--amber); }
.toast-body { display: grid; gap: 2px; flex: 1; overflow-wrap: anywhere; }
.toast-close { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 2px; }
.toast-close .i { width: 20px; height: 20px; }
.toast.hide { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; pointer-events: none; }

/* ---- sign-in ------------------------------------------------------------------------------------------------ */
.login-page { background: #F0FDF4; min-height: 100vh; }
.login { min-height: 100vh; display: grid; place-items: start center; padding: 145px 16px 40px; }
.login-card { width: min(610px, 100%); background: var(--card); border-radius: 18px; box-shadow: 0 20px 60px rgba(11, 26, 18, .18); padding: 30px 43px 34px; }
.login-brand { display: grid; justify-items: center; }
.logo-login img { width: 240px; }
.login-brand .brand-sub { margin-top: 0; font-size: 18px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.login-card h1 { text-align: center; font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 16px 0 20px; }
.login-form { display: grid; gap: 22px; }
.login-form .label { font-size: 18px; font-weight: 500; color: var(--label-soft); }
.login-form .field { gap: 5px; }
.input-ic { position: relative; display: flex; align-items: center; }
.input-ic > .i { position: absolute; left: 20px; width: 24px; height: 24px; color: var(--ink); pointer-events: none; }
.input-ic input { height: 58px !important; padding-left: 64px !important; font-size: 19.5px !important; border-radius: 12px !important; }
.input-ic input[type=password] { letter-spacing: .14em; padding-right: 64px !important; }
.reveal { position: absolute; right: 12px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.reveal .i { width: 26px; height: 26px; }
.login-form .hint { margin-top: 2px; font-size: 17px; }
.login-form .btn { margin-top: 6px; height: 58px; font-size: 21px; font-weight: 700; border-radius: 10px; }
.login-foot { text-align: center; color: var(--muted); font-size: 16.5px; margin-top: 26px; }
.login-card .form-error { margin-bottom: 16px; }
.error-card { text-align: center; display: grid; gap: 16px; }
.error-card h1 { margin: 12px 0 0; font-size: 34px; }
@media (prefers-color-scheme: dark) {
  .login-page { background: #111216; }
  .login-card { background: #1B1C20; border: 1px solid #34343A; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
  .search { box-shadow: none; border-color: #3A3A40; }
  .stat, .card, .filter-card { box-shadow: none; }
}

/* ---- responsive --------------------------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search { width: 340px; }
  .send-grid { grid-template-columns: 340px minmax(0, 1fr); }
  .orders-table td { font-size: 15.5px; }
  .orders-table td:nth-child(2) > span:first-child, .orders-table td:nth-child(3) > span:first-child { font-size: 15.5px; }
  .orders-table .chip { font-size: 14.5px; }
  .orders-table .chip-outline { font-size: 14px; }
}
@media (max-width: 1180px) {
  .detail-grid, .settings-top, .messages-grid { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-wrap: wrap; }
  .page-head .head-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; max-width: 100%; }
}
@media (max-width: 899px) {
  body { font-size: 16px; }
  .shell { display: block; }
  /* mockup 13: the full logo, a thin divider and the widely spaced ADMINISTRATION, the menu button on the right */
  .topbar { display: flex; position: sticky; top: 0; z-index: 40; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px; background: var(--side); border-bottom: 1px solid var(--line); }
  .topbar-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
  .logo-sm img { width: auto; height: 46px; }
  .topbar .brand-sub { margin: 0; padding: 7px 0 7px 14px; border-left: 1px solid var(--line); font-size: 12.5px; letter-spacing: .2em; white-space: nowrap; }
  .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; }
  .menu-btn .i { width: 28px; height: 28px; stroke-width: 2.2; }
  /* closed: off screen, without its shadow showing at the left edge and out of the tab order (visibility) */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(300px, 86vw); transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .nav-toggle:checked ~ .shell .sidebar { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  .nav-toggle:checked ~ .shell .nav-scrim { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 25; }
  .brand .logo img { width: 150px; }
  .brand-sub { margin-top: 12px; }
  .main { padding: 18px 16px 40px; }
  .page-head { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; }
  /* the desktop rule centres the title row vertically in the header grid; in this column it would centre it sideways */
  .page-head .title-row { align-self: auto; }
  .page-head .titles { flex: none; }
  .page-head .subtitle { margin-top: -8px; }
  .page-head h1 { font-size: 32px; }
  .subtitle { font-size: 16px; margin-top: 4px; }
  .head-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .search { width: 100%; height: 48px; }
  .search input { font-size: 16px; }
  .btn-head { height: 46px; font-size: 17px; }
  .stats-4, .stats-2, .stats-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stats-2 { margin-top: 12px; }
  .stat, .stats-2 .stat, .stats-3 .stat { min-height: 0; padding: 14px; gap: 14px; align-items: center; }
  .stat-ic, .stats-3 .stat-ic { width: 52px; height: 52px; }
  .stat-ic .i { width: 26px; height: 26px; }
  .stat-body { padding-top: 0; }
  .stat-label { font-size: 15px; }
  .stat-value, .stat-wide .stat-value, .stats-3 .stat-value { font-size: 28px; margin-top: 2px; }
  .stat-sub { font-size: 14px; margin-top: 2px; }
  .card { padding: 16px; }
  .card-h2 { font-size: 24px; }
  .table-card { padding: 16px 12px 0; }
  .table-card.flush { padding: 12px 12px 0; overflow: visible; }
  .table-card.flush .pager { padding: 16px 0; }
  /* tables become stacked cards */
  .table.stack thead { display: none; }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
  .table.stack tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--card); }
  .table.stack td { border: 0 !important; padding: 6px 0 !important; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 15.5px; text-align: left; white-space: normal !important; }
  .table.stack td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
  .table.stack td > * { justify-self: start; }
  .table.stack td > .cell-sub { grid-column: 2; margin-top: -8px; }
  .table.stack td.pdf-cell { display: flex; align-items: center; gap: 10px; }
  .table.stack td.pdf-cell::before { width: 110px; flex: none; }
  .msg-list-card .card-head { gap: 8px; }
  .msg-list-card .card-h3 { font-size: 20px; white-space: nowrap; }
  .msg-filter .select-wrap.small select { font-size: 14px; padding: 0 30px 0 12px; }
  .input-ic input { font-size: 17px !important; height: 52px !important; padding-left: 56px !important; }
  .input-ic > .i { left: 16px; }
  .table-wrap { overflow: visible; }
  .pdf-cell { text-align: left; }
  .status-wrap { gap: 16px; }
  .filters { gap: 10px; flex-direction: column; }
  .filter-card { padding: 8px; }
  .filters .seg { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .seg-item { padding: 0 6px; font-size: 15px; height: 42px; }
  .filters .seg-item:first-child { min-width: 0; }
  .filters .select-like, .filters .select-wrap, .filters .dropdown { width: 100%; }
  .dropdown-panel { width: 100%; }
  .pager { justify-content: center; padding: 16px 0; }
  .pager-nav { flex-wrap: wrap; justify-content: center; }
  .pg-btn { min-width: 36px; height: 36px; font-size: 15px; }
  .ref-title { font-size: 28px; }
  .order-title { gap: 12px; }
  .booked { margin-left: 0; width: 100%; }
  .card-icon { gap: 14px; padding: 16px; }
  .card-ic { width: 38px; height: 38px; }
  .kv > div, .kv-wide > div, .kv.compact > div { grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 16px; }
  .kv dt { font-size: 14px; }
  .trip-row, .trip-meta .trip-row, .stop strong, .tl-text { font-size: 16px; }
  .trip-row { gap: 14px; }
  .stop { gap: 22px; }
  .invoice-card .btn-primary.btn-block { margin-left: -52px; width: calc(100% + 52px); }
  .inv-actions { margin-left: -52px; }
  /* block layout: the full-screen dialog grows with its content (form + preview) and the backdrop scrolls */
  .modal-backdrop { padding: 0; display: block; }
  .modal, .modal-wide { width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0; border: 0; padding: 16px; }
  .modal-head h2 { font-size: 24px; }
  .send-grid { grid-template-columns: minmax(0, 1fr); }
  .send-form { padding: 0; border: 0; }
  .preview { padding: 16px 0 0; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field:first-child { grid-column: 1 / -1; }
  .modal-actions .btn-outline { flex: 0 0 110px; }
  .inv-toolbar { flex-direction: column; align-items: stretch; }
  .month-select { width: 100%; }
  .messages-grid { margin-top: 0; gap: 16px; }
  .msg-anchor { position: static; display: block; height: 0; margin-bottom: -16px; scroll-margin-top: 70px; }
  .msg-item { padding: 12px 14px 12px 6px; grid-template-columns: 10px 44px minmax(0, 1fr); gap: 0 10px; }
  .msg-main { grid-template-areas: "name time" "topic topic" "preview prio"; }
  .msg-name { font-size: 16.5px; }
  .msg-topic { font-size: 16px; }
  .msg-preview, .msg-time { font-size: 14.5px; }
  .avatar { width: 44px; height: 44px; font-size: 16px; }
  .avatar-lg { width: 52px; height: 52px; font-size: 19px; }
  .msg-head { grid-template-columns: 52px minmax(0, 1fr); }
  .msg-when { grid-column: 1 / -1; justify-items: start; display: flex; gap: 8px; font-size: 15px; }
  .msg-who h2, .msg-subject { font-size: 24px; }
  .msg-body, .suggest { font-size: 16px; }
  .app-details dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .btn-xl { height: 56px; font-size: 18px; }
  .settings-bottom { grid-template-columns: minmax(0, 1fr); }
  .settings-card { padding: 18px; }
  .settings-card .card-h2 { font-size: 24px; }
  .company-card .card-title-row { flex-direction: column; align-items: flex-start; }
  .seg-vat { grid-template-columns: 1fr; }
  .seg-vat .seg-item { height: 48px; }
  .vat-form .btn-primary { height: 52px; font-size: 18px; }
  .toast { left: 16px; right: 16px; top: 72px; max-width: none; }
  .login { padding: 32px 16px; }
  .login-card { padding: 24px 20px 26px; }
  .login-card h1 { font-size: 34px; margin: 16px 0 18px; }
  .logo-login img { width: 190px; }
}
/* standalone backend parts (after the rules above, so these win at the same specificity) */
@media (max-width: 1360px) {
  .stats-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .backend-grid, .settings-backend-sub { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  /* the desktop width of the search next to a header button (Orders, Customers) must not widen the page on a phone */
  .head-actions:has(.btn-head) .search { width: 100%; }
  /* long French button labels wrap inside the card instead of passing its edge (stage G3) */
  .btn-row .btn { white-space: normal; height: auto; min-height: 42px; padding-top: 8px; padding-bottom: 8px; max-width: 100%; text-align: center; }
  .stats-small { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .stats-small .stat { min-height: 0; }
  .title-row { gap: 10px; }
  .sim-banner { font-size: 14.5px; padding: 9px 12px; }
  .attention { padding: 12px 14px; }
  .attention-list { padding-left: 20px; font-size: 15px; }
  .filters-sub .filter-card { flex-direction: column; align-items: stretch; gap: 6px; }
  .filters-sub .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .seg-sm .seg-item { padding: 0 6px; font-size: 14px; text-align: center; line-height: 1.15; }
  .backend-choice { max-width: none; }
  .seg-backend { grid-template-columns: 1fr; }
  .backend-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .conn-panel { padding: 14px; }
  .kv.conn-kv > div, .kv.system-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 15.5px; }
  .export-card .card-title-row { align-items: stretch; }
  .export-card .card-title-row form, .export-card .card-title-row .btn { width: 100%; }
  .exports-table th:first-child, .exports-table td:first-child { padding-left: 0 !important; }
  .table.stack.exports-table td { grid-template-columns: 82px minmax(0, 1fr); }
  /* dialogs: a long button label ("Switch back to standalone", "Keep preparing") wraps instead of widening the dialog
     past the screen (the grid track of .dialog-form would otherwise grow to the button's one-line width) */
  .dialog-form { grid-template-columns: minmax(0, 1fr); }
  .modal-actions .btn { min-width: 0; padding: 0 12px; white-space: normal; text-align: center; line-height: 1.15; }
}
/* ---- settings: Payment options (admin/payment-options.mjs; owner request of 24 Oct 2026) ------------------------- */
.pay-card { margin: 0 0 22px; }
.pay-head { flex-wrap: wrap; margin-bottom: 6px; }
.pay-card .card-h2 { margin-bottom: 0; }
.pay-intro { margin: 0 0 16px; font-size: 15.5px; line-height: 1.45; max-width: 980px; }
.pay-card > .callout { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 15px; }
.pay-card > .callout .i { width: 20px; height: 20px; flex: none; color: var(--red-dot); }
.pay-options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pay-option { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pay-option-keys_missing, .pay-option-payments_off { border-color: var(--amber-line); background: var(--amber-soft); }
.pay-option-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pay-option-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding-top: 7px; }
.pay-option-title .card-h3 { font-size: 19px; line-height: 1.25; }
.pay-help { font-size: 15px; line-height: 1.45; color: var(--ink2); }
.pay-now { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink2); }
.pay-now.text-bad { color: var(--red-ink); }
.pay-now .i { width: 18px; height: 18px; margin-top: 1px; color: var(--amberc-dot); }
.pay-meta { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); align-items: baseline; }
.pay-meta-k { font-weight: 600; }
.pay-meta-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; overflow-wrap: anywhere; }
.pay-meta code { font-size: 12px; }
.pay-option > .pay-meta:first-of-type { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pay-foot { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 14px; }
.pay-foot .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--stat-ic); }
.pay-foot a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 2px; }
/* web/payment-options-web: the "Website (bookingparistransfer.com)" group below the app's switches. */
.pay-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pay-group .pay-group-title { margin-bottom: 0; }
.pay-option-needs_card { border-color: var(--amber-line); }
/* The switch: a submit button with role="switch" in its own form (works without JavaScript). */
.pay-switch-form { flex: none; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; font-weight: 700; }
.switch-track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--tile); border: 1px solid var(--input-line); transition: background-color .15s, border-color .15s; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .15s; }
.switch.is-on { color: var(--green-ink); }
.switch.is-on .switch-track { background: var(--green-dot); border-color: var(--green-dot); }
.switch.is-on .switch-knob { transform: translateX(22px); }
.switch:hover .switch-track { border-color: var(--amber-line); }
.switch.is-on:hover .switch-track { filter: brightness(.95); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.switch[disabled] { cursor: not-allowed; opacity: .5; }
.switch-text { min-width: 28px; text-align: left; }
@media (max-width: 1180px) {
  .pay-options { grid-template-columns: minmax(0, 1fr); }
  .pay-option > .pay-meta:first-of-type { margin-top: 4px; }
}
@media (max-width: 899px) {
  .pay-option { padding: 14px; }
  .pay-meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Package SRV (23 Oct 2026): TEST badge of test accounts and bookings, cancellation requests on the order page and in Messages. */
.test-chip { letter-spacing: .06em; }
.inline-form { margin: 6px 0 0; }
.cancel-label { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.quota-line { font-size: 14.5px; }

/* Orders list after mockup 18-admin-orders-from-devis (12 Nov 2026). Scoped to the orders page's own filter form and
   table (admin/pages.mjs ordersPage, whose HTML the goldens of admin/devis-orders.test.mjs pin, so the look is CSS only):
   the filters as one row of bordered controls without card frames, the active tab in green, bold references, clients
   and totals, the route in the main ink, a dot in the « Devis BPT-… » chip. The phone layout (stacked cards) is kept. */
.orders-table td.muted-cell { color: var(--ink2); }
/* the source chip: small and bold with its dot at every width; it wraps rather than overflow its cell on a phone */
.orders-table .chip.src-chip { gap: 5px; max-width: 100%; height: auto; min-height: 22px; padding: 2px 9px 2px 8px; font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: normal; }
.orders-table .src-chip::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dot-c); }
/* the invoice: a bold, fully rounded pill */
.orders-table .chip-outline { border-radius: 999px; font-weight: 700; }
/* each filter without a card frame of its own (no double borders on a phone either) */
form.filters[action="/admin/orders"] .filter-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media (max-width: 640px) {
  form.filters[action="/admin/orders"] .select-wrap select { padding: 0 40px 0 14px; font-size: 15px; }
}
@media (min-width: 900px) {
  .orders-table th { color: var(--ink2); font-size: 13px; font-weight: 600; letter-spacing: .03em; }
  .orders-table td[data-label="Client"], .orders-table td[data-label="Total TTC"] { font-weight: 700; }
  .orders-table td[data-label="Client"] .cell-sub { font-weight: 400; }
  /* Total TTC right-aligned under its head (mockup 18) */
  .orders-table td[data-label="Total TTC"], .orders-table th:nth-child(7) { text-align: right; }
  /* the route takes the free width (about 190 px at 1440): the other columns stay at their content */
  .orders-table td:nth-child(4) { width: 22%; min-width: 150px; }
  /* the rows of orders that came from a quote: a light green tint (the website's stay white) */
  .orders-table tbody tr:has(a.src-chip[href^="/admin/quotes/"]) td { background: var(--amber-soft); }
  .orders-table tbody tr:has(a.src-chip[href^="/admin/quotes/"]):hover td { background: var(--amber-soft2); }
  form.filters[action="/admin/orders"] { gap: 10px; align-items: center; }
  form.filters[action="/admin/orders"] .seg { border-color: var(--input-line); border-radius: 12px; box-shadow: var(--shadow); }
  form.filters[action="/admin/orders"] .seg-item { height: 46px; padding: 0 15px; font-size: 15px; }
  form.filters[action="/admin/orders"] .seg-item:first-child { min-width: 0; }
  form.filters[action="/admin/orders"] .seg-item + .seg-item { border-left: 1px solid var(--line); }
  form.filters[action="/admin/orders"] .seg-item.active { color: var(--green-ink); box-shadow: inset 0 0 0 1.5px var(--amber-line); border-radius: 12px 0 0 12px; }
  form.filters[action="/admin/orders"] .seg-item.active:not(:first-child) { border-radius: 0; }
  form.filters[action="/admin/orders"] .seg-item.active:last-child { border-radius: 0 12px 12px 0; }
  form.filters[action="/admin/orders"] .select-like, form.filters[action="/admin/orders"] .select-wrap { height: 46px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font-size: 15px; }
  form.filters[action="/admin/orders"] .select-like { width: auto; min-width: 0; gap: 10px; padding: 0 14px; }
  form.filters[action="/admin/orders"] .select-like .chev { width: 20px; height: 20px; }
  form.filters[action="/admin/orders"] .select-wrap { min-width: 0; }
  /* the sort and invoice selects as wide as the chosen option (where the browser can), so the filters keep one row */
  form.filters[action="/admin/orders"] .select-wrap select { padding: 0 42px 0 14px; font-size: 15px; field-sizing: content; }
  form.filters[action="/admin/orders"] .select-wrap .chev { right: 13px; width: 20px; height: 20px; }
  .orders-table th { background: var(--card); }
  .orders-table td { padding-top: 16px; padding-bottom: 16px; vertical-align: top; }
  .orders-table .ref-link { font-size: 17.5px; font-weight: 800; }
  .orders-table .chip-outline { height: 32px; padding: 0 11px; font-size: 13.5px; }
  .orders-table .chip.src-chip { white-space: nowrap; }
  .orders-table td[data-label="Paiement"] .chip { gap: 6px; padding: 0 10px 0 9px; font-weight: 600; }
  .orders-table td[data-label="Paiement"] .chip .dot { width: 8px; height: 8px; }
  .orders-table tbody tr:hover td { background: var(--amber-soft); }
}
/* 900 to 1399 px: tighter cells, so the nine columns fit the card without a sideways scroll from 1280 px */
@media (min-width: 900px) and (max-width: 1399px) {
  .orders-table th, .orders-table td { padding-left: 6px; padding-right: 6px; }
  .table-card.flush .orders-table th:first-child, .table-card.flush .orders-table td:first-child { padding-left: 18px; }
  .table-card.flush .orders-table th:last-child, .table-card.flush .orders-table td:last-child { padding-right: 14px; }
  .orders-table .ref-link { font-size: 16px; }
  .orders-table th { font-size: 12.5px; }
  .orders-table .chip.src-chip { font-size: 12px; }
  .orders-table .chip-outline { padding: 0 9px; font-size: 12.5px; }
  form.filters[action="/admin/orders"] { gap: 8px; }
  form.filters[action="/admin/orders"] .seg-item { padding: 0 12px; font-size: 14.5px; }
  form.filters[action="/admin/orders"] .select-like { gap: 8px; padding: 0 12px; font-size: 14.5px; }
  form.filters[action="/admin/orders"] .select-wrap select { padding: 0 36px 0 12px; font-size: 14.5px; }
  form.filters[action="/admin/orders"] .select-wrap .chev { right: 10px; }
}
/* below 1340 px the « Devis BPT-… » chip takes two lines, so the route keeps about 155 px */
@media (min-width: 900px) and (max-width: 1339px) {
  .orders-table .chip.src-chip { white-space: normal; }
  .orders-table td[data-label="Référence"] { min-width: 156px; }
}