/* /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-name[b-urii4ujaqy]  .kg-wordmark { font-size: 20px; }
.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/Layout/SetupLayout.razor.rz.scp.css */
.su-top[b-02surbe12f] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 20px 40px 0;
}
.su-top form[b-02surbe12f] { margin: 0; }
.su-main[b-02surbe12f] { max-width: 1040px; margin: 0 auto; }

@media (max-width: 767.98px) {
    .su-top[b-02surbe12f] { padding: 16px 16px 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 card holding one field (Hărți): the control stays a column wide, and its hint runs to the card's edge. Wrapped
   at the control's width, a one-sentence hint took two lines beside an empty right half. */
.st-field-row[b-x99nmjcn4c] { grid-column: 1 / -1; }
.st-field-row[b-x99nmjcn4c]  .kg-in { max-width: calc((100% - 20px) / 2); }

/* 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-field-row[b-x99nmjcn4c]  .kg-in { max-width: none; }
    .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 (docs/design/dashboard "Facturi"). The shared flow pieces — severity marks, the detail
   panel, lgroup, next, okline — are in css/theme.css; this file is the page's own: the two side
   cards, the list split by side, the payment-term meter, the invoice drawer, and the receivables card. */

/* Days past due, in five columns: within terms, then 1–15 / 16–30 / 31–60 / over 60. The ramp is the
   validated one (docs/design/dashboard-v2); "within terms" is the quiet hairline grey. */
.bills-page[b-110j0o3zcp] {
    display: flex; flex-direction: column;
    --x-age-0: var(--kg-hairline-ink);
    --x-age-1: #dc8a72;
    --x-age-2: #c4553b;
    --x-age-3: #a32d19;
    --x-age-4: #6b190c;
}
.bills-scope[b-110j0o3zcp] { padding-top: 14px; }

/* ── Two sides, two cards, one row — widths follow the money ───────────────────────────────
   Each card is a subgrid of the row's two rows (total, categories), so the categories of both cards
   start on one line however many currency lines either total stacks. */
.side-row[b-110j0o3zcp] { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto auto; row-gap: 0; }
.side-card[b-110j0o3zcp] { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.side-top[b-110j0o3zcp] { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.side-label[b-110j0o3zcp] { display: block; font-size: 11px; letter-spacing: .1em; color: var(--kg-ink); white-space: nowrap; }
.side-count[b-110j0o3zcp] { display: block; margin-top: 6px; }
.side-total[b-110j0o3zcp] { font-family: var(--kg-font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--kg-ink); font-variant-numeric: proportional-nums; }
.side-total .kg-cur[b-110j0o3zcp] { font-size: 14px; letter-spacing: 0; }
.side-total.is-zero[b-110j0o3zcp], .side-total.is-zero .kg-cur[b-110j0o3zcp] { color: var(--kg-hairline-ink); }
/* Stacked money: values right-aligned on each other, the codes in a column of their own. */
.money-stack[b-110j0o3zcp] { display: inline-grid; grid-template-columns: auto auto; }

/* One key per category: its meter (share of the side's invoices) over its name, money and count. */
.keys[b-110j0o3zcp] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-self: start; margin: 18px -12px -10px; }
.key[b-110j0o3zcp] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
    padding: 12px; border: 0; border-radius: 10px; background: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background-color .12s ease;
}
.key:hover:not(:disabled)[b-110j0o3zcp] { background: var(--kg-hover); }
.key.is-on[b-110j0o3zcp] { background: rgba(var(--kg-ink-rgb), .05); box-shadow: inset 0 -2px 0 var(--kg-ink); }
.key:disabled[b-110j0o3zcp] { cursor: default; }
.key-meter[b-110j0o3zcp] { display: block; align-self: stretch; height: 6px; margin-bottom: 6px; border-radius: 3px; background: var(--kg-rule-row); overflow: hidden; }
.key-meter > i[b-110j0o3zcp] { display: block; height: 100%; min-width: 6px; border-radius: 3px; transform-origin: left center; animation: bar-in-b-110j0o3zcp .5s cubic-bezier(.2, .7, .2, 1) both; transition: opacity .12s ease; }
.key-meter > i.is-block[b-110j0o3zcp] { background: var(--kg-warning); }
.key-meter > i.is-watch[b-110j0o3zcp] { background: var(--x-watch-mark); }
.key-meter > i.is-ok[b-110j0o3zcp] { background: var(--x-age-0); }
.side-card.is-filtered .key:not(.is-on) .key-meter > i[b-110j0o3zcp] { opacity: .3; }
.key .sev[b-110j0o3zcp] { font-size: 12.5px; white-space: normal; }
.key .sev[b-110j0o3zcp]::before { width: 7px; height: 7px; }
.key-amt[b-110j0o3zcp] { font-size: 15px; font-weight: 600; color: var(--kg-ink); }
.key-amt .kg-cur[b-110j0o3zcp] { font-size: 12px; }
.key-sub[b-110j0o3zcp] { font-size: 12px; color: var(--kg-faint); line-height: 1.35; }
.key.is-zero .sev[b-110j0o3zcp], .key.is-zero .key-amt[b-110j0o3zcp] { color: var(--kg-hairline-ink); font-weight: 500; }
@keyframes bar-in-b-110j0o3zcp { from { transform: scaleX(0); } to { transform: none; } }

/* The panel sits on the page canvas between cards, so it takes the card fill. */
.fpanel-box[b-110j0o3zcp] { --fp-bg: var(--kg-panel); margin-top: 18px; }
.fp-row--open[b-110j0o3zcp] { cursor: pointer; margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.fp-row--open:hover[b-110j0o3zcp] { background: var(--kg-hover); }

/* ── The list ──────────────────────────────────────────────────────────────────────────────── */
.views-row[b-110j0o3zcp] { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--kg-rule-section); }
.views[b-110j0o3zcp] { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.view[b-110j0o3zcp] { padding: 0 0 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--kg-muted); cursor: pointer; white-space: nowrap; }
.view b[b-110j0o3zcp] { margin-left: 5px; font-weight: 500; color: var(--kg-muted); }
.view:hover[b-110j0o3zcp] { color: var(--kg-ink); }
.view.is-on[b-110j0o3zcp] { color: var(--kg-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--kg-ink); }
.view.is-on b[b-110j0o3zcp] { color: var(--kg-ink); }
.views-tools[b-110j0o3zcp] { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }

.bills-table[b-110j0o3zcp] { margin-top: 14px; --kg-row-cols: 140px minmax(170px, 1.2fr) 116px minmax(200px, 1.45fr) 156px 140px; }
.bills-table .kg-rowhead[b-110j0o3zcp], .bills-table .kg-row[b-110j0o3zcp] { min-width: 1020px; }
@media (max-width: 1439.98px) { .bills-table[b-110j0o3zcp] { overflow-x: auto; } }
.bills-table .kg-row[b-110j0o3zcp] { cursor: pointer; }
.bills-table .kg-row.is-open[b-110j0o3zcp] { background: rgba(var(--kg-ink-rgb), .045); box-shadow: inset 2px 0 0 var(--kg-ink); }
/* A heavy ink rule opens each side of the list, as the cards split it. */
.side-head[b-110j0o3zcp] { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 0; padding-top: 10px; border-top: 2px solid var(--kg-ink); }
.side-head:first-of-type[b-110j0o3zcp] { margin-top: 14px; }
.side-amt[b-110j0o3zcp] { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
.side-head + .lgroup[b-110j0o3zcp] { padding-top: 12px; }

.b-num[b-110j0o3zcp] { min-width: 0; }
.b-num .kg-code[b-110j0o3zcp] { display: block; color: var(--kg-ink); }
.b-num .meta[b-110j0o3zcp] { display: block; margin-top: 2px; font-size: 12px; color: var(--kg-faint); white-space: nowrap; }
.b-num .meta.is-draft[b-110j0o3zcp] { color: var(--kg-notice); }
.b-client[b-110j0o3zcp] { min-width: 0; }
.b-client .kg-name[b-110j0o3zcp] { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-client .meta[b-110j0o3zcp] { display: block; margin-top: 2px; font-size: 12.5px; color: var(--kg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-client .meta a[b-110j0o3zcp] { color: var(--kg-body); }
.b-total[b-110j0o3zcp] { text-align: right; font-size: 14.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
.b-total .kg-cur[b-110j0o3zcp] { font-size: 12px; margin-left: 3px; }
.b-act[b-110j0o3zcp] { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.bills-quiet[b-110j0o3zcp] { color: var(--kg-secondary); }

/* Payment-term meter: the track is the term, the tick the due date at 80%, the fill time elapsed;
   past due, the overrun runs on in brick beyond the tick. */
.term[b-110j0o3zcp] { width: 150px; }
.term-track[b-110j0o3zcp] { position: relative; height: 6px; border-radius: 3px; background: var(--kg-rule-section); }
.term-fill[b-110j0o3zcp] { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--kg-body); opacity: .7; transform-origin: left center; animation: bar-in-b-110j0o3zcp .6s cubic-bezier(.2, .7, .2, 1) .2s both; }
.term-fill.is-soon[b-110j0o3zcp] { background: var(--x-watch-mark); opacity: 1; }
.term-over[b-110j0o3zcp] { position: absolute; top: 0; bottom: 0; left: 80%; border-radius: 0 3px 3px 0; background: var(--kg-warning); transform-origin: left center; animation: bar-in-b-110j0o3zcp .4s ease-out .75s both; }
.term-tick[b-110j0o3zcp] { position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--kg-ink); border-radius: 1px; }
.term-text[b-110j0o3zcp] { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 12px; color: var(--kg-faint); white-space: nowrap; }
.term-text b[b-110j0o3zcp] { font-weight: 600; color: var(--kg-body); }
.term-text b.is-over[b-110j0o3zcp] { color: var(--kg-warning); }
.term-text b.is-soon[b-110j0o3zcp] { color: var(--kg-notice); }
.term--none[b-110j0o3zcp] { font-size: 12.5px; color: var(--kg-faint); }

/* ── What is owed: the total, the age grid (open now over paid before), who owes the most ───── */
.recv-pair[b-110j0o3zcp] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 0; margin-top: 8px; }
.recv-figure[b-110j0o3zcp] { font-family: var(--kg-font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.02em; color: var(--kg-ink); white-space: nowrap; font-variant-numeric: proportional-nums; }
.recv-figure + .recv-figure[b-110j0o3zcp] { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--kg-rule-divider); }
.recv-figure .kg-cur[b-110j0o3zcp] { font-size: 18px; letter-spacing: 0; }
.recv-figure.is-zero[b-110j0o3zcp], .recv-figure.is-zero .kg-cur[b-110j0o3zcp] { color: var(--kg-hairline-ink); }
.recv-ctx[b-110j0o3zcp] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 13.5px; color: var(--kg-body); }
.recv-ctx strong[b-110j0o3zcp] { color: var(--kg-ink); font-weight: 600; }
.recv-ctx .sev[b-110j0o3zcp] { font-size: 13.5px; }
.recv-sep[b-110j0o3zcp] { width: 1px; height: 14px; background: var(--kg-rule-divider); }

/* Two blocks, unpaid now and paid before, each a head, its bar(s) and a legend of five self-naming
   columns. The currency code sits LEFT of its bar in a fixed slot (empty for the paid bar), and the
   legend starts where the bars start, so the columns of both blocks line up. */
.recv-block[b-110j0o3zcp] { --cur-w: 34px; --cur-gap: 12px; margin-top: 26px; }
.recv-block--paid[b-110j0o3zcp] { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--kg-rule-section); }
.recv-block-head[b-110j0o3zcp] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; font-size: 13.5px; color: var(--kg-secondary); }
.recv-block-head .kg-micro[b-110j0o3zcp] { color: var(--kg-ink); }
.recv-block-title.kg-micro[b-110j0o3zcp] { display: inline-flex; align-items: center; gap: 5px; }
.recv-block-text strong[b-110j0o3zcp] { color: var(--kg-ink); font-weight: 600; }
.age-bars[b-110j0o3zcp] { display: flex; flex-direction: column; gap: 6px; }
.age-line[b-110j0o3zcp] { display: grid; grid-template-columns: var(--cur-w) minmax(0, 1fr); align-items: center; gap: var(--cur-gap); }
.age-cur[b-110j0o3zcp] { font-family: var(--kg-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--kg-faint); }
.age-bar[b-110j0o3zcp] { display: flex; gap: 2px; height: 12px; }
.age-bar > span[b-110j0o3zcp] { min-width: 5px; transform-origin: left center; animation: bar-in-b-110j0o3zcp .5s cubic-bezier(.2, .7, .2, 1) both; }
.age-bar > span:first-child[b-110j0o3zcp] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.age-bar > span:last-child[b-110j0o3zcp] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.age-bar.is-empty[b-110j0o3zcp] { border-radius: 4px; background: var(--kg-rule-row); }
.age-legend[b-110j0o3zcp] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 18px; margin-top: 14px; padding-left: calc(var(--cur-w) + var(--cur-gap)); }
.age-key[b-110j0o3zcp] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.age-key-label[b-110j0o3zcp] { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 12.5px; color: var(--kg-muted); }
.age-key-label i[b-110j0o3zcp] { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.age-key b[b-110j0o3zcp] { font-size: 14.5px; font-weight: 600; color: var(--kg-ink); }
.age-key b .kg-cur[b-110j0o3zcp] { font-size: 11.5px; }
.age-key small[b-110j0o3zcp] { font-size: 12px; color: var(--kg-faint); }
.age-key.is-zero b[b-110j0o3zcp] { color: var(--kg-hairline-ink); font-weight: 500; }

.subhead[b-110j0o3zcp] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--kg-rule-section); }
.debtors[b-110j0o3zcp] { margin-top: 4px; }
.debtor[b-110j0o3zcp] {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, .9fr) minmax(0, 1.3fr) 150px;
    gap: 6px 28px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--kg-rule-divider);
}
.debtor:last-child[b-110j0o3zcp] { border-bottom: 0; }
.debtor-who[b-110j0o3zcp] { min-width: 0; }
.debtor-name[b-110j0o3zcp] { display: block; font-size: 14.5px; font-weight: 600; color: var(--kg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debtor-meta[b-110j0o3zcp] { display: block; margin-top: 2px; font-size: 12px; color: var(--kg-faint); font-weight: 500; }
/* Its slice of what is owed in its main currency: the late part in its column's colour, then the rest. */
.share-track[b-110j0o3zcp] { display: flex; height: 6px; border-radius: 3px; background: var(--kg-rule-row); overflow: hidden; }
.share-track > i[b-110j0o3zcp] { display: block; height: 100%; transform-origin: left center; animation: bar-in-b-110j0o3zcp .5s cubic-bezier(.2, .7, .2, 1) both; }
.habit[b-110j0o3zcp] { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.habit > i[b-110j0o3zcp] { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 2px; }
.habit b[b-110j0o3zcp] { display: block; font-size: 13px; font-weight: 600; }
.habit b.is-ok[b-110j0o3zcp] { color: var(--kg-positive); }
.habit b.is-watch[b-110j0o3zcp] { color: var(--kg-notice); }
.habit b.is-late[b-110j0o3zcp] { color: var(--kg-warning); }
.debtor-amt[b-110j0o3zcp] { text-align: right; font-size: 14.5px; font-weight: 600; color: var(--kg-ink); }
.debtor-amt .kg-cur[b-110j0o3zcp] { font-size: 12px; }
.debtors-more[b-110j0o3zcp] { padding-top: 12px; }
.list-more[b-110j0o3zcp] { padding: 12px 0 4px; }

/* ── The invoice's side panel ──────────────────────────────────────────────────────────────── */
.dw-backdrop[b-110j0o3zcp] { position: fixed; inset: 0; z-index: 1040; background: rgba(var(--kg-ink-rgb), .22); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.dw-backdrop.is-on[b-110j0o3zcp] { opacity: 1; pointer-events: auto; }
.dw[b-110j0o3zcp] {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1041;
    width: min(460px, 100vw); overflow-y: auto;
    display: flex; flex-direction: column;
    background: var(--kg-panel); border-left: 1px solid var(--kg-rule-control);
    transform: translateX(100%); visibility: hidden;
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s;
}
.dw.is-on[b-110j0o3zcp] { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.dw-head[b-110j0o3zcp] { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--kg-panel); border-bottom: 1px solid var(--kg-rule-section); }
.dw-head .kg-code[b-110j0o3zcp] { font-size: 13px; color: var(--kg-ink); }
.dw-close[b-110j0o3zcp] { display: inline-flex; padding: 7px; border: 0; border-radius: var(--kg-r-icon); background: none; color: var(--kg-secondary); cursor: pointer; }
.dw-close:hover[b-110j0o3zcp] { background: var(--kg-hover); color: var(--kg-ink); }
.dw-body[b-110j0o3zcp] { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.dw-client[b-110j0o3zcp] { font-family: var(--kg-font-display); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--kg-ink); }
.dw-client-meta[b-110j0o3zcp] { margin-top: 6px; font-size: 13px; color: var(--kg-secondary); }
.dw-client-meta a[b-110j0o3zcp] { color: var(--kg-body); font-weight: 500; }
.dw-amt[b-110j0o3zcp] { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--kg-rule-section); border-bottom: 1px solid var(--kg-rule-section); }
.dw-amt-fig[b-110j0o3zcp] { font-family: var(--kg-font-display); font-weight: 800; font-size: 32px; letter-spacing: -.02em; color: var(--kg-ink); white-space: nowrap; font-variant-numeric: proportional-nums; }
.dw-amt-fig .kg-cur[b-110j0o3zcp] { font-size: 15px; letter-spacing: 0; }
.dw-amt-side[b-110j0o3zcp] { text-align: right; font-size: 12.5px; color: var(--kg-secondary); }
.dw-amt-side b[b-110j0o3zcp] { display: block; font-size: 13px; font-weight: 600; color: var(--kg-ink); }
.dw .term[b-110j0o3zcp] { width: 100%; }
.dw .term-text[b-110j0o3zcp] { font-size: 12.5px; }
.dw-state .next[b-110j0o3zcp] { font-size: 14px; }
.dw-state .next .sev[b-110j0o3zcp] { font-size: 14px; }
.dw-tl-title[b-110j0o3zcp] { margin-bottom: 12px; }

.tl[b-110j0o3zcp] { list-style: none; margin: 0; padding: 0; }
.tl li[b-110j0o3zcp] { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 0 0 16px 18px; font-size: 13.5px; color: var(--kg-body); }
.tl li:last-child[b-110j0o3zcp] { padding-bottom: 0; }
.tl li[b-110j0o3zcp]::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--kg-body); }
.tl li[b-110j0o3zcp]::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; width: 1px; background: var(--kg-rule-context); }
.tl li:last-child[b-110j0o3zcp]::after { display: none; }
.tl-date[b-110j0o3zcp] { font-size: 12.5px; color: var(--kg-faint); white-space: nowrap; }
.tl li.is-block[b-110j0o3zcp] { color: var(--kg-warning); font-weight: 600; }
.tl li.is-block[b-110j0o3zcp]::before { background: var(--kg-warning); box-shadow: 0 0 0 4px rgba(var(--kg-warning-rgb), .14); }
.tl li.is-watch[b-110j0o3zcp] { color: var(--kg-notice); font-weight: 600; }
.tl li.is-watch[b-110j0o3zcp]::before { background: var(--kg-panel); border: 2px solid var(--x-watch-mark); box-sizing: border-box; }
.tl li.is-ok[b-110j0o3zcp] { color: var(--kg-positive); font-weight: 600; }
.tl li.is-ok[b-110j0o3zcp]::before { background: var(--kg-positive); }
.tl li.is-next[b-110j0o3zcp] { color: var(--kg-faint); }
.tl li.is-next[b-110j0o3zcp]::before { background: var(--kg-panel); border: 1.5px dashed var(--kg-hairline-ink); box-sizing: border-box; }

.dw-actions[b-110j0o3zcp] { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.dw-actions .kg-pill[b-110j0o3zcp] { align-self: flex-start; }
.dw-more[b-110j0o3zcp] { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.dw-more .kg-action[b-110j0o3zcp] { font-size: 13.5px; }
.bills-delete[b-110j0o3zcp] { color: var(--kg-warning); }

@media (max-width: 1279.98px) {
    .side-row[b-110j0o3zcp] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 24px; }
    .side-card[b-110j0o3zcp] { display: block; grid-row: auto; }
    .fpanel-box[b-110j0o3zcp]::before { display: none; }
}
@media (max-width: 899.98px) {
    .age-legend[b-110j0o3zcp] { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; }
    .debtor[b-110j0o3zcp] { grid-template-columns: minmax(0, 1fr) auto; }
    .debtor-share[b-110j0o3zcp], .debtor-habit[b-110j0o3zcp] { grid-column: 1 / -1; }
}
@media (max-width: 719.98px) {
    .recv-figure[b-110j0o3zcp] { font-size: 32px; }
    .keys[b-110j0o3zcp] { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .key-meter > i[b-110j0o3zcp], .age-bar > span[b-110j0o3zcp], .share-track > i[b-110j0o3zcp], .term-fill[b-110j0o3zcp], .term-over[b-110j0o3zcp] { animation: none !important; }
    .dw[b-110j0o3zcp], .dw-backdrop[b-110j0o3zcp] { transition: none !important; }
}
/* /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 */
/* The dashboard as the order-to-cash flow (docs/design/dashboard). The shared pieces — severity
   marks, the detail panel, the row cells — are in css/theme.css; this file is the page's own layout:
   the headline, the cash cycle, the six stage toggles and the on-the-road rows. */

.dash[b-vhuimwvcu5] { display: flex; flex-direction: column; }
.dash-warn[b-vhuimwvcu5] { margin-top: 24px; }

/* ── Headline: EUR and RON side by side, then the cash cycle ─────────────────────────────── */
.hl[b-vhuimwvcu5] { display: grid; grid-template-columns: minmax(260px, auto) minmax(0, 1fr); gap: 40px; align-items: end; }
.hl-pair[b-vhuimwvcu5] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 0; margin-top: 8px; }
.hl-figure[b-vhuimwvcu5] { font-family: var(--kg-font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.02em; color: var(--kg-ink); white-space: nowrap; font-variant-numeric: proportional-nums; }
.hl-figure + .hl-figure[b-vhuimwvcu5] { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--kg-rule-divider); }
.hl-figure .kg-cur[b-vhuimwvcu5] { font-size: 18px; letter-spacing: 0; }
/* A currency with nothing in it still shows, faint: EUR and RON always sit in the same places. */
.hl-figure.is-zero[b-vhuimwvcu5], .hl-figure.is-zero .kg-cur[b-vhuimwvcu5] { color: var(--kg-hairline-ink); }
.hl-ctx[b-vhuimwvcu5] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: 13.5px; color: var(--kg-body); }
.hl-ctx .sev[b-vhuimwvcu5] { font-size: 13.5px; }
.hl-right[b-vhuimwvcu5] { padding-left: 40px; border-left: 1px solid var(--kg-rule-divider); }

/* The comparison sits under the track, not beside it: three 92px steps overran a third column at
   1440px, and their labels ran into the comparison and into each other. */
.cycle[b-vhuimwvcu5] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 22px; }
.cycle-lead .kg-micro[b-vhuimwvcu5] { display: block; }
.cycle-title.kg-micro[b-vhuimwvcu5], .hl-title.kg-micro[b-vhuimwvcu5] { display: flex; align-items: center; gap: 5px; }
.cycle-sub[b-vhuimwvcu5] { display: block; margin-top: 2px; }
.cycle-total[b-vhuimwvcu5] { font-family: var(--kg-font-display); font-weight: 800; font-size: 28px; color: var(--kg-ink); line-height: 1.05; margin-top: 4px; }
.cycle-total small[b-vhuimwvcu5] { font-family: var(--kg-font-ui); font-weight: 500; font-size: 13px; color: var(--kg-secondary); letter-spacing: 0; }
.cycle-track[b-vhuimwvcu5] { display: flex; gap: 2px; align-items: stretch; }
.cycle-seg[b-vhuimwvcu5] { position: relative; min-width: 92px; padding-top: 22px; outline-offset: 3px; cursor: default; }
.cycle-seg[b-vhuimwvcu5]::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--kg-ink); opacity: .78; }
.cycle-seg.is-cash[b-vhuimwvcu5]::before { opacity: .35; }
.cycle-seg-label[b-vhuimwvcu5] { position: absolute; top: 0; left: 0; right: 0; font-size: 12.5px; color: var(--kg-secondary); white-space: nowrap; }
.cycle-seg-label strong[b-vhuimwvcu5] { color: var(--kg-ink); font-weight: 600; }
/* The step's median and sample show as a .kg-tip (theme.css) on hover, focus or a tap. */
.cycle-ends[b-vhuimwvcu5] { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--kg-font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--kg-faint); }
.cycle-cmp[b-vhuimwvcu5] { grid-column: 2; font-size: 12.5px; color: var(--kg-secondary); white-space: nowrap; }
.cycle-cmp .is-better[b-vhuimwvcu5] { color: var(--kg-positive); font-weight: 600; }
.cycle-cmp .is-worse[b-vhuimwvcu5] { color: var(--kg-warning); font-weight: 600; }

/* ── The six stages: toggles that open one panel under them ─────────────────────────────────
   The open stage and the panel share one well colour, and the panel's notch points up at its
   stage: --c6/--c3 are the stage's column in the six- and three-column layouts. */
.flow[b-vhuimwvcu5] { --x-well: #f1f2ef; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--kg-rule-strip); }
.flow-stage[b-vhuimwvcu5] {
    position: relative; display: flex; flex-direction: column; gap: 7px;
    width: 100%; margin: 0; padding: 18px 22px 16px;
    border: 0; border-left: 1px solid var(--kg-rule-divider); border-radius: 0;
    background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background-color .12s ease;
}
.flow-stage:first-child[b-vhuimwvcu5] { border-left: 0; }
.flow-stage:hover[b-vhuimwvcu5] { background: var(--kg-hover); }
.flow-stage:focus-visible[b-vhuimwvcu5] { outline-offset: -2px; }
.flow-stage.is-open[b-vhuimwvcu5] { background: var(--x-well); }
/* The chevron that makes the columns read as a sequence rather than a table. */
.flow-stage:not(:last-child)[b-vhuimwvcu5]::after {
    content: ""; position: absolute; top: 22px; right: -6px; z-index: 1;
    width: 11px; height: 11px; background: var(--kg-panel);
    border-top: 1px solid var(--kg-rule-strip); border-right: 1px solid var(--kg-rule-strip);
    transform: rotate(45deg);
}
.flow-stage.is-open:not(:last-child)[b-vhuimwvcu5]::after { background: var(--x-well); }
.fs-step[b-vhuimwvcu5] { font-family: var(--kg-font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--kg-faint); }
.fs-name[b-vhuimwvcu5] { font-size: 15px; font-weight: 600; color: var(--kg-ink); line-height: 1.25; }
.fs-num[b-vhuimwvcu5] { margin-top: 6px; font-family: var(--kg-font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--kg-ink); font-variant-numeric: proportional-nums; }
.fs-num small[b-vhuimwvcu5] { font-family: var(--kg-font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kg-secondary); margin-left: 2px; }
.fs-status[b-vhuimwvcu5] { margin-top: 4px; font-size: 13px; }
.flow-toggle[b-vhuimwvcu5] { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--kg-accent); }
.flow-stage:hover .flow-toggle > span[b-vhuimwvcu5] { text-decoration: underline; text-underline-offset: 3px; }
.flow-chev[b-vhuimwvcu5] { transition: transform .18s ease; }
.flow-stage.is-open .flow-chev[b-vhuimwvcu5] { transform: rotate(180deg); }

.fpanel-box[b-vhuimwvcu5] { --fp-bg: #f1f2ef; --nx: calc((var(--c6) + .5) * 100% / 6); }
.fp-more[b-vhuimwvcu5] { padding-top: 10px; }
.fp-more .kg-action[b-vhuimwvcu5] { font-size: 13px; }

/* ── On the road ───────────────────────────────────────────────────────────────────────────
   Client and fare, then the route drawn as the bar it travels — endpoints over the bar's ends —
   and the next stop. */
.tr-sum[b-vhuimwvcu5] { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13.5px; color: var(--kg-secondary); }
.lv[b-vhuimwvcu5] { margin-top: 4px; }
.lv-row[b-vhuimwvcu5] {
    display: grid;
    grid-template-columns: minmax(250px, 1.3fr) minmax(0, 2fr) 160px 120px;
    grid-template-areas: "who track eta money";
    gap: 0 32px; align-items: center;
    margin: 0 -14px; padding: 18px 14px;
    border-bottom: 1px solid var(--kg-rule-row);
    transition: background-color .12s ease;
}
.lv-row:last-child[b-vhuimwvcu5] { border-bottom: 0; }
.lv-row:hover[b-vhuimwvcu5] { background: var(--kg-hover); }
.lv-who[b-vhuimwvcu5] { grid-area: who; min-width: 0; }
.lv-who .kg-name[b-vhuimwvcu5] { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-row > .tr-money[b-vhuimwvcu5] { grid-area: money; }
.lv-track[b-vhuimwvcu5] { grid-area: track; min-width: 0; }
.lv-route[b-vhuimwvcu5] { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 500; color: var(--kg-body); white-space: nowrap; }
.lv-route span[b-vhuimwvcu5] { overflow: hidden; text-overflow: ellipsis; }
.track[b-vhuimwvcu5] { position: relative; height: 4px; margin: 9px 0 7px; border-radius: 2px; }
.track-fill[b-vhuimwvcu5] { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--kg-ink); transform-origin: left center; animation: tr-in-b-vhuimwvcu5 .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
.track-end[b-vhuimwvcu5] { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--kg-panel); border: 2px solid var(--kg-ink); }
.track-end--from[b-vhuimwvcu5] { left: -1px; background: var(--kg-ink); }
.track-end--to[b-vhuimwvcu5] { right: -1px; border-color: var(--kg-hairline-ink); }
.track-now[b-vhuimwvcu5] { position: absolute; top: -5px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--kg-ink); animation: tr-fade-b-vhuimwvcu5 .25s ease .8s both; }
/* What is left to drive: a dotted line drifting toward the destination; the now-mark stays still.
   Three drifts, then still — and again while the row is hovered. Endless, it repainted every frame
   for as long as the page stayed open. */
.track-rest[b-vhuimwvcu5] { position: absolute; top: 0; bottom: 0; right: 0; overflow: hidden; }
/* The dots ride a layer one dot wider that slides by one dot: the compositor moves it, nothing is
   repainted per frame (a moving background-position repainted the row ~60 times a second on hover). */
.track-rest[b-vhuimwvcu5]::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: 0;
    background: radial-gradient(circle, var(--kg-faint) 1.4px, transparent 1.6px) 0 50% / 8px 4px repeat-x;
    animation: track-flow-b-vhuimwvcu5 1.1s linear 3;
}
.lv-row:hover .track-rest[b-vhuimwvcu5]::before { animation-iteration-count: infinite; }
.track.is-pending .track-end--from[b-vhuimwvcu5] { background: var(--kg-panel); border-color: var(--x-ok-mark); }
.track-dates[b-vhuimwvcu5] { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--kg-faint); white-space: nowrap; }
.lv-eta[b-vhuimwvcu5] { grid-area: eta; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--kg-body); }
.lv-eta b[b-vhuimwvcu5] { font-weight: 600; color: var(--kg-ink); }
.lv-eta span[b-vhuimwvcu5] { font-size: 13px; color: var(--kg-secondary); }
.dash-road-foot[b-vhuimwvcu5] { margin-top: 12px; }
.dash-road-empty[b-vhuimwvcu5] { margin-top: 18px; }
@keyframes tr-in-b-vhuimwvcu5 { from { transform: scaleX(0); } }
@keyframes tr-fade-b-vhuimwvcu5 { from { opacity: 0; } }
@keyframes track-flow-b-vhuimwvcu5 { to { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
    .flow-chev[b-vhuimwvcu5] { transition: none !important; }
    .track-fill[b-vhuimwvcu5], .track-now[b-vhuimwvcu5], .track-rest[b-vhuimwvcu5]::before { animation: none !important; }
}

/* ── Narrower screens ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1279.98px) {
    .hl[b-vhuimwvcu5] { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .hl-right[b-vhuimwvcu5] { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--kg-rule-divider); }
    .flow[b-vhuimwvcu5] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flow-stage:nth-child(3n + 1)[b-vhuimwvcu5] { border-left: 0; }
    .flow-stage:nth-child(n + 4)[b-vhuimwvcu5] { border-top: 1px solid var(--kg-rule-divider); }
    .flow-stage[b-vhuimwvcu5]::after { display: none; }
    .fpanel-box[b-vhuimwvcu5] { --nx: calc((var(--c3) + .5) * 100% / 3); }
}
@media (max-width: 1199.98px) {
    .lv-row[b-vhuimwvcu5] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who money" "track track" "eta eta"; gap: 10px 18px; }
    .lv-eta[b-vhuimwvcu5] { flex-direction: row; align-items: baseline; gap: 8px; }
}
@media (max-width: 719.98px) {
    .hl-figure[b-vhuimwvcu5] { font-size: 32px; }
    .cycle[b-vhuimwvcu5] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .cycle-cmp[b-vhuimwvcu5] { text-align: left; }
    .flow[b-vhuimwvcu5] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-stage[b-vhuimwvcu5] { padding: 16px; }
    .flow-stage:nth-child(n)[b-vhuimwvcu5] { border-left: 1px solid var(--kg-rule-divider); }
    .flow-stage:nth-child(2n + 1)[b-vhuimwvcu5] { border-left: 0; }
    .flow-stage:nth-child(n + 3)[b-vhuimwvcu5] { border-top: 1px solid var(--kg-rule-divider); }
    .fpanel-box[b-vhuimwvcu5] { --nx: 50%; padding: 16px; }
    .fpanel-box[b-vhuimwvcu5]::before { display: none; }
    .fp-head[b-vhuimwvcu5] { flex-direction: column; }
}
/* /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;
}

/* The untyped-vehicles note in the filter row: the sentence, then the filter that lists them. */
.fleet-untyped[b-muwkpzb7c7] { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
/* /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 cargops-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]  .cs-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-ef-notify[b-za077xg9ry] { font-size: 13px; color: var(--kg-body); }
.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; }

/* 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/SetupWizard.razor.rz.scp.css */
/* The first-run setup wizard. The rail, heading and footer are the transport wizard's construction
   (NewTransportRequest.razor.css), copied rather than shared: those rules are scoped to that page. */

.su-head[b-tkuvpo336q] { padding-top: 28px; }
.su-head h2[b-tkuvpo336q] { margin: 0; font-size: 34px; }
.su-head p[b-tkuvpo336q] { margin: 9px 0 0; font-size: 14px; color: var(--kg-secondary); max-width: 62ch; text-wrap: pretty; }

.su-notice[b-tkuvpo336q] { margin: 20px 0 0; }

/* Step rail: dot, connector, dot … across the full width of the cards below; each label positioned under its dot. */
.su-rail[b-tkuvpo336q] { padding-top: 28px; }
.su-rail-dots[b-tkuvpo336q] { display: flex; align-items: center; height: 11px; }
.su-dot[b-tkuvpo336q] { flex: none; border-radius: 50%; box-sizing: border-box; padding: 0; }
.su-dot--done[b-tkuvpo336q] { width: 9px; height: 9px; background: var(--kg-positive); border: 0; cursor: pointer; }
.su-dot--done:focus-visible[b-tkuvpo336q] { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
.su-dot--current[b-tkuvpo336q] { width: 11px; height: 11px; background: var(--kg-page); border: 3px solid var(--kg-positive); }
.su-dot--pending[b-tkuvpo336q] { width: 9px; height: 9px; background: #c8ced1; }
.su-connector[b-tkuvpo336q] { flex: 1; height: 1.5px; background: var(--kg-rule-strip); }
.su-connector--done[b-tkuvpo336q] { background: rgba(47, 107, 79, .35); }
.su-rail-labels[b-tkuvpo336q] { position: relative; height: 14px; margin-top: 10px; }
.su-rail-label[b-tkuvpo336q] {
    position: absolute;
    top: 0;
    left: var(--su-at);
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--kg-font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kg-faint);
}
.su-rail-label:first-child[b-tkuvpo336q] { transform: none; }
.su-rail-label:last-child[b-tkuvpo336q] { left: auto; right: 0; transform: none; }
.su-rail-label.is-done[b-tkuvpo336q] { color: var(--kg-muted); }
.su-rail-label.is-current[b-tkuvpo336q] { color: var(--kg-body); }

.su-content[b-tkuvpo336q] { padding-top: 34px; padding-bottom: 8px; }
.su-stephead[b-tkuvpo336q] { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.su-stephead h3[b-tkuvpo336q] { margin: 0; font-size: 25px; letter-spacing: -.01em; }
.su-stepno[b-tkuvpo336q] { font-size: 13px; color: var(--kg-secondary); white-space: nowrap; }
.su-stepsub[b-tkuvpo336q] { margin: 9px 0 0; font-size: 13px; color: var(--kg-secondary); max-width: 70ch; text-wrap: pretty; }

.su-panel[b-tkuvpo336q] { margin-top: 22px; }
.su-body[b-tkuvpo336q] { margin-top: 20px; }
.su-gap[b-tkuvpo336q] { margin-top: 18px; }
.su-grid2[b-tkuvpo336q] { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.su-grid3[b-tkuvpo336q] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.su-span2[b-tkuvpo336q] { grid-column: span 2; }
.su-anaf[b-tkuvpo336q] { margin-top: 10px; }
.su-tag[b-tkuvpo336q] { margin-left: 10px; vertical-align: middle; }

.su-note[b-tkuvpo336q] { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--kg-muted); }
.su-note[b-tkuvpo336q]  .kg-icon { flex: none; margin-top: 2px; }

/* SmartBill check: the button, then what SmartBill said, each line ticked or flagged. */
.su-check[b-tkuvpo336q] { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.su-check-note[b-tkuvpo336q] { font-size: 12.5px; color: var(--kg-muted); }
.su-check-result[b-tkuvpo336q] { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.su-check-result li[b-tkuvpo336q] { padding-left: 18px; position: relative; text-wrap: pretty; }
.su-check-result li[b-tkuvpo336q]::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; }
.su-check-result .is-ok[b-tkuvpo336q]::before { background: var(--kg-positive); }
.su-check-result .is-gap[b-tkuvpo336q]::before { background: var(--kg-warning); }
.su-provider-msg[b-tkuvpo336q] { display: block; margin-top: 2px; color: var(--kg-muted); font-size: 12.5px; }

/* Logo and stamp: preview, help, picker — the Settings tab's construction. */
.su-image[b-tkuvpo336q] { display: flex; align-items: center; gap: 20px; }
.su-image-preview[b-tkuvpo336q] { 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; }
.su-image-preview img[b-tkuvpo336q] { max-width: 100%; max-height: 100%; object-fit: contain; }
.su-image-preview span[b-tkuvpo336q] { 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; }
.su-image-text[b-tkuvpo336q] { flex: 1; min-width: 0; }
.su-image-help[b-tkuvpo336q] { font-size: 12.5px; color: var(--kg-muted); }
.su-image-text .kg-fwarn[b-tkuvpo336q] { margin: 8px 0 0; }
.su-image-actions[b-tkuvpo336q] { position: relative; flex: none; }

/* The last step: the company as a business card, signed by the admin. The panel's own surface and rules, a little
   more air, the name in the display face; the signature line is an input with nothing but its baseline. */
.su-card[b-tkuvpo336q] {
    margin-top: 22px;
    background: var(--kg-panel);
    border: 1px solid var(--kg-rule-divider);
    border-radius: 16px;
    padding: 28px 32px 30px;
    box-shadow: 0 1px 2px rgba(20, 24, 27, .04), 0 12px 32px -18px rgba(20, 24, 27, .18);
}
.su-card-head[b-tkuvpo336q] { display: flex; align-items: center; gap: 22px; }
.su-card-logo[b-tkuvpo336q] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    border: 1px solid var(--kg-rule-strip);
    background: #ffffff;
    overflow: hidden;
}
.su-card-logo img[b-tkuvpo336q] { max-width: 100%; max-height: 100%; object-fit: contain; }
.su-card-logo span[b-tkuvpo336q] { font-family: var(--kg-font-display); font-size: 34px; font-weight: 700; color: var(--kg-accent); }
.su-card-id[b-tkuvpo336q] { min-width: 0; }
.su-card-name[b-tkuvpo336q] { font-family: var(--kg-font-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--kg-ink); overflow-wrap: anywhere; }
.su-card-line[b-tkuvpo336q] { margin-top: 3px; font-size: 13px; color: var(--kg-secondary); overflow-wrap: anywhere; }
/* The row under the rule: the name question left, the invoicing facts right, on one baseline. Flex items never
   overlap; long facts wrap inside their own right-hand column, so the question stays right above its field. */
.su-card-foot[b-tkuvpo336q] {
    display: flex;
    align-items: baseline;
    gap: 6px 24px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--kg-rule-section);
}
.su-card-meta[b-tkuvpo336q] {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    font-size: 12.5px;
    color: var(--kg-muted);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.su-sign[b-tkuvpo336q] { margin-top: 4px; }
/* The one question on this step: a heading-sized label, not a field caption. */
.su-sign-label[b-tkuvpo336q] {
    flex: none;
    font-family: var(--kg-font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.005em;
    color: var(--kg-ink);
}
.su-sign-input[b-tkuvpo336q] {
    display: block;
    width: 100%;
    max-width: 520px;
    margin-top: 6px;
    padding: 4px 0 8px;
    border: 0;
    border-bottom: 1.5px solid var(--kg-ink);
    border-radius: 0;
    background: transparent;
    font-family: var(--kg-font-display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--kg-ink);
    outline: none;
}
.su-sign-input[b-tkuvpo336q]::placeholder { color: var(--kg-faint); font-weight: 500; }
.su-sign-input:focus[b-tkuvpo336q] { border-bottom-color: var(--kg-accent); }
.su-sign-preview[b-tkuvpo336q] { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--kg-secondary); }
.su-sign-preview strong[b-tkuvpo336q] { color: var(--kg-ink); font-weight: 600; }
.su-sign-hint[b-tkuvpo336q] { display: block; margin-top: 2px; font-size: 12.5px; color: var(--kg-muted); }
/* The avatar the side menu shows for the signed-in user, at the menu's size. */
.su-avatar[b-tkuvpo336q] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--kg-secondary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.su-footer[b-tkuvpo336q] {
    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);
}
.su-prev[b-tkuvpo336q] {
    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;
}
.su-prev:hover[b-tkuvpo336q] { color: var(--kg-ink); }
.su-next[b-tkuvpo336q] { padding: 12px 22px; font-size: 14px; }

@media (max-width: 991.98px) {
    .su-grid3[b-tkuvpo336q] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
    .su-head h2[b-tkuvpo336q] { font-size: 26px; }
    .su-rail-label[b-tkuvpo336q] { font-size: 9px; letter-spacing: .08em; }
    .su-stephead[b-tkuvpo336q] { flex-direction: column; gap: 4px; }
    .su-grid2[b-tkuvpo336q], .su-grid3[b-tkuvpo336q] { grid-template-columns: 1fr; }
    .su-span2[b-tkuvpo336q] { grid-column: auto; }
    .su-image[b-tkuvpo336q] { flex-wrap: wrap; }
    .su-card[b-tkuvpo336q] { padding: 22px 18px 24px; }
    .su-card-head[b-tkuvpo336q] { align-items: flex-start; gap: 14px; }
    .su-card-logo[b-tkuvpo336q] { width: 56px; height: 56px; }
    .su-card-name[b-tkuvpo336q] { font-size: 20px; }
    /* Too narrow for two columns: the facts take a line of their own under the question, still right-aligned. */
    .su-card-foot[b-tkuvpo336q] { flex-wrap: wrap; }
    .su-card-meta[b-tkuvpo336q] { flex-basis: 100%; }
    .su-sign-input[b-tkuvpo336q] { font-size: 24px; }
}
/* /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; }

/* ── The board (billing staff, Transport tab): docs/design/dashboard "Cereri" ─────────────────────
   Client · route · fare · flow · next step · action. The stages strip above is the filter; the rows
   are grouped by how stuck they are. Shared pieces (stages, pips, lgroup, next, okline) are theme.css. */
[b-gwdy1z4825] .board-headsev { display: inline-flex; gap: 16px; margin: 0 4px; }
[b-gwdy1z4825] .board-headsev .sev { font-size: 14px; }
.board-stages[b-gwdy1z4825] { margin: 20px 0 4px; }
.board-filters[b-gwdy1z4825] { justify-content: space-between; gap: 16px; }

[b-gwdy1z4825] .board-table { --kg-row-cols: minmax(190px, 1.15fr) minmax(190px, 1.25fr) 112px 112px minmax(210px, 1.45fr) 150px; }
[b-gwdy1z4825] .board-table .kg-rowhead,
[b-gwdy1z4825] .board-table .kg-row { min-width: 1060px; }
@media (max-width: 1439.98px) { [b-gwdy1z4825] .board-table { overflow-x: auto; } }
[b-gwdy1z4825] .board-table .kg-row.is-subcontracted { box-shadow: inset 3px 0 0 0 var(--kg-subcontracted); }

[b-gwdy1z4825] .req-client { display: flex; align-items: center; gap: 10px; min-width: 0; }
[b-gwdy1z4825] .req-client-text { min-width: 0; }
[b-gwdy1z4825] .req-client .kg-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-gwdy1z4825] .req-client .kg-reg-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--kg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-gwdy1z4825] .req-client .kg-code { font-size: 11.5px; color: var(--kg-body); }
[b-gwdy1z4825] .req-client .is-sub { color: var(--kg-accent-text); }
[b-gwdy1z4825] .req-route { font-size: 13.5px; color: var(--kg-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[b-gwdy1z4825] .req-route .kg-hairline { color: var(--kg-hairline-ink); }
[b-gwdy1z4825] .req-route .d { display: block; margin-top: 2px; font-size: 12.5px; color: var(--kg-faint); }
[b-gwdy1z4825] .req-price { text-align: right; font-size: 14.5px; font-weight: 600; color: var(--kg-ink); white-space: nowrap; }
[b-gwdy1z4825] .req-price .kg-cur { font-size: 12px; margin-left: 3px; }
[b-gwdy1z4825] .req-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
[b-gwdy1z4825] .board-table .lgroup-sev { font-weight: 500; }
[b-gwdy1z4825] .board-more { padding: 12px 0 4px; }
[b-gwdy1z4825] .board-okline-link { font-size: inherit; }

/* Selecting for one invoice: the rule line, and the rows that cannot join any more. */
.requests-selecthint[b-gwdy1z4825] { padding-top: 20px; font-size: 13.5px; color: var(--kg-secondary); }
[b-gwdy1z4825] .kg-row.is-locked { opacity: .42; user-select: none; }
/* A box that cannot be ticked says so in the problem colour, and takes the click itself: Bootstrap
   lets a disabled box pass clicks through (pointer-events: none) to the text behind it. */
[b-gwdy1z4825] .requests-check:disabled {
    pointer-events: auto;
    cursor: not-allowed;
    opacity: 1;
    border-color: rgba(var(--kg-warning-rgb), .6);
    background-color: rgba(var(--kg-warning-rgb), .1);
}
/* /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/CostsEstimate.razor.rz.scp.css */
/* "Costuri estimate": a title, then one ruled line per cost — label and (i) on the left, the figure on the right. */

.ce-head[b-71kt3dy7fb] { margin-bottom: 4px; }
.ce-rows[b-71kt3dy7fb] { margin-bottom: 2px; }
.ce-row[b-71kt3dy7fb] { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--kg-rule-divider); }
.ce-row:last-child[b-71kt3dy7fb] { border-bottom: 0; }
.ce-row[b-71kt3dy7fb]  .ce-label, .ce-label[b-71kt3dy7fb] { font-size: 13.5px; color: var(--kg-body); }
.ce-amt[b-71kt3dy7fb] { font-family: var(--kg-font-display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--kg-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-amt .kg-cur[b-71kt3dy7fb] { font-family: var(--kg-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ce-pass[b-71kt3dy7fb] { margin: 6px 0 2px; padding: 9px 11px; border-radius: 10px; background: var(--kg-hover); font-size: 12.5px; line-height: 1.45; color: var(--kg-body); text-wrap: pretty; }
/* /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); }
/* The pass HERE counted among a country's tolls ("vinietă 1 zi"), under its amount. */
.fb-pass[b-v91jv754jw] { display: block; font-size: 10.5px; 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 estimated costs (fuel, tolls): figures and their working, ruled off from the rate they sit 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; }
/* The cost lines keep a readable width in the wide panel instead of pushing their figures to its far edge. */
.wpr-fuel[b-7dr566f6l3]  .ce-rows { max-width: 440px; }
.wpr-fuel[b-7dr566f6l3]  .ce-pass { max-width: 560px; }

.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); }
/* HERE measures at the price step: said under the estimate, in small print. */
.wrt-later[b-v7ndbgrd5y] { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.4; }
.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; }
}