/* /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-urii4ujaqy] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kg-page);
}

.landing-navbar[b-urii4ujaqy] {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--kg-page);
    border-bottom: 1px solid var(--kg-rule-section);
}
.landing-navbar-inner[b-urii4ujaqy] {
    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-urii4ujaqy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--kg-ink);
    text-decoration: none;
}
.landing-brand-name[b-urii4ujaqy] {
    font-family: var(--kg-font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.landing-brand:hover[b-urii4ujaqy] { color: var(--kg-ink); }

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

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

@media (max-width: 767.98px) {
    .landing-nav-toggle[b-urii4ujaqy] { display: inline-flex; }
    .landing-nav-collapse[b-urii4ujaqy] { display: none; width: 100%; }
    .landing-nav-toggle-cb:checked ~ .landing-nav-collapse[b-urii4ujaqy] { display: block; }
    .landing-nav[b-urii4ujaqy] { 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-hr1b98nh5e] {
    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-hr1b98nh5e] {
    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-hr1b98nh5e] {
        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-6eqsrubmz6],
.components-reconnect-repeated-attempt-visible[b-6eqsrubmz6],
.components-reconnect-failed-visible[b-6eqsrubmz6],
.components-pause-visible[b-6eqsrubmz6],
.components-resume-failed-visible[b-6eqsrubmz6],
.components-rejoining-animation[b-6eqsrubmz6] {
    display: none;
}

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


#components-reconnect-modal[b-6eqsrubmz6] {
    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-6eqsrubmz6 0.5s both;
    &[open]

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

}

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

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

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

@keyframes components-reconnect-modal-fadeInOpacity-b-6eqsrubmz6 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-6eqsrubmz6 {
    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/AccountSettingsScreen.razor.rz.scp.css */
/* Account settings — the screen's own layout (docs/design/settings/README.md). The panels, fields,
   pills, tags, tab strip and save bar are the shared classes in theme.css; this file holds only
   the grids and the few one-off blocks the six tabs need. Child components (InputText, Icon,
   InputFile…) render their own elements, which a scoped sheet reaches only through ::deep under a
   page-owned wrapper — hence the ::deep on the icon and validation rules. */

.st[b-x99nmjcn4c] { display: flex; flex-direction: column; min-height: 100%; }
/* The inactive tab panels and the folded password form carry the hidden attribute; a display rule
   on the element (a flex form, a pill) must never win over it. */
[hidden][b-x99nmjcn4c] { display: none !important; }

/* Context bar (§3): micro-label left, who is signed in right. */
.st-ctx[b-x99nmjcn4c] { padding: 18px var(--kg-gutter); }
.st-ctx-user[b-x99nmjcn4c] { font-size: 12.5px; color: var(--kg-muted); }
.st-ctx-user strong[b-x99nmjcn4c] { font-weight: 500; color: var(--kg-body); }

/* Heading and lede, the strip, then the panels (§3). */
.st-head[b-x99nmjcn4c] { padding-top: 30px; }
.st-head h2[b-x99nmjcn4c] { margin: 0; font-size: 32px; }
.st-lede[b-x99nmjcn4c] { margin: 8px 0 0; font-size: 13.5px; color: var(--kg-secondary); }
.st-strip[b-x99nmjcn4c] { padding-top: 22px; }
.st-panels[b-x99nmjcn4c] { padding-top: 24px; }
.st-spacer[b-x99nmjcn4c] { height: 26px; }

/* Feedback: one sentence in positive with a check, or the inline warning line — never a box. */
.st-ok[b-x99nmjcn4c] { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 13px; color: var(--kg-positive); }
.st-ok[b-x99nmjcn4c]  .kg-icon { flex: none; }
.st-warn[b-x99nmjcn4c] { margin: 0 0 18px; }
.st-note[b-x99nmjcn4c] { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--kg-muted); }
.st-note[b-x99nmjcn4c]  .kg-icon { flex: none; margin-top: 2px; }

/* Panel bodies and field grids. The wizard panel's header carries no bottom margin of its own. */
.st-body[b-x99nmjcn4c] { margin-top: 20px; }
.st-body--tight[b-x99nmjcn4c] { margin-top: 18px; }
.st-gap[b-x99nmjcn4c] { margin-top: 18px; }
.st-grid2[b-x99nmjcn4c] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-grid3[b-x99nmjcn4c] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.st-grid-bank[b-x99nmjcn4c] { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.st-grid-series[b-x99nmjcn4c] { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.st-grid-series .st-note[b-x99nmjcn4c] { padding-top: 24px; }
/* Under Local the note is the third item: a row of its own across the card, not a 220 px column beside nothing. */
.st-grid-series .st-note--row[b-x99nmjcn4c] { grid-column: 1 / -1; padding-top: 0; }

/* A Romanian issuer on Local: the ANAF fill under the CUI, the per-currency accounts, the readiness list. */
.st-anaf[b-x99nmjcn4c] { margin-top: 10px; }
.st-billing-tag[b-x99nmjcn4c] { margin-left: 10px; vertical-align: 1px; cursor: help; }
.st-cur[b-x99nmjcn4c] { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--kg-rule-divider); }
.st-cur-row[b-x99nmjcn4c] { display: grid; grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr); gap: 12px; align-items: center; }
.st-cur-code[b-x99nmjcn4c] { font-family: var(--kg-font-mono); font-size: 11px; letter-spacing: .1em; color: var(--kg-body); }
.st-ready[b-x99nmjcn4c] { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; font-size: 13px; line-height: 1.45; }
.st-ready li[b-x99nmjcn4c] { position: relative; padding-left: 17px; }
.st-ready li[b-x99nmjcn4c]::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; }
.st-ready .is-ok[b-x99nmjcn4c]::before { background: var(--kg-positive); }
.st-ready .is-gap[b-x99nmjcn4c]::before { background: var(--kg-warning); }
.st-ready .is-info[b-x99nmjcn4c] { color: var(--kg-muted); }
.st-ready .is-info[b-x99nmjcn4c]::before { background: var(--kg-faint); }

/* Read-only role on the profile: a tag and a qualifier, on the input row's height. */
.st-role[b-x99nmjcn4c] { display: flex; align-items: center; gap: 10px; padding: 10px 0; }

/* Password (§5): one row — the fact left, the action right — and the form that unfolds under it. */
.st-pwrow[b-x99nmjcn4c] { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; }
.st-pwrow-title[b-x99nmjcn4c] { font-size: 14px; font-weight: 500; color: var(--kg-ink); }
.st-pwrow-sub[b-x99nmjcn4c] { margin-top: 3px; font-size: 12.5px; color: var(--kg-muted); }
.st-pwform[b-x99nmjcn4c] { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kg-rule-row); }
/* Right-aligned so the pair reads as the form's actions, under the last field, rather than looking
   like it belongs to the current-password column it used to sit beneath. */
.st-pwform-actions[b-x99nmjcn4c] { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 18px; }
/* Reveal toggle: the button sits inside the field box, so the input keeps its own padding on the right.
   The reserve is sized for the LONGEST label, which is Romanian ("Ascunde", ~45px + 16px padding + the 8px
   offset) and not English ("Hide"). Romanian is the default culture, so sizing to "Hide" put the tail of a
   revealed password underneath a transparent button for every default-language user. */
.st-pwreveal[b-x99nmjcn4c] { position: relative; }
.st-pwreveal .kg-in[b-x99nmjcn4c] { padding-right: 76px; }
/* Edge draws its own reveal eye at the input's right inner edge -- directly under this button, and clicking
   it flips the field without the button knowing, so the label and aria-pressed go stale. One control only. */
.st-pwreveal .kg-in[b-x99nmjcn4c]::-ms-reveal { display: none; }
.st-pwreveal-btn[b-x99nmjcn4c] {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    padding: 2px 8px; border: 0; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--kg-muted);
}
.st-pwreveal-btn:hover[b-x99nmjcn4c] { color: var(--kg-ink); }
/* --kg-accent, not --kg-focus: the latter is defined nowhere in the app, so this silently fell back to a
   generic blue while every other focus ring on the page is the orange accent. */
.st-pwreveal-btn:focus-visible[b-x99nmjcn4c] { outline: 2px solid var(--kg-accent); outline-offset: 2px; border-radius: 4px; }

/* A field's validation sentence sits 6px under its input. Scoped here (via ::deep, since the input and
   the message are both child-component output) rather than in theme.css: as a global rule it also moved
   the wizard's messages, which have their own spacing. */
.st[b-x99nmjcn4c]  .kg-in + .validation-message { margin-top: 6px; }
/* An action link disabled while its row is busy: hairline-ink, no pointer, no underline. Scoped for the
   same reason — RequestDetail dims its busy links with opacity and must keep its own colours. */
.st .kg-action:disabled[b-x99nmjcn4c], .st .kg-action:disabled:hover[b-x99nmjcn4c] { color: var(--kg-hairline-ink); text-decoration: none; cursor: default; }

/* SmartBill connection (§7): status in the header; rows of label · value · one action. */
.st-sbstatus[b-x99nmjcn4c] { display: flex; align-items: center; gap: 8px; }
.st-sbstatus[b-x99nmjcn4c]  .kg-icon { flex: none; color: var(--kg-positive); }
.st-sbstatus-on[b-x99nmjcn4c] { font-size: 13px; font-weight: 600; color: var(--kg-positive); }
.st-sbstatus-off[b-x99nmjcn4c] { font-size: 13px; font-weight: 600; color: var(--kg-muted); }
.st-sbrow[b-x99nmjcn4c] { display: grid; grid-template-columns: 150px 1fr auto; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kg-rule-row); }
.st-sbrow:last-child[b-x99nmjcn4c] { border-bottom: 0; padding-bottom: 4px; }
.st-sbrow .kg-flabel[b-x99nmjcn4c] { margin-bottom: 0; line-height: 1.6; }
.st-sbrow .kg-action[b-x99nmjcn4c] { font-size: 12.5px; }
.st-sbrow .kg-action--quiet[b-x99nmjcn4c] { font-weight: 500; }
.st-sbrow-edit[b-x99nmjcn4c] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Same specificity as the page-wide 6px rule above, so this override must come after it in the file. */
.st-sbrow-edit[b-x99nmjcn4c]  .kg-in + .validation-message { margin-top: 0; }
.st-sbrow-edit .kg-fhint[b-x99nmjcn4c] { margin: 0; }

/* Stamp (§8): the preview, the name and meta, the actions. */
.st-stamp[b-x99nmjcn4c] { display: flex; align-items: center; gap: 20px; }
.st-stamp-preview[b-x99nmjcn4c] { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 1px solid var(--kg-rule-strip); border-radius: 12px; background: #ffffff; overflow: hidden; }
.st-stamp-preview img[b-x99nmjcn4c] { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-stamp-preview span[b-x99nmjcn4c] { padding: 0 6px; font-family: var(--kg-font-mono); font-weight: 500; font-size: 9px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--kg-hairline-ink); text-align: center; }
.st-stamp-text[b-x99nmjcn4c] { flex: 1; min-width: 0; }
.st-stamp-name[b-x99nmjcn4c] { font-size: 13.5px; font-weight: 500; color: var(--kg-ink); overflow-wrap: anywhere; }
.st-stamp-meta[b-x99nmjcn4c] { font-weight: 400; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.st-stamp-help[b-x99nmjcn4c] { margin-top: 4px; font-size: 12.5px; color: var(--kg-muted); }
.st-stamp-text .kg-fwarn[b-x99nmjcn4c] { margin: 8px 0 0; }
.st-stamp-actions[b-x99nmjcn4c] { position: relative; flex: none; display: flex; align-items: center; gap: 16px; }
.st-stamp-remove[b-x99nmjcn4c] { padding: 0; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--kg-warning); cursor: pointer; }
.st-stamp-remove:hover[b-x99nmjcn4c] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Terms (§8): one editor; the language switch with its dots left, the count right. */
.st-terms-bar[b-x99nmjcn4c] { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.st-terms-bar .kg-segment[b-x99nmjcn4c] { padding: 8px 16px; }
.st-terms-count[b-x99nmjcn4c] { font-size: 12.5px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.st-terms-help[b-x99nmjcn4c] { margin-top: 12px; }

/* Team (§9): the ruled rows at the panel's 12px inset, 9.5px column heads, actions right-aligned. */
.st-team[b-x99nmjcn4c] { --kg-row-cols: minmax(150px, 1fr) minmax(190px, 1.2fr) 130px 90px auto; margin: 0 -12px; padding: 0 12px; }
.st-team .kg-rowhead[b-x99nmjcn4c] { margin: 0 -12px; padding: 12px 12px 9px; border-bottom-color: var(--kg-rule-row); }
.st-team .kg-rowhead > *[b-x99nmjcn4c] { font-size: 9.5px; }
.st-team .kg-row[b-x99nmjcn4c] { margin: 0 -12px; padding: 13px 12px; }
.st-team-name[b-x99nmjcn4c] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.st-team-email[b-x99nmjcn4c] { font-size: 13px; color: var(--kg-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Your own account: one fact line above the list — micro-label, name, address, role tag — on its own rule. */
.st-team-self[b-x99nmjcn4c] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 0 13px; border-bottom: 1px solid var(--kg-rule-row); }
.st-team-self .kg-flabel[b-x99nmjcn4c] { margin: 0; line-height: 1.6; }
.st-team-self-name[b-x99nmjcn4c] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.st-team-self-email[b-x99nmjcn4c] { font-size: 13px; color: var(--kg-body); }
.st-team-actions[b-x99nmjcn4c] { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.st-team-actions .kg-action[b-x99nmjcn4c] { font-size: 12.5px; }
.st-team-actions .kg-action--quiet[b-x99nmjcn4c] { font-weight: 500; color: var(--kg-secondary); }
.st-team-actions .kg-action--quiet:hover[b-x99nmjcn4c] { color: var(--kg-body); }
.st-team-actions .st-team-delete[b-x99nmjcn4c], .st-team-actions .st-team-delete:hover[b-x99nmjcn4c] { font-weight: 500; color: var(--kg-warning); }
.st-team-msg[b-x99nmjcn4c] { margin: 14px 0 0; }
.st-team-note[b-x99nmjcn4c] { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--kg-rule-row); }
.st-team-empty[b-x99nmjcn4c] { margin: 14px 0 0; font-size: 13px; color: var(--kg-muted); }
.st-add-actions[b-x99nmjcn4c] { margin-top: 20px; }

/* Locations (§10): one ruled row that leaves for the register — the whole row is the link. */
.st-locations-panel[b-x99nmjcn4c] { padding-bottom: 8px; }
.st-rowlink[b-x99nmjcn4c] { display: flex; align-items: center; gap: 18px; margin: 0 -12px; padding: 18px 12px; color: inherit; text-decoration: none; transition: background-color .12s ease; }
.st-rowlink:hover[b-x99nmjcn4c] { background: var(--kg-hover); color: inherit; text-decoration: none; }
.st-rowlink-text[b-x99nmjcn4c] { flex: 1; min-width: 0; }
.st-rowlink-title[b-x99nmjcn4c] { font-size: 14px; font-weight: 600; color: var(--kg-ink); }
.st-rowlink-sub[b-x99nmjcn4c] { margin-top: 3px; font-size: 12.5px; color: var(--kg-muted); }
.st-rowlink[b-x99nmjcn4c]  .kg-icon { flex: none; color: var(--kg-muted); }

/* Responsive (§11): three columns to two, then everything to one. The strip is in theme.css. */
@media (max-width: 1099.98px) {
    .st-grid3[b-x99nmjcn4c] { grid-template-columns: 1fr 1fr; }
    .st-grid-series[b-x99nmjcn4c] { grid-template-columns: 1fr; }
    .st-grid-series .st-note[b-x99nmjcn4c] { padding-top: 0; }
}
@media (max-width: 719.98px) {
    .st-grid2[b-x99nmjcn4c], .st-grid3[b-x99nmjcn4c], .st-grid-bank[b-x99nmjcn4c], .st-ready[b-x99nmjcn4c], .st-cur-row[b-x99nmjcn4c] { grid-template-columns: 1fr; }
    .st-sbrow[b-x99nmjcn4c] { grid-template-columns: 1fr; gap: 6px; }
    .st-stamp[b-x99nmjcn4c] { flex-wrap: wrap; }
    .st-pwrow[b-x99nmjcn4c], .st-terms-bar[b-x99nmjcn4c] { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* /Components/Pages/ActivityLog.razor.rz.scp.css */
/* Activity register — the column set and the expanded row. The shared shapes (list header, filter row,
   ruled row, footer, stepper) come from css/theme.css, exactly as the Invoices and Clients lists do.

   When 150 / Who 200 / What 1fr / Subject 210. The action column takes the slack because it carries the
   second line — the fields a row touched — and that is what the reader is scanning for. */
.activity-page[b-m7jofzdk8e] { display: flex; flex-direction: column; }

.activity-table[b-m7jofzdk8e] {
    --kg-row-cols: 150px 200px minmax(0, 1fr) 210px;
}
/* Below this the action column would be squeezed to nothing, so the table scrolls sideways instead. */
.activity-table .kg-rowhead[b-m7jofzdk8e],
.activity-table .kg-row[b-m7jofzdk8e] { min-width: 880px; }
@media (max-width: 1279.98px) { .activity-table[b-m7jofzdk8e] { overflow-x: auto; } }

/* One line, always, and figure-aligned so a column of timestamps reads as a column. */
.activity-when[b-m7jofzdk8e] { white-space: nowrap; font-size: 13px; }

/* The actor and the role they held AT THE TIME — the tag is a fact about the row, never a control. */
.activity-who[b-m7jofzdk8e] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 8px;
    min-width: 0;
}
.activity-who .kg-name[b-m7jofzdk8e] { overflow-wrap: anywhere; }

/* The verb, and under it the fields it touched. min-width:0 lets the grid track actually shrink: a grid
   item's default min-width is auto, which would let a long summary push the row wider than its column. */
.activity-what[b-m7jofzdk8e] { min-width: 0; font-size: 14px; color: var(--kg-ink); }
.activity-what .kg-reg-meta[b-m7jofzdk8e] { display: block; margin-top: 2px; overflow-wrap: anywhere; }

.activity-subject[b-m7jofzdk8e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.activity-subject-text[b-m7jofzdk8e] { color: var(--kg-muted); overflow-wrap: anywhere; }
.activity-toggle[b-m7jofzdk8e] { flex: none; font-size: 12.5px; }

/* The expanded detail: a tinted band under its row, full width, outside the grid so the change list is
   not squeezed into one column. */
.activity-detail[b-m7jofzdk8e] {
    padding: 10px 0 14px 16px;
    border-bottom: 1px solid var(--kg-rule-divider);
    background: var(--kg-tint-ink);
}
.activity-detail-head[b-m7jofzdk8e] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
/* /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-110j0o3zcp] { 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-110j0o3zcp] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bills-ledger .kg-ledger-row[b-110j0o3zcp] { flex: 1; align-items: center; }
.bills-hero-figure[b-110j0o3zcp] { margin-top: 10px; white-space: nowrap; }
.bills-hero-figure .is-zero[b-110j0o3zcp] { 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-110j0o3zcp] { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.bills-signal-link:hover[b-110j0o3zcp] { text-decoration: underline; text-underline-offset: 4px; }

.is-loading[b-110j0o3zcp] { opacity: .5; }
/* First thing in the list card, so it has the card's own top padding above it already. */
.bills-scope[b-110j0o3zcp] { 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-110j0o3zcp] {
    --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-110j0o3zcp],
.bills-table .kg-row[b-110j0o3zcp] { 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-110j0o3zcp] { overflow-x: auto; } }
.bills-number[b-110j0o3zcp] { 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-110j0o3zcp],
.bills-table .kg-reg-meta[b-110j0o3zcp] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bills-money[b-110j0o3zcp] { font-size: 14.5px; color: var(--kg-body); white-space: nowrap; }
.bills-money--total[b-110j0o3zcp] { font-size: 15.5px; font-weight: 600; color: var(--kg-ink); }
.bills-money .kg-cur[b-110j0o3zcp] { margin-left: 4px; font-size: 12px; }
.bills-dates[b-110j0o3zcp] { font-size: 13.5px; color: var(--kg-secondary); white-space: nowrap; }
.kg-hairline[b-110j0o3zcp] { 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-110j0o3zcp] {
    align-items: baseline;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--kg-rule-total);
    border-bottom: 0;
}
.bills-total:hover[b-110j0o3zcp] { background: transparent; }
.bills-total-note[b-110j0o3zcp] { font-size: 12.5px; color: var(--kg-faint); }
.bills-total-figure[b-110j0o3zcp] {
    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-110j0o3zcp] { 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-110j0o3zcp] { 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-1cu4k2pio4] { 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-1cu4k2pio4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
}
.ch-back[b-1cu4k2pio4] {
    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-1cu4k2pio4] { color: var(--kg-ink); }

.ch-identity[b-1cu4k2pio4] { padding-top: 22px; }
.ch-microline[b-1cu4k2pio4] { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.ch-microline .kg-code[b-1cu4k2pio4] { font-size: 11.5px; letter-spacing: .1em; }
.ch-sep[b-1cu4k2pio4] { color: var(--kg-hairline-ink); margin: 0 2px; }
.ch-name[b-1cu4k2pio4] { margin: 12px 0 0; text-wrap: balance; }
.ch-contact[b-1cu4k2pio4] { margin-top: 10px; font-size: 13px; color: var(--kg-muted); text-wrap: pretty; }
.ch-notfound[b-1cu4k2pio4] { 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-1cu4k2pio4] { color: var(--kg-accent-text); }
.kg-strip-figure.is-zero[b-1cu4k2pio4] { color: var(--kg-faint); }

/* Hairline placeholders while the read is in flight — no spinner, no shimmer (spec §4). */
.ch-skel[b-1cu4k2pio4] { border-radius: 6px; background: var(--kg-hover); }
.ch-skel--micro[b-1cu4k2pio4] { width: 220px; height: 12px; }
.ch-skel--title[b-1cu4k2pio4] { width: 420px; max-width: 80%; height: 36px; margin-top: 14px; }
.ch-skel--line[b-1cu4k2pio4] { 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-1cu4k2pio4] { margin-top: 20px; }
.ch-empty[b-1cu4k2pio4] { 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-1cu4k2pio4] { --kg-row-cols: 154px minmax(150px, 1fr) 156px 132px 108px 92px; }
.ch-table--requests .kg-rowhead[b-1cu4k2pio4],
.ch-table--requests .kg-row[b-1cu4k2pio4] { 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-1cu4k2pio4] { --kg-row-cols: minmax(150px, 1fr) 124px 124px 156px 136px 152px; }
.ch-table--bills .kg-rowhead[b-1cu4k2pio4],
.ch-table--bills .kg-row[b-1cu4k2pio4] { min-width: 940px; }

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

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

@media (max-width: 767.98px) {
    .ch-skel--title[b-1cu4k2pio4] { 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-ktox999ifj] .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-ktox999ifj] .clients-table .kg-rowhead,
[b-ktox999ifj] .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-vhuimwvcu5] {
    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-vhuimwvcu5] { padding-top: 10px; padding-bottom: 10px; }
}

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

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
.dash-hero-figure[b-vhuimwvcu5] { margin-top: 10px; white-space: nowrap; }
.dash-hero-figure.is-zero[b-vhuimwvcu5] { color: var(--kg-faint); }
/* The context line under the figure is .kg-context in theme.css — shared with the Invoices hero. */
.dash-signal[b-vhuimwvcu5] { 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-vhuimwvcu5] {
    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-vhuimwvcu5] { margin-right: 6px; }
.dash-sub-word[b-vhuimwvcu5] { font-size: 14px; color: var(--kg-secondary); }
.dash-sub-figure[b-vhuimwvcu5] { font-size: 16px; font-weight: 600; color: var(--kg-ink); }
.dash-sub-op[b-vhuimwvcu5] { padding: 0 2px; font-size: 16px; color: var(--kg-faint); }
.dash-sub-note[b-vhuimwvcu5] { font-size: 12.5px; color: var(--kg-muted); }
.dash-sub-excluded[b-vhuimwvcu5] { flex-basis: 100%; }
/* The (i) closing the equation, and its note: shown on hover, on keyboard focus and on a tap (which focuses the
   button). Opens leftwards, since the button sits at the row's right end. Its text is also the aria-label. */
.dash-sub-info[b-vhuimwvcu5] {
    position: relative;
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kg-faint);
    font-size: 13px;
    line-height: 1;
    cursor: help;
}
.dash-sub-info:hover[b-vhuimwvcu5], .dash-sub-info:focus[b-vhuimwvcu5] { color: var(--kg-secondary); }
.dash-sub-info[b-vhuimwvcu5]::after {
    content: attr(data-tip);
    position: absolute;
    right: -6px;
    bottom: calc(100% + 8px);
    z-index: 5;
    width: 260px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--kg-ink);
    color: var(--kg-panel);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, visibility .12s ease;
}
.dash-sub-info:hover[b-vhuimwvcu5]::after, .dash-sub-info:focus[b-vhuimwvcu5]::after { opacity: 1; visibility: visible; }
.dash-sub-empty[b-vhuimwvcu5] { 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-vhuimwvcu5] { margin: auto 0 0; }
.dash-strip-cell[b-vhuimwvcu5] { display: block; color: inherit; transition: background-color .12s ease; }
.dash-strip-cell:hover[b-vhuimwvcu5] { background: var(--kg-hover); color: inherit; text-decoration: none; }
.dash-strip .is-zero[b-vhuimwvcu5] { color: var(--kg-faint); }
.dash-strip .kg-meta[b-vhuimwvcu5] { 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-vhuimwvcu5] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.dash-ledger-row[b-vhuimwvcu5] {
    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-vhuimwvcu5] { background: var(--kg-hover); color: inherit; text-decoration: none; }
.dash-ledger-row .kg-ledger-figure[b-vhuimwvcu5] { white-space: nowrap; }
.is-loading[b-vhuimwvcu5] { opacity: .5; transition: opacity .12s ease; }

/* ── Needs your approval ───────────────────────────────────────────────────────────────── */
.dash-queue-head[b-vhuimwvcu5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.dash-queue-head h3[b-vhuimwvcu5] { margin: 0; }
.dash-queue-sub[b-vhuimwvcu5] { 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-vhuimwvcu5] {
    margin-top: 18px;
    --kg-row-cols: minmax(0, 1fr) minmax(0, .8fr) 92px 96px 92px;
}

.dash-queue-client[b-vhuimwvcu5] { min-width: 0; }
.dash-queue-client .kg-name[b-vhuimwvcu5] {
    text-wrap: pretty;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-queue-client .kg-meta[b-vhuimwvcu5] { 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-vhuimwvcu5] { min-width: 0; font-size: 13px; color: var(--kg-body); }
.dash-queue-leg[b-vhuimwvcu5] { display: block; text-wrap: pretty; }
.dash-queue-leg--to[b-vhuimwvcu5] { margin-top: 2px; color: var(--kg-secondary); }
.dash-arrow[b-vhuimwvcu5] { margin-right: 4px; color: var(--kg-hairline-ink); }

.dash-queue-when[b-vhuimwvcu5] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.dash-queue-when .kg-meta[b-vhuimwvcu5] { 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-vhuimwvcu5] {
    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-vhuimwvcu5] { color: var(--kg-warning); }

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

/* ── The chart card ─────────────────────────────────────────────────────────────────────── */
.dash-chart-head[b-vhuimwvcu5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.dash-chart-peak[b-vhuimwvcu5] { 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-vhuimwvcu5] { 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-vhuimwvcu5] {
    color: var(--kg-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-spark[b-vhuimwvcu5] {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
    overflow: visible;
}
.dash-spark-area[b-vhuimwvcu5] { fill: var(--kg-positive-fill); }
.dash-spark-line[b-vhuimwvcu5] {
    fill: none;
    stroke: var(--kg-positive);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.dash-spark-base[b-vhuimwvcu5] { stroke: rgba(20, 24, 27, .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-spark-dot[b-vhuimwvcu5] { 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-vhuimwvcu5] { 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-vhuimwvcu5] { cursor: default; }
.dash-pt-reveal[b-vhuimwvcu5] { opacity: 0; transition: opacity .12s ease; }
.dash-pt:hover .dash-pt-reveal[b-vhuimwvcu5],
.dash-pt:focus-visible .dash-pt-reveal[b-vhuimwvcu5] { opacity: 1; }
.dash-pt:focus[b-vhuimwvcu5] { outline: none; }
.dash-pt:focus-visible rect[b-vhuimwvcu5] { outline: 2px solid var(--kg-accent); }
.dash-months[b-vhuimwvcu5] {
    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-vhuimwvcu5] { color: var(--kg-secondary); }
.dash-chart-note[b-vhuimwvcu5] {
    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-vhuimwvcu5] { margin: auto 0 0; padding-top: 26px; }
.dash-top-rows[b-vhuimwvcu5] {
    margin-top: 12px;
    border-top: 1px solid var(--kg-rule-strip);
    font-variant-numeric: tabular-nums;
}
.dash-top-row[b-vhuimwvcu5] {
    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-vhuimwvcu5] { border-bottom: 0; }
.dash-top-row:hover[b-vhuimwvcu5] { background: var(--kg-hover); }
.dash-top-client[b-vhuimwvcu5] { min-width: 0; }
.dash-top-name[b-vhuimwvcu5] { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-top-amount[b-vhuimwvcu5] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
.dash-top-empty[b-vhuimwvcu5] { 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-vhuimwvcu5] { margin-top: 0; }
    .dash-top[b-vhuimwvcu5] { margin-top: 0; }
    .dash-queue-more[b-vhuimwvcu5] { margin-top: 0; }
    .dash-ledger-row[b-vhuimwvcu5] { 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-vhuimwvcu5] { --kg-row-cols: minmax(0, 1fr) minmax(0, .8fr) 88px 92px; }
    .dash-queue .kg-rowhead > :nth-child(3)[b-vhuimwvcu5],
    .dash-queue-when[b-vhuimwvcu5] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-pt-reveal[b-vhuimwvcu5], .dash-ledger-row[b-vhuimwvcu5], .dash-top-row[b-vhuimwvcu5], .is-loading[b-vhuimwvcu5] { 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-vhuimwvcu5] { color: var(--kg-warning); }
/* /Components/Pages/DriverDetail.razor.rz.scp.css */
/* One driver — the detail page's own layout. theme.css owns the cards, tabs, forms and status chips.
   Deliberately the same shape as FleetVehicleDetail: the two pages are read in the same session, and a
   driver's page that laid its groups out differently would read as a different app. */

.drvd-identity[b-e21salo2cf] { display: flex; flex-direction: column; gap: 6px; }

.drvd-microline[b-e21salo2cf] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drvd-sep[b-e21salo2cf] { color: var(--kg-hairline-ink); }

.drvd-name[b-e21salo2cf] { margin: 0; }

.drvd-badges[b-e21salo2cf] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.drvd-left[b-e21salo2cf] { margin-top: 16px; }

/* ── The form ─────────────────────────────────────────────────────────────────────────────────
   The groups and their fields live in DriverForm and are styled there, because scoped CSS follows the
   markup. What stays here is the actions row, which the page owns rather than the form. */
.drvd-actions[b-e21salo2cf] { display: flex; justify-content: flex-end; margin-top: 26px; }

/* ── The vehicles tab ─────────────────────────────────────────────────────────────────────────
   Cards rather than a table: there are rarely more than two or three, and each is a link out. */
.drvd-vehicles[b-e21salo2cf] { display: flex; flex-wrap: wrap; gap: 12px; }

.drvd-vehicle[b-e21salo2cf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    padding: 14px 16px;
    border: 1px solid var(--kg-rule-strip);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.drvd-vehicle:hover[b-e21salo2cf] { background: var(--kg-tint-ink); }

.drvd-plate[b-e21salo2cf] { font-size: 15px; letter-spacing: .04em; }

/* ── Loading placeholders ─────────────────────────────────────────────────────────────────── */
.drvd-skel[b-e21salo2cf] { background: var(--kg-tint-ink); border-radius: 4px; }
.drvd-skel--micro[b-e21salo2cf] { width: 180px; height: 11px; }
.drvd-skel--title[b-e21salo2cf] { width: 240px; height: 30px; }

.drvd-notfound[b-e21salo2cf] { display: flex; align-items: center; gap: 12px; }

@media (max-width: 720px) {
    .drvd-actions[b-e21salo2cf] { justify-content: stretch; }
    .drvd-actions > .kg-pill[b-e21salo2cf] { width: 100%; justify-content: center; }
}
/* /Components/Pages/DriverNew.razor.rz.scp.css */
/* A new driver — the page's own frame, matching FleetVehicleNew. The fields inside are DriverForm's and
   are styled there; theme.css owns the cards, the forms and the pills. */

.drvn-identity[b-7dh46dqx77] { display: flex; flex-direction: column; gap: 6px; }

/* The hint carries a measure of its own: it is a sentence to read, not a label. */
.drvn-hint[b-7dh46dqx77] {
    margin: 4px 0 0;
    max-width: 62ch;
    color: var(--kg-muted);
    font-size: 13px;
}

.drvn-actions[b-7dh46dqx77] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 26px;
}

@media (max-width: 720px) {
    .drvn-actions[b-7dh46dqx77] { justify-content: space-between; }
    .drvn-actions > .kg-pill[b-7dh46dqx77] { flex: 1; justify-content: center; }
}
/* /Components/Pages/Drivers.razor.rz.scp.css */
/* Drivers register — the column set only (Register.razor and css/theme.css own the rest).
   Name takes the flexible column; contact, plates and status are fixed measures. */
[b-7c6a8t8zlw] .drv-table {
    --kg-row-cols: minmax(0, 1fr) 200px 220px 116px 116px 104px;
}

[b-7c6a8t8zlw] .drv-table .kg-rowhead,
[b-7c6a8t8zlw] .drv-table .kg-row { min-width: 1020px; }

/* The plates a driver is named on. Wrapped rather than truncated: a driver on three vans is a fact worth
   seeing in full, and the column is sized for two. */
[b-7c6a8t8zlw] .drv-plates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}
/* /Components/Pages/Fleet.razor.rz.scp.css */
/* Fleet register — the column set only (Register.razor and css/theme.css own the rest).
   Plate (+ make and model beneath it) takes the flexible column, the way the carrier's name does on
   Subcontractors; everything after it is a fixed measure. */
[b-muwkpzb7c7] .fleet-table {
    --kg-row-cols: minmax(0, 1fr) 104px 168px 92px 128px 112px 104px 116px 104px;
}

/* The fixed columns plus their gaps come to about 900px, so the theme's default row would squeeze the
   plate rather than scroll (spec §4). */
[b-muwkpzb7c7] .fleet-table .kg-rowhead,
[b-muwkpzb7c7] .fleet-table .kg-row { min-width: 1200px; }

/* The plate is the row's name AND its link: monospaced like every other identifier in the app, but
   carrying the name column's weight so the eye lands on it first. */
[b-muwkpzb7c7] .fleet-plate {
    font-size: 13.5px;
    letter-spacing: .02em;
}

/* Type and coupling are secondary facts — readable, not competing with the plate. */
[b-muwkpzb7c7] .fleet-kind,
[b-muwkpzb7c7] .fleet-coupled {
    font-size: 13px;
    color: var(--kg-body);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dimensions are three numbers joined by ×: tabular so the column reads down, and never wrapped
   mid-measurement. */
[b-muwkpzb7c7] .fleet-dims {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    white-space: nowrap;
}
/* /Components/Pages/FleetVehicleDetail.razor.rz.scp.css */
/* One vehicle — the detail page's own layout. theme.css owns the cards, tabs, forms and status chips. */

.fvd-identity[b-iq5zerur6y] { display: flex; flex-direction: column; gap: 6px; }

.fvd-microline[b-iq5zerur6y] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fvd-sep[b-iq5zerur6y] { color: var(--kg-hairline-ink); }

/* The plate is the page's title, so it carries the display size while staying monospaced: it is an
   identifier first and a heading second. */
.fvd-plate[b-iq5zerur6y] { margin: 0; letter-spacing: .04em; }

.fvd-badges[b-iq5zerur6y] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.fvd-coupled[b-iq5zerur6y] { font-variant-numeric: tabular-nums; }

.fvd-sold[b-iq5zerur6y] { margin-top: 16px; }

/* ── The specification form ────────────────────────────────────────────────────────────────
   The groups and their fields live in VehicleForm and are styled there, because scoped CSS follows
   the markup. What stays here is the heading rule, which the coupling tab uses as well, and the
   actions row, which every tab of this page owns rather than the form. */
.fvd-grouphead[b-iq5zerur6y] {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kg-rule-strip);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fvd-actions[b-iq5zerur6y] { display: flex; justify-content: flex-end; margin-top: 26px; }

/* ── Coupling tab ────────────────────────────────────────────────────────────────────────── */
.fvd-coupling[b-iq5zerur6y] { display: flex; flex-direction: column; gap: 10px; }

.fvd-historyhead[b-iq5zerur6y] { margin-top: 20px; }

/* Pair · from · to · notes. The two timestamps are a fixed measure so the column reads down. */
.fvd-history[b-iq5zerur6y] { --kg-row-cols: 200px 168px 168px minmax(0, 1fr); }
.fvd-history .kg-rowhead[b-iq5zerur6y],
.fvd-history .kg-row[b-iq5zerur6y] { min-width: 720px; }

.fvd-pair[b-iq5zerur6y] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fvd-arrow[b-iq5zerur6y] { color: var(--kg-muted); }

.fvd-when[b-iq5zerur6y] { font-variant-numeric: tabular-nums; font-size: 13px; }

.fvd-rownotes[b-iq5zerur6y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--kg-body);
    font-size: 13px;
}

/* ── Loading placeholders ───────────────────────────────────────────────────────────────────
   Hairline blocks at the real content's proportions, not a spinner (spec §4 "Loading"). */
.fvd-skel[b-iq5zerur6y] { background: var(--kg-tint-ink); border-radius: 4px; }
.fvd-skel--micro[b-iq5zerur6y] { width: 180px; height: 11px; }
.fvd-skel--title[b-iq5zerur6y] { width: 220px; height: 30px; }

.fvd-notfound[b-iq5zerur6y] { display: flex; align-items: center; gap: 12px; }

@media (max-width: 720px) {
    .fvd-actions[b-iq5zerur6y] { justify-content: stretch; }
    .fvd-actions > .kg-pill[b-iq5zerur6y] { width: 100%; justify-content: center; }
}
/* /Components/Pages/FleetVehicleNew.razor.rz.scp.css */
/* A new vehicle — the page's own frame. The fields inside are VehicleForm's and are styled there;
   theme.css owns the cards, the forms and the pills. */

.fvn-identity[b-9p7rawqz0t] { display: flex; flex-direction: column; gap: 6px; }

/* The hint carries a measure of its own: it is a sentence to read, not a label, and a line running the
   full width of a wide card is one the eye loses its place in. */
.fvn-hint[b-9p7rawqz0t] {
    margin: 4px 0 0;
    max-width: 62ch;
    color: var(--kg-muted);
    font-size: 13px;
}

.fvn-band[b-9p7rawqz0t] { margin-top: 20px; }

/* Cancel sits beside Save rather than under it: leaving is as ordinary here as finishing. */
.fvn-actions[b-9p7rawqz0t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 26px;
}

@media (max-width: 720px) {
    .fvn-actions[b-9p7rawqz0t] { justify-content: space-between; }
    .fvn-actions > .kg-pill[b-9p7rawqz0t] { flex: 1; justify-content: center; }
}
/* /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-7tnqrmorfs] { display: flex; flex-direction: column; }
.landing-inner[b-7tnqrmorfs] { max-width: 1160px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* ── Hero / closing call: ink ground ── */
.landing-hero[b-7tnqrmorfs], .landing-cta[b-7tnqrmorfs] {
    background: var(--kg-rail);
    color: var(--kg-onrail);
    padding: 96px 0 88px;
}
.landing-cta[b-7tnqrmorfs] { padding: 72px 0; }
.landing-hero-kicker[b-7tnqrmorfs] { display: block; margin-bottom: 22px; color: var(--kg-onrail-meta); }
.landing-hero-title[b-7tnqrmorfs] {
    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-7tnqrmorfs] { font-size: clamp(32px, 4.5vw, 52px); max-width: 20ch; }
.landing-hero-sub[b-7tnqrmorfs] {
    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-7tnqrmorfs] { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 36px; }
.landing-hero-link[b-7tnqrmorfs] {
    font-size: 14px;
    font-weight: 600;
    color: var(--kg-onrail);
    text-decoration: none;
    text-underline-offset: 5px;
}
.landing-hero-link:hover[b-7tnqrmorfs] { color: var(--kg-onrail); text-decoration: underline; text-decoration-thickness: 1px; }

/* ── Bands ── */
.landing-band[b-7tnqrmorfs] { padding: 64px 0; border-bottom: 1px solid var(--kg-rule-section); }
.landing-section-head[b-7tnqrmorfs] { margin-bottom: 36px; max-width: 60ch; }
.landing-h2[b-7tnqrmorfs] {
    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-7tnqrmorfs] { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--kg-ink); }
.landing-text[b-7tnqrmorfs] { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--kg-secondary); text-wrap: pretty; }

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

/* Three ruled columns: a left rule separates them, the first has none (the stat-strip rule). */
.landing-services[b-7tnqrmorfs], .landing-steps[b-7tnqrmorfs] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-service[b-7tnqrmorfs], .landing-step[b-7tnqrmorfs] { padding: 4px 32px 0; border-left: 1px solid var(--kg-rule-divider); }
.landing-service:first-child[b-7tnqrmorfs], .landing-step:first-child[b-7tnqrmorfs] { padding-left: 0; border-left: 0; }
.landing-service-icon[b-7tnqrmorfs] { width: 44px; height: 44px; margin-bottom: 18px; }
.landing-step-no[b-7tnqrmorfs] {
    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-7tnqrmorfs] { padding: 22px 0 28px; }

@media (max-width: 767.98px) {
    .landing-hero[b-7tnqrmorfs] { padding: 64px 0 56px; }
    .landing-band[b-7tnqrmorfs] { padding: 44px 0; }
    .landing-quick[b-7tnqrmorfs] { flex-direction: column; align-items: flex-start; }
    .landing-services[b-7tnqrmorfs], .landing-steps[b-7tnqrmorfs] { grid-template-columns: 1fr; gap: 28px; }
    .landing-service[b-7tnqrmorfs], .landing-step[b-7tnqrmorfs] { padding-left: 0; border-left: 0; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login v2 (Claude Design, "Login page with logo animation"). Values are the design's; the hexes it
   shares with theme.css are written as tokens. The page ground and centring come from .kg-anon. */

/* Positioned so it paints over the fixed backdrop (LoginBackdrop), which comes before it. */
.login-card[b-yjcmvyutsh] {
    position: relative;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 44px 48px;
    border-radius: 16px;
    background: var(--kg-panel);
    border: 1px solid var(--kg-rule-row);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.login-head[b-yjcmvyutsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.login-mark[b-yjcmvyutsh] { width: 56px; margin-bottom: 4px; }
.login-brand[b-yjcmvyutsh] {
    margin: 0;
    font-family: var(--kg-font-display);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--kg-ink);
}
.login-sub[b-yjcmvyutsh] { margin: 0; font-size: 14px; color: var(--kg-secondary); }

.login-note[b-yjcmvyutsh] {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
}
.login-note--error[b-yjcmvyutsh] { background: #f6e3de; color: var(--kg-warning); }
.login-note--ok[b-yjcmvyutsh] { background: #e2ece5; color: var(--kg-positive); }

.login-form[b-yjcmvyutsh] { display: flex; flex-direction: column; gap: 18px; }
.login-field[b-yjcmvyutsh] { display: flex; flex-direction: column; gap: 7px; }
.login-field label[b-yjcmvyutsh] { font-size: 14px; font-weight: 700; color: var(--kg-ink); }
.login-req[b-yjcmvyutsh] { color: var(--kg-warning); }

.login-in[b-yjcmvyutsh] {
    height: 40px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #d4d8d5;
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--kg-ink);
}
.login-in[b-yjcmvyutsh]::placeholder { color: var(--kg-faint); }
.login-in:focus-visible[b-yjcmvyutsh] {
    outline: none;
    border-color: var(--kg-accent);
    box-shadow: 0 0 0 3px rgba(226, 98, 42, .18);
}
/* The shared validation hook (wizard-helpers.js) adds .was-validated when a submit is blocked; Bootstrap
   then shows .invalid-feedback. The border tint is the app's .kg-in.invalid one. */
.was-validated .login-in:invalid[b-yjcmvyutsh] { border-color: rgba(179, 49, 28, .45); }
.login-field .invalid-feedback[b-yjcmvyutsh] { margin: 0; font-size: 12.5px; color: var(--kg-warning); }

.login-remember[b-yjcmvyutsh] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    font-size: 14px;
    color: var(--kg-body);
    cursor: pointer;
}
.login-remember input[b-yjcmvyutsh] { width: 16px; height: 16px; margin: 0; accent-color: var(--kg-accent); }

.login-submit[b-yjcmvyutsh] {
    height: 42px;
    border: 1px solid transparent; /* invisible normally; forced colours paint it, so Sign in keeps its outline */
    border-radius: var(--kg-r-pill);
    background: var(--kg-accent);
    color: var(--kg-on-accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.login-submit:hover[b-yjcmvyutsh] { background: var(--kg-accent-hover); }
.login-submit:active[b-yjcmvyutsh] { background: var(--kg-accent-active); }

.login-foot[b-yjcmvyutsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
}
.login-foot p[b-yjcmvyutsh] { margin: 0; color: var(--kg-secondary); }
.login-foot a[b-yjcmvyutsh] { color: var(--kg-accent-text); font-weight: 600; text-decoration: none; }
.login-foot a:hover[b-yjcmvyutsh] { color: var(--kg-accent-hover); text-decoration: none; }
.login-guest[b-yjcmvyutsh] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 20px;
    border: 1px solid var(--kg-accent);
    border-radius: var(--kg-r-pill);
    font-size: 13px;
}
.login-guest:hover[b-yjcmvyutsh] { background: rgba(226, 98, 42, .08); }
.login-foot .login-home[b-yjcmvyutsh] { display: flex; align-items: center; gap: 6px; color: var(--kg-secondary); font-weight: 400; }
.login-foot .login-home:hover[b-yjcmvyutsh] { color: var(--kg-ink); }

.login-submit:focus-visible[b-yjcmvyutsh],
.login-foot a:focus-visible[b-yjcmvyutsh] { outline: 2px solid var(--kg-accent); outline-offset: 2px; }

/* The waiting screen: the splash overlay (fixed, z-index 9999, from kodgo-splash.css) with the mark at
   the design's 200px, and the two lines of text above it near the bottom. */
.login-wait[b-yjcmvyutsh]  .ks-mark { width: 200px; }
.login-wait-text[b-yjcmvyutsh] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 120px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    text-align: center;
}
.login-wait-title[b-yjcmvyutsh] { margin: 0; font-size: 16px; font-weight: 600; color: var(--kg-ink); }
.login-wait-who[b-yjcmvyutsh] { margin: 0; font-size: 13.5px; color: var(--kg-secondary); overflow-wrap: anywhere; }

@media (max-width: 479.98px) {
    .login-card[b-yjcmvyutsh] { padding: 32px 24px; }
}
/* A short window (a phone on its side): 120px up would run the text into the mark. */
@media (max-height: 620px) {
    .login-wait-text[b-yjcmvyutsh] { bottom: 24px; }
}
/* /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-0mhttkjefd] { display: flex; flex-direction: column; min-height: 100%; }

/* Context bar (pattern B). */
.wiz-bar[b-0mhttkjefd] {
    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-0mhttkjefd] { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wiz-back[b-0mhttkjefd] {
    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-0mhttkjefd] { color: var(--kg-ink); }
.wiz-bar-sep[b-0mhttkjefd] { color: var(--kg-hairline-ink); }
.wiz-bar-controls[b-0mhttkjefd] { display: flex; align-items: center; gap: 16px; flex: none; }
.wiz-discard[b-0mhttkjefd] {
    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-0mhttkjefd] { color: var(--kg-warning); }

/* "Load order file" - the bar's other control, and the only one carrying a glyph: it OPENS something
   where Discard ends it. A <label> rather than a button because InputFile renders a file input that
   cannot be restyled; the input sits beside it as .kg-vh. That is also why the focus ring is drawn
   from the INPUT's :focus-visible - the label never receives focus, the hidden input does. */
.wiz-import[b-0mhttkjefd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--kg-secondary);
    cursor: pointer;
}
.wiz-import:hover[b-0mhttkjefd] { color: var(--kg-ink); }
.wiz-import .spinner-border[b-0mhttkjefd] { width: 14px; height: 14px; border-width: 2px; }
.kg-vh:focus-visible + .wiz-import[b-0mhttkjefd] {
    outline: 2px solid var(--kg-accent);
    outline-offset: 3px;
    border-radius: var(--kg-r-icon);
}

/* The page title — step 1 of a NEW request only; every later step opens on the rail. */
.wiz-title[b-0mhttkjefd] { padding-top: 32px; }
.wiz-title h2[b-0mhttkjefd] { margin: 0; font-size: 34px; }
.wiz-title p[b-0mhttkjefd] { 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-0mhttkjefd] { padding-top: 28px; }
.wiz-rail-dots[b-0mhttkjefd] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: 11px;
}
.wiz-rail-cell[b-0mhttkjefd] { display: flex; align-items: center; }
.wiz-dot[b-0mhttkjefd] { flex: none; border-radius: 50%; box-sizing: border-box; padding: 0; }
.wiz-dot--done[b-0mhttkjefd] { width: 9px; height: 9px; background: var(--kg-positive); border: 0; cursor: pointer; }
.wiz-dot--done:focus-visible[b-0mhttkjefd] { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
.wiz-dot--current[b-0mhttkjefd] { width: 11px; height: 11px; background: var(--kg-page); border: 3px solid var(--kg-positive); }
.wiz-dot--pending[b-0mhttkjefd] { width: 9px; height: 9px; background: #c8ced1; }
.wiz-connector[b-0mhttkjefd] { flex: 1; height: 1.5px; background: var(--kg-rule-strip); }
.wiz-connector--done[b-0mhttkjefd] { background: rgba(47, 107, 79, .35); }
.wiz-rail-labels[b-0mhttkjefd] { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; }
.wiz-rail-label[b-0mhttkjefd] {
    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-0mhttkjefd] { color: var(--kg-muted); }
.wiz-rail-label.is-current[b-0mhttkjefd] { color: var(--kg-body); }

/* Step heading: the question left, "Pasul N din 5" right, baselines aligned. */
.wiz-content[b-0mhttkjefd] { padding-top: 34px; padding-bottom: 8px; }
.wiz-stephead[b-0mhttkjefd] { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.wiz-stephead h3[b-0mhttkjefd] { margin: 0; font-size: 25px; letter-spacing: -.01em; }
.wiz-stepno[b-0mhttkjefd] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.wiz-stepsub[b-0mhttkjefd] { 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-0mhttkjefd] { margin-top: 22px; }
.wiz-postapproval-body[b-0mhttkjefd] { margin-top: 18px; }
.wiz-postapproval-rate[b-0mhttkjefd] { display: flex; align-items: center; gap: 10px; max-width: 300px; }
.wiz-postapproval-cur[b-0mhttkjefd] { 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-0mhttkjefd] { 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-0mhttkjefd] { border-color: rgba(226, 98, 42, .45); }
.wiz-notice--draft[b-0mhttkjefd]::before { background: var(--kg-accent); }
.wiz-notice--info[b-0mhttkjefd] { border-color: var(--kg-rule-section); }
.wiz-notice--info[b-0mhttkjefd]::before { background: var(--kg-positive); }

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

/* Footer: back link or the required-fields sentence left; the primary pill right. */
.wiz-footer[b-0mhttkjefd] {
    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-0mhttkjefd] {
    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-0mhttkjefd] { color: var(--kg-ink); }
.wiz-required-note[b-0mhttkjefd] { font-size: 12.5px; color: var(--kg-muted); }
.wiz-next[b-0mhttkjefd] { 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-0mhttkjefd] { display: flex; align-items: center; gap: 18px; min-width: 0; }
.wiz-blocked[b-0mhttkjefd] {
    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-0mhttkjefd]  .kg-icon, .wiz-blocked > svg[b-0mhttkjefd] { flex: none; color: var(--kg-warning); }

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

@media (max-width: 767.98px) {
    .wiz-rail-label[b-0mhttkjefd] { font-size: 9px; letter-spacing: .08em; }
    .wiz-stephead[b-0mhttkjefd] { flex-direction: column; gap: 4px; }
    .wiz-footer[b-0mhttkjefd] { flex-wrap: wrap; }
    .wiz-submitgroup[b-0mhttkjefd], .wiz-nextgroup[b-0mhttkjefd] { flex-direction: column; align-items: flex-end; gap: 10px; }
}

.wiz-notice .kg-warnband-text a[b-0mhttkjefd] { font-weight: 600; }
/* /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-za077xg9ry] { display: flex; flex-direction: column; min-height: 100%; }

/* ── Action bar ── */
.rd-back[b-za077xg9ry] {
    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-za077xg9ry] { 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-za077xg9ry] {
    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-za077xg9ry] { color: var(--kg-ink); text-decoration: underline; text-underline-offset: 4px; }
.rd-barlink:disabled[b-za077xg9ry] { 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-za077xg9ry] { font-size: 13px; font-weight: 500; color: var(--kg-faint); }
.rd-actions[b-za077xg9ry] { gap: 20px; }
.rd-actions .kg-pill[b-za077xg9ry] { margin-left: 4px; }

/* ── Identity block ── */
.rd-identity[b-za077xg9ry] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 0 0;
}
.rd-identity-main[b-za077xg9ry] { min-width: 0; }
.rd-identity-side[b-za077xg9ry] { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; }
.rd-microline[b-za077xg9ry] { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; }
.rd-microline .kg-code[b-za077xg9ry] { font-size: 11.5px; letter-spacing: .1em; }
.rd-sep[b-za077xg9ry] { color: var(--kg-hairline-ink); margin: 0 2px; }
.rd-subtag[b-za077xg9ry] { color: var(--kg-accent-text); }
.rd-client[b-za077xg9ry] { margin: 12px 0 0; text-wrap: balance; }
.rd-legal[b-za077xg9ry] { 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-za077xg9ry] {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 3px;
    font-size: 12.5px;
    color: var(--kg-muted);
    white-space: nowrap;
}
/* Who touched the order last. Quieter than the stamps above it, and the one line here allowed to wrap:
   it carries a person's name, which no width can be promised about. */
.rd-lastchange[b-za077xg9ry] { color: var(--kg-faint); white-space: normal; }

/* ── Progress rail ── */
.rd-rail[b-za077xg9ry] {
    display: grid;
    grid-template-columns: repeat(var(--rd-steps, 5), 1fr);
    margin-top: 30px;
    padding: 6px 0 0;
}
.rd-step[b-za077xg9ry] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.rd-step[b-za077xg9ry]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -50%;
    width: 100%;
    height: 1.5px;
    background: var(--kg-rule-control);
}
.rd-step:first-child[b-za077xg9ry]::before { display: none; }
.rd-step-dot[b-za077xg9ry] {
    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-za077xg9ry] { background: var(--kg-positive); }
.rd-step.is-done[b-za077xg9ry]::before, .rd-step.is-active[b-za077xg9ry]::before { background: var(--kg-positive); }
.rd-step.is-active .rd-step-dot[b-za077xg9ry] {
    width: 11px;
    height: 11px;
    margin: -1px;
    background: var(--kg-panel);
    border: 3px solid var(--kg-positive);
}
.rd-step.is-negative .rd-step-dot[b-za077xg9ry] { background: var(--kg-warning); }
.rd-step.is-negative[b-za077xg9ry]::before { background: var(--kg-warning); }
.rd-step-label[b-za077xg9ry] { text-align: center; }
.rd-step.is-active .rd-step-label[b-za077xg9ry] { color: var(--kg-body); }
.rd-step.is-negative .rd-step-label[b-za077xg9ry] { 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-za077xg9ry] {
    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-za077xg9ry] {
    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-za077xg9ry] { padding-left: 0; border-left: 0; }
.rd-strip-cell:last-child[b-za077xg9ry] { padding-right: 0; }
.rd-strip-value[b-za077xg9ry] { font-size: 15px; font-weight: 500; color: var(--kg-ink); overflow-wrap: anywhere; }
.rd-strip-value--money[b-za077xg9ry] { font-weight: 600; font-variant-numeric: tabular-nums; }
/* A secondary fact under a strip value — quieter than the value, louder than the label. The cell is
   already a column with a 7px gap, so this needs no spacing of its own. */
.rd-strip-sub[b-za077xg9ry] { font-size: 13px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.rd-strip-value .kg-cur[b-za077xg9ry] { font-size: 12px; }
.rd-arrow[b-za077xg9ry] { color: var(--kg-faint); }

.rd-cancelled[b-za077xg9ry] { margin-top: 24px; }
.rd-notfound[b-za077xg9ry] { 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-za077xg9ry] {
    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-za077xg9ry],
.rd-panel[b-za077xg9ry],
.rd-docs[b-za077xg9ry],
.rd-comments[b-za077xg9ry] { display: block; }

/* The narrative column: the one narrative card, then the comments card hanging off its bottom edge. */
.rd-column[b-za077xg9ry] { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rd-main[b-za077xg9ry] { 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-za077xg9ry] { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.rd-section[b-za077xg9ry] { margin-bottom: 40px; }
.rd-section:last-child[b-za077xg9ry] { margin-bottom: 0; }
.rd-section-head[b-za077xg9ry] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.rd-section-meta[b-za077xg9ry] { 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-za077xg9ry] {
    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-za077xg9ry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 24px;
    row-gap: 30px;
    overflow: hidden;
}
.rd-stop[b-za077xg9ry] { position: relative; min-width: 0; }
.rd-stop-track[b-za077xg9ry] { position: relative; height: 12px; margin-bottom: 14px; }
.rd-stop-track[b-za077xg9ry]::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-za077xg9ry]::before { display: none; }
.rd-stop-marker[b-za077xg9ry] {
    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-za077xg9ry] { background: var(--kg-ink); }
.rd-stop-kind[b-za077xg9ry] { display: block; }
.rd-stop-when[b-za077xg9ry] { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-top: 8px; }
.rd-stop-date[b-za077xg9ry] { font-size: 14px; font-weight: 600; color: var(--kg-ink); font-variant-numeric: tabular-nums; }
.rd-stop-time[b-za077xg9ry] { font-size: 13px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.rd-stop-site[b-za077xg9ry] { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--kg-ink); text-wrap: pretty; }
.rd-stop-address[b-za077xg9ry] { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--kg-body); overflow-wrap: anywhere; }
.rd-stop-note[b-za077xg9ry] { margin-top: 6px; font-size: 12.5px; color: var(--kg-muted); }

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

/* Warehouse trucks: a dense ruled row. */
[b-za077xg9ry] .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-za077xg9ry] { font-weight: 500; color: var(--kg-ink); min-width: 0; }
.rd-truck-when[b-za077xg9ry], .rd-truck-qty[b-za077xg9ry] { color: var(--kg-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-truck-qty[b-za077xg9ry] { text-align: right; }

/* Cargo table */
.rd-cargo[b-za077xg9ry] { margin: 0; }
.rd-cargo-idx[b-za077xg9ry] { font-size: 12.5px; color: var(--kg-faint); font-variant-numeric: tabular-nums; }
.rd-cargo-type[b-za077xg9ry] { font-size: 14.5px; font-weight: 500; color: var(--kg-ink); min-width: 0; }
.rd-cargo-qty[b-za077xg9ry] { margin-left: 4px; font-weight: 500; color: var(--kg-muted); white-space: nowrap; }
.rd-cargo-comment[b-za077xg9ry] { display: block; font-size: 12.5px; font-weight: 400; color: var(--kg-muted); }
.rd-cargo-num[b-za077xg9ry] { font-size: 14px; color: var(--kg-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-cargo-stop[b-za077xg9ry] { 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-za077xg9ry] {
    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-za077xg9ry] { margin-bottom: 0; min-width: 0; }

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

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

.rd-offers[b-za077xg9ry] { margin-bottom: 14px; }
.rd-offer[b-za077xg9ry] {
    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-za077xg9ry] { border-color: var(--kg-accent); background: var(--kg-hover); }
.rd-offer input[b-za077xg9ry] { margin-top: 3px; accent-color: var(--kg-accent); }
.rd-offer-text[b-za077xg9ry] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-offer-rate[b-za077xg9ry] { font-size: 15px; font-weight: 600; color: var(--kg-ink); font-variant-numeric: tabular-nums; }
.rd-offer-rate .kg-cur[b-za077xg9ry] { font-size: 12px; }
.rd-offer-meta[b-za077xg9ry] { font-size: 12.5px; color: var(--kg-muted); }
.rd-check[b-za077xg9ry] { 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-za077xg9ry] { margin-top: 3px; accent-color: var(--kg-accent); }
.rd-check-help[b-za077xg9ry] { display: block; margin-top: 2px; font-size: 12px; color: var(--kg-muted); }

/* The invoice sheet */
.rd-sheet-state[b-za077xg9ry] { font-size: 12.5px; font-weight: 600; }
.rd-sheet-number[b-za077xg9ry] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.rd-sheet-dates[b-za077xg9ry] { margin-top: 4px; font-size: 12.5px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.rd-sheet-amount[b-za077xg9ry] { margin-top: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-sheet-line[b-za077xg9ry] { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--kg-body); }
.rd-sheet-line--faint[b-za077xg9ry] { color: var(--kg-muted); font-size: 12.5px; }
.rd-sheet-line strong[b-za077xg9ry] { font-weight: 600; color: var(--kg-ink); }
.rd-sheet-check[b-za077xg9ry] { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
/* Divides the awaiting-POD status from the actions below it - the card's own divider idiom
   (.rd-ledger, .rd-panel-links--secondary). Short padding on purpose: the first thing inside already
   carries its own margin-top, and matching --secondary's 12px would open a visible gap under the rule. */
.rd-sheet-split[b-za077xg9ry] { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--kg-rule-divider); }
.rd-sheet-action[b-za077xg9ry] { display: block; margin-top: 8px; }
.rd-sheet-shared[b-za077xg9ry] { 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-za077xg9ry] { display: block; margin-top: 4px; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.rd-ledger[b-za077xg9ry] { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--kg-rule-divider); }
.rd-ledger-row[b-za077xg9ry] {
    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-za077xg9ry] { font-size: 15px; font-weight: 600; color: var(--kg-ink); }
.rd-ledger-row .kg-money.kg-accent-text[b-za077xg9ry] { color: var(--kg-accent-text); }
.rd-ledger-row .kg-cur[b-za077xg9ry] { font-size: 12px; }
.rd-sheet-actions[b-za077xg9ry] { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kg-rule-divider); }
.rd-sheet-foot[b-za077xg9ry] { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--kg-faint); text-wrap: pretty; }
.rd-tool[b-za077xg9ry] { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--kg-rule-divider); }
.rd-tool-title[b-za077xg9ry] { font-size: 13px; font-weight: 600; color: var(--kg-ink); }
/* A form inside a tool (record a payment, edit notes): each label starts its own row with air above it,
   and the control sits close under its label rather than under the previous control. */
.rd-tool .kg-flabel[b-za077xg9ry] { display: block; margin-top: 12px; margin-bottom: 0; }
.rd-tool .kg-flabel + .rd-input[b-za077xg9ry] { margin-top: 4px; }
.rd-input[b-za077xg9ry], .rd-select[b-za077xg9ry] {
    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-za077xg9ry], .rd-select:focus[b-za077xg9ry] { outline: 2px solid var(--kg-accent); outline-offset: 1px; }

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

/* Fuel estimate card: one display-sized figure; its working is FuelBreakdown. */
.rd-fuel-amt[b-za077xg9ry] { font-family: var(--kg-font-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--kg-ink); font-variant-numeric: tabular-nums; }

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

/* Comments — the staff thread, its own card under the narrative. Same head chrome as the documents
   card; the entries are plain rows, not cards, so a long thread reads as one column of notes. */
.rd-comments .rd-section-head[b-za077xg9ry] { margin-bottom: 8px; }
.rd-comment-list[b-za077xg9ry] { margin: 0 0 16px; }
.rd-comment[b-za077xg9ry] { padding: 12px 0; border-top: 1px solid var(--kg-rule-divider); }
.rd-comment:first-child[b-za077xg9ry] { border-top: 0; padding-top: 0; }
.rd-comment-head[b-za077xg9ry] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.rd-comment-author[b-za077xg9ry] { font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.rd-comment-when[b-za077xg9ry] { font-size: 12px; color: var(--kg-muted); font-variant-numeric: tabular-nums; }
.rd-comment-actions[b-za077xg9ry] { margin-left: auto; display: flex; gap: 14px; }
.rd-comment-actions .kg-action[b-za077xg9ry] { font-size: 13px; }
/* pre-wrap: the author's line breaks are the only structure a note has. */
.rd-comment-text[b-za077xg9ry] { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--kg-body); white-space: pre-wrap; overflow-wrap: anywhere; }
/* One line tall at rest (kg-in--area's 14px padding is for the long terms texts); still resizable,
   but not below that one line — the drag handle would otherwise squash it to an unreadable slot. */
.rd-comment-input[b-za077xg9ry] { width: 100%; margin-top: 8px; padding-top: 8px; padding-bottom: 8px; min-height: calc(1lh + 18px); }
.rd-comment-form[b-za077xg9ry] { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.rd-comment-form .kg-action[b-za077xg9ry] { font-size: 13px; }

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

/* ── Narrow ── */
@media (max-width: 1199.98px) {
    .rd-body[b-za077xg9ry] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .rd-side[b-za077xg9ry] { order: -1; }
    .rd-strip[b-za077xg9ry] { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .rd-strip-cell:last-child[b-za077xg9ry] { padding-right: 22px; }
}
@media (max-width: 767.98px) {
    .rd-identity[b-za077xg9ry] { flex-direction: column; }
    .rd-identity-side[b-za077xg9ry] { align-items: flex-start; }
    .rd-halves[b-za077xg9ry] { 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-za077xg9ry] { 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-za077xg9ry] { overflow-x: auto; margin: 0 -14px; padding: 0 14px; }
[b-za077xg9ry] .rd-cargo .kg-rowhead,
[b-za077xg9ry] .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-za077xg9ry] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 2px;
}
.rd-truck-item[b-za077xg9ry] {
    padding: 2px 8px;
    border: 1px solid var(--kg-rule-control);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--kg-secondary);
    white-space: nowrap;
}

/* ── Resend panel: who gets this copy ─────────────────────────────────────────────────────────
   A recipient row is a checkbox, the address, and (for the firm's own) a quiet tag. The address
   is the part that can be long, so it is the part that shrinks — the tag and the box never do. */
.rd-resend-row[b-za077xg9ry] { display: flex; align-items: center; gap: 6px; margin-top: 6px; cursor: pointer; }
/* Shrinks but never grows, so the "main" tag sits against the address it describes instead of being
   pushed to the far edge of the card by a spacer of empty row. */
.rd-resend-address[b-za077xg9ry] { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rd-resend-tag[b-za077xg9ry] {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kg-faint);
}
/* Separated from the recipient list above it: it answers a different question. */
.rd-resend-save[b-za077xg9ry] { display: flex; align-items: center; margin-top: 12px; cursor: pointer; }

/* ── Subcontract dialog: the two "which part" cards ──
   Low, side by side. Each draws the split it stands for: the carrier's part solid, ours dashed, the handover
   as the diamond between them. Chosen = the accent border and the drawing in accent; nothing chosen = the
   whole route, which is why there is no third card. */
.rd-leg-cards[b-za077xg9ry] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rd-leg-card[b-za077xg9ry] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 9px 14px;
    border: 1px solid var(--kg-rule-control);
    border-radius: 12px;
    background: #fff;
    color: var(--kg-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.rd-leg-card:hover[b-za077xg9ry] { background: var(--kg-hover); }
/* The inset ring thickens the border to 2px without moving the content by a pixel. */
.rd-leg-card.is-on[b-za077xg9ry] { border-color: var(--kg-accent); box-shadow: inset 0 0 0 1px var(--kg-accent); background: rgba(var(--kg-accent-rgb), .045); }
.rd-leg-route[b-za077xg9ry] { flex: 0 0 auto; width: 64px; height: 14px; overflow: visible; }
.rd-leg-theirs[b-za077xg9ry] { stroke: var(--kg-ink); stroke-width: 2.5; stroke-linecap: round; }
.rd-leg-ours[b-za077xg9ry] { stroke: var(--kg-faint); stroke-width: 1.5; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.rd-leg-dot[b-za077xg9ry] { fill: var(--kg-ink); }
.rd-leg-dot--ours[b-za077xg9ry] { fill: #fff; stroke: var(--kg-faint); stroke-width: 1.5; }
.rd-leg-handover[b-za077xg9ry] { fill: #fff; stroke: var(--kg-ink); stroke-width: 1.5; }
.is-on .rd-leg-theirs[b-za077xg9ry], .is-on .rd-leg-handover[b-za077xg9ry] { stroke: var(--kg-accent); }
.is-on .rd-leg-dot:not(.rd-leg-dot--ours)[b-za077xg9ry] { fill: var(--kg-accent); }
.rd-leg-text[b-za077xg9ry] { display: flex; flex-direction: column; min-width: 0; }
.rd-leg-title[b-za077xg9ry] { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.rd-leg-sub[b-za077xg9ry] { font-size: 12px; line-height: 1.3; color: var(--kg-secondary); }
@media (max-width: 575.98px) { .rd-leg-cards[b-za077xg9ry] { grid-template-columns: 1fr; } }

/* The handover rail: the journey's markers (ring = loading, dot = unloading) and kind label, the part
   cards' line (the carrier's part solid, ours dotted) and their diamond. Horizontal while it fits its own
   width, the vertical journey below 600px of it. Each item draws its own two half-lines, so the solid
   and dotted halves meet exactly at the handover. */
.rd-ho-wrap[b-za077xg9ry] { container-type: inline-size; overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.rd-ho[b-za077xg9ry] {
    list-style: none;
    margin: 0;
    padding: 30px 0 6px;
    display: grid;
    grid-template-columns: var(--rd-ho-cols);
    min-width: min-content;
}
.rd-ho-item[b-za077xg9ry] { position: relative; min-width: 0; }
.rd-ho-hit[b-za077xg9ry] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.rd-ho-hit.is-static[b-za077xg9ry] { cursor: default; }
.rd-ho-hit:focus-visible[b-za077xg9ry] { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
.rd-ho-item:not(.rd-ho-gap) > button.rd-ho-hit:hover[b-za077xg9ry] { background: var(--kg-hover); }

.rd-ho-track[b-za077xg9ry] { position: relative; display: block; flex: none; width: 100%; height: 16px; }
.rd-ho-seg[b-za077xg9ry] { position: absolute; top: 6.75px; height: 2.5px; }
.rd-ho-seg-a[b-za077xg9ry] { left: 0; right: 50%; }
.rd-ho-seg-b[b-za077xg9ry] { left: 50%; right: 0; }
.rd-ho-item:first-child .rd-ho-seg-a[b-za077xg9ry], .rd-ho-item:last-child .rd-ho-seg-b[b-za077xg9ry] { display: none; }
.rd-ho-seg.is-theirs[b-za077xg9ry] { background: var(--kg-ink); }
.rd-ho-seg.is-ours[b-za077xg9ry] { background: repeating-linear-gradient(90deg, var(--kg-faint) 0 2px, transparent 2px 6px) center / 100% 1.75px no-repeat; }

.rd-ho-mark[b-za077xg9ry] {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 8px;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--kg-ink);
    border-radius: 50%;
    background: var(--kg-panel);
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.rd-ho-item.is-dropoff .rd-ho-mark[b-za077xg9ry] { background: var(--kg-ink); }
.rd-ho-gap .rd-ho-mark[b-za077xg9ry] {
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--kg-faint);
    border-radius: 1.5px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.rd-ho-item.is-handover .rd-ho-mark[b-za077xg9ry] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--kg-accent);
    border-radius: 2px;
    background: var(--kg-panel);
    transform: translate(-50%, -50%) rotate(45deg);
}
.rd-ho-item:not(.rd-ho-gap) > button.rd-ho-hit:hover .rd-ho-mark[b-za077xg9ry] { box-shadow: 0 0 0 4px rgba(var(--kg-accent-rgb), .16); }
.rd-ho-gap .rd-ho-hit:hover .rd-ho-mark[b-za077xg9ry] { border-color: var(--kg-accent); transform: translate(-50%, -50%) rotate(45deg) scale(1.35); }
/* A bigger target than the drawing: the diamond is small, the finger is not. */
.rd-ho-gap .rd-ho-hit[b-za077xg9ry]::before { content: ""; position: absolute; inset: -14px -2px -12px; }

.rd-ho-text[b-za077xg9ry] { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 10px; padding: 0 6px; min-width: 0; max-width: 100%; }
.rd-ho-text > .kg-micro[b-za077xg9ry] { font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
.rd-ho-city[b-za077xg9ry] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); overflow-wrap: anywhere; }
.rd-ho-when[b-za077xg9ry] { font-size: 12.5px; color: var(--kg-secondary); font-variant-numeric: tabular-nums; text-wrap: balance; }
.rd-ho-item:not(.rd-ho-gap) > button.rd-ho-hit:hover .rd-ho-city[b-za077xg9ry] { color: var(--kg-accent-text); }

/* Our part of the route steps back; the carrier's part stays in ink. */
.rd-ho-item.is-ours .rd-ho-city[b-za077xg9ry] { color: var(--kg-muted); font-weight: 500; }
.rd-ho-item.is-ours .kg-micro[b-za077xg9ry], .rd-ho-item.is-ours .rd-ho-when[b-za077xg9ry] { color: var(--kg-faint); }
.rd-ho-item.is-ours .rd-ho-mark[b-za077xg9ry] { border-color: var(--kg-faint); }
.rd-ho-item.is-ours.is-dropoff .rd-ho-mark[b-za077xg9ry] { background: var(--kg-faint); }

.rd-ho-flag[b-za077xg9ry] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kg-accent-text);
    pointer-events: none;
}

@container (max-width: 599.98px) {
    .rd-ho[b-za077xg9ry] { grid-template-columns: 1fr; padding: 4px 0; min-width: 0; }
    .rd-ho-hit[b-za077xg9ry] { flex-direction: row; align-items: stretch; text-align: left; padding: 0; }
    .rd-ho-track[b-za077xg9ry] { width: 24px; height: auto; }
    .rd-ho-seg[b-za077xg9ry] { width: 2.5px; height: auto; }
    .rd-ho-seg-a[b-za077xg9ry] { left: 10.75px; right: auto; top: 0; bottom: 50%; }
    .rd-ho-seg-b[b-za077xg9ry] { left: 10.75px; right: auto; top: 50%; bottom: 0; }
    .rd-ho-seg.is-ours[b-za077xg9ry] { background: repeating-linear-gradient(180deg, var(--kg-faint) 0 2px, transparent 2px 6px) center / 1.75px 100% no-repeat; }
    .rd-ho-mark[b-za077xg9ry] { left: 12px; top: 50%; }
    .rd-ho-text[b-za077xg9ry] { align-items: flex-start; margin: 0 0 0 10px; padding: 7px 0; }
    .rd-ho-gap .rd-ho-hit[b-za077xg9ry] { min-height: 30px; }
    .rd-ho-gap .rd-ho-hit[b-za077xg9ry]::before { inset: 0; }
    .rd-ho-flag[b-za077xg9ry] { position: static; transform: none; align-self: center; margin-left: 10px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) { .rd-ho-mark[b-za077xg9ry] { transition: none; } }
/* /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-j3i3fb2v5v] .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-j3i3fb2v5v] .subs-table .kg-rowhead,
[b-j3i3fb2v5v] .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-gwdy1z4825] { 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-gwdy1z4825] .requests-table {
    --kg-row-cols: 150px minmax(150px, 1fr) 212px 152px 128px 132px 108px;
}
[b-gwdy1z4825] .requests-table .kg-rowhead,
[b-gwdy1z4825] .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-gwdy1z4825] .requests-table { overflow-x: auto; } }

/* The one place ellipsis is allowed, with Invoices (spec): the narrow name cell. */
[b-gwdy1z4825] .requests-table .kg-name,
[b-gwdy1z4825] .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-gwdy1z4825] .requests-day {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 14px 9px;
}
[b-gwdy1z4825] .requests-day:not(:first-of-type) { padding-top: 24px; }
[b-gwdy1z4825] .requests-day-meta { font-size: 12.5px; color: var(--kg-faint); }

[b-gwdy1z4825] .requests-number { display: flex; align-items: center; gap: 10px; min-width: 0; }
[b-gwdy1z4825] .requests-check { flex: none; margin: 0; }
[b-gwdy1z4825] .requests-route { font-size: 14px; color: var(--kg-body); text-wrap: pretty; }
[b-gwdy1z4825] .requests-cargo { font-size: 13.5px; color: var(--kg-secondary); text-wrap: nowrap; }
[b-gwdy1z4825] .requests-price { font-size: 15.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
[b-gwdy1z4825] .requests-price .kg-cur { margin-left: 4px; font-size: 12px; }
[b-gwdy1z4825] .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-gwdy1z4825] .requests-table .kg-row.is-subcontracted { box-shadow: inset 3px 0 0 0 var(--kg-subcontracted); }
[b-gwdy1z4825] .requests-carrier { color: var(--kg-secondary); }


/* Selection bar: the one fixed element in the app, and only while rows are picked. */
.requests-bulk[b-gwdy1z4825] {
    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-gwdy1z4825] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px var(--kg-gutter);
    font-variant-numeric: tabular-nums;
}
.requests-bulk-count[b-gwdy1z4825] { font-size: 14px; font-weight: 600; color: var(--kg-ink); }
.requests-bulk-total[b-gwdy1z4825] { font-size: 14px; color: var(--kg-secondary); }
.requests-bulk-actions[b-gwdy1z4825] { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.requests-bulk-spacer[b-gwdy1z4825] { height: 72px; }

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

/* The wizard hands the list one confirmation line; kg-band supplies only the gutter. */
.requests-created[b-gwdy1z4825] { 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-gwdy1z4825] { padding-top: 20px; }

/* The search sits directly under the tabs; the shared 18px reads as crowded here. */
.kg-filterrow[b-gwdy1z4825] { padding-top: 28px; }
/* /Components/Pages/VisitorOrderWizard.razor.rz.scp.css */
    .wizard-step-label[b-qvvuqwq6uc] {
        transition: all 0.2s ease;
        padding: 2px 6px;
        border-radius: 6px;
    }
    .wizard-step-label[style*="cursor: pointer"]:hover[b-qvvuqwq6uc] {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
        text-decoration: underline;
    }
/* /Components/Shared/AdditionalEmailsEditor.razor.rz.scp.css */
/* Rows sit tight under the primary email field: the input takes the width, the remove sits beside it
   and never grows. The whole block is a sub-list of one field, so it indents nothing and adds no
   border — it should read as "more of the same field", not as its own section. */
.kg-emails[b-yn94fnfgtv] { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.kg-emails-row[b-yn94fnfgtv] { display: flex; align-items: center; gap: 8px; }
.kg-emails-row > input[b-yn94fnfgtv] { flex: 1 1 auto; min-width: 0; }

/* A quiet × that is still a comfortable target. Line-height 1 keeps the glyph centred against inputs
   of either host's height. */
.kg-emails-remove[b-yn94fnfgtv] { flex: 0 0 auto; padding: 2px 8px; font-size: 18px; line-height: 1; }

.kg-emails-add[b-yn94fnfgtv] { align-self: flex-start; }

/* Per-row notes (invalid / already listed) hug the row above rather than the row below. */
.kg-emails-note[b-yn94fnfgtv] { margin: 0; font-size: 12.5px; }
/* /Components/Shared/AuditChangeList.razor.rz.scp.css */
/* The field-level detail of one recorded action. Deliberately quiet: the line an admin scans is the
   headline above it, and these are what they look at once they have found it. */
.audit-changes[b-2psv25lm7k] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audit-change-group[b-2psv25lm7k] { min-width: 0; }

/* "Colet 2", "Încărcare" — the child the fields under it belong to. Same micro treatment as a section
   label, so it reads as a heading over its lines rather than as another value. */
.audit-change-child[b-2psv25lm7k] {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kg-faint);
}

.audit-change-lines[b-2psv25lm7k] { list-style: none; margin: 0; padding: 0; }

/* Label left, values right, wrapping as one unit so a long address never splits from its arrow. */
.audit-change[b-2psv25lm7k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 2px 0;
    min-width: 0;
    font-size: 13px;
}

.audit-change-field[b-2psv25lm7k] { color: var(--kg-muted); }
.audit-change-field[b-2psv25lm7k]::after { content: ":"; }

.audit-change-values[b-2psv25lm7k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
}

/* A comment's text or a cancellation reason: each side on its own line, with the arrow between them. */
.audit-change-values.is-stacked[b-2psv25lm7k] { flex-direction: column; align-items: flex-start; }

.audit-value[b-2psv25lm7k] { color: var(--kg-ink); overflow-wrap: anywhere; }
/* The absent side of a value that was added or cleared — an em dash carries no weight of its own. */
.audit-value--none[b-2psv25lm7k] { color: var(--kg-faint); }
.audit-change-arrow[b-2psv25lm7k] { color: var(--kg-faint); }
/* /Components/Shared/DatePicker.razor.rz.scp.css */
.kg-datepicker[b-x9nzravwnr] {
    position: relative;
    width: 100%;
}

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

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

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

.kg-field-icon[b-x9nzravwnr] {
    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-popover[b-x9nzravwnr] {
    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-x9nzravwnr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

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

.kg-nav[b-x9nzravwnr] {
    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-x9nzravwnr] {
    background: var(--kg-accent);
    color: var(--kg-panel);
}

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

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

.kg-dp-head[b-x9nzravwnr] {
    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-x9nzravwnr] {
    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-x9nzravwnr] {
    background: rgba(var(--bs-primary-rgb, 26, 115, 232), 0.12);
}

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

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

.kg-dp-footer[b-x9nzravwnr] {
    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-x9nzravwnr] {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kg-accent);
}

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

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

/* Validation error state */
.kg-field-input.kg-invalid[b-x9nzravwnr] {
    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-momfc6thdk] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* /Components/Shared/Fleet/CouplingPicker.razor.rz.scp.css */
/* Couple / decouple — the card's own layout. theme.css owns the form controls and the chips. */

.cp-current[b-bqwpkqdeen] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* Trailer → tractor, read as one fact. Tabular figures so two plates of different widths still line up
   with the pairs in the history table below. */
.cp-pair[b-bqwpkqdeen] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cp-plate[b-bqwpkqdeen] { font-size: 15px; letter-spacing: .04em; }

.cp-since[b-bqwpkqdeen] { color: var(--kg-muted); }

.cp-notes[b-bqwpkqdeen] { color: var(--kg-body); font-size: 13.5px; max-width: 60ch; }

.cp-warn[b-bqwpkqdeen] { max-width: 60ch; }

.cp-detach[b-bqwpkqdeen] { margin-top: 4px; }

/* ── Attach ──────────────────────────────────────────────────────────────────────────────── */
.cp-attach[b-bqwpkqdeen] { display: flex; flex-direction: column; gap: 12px; }

.cp-none[b-bqwpkqdeen] { margin: 0; }

/* Narrow on purpose: a plate select and a short note do not want the width of the card. */
.cp-form[b-bqwpkqdeen] { max-width: 420px; }
.cp-form .form-label[b-bqwpkqdeen] { margin-bottom: 4px; }
/* /Components/Shared/Fleet/DocumentTable.razor.rz.scp.css */
/* The documents table — its own layout; theme.css owns the rows, chips and form controls. */

.dt-wrap[b-2670a1pgfh] { display: flex; flex-direction: column; gap: 12px; }

.dt-head[b-2670a1pgfh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dt-headings[b-2670a1pgfh] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.dt-title[b-2670a1pgfh] {
    margin: 0;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* What is missing, as buttons: the reader came here to fix exactly this, so each one opens the form with
   that type already chosen. */
.dt-missing[b-2670a1pgfh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--kg-warning);
}

.dt-actions[b-2670a1pgfh] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Type (+ issuer beneath) · number · date · standing · cost · actions. */
.dt-table[b-2670a1pgfh] { --kg-row-cols: minmax(0, 1fr) 150px 112px 150px 116px 190px; }
.dt-table .kg-rowhead[b-2670a1pgfh],
.dt-table .kg-row[b-2670a1pgfh] { min-width: 900px; }

/* A superseded row is history: readable, and plainly not the one in force. */
.dt-row--past[b-2670a1pgfh] { opacity: .62; }

.dt-type[b-2670a1pgfh] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dt-typename[b-2670a1pgfh] { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dt-number[b-2670a1pgfh],
.dt-date[b-2670a1pgfh],
.dt-cost[b-2670a1pgfh] { font-variant-numeric: tabular-nums; font-size: 13px; }

.dt-number[b-2670a1pgfh] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dt-rowactions[b-2670a1pgfh] { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.dt-delete[b-2670a1pgfh] { color: var(--kg-warning); }

/* ── The dialog ───────────────────────────────────────────────────────────────────────────── */
.dt-fields[b-2670a1pgfh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 18px;
}

.dt-field[b-2670a1pgfh] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-field > .form-label[b-2670a1pgfh] { margin-bottom: 0; }
.dt-field--wide[b-2670a1pgfh] { grid-column: 1 / -1; }

.dt-suggest[b-2670a1pgfh] { align-self: flex-start; }

@media (max-width: 720px) {
    .dt-fields[b-2670a1pgfh] { grid-template-columns: minmax(0, 1fr); }
    .dt-head[b-2670a1pgfh] { flex-direction: column; align-items: stretch; }
}
/* /Components/Shared/Fleet/DriverForm.razor.rz.scp.css */
/* The driver form's own layout, moved here with the fields when the add page and the detail page became
   one form — scoped CSS follows the markup. Deliberately the same shape as VehicleForm: the two are read
   in the same session, and a driver's fields laid out differently would read as a different app. */
.drvd-groups[b-879arjs2od] { display: flex; flex-direction: column; gap: 30px; }

.drvd-group[b-879arjs2od] { display: flex; flex-direction: column; gap: 12px; }

.drvd-grouphead[b-879arjs2od] {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kg-rule-strip);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.drvd-fields[b-879arjs2od] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
}

.drvd-field[b-879arjs2od] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.drvd-field > .form-label[b-879arjs2od] { margin-bottom: 0; }

.drvd-fields--wide[b-879arjs2od] { grid-template-columns: minmax(0, 1fr); }
.drvd-field--wide[b-879arjs2od] { max-width: 720px; }

.drvd-field--checks[b-879arjs2od] { justify-content: flex-end; gap: 4px; padding-bottom: 6px; }
.drvd-field--checks .form-check[b-879arjs2od] { display: flex; align-items: center; gap: 8px; margin: 0; }
.drvd-field--checks .form-check-input[b-879arjs2od] { margin: 0; }

@media (max-width: 720px) {
    .drvd-fields[b-879arjs2od] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Shared/Fleet/VehicleForm.razor.rz.scp.css */
/* The specification form's own layout, moved here with the fields when the add page and the detail page
   became one form. Scoped CSS follows the markup: these rules stopped applying from the detail page's
   stylesheet the moment the groups stopped being rendered by it.

   Groups stacked, fields in a responsive grid inside each. A 220px minimum keeps a number input from
   collapsing to a box too narrow to read its own value. */
.fvd-groups[b-yltaw6q5ky] { display: flex; flex-direction: column; gap: 30px; }

.fvd-group[b-yltaw6q5ky] { display: flex; flex-direction: column; gap: 12px; }

.fvd-grouphead[b-yltaw6q5ky] {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kg-rule-strip);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fvd-fields[b-yltaw6q5ky] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
}

.fvd-field[b-yltaw6q5ky] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fvd-field > .form-label[b-yltaw6q5ky] { margin-bottom: 0; }

/* The notes field wants the whole row, not a 220px cell. */
.fvd-fields--wide[b-yltaw6q5ky] { grid-template-columns: minmax(0, 1fr); }
.fvd-field--wide[b-yltaw6q5ky] { max-width: 720px; }

/* Two checkboxes side by side, aligned with the inputs beside them rather than with their labels. */
.fvd-field--checks[b-yltaw6q5ky] {
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 6px;
}
.fvd-field--checks .form-check[b-yltaw6q5ky] { display: flex; align-items: center; gap: 8px; margin: 0; }
.fvd-field--checks .form-check-input[b-yltaw6q5ky] { margin: 0; }

@media (max-width: 720px) {
    .fvd-fields[b-yltaw6q5ky] { grid-template-columns: minmax(0, 1fr); }
}

/* ── The new driver, entered beside the vehicle ───────────────────────────────────────────────
   Boxed and indented, because it is a record of its OWN being created here rather than more fields
   about the truck. Its group headings come from DriverForm and read as sub-sections inside it. */
.fvd-newdriver[b-yltaw6q5ky] {
    margin-top: 6px;
    padding: 16px 18px;
    border: 1px solid var(--kg-rule-strip);
    border-radius: 10px;
    background: var(--kg-tint-ink);
}

.fvd-newdriver-note[b-yltaw6q5ky] {
    margin: 0 0 16px;
    max-width: 62ch;
    color: var(--kg-muted);
    font-size: 13px;
}
/* /Components/Shared/FuelBreakdown.razor.rz.scp.css */
/* The fuel estimate's working (FuelBreakdown): lines of small print and a disclosed per-country table. */

.fb-line[b-v91jv754jw] { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--kg-body); font-variant-numeric: tabular-nums; }
.fb-faint[b-v91jv754jw] { color: var(--kg-muted); font-size: 12.5px; }
.fb-note[b-v91jv754jw] { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--kg-muted); font-style: italic; }
.fb-warn[b-v91jv754jw] { color: var(--kg-warning); font-style: normal; }

.fb-details[b-v91jv754jw] { margin-top: 10px; }
.fb-details summary[b-v91jv754jw] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--kg-accent-text); font-size: 13px; font-weight: 500; }
.fb-details summary[b-v91jv754jw]::-webkit-details-marker { display: none; }
.fb-details summary[b-v91jv754jw]::before { content: '›'; font-size: 17px; line-height: 1; transition: transform .15s; }
.fb-details[open] summary[b-v91jv754jw]::before { transform: rotate(90deg); }

.fb-table[b-v91jv754jw] { width: 100%; max-width: 560px; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fb-table th[b-v91jv754jw] {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--kg-rule-divider);
    font-family: var(--kg-font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--kg-muted); text-align: right;
}
.fb-table td[b-v91jv754jw] { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--kg-rule-divider); text-align: right; color: var(--kg-body); white-space: nowrap; }
.fb-table th:first-child[b-v91jv754jw], .fb-table td:first-child[b-v91jv754jw] { text-align: left; white-space: normal; }
.fb-proxy[b-v91jv754jw] { display: block; font-size: 11px; color: var(--kg-muted); }
/* /Components/Shared/FuelLabel.razor.rz.scp.css */
.fl-stale[b-46kyg3t66v] { color: var(--kg-warning); }

/* The stale note takes a line of its own under the title: beside it, in a narrow card head, it squeezed the no-wrap
   label into a two-by-two block. */
.kg-flabel--hint[b-46kyg3t66v] { flex-wrap: wrap; }
.fl-stale-note[b-46kyg3t66v] { flex-basis: 100%; line-height: 1.4; }
/* /Components/Shared/LoginBackdrop.razor.rz.scp.css */
/* Login v2 route-map backdrop. Values are the design's; the hexes it shares with theme.css are tokens. */

.lbg[b-29fvpsfh60] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none; /* decoration: keep the city names out of select-all and copy */
}

.lbg-route[b-29fvpsfh60] {
    fill: none;
    stroke: #c8ced1;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: .5 12;
}
.lbg-route--main[b-29fvpsfh60] { stroke: var(--kg-hairline-ink); }

.lbg-ring[b-29fvpsfh60] { fill: none; stroke-width: 2; }
.lbg-ring--sage[b-29fvpsfh60] { stroke: var(--kg-positive); stroke-opacity: .18; }
.lbg-ring--accent[b-29fvpsfh60] { stroke: var(--kg-accent); stroke-opacity: .22; }

.lbg-city[b-29fvpsfh60] {
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .14em;
    fill: var(--kg-muted);
}
.lbg-city--minor[b-29fvpsfh60] { font-size: 10px; fill: var(--kg-faint); }

/* The design's kg-drive: fade in over the first 4%, ride the whole path at an even pace, fade out over
   the last 4%. Durations and delays are per mover, inline. */
.lbg-mover[b-29fvpsfh60] {
    offset-rotate: 0deg;
    transform-box: fill-box;
    transform-origin: center;
    animation-name: lbg-drive-b-29fvpsfh60;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.lbg-truck-halo[b-29fvpsfh60] { fill: rgba(226, 98, 42, .16); }
.lbg-truck[b-29fvpsfh60] { fill: var(--kg-accent); filter: drop-shadow(0 6px 8px rgba(20, 24, 27, .18)); }
.lbg-truck-icon[b-29fvpsfh60] {
    fill: none;
    stroke: var(--kg-on-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lbg-dot--ink[b-29fvpsfh60] { fill: var(--kg-ink); }
.lbg-dot--sage[b-29fvpsfh60] { fill: var(--kg-positive); }

@keyframes lbg-drive-b-29fvpsfh60 {
    0% { offset-distance: 0%; opacity: 0; }
    4% { opacity: 1; }
    96% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* No motion: every mover parks 22% of the way along its route, as the design does. */
@media (prefers-reduced-motion: reduce) {
    .lbg-mover[b-29fvpsfh60] { animation: none; offset-distance: 22%; }
}
/* /Components/Shared/RequestHistoryCard.razor.rz.scp.css */
/* The order's history, as a vertical rail: one marker per action, a hairline running between them.
   Same vocabulary as the journey rail on the same page (.rd-stop in RequestDetail.razor.css), turned
   through ninety degrees — there the steps are places, here they are moments. */
.rd-history[b-84dlhh4ger] { display: block; }
.rd-history .rd-section-head[b-84dlhh4ger] { margin-bottom: 8px; }

.rd-history-controls[b-84dlhh4ger] { display: flex; align-items: center; gap: 12px; }

.rd-hist-list[b-84dlhh4ger] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.rd-hist[b-84dlhh4ger] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    column-gap: 14px;
    padding-bottom: 18px;
}
.rd-hist:last-child[b-84dlhh4ger] { padding-bottom: 0; }

/* The rail: a dot on the line, and the line running down to the next one. The last entry's line stops
   at its own marker, so the rail reads as "and this is where the record begins". */
.rd-hist-track[b-84dlhh4ger] { position: relative; }
.rd-hist-track[b-84dlhh4ger]::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: -18px;
    width: 1.5px;
    background: var(--kg-rule-control);
}
.rd-hist:last-child .rd-hist-track[b-84dlhh4ger]::before { display: none; }

.rd-hist-marker[b-84dlhh4ger] {
    position: absolute;
    left: 0;
    top: 5px;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--kg-ink);
    background: var(--kg-ink);
}
/* An entry synthesized from the order's own creation stamp is not a recording — a hollow marker says so
   before the note under it does. */
.rd-hist.is-legacy .rd-hist-marker[b-84dlhh4ger] { background: var(--kg-panel); border-color: var(--kg-rule-control); }

.rd-hist-main[b-84dlhh4ger] { min-width: 0; }

.rd-hist-head[b-84dlhh4ger] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.rd-hist-what[b-84dlhh4ger] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); }
.rd-hist-when[b-84dlhh4ger] {
    font-size: 12px;
    color: var(--kg-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rd-hist-who[b-84dlhh4ger] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 3px;
}
.rd-hist-actor[b-84dlhh4ger] { font-size: 13px; color: var(--kg-secondary); }

.rd-hist-note[b-84dlhh4ger] { margin: 6px 0 0; font-size: 12.5px; color: var(--kg-faint); text-wrap: pretty; }

.rd-hist-event[b-84dlhh4ger] { margin-top: 8px; }
.rd-hist-event:first-of-type[b-84dlhh4ger] { margin-top: 6px; }

.rd-hist-action[b-84dlhh4ger] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: 13.5px;
    color: var(--kg-body);
    min-width: 0;
}
.rd-hist-subject[b-84dlhh4ger] { color: var(--kg-muted); overflow-wrap: anywhere; }

.rd-hist-more[b-84dlhh4ger] { display: flex; justify-content: center; margin-top: 4px; }
.rd-hist-more .kg-action[b-84dlhh4ger] { font-size: 13px; }
/* /Components/Shared/RestartNoticeBanner.razor.rz.scp.css */
/* The live region is always rendered (see the component) and takes no room while it is empty. Sticky, so the bar
   stays in view on a long scrolled list, and in the flow, so it pushes content down rather than covering a page's
   own header. */
.kg-restart-notice-region[b-sofzkkwnj8] {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Heads-up colour, not the warning red: nothing is wrong yet. */
.kg-restart-notice[b-sofzkkwnj8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    background: color-mix(in srgb, var(--kg-notice) 14%, var(--kg-panel));
    border-bottom: 1px solid color-mix(in srgb, var(--kg-notice) 35%, transparent);
    color: var(--kg-ink);
    font-size: .875rem;
    line-height: 1.35;
}

.kg-restart-notice[b-sofzkkwnj8]  .kg-icon {
    flex: none;
    color: var(--kg-notice);
}

/* On AnonymousLayout the top-right corner holds the fixed RO/EN switcher, which sits above this bar: keep the
   text clear of it, including when it wraps on a narrow screen. */
.kg-restart-notice--beside-language[b-sofzkkwnj8] {
    padding-inline-end: 8.5rem;
}
/* /Components/Shared/TimePicker.razor.rz.scp.css */
.kg-timefield[b-btf2ihnnuh] {
    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-btf2ihnnuh] {
    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-btf2ihnnuh] {
    border-color: var(--kg-accent);
    box-shadow: 0 0 0 2px rgba(var(--kg-accent-rgb), .25);
}

.kg-tf-seg[b-btf2ihnnuh] {
    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-btf2ihnnuh]::placeholder {
    color: var(--kg-faint);
}

.kg-tf-sep[b-btf2ihnnuh] {
    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-btf2ihnnuh] {
    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-btf2ihnnuh] {
    background: rgba(var(--bs-primary-rgb, 26, 115, 232), 0.12);
}

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

/* Transparent click-away layer */
.kg-popover[b-btf2ihnnuh] {
    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-btf2ihnnuh] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--kg-faint);
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

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

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

.kg-tp-cell[b-btf2ihnnuh] {
    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-btf2ihnnuh] {
    background: rgba(var(--bs-primary-rgb, 26, 115, 232), 0.15);
}

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

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

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

.kg-compact .kg-tf-box[b-btf2ihnnuh] {
    /* 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-btf2ihnnuh] {
    width: 0.8rem;
    height: 0.8rem;
}

/* Validation error state */
.kg-tf-box.kg-invalid[b-btf2ihnnuh] {
    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-t1afioxtu8] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    margin-bottom: .2rem;
}

.kg-field-value[b-t1afioxtu8] {
    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-t1afioxtu8] {
    border-bottom: 1px solid #f1f1f4;
    padding-bottom: .65rem;
}
/* /Components/Steps/ServiceTypeStep.razor.rz.scp.css */
.service-card[b-ts4qkonjee] {
    transition: all 0.3s ease;
}
.service-card:hover[b-ts4qkonjee] {
    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-45jkzhw9ht] { margin-top: 26px; }
.wcg-panel[b-45jkzhw9ht] { font-variant-numeric: tabular-nums; padding-bottom: 22px; }

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

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

.wcg-dims[b-45jkzhw9ht] { display: flex; align-items: center; gap: 6px; }
.wcg-x[b-45jkzhw9ht] { color: var(--kg-hairline-ink); font-size: 12px; flex: none; }
.wcg-weight[b-45jkzhw9ht] { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
[b-45jkzhw9ht] .wcg-kg { width: 52px; flex: none; }
/* A line total runs to five digits ("12500") where a unit weight ran to three; the per-unit average on the
   second row shows three decimals ("3.333"). Both still fit their cells with the unit beside them. */
[b-45jkzhw9ht] .wcg-kg--total { width: 66px; }
[b-45jkzhw9ht] .wcg-kg--unit { width: 72px; }
.wcg-unit[b-45jkzhw9ht] { font-size: 12px; font-weight: 400; color: var(--kg-muted); }
.wcg-vol[b-45jkzhw9ht] { text-align: right; font-size: 13.5px; font-weight: 600; color: var(--kg-ink); }
.wcg-vol--none[b-45jkzhw9ht] { color: var(--kg-hairline-ink); }
.wcg-del[b-45jkzhw9ht] {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kg-faint);
    cursor: pointer;
}
.wcg-del:hover[b-45jkzhw9ht] { color: var(--kg-warning); }

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

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

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

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

/* Total: the same grid above a .24 rule, baseline-aligned. */
.wcg-totalrow[b-45jkzhw9ht] {
    align-items: baseline;
    margin: 22px -14px 0;
    padding: 16px 14px 0;
    border-top: 1px solid var(--kg-rule-total);
}
.wcg-totalnote[b-45jkzhw9ht] { font-size: 12.5px; color: var(--kg-muted); }
.wcg-blocknote[b-45jkzhw9ht] { color: var(--kg-warning); }
.wcg-totalldm[b-45jkzhw9ht] { font-size: 12.5px; color: var(--kg-muted); white-space: nowrap; }
.wcg-totalfig[b-45jkzhw9ht] { 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-45jkzhw9ht] { overflow-x: auto; }
    .wcg-grid[b-45jkzhw9ht] { min-width: 900px; }
    .wcg-bindrow[b-45jkzhw9ht], .wcg-noterow[b-45jkzhw9ht], .wcg-brokenrow[b-45jkzhw9ht] { 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-cd5yg53etw] { display: flex; align-items: center; gap: 10px; max-width: 760px; margin-top: 22px; }
.wcl-lookup-field[b-cd5yg53etw] { position: relative; flex: 1; }
.wcl-lookup-field[b-cd5yg53etw]  .kg-icon,
.wcl-lookup-field > svg[b-cd5yg53etw] { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--kg-muted); pointer-events: none; }
.wcl-lookup-in[b-cd5yg53etw] { padding: 11px 16px 11px 40px; }
/* Shown only for a code with no country prefix — see NeedsCountryChoice. */
.wcl-lookup-country[b-cd5yg53etw] { flex: none; width: auto; min-width: 150px; padding-top: 11px; padding-bottom: 11px; }
.wcl-lookup-btn[b-cd5yg53etw] { flex: none; padding: 11px 22px; }
.wcl-lookup-err[b-cd5yg53etw] { margin-top: 10px; }
.wcl-manual-link[b-cd5yg53etw] { margin-top: 8px; display: inline-block; }

/* Name matches, as the app's own menu directly under the lookup. */
.wcl-matches[b-cd5yg53etw] { display: block; }
.wcl-matches-menu[b-cd5yg53etw] { 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-cd5yg53etw]  .kg-menu-item { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
[b-cd5yg53etw] .wcl-match-meta { display: block; font-size: 11.5px; color: var(--kg-faint); margin-top: 2px; }

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

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

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

@media (max-width: 1099.98px) {
    .wcl-ledger[b-cd5yg53etw] { grid-template-columns: 1fr; gap: 0; }
    .wcl-grid3[b-cd5yg53etw] { grid-template-columns: 1fr 1fr; }
    .wcl-span2[b-cd5yg53etw] { grid-column: span 2; }
    .wcl-span3[b-cd5yg53etw] { grid-column: span 2; }
}
@media (max-width: 767.98px) {
    .wcl-grid3[b-cd5yg53etw], .wcl-grid2[b-cd5yg53etw] { grid-template-columns: 1fr; }
    .wcl-span2[b-cd5yg53etw] { grid-column: auto; }
    .wcl-span3[b-cd5yg53etw] { grid-column: auto; }
    .wcl-lookup[b-cd5yg53etw] { 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-cd5yg53etw] { margin-top: 9px; font-size: 13px; }
/* ...and the field it reveals, in the same cell. A second field stacked under the first, so it takes
   the gap between fields rather than the link's tighter one. */
.wcl-mailing[b-cd5yg53etw] { margin-top: 20px; }
/* /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-7dr566f6l3] {
    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-7dr566f6l3] { margin-bottom: 0; }
.wpr-route[b-7dr566f6l3] { font-weight: 600; color: var(--kg-body); }
.wpr-arrow[b-7dr566f6l3] { color: var(--kg-hairline-ink); font-weight: 400; padding: 0 4px; }
.wpr-sep[b-7dr566f6l3] { color: var(--kg-hairline-ink); }

/* The rate, display-sized: the one number this step exists for. */
.wpr-base[b-7dr566f6l3] { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
[b-7dr566f6l3] .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-7dr566f6l3] { margin-top: 16px; line-height: 1.6; }

/* The fuel estimate: a figure and its working, ruled off from the rate it sits under. */
.wpr-fuel[b-7dr566f6l3] { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kg-rule-row); }
/* The panel is wide: the "default type" note rides beside the vehicle line instead of under it. */
.wpr-fuel[b-7dr566f6l3]  .fb-vehicle { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.wpr-fuel[b-7dr566f6l3]  .fb-vehicle .fb-note { margin-top: 8px; }
.wpr-fuel-amt[b-7dr566f6l3] { font-family: var(--kg-font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--kg-ink); font-variant-numeric: tabular-nums; }

.wpr-offers-head[b-7dr566f6l3] { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.wpr-count[b-7dr566f6l3] { 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-7dr566f6l3] { display: grid; grid-template-columns: repeat(var(--wpr-cols, 3), 1fr); font-variant-numeric: tabular-nums; }
.wpr-offer[b-7dr566f6l3] { padding: 20px 24px; border-left: 1px solid var(--kg-rule-divider); min-width: 0; }
.wpr-offer:first-child[b-7dr566f6l3] { padding-left: 0; border-left: 0; }
.wpr-offer:last-child[b-7dr566f6l3] { padding-right: 0; }

.wpr-offer-head[b-7dr566f6l3] { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 16px; }
.wpr-offer-name[b-7dr566f6l3] {
    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-7dr566f6l3] { font-size: 12.5px; }

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

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

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

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

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

.wrv-head-id[b-lc27j2v6b3] { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.wrv-stepno[b-lc27j2v6b3] {
    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-lc27j2v6b3] { font-size: 16px; font-weight: 600; color: var(--kg-ink); }
.wrv-headnote[b-lc27j2v6b3] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.wrv-nowrap[b-lc27j2v6b3] { white-space: nowrap; }
.wrv-arrow[b-lc27j2v6b3] { color: var(--kg-hairline-ink); font-weight: 400; padding: 0 5px; }
.wrv-dash[b-lc27j2v6b3] { color: var(--kg-hairline-ink); }
.wrv-right[b-lc27j2v6b3] { text-align: right; }
.wrv-strong[b-lc27j2v6b3] { font-weight: 600; color: var(--kg-ink); }
.wrv-cell[b-lc27j2v6b3] { font-size: 13px; color: var(--kg-body); }
.wrv-num[b-lc27j2v6b3] { 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-lc27j2v6b3] { 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-lc27j2v6b3] { display: grid; grid-template-columns: repeat(var(--wrv-stops, 3), 1fr); padding-top: 24px; }
.wrv-stop[b-lc27j2v6b3] { padding-right: 28px; min-width: 0; }
.wrv-stop--last[b-lc27j2v6b3] { padding-right: 0; }
.wrv-track[b-lc27j2v6b3] { display: flex; align-items: center; height: 13px; }
.wrv-marker[b-lc27j2v6b3] { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; flex: none; }
.wrv-marker--load[b-lc27j2v6b3] { background: var(--kg-panel); border: 3px solid var(--kg-positive); }
.wrv-marker--drop[b-lc27j2v6b3] { background: var(--kg-ink); }
.wrv-connector[b-lc27j2v6b3] { flex: 1; height: 1.5px; background: var(--kg-rule-control); }
.wrv-kind[b-lc27j2v6b3] {
    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-lc27j2v6b3] { color: var(--kg-positive); }
.wrv-stop-name[b-lc27j2v6b3] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); }
.wrv-stop-type[b-lc27j2v6b3] { font-size: 12px; font-weight: 400; color: var(--kg-muted); }
.wrv-stop-addr[b-lc27j2v6b3] { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--kg-body); overflow-wrap: anywhere; }
.wrv-stop-when[b-lc27j2v6b3] { margin-top: 9px; font-size: 13px; color: var(--kg-body); }
.wrv-when-window[b-lc27j2v6b3] { color: var(--kg-muted); }
.wrv-overnight[b-lc27j2v6b3] { font-size: 12.5px; color: var(--kg-notice); }   /* same amber as the route step: a fact, not a fault */
.wrv-stop-ref[b-lc27j2v6b3] { margin-top: 6px; font-size: 12.5px; color: var(--kg-muted); }

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

/* 4 · Preț. */
.wrv-price[b-lc27j2v6b3] { padding-top: 14px; }
.wrv-price-grid[b-lc27j2v6b3] {
    display: grid;
    grid-template-columns: 104px 130px 116px minmax(0, 1fr) 132px;
    gap: 14px;
    align-items: center;
}
.wrv-price-head[b-lc27j2v6b3] { padding-bottom: 9px; border-bottom: 1px solid var(--kg-rule-row); }
.wrv-price-row[b-lc27j2v6b3] { 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-lc27j2v6b3] { border-bottom: 0; }
.wrv-offer-id[b-lc27j2v6b3] {
    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-lc27j2v6b3] {
    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-lc27j2v6b3] { 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-lc27j2v6b3] { grid-template-columns: 1fr; gap: 0; }
    .wrv-route[b-lc27j2v6b3] { grid-template-columns: 1fr; }
    .wrv-stop[b-lc27j2v6b3] { padding-right: 0; padding-bottom: 24px; }
    .wrv-cargo[b-lc27j2v6b3], .wrv-price[b-lc27j2v6b3] { overflow-x: auto; }
    .wrv-cargo-grid[b-lc27j2v6b3], .wrv-price-grid[b-lc27j2v6b3] { min-width: 780px; }
}
/* /Components/Wizard/WizardRouteStep.razor.rz.scp.css */
/* Step 2 — Rută: the summary strip and the spacing around the stop panels. */

/* Four cells between two .14 rules; the fourth (Distanță) holds the route distance. */
.wrt-strip[b-v7ndbgrd5y] {
    display: grid;
    /* Four cells: chain, stops, window, distance. The chain carries the longest text by far
       ("Timișoara → Brașov → Düsseldorf"), so it keeps roughly the third of the width it had when
       there were three. */
    grid-template-columns: 1.4fr 1fr 1fr 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-v7ndbgrd5y] { padding: 16px 22px; border-left: 1px solid var(--kg-rule-divider); }
.wrt-cell:first-child[b-v7ndbgrd5y] { padding-left: 0; border-left: 0; }
.wrt-cell:last-child[b-v7ndbgrd5y] { padding-right: 0; }
.wrt-cell .kg-flabel[b-v7ndbgrd5y] { margin-bottom: 9px; }
.wrt-val[b-v7ndbgrd5y] { font-size: 15px; font-weight: 500; color: var(--kg-body); }
.wrt-arrow[b-v7ndbgrd5y] { color: var(--kg-hairline-ink); padding: 0 4px; }

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

/* PROGRAM row inside each stop panel: date narrow, the rest sharing. */
[b-v7ndbgrd5y] .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-v7ndbgrd5y] .wrt-progmsgs .validation-message { margin-top: 6px; }
/* An overnight window is a fact, not a fault: amber, not the warning red. */
[b-v7ndbgrd5y] .wrt-overnight { margin-top: 14px; font-variant-numeric: tabular-nums; color: var(--kg-notice); }
[b-v7ndbgrd5y] .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-v7ndbgrd5y] {
    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-v7ndbgrd5y] { font-size: 12.5px; color: var(--kg-muted); max-width: 56ch; text-wrap: pretty; }
.wrt-add-links[b-v7ndbgrd5y] { display: flex; align-items: center; gap: 18px; flex: none; }
.wrt-add-links .kg-action[b-v7ndbgrd5y] { font-size: 13px; }

@media (max-width: 1099.98px) {
    [b-v7ndbgrd5y] .wrt-prog { grid-template-columns: 1fr 1fr; }
    /* Four across is too narrow here to hold a route chain on one line; two-by-two before the
       full stack at 768. */
    .wrt-strip[b-v7ndbgrd5y] { grid-template-columns: 1fr 1fr; }
    .wrt-cell:nth-child(odd)[b-v7ndbgrd5y] { padding-left: 0; border-left: 0; }
    .wrt-cell:nth-child(n+3)[b-v7ndbgrd5y] { border-top: 1px solid var(--kg-rule-divider); }
}
@media (max-width: 767.98px) {
    .wrt-strip[b-v7ndbgrd5y] { grid-template-columns: 1fr; }
    .wrt-cell[b-v7ndbgrd5y] { padding: 12px 0; border-left: 0; border-top: 1px solid var(--kg-rule-divider); }
    .wrt-cell:first-child[b-v7ndbgrd5y] { border-top: 0; }
    .wrt-add[b-v7ndbgrd5y] { 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-szjobt6nak] { 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-szjobt6nak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 13px 22px;
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid var(--kg-rule-divider);
}
.wsp-head--load[b-szjobt6nak] { background: rgba(47, 107, 79, .08); }
.wsp-head--drop[b-szjobt6nak] { background: rgba(20, 24, 27, .06); }

.wsp-head-id[b-szjobt6nak] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wsp-marker[b-szjobt6nak] { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: none; }
.wsp-marker--load[b-szjobt6nak] { background: var(--kg-panel); border: 3px solid var(--kg-positive); }
.wsp-marker--drop[b-szjobt6nak] { background: var(--kg-ink); }
.wsp-kind[b-szjobt6nak] {
    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-szjobt6nak] { color: var(--kg-positive); }
.wsp-head--drop .wsp-kind[b-szjobt6nak] { color: var(--kg-ink); }
.wsp-city[b-szjobt6nak] { font-size: 15px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-added[b-szjobt6nak] { font-size: 12px; color: var(--kg-muted); white-space: nowrap; }

.wsp-head-actions[b-szjobt6nak] { display: flex; align-items: center; gap: 12px; flex: none; }
.wsp-actlink[b-szjobt6nak] { font-size: 13px; }

/* The address-book dropdown. It reads as a control you can open — panel fill, control border, a
   caret — rather than as the text link this used to be, which is what made it invisible in a band
   that already carries a label, a city and a delete action. */
.wsp-pick[b-szjobt6nak] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--kg-panel);
    border: 1px solid var(--kg-rule-control);
    border-radius: var(--kg-r-pill);
    font-family: inherit;
    font-size: 13px;
    color: var(--kg-body);
    white-space: nowrap;
    cursor: pointer;
}
.wsp-pick:hover[b-szjobt6nak] { border-color: var(--kg-ink); color: var(--kg-ink); }
.wsp-pick.is-open[b-szjobt6nak] { border-color: var(--kg-ink); color: var(--kg-ink); }
.wsp-pick .bi[b-szjobt6nak] { font-size: 11px; color: var(--kg-muted); }
.wsp-pick.is-open .bi[b-szjobt6nak] { transform: rotate(180deg); }

[b-szjobt6nak] .wsp-menu { min-width: 260px; max-width: 380px; max-height: 320px; overflow-y: auto; }
/* A collected row is listed by its address, not by a short name, so an item here runs to hundreds of
   characters where the old one was a <=100-char label. kg-menu-item is nowrap, and this menu is
   right-anchored, so one long row grew the box off the left edge of the screen. Same fix the client
   picker already carries (WizardClientStep.razor.css) for full legal names. */
[b-szjobt6nak] .wsp-menu .kg-menu-item { white-space: normal; overflow-wrap: anywhere; }
.wsp-menu-empty[b-szjobt6nak] { padding: 8px 10px; font-size: 13px; color: var(--kg-muted); }
[b-szjobt6nak] .wsp-menu-search { margin: 6px 8px 8px; width: calc(100% - 16px); }
[b-szjobt6nak] .wsp-menu-meta { display: block; font-size: 11.5px; color: var(--kg-faint); }

/* Type-ahead under the firm and street inputs. The wrapper anchors the shared kg-menu (absolute,
   top: 100%) to the input rather than to the panel. The list spans the input instead of the menu's
   fixed 260–380px, so it lines up under a full-width field. */
.wsp-suggest[b-szjobt6nak] { position: relative; }
[b-szjobt6nak] .wsp-suggest-list { left: 0; right: 0; min-width: 0; max-width: none; }

.wsp-body[b-szjobt6nak] { padding: 20px 22px 22px; }
.wsp-spin[b-szjobt6nak] { 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-szjobt6nak] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 20px; }
.wsp-grid2[b-szjobt6nak] { 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-szjobt6nak] { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kg-rule-divider); }

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