/* ==========================================================================
   Transport Management (standalone) — the whole stylesheet.

   WHY ONE PLAIN FILE AND NOT A BUILD
   This app has no node_modules and no compiled asset bundle. Adding Vite +
   Tailwind here would buy nothing this file does not already do and would cost
   a build step that must run on a server where `npm` has to be invoked as www,
   plus a manifest that 500s the whole app the moment it is stale. So: one hand
   written stylesheet, served straight from public/ (a symlink to THIS file, so
   resources/ stays the single source and the two can never drift), linked with
   asset() and cache-busted on filemtime. Zero inline styles anywhere.

   WHY IT LOOKS LIKE THE ERP
   Because it is the same product. The tokens below are copied value-for-value
   from /www/wwwroot/collegenew.simption.com/resources/css/app.css:16-170 —
   "Soft Modern": violet #7C3AED brand on a #F7F6FB lilac-grey canvas, white
   #FFFFFF surfaces, 16px radii, and the same dark remap. The list grammar
   (.ui-card > .enq-actionbar + .enq-filters + .enq-table) and the component
   classes (.enq-btn, .enq-status, .enq-empty, .enq-pagination) reproduce that
   codebase's own class names on purpose: a developer who has worked on either
   side reads the other without translating, and the two screens sit next to
   each other in a browser without looking like two products.

   TYPEFACE: 'Plus Jakarta Sans' leads the stack because that is the Soft Modern
   mockup's face, but NO WEBFONT IS DOWNLOADED — same decision the ERP took on
   2026-08-14 (app.css:85-87), and for the same reason: a blocking font request
   to a third party on every page of an internal tool is not worth the glyphs.
   Where the face is installed it is used; everywhere else the system stack is,
   exactly as in the ERP.

   ORDER: tokens → reset → shell → nav → list grammar → forms → dashboard →
   responsive → print. Add to the section you are in; do not start a new file.
   ========================================================================== */

/* ══════════════════════════════════════════════════════ 1. Design tokens ══ */

:root {
    --color-brand-50:  #F3EEFF;
    --color-brand-100: #E7DEFF;
    --color-brand-500: #7C3AED;
    --color-brand-600: #6D28D9;

    --color-success-50:  #ECFDF5;
    --color-success-500: #059669;
    --color-success-600: #047857;
    --color-warning-50:  #FFFBEB;
    --color-warning-500: #B45309;
    --color-warning-600: #92400E;
    --color-danger-50:  #FEF2F2;
    --color-danger-500: #DC2626;
    --color-danger-600: #B91C1C;

    --color-brand-500-rgb:   124 58 237;
    --color-success-500-rgb: 5 150 105;
    --color-warning-500-rgb: 180 83 9;
    --color-danger-500-rgb:  220 38 38;

    --brand-grad-to: color-mix(in oklab, var(--color-brand-600) 74%, #2F3BB5);
    --brand-grad: linear-gradient(135deg, var(--color-brand-500) 0%, var(--brand-grad-to) 100%);
    --on-brand: #fff;

    --surface:        #FFFFFF;
    --surface-subtle: #F7F6FB;
    --border:         #ECEAF3;
    --border-strong:  #DDD9EA;
    --text:        #1B1830;
    --text-muted:  #6E6A85;
    --text-subtle: #736E8C;

    --shadow-sm: 0 1px 3px rgba(27,24,48,.06);
    --shadow-md: 0 8px 24px rgb(var(--color-brand-500-rgb) / .12);
    --shadow-lg: 0 18px 40px -12px rgba(27,24,48,.18);

    --radius:      16px;
    --radius-sm:   12px;
    --radius-pill: 999px;

    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --sidebar-w: 264px;
    --header-h:  64px;

    --bg-app: #F7F6FB;

    color-scheme: light;
}

/* Dark: same geometry, brand lifted for contrast on a violet-tinted near-black —
   a value-for-value port of the ERP's own `.dark` block (app.css:117-170).
   Token remap only; not one component rule below knows which theme it is in.

   DRIVEN BY THE OS PREFERENCE ALONE. The ERP toggles a `.dark` class from a
   per-user setting stored in its own session; this app has no settings screen,
   no user row and nowhere to keep that choice, so inventing a toggle here would
   mean inventing a place to persist it. `.light` on <html> is honoured as an
   escape hatch for a future opt-out, and every token above is a COMPLETE
   palette — nothing has its only definition inside this block. */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        color-scheme: dark;

        --color-brand-50:  #241C45;
        --color-brand-100: #2E2359;
        --color-brand-500: #8B5CF6;
        --color-brand-600: #A78BFA;
        --color-brand-500-rgb: 139 92 246;

        --color-success-50:  #0E2A22;
        --color-success-500: #34D399;
        --color-success-600: #6EE7B7;
        --color-success-500-rgb: 52 211 153;
        --color-warning-50:  #2E2210;
        --color-warning-500: #FBBF24;
        --color-warning-600: #FCD34D;
        --color-warning-500-rgb: 251 191 36;
        --color-danger-50:  #33161A;
        --color-danger-500: #F87171;
        --color-danger-600: #FCA5A5;
        --color-danger-500-rgb: 248 113 113;

        --surface:        #171526;
        --surface-subtle: #100E1B;
        --border:         #292640;
        --border-strong:  #363150;
        --text:        #EDEBF7;
        --text-muted:  #A29DBC;
        --text-subtle: #837DA0;

        --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
        --shadow-md: 0 10px 26px -12px rgba(0,0,0,.65);
        --shadow-lg: 0 20px 44px -14px rgba(0,0,0,.72);

        --bg-app: #0B0913;
    }
}

/* ══════════════════════════════════════════════════════════════ 2. Reset ══ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg-app);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }

code, kbd { font-family: var(--font-mono); font-size: .92em; }

/* Keyboard focus must be visible on every interactive thing, including the ones
   a browser does not outline by default once we restyle them. */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: 6px;
}

.tm-visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Every icon in the product is an inline <svg> from resources/views/components/
   icon.blade.php: no webfont, no sprite, currentColor so it recolours with the
   theme for free. flex:none because an icon in a flex row must never be the
   thing that shrinks when the label next to it is long. */
.tm-icon { flex: none; display: inline-block; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════ 3. Shell ══ */

.tm-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--header-h) minmax(0, 1fr);
    grid-template-areas: 'brand header' 'nav main';
    min-height: 100vh;
}

/* ---------- Header ---------- */
.tm-brandbar {
    grid-area: brand;
    display: flex; align-items: center; gap: 11px;
    padding: 0 18px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.tm-brandbar__mark {
    width: 34px; height: 34px; flex: none;
    border-radius: 10px;
    background: var(--brand-grad);
    color: var(--on-brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
.tm-brandbar__text { min-width: 0; }
.tm-brandbar__name {
    display: block; font-size: 14px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-brandbar__sub {
    display: block; font-size: 11px; color: var(--text-subtle);
    letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}

.tm-header {
    grid-area: header;
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.tm-header__college { min-width: 0; margin-right: auto; }
.tm-header__college h1 {
    font-size: 16px; font-weight: 700; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-header__meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--text-subtle);
}
.tm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 8px; border-radius: var(--radius-pill);
    background: var(--color-brand-50); color: var(--color-brand-600);
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    border: 1px solid rgb(var(--color-brand-500-rgb) / .22);
}
.tm-chip--muted {
    background: var(--surface-subtle); color: var(--text-subtle);
    border-color: var(--border);
}

.tm-user {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    min-width: 0;
}
.tm-user__avatar {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    background: var(--brand-grad); color: var(--on-brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800;
}
.tm-user__text { min-width: 0; line-height: 1.25; }
.tm-user__name {
    display: block; font-size: 12.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.tm-user__role { display: block; font-size: 11px; color: var(--text-subtle); }

.tm-backlink {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 7px 13px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-size: 12.5px; font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.tm-backlink:hover {
    text-decoration: none;
    border-color: var(--color-brand-500); color: var(--color-brand-600);
}

/* The hamburger only exists below the sidebar breakpoint. */
.tm-navtoggle {
    display: none; flex: none;
    width: 36px; height: 36px; padding: 0;
    align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--text); cursor: pointer;
}

/* ---------- Sidebar ---------- */
.tm-sidebar {
    grid-area: nav;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 14px 12px 22px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: var(--header-h); align-self: start;
    max-height: calc(100vh - var(--header-h));
}
.tm-nav__group { padding: 0; margin: 0 0 6px; list-style: none; }
.tm-nav__heading {
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-subtle); padding: 12px 12px 6px; margin: 0;
}
.tm-nav__item { margin: 1px 0; }
.tm-nav__link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    color: var(--text-muted); font-size: 13.5px; font-weight: 600;
    line-height: 1.3;
}
.tm-nav__link:hover { background: var(--surface-subtle); color: var(--text); text-decoration: none; }
.tm-nav__link--active,
.tm-nav__link--active:hover {
    background: var(--color-brand-50); color: var(--color-brand-600);
}
.tm-nav__link--pending {
    color: var(--text-subtle); cursor: default; opacity: .72;
}
.tm-nav__link--pending:hover { background: transparent; color: var(--text-subtle); }
.tm-nav__icon { width: 16px; height: 16px; flex: none; }
.tm-nav__soon {
    margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-subtle);
    border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 7px;
}
.tm-nav__empty {
    margin: 10px 12px; font-size: 12.5px; color: var(--text-subtle); line-height: 1.5;
}
.tm-sidebar__foot {
    margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-subtle); line-height: 1.5;
}
.tm-sidebar__foot code { font-size: 10.5px; word-break: break-all; }

/* ---------- Main ---------- */
.tm-main {
    grid-area: main;
    min-width: 0;
    padding: 20px 24px 48px;
}
.tm-page__head { margin-bottom: 16px; }
.tm-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--text-subtle); margin-bottom: 6px;
    padding: 0; list-style: none;
}
.tm-crumb li { display: inline-flex; align-items: center; gap: 6px; }
.tm-crumb li + li::before { content: '/'; color: var(--border-strong); }
.tm-page__title { font-size: 21px; letter-spacing: -.02em; }
.tm-page__sub { margin: 4px 0 0; color: var(--text-subtle); font-size: 13px; max-width: 76ch; }

/* ═══════════════════════════════════════════════════ 4. The list grammar ══ */
/* .ui-card wraps the run so one border + one shadow + overflow:hidden give the
   corners for free — the same stitching list-card.css does in the ERP.        */

.ui-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

/* Opt-in gutter. A card whose whole body is a table or a filter strip wants
   none — those bring their own padding and doubling it makes a list look like
   it is floating inside a second card. So <x-card> does NOT pad its body and a
   form screen asks for this class. */
.ui-card__body { padding: 16px 20px 20px; }
.ui-card__body > :first-child { margin-top: 0; }
.ui-card__body > :last-child { margin-bottom: 0; }
.ui-card__body p { margin: 0 0 10px; }

/* ---------- Card head (actionbar) ---------- */
.enq-actionbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--brand-grad);
    color: var(--on-brand);
}
.enq-actionbar__title {
    margin-right: auto; min-width: 0;
    font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--on-brand);
}
.enq-actionbar__hint {
    display: block; font-size: 12px; font-weight: 400; line-height: 1.35;
    color: color-mix(in srgb, var(--on-brand) 80%, transparent);
}
/* A brand-gradient button on a brand-gradient bar is invisible: the primary
   flips to a solid white plate and the ghost to a translucent outline, exactly
   as list-card.css does on the ERP side. */
.enq-actionbar .enq-btn--primary {
    background: #fff; color: var(--color-brand-600); border-color: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}
.enq-actionbar .enq-btn--primary:hover { background: rgb(255 255 255 / 90%); box-shadow: 0 1px 2px rgb(0 0 0 / 18%); }
.enq-actionbar .enq-btn--ghost {
    background: color-mix(in srgb, var(--on-brand) 14%, transparent);
    color: var(--on-brand);
    border-color: color-mix(in srgb, var(--on-brand) 38%, transparent);
    box-shadow: none;
}
.enq-actionbar .enq-btn--ghost:hover {
    background: color-mix(in srgb, var(--on-brand) 24%, transparent);
    border-color: color-mix(in srgb, var(--on-brand) 55%, transparent);
    color: var(--on-brand);
}

/* ---------- Filter strip ---------- */
.enq-filters {
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.enq-filters__row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.enq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 180px; }
.enq-field--narrow { flex: 0 1 140px; }
.enq-field--grow { flex: 2 1 260px; }
.enq-field > span {
    font-size: 11.5px; font-weight: 700; color: var(--text-muted);
    letter-spacing: .02em;
}
.enq-field > span em { color: var(--color-danger-500); font-style: normal; }
.enq-field--full { flex: 1 1 100%; }
/* The Filter/Reset pair at the end of a filter row: it must not stretch, and it
   must sit on the control baseline rather than the label baseline, which is why
   it ships an empty <span> where the others carry a label. */
.enq-field--actions { flex: 0 0 auto; }

/* VALIDATION SHOWS AT THE FIELD, not only in the corner. The ERP settled this
   on 2026-08-21: a rejected save rings the field AND confirms once at the
   bottom — both, never either. <x-field> renders the message; <x-toasts>
   renders the one summary toast. */
.enq-field__hint  { font-size: 11.5px; color: var(--text-subtle); line-height: 1.45; }
.enq-field__error { font-size: 11.5px; font-weight: 600; color: var(--color-danger-600); line-height: 1.45; }
.enq-field--invalid > span { color: var(--color-danger-600); }
.enq-field--invalid .enq-input,
.enq-field--invalid select,
.enq-field--invalid input,
.enq-field--invalid textarea {
    border-color: var(--color-danger-500);
    background: color-mix(in srgb, var(--color-danger-500) 4%, var(--surface));
}
.enq-field--invalid .enq-input:focus,
.enq-field--invalid select:focus,
.enq-field--invalid input:focus,
.enq-field--invalid textarea:focus {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 3px rgb(var(--color-danger-500-rgb) / .18);
}

.enq-input,
.enq-filters select,
.enq-filters input,
.enq-filters textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit; font-size: 13px; line-height: 1.4;
}
.enq-input:focus,
.enq-filters select:focus,
.enq-filters input:focus,
.enq-filters textarea:focus {
    outline: none;
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 3px rgb(var(--color-brand-500-rgb) / .18);
}
/* A native select paints its own arrow; reserve the gutter so a long option
   never runs under it. (The ERP learned this one the hard way — see its
   "Select Chevron Gutter" note.) */
.enq-filters select { padding-right: 30px; }

/* ---------- Table ---------- */
.enq-table-wrap { overflow-x: auto; }
.enq-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.enq-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: color-mix(in srgb, var(--color-brand-500) 10%, var(--surface));
    color: var(--text);
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    padding: 11px 14px;
    border: 0; border-bottom: 1px solid var(--border);
    text-align: left; white-space: nowrap;
}
.enq-table thead th:first-child { padding-left: 18px; }
.enq-table thead th:last-child  { padding-right: 18px; }

.enq-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
    background: var(--surface);
    transition: background .12s ease;
}
.enq-table tbody td:first-child { padding-left: 18px; }
.enq-table tbody td:last-child  { padding-right: 18px; }
.enq-table tbody tr:hover td { background: color-mix(in srgb, var(--color-brand-500) 5%, var(--surface)); }
.enq-table tbody tr:last-child td { border-bottom: 0; }
.enq-table tbody td.is-numeric,
.enq-table thead th.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.enq-stack { display: flex; flex-direction: column; gap: 1px; }
.enq-stack small { color: var(--text-muted); font-size: 11px; }
.enq-muted { color: var(--text-subtle); }
.enq-mono  { font-family: var(--font-mono); font-size: 12px; }

/* ACTIONS LEAD EVERY ROW, STATUS SITS RIGHT BEHIND — the app-wide convention
   this product settled on. Left-aligned because the column is first: a
   right-aligned first column would leave the buttons floating away from the
   caption above them. */
.enq-table th.enq-table__actions,
.enq-table td.enq-table__actions {
    width: 1%; min-width: 132px; white-space: nowrap; text-align: left;
}
.enq-row-actions { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Buttons ---------- */
.enq-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px;
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease, background .12s ease;
}
.enq-btn:hover { text-decoration: none; transform: translateY(-1px); }
.enq-btn:disabled, .enq-btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; transform: none; }
.enq-btn--sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

.enq-btn--primary {
    background: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-600) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgb(var(--color-brand-500-rgb) / .28);
}
.enq-btn--primary:hover { box-shadow: 0 6px 16px rgb(var(--color-brand-500-rgb) / .42); color: #fff; }

.enq-btn--ghost {
    background: var(--surface); color: var(--text);
    border-color: var(--border-strong); box-shadow: var(--shadow-sm);
}
.enq-btn--ghost:hover { color: var(--color-brand-600); border-color: var(--color-brand-500); }

.enq-btn--danger {
    background: rgb(var(--color-danger-500-rgb) / .10);
    color: color-mix(in srgb, var(--color-danger-500) 65%, var(--text));
    border-color: rgb(var(--color-danger-500-rgb) / .30);
}
.enq-btn--danger:hover { background: rgb(var(--color-danger-500-rgb) / .18); }

.enq-btn--success {
    background: rgb(var(--color-success-500-rgb) / .12);
    color: color-mix(in srgb, var(--color-success-500) 62%, var(--text));
    border-color: rgb(var(--color-success-500-rgb) / .32);
}
.enq-btn--success:hover { background: rgb(var(--color-success-500-rgb) / .20); }

.enq-btn--warn {
    background: rgb(var(--color-warning-500-rgb) / .14);
    color: color-mix(in srgb, var(--color-warning-500) 62%, var(--text));
    border-color: rgb(var(--color-warning-500-rgb) / .35);
}
.enq-btn--warn:hover { background: rgb(var(--color-warning-500-rgb) / .22); }

/* ---------- Status pill ---------- */
.enq-status {
    display: inline-block; padding: 4px 11px;
    font-size: 11px; font-weight: 700; line-height: 1.5;
    text-transform: uppercase; letter-spacing: .05em;
    border-radius: var(--radius-pill); border: 1px solid transparent;
    white-space: nowrap;
}
.enq-status--neutral { background: var(--surface-subtle);                    color: var(--text-muted);        border-color: var(--border-strong); }
.enq-status--brand   { background: rgb(var(--color-brand-500-rgb) / .10);    color: var(--color-brand-600);   border-color: rgb(var(--color-brand-500-rgb) / .30); }
.enq-status--success { background: var(--color-success-50);                  color: var(--color-success-600); border-color: rgb(var(--color-success-500-rgb) / .35); }
.enq-status--warn    { background: var(--color-warning-50);                  color: var(--color-warning-600); border-color: rgb(var(--color-warning-500-rgb) / .35); }
.enq-status--danger  { background: var(--color-danger-50);                   color: var(--color-danger-600);  border-color: rgb(var(--color-danger-500-rgb) / .35); }

/* ---------- Empty state ---------- */
.enq-empty {
    padding: 44px 20px; text-align: center; color: var(--text-muted);
}
.enq-empty__icon {
    width: 44px; height: 44px; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--surface-subtle);
    border: 1px solid var(--border); color: var(--text-subtle);
}
.enq-empty__title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.enq-empty__hint {
    max-width: 52ch; margin: 6px auto 0;
    font-size: 12.5px; line-height: 1.6; color: var(--text-subtle);
}
.enq-empty__hint code {
    padding: 1px 5px; border-radius: 4px;
    background: var(--surface-subtle); color: var(--text); word-break: break-all;
}
.enq-empty__action { margin-top: 16px; }

/* ---------- Pagination ---------- */
.enq-pagination {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 11px 18px;
    background: var(--surface-subtle);
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted);
}
.enq-pagination__count { margin-right: auto; font-variant-numeric: tabular-nums; }
.enq-pagination__count strong { color: var(--text); font-weight: 700; }
.enq-pagination__pages { display: inline-flex; align-items: center; gap: 6px; }
.enq-pagination__link {
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 32px; height: 30px; padding: 0 10px;
    border: 1px solid var(--border-strong); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font-size: 12.5px; font-weight: 600; justify-content: center;
}
.enq-pagination__link:hover { text-decoration: none; border-color: var(--color-brand-500); color: var(--color-brand-600); }
.enq-pagination__link[aria-current='page'] {
    background: var(--color-brand-500); border-color: var(--color-brand-500); color: #fff;
}
.enq-pagination__link--off {
    opacity: .45; pointer-events: none;
}
.enq-pagination__gap { padding: 0 2px; color: var(--text-subtle); }
.enq-pagination__size { display: inline-flex; align-items: center; gap: 6px; }
.enq-pagination__size select {
    padding: 4px 26px 4px 8px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font-family: inherit; font-size: 12.5px;
}

/* ---------- Forms ---------- */
/* A form screen in this app is a run of <x-card>s, each holding rows of
   <x-field>. The row is the SAME flex wrap the filter strip uses, and the three
   widths mean the same thing in both — deliberately. The ERP's equivalent
   (.enq-grid) is an auto-fit grid, and a row its author wrote as "3 columns"
   silently became five on a wide monitor; that trap is documented in the ERP's
   own notes and is not being reproduced here. A flex wrap cannot do it: a field
   is the width it asks for or it wraps. */
.enq-form__row {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px;
    margin-bottom: 14px;
}
.enq-form__row:last-child { margin-bottom: 0; }

/* Controls in a form carry .enq-input explicitly, because the shared skin above
   is keyed on that class outside .enq-filters. Two things the skin alone does
   not give them: */
select.enq-input   { padding-right: 30px; }              /* the chevron gutter — a
                                                            `padding` shorthand on
                                                            a select runs the text
                                                            under the native arrow */
textarea.enq-input { min-height: 68px; resize: vertical; }

.enq-form__actions {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* A read-only summary of facts this screen did not author — the driver's name,
   designation and department, which arrive as a StaffDto from the port and are
   displayed, never stored. */
.enq-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.enq-facts > div { min-width: 0; }
.enq-facts dt { font-size: 11.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.enq-facts dd { margin: 2px 0 0; font-size: 13.5px; color: var(--text); }

/* ---------- Row helpers ---------- */
/* A POST button standing in a row of links. Anything that MUTATES is a form
   with a CSRF token, never an <a> — a GET that changes data is a row flipped by
   a link prefetcher. display:contents keeps the wrapper out of the layout so
   the button sits in .enq-row-actions' flex flow exactly as an anchor does. */
.enq-inline-form { display: contents; }

/* The compliance chips: five per vehicle row (RC, insurance, PUC, fitness,
   permit), two per driver (licence, medical). */
.enq-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ---------- The note ---------- */
/* An explanatory line under a table or inside a form. It exists because a good
   part of what these screens have to say is what they CANNOT do — no document
   store, no map, no tracking — and a product that leaves that to be inferred is
   the one that gets believed at the wrong moment. Kept a normal block, not a
   flex row: a sentence with a <strong> in the middle of it becomes three flex
   items and breaks in the wrong places. */
.enq-note {
    padding: 10px 12px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 12px; line-height: 1.6;
}
.enq-note strong { color: var(--text); font-weight: 700; }
.enq-note a { color: var(--color-brand-600); font-weight: 600; }
.enq-note .tm-icon { margin-right: 6px; color: var(--text-subtle); }
/* Beats `.ui-card__body p` on class count, which is why it is written long. */
.ui-card__body > .enq-note { margin: 12px 0 0; }
.ui-card__body > .enq-note:first-child { margin-top: 0; }
/* In a list card's footer slot it is a strip under the table, not a floating
   box: square, edge to edge, sharing the card's own border. */
.ui-card > .enq-note {
    margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0;
    padding: 10px 20px;
}
.ui-card > .enq-note + .enq-note { border-top: 0; padding-top: 0; }

/* ═══════════════════════════════════════════════════════════ 5. Feedback ══ */

/* One toast, bottom-centre, dismissible, auto-fading. Every save in this app
   confirms in exactly one place so a user never has to hunt for the outcome. */
.tm-toasts {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 80; display: flex; flex-direction: column; gap: 8px;
    width: min(560px, calc(100vw - 32px));
}
.tm-toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px; border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-lg);
    font-size: 13px; line-height: 1.5;
    animation: tm-toast-in .18s ease-out;
}
.tm-toast__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--text-subtle); }
.tm-toast__body { min-width: 0; flex: 1; }
.tm-toast__close {
    flex: none; border: 0; background: transparent; cursor: pointer;
    color: var(--text-subtle); font-size: 16px; line-height: 1; padding: 2px 4px;
}
.tm-toast--success { border-color: rgb(var(--color-success-500-rgb) / .40); }
.tm-toast--success .tm-toast__dot { background: var(--color-success-500); }
.tm-toast--error   { border-color: rgb(var(--color-danger-500-rgb) / .45); }
.tm-toast--error .tm-toast__dot   { background: var(--color-danger-500); }
.tm-toast--warn    { border-color: rgb(var(--color-warning-500-rgb) / .45); }
.tm-toast--warn .tm-toast__dot    { background: var(--color-warning-500); }
.tm-toast--info .tm-toast__dot    { background: var(--color-brand-500); }
.tm-toast.is-leaving { opacity: 0; transition: opacity .3s ease; }

@keyframes tm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .tm-toast { animation: none; }
    .enq-btn:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════ 6. Control room ══ */

.cr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.cr-tile {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px 15px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
}
/* The rail is the whole visual grammar of the board: coloured only when the
   tile is RAISED. A green rail on every clear tile turns the page into
   decoration; a grey one keeps the eye on the two that are red. */
.cr-tile::before {
    content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--border-strong);
}
.cr-tile__value {
    font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.cr-tile__label { font-size: 13px; font-weight: 600; color: var(--text); }
.cr-tile__meta  { font-size: 11.5px; color: var(--text-subtle); line-height: 1.45; }

.cr-tile--clear .cr-tile__value { color: var(--text-subtle); }
.cr-tile--raised.cr-tile--alert::before { background: var(--color-danger-500); }
.cr-tile--raised.cr-tile--alert .cr-tile__value { color: var(--color-danger-600); }
.cr-tile--raised.cr-tile--warn::before  { background: var(--color-warning-500); }
.cr-tile--raised.cr-tile--warn .cr-tile__value  { color: var(--color-warning-600); }
.cr-tile--raised.cr-tile--ok::before    { background: var(--color-success-500); }
.cr-tile--raised.cr-tile--ok .cr-tile__value    { color: var(--color-success-600); }
.cr-tile--raised.cr-tile--neutral::before { background: var(--color-brand-500); }
.cr-tile--raised.cr-tile--neutral .cr-tile__value { color: var(--color-brand-600); }

/* Not granted / not provisioned are STATES, never a zero. */
.cr-tile--muted { background: var(--surface-subtle); box-shadow: none; }
.cr-tile--muted .cr-tile__value {
    font-size: 14px; font-weight: 700; color: var(--text-subtle); letter-spacing: 0;
    padding-top: 7px;
}

.cr-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 14px; font-size: 12.5px; color: var(--text-subtle);
}
.cr-strip__stamp { display: inline-flex; align-items: center; gap: 7px; }
.cr-live {
    width: 8px; height: 8px; border-radius: 50%; background: var(--color-success-500);
    box-shadow: 0 0 0 0 rgb(var(--color-success-500-rgb) / .55);
    animation: cr-pulse 2.4s ease-out infinite;
}
.cr-live.is-paused { background: var(--text-subtle); animation: none; }
.cr-live.is-stale  { background: var(--color-warning-500); animation: none; }
@keyframes cr-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(var(--color-success-500-rgb) / .5); }
    70%  { box-shadow: 0 0 0 7px rgb(var(--color-success-500-rgb) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--color-success-500-rgb) / 0); }
}
@media (prefers-reduced-motion: reduce) { .cr-live { animation: none; } }

.cr-columns {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px;
}

.cr-note {
    margin: 0; padding: 13px 16px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-subtle); color: var(--text-subtle);
    font-size: 12.5px; line-height: 1.6;
}
.cr-note strong { color: var(--text-muted); }
.cr-note + .cr-note { margin-top: 10px; }

/* ════════════════════════════════════════════ 6b. Assignments (ridership) ══ */
/* The one section that spends money, so its screens say more than a list does:
   who the rider is, how full each LEG is before a save, and what the ERP is
   actually billing. Everything here is a variation on the shared grammar above
   — no new colours, no new radii, no second card. */

/* A select outside .enq-filters still paints its own arrow, so it still needs
   the gutter reserved or a long stop name runs under the chevron. The ERP
   settled this one the hard way; the fix travels with the .enq-input skin here
   rather than with the filter strip. */
select.enq-input { padding-right: 30px; }
textarea.enq-input { resize: vertical; min-height: 62px; }

/* A note under a card's own content — the caveat a table cannot carry in a cell. */
.tm-cardnote {
    margin: 0;
    padding: 10px 20px 13px;
    border-top: 1px solid var(--border);
    font-size: 11.5px; line-height: 1.5; color: var(--text-subtle);
}

/* ---------- The chosen rider ---------- */
.tm-rider {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.tm-rider__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: var(--radius-pill);
    background: var(--brand-grad); color: var(--on-brand);
}
.tm-rider__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.tm-rider__name { font-size: 14px; font-weight: 700; color: var(--text); }
.tm-rider__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-muted); }

/* ---------- The type-ahead ---------- */
.tm-finder__list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tm-finder__row {
    display: flex; flex-direction: column; gap: 3px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none; color: var(--text);
    transition: border-color .12s ease, background .12s ease;
}
.tm-finder__row:hover,
.tm-finder__row:focus-visible {
    border-color: var(--color-brand-500);
    background: color-mix(in srgb, var(--color-brand-500) 5%, var(--surface));
}
.tm-finder__name { font-size: 13.5px; font-weight: 600; }
.tm-finder__meta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11.5px; color: var(--text-muted); }
.tm-finder__note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-subtle); }
.tm-finder__note--danger { color: var(--color-danger-600); font-weight: 600; }

/* ---------- The seat meter ----------
   Per LEG, never per assignment row: a pickup-only rider occupies one run. The
   bar is driven by data-fill in 5% steps because no page in this app may carry
   a style attribute (a test asserts it), and a width has to come from
   somewhere. Twenty-one rules is the honest price of that. */
.tm-seats { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tm-seats__head {
    margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--text-muted);
}
.tm-seat {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--color-brand-500);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.tm-seat--full { border-left-color: var(--color-danger-500); background: var(--color-danger-50); }
.tm-seat__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tm-seat__leg { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.tm-seat__leg strong { font-size: 13px; }
.tm-seat__leg small,
.tm-seat__count small { display: block; font-size: 11px; color: var(--text-subtle); }
.tm-seat__count { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.tm-seat__count strong { font-size: 17px; color: var(--color-brand-600); }
.tm-seat--full .tm-seat__count strong { color: var(--color-danger-600); }

.tm-seat__bar {
    display: block; margin-top: 8px; height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-brand-500) 14%, var(--surface));
    overflow: hidden;
}
.tm-seat__fill {
    display: block; height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-grad);
    transition: width .2s ease;
}
.tm-seat--full .tm-seat__fill { background: var(--color-danger-500); }

.tm-seat__fill[data-fill="0"]   { width: 0; }
.tm-seat__fill[data-fill="5"]   { width: 5%; }
.tm-seat__fill[data-fill="10"]  { width: 10%; }
.tm-seat__fill[data-fill="15"]  { width: 15%; }
.tm-seat__fill[data-fill="20"]  { width: 20%; }
.tm-seat__fill[data-fill="25"]  { width: 25%; }
.tm-seat__fill[data-fill="30"]  { width: 30%; }
.tm-seat__fill[data-fill="35"]  { width: 35%; }
.tm-seat__fill[data-fill="40"]  { width: 40%; }
.tm-seat__fill[data-fill="45"]  { width: 45%; }
.tm-seat__fill[data-fill="50"]  { width: 50%; }
.tm-seat__fill[data-fill="55"]  { width: 55%; }
.tm-seat__fill[data-fill="60"]  { width: 60%; }
.tm-seat__fill[data-fill="65"]  { width: 65%; }
.tm-seat__fill[data-fill="70"]  { width: 70%; }
.tm-seat__fill[data-fill="75"]  { width: 75%; }
.tm-seat__fill[data-fill="80"]  { width: 80%; }
.tm-seat__fill[data-fill="85"]  { width: 85%; }
.tm-seat__fill[data-fill="90"]  { width: 90%; }
.tm-seat__fill[data-fill="95"]  { width: 95%; }
.tm-seat__fill[data-fill="100"] { width: 100%; }

.tm-seat__note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-subtle); }
.tm-seat__note--danger { color: var(--color-danger-600); font-weight: 600; }

/* ---------- The money preview on the form ---------- */
.tm-preview {
    margin-top: 16px; padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.tm-preview__money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.tm-preview__label {
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--text-muted);
}
.tm-preview__figure { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tm-preview__figure small { display: block; font-size: 11px; font-weight: 500; color: var(--text-subtle); }
.tm-preview__caveat { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-subtle); }

/* ---------- Definition grid, for a detail screen ---------- */
.tm-facts {
    margin: 16px 0 0;
    display: grid; gap: 12px 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.tm-fact { margin: 0; min-width: 0; }
.tm-fact--wide { grid-column: 1 / -1; }
.tm-fact dt {
    margin: 0 0 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--text-muted);
}
.tm-fact dd { margin: 0; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.tm-fact dd small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-subtle); font-weight: 400; }

/* ---------- Form footer ---------- */
.tm-formfoot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-subtle);
}
.tm-formfoot__spacer { margin-left: auto; }
.tm-form .enq-btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
    .tm-seat__head { flex-direction: column; }
    .tm-seat__count { text-align: left; }
    .tm-preview__money { gap: 4px 12px; }
    .tm-formfoot { padding: 12px 14px; }
    .tm-cardnote { padding: 10px 14px 13px; }
}

/* ═══════════════════════════════════════════════════════ 7. Standalone ══ */
/* The pages that render with NO session: the SSO error and the 403. They get
   the same tokens and the same card, but no shell — there is no menu to draw
   and no college to name. */

.tm-solo {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 32px 20px;
}
.tm-solo__card {
    width: min(520px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    text-align: center;
}
.tm-solo__mark {
    width: 44px; height: 44px; margin: 0 auto 18px;
    border-radius: 13px; background: var(--brand-grad); color: var(--on-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.tm-solo__card h1 { font-size: 19px; margin-bottom: 10px; }
.tm-solo__card p { margin: 0 0 10px; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.tm-solo__hint { color: var(--text-subtle) !important; font-size: 12.5px !important; }
.tm-solo__caps {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    margin: 14px 0 0; padding: 0; list-style: none;
}

/* ══════════════════════════════════════ 8. Routes & the shift builder ══ */
/* The builder is two cards side by side — AM and PM — and the whole point of
   the screen is that a user can compare them at a glance. Below 1100px they
   stack, because comparing two columns squeezed to 300px each is worse than
   scrolling between two full-width ones. */

.rt-legs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.rt-leg { margin-bottom: 0; }

/* A select outside .enq-filters gets the input skin from .enq-input, which does
   not carry the chevron gutter that block adds. Reserve it here too, or a long
   option runs under the arrow the browser paints. */
select.enq-input { padding-right: 30px; }

/* ---------- Which order is this leg following ---------- */
/* Colour-coded by SOURCE, not by count, because "9 stops" is equally true of a
   leg with its own order and one silently borrowing the route's. */

.rt-source { display: inline-flex; align-items: center; gap: 8px; }
.rt-source small { font-size: 11px; white-space: nowrap; }

.rt-verdict {
    border-left: 3px solid var(--border-strong);
    background: var(--surface-subtle);
    font-size: 13px; line-height: 1.55;
}
.rt-verdict strong { color: var(--text); }
.rt-verdict--own   { border-left-color: var(--color-brand-500);   background: color-mix(in srgb, var(--color-brand-500) 4%, var(--surface)); }
.rt-verdict--route { border-left-color: var(--color-warning-500); background: color-mix(in srgb, var(--color-warning-500) 5%, var(--surface)); }
.rt-verdict--none  { border-left-color: var(--color-danger-500);  background: color-mix(in srgb, var(--color-danger-500) 4%, var(--surface)); }
.rt-verdict--off   { border-left-color: var(--border-strong); }

.rt-note {
    margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-subtle);
}
.rt-note + .rt-note { margin-top: 8px; }
.rt-note code {
    font-family: var(--font-mono); font-size: 11px;
    background: var(--surface-subtle); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 5px;
}
.rt-verdict .rt-note { margin-top: 8px; }

/* ---------- The order table ---------- */

.rt-order td { vertical-align: middle; }
.rt-arrow { font-size: 10px; line-height: 1; padding: 6px 8px; }
.rt-pos { width: 70px; margin-left: auto; text-align: right; padding: 5px 8px; }

.rt-applybar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.rt-applybar .enq-muted { flex: 1 1 260px; line-height: 1.55; }

/* ---------- The shortcuts under each leg ---------- */

.rt-legfoot {
    border-top: 1px solid var(--border);
    background: var(--surface-subtle);
    display: flex; flex-direction: column; gap: 12px;
}
.rt-shortcut {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12px;
}
.rt-shortcut + .rt-shortcut { border-top: 1px dashed var(--border-strong); padding-top: 12px; }
.rt-shortcut__label { font-weight: 700; color: var(--text-muted); flex: 1 1 100%; }
.rt-shortcut select.enq-input { width: auto; flex: 1 1 200px; }
.rt-shortcut .enq-muted { flex: 1 1 100%; line-height: 1.5; }
.rt-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.rt-check input { accent-color: var(--color-brand-500); }

/* ---------- The list screen ---------- */

/* A one-button form inside a row of buttons must not break the row: forms are
   block by default and would drop the toggle onto its own line. */
.rt-inline { display: inline-flex; }

.rt-legend {
    display: flex; flex-wrap: wrap; gap: 8px 20px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    font-size: 11.5px; color: var(--text-subtle);
}
.rt-legend > span { display: inline-flex; align-items: center; gap: 7px; }

/* ══════════════════════════════════════════════════════ 9. Responsive ══ */

@media (max-width: 1024px) {
    .tm-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--header-h) auto minmax(0, 1fr);
        grid-template-areas: 'header' 'nav' 'main';
    }
    .tm-brandbar { display: none; }
    .tm-navtoggle { display: inline-flex; }
    .tm-sidebar {
        position: static; max-height: none;
        border-right: 0; border-bottom: 1px solid var(--border);
        padding: 8px 12px 14px;
    }
    /* [hidden] is how the toggle collapses it — a class would fight the
       stylesheet's own display rules on the flex container. */
    .tm-sidebar[hidden] { display: none; }
    .tm-header { position: sticky; top: 0; z-index: 30; }
    .tm-main { padding: 16px 16px 40px; }
    .tm-user__name { max-width: 120px; }
    /* Two 300px-wide leg cards are harder to compare than two full-width ones
       you scroll between. */
    .rt-legs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .tm-header { gap: 8px; padding: 0 12px; }
    .tm-user__text { display: none; }
    .tm-user { padding: 4px; }
    .tm-backlink span { display: none; }
    .tm-backlink { padding: 7px 9px; }
    .cr-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .cr-tile { padding: 13px 14px; }
    .cr-tile__value { font-size: 25px; }
    .enq-actionbar { padding: 10px 14px; }
    .enq-filters { padding: 12px 14px; }
    .enq-table thead th:first-child, .enq-table tbody td:first-child { padding-left: 14px; }
    .enq-table thead th:last-child,  .enq-table tbody td:last-child  { padding-right: 14px; }
}

/* ══════════════════════════════════════════════════════════ 10. Print ══ */
/* Scoped to a page that actually asked to be printable, never global — the ERP
   shipped an app-wide `@media print` block once and blanked every screen in the
   product until it was scoped. Add .tm-printable to a page's <body> to opt in. */

@media print {
    body.tm-printable { background: #fff; }
    body.tm-printable .tm-sidebar,
    body.tm-printable .tm-brandbar,
    body.tm-printable .tm-header,
    body.tm-printable .tm-toasts,
    body.tm-printable .enq-pagination,
    body.tm-printable .enq-table__actions { display: none !important; }
    body.tm-printable .tm-shell { display: block; }
    body.tm-printable .tm-main { padding: 0; }
    body.tm-printable .ui-card { box-shadow: none; border-color: #ccc; }
    body.tm-printable .enq-table-wrap { overflow: visible !important; }
    body.tm-printable .enq-table thead th { position: static !important; }
}