/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* Landing shell on the design tokens: a ruled top bar on the page ground, the brand mark in ink,
   the one accent pill for Register. No gradients, no shadows (new-design/README.md §1). */

.landing-wrapper[b-l0c55oaich] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kg-page);
}

.landing-navbar[b-l0c55oaich] {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--kg-page);
    border-bottom: 1px solid var(--kg-rule-section);
}
.landing-navbar-inner[b-l0c55oaich] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 16px 24px;
}

.landing-brand[b-l0c55oaich] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--kg-ink);
    text-decoration: none;
}
.landing-brand-name[b-l0c55oaich] {
    font-family: var(--kg-font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.landing-brand:hover[b-l0c55oaich] { color: var(--kg-ink); }

.landing-nav[b-l0c55oaich] {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.landing-nav li[b-l0c55oaich] { display: flex; align-items: center; }
[b-l0c55oaich] .landing-nav .kg-pill { padding: 9px 18px; }

.landing-nav-toggle[b-l0c55oaich] {
    display: none;
    color: var(--kg-ink);
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .landing-nav-toggle[b-l0c55oaich] { display: inline-flex; }
    .landing-nav-collapse[b-l0c55oaich] { display: none; width: 100%; }
    .landing-nav-toggle-cb:checked ~ .landing-nav-collapse[b-l0c55oaich] { display: block; }
    .landing-nav[b-l0c55oaich] { flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0 6px; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell (new-design/README.md §2): a fixed 238px rail and a content column that owns NO padding of
   its own. Every screen lays out its own 40px bands, exactly as the spec's blocks do, and the unported
   pages keep their Bootstrap containers until each is rebuilt. minmax(0, 1fr) lets a wide table scroll
   inside its own wrapper instead of widening the column past the viewport. */
.kg-shell[b-8rr4p22aev] {
    display: grid;
    grid-template-columns: var(--kg-rail-w) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--kg-page);
}

.kg-main[b-8rr4p22aev] {
    min-width: 0;
}

/* Below ~900px the rail collapses to icons only (spec §4); the rail's own rules are in theme.css. */
@media (max-width: 899.98px) {
    .kg-shell[b-8rr4p22aev] {
        grid-template-columns: var(--kg-rail-w-narrow) minmax(0, 1fr);
    }
}

/* NOTE: #blazor-error-ui styles live in the GLOBAL wwwroot/app.css. The banner div lives in
   App.razor (T34) so it covers every layout; a scoped rule here would only match MainLayout's
   scope, leaving the banner permanently display:block (a false "unhandled error"). */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-88hndfs1ua],
.components-reconnect-repeated-attempt-visible[b-88hndfs1ua],
.components-reconnect-failed-visible[b-88hndfs1ua],
.components-pause-visible[b-88hndfs1ua],
.components-resume-failed-visible[b-88hndfs1ua],
.components-rejoining-animation[b-88hndfs1ua] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-retrying[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-failed[b-88hndfs1ua],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-88hndfs1ua] {
    display: block;
}


#components-reconnect-modal[b-88hndfs1ua] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-88hndfs1ua 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-88hndfs1ua 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-88hndfs1ua 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-88hndfs1ua]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-88hndfs1ua 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-88hndfs1ua {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-88hndfs1ua {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-88hndfs1ua {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-88hndfs1ua] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-88hndfs1ua] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-88hndfs1ua] {
    border: 0;
    background-color: var(--kg-accent);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-88hndfs1ua] {
        background-color: var(--kg-accent-hover);
    }

    #components-reconnect-modal button:active[b-88hndfs1ua] {
        background-color: var(--kg-accent);
    }

.components-rejoining-animation[b-88hndfs1ua] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-88hndfs1ua] {
        position: absolute;
        border: 3px solid var(--kg-accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-88hndfs1ua 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-88hndfs1ua] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-88hndfs1ua {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Bills.razor.rz.scp.css */
/* Invoices — scoped layout (new-design/README.md §3.4). The shared shapes (list header, stepper,
   filter row, ruled row, ledger, warning band, footer) come from css/theme.css; only this screen's
   band proportions, its column set and its total row live here. */

.bills-page[b-odd55uo8kd] { display: flex; flex-direction: column; }

/* Hero band: the headline figure left, the period ledger right. The grid, the card and the split are
   theme.css's (.kg-cardrow--split), shared with the dashboard so the two screens' heroes line up;
   only what each card does with its own height lives here. The four ledger rows share whatever
   height the hero card sets, growing evenly rather than leaving the card's lower half empty — the
   same treatment, and the same reason, as the dashboard's ledger. */
.bills-ledger[b-odd55uo8kd] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bills-ledger .kg-ledger-row[b-odd55uo8kd] { flex: 1; align-items: center; }
.bills-hero-figure[b-odd55uo8kd] { margin-top: 10px; white-space: nowrap; }
.bills-hero-figure .is-zero[b-odd55uo8kd] { color: var(--kg-faint); }
/* The context line under the figure is .kg-context in theme.css — shared with the dashboard's. */
/* The past-due signal is a BUTTON (it filters this page, it does not navigate), so the UA chrome
   comes off and it reads as the text signal beside it. */
.bills-signal-link[b-odd55uo8kd] { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.bills-signal-link:hover[b-odd55uo8kd] { text-decoration: underline; text-underline-offset: 4px; }

.is-loading[b-odd55uo8kd] { opacity: .5; }
/* First thing in the list card, so it has the card's own top padding above it already. */
.bills-scope[b-odd55uo8kd] { padding-top: 0; padding-bottom: 0; }

/* Table. Spec §3.4: 132px 1fr 92px 76px 112px 122px 152px 64px, scaled for the larger type this app
   uses. The action column is 96px because the row carries both the request link and the overflow menu
   (PDF, delete); every other column is as tight as its content allows, so the client column keeps the
   width it needs. */
.bills-table[b-odd55uo8kd] {
    --kg-row-cols: 132px minmax(150px, 1fr) 112px 100px 148px 124px 148px 92px;
}
/* Below this the columns would start squeezing the client cell, so the table scrolls sideways
   instead (spec §4: "do not let the grid squeeze the client-name column"). */
.bills-table .kg-rowhead[b-odd55uo8kd],
.bills-table .kg-row[b-odd55uo8kd] { min-width: 1040px; }
/* Wider rows than the default, so this table keeps its scroll box (and, with it, the clipping the
   theme's rule lifts at 1280) until the page is wide enough to hold a row without spilling. */
@media (max-width: 1439.98px) { .bills-table[b-odd55uo8kd] { overflow-x: auto; } }
.bills-number[b-odd55uo8kd] { min-width: 0; }
/* THE one place ellipsis is allowed (spec §"Things that will go wrong"): the narrow name cell on
   Invoices and Requests. The registers, where the full legal name is the point, never truncate. */
.bills-table .kg-name[b-odd55uo8kd],
.bills-table .kg-reg-meta[b-odd55uo8kd] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bills-money[b-odd55uo8kd] { font-size: 14.5px; color: var(--kg-body); white-space: nowrap; }
.bills-money--total[b-odd55uo8kd] { font-size: 15.5px; font-weight: 600; color: var(--kg-ink); }
.bills-money .kg-cur[b-odd55uo8kd] { margin-left: 4px; font-size: 12px; }
.bills-dates[b-odd55uo8kd] { font-size: 13.5px; color: var(--kg-secondary); white-space: nowrap; }
.kg-hairline[b-odd55uo8kd] { color: var(--kg-hairline-ink); }

/* The total row: a real ledger total on the same grid as the rows above it, so the figures line up
   with their columns. Above a .24 rule, baseline-aligned, no hover. */
.bills-total[b-odd55uo8kd] {
    align-items: baseline;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--kg-rule-total);
    border-bottom: 0;
}
.bills-total:hover[b-odd55uo8kd] { background: transparent; }
.bills-total-note[b-odd55uo8kd] { font-size: 12.5px; color: var(--kg-faint); }
.bills-total-figure[b-odd55uo8kd] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--kg-ink);
}
.bills-total-figure .kg-cur[b-odd55uo8kd] { font-size: 12px; }

/* Stacked (the split itself is theme.css's), the two cards are no longer a pair, so the ledger's
   rows stop sharing a height they no longer have to fill. */
@media (max-width: 1199.98px) {
    .bills-ledger .kg-ledger-row[b-odd55uo8kd] { flex: none; }
}

/* /Components/Pages/ClientHistory.razor.rz.scp.css */
/* Client history — scoped layout. Two cards on the shared shapes (.kg-card / .kg-cardrow in
   theme.css, the same pair the two registers use); the identity block borrows RequestDetail's
   proportions, because this is the other detail page and a client's name should sit exactly where a
   request's does. Only this screen's two column sets and its money cells live here. */

.ch-page[b-kmmxb8su63] { display: flex; flex-direction: column; }

/* ── Header card ─────────────────────────────────────────────────────────────────────────── */

/* The way out on the left, the one action on the right — the action bar from RequestDetail, inside
   the card rather than across the page. */
.ch-bar[b-kmmxb8su63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
}
.ch-back[b-kmmxb8su63] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kg-secondary);
    text-decoration: none;
}
.ch-back:hover[b-kmmxb8su63] { color: var(--kg-ink); }

.ch-identity[b-kmmxb8su63] { padding-top: 22px; }
.ch-microline[b-kmmxb8su63] { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.ch-microline .kg-code[b-kmmxb8su63] { font-size: 11.5px; letter-spacing: .1em; }
.ch-sep[b-kmmxb8su63] { color: var(--kg-hairline-ink); margin: 0 2px; }
.ch-name[b-kmmxb8su63] { margin: 12px 0 0; text-wrap: balance; }
.ch-contact[b-kmmxb8su63] { margin-top: 10px; font-size: 13px; color: var(--kg-muted); text-wrap: pretty; }
.ch-notfound[b-kmmxb8su63] { margin-top: 22px; }

/* Requests still waiting on us are the one figure here anybody can act on, so they take the accent
   the rest of the app reserves for exactly that. */
.ch-figure--waiting[b-kmmxb8su63] { color: var(--kg-accent-text); }
.kg-strip-figure.is-zero[b-kmmxb8su63] { color: var(--kg-faint); }

/* Hairline placeholders while the read is in flight — no spinner, no shimmer (spec §4). */
.ch-skel[b-kmmxb8su63] { border-radius: 6px; background: var(--kg-hover); }
.ch-skel--micro[b-kmmxb8su63] { width: 220px; height: 12px; }
.ch-skel--title[b-kmmxb8su63] { width: 420px; max-width: 80%; height: 36px; margin-top: 14px; }
.ch-skel--line[b-kmmxb8su63] { width: 300px; height: 12px; margin-top: 12px; }

/* ── List card ───────────────────────────────────────────────────────────────────────────── */

/* The tab track already draws a rule; the table's own column-head rule follows it, so the two need
   air between them or they read as a double border. */
.ch-table[b-kmmxb8su63] { margin-top: 20px; }
.ch-empty[b-kmmxb8su63] { margin-top: 20px; }

/* Requests: our number, where it went, what was on it, where it got to, when it arrived. The route
   takes the flexible column — it is the only cell whose length is not knowable. */
.ch-table--requests[b-kmmxb8su63] { --kg-row-cols: 154px minmax(150px, 1fr) 156px 132px 108px 92px; }
.ch-table--requests .kg-rowhead[b-kmmxb8su63],
.ch-table--requests .kg-row[b-kmmxb8su63] { min-width: 940px; }

/* Invoices: the same reading order as the Invoices screen — number, the three money columns, where
   the invoice got to, and the dates that decide whether it is late. */
.ch-table--bills[b-kmmxb8su63] { --kg-row-cols: minmax(150px, 1fr) 124px 124px 156px 136px 152px; }
.ch-table--bills .kg-rowhead[b-kmmxb8su63],
.ch-table--bills .kg-row[b-kmmxb8su63] { min-width: 940px; }

.ch-number[b-kmmxb8su63] { min-width: 0; }
.ch-route[b-kmmxb8su63] { min-width: 0; }
.ch-route-line[b-kmmxb8su63] { display: block; font-size: 14.5px; color: var(--kg-body); text-wrap: pretty; }
.ch-cargo[b-kmmxb8su63] { font-size: 14px; color: var(--kg-body); }
.ch-dates[b-kmmxb8su63] { font-size: 13.5px; color: var(--kg-secondary); white-space: nowrap; }
.kg-hairline[b-kmmxb8su63] { color: var(--kg-hairline-ink); }

/* Money, at the Invoices screen's weights so the same invoice reads the same on both. */
.ch-money[b-kmmxb8su63] { font-size: 14.5px; color: var(--kg-body); white-space: nowrap; }
.ch-money--total[b-kmmxb8su63] { font-size: 15.5px; font-weight: 600; color: var(--kg-ink); }
.ch-money .kg-cur[b-kmmxb8su63] { margin-left: 4px; font-size: 12px; }
.ch-money .kg-reg-meta[b-kmmxb8su63] { margin-top: 2px; }

@media (max-width: 767.98px) {
    .ch-skel--title[b-kmmxb8su63] { height: 28px; }
}
/* /Components/Pages/Clients.razor.rz.scp.css */
/* Clients register — only the column set lives here; the skeleton and cell styles are shared
   (Register.razor, css/theme.css). Spec §3.5: 1fr 144px 200px 86px 118px 104px 64px — the last
   column is 96px here because the row also carries the codebase's own overflow menu (delete). */
[b-7m2mdvt2z3] .clients-table {
    --kg-row-cols: minmax(0, 1fr) 144px 200px 86px 118px 104px 96px;
}
/* The fixed columns above already come to 844px with the gaps, so the theme's default 900px row
   leaves the name — the one column this register exists to show in full — 56px to wrap into. The
   table scrolls sideways instead (spec §4: "do not let the grid squeeze the client-name column"). */
[b-7m2mdvt2z3] .clients-table .kg-rowhead,
[b-7m2mdvt2z3] .clients-table .kg-row { min-width: 1040px; }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Owner overview — scoped layout (new-design/README.md §3.1). Type, colour and the shared shapes
   (segmented toggle, stepper, ledger, ruled row, empty state, warning band, type roles) are the spec's
   and come from css/theme.css. The LAYOUT departs from it on the owner's instruction: the spec's
   flush-left bands are cards here — a full-width one for the period controls, then a matched left/right
   pair per band — because the bands' shared edges were doing the work of a card without looking like
   one. Only the panel's own border, radius and fill are borrowed; nothing else changes. */

.dash[b-a4jj0w9mi1] {
    display: flex;
    flex-direction: column;
}

/* The card, the two-card row and the 1fr | right-column split are all shared now — .kg-card and
   .kg-cardrow in theme.css, which Invoices and the two registers use as well. This file keeps only
   what is this screen's: which block holds each card's floor, and the queue's columns. */

/* The period card holds a bare row of controls, not a listhead's title block, so the shared 20px
   padding leaves it swimming; the controls' own breathing room is enough. Desktop only: below 720px
   theme.css stacks this card into a column and its 18px there stands. */
@media (min-width: 720px) {
    .kg-card--head[b-a4jj0w9mi1] { padding-top: 10px; padding-bottom: 10px; }
}

.dash-warn[b-a4jj0w9mi1] { margin-top: 24px; }
.dash-empty-wrap[b-a4jj0w9mi1] { padding-top: 34px; padding-bottom: 44px; }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
.dash-hero-figure[b-a4jj0w9mi1] { margin-top: 10px; white-space: nowrap; }
.dash-hero-figure.is-zero[b-a4jj0w9mi1] { color: var(--kg-faint); }
/* The context line under the figure is .kg-context in theme.css — shared with the Invoices hero. */
.dash-signal[b-a4jj0w9mi1] { display: inline-flex; align-items: center; gap: 7px; }

/* The subcontracting equation: net − to carriers = kept, on one line. Its bottom margin is what
   keeps the strip below it off its shoulder — see .dash-strip. */
.dash-sub[b-a4jj0w9mi1] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0;
    padding-top: 20px;
    border-top: 1px solid var(--kg-rule-section);
    font-variant-numeric: tabular-nums;
}
.dash-sub-label[b-a4jj0w9mi1] { margin-right: 6px; }
.dash-sub-word[b-a4jj0w9mi1] { font-size: 14px; color: var(--kg-secondary); }
.dash-sub-figure[b-a4jj0w9mi1] { font-size: 16px; font-weight: 600; color: var(--kg-ink); }
.dash-sub-op[b-a4jj0w9mi1] { padding: 0 2px; font-size: 16px; color: var(--kg-faint); }
.dash-sub-note[b-a4jj0w9mi1] { font-size: 12.5px; color: var(--kg-muted); }
.dash-sub-excluded[b-a4jj0w9mi1] { flex-basis: 100%; }
.dash-sub-empty[b-a4jj0w9mi1] { font-size: 13.5px; color: var(--kg-secondary); }

/* The strip under the equation: the page-level strip's gutter margins do not apply inside the card,
   and `auto` puts it on the card's floor. The 26px minimum gap above it comes from the equation's own
   bottom margin — flex margins do not collapse, so the two never fight. */
.dash-strip[b-a4jj0w9mi1] { margin: auto 0 0; }
.dash-strip-cell[b-a4jj0w9mi1] { display: block; color: inherit; transition: background-color .12s ease; }
.dash-strip-cell:hover[b-a4jj0w9mi1] { background: var(--kg-hover); color: inherit; text-decoration: none; }
.dash-strip .is-zero[b-a4jj0w9mi1] { color: var(--kg-faint); }
.dash-strip .kg-meta[b-a4jj0w9mi1] { margin-top: 4px; }

/* Ledger rows are links to the list that backs each figure: the warm tint on hover, never an
   underline, and the tint bleeds 10px past the text edge like every other row. The five rows SHARE
   whatever height the hero card sets, growing evenly rather than leaving the card's lower half empty
   — which also makes each row a bigger hit target. Baseline alignment is dropped for centring: in a
   grown row a baseline pins the pair to the top of it. */
.dash-ledger[b-a4jj0w9mi1] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.dash-ledger-row[b-a4jj0w9mi1] {
    flex: 1;
    align-items: center;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    color: inherit;
    transition: background-color .12s ease;
}
.dash-ledger-row:hover[b-a4jj0w9mi1] { background: var(--kg-hover); color: inherit; text-decoration: none; }
.dash-ledger-row .kg-ledger-figure[b-a4jj0w9mi1] { white-space: nowrap; }
.is-loading[b-a4jj0w9mi1] { opacity: .5; transition: opacity .12s ease; }

/* ── Needs your approval ───────────────────────────────────────────────────────────────── */
.dash-queue-head[b-a4jj0w9mi1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.dash-queue-head h3[b-a4jj0w9mi1] { margin: 0; }
.dash-queue-sub[b-a4jj0w9mi1] { margin-top: 5px; font-size: 13px; color: var(--kg-secondary); }

/* Five columns, headed. The two text columns are fractional so they both grow on a wide monitor
   instead of leaving the name column as one short word against a field of white; the three fixed
   ones are sized to their longest real content ("22.08"/"14:10", "14 zile", "Revizuiește"). */
.dash-queue[b-a4jj0w9mi1] {
    margin-top: 18px;
    --kg-row-cols: minmax(0, 1fr) minmax(0, .8fr) 92px 96px 92px;
}

.dash-queue-client[b-a4jj0w9mi1] { min-width: 0; }
.dash-queue-client .kg-name[b-a4jj0w9mi1] {
    text-wrap: pretty;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-queue-client .kg-meta[b-a4jj0w9mi1] { display: block; margin-top: 2px; }

/* The route stacks its two ends rather than running them on one line: at this column width a
   "Bratislava → Pitești" that has to fit horizontally is a column of ellipses, and the second line
   matches the height the client cell already has. */
.dash-queue-route[b-a4jj0w9mi1] { min-width: 0; font-size: 13px; color: var(--kg-body); }
.dash-queue-leg[b-a4jj0w9mi1] { display: block; text-wrap: pretty; }
.dash-queue-leg--to[b-a4jj0w9mi1] { margin-top: 2px; color: var(--kg-secondary); }
.dash-arrow[b-a4jj0w9mi1] { margin-right: 4px; color: var(--kg-hairline-ink); }

.dash-queue-when[b-a4jj0w9mi1] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.dash-queue-when .kg-meta[b-a4jj0w9mi1] { display: block; margin-top: 2px; }

/* The wait, in days. Plain body text until the stale mark, then the problem signal and its dot —
   restated here because scoping outranks the bare .kg-warning utility the row also carries. */
.dash-queue-wait[b-a4jj0w9mi1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kg-body);
    white-space: nowrap;
}
.dash-queue-wait.kg-warning[b-a4jj0w9mi1] { color: var(--kg-warning); }

.dash-queue-more[b-a4jj0w9mi1] { margin: auto 0 0; padding-top: 16px; }
.dash-queue-empty[b-a4jj0w9mi1] { margin-top: 20px; }

/* ── The chart card ─────────────────────────────────────────────────────────────────────── */
.dash-chart-head[b-a4jj0w9mi1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.dash-chart-peak[b-a4jj0w9mi1] { font-size: 12px; color: var(--kg-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The title keeps its width; the figure slot beside it is the half that gives way. */
.dash-chart-head .kg-micro[b-a4jj0w9mi1] { flex: 0 0 auto; }
/* The pointed-at month's sentence is longer than the peak figure it stands in for, so it takes
   the room the title does not need and ellipsizes rather than pushing the head past the card.
   Darker than the peak: it is the answer to a question the reader just asked. */
.dash-chart-readout[b-a4jj0w9mi1] {
    color: var(--kg-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-spark[b-a4jj0w9mi1] {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
    overflow: visible;
}
.dash-spark-area[b-a4jj0w9mi1] { fill: var(--kg-positive-fill); }
.dash-spark-line[b-a4jj0w9mi1] {
    fill: none;
    stroke: var(--kg-positive);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.dash-spark-base[b-a4jj0w9mi1] { stroke: rgba(20, 24, 27, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-spark-dot[b-a4jj0w9mi1] { fill: var(--kg-positive); }
/* The last point's always-visible marker sits ON TOP of that point's hit group; without this it
   captures the pointer and fires the group's mouseleave, blanking the readout it should show. */
.dash-chart svg > .dash-spark-dot[b-a4jj0w9mi1] { pointer-events: none; }
/* Hover/focus reveals that month's dot and reads its value out in the chart head (.dash-chart-readout),
   not in a native tooltip. The hit target is a full column, and the endpoint is always marked — hover is
   never the only way in. */
.dash-pt[b-a4jj0w9mi1] { cursor: default; }
.dash-pt-reveal[b-a4jj0w9mi1] { opacity: 0; transition: opacity .12s ease; }
.dash-pt:hover .dash-pt-reveal[b-a4jj0w9mi1],
.dash-pt:focus-visible .dash-pt-reveal[b-a4jj0w9mi1] { opacity: 1; }
.dash-pt:focus[b-a4jj0w9mi1] { outline: none; }
.dash-pt:focus-visible rect[b-a4jj0w9mi1] { outline: 2px solid var(--kg-accent); }
.dash-months[b-a4jj0w9mi1] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 8px;
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--kg-faint);
}
.dash-months .is-current[b-a4jj0w9mi1] { color: var(--kg-secondary); }
.dash-chart-note[b-a4jj0w9mi1] {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--kg-rule-row);
    font-size: 12px;
    color: var(--kg-secondary);
    text-wrap: pretty;
}

/* ── Top clients: three flush rows under the chart, on the card's floor ────────────────── */
.dash-top[b-a4jj0w9mi1] { margin: auto 0 0; padding-top: 26px; }
.dash-top-rows[b-a4jj0w9mi1] {
    margin-top: 12px;
    border-top: 1px solid var(--kg-rule-strip);
    font-variant-numeric: tabular-nums;
}
.dash-top-row[b-a4jj0w9mi1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 -10px;
    padding: 11px 10px;
    border-bottom: 1px solid var(--kg-rule-row);
    transition: background-color .12s ease;
}
.dash-top-row:last-child[b-a4jj0w9mi1] { border-bottom: 0; }
.dash-top-row:hover[b-a4jj0w9mi1] { background: var(--kg-hover); }
.dash-top-client[b-a4jj0w9mi1] { min-width: 0; }
.dash-top-name[b-a4jj0w9mi1] { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-top-amount[b-a4jj0w9mi1] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
.dash-top-empty[b-a4jj0w9mi1] { margin-top: 12px; font-size: 13.5px; color: var(--kg-secondary); }

/* Below ~1200 the cards stack (the split itself is theme.css's; the hero figure's step down to 56px
   is in theme.css with the type role). Stacked, the two cards are no longer a pair, so the blocks
   that were holding a floor go back to sitting under what they follow. */
@media (max-width: 1199.98px) {
    .dash-strip[b-a4jj0w9mi1] { margin-top: 0; }
    .dash-top[b-a4jj0w9mi1] { margin-top: 0; }
    .dash-queue-more[b-a4jj0w9mi1] { margin-top: 0; }
    .dash-ledger-row[b-a4jj0w9mi1] { flex: none; }
}

/* Narrow enough that five columns would each be a word wide: the submitted stamp goes — the wait
   beside it is the same fact in the form the queue is actually read by. */
@media (max-width: 719.98px) {
    .dash-queue[b-a4jj0w9mi1] { --kg-row-cols: minmax(0, 1fr) minmax(0, .8fr) 88px 92px; }
    .dash-queue .kg-rowhead > :nth-child(3)[b-a4jj0w9mi1],
    .dash-queue-when[b-a4jj0w9mi1] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-pt-reveal[b-a4jj0w9mi1], .dash-ledger-row[b-a4jj0w9mi1], .dash-top-row[b-a4jj0w9mi1], .is-loading[b-a4jj0w9mi1] { transition: none; }
}

/* The one ledger figure that is a problem rather than a record: delivered work nobody has invoiced yet.
   BRICK, not the accent — the owner's call, and the right one: orange marks something you can act on,
   which would put this in the same register as a Review link, and money already earned and never asked
   for is not a task, it is a fault. Same signal the hero gives a past-due invoice. */
.dash-ledger-alert[b-a4jj0w9mi1] { color: var(--kg-warning); }
/* /Components/Pages/Fleet.razor.rz.scp.css */
/* ── Row actions ──────────────────────────────────────────────────────────────
   A real circle with the glyph on its centre.

   Bootstrap's .btn-sm keeps horizontal padding and a 1.5 line-height, so
   `rounded-pill px-2` produced a lozenge — wider than it was tall — with the icon
   sitting on the text baseline rather than in the middle. Both halves come from
   letting padding decide the box, so the box is declared here instead: equal width
   and height make `border-radius: 50%` a circle rather than an ellipse, and flex
   centring puts the glyph on the centre regardless of the font's metrics. */
.fleet-iconbtn[b-e4e31dkwk2] {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* The buttons sit in a flex row; without this a narrow actions column squeezes
       them out of round again. */
    flex: 0 0 auto;
}

/* Bootstrap Icons ship their own line-height on the <i>; zeroing it is the other
   half of putting the mark on the button's centre and not on its baseline. */
.fleet-iconbtn > i[b-e4e31dkwk2] {
    line-height: 1;
    font-size: 15px;
}
/* /Components/Pages/LandingPage.razor.rz.scp.css */
/* Landing page on the design tokens (new-design/README.md §1): the hero and the closing call sit on
   the rail's ink ground, everything between is ruled bands on the page ground. Orange only on actions. */

.landing[b-8tmctfxckt] { display: flex; flex-direction: column; }
.landing-inner[b-8tmctfxckt] { max-width: 1160px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* ── Hero / closing call: ink ground ── */
.landing-hero[b-8tmctfxckt], .landing-cta[b-8tmctfxckt] {
    background: var(--kg-rail);
    color: var(--kg-onrail);
    padding: 96px 0 88px;
}
.landing-cta[b-8tmctfxckt] { padding: 72px 0; }
.landing-hero-kicker[b-8tmctfxckt] { display: block; margin-bottom: 22px; color: var(--kg-onrail-meta); }
.landing-hero-title[b-8tmctfxckt] {
    margin: 0;
    max-width: 14ch;
    font-family: var(--kg-font-display);
    font-weight: 800;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.0;
    letter-spacing: -.025em;
    color: var(--kg-onrail);
    text-wrap: balance;
}
.landing-cta-title[b-8tmctfxckt] { font-size: clamp(32px, 4.5vw, 52px); max-width: 20ch; }
.landing-hero-sub[b-8tmctfxckt] {
    max-width: 58ch;
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--kg-onrail-idle);
    text-wrap: pretty;
}
.landing-hero-actions[b-8tmctfxckt] { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 36px; }
.landing-hero-link[b-8tmctfxckt] {
    font-size: 14px;
    font-weight: 600;
    color: var(--kg-onrail);
    text-decoration: none;
    text-underline-offset: 5px;
}
.landing-hero-link:hover[b-8tmctfxckt] { color: var(--kg-onrail); text-decoration: underline; text-decoration-thickness: 1px; }

/* ── Bands ── */
.landing-band[b-8tmctfxckt] { padding: 64px 0; border-bottom: 1px solid var(--kg-rule-section); }
.landing-section-head[b-8tmctfxckt] { margin-bottom: 36px; max-width: 60ch; }
.landing-h2[b-8tmctfxckt] {
    margin: 0;
    font-family: var(--kg-font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--kg-ink);
}
.landing-h3[b-8tmctfxckt] { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--kg-ink); }
.landing-text[b-8tmctfxckt] { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--kg-secondary); text-wrap: pretty; }

.landing-quick[b-8tmctfxckt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.landing-quick .landing-text[b-8tmctfxckt] { max-width: 64ch; }

/* Three ruled columns: a left rule separates them, the first has none (the stat-strip rule). */
.landing-services[b-8tmctfxckt], .landing-steps[b-8tmctfxckt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-service[b-8tmctfxckt], .landing-step[b-8tmctfxckt] { padding: 4px 32px 0; border-left: 1px solid var(--kg-rule-divider); }
.landing-service:first-child[b-8tmctfxckt], .landing-step:first-child[b-8tmctfxckt] { padding-left: 0; border-left: 0; }
.landing-service-icon[b-8tmctfxckt] { width: 44px; height: 44px; margin-bottom: 18px; }
.landing-step-no[b-8tmctfxckt] {
    display: block;
    margin-bottom: 14px;
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--kg-accent-text);
}

.landing-footer[b-8tmctfxckt] { padding: 22px 0 28px; }

@media (max-width: 767.98px) {
    .landing-hero[b-8tmctfxckt] { padding: 64px 0 56px; }
    .landing-band[b-8tmctfxckt] { padding: 44px 0; }
    .landing-quick[b-8tmctfxckt] { flex-direction: column; align-items: flex-start; }
    .landing-services[b-8tmctfxckt], .landing-steps[b-8tmctfxckt] { grid-template-columns: 1fr; gap: 28px; }
    .landing-service[b-8tmctfxckt], .landing-step[b-8tmctfxckt] { padding-left: 0; border-left: 0; }
}
/* /Components/Pages/NewTransportRequest.razor.rz.scp.css */
/* The redesigned new-request wizard — shell chrome (new-design §3). The form layer, the panels and
   each step's internals live in theme.css and the step components' own stylesheets. */

.wiz[b-d2fq5nq6rh] { display: flex; flex-direction: column; min-height: 100%; }

/* Context bar (pattern B). */
.wiz-bar[b-d2fq5nq6rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px var(--kg-gutter);
    border-bottom: 1px solid var(--kg-rule-section);
}
.wiz-bar-crumb[b-d2fq5nq6rh] { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wiz-back[b-d2fq5nq6rh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kg-secondary);
    text-decoration: none;
}
.wiz-back:hover[b-d2fq5nq6rh] { color: var(--kg-ink); }
.wiz-bar-sep[b-d2fq5nq6rh] { color: var(--kg-hairline-ink); }
.wiz-bar-controls[b-d2fq5nq6rh] { display: flex; align-items: center; gap: 16px; flex: none; }
.wiz-discard[b-d2fq5nq6rh] {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--kg-secondary);
    cursor: pointer;
}
.wiz-discard:hover[b-d2fq5nq6rh] { color: var(--kg-warning); }

/* The page title — step 1 of a NEW request only; every later step opens on the rail. */
.wiz-title[b-d2fq5nq6rh] { padding-top: 32px; }
.wiz-title h2[b-d2fq5nq6rh] { margin: 0; font-size: 34px; }
.wiz-title p[b-d2fq5nq6rh] { margin: 9px 0 0; font-size: 14px; color: var(--kg-secondary); max-width: 62ch; text-wrap: pretty; }

/* Step rail: the request-detail rail's construction — [dot][connector] cells over a label row. */
.wiz-rail[b-d2fq5nq6rh] { padding-top: 28px; }
.wiz-rail-dots[b-d2fq5nq6rh] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: 11px;
}
.wiz-rail-cell[b-d2fq5nq6rh] { display: flex; align-items: center; }
.wiz-dot[b-d2fq5nq6rh] { flex: none; border-radius: 50%; box-sizing: border-box; padding: 0; }
.wiz-dot--done[b-d2fq5nq6rh] { width: 9px; height: 9px; background: var(--kg-positive); border: 0; cursor: pointer; }
.wiz-dot--done:focus-visible[b-d2fq5nq6rh] { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
.wiz-dot--current[b-d2fq5nq6rh] { width: 11px; height: 11px; background: var(--kg-page); border: 3px solid var(--kg-positive); }
.wiz-dot--pending[b-d2fq5nq6rh] { width: 9px; height: 9px; background: #c8ced1; }
.wiz-connector[b-d2fq5nq6rh] { flex: 1; height: 1.5px; background: var(--kg-rule-strip); }
.wiz-connector--done[b-d2fq5nq6rh] { background: rgba(47, 107, 79, .35); }
.wiz-rail-labels[b-d2fq5nq6rh] { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; }
.wiz-rail-label[b-d2fq5nq6rh] {
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kg-faint);
}
.wiz-rail-label.is-done[b-d2fq5nq6rh] { color: var(--kg-muted); }
.wiz-rail-label.is-current[b-d2fq5nq6rh] { color: var(--kg-body); }

/* Step heading: the question left, "Pasul N din 5" right, baselines aligned. */
.wiz-content[b-d2fq5nq6rh] { padding-top: 34px; padding-bottom: 8px; }
.wiz-stephead[b-d2fq5nq6rh] { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.wiz-stephead h3[b-d2fq5nq6rh] { margin: 0; font-size: 25px; letter-spacing: -.01em; }
.wiz-stepno[b-d2fq5nq6rh] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.wiz-stepsub[b-d2fq5nq6rh] { margin: 9px 0 0; font-size: 13px; color: var(--kg-secondary); max-width: 70ch; text-wrap: pretty; }

/* Post-approval agreed-price panel (edit mode only — no design counterpart, composed from the layer). */
.wiz-postapproval[b-d2fq5nq6rh] { margin-top: 22px; }
.wiz-postapproval-body[b-d2fq5nq6rh] { margin-top: 18px; }
.wiz-postapproval-rate[b-d2fq5nq6rh] { display: flex; align-items: center; gap: 10px; max-width: 300px; }
.wiz-postapproval-cur[b-d2fq5nq6rh] { font-size: 13px; font-weight: 500; color: var(--kg-secondary); }

/* The one notice slot — the app's warnband, with an info variant for quiet confirmations. */
/* The shared warnband insets itself by the gutter for full-bleed cards; inside the already-padded
   wiz-content that doubled the indent, so it is zeroed here. */
.wiz-notice[b-d2fq5nq6rh] { margin: 20px 0 0; }
/* The draft offer: the app's accent, which is also the colour of the two buttons inside the band —
   one orange in the palette, not a second one invented here. Rules are that accent at alpha, the
   same construction as --kg-rule-warning. */
.wiz-notice--draft[b-d2fq5nq6rh] { border-color: rgba(226, 98, 42, .45); }
.wiz-notice--draft[b-d2fq5nq6rh]::before { background: var(--kg-accent); }
.wiz-notice--info[b-d2fq5nq6rh] { border-color: var(--kg-rule-section); }
.wiz-notice--info[b-d2fq5nq6rh]::before { background: var(--kg-positive); }

.wiz-lockhint[b-d2fq5nq6rh] { margin-top: 20px; }
.wiz-fieldset[b-d2fq5nq6rh] { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz-fieldset.is-locked[b-d2fq5nq6rh] { opacity: .65; }

/* Footer: back link or the required-fields sentence left; the primary pill right. */
.wiz-footer[b-d2fq5nq6rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: 22px 0 40px;
    border-top: 1px solid var(--kg-rule-section);
}
.wiz-prev[b-d2fq5nq6rh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kg-secondary);
    cursor: pointer;
}
.wiz-prev:hover[b-d2fq5nq6rh] { color: var(--kg-ink); }
.wiz-required-note[b-d2fq5nq6rh] { font-size: 12.5px; color: var(--kg-muted); }
.wiz-next[b-d2fq5nq6rh] { padding: 12px 22px; font-size: 14px; }

/* The disabled Next and the reason it is disabled travel together, right-aligned like the submit
   group. The reason is muted, not brick: it states what is still missing on a step the operator may
   not have started yet, which is information, not an error they have made. */
.wiz-nextgroup[b-d2fq5nq6rh] { display: flex; align-items: center; gap: 18px; min-width: 0; }
.wiz-blocked[b-d2fq5nq6rh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--kg-muted);
    text-align: right;
}
.wiz-blocked[b-d2fq5nq6rh]  .kg-icon, .wiz-blocked > svg[b-d2fq5nq6rh] { flex: none; color: var(--kg-warning); }

.wiz-submitgroup[b-d2fq5nq6rh] { display: flex; align-items: center; gap: 22px; }
.wiz-submitnote[b-d2fq5nq6rh] { font-size: 12.5px; color: var(--kg-muted); }
.wiz-submitstatus[b-d2fq5nq6rh] { color: var(--kg-accent-text); font-weight: 500; }

@media (max-width: 767.98px) {
    .wiz-rail-label[b-d2fq5nq6rh] { font-size: 9px; letter-spacing: .08em; }
    .wiz-stephead[b-d2fq5nq6rh] { flex-direction: column; gap: 4px; }
    .wiz-footer[b-d2fq5nq6rh] { flex-wrap: wrap; }
    .wiz-submitgroup[b-d2fq5nq6rh], .wiz-nextgroup[b-d2fq5nq6rh] { flex-direction: column; align-items: flex-end; gap: 10px; }
}
/* /Components/Pages/RequestDetail.razor.rz.scp.css */
/* Request detail — the one bespoke-layout screen (new-design/README.md §3.3). The narrative runs
   down the left; the money sits in one sheet on the right. Shared shapes (context bar, micro-labels,
   status dots, ruled rows, panel, empty state, warning band) come from css/theme.css. */

.rd-page[b-1q9badg6wd] { display: flex; flex-direction: column; min-height: 100%; }

/* ── Action bar ── */
.rd-back[b-1q9badg6wd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kg-secondary);
    text-decoration: none;
}
.rd-back:hover[b-1q9badg6wd] { color: var(--kg-ink); }
/* Worn by <a> AND by <button> (Ajustează prețul). The reset is what makes the button one: written for
   an anchor only, the browser's own control chrome — grey fill, 3D border, system font — showed
   straight through it. */
.rd-barlink[b-1q9badg6wd] {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--kg-secondary);
    text-decoration: none;
    cursor: pointer;
}
.rd-barlink:hover:not(:disabled)[b-1q9badg6wd] { color: var(--kg-ink); text-decoration: underline; text-underline-offset: 4px; }
.rd-barlink:disabled[b-1q9badg6wd] { color: var(--kg-faint); cursor: default; }
/* Says why three controls are absent, in the bar they would have been in. Quieter than a link and
   never mistaken for one — the bill number inside it IS the link. */
/* Plain inline, NOT inline-flex: as a flex box the sentence and the bill number were two items on one
   line, so a narrow phone wrapped the sentence into a column with the link stranded beside it. */
.rd-barnote[b-1q9badg6wd] { font-size: 13px; font-weight: 500; color: var(--kg-faint); }
.rd-actions[b-1q9badg6wd] { gap: 20px; }
.rd-actions .kg-pill[b-1q9badg6wd] { margin-left: 4px; }

/* ── Identity block ── */
.rd-identity[b-1q9badg6wd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 0 0;
}
.rd-identity-main[b-1q9badg6wd] { min-width: 0; }
.rd-identity-side[b-1q9badg6wd] { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
.rd-microline[b-1q9badg6wd] { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.rd-microline .kg-code[b-1q9badg6wd] { font-size: 11.5px; letter-spacing: .1em; }
.rd-sep[b-1q9badg6wd] { color: var(--kg-hairline-ink); margin: 0 2px; }
.rd-subtag[b-1q9badg6wd] { color: var(--kg-accent-text); }
.rd-client[b-1q9badg6wd] { margin: 12px 0 0; text-wrap: balance; }
.rd-legal[b-1q9badg6wd] { margin-top: 10px; font-size: 12.5px; color: var(--kg-muted); }
/* One stamp per line. `align-items: inherit` takes whichever edge the side column is on, so the two
   lines follow it to the left when the narrow breakpoint below flips .rd-identity-side. */
.rd-dates[b-1q9badg6wd] {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 3px;
    font-size: 12.5px;
    color: var(--kg-muted);
    white-space: nowrap;
}

/* ── Progress rail ── */
.rd-rail[b-1q9badg6wd] {
    display: grid;
    grid-template-columns: repeat(var(--rd-steps, 5), 1fr);
    margin-top: 30px;
    padding: 6px 0 0;
}
.rd-step[b-1q9badg6wd] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.rd-step[b-1q9badg6wd]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -50%;
    width: 100%;
    height: 1.5px;
    background: var(--kg-rule-control);
}
.rd-step:first-child[b-1q9badg6wd]::before { display: none; }
.rd-step-dot[b-1q9badg6wd] {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kg-rule-control);
}
.rd-step.is-done .rd-step-dot[b-1q9badg6wd] { background: var(--kg-positive); }
.rd-step.is-done[b-1q9badg6wd]::before, .rd-step.is-active[b-1q9badg6wd]::before { background: var(--kg-positive); }
.rd-step.is-active .rd-step-dot[b-1q9badg6wd] {
    width: 11px;
    height: 11px;
    margin: -1px;
    background: var(--kg-panel);
    border: 3px solid var(--kg-positive);
}
.rd-step.is-negative .rd-step-dot[b-1q9badg6wd] { background: var(--kg-warning); }
.rd-step.is-negative[b-1q9badg6wd]::before { background: var(--kg-warning); }
.rd-step-label[b-1q9badg6wd] { text-align: center; }
.rd-step.is-active .rd-step-label[b-1q9badg6wd] { color: var(--kg-body); }
.rd-step.is-negative .rd-step-label[b-1q9badg6wd] { color: var(--kg-warning); }

/* ── Stat strip: the list screens' strip, but 15px/500 values ── */
/* The key facts, on one rule inside the identity card. No bottom edge: the card's own border is
   already there, and two hairlines 24px apart read as a mistake. */
.rd-strip[b-1q9badg6wd] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* The cells lost the vertical padding that used to separate them — the strip's own top padding
       does that job now — so a WRAPPED row needs the gap stated, or two rows of facts touch. */
    row-gap: 22px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--kg-rule-strip);
}
.rd-strip-cell[b-1q9badg6wd] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 0 22px;
    border-left: 1px solid var(--kg-rule-divider);
}
.rd-strip-cell:first-child[b-1q9badg6wd] { padding-left: 0; border-left: 0; }
.rd-strip-cell:last-child[b-1q9badg6wd] { padding-right: 0; }
.rd-strip-value[b-1q9badg6wd] { font-size: 15px; font-weight: 500; color: var(--kg-ink); overflow-wrap: anywhere; }
.rd-strip-value--money[b-1q9badg6wd] { font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-strip-value .kg-cur[b-1q9badg6wd] { font-size: 12px; }
.rd-arrow[b-1q9badg6wd] { color: var(--kg-faint); }

.rd-cancelled[b-1q9badg6wd] { margin-top: 24px; }
.rd-notfound[b-1q9badg6wd] { margin-top: 26px; }

/* ── Body ── */
/* Unlike the paired cards on the list screens, these two are NOT stretched to a shared height: the
   left is one narrative and the right is a stack of separate cards, so whichever runs shorter should
   simply end rather than trail a hole to the other's floor. */
.rd-body[b-1q9badg6wd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    align-items: start;
    gap: 24px;
    padding: 24px var(--kg-gutter) 44px;
}
/* These take .kg-card for its SHAPE and its --kg-gutter: 0, but not its flex column — that exists so
   a page card's last block can claim a floor, and these have no floor to claim. It is not cosmetic
   here: the sheet and the panels hold inline children (a bare .kg-action, a label span), and each
   would become a stretched flex item. Block flow is what they were written against. */
.rd-main[b-1q9badg6wd],
.rd-panel[b-1q9badg6wd],
.rd-docs[b-1q9badg6wd] { display: block; }

.rd-main[b-1q9badg6wd] { min-width: 0; }
/* The side column stays a STACK of cards, not one card and not a stretched pair: these are separate
   things an admin acts on one at a time, and each is only as tall as it needs to be. */
.rd-side[b-1q9badg6wd] { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.rd-section[b-1q9badg6wd] { margin-bottom: 40px; }
.rd-section:last-child[b-1q9badg6wd] { margin-bottom: 0; }
.rd-section-head[b-1q9badg6wd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.rd-section-meta[b-1q9badg6wd] { font-size: 12.5px; color: var(--kg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The narrative card's section titles — Journey, Cargo, Contact, Price — say what each block IS, and
   at the shared micro size (10.5px, uppercase, tracked out) the owner could not tell at a glance what
   they were reading. A step up in size and one in contrast; the tracking eases off because .14em is
   a lot at 12px. Scoped to .rd-main deliberately: the compact side panels keep the micro, where the
   label sits directly above its one fact and has less work to do. */
.rd-main .rd-section-head .kg-micro[b-1q9badg6wd] {
    font-size: 12px;
    letter-spacing: .11em;
    color: var(--kg-secondary);
}

/* The journey, left to right: one column per stop, markers on a shared line. Pickups are rings,
   drop-offs filled dots. The columns WRAP rather than scroll — a six-stop milk run reads as two rows
   of three at 1440 and one row at 1920, and no stop is ever hidden behind a scrollbar. `overflow:
   hidden` trims the connector where a row breaks, so it runs to the edge and reads as "continues". */
.rd-journey[b-1q9badg6wd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 24px;
    row-gap: 30px;
    overflow: hidden;
}
.rd-stop[b-1q9badg6wd] { position: relative; min-width: 0; }
.rd-stop-track[b-1q9badg6wd] { position: relative; height: 12px; margin-bottom: 14px; }
.rd-stop-track[b-1q9badg6wd]::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: -24px;
    height: 1.5px;
    background: var(--kg-rule-control);
}
.rd-stop.is-last .rd-stop-track[b-1q9badg6wd]::before { display: none; }
.rd-stop-marker[b-1q9badg6wd] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--kg-ink);
    background: var(--kg-panel);
}
.rd-stop.is-dropoff .rd-stop-marker[b-1q9badg6wd] { background: var(--kg-ink); }
.rd-stop-kind[b-1q9badg6wd] { display: block; }
.rd-stop-when[b-1q9badg6wd] { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-top: 8px; }
.rd-stop-date[b-1q9badg6wd] { font-size: 14px; font-weight: 600; color: var(--kg-ink); font-variant-numeric: tabular-nums; }
.rd-stop-time[b-1q9badg6wd] { font-size: 13px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.rd-stop-site[b-1q9badg6wd] { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--kg-ink); text-wrap: pretty; }
.rd-stop-address[b-1q9badg6wd] { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--kg-body); overflow-wrap: anywhere; }
.rd-stop-note[b-1q9badg6wd] { margin-top: 6px; font-size: 12.5px; color: var(--kg-muted); }

.rd-period[b-1q9badg6wd] { font-size: 15px; font-weight: 500; color: var(--kg-ink); }

/* Warehouse trucks: a dense ruled row. */
[b-1q9badg6wd] .rd-truck { --kg-row-cols: 110px minmax(0, 1fr) 150px 80px; font-size: 14px; color: var(--kg-body); }
/* The row's name cell, like .rd-cargo-type below: it carries the ink the other three cells give up. */
.rd-truck-type[b-1q9badg6wd] { font-weight: 500; color: var(--kg-ink); min-width: 0; }
.rd-truck-when[b-1q9badg6wd], .rd-truck-qty[b-1q9badg6wd] { color: var(--kg-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-truck-qty[b-1q9badg6wd] { text-align: right; }

/* Cargo table */
.rd-cargo[b-1q9badg6wd] { margin: 0; }
.rd-cargo-idx[b-1q9badg6wd] { font-size: 12.5px; color: var(--kg-faint); font-variant-numeric: tabular-nums; }
.rd-cargo-type[b-1q9badg6wd] { font-size: 14.5px; font-weight: 500; color: var(--kg-ink); min-width: 0; }
.rd-cargo-qty[b-1q9badg6wd] { margin-left: 4px; font-weight: 500; color: var(--kg-muted); white-space: nowrap; }
.rd-cargo-comment[b-1q9badg6wd] { display: block; font-size: 12.5px; font-weight: 400; color: var(--kg-muted); }
.rd-cargo-num[b-1q9badg6wd] { font-size: 14px; color: var(--kg-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-cargo-stop[b-1q9badg6wd] { font-size: 13px; color: var(--kg-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Two half-columns above a rule. */
.rd-halves[b-1q9badg6wd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--kg-rule-section);
}
.rd-section--half[b-1q9badg6wd] { margin-bottom: 0; min-width: 0; }

/* Definition grid: `96px 1fr`, labels in faint, values 500. */
.rd-defs[b-1q9badg6wd] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px 14px;
    margin: 0;
    font-size: 14px;
}
.rd-defs dt[b-1q9badg6wd] { font-weight: 400; color: var(--kg-faint); }
.rd-defs dd[b-1q9badg6wd] { margin: 0; font-weight: 500; color: var(--kg-ink); overflow-wrap: anywhere; }
.rd-defs dd.is-accepted .rd-terms[b-1q9badg6wd] { color: var(--kg-positive); }
.rd-defs--panel[b-1q9badg6wd] { font-size: 13.5px; gap: 8px 12px; grid-template-columns: 110px minmax(0, 1fr); }
.rd-rate[b-1q9badg6wd] { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-rate .kg-cur[b-1q9badg6wd] { font-size: 12px; }
.rd-terms[b-1q9badg6wd] { font-size: 13px; font-weight: 400; color: var(--kg-muted); }
.rd-struck[b-1q9badg6wd] { text-decoration: line-through; color: var(--kg-muted); font-weight: 400; }
.rd-delta[b-1q9badg6wd] { margin-left: 8px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-note[b-1q9badg6wd] { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--kg-muted); text-wrap: pretty; }
.rd-link[b-1q9badg6wd] { color: var(--kg-ink); text-decoration: none; }
.rd-link:hover[b-1q9badg6wd] { text-decoration: underline; text-underline-offset: 3px; }

/* ── Right column panels ── */
.rd-panel[b-1q9badg6wd] { padding: 24px 26px 22px; border-radius: 14px; }
.rd-panel--actions[b-1q9badg6wd] { border-color: var(--kg-rule-control); }
.rd-panel-head[b-1q9badg6wd] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rd-panel-text[b-1q9badg6wd] { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--kg-secondary); text-wrap: pretty; }
.rd-panel-label[b-1q9badg6wd] { display: block; margin-bottom: 6px; font-size: 12px; color: var(--kg-muted); }
.rd-panel-name[b-1q9badg6wd] { font-size: 15.5px; font-weight: 600; color: var(--kg-ink); }
.rd-panel-actions[b-1q9badg6wd] { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.rd-panel-links[b-1q9badg6wd] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.rd-pill-wide[b-1q9badg6wd] { width: 100%; padding: 11px 18px; font-size: 14px; }
.rd-action--danger[b-1q9badg6wd] { color: var(--kg-warning); }
.rd-action--danger:hover[b-1q9badg6wd] { color: var(--kg-warning); }
.kg-action:disabled[b-1q9badg6wd] { opacity: .5; cursor: default; text-decoration: none; }

.rd-offers[b-1q9badg6wd] { margin-bottom: 14px; }
.rd-offer[b-1q9badg6wd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--kg-rule-divider);
    border-radius: 10px;
    cursor: pointer;
}
.rd-offer.is-on[b-1q9badg6wd] { border-color: var(--kg-accent); background: var(--kg-hover); }
.rd-offer input[b-1q9badg6wd] { margin-top: 3px; accent-color: var(--kg-accent); }
.rd-offer-text[b-1q9badg6wd] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-offer-rate[b-1q9badg6wd] { font-size: 15px; font-weight: 600; color: var(--kg-ink); font-variant-numeric: tabular-nums; }
.rd-offer-rate .kg-cur[b-1q9badg6wd] { font-size: 12px; }
.rd-offer-meta[b-1q9badg6wd] { font-size: 12.5px; color: var(--kg-muted); }
.rd-check[b-1q9badg6wd] { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: 13.5px; color: var(--kg-body); cursor: pointer; }
.rd-check input[b-1q9badg6wd] { margin-top: 3px; accent-color: var(--kg-accent); }
.rd-check-help[b-1q9badg6wd] { display: block; margin-top: 2px; font-size: 12px; color: var(--kg-muted); }

/* The invoice sheet */
.rd-sheet-state[b-1q9badg6wd] { font-size: 12.5px; font-weight: 600; }
.rd-sheet-number[b-1q9badg6wd] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.rd-sheet-dates[b-1q9badg6wd] { margin-top: 4px; font-size: 12.5px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.rd-sheet-amount[b-1q9badg6wd] { margin-top: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-sheet-line[b-1q9badg6wd] { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--kg-body); }
.rd-sheet-line--faint[b-1q9badg6wd] { color: var(--kg-muted); font-size: 12.5px; }
.rd-sheet-line strong[b-1q9badg6wd] { font-weight: 600; color: var(--kg-ink); }
.rd-sheet-check[b-1q9badg6wd] { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.rd-sheet-action[b-1q9badg6wd] { display: block; margin-top: 8px; }
.rd-sheet-shared[b-1q9badg6wd] { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--kg-hover); font-size: 12.5px; color: var(--kg-body); }
/* The link text is the frozen bill-line description (number • reference • route, up to 500
   chars); kg-action's nowrap made it spill past the band and clip at the card edge. Wrap it —
   anywhere, so even an unbroken reference cannot push out of the card. */
.rd-sheet-sibling[b-1q9badg6wd] { display: block; margin-top: 4px; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.rd-ledger[b-1q9badg6wd] { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--kg-rule-divider); }
.rd-ledger-row[b-1q9badg6wd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--kg-rule-divider);
    font-size: 13.5px;
    color: var(--kg-body);
}
.rd-ledger-row .kg-money[b-1q9badg6wd] { font-size: 15px; font-weight: 600; color: var(--kg-ink); }
.rd-ledger-row .kg-money.kg-accent-text[b-1q9badg6wd] { color: var(--kg-accent-text); }
.rd-ledger-row .kg-cur[b-1q9badg6wd] { font-size: 12px; }
.rd-sheet-actions[b-1q9badg6wd] { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kg-rule-divider); }
.rd-sheet-foot[b-1q9badg6wd] { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--kg-faint); text-wrap: pretty; }
.rd-tool[b-1q9badg6wd] { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--kg-rule-divider); }
.rd-tool-title[b-1q9badg6wd] { font-size: 13px; font-weight: 600; color: var(--kg-ink); }
.rd-input[b-1q9badg6wd], .rd-select[b-1q9badg6wd] {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--kg-rule-control);
    border-radius: 8px;
    background: var(--kg-page);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--kg-ink);
}
.rd-input:focus[b-1q9badg6wd], .rd-select:focus[b-1q9badg6wd] { outline: 2px solid var(--kg-accent); outline-offset: 1px; }

/* Empty states (dashed) carry their own micro-label. */
.rd-empty[b-1q9badg6wd] { padding: 18px 20px; }
.rd-empty-label[b-1q9badg6wd] { display: block; margin-bottom: 8px; }
.rd-plate[b-1q9badg6wd] { font-size: 18px; letter-spacing: .08em; color: var(--kg-ink); margin-bottom: 6px; }

/* Documents */
.rd-docs[b-1q9badg6wd] { margin-top: 4px; }
.rd-docs .rd-section-head[b-1q9badg6wd] { margin-bottom: 8px; }
.rd-doctype[b-1q9badg6wd] { display: block; margin: 4px 0 12px; }
.rd-doctype .rd-panel-label[b-1q9badg6wd] { margin-bottom: 0; }
.rd-doclist[b-1q9badg6wd] { margin: 0; }
[b-1q9badg6wd] .rd-doc { --kg-row-cols: 17px minmax(0, 1fr) auto; padding: 12px 14px; }
[b-1q9badg6wd] .rd-doc-icon { color: var(--kg-secondary); }
.rd-doc-text[b-1q9badg6wd] { min-width: 0; }
.rd-doc-name[b-1q9badg6wd] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-doc-meta[b-1q9badg6wd] { margin-top: 2px; font-size: 12px; color: var(--kg-muted); }
.rd-doc-actions[b-1q9badg6wd] { display: flex; gap: 14px; }
.rd-doc-actions .kg-action[b-1q9badg6wd] { font-size: 13px; }
.rd-docs-foot[b-1q9badg6wd] { margin-top: 14px; }

/* Skeleton while the prerender → circuit handoff settles. */
.rd-skel[b-1q9badg6wd] { border-radius: 6px; background: var(--kg-hover); }
.rd-skel--micro[b-1q9badg6wd] { width: 220px; height: 12px; }
.rd-skel--title[b-1q9badg6wd] { width: 420px; max-width: 80%; height: 36px; margin-top: 14px; }
.rd-skel--line[b-1q9badg6wd] { width: 300px; height: 12px; margin-top: 12px; }

/* ── Narrow ── */
@media (max-width: 1199.98px) {
    .rd-body[b-1q9badg6wd] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .rd-side[b-1q9badg6wd] { order: -1; }
    .rd-strip[b-1q9badg6wd] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .rd-strip-cell:last-child[b-1q9badg6wd] { padding-right: 22px; }
}
@media (max-width: 767.98px) {
    .rd-identity[b-1q9badg6wd] { flex-direction: column; }
    .rd-identity-side[b-1q9badg6wd] { align-items: flex-start; }
    .rd-halves[b-1q9badg6wd] { grid-template-columns: 1fr; gap: 32px; }
}

/* A second, quieter line of links under a panel's main action (the subcontracting card's two exits). */
.rd-panel-links--secondary[b-1q9badg6wd] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kg-rule-divider); }

/* The cargo table scrolls inside its own box when the multi-stop columns are present, rather than
   pushing the page (the same rule the list screens use). */
/* The 14px padding matches the ruled row's hover bleed (margin: 0 -14px), so the box only scrolls
   when the columns genuinely do not fit. */
.rd-cargo-scroll[b-1q9badg6wd] { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
[b-1q9badg6wd] .rd-cargo .kg-rowhead,
[b-1q9badg6wd] .rd-cargo .kg-row { min-width: var(--rd-cargo-min, 0); }

/* The parcels riding one truck, on their own line under its row: the row is a grid, so the line
   spans every column rather than becoming a fifth one. */
.rd-truck-load[b-1q9badg6wd] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 2px;
}
.rd-truck-item[b-1q9badg6wd] {
    padding: 2px 8px;
    border: 1px solid var(--kg-rule-control);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--kg-secondary);
    white-space: nowrap;
}
/* /Components/Pages/Subcontractors.razor.rz.scp.css */
/* Subcontractors register — the column set only (Register.razor and css/theme.css own the rest).
   Spec §3.6: 1fr 132px 170px 74px 112px 104px 128px 64px; the 128px Insurance column is absent
   (no insurance data in the app) and the action column is 96px for the overflow menu. */
[b-6goismalo1] .subs-table {
    --kg-row-cols: minmax(0, 1fr) 132px 170px 74px 112px 104px 96px;
}
/* As on Clients: the fixed columns plus the gaps come to 784px, so the theme's 900px row would
   squeeze the carrier's legal name rather than scroll (spec §4). */
[b-6goismalo1] .subs-table .kg-rowhead,
[b-6goismalo1] .subs-table .kg-row { min-width: 1000px; }
/* /Components/Pages/TransportRequestsList.razor.rz.scp.css */
/* Transport requests — scoped layout (new-design/README.md §3.2). The shared shapes (list header,
   tabs, filter row, ruled row, footer) come from css/theme.css; only this screen's column set, its
   day headings and the selection bar live here. */

.requests-page[b-fc565itn6e] { display: flex; flex-direction: column; }

/* Spec §3.2: 104px 1fr 206px 118px 112px 112px 66px, scaled for this app's larger type and its extra
   facts (our own request number, the overflow menu). Below 1060 the table scrolls rather than
   squeezing the client column. */
[b-fc565itn6e] .requests-table {
    --kg-row-cols: 150px minmax(150px, 1fr) 212px 152px 128px 132px 108px;
}
[b-fc565itn6e] .requests-table .kg-rowhead,
[b-fc565itn6e] .requests-table .kg-row { min-width: 1060px; }
/* The widest table in the app: it keeps its scroll box (and the clipping the theme's rule lifts at
   1280) until the page can hold a row without spilling. */
@media (max-width: 1439.98px) { [b-fc565itn6e] .requests-table { overflow-x: auto; } }

/* The one place ellipsis is allowed, with Invoices (spec): the narrow name cell. */
[b-fc565itn6e] .requests-table .kg-name,
[b-fc565itn6e] .requests-table .kg-reg-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Day heading: plain text above the rules — no card, no background. */
[b-fc565itn6e] .requests-day {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 14px 9px;
}
[b-fc565itn6e] .requests-day:not(:first-of-type) { padding-top: 24px; }
[b-fc565itn6e] .requests-day-meta { font-size: 12.5px; color: var(--kg-faint); }

[b-fc565itn6e] .requests-number { display: flex; align-items: center; gap: 10px; min-width: 0; }
[b-fc565itn6e] .requests-check { flex: none; margin: 0; }
[b-fc565itn6e] .requests-route { font-size: 14px; color: var(--kg-body); text-wrap: pretty; }
[b-fc565itn6e] .requests-cargo { font-size: 13.5px; color: var(--kg-secondary); text-wrap: nowrap; }
[b-fc565itn6e] .requests-price { font-size: 15.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
[b-fc565itn6e] .requests-price .kg-cur { margin-left: 4px; font-size: 12px; }
[b-fc565itn6e] .requests-status { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Subcontracted is not a status — a request is subcontracted or not independently of where it sits in
   its lifecycle — so it reads as a different axis: a rail on the row's edge and the carrier's name in
   the meta line, never another badge competing with the status. */
/* Its OWN token, not the rail's --kg-accent-ondark: that one means "accent legible on the dark rail"
   and is free to be retuned on those grounds, which would silently repaint this marker on white. */
[b-fc565itn6e] .requests-table .kg-row.is-subcontracted { box-shadow: inset 3px 0 0 0 var(--kg-subcontracted); }
[b-fc565itn6e] .requests-carrier { color: var(--kg-secondary); }


/* Selection bar: the one fixed element in the app, and only while rows are picked. */
.requests-bulk[b-fc565itn6e] {
    position: fixed;
    left: var(--kg-rail-w);
    right: 0;
    bottom: 0;
    z-index: 1045;
    background: var(--kg-panel);
    border-top: 1px solid var(--kg-rule-strip);
}
.requests-bulk-inner[b-fc565itn6e] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px var(--kg-gutter);
    font-variant-numeric: tabular-nums;
}
.requests-bulk-count[b-fc565itn6e] { font-size: 14px; font-weight: 600; color: var(--kg-ink); }
.requests-bulk-total[b-fc565itn6e] { font-size: 14px; color: var(--kg-secondary); }
.requests-bulk-actions[b-fc565itn6e] { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.requests-bulk-spacer[b-fc565itn6e] { height: 72px; }

@media (max-width: 899.98px) {
    .requests-bulk[b-fc565itn6e] { left: var(--kg-rail-w-narrow); }
}

/* The wizard hands the list one confirmation line; kg-band supplies only the gutter. */
.requests-created[b-fc565itn6e] { padding-top: 14px; padding-bottom: 2px; }

/* The wizard's success line, between the header card and the list card: it needs the air the cards
   keep from each other, which the bare gutter band does not give it. */
.requests-created[b-fc565itn6e] { padding-top: 20px; }

/* The search sits directly under the tabs; the shared 18px reads as crowded here. */
.kg-filterrow[b-fc565itn6e] { padding-top: 28px; }
/* /Components/Pages/VisitorOrderWizard.razor.rz.scp.css */
    .wizard-step-label[b-awrssf5v3h] {
        transition: all 0.2s ease;
        padding: 2px 6px;
        border-radius: 6px;
    }
    .wizard-step-label[style*="cursor: pointer"]:hover[b-awrssf5v3h] {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
        text-decoration: underline;
    }
/* /Components/Shared/DatePicker.razor.rz.scp.css */
.kg-datepicker[b-29pqz5jkn7] {
    position: relative;
    width: 100%;
}

.kg-field[b-29pqz5jkn7] {
    position: relative;
    cursor: pointer;
}

.kg-field-input[b-29pqz5jkn7] {
    cursor: pointer;
    background-color: var(--kg-panel);
    padding-right: 2.2rem;
}

.kg-field-input[b-29pqz5jkn7]::placeholder {
    color: var(--kg-faint);
}

.kg-field-icon[b-29pqz5jkn7] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kg-accent);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
}

/* Transparent click-away layer */
.kg-backdrop[b-29pqz5jkn7] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: transparent;
}

.kg-popover[b-29pqz5jkn7] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1056;
    width: 17rem;
    max-width: 90vw;
    background: var(--kg-panel);
    border: 1px solid var(--kg-rule-divider);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.kg-dp-header[b-29pqz5jkn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.kg-dp-title[b-29pqz5jkn7] {
    font-weight: 700;
    color: var(--kg-ink);
    font-size: 0.95rem;
}

.kg-nav[b-29pqz5jkn7] {
    border: none;
    background: var(--kg-hover);
    border-radius: 0.5rem;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kg-body);
    transition: background-color 0.15s ease;
}

.kg-nav:hover[b-29pqz5jkn7] {
    background: var(--kg-accent);
    color: var(--kg-panel);
}

.kg-nav svg[b-29pqz5jkn7] {
    width: 0.8rem;
    height: 0.8rem;
}

.kg-dp-grid[b-29pqz5jkn7] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.kg-dp-head[b-29pqz5jkn7] {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--kg-faint);
    text-transform: uppercase;
    padding-bottom: 0.25rem;
}

.kg-dp-day[b-29pqz5jkn7] {
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    aspect-ratio: 1 / 1;
    font-size: 0.85rem;
    color: var(--kg-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.kg-dp-day:hover[b-29pqz5jkn7] {
    background: rgba(var(--bs-primary-rgb, 26, 115, 232), 0.12);
}

.kg-dp-day.today[b-29pqz5jkn7] {
    box-shadow: inset 0 0 0 1.5px var(--kg-accent);
    font-weight: 700;
}

.kg-dp-day.selected[b-29pqz5jkn7] {
    background: var(--kg-accent);
    color: var(--kg-panel);
    font-weight: 700;
}

.kg-dp-footer[b-29pqz5jkn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--kg-hover);
    min-height: 1.5rem;
}

.kg-link[b-29pqz5jkn7] {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kg-accent);
}

.kg-link:hover[b-29pqz5jkn7] {
    text-decoration: underline;
}

.kg-link-danger[b-29pqz5jkn7] {
    color: var(--kg-warning);
    margin-left: auto;
}

/* Validation error state */
.kg-field-input.kg-invalid[b-29pqz5jkn7] {
    border-color: var(--kg-warning) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}
/* /Components/Shared/EmailQuoteHint.razor.rz.scp.css */
.email-quote-hint[b-4pp03vlwwc] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* /Components/Shared/TimePicker.razor.rz.scp.css */
.kg-timefield[b-6flw6ugwn8] {
    position: relative;
    display: block;
    width: 100%;
    vertical-align: middle;
}

/* The bordered box reuses form-control/custom-input look; we only re-layout it. */
.kg-tf-box[b-6flw6ugwn8] {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px); /* exact Bootstrap form-control height */
    padding-left: 0.75rem;
    padding-right: 1.9rem; /* room for the clock button */
    background-color: var(--kg-panel);
    cursor: text;
}

.kg-tf-box:focus-within[b-6flw6ugwn8] {
    border-color: var(--kg-accent);
    box-shadow: 0 0 0 2px rgba(var(--kg-accent-rgb), .25);
}

.kg-tf-seg[b-6flw6ugwn8] {
    border: none;
    background: transparent;
    width: 2.5ch;
    min-width: 2.5ch;
    height: 1.5em;       /* clamp to content height so the flex box stays at form-control size */
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: 1;      /* prevent the input's own line metrics from expanding the row */
    font-variant-numeric: normal;
    color: var(--kg-ink);
    outline: none;
}

.kg-tf-seg[b-6flw6ugwn8]::placeholder {
    color: var(--kg-faint);
}

.kg-tf-sep[b-6flw6ugwn8] {
    font-family: inherit;
    font-size: inherit;          /* exactly the HH/MM digit size, never larger */
    font-weight: 400;
    line-height: 1;              /* keep the colon from adding vertical space */
    color: var(--kg-body);
    padding: 0 1px;
    /* The colon glyph rides low in its line box; nudge it up a hair so the two
       dots optically center against the digits. */
    transform: translateY(-0.06em);
    user-select: none;
}

.kg-tf-iconbtn[b-6flw6ugwn8] {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kg-accent);
    cursor: pointer;
    border-radius: 0.35rem;
    line-height: 0;
}

.kg-tf-iconbtn:hover[b-6flw6ugwn8] {
    background: rgba(var(--bs-primary-rgb, 26, 115, 232), 0.12);
}

.kg-tf-iconbtn svg[b-6flw6ugwn8] {
    width: 0.95rem;
    height: 0.95rem;
}

/* Transparent click-away layer */
.kg-backdrop[b-6flw6ugwn8] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: transparent;
}

.kg-popover[b-6flw6ugwn8] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1056;
    width: 15rem;
    max-width: 90vw;
    background: var(--kg-panel);
    border: 1px solid var(--kg-rule-divider);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.kg-tp-label[b-6flw6ugwn8] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--kg-faint);
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.kg-tp-hours[b-6flw6ugwn8] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    margin-bottom: 0.6rem;
}

.kg-tp-mins[b-6flw6ugwn8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.kg-tp-cell[b-6flw6ugwn8] {
    border: none;
    background: var(--kg-hover);
    border-radius: 0.45rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kg-ink);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.kg-tp-cell:hover[b-6flw6ugwn8] {
    background: rgba(var(--bs-primary-rgb, 26, 115, 232), 0.15);
}

.kg-tp-cell.selected[b-6flw6ugwn8] {
    background: var(--kg-accent);
    color: var(--kg-panel);
}

.kg-tp-min[b-6flw6ugwn8] {
    padding: 0.45rem 0;
}

/* Compact variant for the narrow facility truck columns */
.kg-compact[b-6flw6ugwn8] {
    width: 100%;
}

.kg-compact .kg-tf-box[b-6flw6ugwn8] {
    /* Mirror Bootstrap's .form-control-sm so it lines up with a form-control-sm
       DatePicker: the smaller font drives the em-based height, and the corners
       use the matching (less-rounded) sm radius. */
    font-size: 0.875rem;
    height: calc(1.5em + 0.5rem + 2px);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    padding-left: 0.4rem;
    padding-right: 1.6rem;
}

/* Segments/colon inherit the 0.875rem box font, matching the sm DatePicker's digits. */

.kg-compact .kg-tf-iconbtn svg[b-6flw6ugwn8] {
    width: 0.8rem;
    height: 0.8rem;
}

/* Validation error state */
.kg-tf-box.kg-invalid[b-6flw6ugwn8] {
    border-color: var(--kg-warning) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}
/* /Components/Steps/RequestSummaryView.razor.rz.scp.css */
/* ── Client section: aligned definition grid ─────────────────────── */
.kg-field-label[b-w2vbkg7wf0] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .2rem;
}

.kg-field-value[b-w2vbkg7wf0] {
    display: block;
    font-weight: 600;
    color: #212529;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Stretch each cell to its row's height so the thin separators line up across
   the row regardless of value length — gives the grid a clean, aligned rhythm. */
.kg-client-grid > [class*="col-"][b-w2vbkg7wf0] {
    border-bottom: 1px solid #f1f1f4;
    padding-bottom: .65rem;
}
/* /Components/Steps/ServiceTypeStep.razor.rz.scp.css */
.service-card[b-5byo7ft7zb] {
    transition: all 0.3s ease;
}
.service-card:hover[b-5byo7ft7zb] {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
/* /Components/Wizard/WizardCargoStep.razor.rz.scp.css */
/* Step 3 — Marfă: the one-panel cargo table. Columns per the design, hover bleed via the ±14px
   margin trick the app's ruled rows use. */

.wcg[b-5afbj7hrqq] { margin-top: 26px; }
.wcg-panel[b-5afbj7hrqq] { font-variant-numeric: tabular-nums; padding-bottom: 22px; }

.wcg-grid[b-5afbj7hrqq] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 74px 168px 92px 96px 30px;
    gap: 14px;
    align-items: center;
}
.wcg-headrow[b-5afbj7hrqq] { padding: 0 14px 9px; margin: 0 -14px; border-bottom: 1px solid var(--kg-rule-strip); }
.wcg-right[b-5afbj7hrqq] { text-align: right; }

.wcg-line[b-5afbj7hrqq] { padding: 18px 14px; margin: 0 -14px; border-bottom: 1px solid var(--kg-rule-row); }
.wcg-line--broken[b-5afbj7hrqq] { box-shadow: inset 2px 0 0 var(--kg-warning); }
.wcg-num[b-5afbj7hrqq] { font-family: var(--kg-font-mono); font-weight: 500; font-size: 12px; color: var(--kg-muted); }

.wcg-dims[b-5afbj7hrqq] { display: flex; align-items: center; gap: 6px; }
.wcg-x[b-5afbj7hrqq] { color: var(--kg-hairline-ink); font-size: 12px; flex: none; }
.wcg-weight[b-5afbj7hrqq] { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
[b-5afbj7hrqq] .wcg-kg { width: 52px; flex: none; }
.wcg-unit[b-5afbj7hrqq] { font-size: 12px; font-weight: 400; color: var(--kg-muted); }
.wcg-vol[b-5afbj7hrqq] { text-align: right; font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.wcg-vol--none[b-5afbj7hrqq] { color: var(--kg-hairline-ink); }
.wcg-del[b-5afbj7hrqq] {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kg-faint);
    cursor: pointer;
}
.wcg-del:hover[b-5afbj7hrqq] { color: var(--kg-warning); }

/* The missing inputs on an incomplete line — the words live in the sentence beneath. */
[b-5afbj7hrqq] .wcg-miss { border-color: rgba(179, 49, 28, .45); }

/* Second row: the stop binding, indented under the type column. */
.wcg-bindrow[b-5afbj7hrqq] {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-left: 48px;
}
.wcg-bind[b-5afbj7hrqq] { display: flex; align-items: center; gap: 9px; }
.wcg-bindlabel[b-5afbj7hrqq] { margin-bottom: 0; }
.wcg-ldm[b-5afbj7hrqq] { font-size: 13px; font-weight: 600; color: var(--kg-body); }
.wcg-note[b-5afbj7hrqq] { margin-left: auto; font-size: 12.5px; }
.wcg-note-val[b-5afbj7hrqq] { color: var(--kg-body); }
.wcg-noterow[b-5afbj7hrqq] { margin-top: 12px; padding-left: 48px; max-width: 560px; }

.wcg-brokenrow[b-5afbj7hrqq] { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-left: 48px; }
.wcg-brokendel[b-5afbj7hrqq] { font-size: 12.5px; }

.wcg-addrow[b-5afbj7hrqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
}
.wcg-addrow .kg-action[b-5afbj7hrqq] { font-size: 13px; }
.wcg-addnote[b-5afbj7hrqq] { font-size: 12.5px; color: var(--kg-muted); }

/* Total: the same grid above a .24 rule, baseline-aligned. */
.wcg-totalrow[b-5afbj7hrqq] {
    align-items: baseline;
    margin: 22px -14px 0;
    padding: 16px 14px 0;
    border-top: 1px solid var(--kg-rule-total);
}
.wcg-totalnote[b-5afbj7hrqq] { font-size: 12.5px; color: var(--kg-muted); }
.wcg-blocknote[b-5afbj7hrqq] { color: var(--kg-warning); }
.wcg-totalldm[b-5afbj7hrqq] { font-size: 12.5px; color: var(--kg-muted); white-space: nowrap; }
.wcg-totalfig[b-5afbj7hrqq] { font-size: 16px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }

/* Below ~1100 the table scrolls sideways rather than squeezing inputs (spec responsive rule). */
@media (max-width: 1099.98px) {
    .wcg-panel[b-5afbj7hrqq] { overflow-x: auto; }
    .wcg-grid[b-5afbj7hrqq] { min-width: 900px; }
    .wcg-bindrow[b-5afbj7hrqq], .wcg-noterow[b-5afbj7hrqq], .wcg-brokenrow[b-5afbj7hrqq] { min-width: 900px; }
}
/* /Components/Wizard/WizardClientStep.razor.rz.scp.css */
/* Step 1 — Client: the lookup row and the three panels' internal grids. */

.wcl-lookup[b-jn66dqoodg] { display: flex; align-items: center; gap: 10px; max-width: 760px; margin-top: 22px; }
.wcl-lookup-field[b-jn66dqoodg] { position: relative; flex: 1; }
.wcl-lookup-field[b-jn66dqoodg]  .kg-icon,
.wcl-lookup-field > svg[b-jn66dqoodg] { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--kg-muted); pointer-events: none; }
.wcl-lookup-in[b-jn66dqoodg] { padding: 11px 16px 11px 40px; }
/* Shown only for a code with no country prefix — see NeedsCountryChoice. */
.wcl-lookup-country[b-jn66dqoodg] { flex: none; width: auto; min-width: 150px; padding-top: 11px; padding-bottom: 11px; }
.wcl-lookup-btn[b-jn66dqoodg] { flex: none; padding: 11px 22px; }
.wcl-lookup-err[b-jn66dqoodg] { margin-top: 10px; }
.wcl-manual-link[b-jn66dqoodg] { margin-top: 8px; display: inline-block; }

/* Name matches, as the app's own menu directly under the lookup. */
.wcl-matches[b-jn66dqoodg] { display: block; }
.wcl-matches-menu[b-jn66dqoodg] { position: relative; top: 8px; left: 0; max-width: 460px; }
/* .kg-menu-item is nowrap — sized for the two-word items of a filter menu. A firm's FULL legal name
   is neither, and against this list's 460px cap it ran straight out of the bordered box instead of
   wrapping inside it. Re-flowed here only: the filter menus still want their single-line items.
   overflow-wrap covers the other half of it — one unbroken 40-character word has no space to wrap at. */
.wcl-matches-menu[b-jn66dqoodg]  .kg-menu-item { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
[b-jn66dqoodg] .wcl-match-meta { display: block; font-size: 11.5px; color: var(--kg-faint); margin-top: 2px; }

/* Panel 1 — the result. */
.wcl-firm[b-jn66dqoodg] { margin-top: 24px; }
.wcl-firm-status[b-jn66dqoodg] { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
[b-jn66dqoodg] .wcl-check { color: var(--kg-positive); flex: none; }
.wcl-status-line[b-jn66dqoodg] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.wcl-status-line--ok[b-jn66dqoodg] { color: var(--kg-positive); }
.wcl-sep[b-jn66dqoodg] { color: var(--kg-hairline-ink); }
.wcl-status-detail[b-jn66dqoodg] { font-size: 12.5px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.wcl-correct[b-jn66dqoodg] { font-size: 13px; }

/* The two definition ledgers, side by side. */
.wcl-ledger[b-jn66dqoodg] { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 16px; }
.wcl-ledger-msgs[b-jn66dqoodg]  .validation-message { display: block; margin-top: 8px; }

/* Manual mode: the same panel, inputs instead of facts. */
.wcl-manual[b-jn66dqoodg] { margin-top: 20px; }
.wcl-grid3[b-jn66dqoodg] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.wcl-grid2[b-jn66dqoodg] { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.wcl-span2[b-jn66dqoodg] { grid-column: span 2; }
.wcl-span3[b-jn66dqoodg] { grid-column: span 3; }
.wcl-body[b-jn66dqoodg] { margin-top: 20px; }

@media (max-width: 1099.98px) {
    .wcl-ledger[b-jn66dqoodg] { grid-template-columns: 1fr; gap: 0; }
    .wcl-grid3[b-jn66dqoodg] { grid-template-columns: 1fr 1fr; }
    .wcl-span2[b-jn66dqoodg] { grid-column: span 2; }
    .wcl-span3[b-jn66dqoodg] { grid-column: span 2; }
}
@media (max-width: 767.98px) {
    .wcl-grid3[b-jn66dqoodg], .wcl-grid2[b-jn66dqoodg] { grid-template-columns: 1fr; }
    .wcl-span2[b-jn66dqoodg] { grid-column: auto; }
    .wcl-span3[b-jn66dqoodg] { grid-column: auto; }
    .wcl-lookup[b-jn66dqoodg] { flex-direction: column; align-items: stretch; }
}

/* Reveal link under the contact name — subordinate to the field above it, not a peer action. */
.wcl-addmailing[b-jn66dqoodg] { margin-top: 9px; font-size: 13px; }
/* /Components/Wizard/WizardPriceStep.razor.rz.scp.css */
/* Step 4 — Preț: the context line, the Archivo rate input, and the offers grid. */

/* One flex row on a soft tint — not a panel; it states, it doesn't ask. */
.wpr-context[b-hd2sytqp9c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 12px;
    background: rgba(20, 24, 27, .045);
    font-size: 13px;
    color: var(--kg-secondary);
}
.wpr-context-label[b-hd2sytqp9c] { margin-bottom: 0; }
.wpr-route[b-hd2sytqp9c] { font-weight: 600; color: var(--kg-body); }
.wpr-arrow[b-hd2sytqp9c] { color: var(--kg-hairline-ink); font-weight: 400; padding: 0 4px; }
.wpr-sep[b-hd2sytqp9c] { color: var(--kg-hairline-ink); }

/* The rate, display-sized: the one number this step exists for. */
.wpr-base[b-hd2sytqp9c] { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
[b-hd2sytqp9c] .wpr-rate {
    width: 180px;
    padding: 12px 18px;
    font-family: var(--kg-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
/* No ch cap: the sentence fits the panel on one line at normal widths, and a 74ch clamp broke it
   over two while the space beside it sat empty. It still wraps when the panel is genuinely narrow. */
.wpr-vat[b-hd2sytqp9c] { margin-top: 16px; line-height: 1.6; }

.wpr-offers-head[b-hd2sytqp9c] { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.wpr-count[b-hd2sytqp9c] { font-size: 12.5px; color: var(--kg-faint); white-space: nowrap; }

/* One column per offer, split by hairlines; first flush left, last flush right. */
.wpr-offers[b-hd2sytqp9c] { display: grid; grid-template-columns: repeat(var(--wpr-cols, 3), 1fr); font-variant-numeric: tabular-nums; }
.wpr-offer[b-hd2sytqp9c] { padding: 20px 24px; border-left: 1px solid var(--kg-rule-divider); min-width: 0; }
.wpr-offer:first-child[b-hd2sytqp9c] { padding-left: 0; border-left: 0; }
.wpr-offer:last-child[b-hd2sytqp9c] { padding-right: 0; }

.wpr-offer-head[b-hd2sytqp9c] { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 16px; }
.wpr-offer-name[b-hd2sytqp9c] {
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kg-muted);
}
.wpr-offer-del[b-hd2sytqp9c] { font-size: 12.5px; }

.wpr-termsel[b-hd2sytqp9c] { margin-bottom: 16px; }
[b-hd2sytqp9c] .wpr-customdays { margin-top: 10px; }
.wpr-discount[b-hd2sytqp9c] { margin-bottom: 18px; }
[b-hd2sytqp9c] .wpr-seg { padding: 7px 13px; font-size: 12px; }

.wpr-net[b-hd2sytqp9c] { padding-top: 16px; border-top: 1px solid var(--kg-rule-row); }
.wpr-net .kg-flabel[b-hd2sytqp9c] { margin-bottom: 7px; }
.wpr-net-fig[b-hd2sytqp9c] { font-size: 19px; font-weight: 600; color: var(--kg-ink); }
.wpr-net-cur[b-hd2sytqp9c] { font-size: 12.5px; font-weight: 400; color: var(--kg-secondary); }

.wpr-add[b-hd2sytqp9c] { display: flex; align-items: center; gap: 16px; padding-top: 18px; }
.wpr-add .kg-action[b-hd2sytqp9c] { font-size: 13px; }
.wpr-add-hint[b-hd2sytqp9c] { font-size: 12.5px; color: var(--kg-muted); }

@media (max-width: 1099.98px) {
    .wpr-offers[b-hd2sytqp9c] { grid-template-columns: 1fr; }
    .wpr-offer[b-hd2sytqp9c] { padding: 20px 0; border-left: 0; border-top: 1px solid var(--kg-rule-divider); }
    .wpr-offer:first-child[b-hd2sytqp9c] { border-top: 0; padding-top: 20px; }
}
/* /Components/Wizard/WizardReviewStep.razor.rz.scp.css */
/* Step 5 — Revizuire: the four read-only panels. */

.wrv[b-gzh28p2wst] { margin-top: 26px; font-variant-numeric: tabular-nums; }

.wrv-head-id[b-gzh28p2wst] { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.wrv-stepno[b-gzh28p2wst] {
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kg-muted);
    white-space: nowrap;
}
.wrv-headline[b-gzh28p2wst] { font-size: 16px; font-weight: 600; color: var(--kg-ink); }
.wrv-headnote[b-gzh28p2wst] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.wrv-nowrap[b-gzh28p2wst] { white-space: nowrap; }
.wrv-arrow[b-gzh28p2wst] { color: var(--kg-hairline-ink); font-weight: 400; padding: 0 5px; }
.wrv-dash[b-gzh28p2wst] { color: var(--kg-hairline-ink); }
.wrv-right[b-gzh28p2wst] { text-align: right; }
.wrv-strong[b-gzh28p2wst] { font-weight: 600; color: var(--kg-ink); }
.wrv-cell[b-gzh28p2wst] { font-size: 13px; color: var(--kg-body); }
.wrv-num[b-gzh28p2wst] { font-family: var(--kg-font-mono); font-weight: 500; font-size: 12px; color: var(--kg-muted); }

/* 1 · Client: three 2-row ledgers. */
.wrv-client[b-gzh28p2wst] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; padding-top: 10px; --kg-def-label: 104px; }

/* 2 · Rută: one column per stop, marker + connector on a shared 13px line. */
.wrv-route[b-gzh28p2wst] { display: grid; grid-template-columns: repeat(var(--wrv-stops, 3), 1fr); padding-top: 24px; }
.wrv-stop[b-gzh28p2wst] { padding-right: 28px; min-width: 0; }
.wrv-stop--last[b-gzh28p2wst] { padding-right: 0; }
.wrv-track[b-gzh28p2wst] { display: flex; align-items: center; height: 13px; }
.wrv-marker[b-gzh28p2wst] { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; flex: none; }
.wrv-marker--load[b-gzh28p2wst] { background: var(--kg-panel); border: 3px solid var(--kg-positive); }
.wrv-marker--drop[b-gzh28p2wst] { background: var(--kg-ink); }
.wrv-connector[b-gzh28p2wst] { flex: 1; height: 1.5px; background: var(--kg-rule-control); }
.wrv-kind[b-gzh28p2wst] {
    margin: 14px 0 8px;
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kg-ink);
}
.wrv-kind--load[b-gzh28p2wst] { color: var(--kg-positive); }
.wrv-stop-name[b-gzh28p2wst] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); }
.wrv-stop-type[b-gzh28p2wst] { font-size: 12px; font-weight: 400; color: var(--kg-muted); }
.wrv-stop-addr[b-gzh28p2wst] { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--kg-body); overflow-wrap: anywhere; }
.wrv-stop-when[b-gzh28p2wst] { margin-top: 9px; font-size: 13px; color: var(--kg-body); }
.wrv-when-window[b-gzh28p2wst] { color: var(--kg-muted); }
.wrv-overnight[b-gzh28p2wst] { font-size: 12.5px; color: var(--kg-notice); }   /* same amber as the route step: a fact, not a fault */
.wrv-stop-ref[b-gzh28p2wst] { margin-top: 6px; font-size: 12.5px; color: var(--kg-muted); }

/* 3 · Marfă. */
.wrv-cargo[b-gzh28p2wst] { padding-top: 14px; }
.wrv-cargo-grid[b-gzh28p2wst] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 150px 80px 82px 76px 180px;
    gap: 14px;
    align-items: center;
}
.wrv-cargo-head[b-gzh28p2wst] { padding-bottom: 9px; border-bottom: 1px solid var(--kg-rule-row); }
.wrv-cargo-row[b-gzh28p2wst] { padding: 14px 0; }
.wrv-cargo-row + .wrv-cargo-row[b-gzh28p2wst] { border-top: 1px solid var(--kg-rule-row); }
.wrv-type[b-gzh28p2wst] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.wrv-cargo-info[b-gzh28p2wst] { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 12.5px; color: var(--kg-muted); }
.wrv-cargo-block[b-gzh28p2wst] { margin-top: 14px; }

/* 4 · Preț. */
.wrv-price[b-gzh28p2wst] { padding-top: 14px; }
.wrv-price-grid[b-gzh28p2wst] {
    display: grid;
    grid-template-columns: 104px 130px 116px minmax(0, 1fr) 132px;
    gap: 14px;
    align-items: center;
}
.wrv-price-head[b-gzh28p2wst] { padding-bottom: 9px; border-bottom: 1px solid var(--kg-rule-row); }
.wrv-price-row[b-gzh28p2wst] { padding: 13px 0; border-bottom: 1px solid var(--kg-rule-row); }
/* NOT :last-of-type — the last DIV in .wrv-price is .wrv-price-total, so that selector matched
   nothing, the final offer row kept its rule, and the total's own rule landed 4px under it: two
   lines closing the section. Match the row that actually precedes the total instead. */
.wrv-price-row:has(+ .wrv-price-total)[b-gzh28p2wst] { border-bottom: 0; }
.wrv-offer-id[b-gzh28p2wst] {
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kg-muted);
}
.wrv-price-total[b-gzh28p2wst] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--kg-rule-total);
    font-size: 12.5px;
    color: var(--kg-muted);
}
.wrv-price-when[b-gzh28p2wst] { font-size: 13px; white-space: nowrap; }

/* Below ~1100 the route stacks vertically — the same construction as the detail page's journey. */
@media (max-width: 1099.98px) {
    .wrv-client[b-gzh28p2wst] { grid-template-columns: 1fr; gap: 0; }
    .wrv-route[b-gzh28p2wst] { grid-template-columns: 1fr; }
    .wrv-stop[b-gzh28p2wst] { padding-right: 0; padding-bottom: 24px; }
    .wrv-cargo[b-gzh28p2wst], .wrv-price[b-gzh28p2wst] { overflow-x: auto; }
    .wrv-cargo-grid[b-gzh28p2wst], .wrv-price-grid[b-gzh28p2wst] { min-width: 780px; }
}
/* /Components/Wizard/WizardRouteStep.razor.rz.scp.css */
/* Step 2 — Rută: the summary strip and the spacing around the stop panels. */

/* Three cells between two .14 rules; a fourth (Distanță) is reserved for the routing source. */
.wrt-strip[b-x51m7pdipf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24px;
    border-top: 1px solid var(--kg-rule-strip);
    border-bottom: 1px solid var(--kg-rule-strip);
    font-variant-numeric: tabular-nums;
}
.wrt-cell[b-x51m7pdipf] { padding: 16px 22px; border-left: 1px solid var(--kg-rule-divider); }
.wrt-cell:first-child[b-x51m7pdipf] { padding-left: 0; border-left: 0; }
.wrt-cell:last-child[b-x51m7pdipf] { padding-right: 0; }
.wrt-cell .kg-flabel[b-x51m7pdipf] { margin-bottom: 9px; }
.wrt-val[b-x51m7pdipf] { font-size: 15px; font-weight: 500; color: var(--kg-body); }
.wrt-arrow[b-x51m7pdipf] { color: var(--kg-hairline-ink); padding: 0 4px; }

.wrt-stops[b-x51m7pdipf] { margin-top: 30px; }

/* PROGRAM row inside each stop panel: date narrow, the rest sharing. */
[b-x51m7pdipf] .wrt-prog {
    display: grid;
    /* Date, from and to are fixed and narrow: a time picker never needs to be wider than a time.
       The reference then sits beside them instead of being flung to the far right by a 1fr, and
       the trailing free track absorbs the rest of the row. */
    grid-template-columns: 150px 108px 108px minmax(200px, 340px) minmax(0, 1fr);
    gap: 20px;
    align-items: end;
}
[b-x51m7pdipf] .wrt-progmsgs .validation-message { margin-top: 6px; }
/* An overnight window is a fact, not a fault: amber, not the warning red. */
[b-x51m7pdipf] .wrt-overnight { margin-top: 14px; font-variant-numeric: tabular-nums; color: var(--kg-notice); }
[b-x51m7pdipf] .wrt-overnight::before { background: var(--kg-notice); }

/* Add-stop line: the note left, the two accent links right, above the footer rule. */
/* Between the extra stops and the primary delivery, so a new card lands right above the button that
   made it. The bottom margin is not optional: the delivery panel used to take its top margin from
   `.kg-wpanel + .kg-wpanel`, and this row now stands between the two panels, so that rule no longer
   matches and the panel would sit flush against the buttons. */
.wrt-add[b-x51m7pdipf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--kg-rule-section);
}
.wrt-add-note[b-x51m7pdipf] { font-size: 12.5px; color: var(--kg-muted); max-width: 56ch; text-wrap: pretty; }
.wrt-add-links[b-x51m7pdipf] { display: flex; align-items: center; gap: 18px; flex: none; }
.wrt-add-links .kg-action[b-x51m7pdipf] { font-size: 13px; }

@media (max-width: 1099.98px) {
    [b-x51m7pdipf] .wrt-prog { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .wrt-strip[b-x51m7pdipf] { grid-template-columns: 1fr; }
    .wrt-cell[b-x51m7pdipf] { padding: 12px 0; border-left: 0; border-top: 1px solid var(--kg-rule-divider); }
    .wrt-cell:first-child[b-x51m7pdipf] { border-top: 0; }
    .wrt-add[b-x51m7pdipf] { flex-direction: column; align-items: flex-start; }
}
/* /Components/Wizard/WizardStopPanel.razor.rz.scp.css */
/* One stop panel — the tinted header band and its two-halves body (new-design §5). The panel shell,
   inputs, labels and hints are the shared wizard form layer in theme.css. */

.wsp[b-5kgheyly32] { margin-bottom: 20px; }

/* Header band, tinted by kind. It rounds its own top corners (15px = the panel's 16px radius less its
   1px border) rather than being clipped by the panel: the panel must NOT clip, or the date/time
   popovers that open inside it are cut off at its edge. */
.wsp-head[b-5kgheyly32] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 22px;
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid var(--kg-rule-divider);
}
.wsp-head--load[b-5kgheyly32] { background: rgba(47, 107, 79, .08); }
.wsp-head--drop[b-5kgheyly32] { background: rgba(20, 24, 27, .06); }

.wsp-head-id[b-5kgheyly32] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wsp-marker[b-5kgheyly32] { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: none; }
.wsp-marker--load[b-5kgheyly32] { background: var(--kg-panel); border: 3px solid var(--kg-positive); }
.wsp-marker--drop[b-5kgheyly32] { background: var(--kg-ink); }
.wsp-kind[b-5kgheyly32] {
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 13px;   /* was 10.5: the kind label is how the operator tells a load from an unload at a glance */
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wsp-head--load .wsp-kind[b-5kgheyly32] { color: var(--kg-positive); }
.wsp-head--drop .wsp-kind[b-5kgheyly32] { color: var(--kg-ink); }
.wsp-city[b-5kgheyly32] { font-size: 15px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-added[b-5kgheyly32] { font-size: 12px; color: var(--kg-muted); white-space: nowrap; }

.wsp-head-actions[b-5kgheyly32] { display: flex; align-items: center; gap: 18px; flex: none; }
.wsp-actlink[b-5kgheyly32] { font-size: 13px; }
[b-5kgheyly32] .wsp-menu { min-width: 260px; max-height: 320px; overflow-y: auto; }
.wsp-menu-empty[b-5kgheyly32] { padding: 8px 10px; font-size: 13px; color: var(--kg-muted); }
[b-5kgheyly32] .wsp-menu-meta { display: block; font-size: 11.5px; color: var(--kg-faint); }
[b-5kgheyly32] .wsp-menu-save { border-top: 1px solid var(--kg-rule-divider); border-radius: 0; color: var(--kg-accent-text); font-weight: 600; }

.wsp-body[b-5kgheyly32] { padding: 20px 22px 22px; }
.wsp-spin[b-5kgheyly32] { width: 11px; height: 11px; margin-left: 8px; border-width: 1.5px; color: var(--kg-muted); vertical-align: middle; }

/* LOCAȚIE: three columns, then the two-column address row. */
.wsp-grid3[b-5kgheyly32] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 20px; }
.wsp-grid2[b-5kgheyly32] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }

/* PROGRAM: the one rule allowed inside a panel — one subject split into its two halves. */
.wsp-program[b-5kgheyly32] { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kg-rule-divider); }

@media (max-width: 1099.98px) {
    .wsp-grid3[b-5kgheyly32] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .wsp-grid3[b-5kgheyly32], .wsp-grid2[b-5kgheyly32] { grid-template-columns: 1fr; }
    .wsp-head[b-5kgheyly32] { flex-wrap: wrap; }
}