h1:focus {
    outline: none;
}

.carrent-login-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    font-size: 1rem;
    box-sizing: border-box;
}

/* The temporary password of an employee, shown once: easy to read out and to retype */

.carrent-temporary-password input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

/* The two-factor sign-in: the key of the authenticator app and the recovery codes, shown as text to retype or keep */

.carrent-two-factor-key,
.carrent-recovery-codes {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
    user-select: all;
    overflow-wrap: anywhere;
}

.carrent-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
}

.carrent-steps {
    padding-left: 1.25rem;
    margin: 0;
}

.carrent-steps > li + li {
    margin-top: 1rem;
}

/* File uploads: vehicle photos, document scans */

.carrent-upload {
    position: relative;
}

.carrent-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}

.carrent-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    text-align: center;
}

.carrent-drop-compact {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 16px;
}

.carrent-drop-active {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.carrent-upload-queue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.carrent-upload-queue-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carrent-upload-queue-status {
    padding-left: 28px;
}

/* Vehicle photos */

.carrent-photo-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* A thin target before the first photo: dropping a photo here moves it to the start. */
.carrent-photo-zone > .mud-drop-item-preview-start {
    width: 8px;
}

/* Cards are direct children in the read-only view and wrapped in drop items otherwise. */
.carrent-photo-zone > .carrent-photo-card,
.carrent-photo-zone > .mud-drop-item:not(.mud-drop-item-preview-start) {
    flex: 0 1 220px;
    min-width: 0;
}

.carrent-photo-card {
    position: relative;
    overflow: hidden;
}

.carrent-photo-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: var(--mud-palette-background-gray);
}

.carrent-photo-main {
    position: absolute;
    top: 4px;
    left: 4px;
    margin: 0;
}

.carrent-photo-actions {
    display: flex;
    align-items: center;
    padding: 2px 4px;
}

.carrent-photo-alt {
    display: block;
    padding: 0 8px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carrent-photo-dragging {
    opacity: 0.5;
}

/* Client documents */

.carrent-scan-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.carrent-scan-view {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    margin: 0 auto;
    object-fit: contain;
}

/* Rentals */

.carrent-row-overdue {
    background-color: var(--mud-palette-error-hover);
}

/* It stays under the pointer too: MudBlazor's hover of a table row would hide which row is selected. */
.carrent-row-selected,
.carrent-row-selected:hover {
    background-color: var(--mud-palette-primary-hover) !important;
}

.carrent-deleted {
    text-decoration: line-through;
}

/* Who deleted a crossed-out row and why, on its own line: an inline-block stops the row's line-through reaching it. */
.carrent-deleted-info {
    display: inline-block;
    width: 100%;
}

/* Archived and deleted rows are dimmed by the colour of their text, not by opacity: dimmed dark text would fall
   below 4.5:1, the secondary colour does not. */
.carrent-row-archived .mud-table-cell,
.carrent-deleted .mud-table-cell,
.mud-simple-table tr.carrent-deleted > td {
    color: var(--mud-palette-text-secondary);
}

/* The running total of the booking wizard stays in view while the steps scroll. */
.carrent-sticky {
    position: sticky;
    top: 80px;
}

/* The wizard's five steps fit the card at 1280 px with the side menu: tighter steps and connectors; only a step with
   the chosen client or vehicle under its title gives way, and that line is cut with an ellipsis. */
.mud-stepper.carrent-wizard .mud-stepper-nav.mud-stepper-nav-scrollable .mud-step {
    padding: 12px 8px;
    min-width: 0;
    flex-shrink: 0;
}

.mud-stepper.carrent-wizard .mud-stepper-nav.mud-stepper-nav-scrollable .mud-step:has(.mud-step-label-content-secondary-text) {
    flex-shrink: 1;
}

/* MudBlazor pulls the connector 16 px under each step's 24 px padding; with 8 px it would run under the labels. */
.mud-stepper.carrent-wizard > .mud-stepper-nav.mud-stepper-nav-scrollable > .mud-stepper-nav-connector {
    min-width: 12px;
    flex: 1 1 12px;
    margin: 0 -4px;
}

.carrent-wizard .mud-step-label,
.carrent-wizard .mud-step-label-content {
    min-width: 0;
}

.carrent-wizard .mud-step-label-content-title {
    white-space: nowrap;
}

.carrent-wizard .mud-step-label-content-secondary-text {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.carrent-wizard-progress {
    margin-bottom: 16px;
}

/* "Крок N з 5 · …" — a button that lists the steps: a line of text, 44 px for a finger. */
.carrent-wizard-steps .mud-button-root {
    min-height: 44px;
    padding-left: 0;
    padding-right: 0;
    font-weight: 600;
}

.carrent-wizard-step-current {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.carrent-wizard-progress-track {
    height: 4px;
    margin-top: 6px;
    border-radius: 2px;
    background-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

.carrent-wizard-progress-bar {
    height: 100%;
    background-color: var(--mud-palette-primary);
}

/* The step's content lines up with the first step's icon; on a phone it takes the whole card. */
.mud-stepper.carrent-wizard .mud-stepper-content {
    padding: 0 8px;
}

/* A phone shows "Крок N з 5" and the progress bar instead of the step bar. */
@media (max-width: 599.98px) {
    .carrent-wizard .mud-stepper-nav {
        display: none !important;
    }

    .mud-stepper.carrent-wizard .mud-stepper-content {
        padding: 0;
    }
}

/* The occupancy board (SPEC 8.6): a vehicle column that stays in place and a column per Kyiv day. Bars are placed in %
   of their row, to the hour; on a narrow screen the board scrolls sideways inside its frame. */

.carrent-board {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.carrent-board-grid {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(calc(var(--carrent-board-days) * 34px), 1fr);
}

.carrent-board-vehicle {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 2px 8px;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.carrent-board-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.carrent-board-days,
.carrent-board-row {
    display: grid;
    grid-template-columns: repeat(var(--carrent-board-days), minmax(0, 1fr));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.carrent-board-row {
    position: relative;
    height: 40px;
}

.carrent-board-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 0;
    font-size: 0.75rem;
    line-height: 1.3;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.carrent-board-cell {
    border-left: 1px solid var(--mud-palette-lines-default);
}

a.carrent-board-cell:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.carrent-board-weekend {
    background-color: var(--mud-palette-background-gray);
}

.carrent-board-today {
    background-color: var(--mud-palette-primary-hover);
}

.carrent-board-bar {
    position: absolute;
    top: 6px;
    bottom: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 3px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 0.75rem;
    text-decoration: none;
}

.carrent-board-bar:hover {
    filter: brightness(1.1);
}

.carrent-board-bar-text {
    position: relative;
    z-index: 1;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The buffer after the rental: the same colour, nearer the background (lighter, or darker in the dark theme). */
.carrent-board-tail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--mud-palette-surface);
    opacity: 0.6;
}

.carrent-board-booked {
    color: var(--mud-palette-info-text);
    background-color: var(--mud-palette-info);
}

.carrent-board-active {
    color: var(--mud-palette-success-text);
    background-color: var(--mud-palette-success);
}

.carrent-board-returned {
    color: var(--mud-palette-warning-text);
    background-color: var(--mud-palette-warning);
}

.carrent-board-closed {
    color: var(--mud-palette-secondary-text);
    background-color: var(--mud-palette-secondary);
}

.carrent-board-overdue {
    z-index: 2;
    border: 2px solid var(--mud-palette-error);
}

.carrent-board-block {
    border: 1px solid var(--mud-palette-gray-default);
    color: var(--mud-palette-text-primary);
    background: repeating-linear-gradient(-45deg, var(--mud-palette-gray-lighter) 0 6px, var(--mud-palette-gray-light) 6px 12px);
}

/* Cut by the edge of the period. */
.carrent-board-clipped-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.carrent-board-clipped-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.carrent-board-now {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 2px;
    margin-left: -1px;
    background-color: var(--mud-palette-error);
    pointer-events: none;
}

.carrent-board-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: 0.8125rem;
}

.carrent-board-swatch {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-right: 6px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 3px;
    vertical-align: middle;
}

/* The inspection screen (stage 5.4): mobile-first, big targets; the same page wider on a desktop. */
.insp {
    max-width: 900px;
    margin: 0 auto;
}

.insp-head {
    margin-bottom: 8px;
}

.insp-queue-note {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-left: 4px solid var(--mud-palette-info);
    background-color: var(--mud-palette-info-hover);
    font-size: 0.875rem;
}

.insp-steps {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 4px 0 8px;
}

.insp-steps > .mud-chip-container {
    flex: 0 0 auto;
}

.insp-step {
    padding-bottom: 16px;
}

/* "Назад" / "Далі" stay under the thumb. */
.insp-nav {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 0;
    background-color: var(--mud-palette-background);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.insp-nav .mud-button-root,
.insp-choice .mud-button-root {
    min-height: 52px;
}

.insp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.insp-choice {
    display: grid;
    gap: 8px;
}

.insp-fuel {
    grid-template-columns: repeat(3, 1fr);
}

.insp-cleanliness {
    grid-template-columns: 1fr;
}

.insp-yes-no {
    grid-template-columns: 1fr 1fr;
}

.insp-kind {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

@media (min-width: 600px) {
    .insp-fuel {
        grid-template-columns: repeat(9, 1fr);
    }

    .insp-cleanliness {
        grid-template-columns: repeat(3, 1fr);
    }
}

.insp-mileage input {
    font-size: 1.5rem;
}

.insp-row {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.insp-row-missing {
    border-left: 4px solid var(--mud-palette-warning);
}

.insp-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.insp-counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.insp-counter-value {
    min-width: 48px;
    text-align: center;
}

.insp-blockers {
    display: flex;
    flex-direction: column;
}

.insp-blocker {
    justify-content: space-between;
    text-align: left;
    text-transform: none;
    width: 100%;
}

/* Photo tiles: 2 × 3 on a phone. A tile is a <label> around its file input: a tap opens the camera. */
.insp-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (min-width: 600px) {
    .insp-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

.insp-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    cursor: pointer;
}

.insp-tile-empty {
    border-style: dashed;
}

.insp-tile-missing {
    border-color: var(--mud-palette-warning);
}

.insp-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insp-tile-camera {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 24px;
}

.insp-tile-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 8px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.55);
    font-size: 0.875rem;
}

.insp-tile-action {
    opacity: 0.85;
}

.insp-tile-open {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    padding: 4px;
    line-height: 0;
    color: #000;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
}

/* Hidden but not display: none — a label must still open it on every phone. */
.insp-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.insp-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

/* The registry, the client's damages, the comparison: a row of small thumbnails. */
.insp-thumbs-small {
    grid-template-columns: repeat(auto-fill, 64px);
    gap: 4px;
}

.insp-thumb,
.insp-local:not([data-single]) > .insp-local-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--mud-palette-background-gray);
}

.insp-thumb img,
.insp-local-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insp-thumb-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border: 2px dashed var(--mud-palette-lines-default);
    color: var(--mud-palette-primary);
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
}

.insp-thumb-remove {
    position: absolute !important;
    top: 2px;
    right: 2px;
    background-color: var(--mud-palette-surface) !important;
}

/* What the upload queue fills (inspection-photos.js): over a required tile, or among the thumbnails. */
.insp-local:not([data-single]) {
    display: contents;
}

.insp-local[data-single] {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.insp-local[data-single]:empty {
    display: none;
}

.insp-local[data-single] > .insp-local-item {
    position: absolute;
    inset: 0;
}

.insp-local-item img {
    position: absolute;
    inset: 0;
}

.insp-local-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 2px 6px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
}

.insp-local-sending .insp-local-status,
.insp-local-processing .insp-local-status {
    animation: insp-pulse 1.2s ease-in-out infinite;
}

@keyframes insp-pulse {
    50% {
        background-color: rgba(var(--mud-palette-primary-rgb), 0.85);
    }
}

.insp-local-failed,
.insp-local-broken {
    outline: 3px solid var(--mud-palette-error);
    outline-offset: -3px;
}

.insp-local-failed .insp-local-status,
.insp-local-broken .insp-local-status {
    background-color: var(--mud-palette-error);
}

.insp-local-item .insp-local-button {
    position: relative;
    z-index: 1;
    margin: 2px;
    pointer-events: auto;
}

.insp-local-item {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: center;
    padding-bottom: 28px;
}

.insp-local-button {
    padding: 6px 10px;
    border: 0;
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

/* While the server is out of reach (ReconnectModal.razor.js) only the photo queue works on the inspection screen:
   what needs the server is dimmed, the tiles stay. */
.carrent-disconnected .insp :is(button:not([data-photo-action]), a:not([target]), .mud-input-control, .mud-chip) {
    pointer-events: none;
    opacity: 0.45;
}

/* A line of the comparison with the pickup in the rental card: the check, what differs with its comment, the amount. */
.cmp-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.cmp-line-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cmp-line-amount {
    flex: 0 0 150px;
}

@media (max-width: 600px) {
    .cmp-line {
        flex-wrap: wrap;
    }

    .cmp-line-amount {
        flex-basis: 100%;
        padding-left: 42px;
    }
}

/* The audit log: a line per key of the details; long emails, ids and raw details break instead of widening the grid. */
.carrent-audit-detail {
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.carrent-audit-small {
    font-size: 0.8125rem;
}

.carrent-audit-wrap {
    overflow-wrap: anywhere;
}

.carrent-audit-raw {
    margin: 0;
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-secondary);
}

/* The dashboard (SPEC 11.1): blocks that stack into one column on a phone; a row is a link as wide as the block, its
   lines wrap instead of widening the page. */

.carrent-dashboard-title {
    font-weight: 600;
}

.carrent-dashboard-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: inherit;
    text-decoration: none;
}

.carrent-dashboard-row:hover {
    background-color: var(--mud-palette-table-hover);
}

.carrent-dashboard-lead {
    flex: none;
    min-width: 3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.carrent-dashboard-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-wrap: anywhere;
}

.carrent-dashboard-subtitle {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.carrent-dashboard-note {
    font-size: 0.875rem;
}

.carrent-dashboard-trailing {
    flex: none;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.carrent-dashboard-number {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.carrent-dashboard-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: inherit;
    text-decoration: none;
}

.carrent-dashboard-tile:hover {
    background-color: var(--mud-palette-table-hover);
}

.carrent-dashboard-sum {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
}

/* "Потребує уваги": blocks of different heights packed into columns without the holes of a grid's rows; one column
   on a phone (a column is at least 340 px). */
.carrent-dashboard-columns {
    columns: 340px;
    column-gap: 12px;
}

/* The gaps of MudGrid Spacing="3" of the blocks above. An inline-block is never split between columns: with
   break-inside alone Firefox still fragments a block's flex rows while it balances the columns (a gap in a row). */
.carrent-dashboard-column-item {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    break-inside: avoid;
    margin-bottom: 12px;
}

/* "і ще N" that unfolds a block: a text button sized like the link of the other blocks. */
.carrent-dashboard-more.mud-button-root {
    min-width: 0;
    padding: 0 4px;
    margin: 0 -4px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.43;
}

.carrent-dashboard-sum > span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Shared UI (docs/ui.md): the head of a page, HelpTip, StatCard, DetailList, ResponsiveList and RowCard, RowActions,
   StickyActionBar. "Phone" — below 600 px, MudBlazor's xs; the switch is CSS only. */

.carrent-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

/* Basis 0: the title shares its line with the actions instead of pushing a lone "⋮" onto the next line on a phone;
   no narrower than 12rem — then the actions wrap instead. A word longer than the line (a hyphenated double surname)
   breaks rather than widening the page; the last word keeps its (i) (TitleWithHelp, nowrap). */
.carrent-page-header-title {
    flex: 1 1 0;
    min-width: min(12rem, 100%);
    margin-right: 8px;
    overflow-wrap: anywhere;
}

/* As high as the 48 px "⋮": the button stands in the middle of its line, as before they were split. */
.carrent-page-header-primary,
.carrent-page-header-more {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 48px;
}

/* On a phone "⋮" is on the line of the title, at its right; a button that is not pinned to the bottom goes under. */
@media (max-width: 599.98px) {
    .carrent-page-header-more {
        order: 1;
    }

    .carrent-page-header-primary {
        order: 2;
        flex-basis: 100%;
    }
}

/* TitleWithHelp: the last word of a title and its (i) on one line. */
.carrent-nowrap {
    white-space: nowrap;
}

/* The (i) of a definition: a 44 px target, its margins keep the line as high as without it. */
.carrent-helptip-root {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.carrent-helptip.mud-icon-button {
    padding: 12px;
    margin: -12px -6px -12px -8px;
    color: var(--mud-palette-text-secondary);
}

.carrent-helptip-text {
    max-width: min(320px, calc(100vw - 32px));
    padding: 8px 12px;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 400;
    white-space: normal;
    color: var(--mud-palette-text-primary);
}

/* HelpDetails: the (i) of a static page, a native <details>; the summary is a 44 px target. */
.carrent-help-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.carrent-help-details > summary::-webkit-details-marker {
    display: none;
}

.carrent-help-details-text {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* StatCard: the label, the number, the lines under it. */
.carrent-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.carrent-stat-link:hover {
    background-color: var(--mud-palette-table-hover);
}

.carrent-stat-label {
    display: block;
    min-height: 24px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.carrent-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.carrent-stat-more {
    display: block;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* DetailList: the label next to its value; above it on a phone. */
.carrent-details {
    margin: 0;
}

.carrent-detail {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) minmax(0, 1fr);
    gap: 2px 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.carrent-detail:last-child {
    border-bottom: none;
}

.carrent-detail > dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.carrent-detail > dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.carrent-details-numeric .carrent-detail {
    grid-template-columns: minmax(0, 1fr) auto;
}

.carrent-details-numeric .carrent-detail > dd {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.carrent-detail-strong > dt,
.carrent-detail-strong > dd {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* ResponsiveList: the card column only on a phone, the other columns and the head only from 600 px. */
.carrent-rlist .carrent-rlist-card {
    display: none;
}

/* A column title stays on one line: a table must fit 1280 px with the side menu without scrolling (docs/ui.md). */
.carrent-rlist .mud-table-head th.mud-table-cell {
    white-space: nowrap;
}

/* 12 px instead of MudBlazor's 24 px on the right of a dense cell: eight columns gain ~100 px. */
@media (min-width: 600px) {
    .carrent-rlist.mud-table-dense .mud-table-row .mud-table-cell {
        padding-right: 12px;
    }
}

/* The second line of a cell (a plate under the vehicle, "Вільне"): secondary and smaller. */
.carrent-cell-secondary {
    font-size: 0.8125rem;
}

/* SortKeyToggle: the key of a two-key column ("Період · за кінцем") — text in the head, not a second button-looking control. */
.carrent-sort-key {
    font: inherit;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    background: none;
    border: 0;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.carrent-sort-key-dot {
    margin-left: 4px;
    color: var(--mud-palette-text-secondary);
}

.carrent-sort-key:hover,
.carrent-sort-key:focus-visible {
    color: var(--mud-palette-primary);
}

/* The total of a list on a phone: one bold line under the cards (the table's footer is hidden there). */
.carrent-list-total {
    padding: 10px 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* RowCard */
.carrent-row-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
}

.carrent-row-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-wrap: anywhere;
}

.carrent-row-card-title {
    font-weight: 600;
}

.carrent-row-card-subtitle {
    font-size: 0.875rem;
}

.carrent-row-card-meta {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.carrent-row-card-end {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.carrent-row-card-end .mud-chip {
    margin: 0;
}

/* The "⋮" at the right edge, in the middle of the row's height — not above or under the status. */
.carrent-row-card-actions {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
}

/* A slot whose content is conditional (a read-only document has no "⋮") leaves no gap. */
.carrent-row-card-actions:empty {
    display: none;
}

/* RowActions: a 48 px "⋮" whose negative margins keep a dense row as high as without it. */
.carrent-row-actions {
    display: inline-flex;
    margin: -12px -8px;
}

.carrent-row-action-reason {
    display: block;
    max-width: 280px;
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: normal;
    color: var(--mud-palette-text-secondary);
}

/* A tab of a card is as wide as its label, not MudTabs' 160 px: all eight tabs of a vehicle fit 1440 px without the
   scroll arrows. */
.carrent-tabs .mud-tab {
    white-space: nowrap;
    min-width: 0 !important;
    width: auto;
}

/* StickyActionBar: only on a phone. */
.carrent-sticky-actions {
    display: none;
}

.carrent-show-phone {
    display: none;
}

@media (max-width: 599.98px) {
    .carrent-hide-phone {
        display: none !important;
    }

    /* Tabs of a card: one line scrolled by a finger instead of MudTabs' arrow buttons and its translated bar (which
       a swipe does not move); the slider sits inside the bar and scrolls with it. */
    .carrent-tabs .mud-tabs-tabbar-content {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .carrent-tabs .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
        transform: none !important;
    }

    .carrent-tabs .mud-tabs-scroll-button {
        display: none;
    }

    .carrent-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .carrent-details-numeric .carrent-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .carrent-details-numeric .carrent-detail > dd {
        text-align: left;
    }

    .carrent-detail > dt {
        font-size: 0.8125rem;
    }

    .carrent-rlist .mud-table-head {
        display: none;
    }

    .carrent-rlist .mud-table-body td.mud-table-cell {
        display: none;
    }

    .carrent-rlist .mud-table-body td.mud-table-cell.carrent-rlist-card {
        display: table-cell;
        padding: 10px 16px;
    }

    .carrent-rlist .mud-table-body td.mud-table-cell.mud-table-child-content {
        display: table-cell;
    }

    .carrent-rlist .mud-table-foot {
        display: none;
    }

    /* The pager: only the arrows and "1–8 з 8" — no "Рядків на сторінці" and its select. */
    .carrent-rlist .mud-table-pagination-spacer + .mud-table-pagination-caption,
    .carrent-rlist .mud-table-pagination-select {
        display: none;
    }

    /* What is left fits one line: no wrapping onto a second one (MudBlazor's small-screen toolbar). */
    .carrent-rlist .mud-table-pagination .mud-toolbar.mud-table-pagination-toolbar {
        flex-wrap: nowrap;
        min-height: 52px;
        padding-top: 0;
    }

    .carrent-show-phone {
        display: block;
    }

    .mud-main-content:has(.carrent-sticky-actions) {
        padding-bottom: 72px;
    }

    .carrent-sticky-actions {
        display: flex;
        gap: 8px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background-color: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .carrent-sticky-actions > *,
    .carrent-sticky-actions .mud-button-root {
        flex: 1 1 auto;
        width: 100%;
        min-height: 48px;
    }

    /* The booking wizard's running total next to its button: as wide as the sum, the button takes the rest. */
    .carrent-sticky-actions > .carrent-sticky-total {
        flex: 0 0 auto;
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        white-space: nowrap;
    }

    /* A list's filters: the search stays, the others open with "Фільтри". */
    .carrent-filters:not(.carrent-filters-open) .carrent-filter-more {
        display: none !important;
    }
}

@media (min-width: 600px) {
    .carrent-filters-toggle {
        display: none;
    }
}