/* Trip Desk UI — the shared look (design system: https://claude.ai/artifact/QCUKtUjfzsxStgDjuR6btQ).
   Tokens sit on the theme's --osen-* variables, so light and dark follow the theme switch.
   Load with a ?v=N query and bump it on every change: the service worker skips versioned URLs. */

:root {
    --td-bg: var(--osen-body-bg);
    --td-surface: var(--osen-secondary-bg);
    --td-surface-2: var(--osen-tertiary-bg);
    --td-border: var(--osen-border-color);
    /* Form field frames: darker than a card's border so a field reads as something to fill in (3:1). */
    --td-field: #8a93a3;
    --td-text: var(--osen-body-color);
    --td-emphasis: #2b2b38;
    --td-muted: #6c778a;
    --td-primary: var(--osen-primary);
    --td-primary-soft: rgba(70, 93, 255, .10);
    --td-on-primary: #fff;
    /* Status as fills (bars, dots, buttons) and as text (-ink): the theme's hues are too light to read as text on light surfaces. */
    --td-success: var(--osen-success);
    --td-success-ink: #2e7d23;
    --td-success-soft: rgba(106, 199, 90, .14);
    --td-warning: var(--osen-warning);
    --td-warning-ink: #8a5a00;
    --td-warning-soft: rgba(249, 196, 92, .20);
    --td-danger: var(--osen-danger);
    --td-danger-ink: #c2380f;
    --td-danger-soft: rgba(255, 109, 67, .12);
    --td-info: var(--osen-info);
    --td-info-ink: #1c6aa0;
    --td-info-soft: rgba(103, 186, 241, .16);
    --td-logo-sign: #009df5;
    --td-logo-wordmark: #41b5f7;
    --td-radius-sm: 6px;
    --td-radius-md: 8px;
    --td-radius-lg: 12px;
    --td-shadow-pop: 0 12px 32px rgba(20, 24, 40, .14);
    --td-shadow-ring: 0 0 0 3px rgba(70, 93, 255, .18);
    /* Category hues (types, rate rules, crew, depots): a fixed colour per value, never good or bad.
       Each is a soft fill with an ink text, readable in light and dark. See TdDisplay. */
    --td-cat-blue-soft: #e6f1fb;   --td-cat-blue-ink: #0c447c;
    --td-cat-teal-soft: #e1f5ee;   --td-cat-teal-ink: #085041;
    --td-cat-purple-soft: #eeedfe; --td-cat-purple-ink: #3c3489;
    --td-cat-amber-soft: #faeeda;  --td-cat-amber-ink: #633806;
    --td-cat-olive-soft: #eaf3de;  --td-cat-olive-ink: #27500a;
    --td-cat-indigo-soft: #e3e6fb; --td-cat-indigo-ink: #2a2f86;
    --td-cat-coral-soft: #faece7;  --td-cat-coral-ink: #712b13;
    --td-cat-pink-soft: #fbeaf0;   --td-cat-pink-ink: #72243e;
}

[data-bs-theme="dark"] {
    --td-field: #6b7385;
    --td-surface-2: #2a2c37;
    --td-emphasis: #dee2e6;
    --td-muted: #8391a2;
    --td-primary-soft: rgba(91, 111, 255, .18);
    --td-success-ink: #7fd970;
    --td-success-soft: rgba(106, 199, 90, .16);
    --td-warning-ink: #f9c45c;
    --td-warning-soft: rgba(249, 196, 92, .16);
    --td-danger-ink: #ff8a66;
    --td-danger-soft: rgba(255, 109, 67, .16);
    --td-info-ink: #7cc6f5;
    --td-shadow-pop: 0 12px 32px rgba(0, 0, 0, .40);
    --td-shadow-ring: 0 0 0 3px rgba(91, 111, 255, .28);
    --td-cat-blue-soft: rgba(55, 138, 221, .22);   --td-cat-blue-ink: #a9cdf2;
    --td-cat-teal-soft: rgba(29, 158, 117, .22);   --td-cat-teal-ink: #8fdcc0;
    --td-cat-purple-soft: rgba(127, 119, 221, .24); --td-cat-purple-ink: #c4bff4;
    --td-cat-amber-soft: rgba(186, 117, 23, .26);  --td-cat-amber-ink: #f5c77d;
    --td-cat-olive-soft: rgba(99, 153, 34, .24);   --td-cat-olive-ink: #b5d98a;
    --td-cat-indigo-soft: rgba(88, 98, 220, .26);  --td-cat-indigo-ink: #b7bdf5;
    --td-cat-coral-soft: rgba(216, 90, 48, .24);   --td-cat-coral-ink: #f3b39c;
    --td-cat-pink-soft: rgba(212, 83, 126, .24);   --td-cat-pink-ink: #f1b0c7;
}

.td-num { font-variant-numeric: tabular-nums; }
.td-label { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--td-muted); }
.td-muted { color: var(--td-muted); font-size: .8125rem; }

/* ── Page header ──────────────────────────────────────────────────────── */
/* Top padding matches the theme's page-title-head, so the header clears the topbar. */
.td-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; margin-bottom: .9rem; }
/* Back to the list: a quiet arrow before the title, lined up with the title's first line. */
.td-back { flex: none; align-self: flex-start; margin-right: -.25rem; }
@media (max-width: 767.98px) { .td-header { padding-top: 1rem; } }
.td-header-main { min-width: 0; flex: 1 1 26rem; }
.td-header-title { overflow-wrap: anywhere; font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.01em; color: var(--td-emphasis); margin: 0; }
.td-header-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; }
/* When the actions wrap under the title they stay on the right, so the ••• menu (is-right) opens inside the page. */
.td-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-left: auto; justify-content: flex-end; }
.td-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 500; border-radius: var(--td-radius-sm); padding: .15rem .55rem; background: var(--td-surface-2); color: var(--td-muted); border: 1px solid transparent; }
button.td-tag { cursor: pointer; font-family: inherit; }
button.td-tag:hover:not(:disabled) { border-color: var(--td-border); color: var(--td-emphasis); }
.td-tag.is-warning { background: var(--td-warning-soft); color: var(--td-warning-ink); }
.td-tag.is-danger { background: var(--td-danger-soft); color: var(--td-danger-ink); }
.td-tag.is-primary { background: var(--td-primary-soft); color: var(--td-primary); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.td-btn {
    display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .875rem; font-weight: 500; line-height: 1;
    padding: 0 .9rem; min-height: 2.25rem; border-radius: var(--td-radius-md); cursor: pointer; white-space: nowrap; text-decoration: none;
    background: var(--td-surface); color: var(--td-emphasis); border: 1px solid var(--td-border);
    transition: background-color .12s, border-color .12s, color .12s;
}
.td-btn:hover:not(:disabled) { border-color: var(--td-primary); color: var(--td-primary); }
.td-btn:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-btn:disabled { opacity: .55; cursor: not-allowed; }
.td-btn-primary { background: var(--td-primary); border-color: var(--td-primary); color: var(--td-on-primary); }
.td-btn-primary:hover:not(:disabled) { color: var(--td-on-primary); filter: brightness(1.08); }
.td-btn-primary:disabled { background: var(--td-primary-soft); border-color: var(--td-primary-soft); color: var(--td-primary); opacity: 1; }
.td-btn-success { background: var(--td-success-ink); border-color: var(--td-success-ink); color: var(--td-on-primary); }
.td-btn-success:hover:not(:disabled) { color: var(--td-on-primary); filter: brightness(1.08); }
.td-btn-danger { background: transparent; color: var(--td-danger-ink); border-color: var(--td-danger); }
.td-btn-danger:hover:not(:disabled) { background: var(--td-danger-soft); color: var(--td-danger-ink); border-color: var(--td-danger); }
.td-btn-icon { width: 2.25rem; padding: 0; justify-content: center; }
.td-dirty { width: .45rem; height: .45rem; border-radius: 50%; background: var(--td-warning); display: inline-block; margin-left: .2rem; }

/* ── Chip and popover ─────────────────────────────────────────────────── */
.td-anchor { position: relative; display: inline-flex; max-width: 100%; }
.td-chip {
    display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .8125rem; color: var(--td-emphasis); white-space: nowrap;
    border-radius: 999px; padding: 0 .85rem; min-height: 2rem; border: 1px solid var(--td-border); background: var(--td-surface); cursor: pointer;
    max-width: 100%; min-width: 0;
}
/* A long value (a customer's name) ends in an ellipsis instead of running out of a narrow row. */
.td-chip > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.td-chip:hover:not(:disabled) { border-color: var(--td-primary); }
.td-chip:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-chip .k { color: var(--td-muted); font-size: .75rem; }
.td-chip strong { font-weight: 600; }
.td-chip.is-open { border-color: var(--td-primary); }
.td-chip.is-add { border-style: dashed; color: var(--td-muted); }
.td-chip.is-on { border-color: var(--td-success-ink); color: var(--td-success-ink); background: var(--td-success-soft); }
.td-chip.is-warning { border-color: var(--td-warning); color: var(--td-warning-ink); }
.td-chip.is-danger { border-color: var(--td-danger); }
.td-chip.sm { min-height: 1.75rem; padding: 0 .7rem; }
.td-pop {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 1050; min-width: 15rem;
    background: var(--td-surface); border: 1px solid var(--td-border); border-radius: .6rem; padding: .75rem; box-shadow: var(--td-shadow-pop);
}
.td-pop.is-wide { min-width: 22rem; }
.td-pop.is-right { left: auto; right: 0; }
.td-pop-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--td-muted); margin-bottom: .35rem; }
.td-pop-row { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; font-size: .875rem; border-top: 1px solid var(--td-border); }
.td-pop-row:first-of-type { border-top: 0; }
.td-backdrop { position: fixed; inset: 0; z-index: 1040; }
.td-menu { padding: .35rem; min-width: 13rem; display: flex; flex-direction: column; }
.td-menu a, .td-menu button {
    display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .4rem; background: none; border: 0;
    color: var(--td-emphasis); text-align: left; font: inherit; font-size: .875rem; text-decoration: none; cursor: pointer;
}
.td-menu a:hover, .td-menu button:hover { background: var(--td-surface-2); }
.td-menu .is-danger { color: var(--td-danger-ink); }
.td-menu button:disabled { opacity: .55; cursor: not-allowed; }
.td-menu button > .ti { flex: none; }

/* ── Pill ─────────────────────────────────────────────────────────────── */
.td-pill { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 500; border-radius: var(--td-radius-sm); padding: .1rem .5rem; background: var(--td-surface-2); color: var(--td-muted); white-space: nowrap; }
.td-pill.is-primary { background: var(--td-primary-soft); color: var(--td-primary); }
.td-pill.is-success { background: var(--td-success-soft); color: var(--td-success-ink); }
.td-pill.is-warning { background: var(--td-warning-soft); color: var(--td-warning-ink); }
.td-pill.is-danger { background: var(--td-danger-soft); color: var(--td-danger-ink); }
.td-pill.is-info { background: var(--td-info-soft); color: var(--td-info-ink); }
/* Old-look pages render the same values as Bootstrap badges coloured from the same tokens (TdValue.BadgeCss). */
.badge.td-badge { background: var(--td-surface-2); color: var(--td-muted); font-weight: 500; }
.badge.td-badge.is-primary { background: var(--td-primary-soft); color: var(--td-primary); }
.badge.td-badge.is-success { background: var(--td-success-soft); color: var(--td-success-ink); }
.badge.td-badge.is-warning { background: var(--td-warning-soft); color: var(--td-warning-ink); }
.badge.td-badge.is-danger { background: var(--td-danger-soft); color: var(--td-danger-ink); }
.badge.td-badge.is-info { background: var(--td-info-soft); color: var(--td-info-ink); }
.td-pill.is-blue, .badge.td-badge.is-blue { background: var(--td-cat-blue-soft); color: var(--td-cat-blue-ink); }
.td-pill.is-teal, .badge.td-badge.is-teal { background: var(--td-cat-teal-soft); color: var(--td-cat-teal-ink); }
.td-pill.is-purple, .badge.td-badge.is-purple { background: var(--td-cat-purple-soft); color: var(--td-cat-purple-ink); }
.td-pill.is-amber, .badge.td-badge.is-amber { background: var(--td-cat-amber-soft); color: var(--td-cat-amber-ink); }
.td-pill.is-olive, .badge.td-badge.is-olive { background: var(--td-cat-olive-soft); color: var(--td-cat-olive-ink); }
.td-pill.is-indigo, .badge.td-badge.is-indigo { background: var(--td-cat-indigo-soft); color: var(--td-cat-indigo-ink); }
.td-pill.is-coral, .badge.td-badge.is-coral { background: var(--td-cat-coral-soft); color: var(--td-cat-coral-ink); }
.td-pill.is-pink, .badge.td-badge.is-pink { background: var(--td-cat-pink-soft); color: var(--td-cat-pink-ink); }

/* ── Icon action with hover text (CSS, so it survives Blazor re-rendering) ── */
.td-act {
    --td-act: var(--td-primary);
    position: relative; width: 1.75rem; height: 1.75rem; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--td-border); border-radius: var(--td-radius-sm); background: transparent; color: var(--td-muted);
    font-size: 1rem; line-height: 1; cursor: pointer; transition: color .12s, background-color .12s, border-color .12s;
}
.td-act:hover:not(:disabled), .td-act:focus-visible { color: var(--td-act); border-color: var(--td-act); background: color-mix(in srgb, var(--td-act) 12%, transparent); outline: none; }
.td-act:disabled { opacity: .45; cursor: not-allowed; }
.td-act.is-strong { color: var(--td-act); border-color: var(--td-act); background: color-mix(in srgb, var(--td-act) 12%, transparent); }
.td-act.is-success { --td-act: var(--td-success-ink); }
.td-act.is-warning { --td-act: var(--td-warning-ink); }
.td-act.is-danger { --td-act: var(--td-danger-ink); }
.td-act.is-info { --td-act: var(--td-info-ink); }
.td-act[data-tip]:hover::after, .td-act[data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; right: calc(100% + .4rem); top: 50%; transform: translateY(-50%); z-index: 20;
    white-space: nowrap; padding: .3rem .55rem; border-radius: .35rem; background: var(--td-emphasis); color: var(--td-surface);
    font-size: .75rem; font-weight: 500; line-height: 1.2; pointer-events: none; box-shadow: var(--td-shadow-pop);
}

/* ── Layout: body + sticky side panel ─────────────────────────────────── */
/* It sticks below the app's fixed topbar, not under it, so its top section stays in view. */
.td-body { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.td-main { flex: 999 1 34rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.td-side { flex: 0 1 clamp(24rem, 36%, 40rem); min-width: 0; position: sticky; top: calc(var(--osen-topbar-height, 70px) + 16px); display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 1200px) { .td-side { max-height: calc(100vh - var(--osen-topbar-height, 70px) - 32px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: .25rem; } }
@media (max-width: 1199.98px) { .td-side { position: static; flex-basis: 100%; } }
.td-panel { background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius-lg); }

/* ── Stat tile ────────────────────────────────────────────────────────── */
.td-stat { padding: .75rem 1rem; border-radius: .6rem; background: var(--td-surface-2); height: 100%; }
.td-stat .v { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--td-emphasis); }
.td-stat.is-danger { background: var(--td-danger-soft); }
.td-stat.is-danger .td-label, .td-stat.is-danger .v, .td-stat.is-danger .td-muted { color: var(--td-danger-ink); }
button.td-stat { display: flex; flex-direction: column; gap: .1rem; width: 100%; text-align: left; border: 0; font: inherit; cursor: pointer; }
button.td-stat:hover { box-shadow: inset 0 0 0 1px var(--td-border); }
button.td-stat:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }

/* ── The one figure a page or panel is about ──────────────────────────── */
.td-figure { font-size: 2.125rem; line-height: 2.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--td-emphasis); font-variant-numeric: tabular-nums; }

/* ── Chip: a selected filter ──────────────────────────────────────────── */
.td-chip.is-selected { border-color: var(--td-primary); background: var(--td-primary-soft); color: var(--td-primary); font-weight: 600; }
.td-chip .n { font-variant-numeric: tabular-nums; opacity: .8; }
.td-chips { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.td-chips .td-sep { width: 1px; height: 1.25rem; background: var(--td-border); margin: 0 .25rem; }

/* ── Panel parts: sections divided by rules, never boxes in boxes ─────── */
.td-sec { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.td-sec + .td-sec { border-top: 1px solid var(--td-border); }
.td-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.td-sec-title { font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: var(--td-emphasis); margin: 0; }
.td-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.td-spacer { flex: 1 1 auto; }
.td-strike { text-decoration: line-through; }

/* ── Note: a one-line message on a soft ground ────────────────────────── */
.td-note { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .7rem; border-radius: var(--td-radius-md); font-size: .8125rem; font-weight: 500; background: var(--td-surface-2); color: var(--td-emphasis); }
.td-note > .ti { font-size: 1rem; line-height: 1.25rem; flex: none; }
.td-note.is-warning { background: var(--td-warning-soft); color: var(--td-warning-ink); }
.td-note.is-danger { background: var(--td-danger-soft); color: var(--td-danger-ink); }
.td-note.is-info { background: var(--td-info-soft); color: var(--td-info-ink); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
/* The rule under the tabs is a shadow, so the open tab's underline can sit on it without the bar overflowing (a negative margin made it scroll). */
.td-tabs { display: flex; gap: .25rem; padding: 0 1rem; box-shadow: inset 0 -1px 0 var(--td-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.td-tabs::-webkit-scrollbar { display: none; }
.td-tab {
    display: inline-flex; align-items: center; gap: .4rem; padding: .75rem .6rem; border: 0; border-bottom: 2px solid transparent;
    background: transparent; font: inherit; font-size: .875rem; font-weight: 500; color: var(--td-muted); white-space: nowrap; cursor: pointer;
}
.td-tab:hover { color: var(--td-emphasis); }
.td-tab:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); border-radius: var(--td-radius-sm); }
.td-tab.is-on { color: var(--td-primary); font-weight: 600; border-bottom-color: var(--td-primary); }
.td-tab .n { font-size: .75rem; font-weight: 600; border-radius: 999px; padding: 0 .45rem; background: var(--td-surface-2); color: var(--td-muted); font-variant-numeric: tabular-nums; }
.td-tab.is-on .n { background: var(--td-primary-soft); color: var(--td-primary); }

/* ── Segmented switch (two or three views of the same thing) ──────────── */
.td-seg { max-width: 100%; overflow-x: auto; display: inline-flex; border: 1px solid var(--td-border); border-radius: var(--td-radius-md); overflow: hidden; background: var(--td-surface); }
.td-seg button { flex: none; white-space: nowrap; min-height: 1.875rem; padding: 0 .75rem; border: 0; background: transparent; font: inherit; font-size: .8125rem; font-weight: 500; color: var(--td-muted); cursor: pointer; }
.td-seg button + button { border-left: 1px solid var(--td-border); }
.td-seg button.is-on { background: var(--td-primary-soft); color: var(--td-primary); font-weight: 600; }
.td-seg button:focus-visible { outline: none; box-shadow: inset var(--td-shadow-ring); }

/* Choice: one of a few outcomes where the pick must be unmistakable (Not taken · Maybe · Taken).
   The options sit quietly in a track; the picked one is raised, ticked and in its meaning's colour. */
.td-choice { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .1875rem; border: 1px solid var(--td-border); border-radius: var(--td-radius-md); background: var(--td-surface-2); }
.td-choice button { display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; padding: 0 .875rem; border: 1px solid transparent; border-radius: calc(var(--td-radius-md) - 2px); background: transparent; font: inherit; font-size: .8125rem; font-weight: 500; color: var(--td-muted); cursor: pointer; white-space: nowrap; }
.td-choice button:hover { color: var(--td-emphasis); background: var(--td-surface); }
/* The tick shows on the picked option only. */
.td-choice button > .ti-check, .td-choice button > svg { display: none; }
.td-choice button[aria-checked="true"] > .ti-check, .td-choice button[aria-checked="true"] > svg { display: inline-block; }
/* Picked: a filled ground in the accent (or the option's meaning), framed, bold. */
.td-choice button[aria-checked="true"] { font-weight: 600; color: var(--td-emphasis); background: var(--td-primary-soft); border-color: var(--td-primary); }
.td-choice button.is-warning[aria-checked="true"] { color: var(--td-warning-ink); background: var(--td-warning-soft); border-color: var(--td-warning); }
.td-choice button.is-success[aria-checked="true"] { color: var(--td-success-ink); background: var(--td-success-soft); border-color: var(--td-success); }
.td-choice button.is-danger[aria-checked="true"] { color: var(--td-danger-ink); background: var(--td-danger-soft); border-color: var(--td-danger); }
.td-choice button:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-choice-note { margin-top: .25rem; font-size: .75rem; color: var(--td-muted); }

/* Switch: a setting that is on or off, its label beside it.
   <label class="td-switch"><input type="checkbox" role="switch" /><span>Required</span></label> */
.td-switch { display: inline-flex; align-items: center; gap: .625rem; font-size: .8125rem; color: var(--td-emphasis); cursor: pointer; }
.td-switch input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--td-surface-2); border: 1px solid var(--td-field); cursor: pointer; transition: background-color .15s, border-color .15s; }
.td-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: .875rem; height: .875rem; border-radius: 50%; background: var(--td-muted); transition: transform .15s, background-color .15s; }
.td-switch input:checked { background: var(--td-primary); border-color: var(--td-primary); }
.td-switch input:checked::before { transform: translateX(1rem); background: #fff; }
.td-switch input:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-switch input:disabled, .td-switch input:disabled + span { opacity: .55; cursor: not-allowed; }
.td-switch .hint { display: block; font-size: .75rem; color: var(--td-muted); font-weight: 400; }

/* ── Table: dense, tabular figures, the picked row marked ─────────────── */
.td-table-wrap { overflow-x: auto; }
.td-table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.125rem; color: var(--td-text); }
.td-table th {
    text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--td-border); white-space: nowrap;
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--td-muted);
}
.td-table th button { all: unset; cursor: pointer; }
.td-table th button:hover { color: var(--td-emphasis); }
.td-table th button:focus-visible { box-shadow: var(--td-shadow-ring); border-radius: 3px; }
.td-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--td-border); vertical-align: middle; }
.td-table tbody tr:last-child td { border-bottom: 0; }
.td-table .r { text-align: right; }
.td-table .em { color: var(--td-emphasis); font-weight: 600; }
.td-table .sub { display: block; color: var(--td-muted); }
.td-table tr.is-link { cursor: pointer; }
.td-table tr.is-link:hover td { background: var(--td-surface-2); }
.td-table tr.is-picked td { background: var(--td-primary-soft); }
.td-table tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--td-primary); }
.td-table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .85rem; border-top: 1px solid var(--td-border); font-size: .8125rem; color: var(--td-muted); }
.td-empty { padding: 2rem 1rem; text-align: center; color: var(--td-muted); font-size: .875rem; }

/* ── Progress bar ─────────────────────────────────────────────────────── */
.td-bar { display: block; height: .5rem; border-radius: 999px; background: var(--td-surface-2); overflow: hidden; }
.td-bar.sm { height: .375rem; }
.td-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--td-success); }
.td-bar > span.is-primary { background: var(--td-primary); }
.td-bar > span.is-info { background: var(--td-info); }
.td-bar > span.is-muted { background: var(--td-field); }

/* ── Day timeline: dates left, a rail with a dot per day, items as blocks ── */
.td-sched { display: flex; flex-direction: column; }
.td-sched-row { display: grid; grid-template-columns: 6rem 1.5rem minmax(0, 1fr); }
.td-sched-date { padding-top: .6rem; display: flex; flex-direction: column; gap: .1rem; }
.td-sched-date .wd { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--td-muted); }
.td-sched-date .d { font-size: .9375rem; font-weight: 600; color: var(--td-emphasis); font-variant-numeric: tabular-nums; }
.td-sched-row.is-past .td-sched-date .d { color: var(--td-muted); }
.td-sched-today { align-self: flex-start; font-size: .6875rem; font-weight: 600; border-radius: var(--td-radius-sm); padding: 0 .4rem; background: var(--td-primary); color: var(--td-on-primary); }
.td-sched-flag { font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--td-danger-ink); }
.td-sched-rail { position: relative; display: flex; justify-content: center; }
.td-sched-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--td-border); }
.td-sched-dot { position: relative; margin-top: .85rem; width: .75rem; height: .75rem; border-radius: 50%; box-sizing: border-box; background: var(--td-surface); border: 2px solid var(--td-primary); }
.td-sched-row.is-past .td-sched-dot { background: var(--td-field); border-color: var(--td-field); }
.td-sched-row.is-today .td-sched-dot { background: var(--td-primary); box-shadow: var(--td-shadow-ring); }
.td-sched-row.is-out .td-sched-dot { border-color: var(--td-danger); background: var(--td-surface); }
.td-sched-items { display: flex; flex-direction: column; gap: .5rem; padding: .35rem 0 .9rem; min-width: 0; }
.td-sched-gap { display: grid; grid-template-columns: 6rem 1.5rem minmax(0, 1fr); align-items: center; min-height: 2.25rem; font-size: .75rem; color: var(--td-muted); }
.td-sched-gap .td-sched-rail { align-self: stretch; }
.td-sched-gap .td-sched-rail::before { background: repeating-linear-gradient(to bottom, var(--td-border) 0 4px, transparent 4px 8px); }

/* A selectable item on a timeline or list. */
.td-block {
    display: flex; flex-direction: column; gap: .4rem; width: 100%; text-align: left; font: inherit; color: var(--td-text);
    padding: .65rem .8rem; border-radius: .625rem; border: 1px solid var(--td-border); background: var(--td-surface); cursor: pointer;
}
.td-block:hover { border-color: var(--td-primary); }
.td-block:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-block.is-picked { border-color: var(--td-primary); box-shadow: var(--td-shadow-ring); }
.td-block.is-dashed { border-style: dashed; }
.td-block.is-danger { border-color: var(--td-danger); }
.td-block .t { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--td-emphasis); }
.td-block .k { font-size: .75rem; color: var(--td-muted); font-variant-numeric: tabular-nums; }
.td-block .k strong { font-weight: 600; }
.td-block .g { font-size: .8125rem; font-weight: 600; color: var(--td-emphasis); font-variant-numeric: tabular-nums; }

/* A ticked list (pick several): checkbox, text, why it can't be picked. */
.td-check-row { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem .5rem; margin: 0 -.5rem; border-radius: var(--td-radius-md); cursor: pointer; }
.td-check-row:hover { background: var(--td-surface-2); }
.td-check-row.is-on { background: var(--td-primary-soft); }
.td-check-row.is-off { cursor: not-allowed; }
.td-check-row.is-off:hover { background: transparent; }
.td-check-row .why { font-size: .75rem; line-height: 1rem; color: var(--td-muted); }
.td-check-row .warn { font-size: .75rem; line-height: 1rem; font-weight: 500; color: var(--td-warning-ink); }

/* A list of links in a panel (tasks under an operation). */
.td-list { display: flex; flex-direction: column; }
.td-list > a, .td-list > div { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--td-border); font-size: .8125rem; color: var(--td-emphasis); text-decoration: none; }
.td-list > a:hover { color: var(--td-primary); }
.td-list .k { color: var(--td-muted); font-variant-numeric: tabular-nums; }
.td-list .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search box in a chip row. */
.td-search { display: flex; align-items: center; gap: .5rem; height: 2rem; box-sizing: border-box; padding: 0 .65rem; border: 1px solid var(--td-field); border-radius: var(--td-radius-md); background: var(--td-surface); color: var(--td-muted); }
.td-search:focus-within { border-color: var(--td-primary); box-shadow: var(--td-shadow-ring); }
.td-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: .8125rem; color: var(--td-emphasis); }
.td-search input::placeholder { color: var(--td-muted); opacity: 1; }

/* ══ Form fields on Trip Desk UI pages ════════════════════════════════════
   The same DatePicker, TimePicker, NumberStepper, autocompletes and inputs as everywhere else; this
   look applies only inside .td-page, so pages that haven't moved keep theirs. */
.td-page .form-label { font-size: .8125rem; font-weight: 600; color: var(--td-emphasis); margin-bottom: .35rem; }
.td-page .form-label.required::after { color: var(--td-danger-ink); }
.td-page .form-control, .td-page .form-select {
    min-height: 2.25rem; font-size: .875rem; color: var(--td-emphasis); background-color: var(--td-surface);
    border: 1px solid var(--td-field); border-radius: var(--td-radius-md); box-shadow: none;
}
.td-page textarea.form-control { min-height: 4.5rem; }
.td-page .form-control-sm, .td-page .input-group-sm > .form-control { min-height: 2rem; font-size: .8125rem; }
.td-page .form-control::placeholder { color: var(--td-muted); opacity: 1; }
.td-page .form-control:focus, .td-page .form-select:focus { border-color: var(--td-primary); box-shadow: var(--td-shadow-ring); }
.td-page .form-control:disabled, .td-page .form-select:disabled { background-color: var(--td-surface-2); border-color: var(--td-border); color: var(--td-muted); }
.td-page .form-control.is-invalid, .td-page .form-select.is-invalid { border-color: var(--td-danger); background-image: none; padding-right: .75rem; }
.td-page .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--td-danger-soft); }
.td-page .text-danger { color: var(--td-danger-ink) !important; }
/* Status as text uses the -ink shades on Trip Desk UI pages (the theme's hues are fills). */
.td-page .text-success { color: var(--td-success-ink) !important; }
.td-page .text-warning { color: var(--td-warning-ink) !important; }
.td-page .text-info { color: var(--td-info-ink) !important; }
.td-page .text-danger.small, .td-page .invalid-feedback { font-size: .75rem; font-weight: 500; }
.td-page .text-muted { color: var(--td-muted) !important; }
.td-page .form-check-input { width: 1.125rem; height: 1.125rem; margin-top: .1rem; border: 1px solid var(--td-field); border-radius: 5px; background-color: var(--td-surface); }
.td-page .form-check-input:checked { background-color: var(--td-primary); border-color: var(--td-primary); }
.td-page .form-check-input:focus { box-shadow: var(--td-shadow-ring); border-color: var(--td-primary); }
.td-page .form-check-input:disabled { background-color: var(--td-surface-2); border-color: var(--td-border); opacity: 1; }

/* Pickers: the icon sits inside the field's frame, quiet, instead of a blue block glued on. */
.td-page .input-group > .form-control:not(:last-child) { border-right: 0; }
.td-page .input-group > .input-group-text.btn,
.td-page .input-group > .input-group-text.btn.btn-outline-primary {
    background: var(--td-surface); color: var(--td-primary); border: 1px solid var(--td-field); border-left: 0;
    border-radius: 0 var(--td-radius-md) var(--td-radius-md) 0; padding: 0 .7rem; box-shadow: none;
}
.td-page .input-group > .input-group-text.btn:hover { background: var(--td-surface-2); color: var(--td-primary); }
.td-page .input-group:focus-within { border-radius: var(--td-radius-md); box-shadow: var(--td-shadow-ring); }
.td-page .input-group:focus-within > .form-control, .td-page .input-group:focus-within > .input-group-text, .td-page .input-group:focus-within > .btn { border-color: var(--td-primary); box-shadow: none; }
.td-page .input-group.is-invalid > .form-control, .td-page .input-group.is-invalid > .input-group-text { border-color: var(--td-danger); }
.td-page .input-group.is-invalid:focus-within { box-shadow: 0 0 0 3px var(--td-danger-soft); }
/* NumberStepper: minus, the figure, plus, as one control. */
.td-page .input-group > .btn.btn-outline-primary:not(.input-group-text) {
    background: var(--td-surface); color: var(--td-primary); border-color: var(--td-field); min-width: 2.25rem; box-shadow: none;
}
.td-page .input-group > .btn.btn-outline-primary:not(.input-group-text):hover:not(:disabled) { background: var(--td-surface-2); color: var(--td-primary); }
.td-page .input-group > .btn.btn-outline-primary:disabled { color: var(--td-border); background: var(--td-surface); opacity: 1; }
.td-page .input-group > .btn + .form-control { border-left-color: var(--td-border); font-weight: 600; font-variant-numeric: tabular-nums; }
.td-page .input-group > .btn ~ .form-control:not(:last-child) { border-right: 1px solid var(--td-border); }
/* Autocomplete lists. */
.td-page .dropdown-menu { background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius-md); box-shadow: var(--td-shadow-pop); padding: .25rem; }
.td-page .dropdown-menu .dropdown-item { border-radius: var(--td-radius-sm); padding: .5rem .65rem; font-size: .875rem; color: var(--td-emphasis); }
.td-page .dropdown-menu .dropdown-item:hover, .td-page .dropdown-menu .dropdown-item.active { background: var(--td-surface-2); color: var(--td-emphasis); }
/* FixFieldsBanner and other warnings in a form. */
.td-page .alert-warning { background: var(--td-warning-soft); color: var(--td-warning-ink); border: 0; border-radius: var(--td-radius-md); font-size: .8125rem; font-weight: 500; padding: .6rem .75rem; }

/* The calendar and time popups hang off <body>; pickers inside .td-page tag theirs with .td-fp. */
.flatpickr-calendar.td-fp { background: var(--td-surface); border: 1px solid var(--td-border); border-radius: var(--td-radius-lg); box-shadow: var(--td-shadow-pop); font-family: inherit; }
.flatpickr-calendar.td-fp::before, .flatpickr-calendar.td-fp::after { display: none; }
.flatpickr-calendar.td-fp .flatpickr-months .flatpickr-month, .flatpickr-calendar.td-fp .flatpickr-current-month,
.flatpickr-calendar.td-fp .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-calendar.td-fp .numInputWrapper input { color: var(--td-emphasis); fill: var(--td-emphasis); font-weight: 600; font-size: .875rem; }
.flatpickr-calendar.td-fp .flatpickr-prev-month, .flatpickr-calendar.td-fp .flatpickr-next-month { color: var(--td-muted); fill: var(--td-muted); }
.flatpickr-calendar.td-fp .flatpickr-prev-month:hover svg, .flatpickr-calendar.td-fp .flatpickr-next-month:hover svg { fill: var(--td-primary); }
.flatpickr-calendar.td-fp span.flatpickr-weekday { color: var(--td-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: transparent; }
.flatpickr-calendar.td-fp .flatpickr-day { color: var(--td-emphasis); border-radius: var(--td-radius-md); border-color: transparent; font-variant-numeric: tabular-nums; }
.flatpickr-calendar.td-fp .flatpickr-day:hover, .flatpickr-calendar.td-fp .flatpickr-day:focus { background: var(--td-surface-2); border-color: transparent; }
.flatpickr-calendar.td-fp .flatpickr-day.today { border-color: var(--td-primary); }
.flatpickr-calendar.td-fp .flatpickr-day.prevMonthDay, .flatpickr-calendar.td-fp .flatpickr-day.nextMonthDay { color: var(--td-muted); }
.flatpickr-calendar.td-fp .flatpickr-day.flatpickr-disabled { color: var(--td-border); }
.flatpickr-calendar.td-fp .flatpickr-day.selected, .flatpickr-calendar.td-fp .flatpickr-day.selected:hover { background: var(--td-primary); border-color: var(--td-primary); color: var(--td-on-primary); font-weight: 600; }
.flatpickr-calendar.td-fp .flatpickr-time { border-top: 1px solid var(--td-border); }
.flatpickr-calendar.td-fp .flatpickr-time input, .flatpickr-calendar.td-fp .flatpickr-time .flatpickr-time-separator { color: var(--td-emphasis); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.flatpickr-calendar.td-fp .flatpickr-time input:hover, .flatpickr-calendar.td-fp .flatpickr-time input:focus { background: var(--td-surface-2); }
.flatpickr-calendar.td-fp .numInputWrapper span.arrowUp::after { border-bottom-color: var(--td-muted); }
.flatpickr-calendar.td-fp .numInputWrapper span.arrowDown::after { border-top-color: var(--td-muted); }

/* Tasks opened under an operation (schedule and table): each opens the task's quick look. */
.td-subtasks { display: flex; flex-direction: column; margin: -.15rem 0 .1rem .75rem; padding-left: .75rem; border-left: 2px solid var(--td-border); }
.td-subtask {
    display: grid; grid-template-columns: 4.5rem 5.5rem minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; width: 100%;
    padding: .4rem .5rem; border: 0; border-radius: var(--td-radius-sm); background: transparent; font: inherit; font-size: .8125rem;
    color: var(--td-emphasis); text-align: left; cursor: pointer;
}
.td-subtask:hover { background: var(--td-surface-2); }
.td-subtask:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-subtask .k { color: var(--td-muted); font-variant-numeric: tabular-nums; }
.td-subtask .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-subtask .g { font-variant-numeric: tabular-nums; color: var(--td-text); }
.td-table tr.is-sub td { padding-top: .4rem; padding-bottom: .4rem; background: var(--td-surface-2); font-size: .78rem; }
.td-table tr.is-sub td:first-child { box-shadow: inset 3px 0 0 var(--td-border); }
.td-table tr.is-sub:hover td { background: var(--td-primary-soft); }
.td-expand { width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--td-radius-sm); background: transparent; color: var(--td-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.td-expand:hover { background: var(--td-surface-2); color: var(--td-emphasis); }
.td-expand:focus-visible { outline: none; box-shadow: var(--td-shadow-ring); }
.td-block .more { font-size: .75rem; font-weight: 500; color: var(--td-primary); display: inline-flex; align-items: center; gap: .2rem; }

/* Badges on Trip Desk UI pages read as pills: -ink text on the -soft ground. */
.td-page .badge { font-size: .75rem !important; font-weight: 500; border-radius: var(--td-radius-sm); padding: .15rem .5rem !important; }
.td-page .badge-soft-success { background: var(--td-success-soft) !important; color: var(--td-success-ink) !important; }
.td-page .badge-soft-warning { background: var(--td-warning-soft) !important; color: var(--td-warning-ink) !important; }
.td-page .badge-soft-danger { background: var(--td-danger-soft) !important; color: var(--td-danger-ink) !important; }
.td-page .badge-soft-info { background: var(--td-info-soft) !important; color: var(--td-info-ink) !important; }
.td-page .badge-soft-primary { background: var(--td-primary-soft) !important; color: var(--td-primary) !important; }
.td-page .badge-soft-secondary { background: var(--td-surface-2) !important; color: var(--td-muted) !important; }

/* ══ Narrow screens ═══════════════════════════════════════════════════════
   Desktop is as above. Tablet: popovers keep their place but never get wider than the screen.
   Phone (under 576px): a popover opens as a sheet across the top of the screen, under the topbar,
   so a chip at the right of a row can't push it off the edge; controls get a 32-40px touch height;
   fields use 16px text so iOS doesn't zoom in on them. */
@media (max-width: 991.98px) {
    .td-pop { max-width: calc(100vw - 2rem); }
    .td-pop.is-wide { min-width: min(22rem, calc(100vw - 2rem)); }
}
@media (max-width: 575.98px) {
    .td-pop, .td-pop.is-wide, .td-pop.is-right {
        position: fixed; top: calc(var(--osen-topbar-height, 70px) + .5rem); bottom: auto; left: .75rem; right: .75rem;
        width: auto; min-width: 0; max-width: none;
        max-height: calc(100vh - var(--osen-topbar-height, 70px) - 1.5rem);
        max-height: calc(100dvh - var(--osen-topbar-height, 70px) - 1.5rem);
        overflow-y: auto; overscroll-behavior: contain;
    }
    /* Autocomplete lists in a sheet flow under their field (the sheet scrolls), instead of hanging out of it. */
    .td-pop .dropdown-menu { position: static !important; }
    .td-menu a, .td-menu button { padding-top: .65rem; padding-bottom: .65rem; }

    .td-btn { min-height: 2.5rem; }
    .td-btn-icon { width: 2.5rem; }
    .td-chip { min-height: 2.25rem; }
    .td-chip.sm { min-height: 2rem; }
    button.td-tag { min-height: 2rem; }
    .td-seg button { min-height: 2.25rem; }
    .td-choice button { min-height: 2.25rem; }
    .td-tab { padding-top: .85rem; padding-bottom: .85rem; }
    .td-act, .td-expand { width: 2rem; height: 2rem; }
    .td-search { height: 2.5rem; }
    .td-search input { font-size: 1rem; }
    .td-page .form-control, .td-page .form-select, .td-page .form-control-sm, .td-page .input-group-sm > .form-control { font-size: 1rem; }

    .td-header-actions { width: 100%; }
    .td-sec-head { flex-wrap: wrap; }
    .td-sec { padding: .9rem .85rem; }

    /* Timeline: a narrower date column leaves the blocks room. */
    .td-sched-row, .td-sched-gap { grid-template-columns: 4.5rem 1.25rem minmax(0, 1fr); }
    /* Tasks under an operation: date, number and amount on the first line, the title and status under them. */
    .td-subtask { grid-template-columns: 4.5rem minmax(0, 1fr) auto; row-gap: .15rem; }
    .td-subtask > .t { grid-column: 1 / 3; grid-row: 2; }
}