/* ============================================================
   Contra theme
   The one place for the Contra look on top of MudBlazor: brand colours as CSS variables and
   the reusable page pieces (page header, cards with a tinted header bar, side summary panel,
   option buttons, field labels, grids, status pills). MudBlazor's own colours come from
   Theme/BpAdminDashboardTheme.cs (same brand colours, see Theme/ContraColors.cs); app.css holds
   the site-wide MudBlazor overrides and uses these variables.

   Brand colours
     Navy  #222E65  headers, primary buttons, links
     Red   #A61E26  accents, at most one call to action per screen (required *, eyebrow labels)
     Ink   #1B2033  body text
     Slate #5B6178  hints, secondary text
     Mist  #F5F6FA  page and table-header background, card header bars
     Line  #D9DCE6  borders, dividers
   ============================================================ */

:root {
    --ct-navy: #222E65;
    --ct-red: #A61E26;
    --ct-ink: #1B2033;
    --ct-slate: #5B6178;
    --ct-mist: #F5F6FA;
    --ct-page: #F4F6FA; /* page background behind the white cards */
    --ct-header-tint: #EEF1F7; /* light navy tint for blocks inside a card */
    --ct-steel: #4F6EA3; /* secondary actions such as Edit: lighter navy, white text passes AA */
    --ct-steel-hover: #3F5C8F;
    --ct-red-hover: #8C1920;
    --ct-line: #D9DCE6;
    --ct-white: #FFFFFF;

    /* Container headers: the original Contra bar, navy at both ends with a blue centre. */
    --ct-header-gradient: linear-gradient(to right, rgb(49, 56, 94) 0%, rgb(10, 78, 120) 50%, rgb(49, 56, 94) 100%);

    --ct-header-gradient-green: linear-gradient(to right, rgb(18, 68, 42) 0%, rgb(34, 110, 70) 50%, rgb(18, 68, 42) 100%);
    --ct-header-red: var(--ct-red);

    /* Red call to action (Submit Bid, Send Quote, Book): Contra Red, darker at the ends like the header bar. */
    --ct-red-gradient: linear-gradient(to right, #8A1820 0%, #A61E26 50%, #8A1820 100%);
    --ct-header-solid: rgb(49, 56, 94);

    /* Selected dashboard tile: dark navy, left to right. */
    --ct-tile-gradient: linear-gradient(90deg, #1F2F63 0%, #24366F 25%, #344D91 100%);

    /* Sizes shared by every header bar and table, so pages can't drift apart. */
    --ct-header-height: 40px;
    --ct-header-pad-y: 8px;
    --ct-header-pad-x: 16px;
    --ct-cell-pad-y: 8px;
    --ct-cell-pad-x: 16px;

    /* Tables: light blue-grey header, navy header text, light borders, subtle striping. */
    --ct-th-bg: #E9EDF5;
    --ct-th-text: #26365F;
    --ct-table-line: #DCE3EE;
    --ct-row: #FFFFFF;
    --ct-row-alt: #F8FAFD;
    --ct-row-group: #F2F4F8;

    /* Corner radius: containers 8px, controls 6px. */
    --ct-radius-card: 8px;
    --ct-radius-control: 6px;
    /* Elevation, navy-tinted. Containers use md; dialogs and menus use lg. The MudBlazor
       Shadows in Theme/BpAdminDashboardTheme.cs use the same values. */
    --ct-shadow-sm: 0 1px 2px rgba(27, 32, 51, .06), 0 1px 3px rgba(27, 32, 51, .10);
    --ct-shadow-md: 0 2px 4px rgba(27, 32, 51, .06), 0 6px 16px rgba(27, 32, 51, .10);
    --ct-shadow-lg: 0 4px 8px rgba(27, 32, 51, .08), 0 12px 32px rgba(27, 32, 51, .16);
    --ct-shadow-card: var(--ct-shadow-md);

    /* Shades of the brand colours for hover, selected and read-only states. */
    --ct-navy-tint: #E8EAF2;
    --ct-navy-hover: rgba(34, 46, 101, .04);
    --ct-navy-selected: rgba(34, 46, 101, .08);
    --ct-faint: #8A8FA3;
    --ct-readonly: #F0F1F5;

    /* Status colours: only for showing a state or a problem. */
    --ct-success: #1E7A3C;
    --ct-success-tint: #E3F3E8;
    --ct-warning: #9A5B00;
    --ct-warning-tint: #FDF0DC;
    --ct-info: #2F5FBF;
    --ct-info-tint: #E8F0FD;
    --ct-danger: var(--ct-red);
    --ct-danger-tint: #FBE9EA;
}

/* ============================================================
   Site-wide: every MudBlazor page gets the Submit a Bid look without page changes.
   MudBlazor's --mud-default-borderradius is 8px (Theme/BpAdminDashboardTheme.cs), which rounds
   buttons, inputs and menus; the rules below round containers to 12px and restyle inputs,
   buttons and cards. Inputs default to Outlined (MudGlobal.InputDefaults in Program.cs).
   ============================================================ */

body {
    background-color: var(--ct-page);
    color: var(--ct-ink);
}

/* Containers: white, 12px corners, a Line border and a very soft shadow. Flat papers
   (Elevation 0) inside a card, drawers and the app bar are left alone. */
.mud-main-content .mud-card,
.mud-main-content .mud-paper:not(.mud-elevation-0):not(.mud-paper-square):not(.mud-drawer):not(.mud-appbar):not(.mud-card-header):not(.mud-toolbar),
.mud-main-content .mud-paper-outlined {
    background-color: var(--ct-white);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-card);
    box-shadow: var(--ct-shadow-card);
}

/* Cards and grids clip their header bar and header row to the rounded corners. */
.mud-main-content .mud-card,
.mud-main-content .mud-table:not(.mud-elevation-0),
.mud-main-content .mud-data-grid {
    overflow: hidden;
}

/* A grid or paper inside a card: border only, no second shadow. */
.mud-main-content .mud-card .mud-table,
.mud-main-content .ct-card .mud-table,
.mud-main-content .mud-card .mud-paper:not(.mud-elevation-0),
.mud-main-content .ct-card .mud-paper:not(.mud-elevation-0) {
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-control);
    box-shadow: none;
}

.mud-dialog {
    border-radius: var(--ct-radius-card);
    box-shadow: var(--ct-shadow-lg);
    overflow: hidden;
}

.mud-popover-open {
    box-shadow: var(--ct-shadow-lg);
}

/* Expansion panels: separate rounded cards with the standard 8px gap, not one joined block.
   The group itself has no background or shadow; each panel carries its own. */
.mud-expansion-panels {
    background: transparent !important;
    box-shadow: none !important;
}

.mud-expansion-panels .mud-expand-panel {
    box-shadow: var(--ct-shadow-sm);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-card) !important;
    overflow: hidden;
    margin: 0 0 8px 0 !important;
}

    .mud-expansion-panels .mud-expand-panel:last-child {
        margin-bottom: 0 !important;
    }

    .mud-expansion-panels .mud-expand-panel::before {
        display: none;
    }

/* Inputs, all variants: white, 1px Line border, 8px corners, Navy focus, Slate placeholder. */
.mud-input.mud-input-outlined {
    background-color: var(--ct-white);
    border-radius: var(--ct-radius-control);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ct-line);
    border-radius: var(--ct-radius-control);
}

.mud-input.mud-input-outlined:not(.mud-disabled):not(.mud-input-error):hover .mud-input-outlined-border {
    border-color: var(--ct-slate);
}

.mud-input.mud-input-outlined:not(.mud-input-error):focus-within .mud-input-outlined-border {
    border-color: var(--ct-navy);
}

.mud-input.mud-input-filled {
    background-color: var(--ct-white);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-control);
}

    .mud-input.mud-input-filled:hover {
        background-color: var(--ct-white);
    }

    .mud-input.mud-input-filled:focus-within {
        background-color: var(--ct-white);
        border-color: var(--ct-navy);
    }

    .mud-input.mud-input-filled.mud-input-underline::before,
    .mud-input.mud-input-filled.mud-input-underline::after {
        display: none;
    }

.mud-input-slot::placeholder {
    color: var(--ct-slate);
    opacity: 1;
}

/* Read-only and disabled inputs: a subtle Mist tint over the whole box. */
/* Low specificity on purpose (:where) so the picker rule below can keep date pickers white. */
.mud-input.mud-disabled,
.mud-input.mud-input-outlined:has(:where(input.mud-input-slot[readonly]:not(.mud-select-input))),
.mud-input.mud-input-filled:has(:where(input.mud-input-slot[readonly]:not(.mud-select-input))) {
    background-color: var(--ct-mist);
}

/* Date and time pickers are read-only text boxes but still pickable: keep them white. */
.mud-picker .mud-input.mud-input-outlined:not(.mud-disabled) {
    background-color: var(--ct-white);
}

/* Missing required value (shown red only when it matters). */
.ct-required-missing .mud-input-outlined-border {
    border-color: var(--ct-red) !important;
}

/* Buttons: 8px corners (theme), no capitals, semibold. */
.mud-button-root.mud-button {
    font-weight: 600;
    letter-spacing: normal;
}

.mud-button-filled {
    box-shadow: none;
}

/* Neutral outlined buttons (Cancel, Clear): white with a Line border. */
.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--ct-line);
    color: var(--ct-ink);
    background-color: var(--ct-white);
}

    .mud-button-outlined.mud-button-outlined-default:hover {
        border-color: var(--ct-navy);
        color: var(--ct-navy);
        background-color: var(--ct-mist);
    }

/* Secondary actions (Edit, View: outlined primary or any Info button): steel blue, white text. */
.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-info,
.mud-button-filled.mud-button-filled-info {
    background-color: var(--ct-steel);
    border-color: var(--ct-steel);
    color: var(--ct-white);
}

    .mud-button-outlined.mud-button-outlined-primary:hover,
    .mud-button-outlined.mud-button-outlined-info:hover,
    .mud-button-filled.mud-button-filled-info:hover {
        background-color: var(--ct-steel-hover);
        border-color: var(--ct-steel-hover);
    }

/* Destructive actions (Remove, Delete): solid Contra Red, white text. */
.mud-button-outlined.mud-button-outlined-error {
    background-color: var(--ct-red);
    border-color: var(--ct-red);
    color: var(--ct-white);
}

    .mud-button-outlined.mud-button-outlined-error:hover {
        background-color: var(--ct-red-hover);
        border-color: var(--ct-red-hover);
    }

/* Disabled buttons: light grey, like Submit Bid before the form is complete. */
.mud-button-root.mud-button:disabled,
.mud-button-root.mud-button.mud-disabled {
    background-image: none;
    background-color: var(--ct-readonly);
    border-color: var(--ct-line);
    color: var(--ct-faint);
}

    .mud-button-root.mud-button-text:disabled {
        background-color: transparent;
    }

/* One red call to action, e.g. "Include pickup and delivery": a red pill checkbox. */
.ct-accent-check .mud-checkbox,
.ct-accent-label {
    background-color: var(--ct-red);
    color: var(--ct-white);
    border-radius: var(--ct-radius-control);
}

.ct-accent-check .mud-checkbox {
    width: fit-content;
    height: 40px;
    margin-top: 8px;
    margin-right: 10px;
    padding-right: 15px;
}

    .ct-accent-check .mud-icon-root,
    .ct-accent-check .mud-typography {
        color: var(--ct-white) !important;
    }

.ct-accent-label {
    display: inline-block;
    width: 180px;
    height: 36px;
    margin-top: 5px;
    padding: 8px 10px 0;
}

/* ---------- Page ---------- */

/* Wrap a page in .ct-page for brand text colour. */
.ct-page {
    color: var(--ct-ink);
}

/* Small red label above a title, e.g. BID SUMMARY or the depot name. */
.ct-eyebrow {
    color: var(--ct-red);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ct-title {
    color: var(--ct-navy);
    font-weight: 700;
}

.ct-subtitle {
    color: var(--ct-slate);
}

.ct-hint {
    font-size: 12px;
    color: var(--ct-slate);
}

.ct-strong {
    color: var(--ct-ink);
    font-weight: 600;
}

.ct-mono {
    font-family: Consolas, monospace;
    font-size: 12px;
}

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

.ct-pre {
    white-space: pre-wrap;
    overflow: auto;
    font-family: Consolas, monospace;
    font-size: 12px;
}

.ct-pre-wrap {
    white-space: pre-wrap;
}

.ct-bold {
    font-weight: 600;
}

.ct-clickable {
    cursor: pointer;
}

.ct-link-dotted {
    text-decoration: underline dotted;
}

/* Large grey icon on an empty grid or list. */
.ct-empty-icon {
    color: var(--ct-faint);
}

.ct-struck {
    color: var(--ct-faint);
    text-decoration: line-through;
}

/* ---------- Cards ---------- */

.ct-card.mud-paper {
    background: var(--ct-white);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-card);
    box-shadow: var(--ct-shadow-card);
    overflow: hidden;
}

.ct-card-muted.mud-paper {
    background: var(--ct-mist);
}

/* Tinted bar along the top of a card holding its title. */
.ct-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ct-header-height);
    padding: var(--ct-header-pad-y) var(--ct-header-pad-x);
    background: var(--ct-header-gradient);
    color: var(--ct-white);
}

.ct-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ct-white);
}

/* Anything placed in a Navy header bar (icons, selects, icon buttons) follows the white text. */
.ct-card-header .mud-icon-root,
.ct-card-header .mud-typography,
.ct-card-header .mud-primary-text,
.ct-card-header .mud-input,
.ct-card-header .mud-input-slot,
.ct-card-header .mud-select-input {
    color: var(--ct-white) !important;
}

.ct-card-header .mud-input.mud-input-text {
    background: transparent;
}


/* Navy buttons (primary and tertiary, e.g. Add, Save, Search, New Quote, the selected quick pick):
   the same gradient as the header bars; a touch brighter on hover. */
.mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled),
.mud-button-filled.mud-button-filled-tertiary:not(:disabled):not(.mud-disabled) {
    background: var(--ct-header-gradient);
    color: var(--ct-white);
}

    .mud-button-filled.mud-button-filled-primary:not(:disabled):not(.mud-disabled):hover,
    .mud-button-filled.mud-button-filled-tertiary:not(:disabled):not(.mud-disabled):hover {
        background: var(--ct-header-gradient);
        filter: brightness(1.15);
    }

/* Red buttons (filled Error or Secondary, e.g. Submit Bid, Send Quote, Book): the red version. */
.mud-button-filled.mud-button-filled-error:not(:disabled):not(.mud-disabled),
.mud-button-filled.mud-button-filled-secondary:not(:disabled):not(.mud-disabled) {
    background: var(--ct-red-gradient);
    color: var(--ct-white);
}

    .mud-button-filled.mud-button-filled-error:not(:disabled):not(.mud-disabled):hover,
    .mud-button-filled.mud-button-filled-secondary:not(:disabled):not(.mud-disabled):hover {
        background: var(--ct-red-gradient);
        filter: brightness(1.12);
    }

/* Same padding as MudCardContent, so ct-card bodies line up with other pages' cards. */
.ct-card-body {
    padding: 16px;
}

/* A light box inside a card, e.g. a note, a message or "no parameters". */
.ct-note {
    background: var(--ct-mist);
    border-radius: var(--ct-radius-control);
    font-size: 13px;
    line-height: 1.5;
}

/* A bordered box inside a card, e.g. an inline form. */
.ct-inset {
    background: var(--ct-white);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-control);
}

/* Drop zone for file uploads. */
.ct-dropzone.mud-paper {
    background-color: var(--ct-mist);
    border-color: var(--ct-line);
}

/* Round avatar with initials or an icon in lists. */
.ct-avatar.mud-avatar {
    background-color: var(--ct-navy-tint);
    color: var(--ct-navy);
}

.ct-avatar-error.mud-avatar {
    background-color: var(--ct-danger-tint);
    color: var(--ct-danger);
}

/* ---------- Summary side panel ---------- */

.ct-summary {
    position: sticky;
    top: 80px;
}

.ct-kv {
    font-size: 12.5px;
    color: var(--ct-slate);
}

    .ct-kv b {
        color: var(--ct-ink);
        font-weight: 600;
        text-align: right;
    }

.ct-total {
    font-weight: 700;
    color: var(--ct-navy);
}

/* ---------- Form fields ---------- */

.ct-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ct-ink);
    margin-bottom: 6px;
}

.ct-label-error {
    color: var(--mud-palette-error);
}

/* Read-only label/value pairs. */
.ct-field-label {
    font-size: 11.5px;
    color: var(--ct-slate);
}

.ct-field-value {
    font-size: 13px;
    color: var(--ct-ink);
    word-break: break-word;
}

/* Date pickers aren't typed into but are still pickable: white, not the read-only grey.
   Put .ct-picker on the picker, or on a container to cover every picker in it. */
.ct-picker input.mud-input-slot[readonly] {
    background-color: transparent;
}

/* ---------- Segmented option buttons (This Week / 48 hours ...) ---------- */

/* Same height as a dense outlined input (40px) so a row of quick picks lines up with its date picker. */
.ct-choice.mud-button-root {
    height: 40px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--ct-radius-control);
    box-shadow: none;
}

.ct-choice.mud-button-outlined {
    background: var(--ct-white);
    border-color: var(--ct-line);
    color: var(--ct-ink);
}

    .ct-choice.mud-button-outlined:hover {
        border-color: var(--ct-navy);
        background: var(--ct-mist);
    }

.ct-choice.mud-button-filled {
    font-weight: 600;
}

.ct-choice.ct-choice-error.mud-button-outlined {
    border-color: var(--mud-palette-error);
}

/* ---------- Buttons ---------- */

.ct-btn.mud-button-root {
    border-radius: var(--ct-radius-control);
    box-shadow: none;
    font-weight: 600;
}

.ct-btn.mud-button-outlined:not(.ct-btn-danger) {
    background: var(--ct-white);
    border-color: var(--ct-line);
    color: var(--ct-ink);
    font-weight: 500;
}

.ct-btn-success.mud-button-filled {
    background: var(--ct-success);
    color: var(--ct-white);
}

.ct-btn-warning.mud-button-filled {
    background: var(--ct-warning);
    color: var(--ct-white);
}

.ct-btn-danger.mud-button-outlined {
    background: var(--ct-red);
    color: var(--ct-white);
    border-color: var(--ct-red);
}

.ct-submit.mud-button-root {
    min-width: 200px;
    height: 38px;
    font-size: 13.5px;
}

/* Submit a Bid confirmation: the statement the customer agrees to, in Contra red. */
.ct-confirm .mud-checkbox .mud-typography,
.ct-confirm .mud-checkbox p {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ct-red);
}

/* ---------- Tabs as buttons, with a count ---------- */

.ct-tab.mud-button-root {
    height: 34px;
    border-radius: var(--ct-radius-control);
    border-color: var(--ct-line);
    background: var(--ct-white);
    color: var(--ct-ink);
    font-size: 12.5px;
    font-weight: 400;
    box-shadow: none;
}

.ct-tab.selected.mud-button-root {
    border-color: var(--ct-navy);
    background: var(--ct-navy-tint);
    font-weight: 600;
}

/* ---------- Grids and tables ---------- */

/* Rates grid: the last row is the total. */
.ct-rates .mud-table-foot {
    background-color: var(--ct-mist);
    font-weight: 700;
}

    .ct-rates .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell,
    .ct-rates .mud-table-foot .mud-table-cell {
        border-top: 1px solid var(--ct-line);
        color: var(--ct-navy);
        font-size: 15px;
        font-weight: 700;
    }

/* A row or value with a problem, e.g. a rate "On Request". */
.ct-row-problem {
    background-color: var(--ct-danger-tint) !important;
}

.ct-rate-problem {
    color: var(--ct-danger) !important;
    font-weight: 700 !important;
}

/* An autocomplete that needs attention: red border. */
.custom-autocomplete-border .mud-input-outlined-border {
    border-color: var(--ct-red) !important;
    border-width: 2px !important;
}

/* Selected row in a clickable grid. */
.ct-row-selected {
    background-color: var(--ct-navy-selected) !important;
}

/* Every table and grid: white and #F8FAFD striping, #DCE3EE borders, #F2F4F8 group rows.
   Same weight as MudBlazor's striped rule, loaded later, so it wins; hover stays on top. */
.mud-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: var(--ct-row);
}

.mud-table .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) {
    background-color: var(--ct-row-alt);
}

.mud-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--mud-palette-table-hover);
}

.mud-table .mud-table-body .mud-table-row:has(> .mud-datagrid-group),
.mud-table .mud-table-body .mud-table-row.mud-datagrid-group {
    background-color: var(--ct-row-group) !important;
    font-weight: 600;
}

.mud-table .mud-table-cell {
    border-color: var(--ct-table-line);
}

/* Column titles stay on one line; the table scrolls sideways if it has to. */
.mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    white-space: nowrap;
}

/* One row height for every MudTable, MudDataGrid and MudSimpleTable, dense or not. */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-table-root .mud-table-body .mud-table-cell,
.mud-table-root .mud-table-foot .mud-table-cell,
.mud-simple-table table * tr > td,
.mud-simple-table table * tr > th {
    padding-top: var(--ct-cell-pad-y);
    padding-bottom: var(--ct-cell-pad-y);
    padding-left: var(--ct-cell-pad-x);
    padding-inline-start: var(--ct-cell-pad-x);
}

.mud-simple-table table * tr > td,
.mud-simple-table table * tr > th {
    border-bottom-color: var(--ct-table-line);
}

/* Simple tables get the same header row as grids. */
.mud-simple-table table thead th {
    background-color: var(--ct-th-bg);
    color: var(--ct-th-text);
    font-weight: 600;
}

.mud-main-content .mud-card .mud-table,
.mud-main-content .ct-card .mud-table {
    border-color: var(--ct-table-line) !important;
}

/* References and routes in grids. */
.ct-ref {
    color: var(--ct-navy);
}

.ct-ref-accent {
    color: var(--ct-red);
}

.ct-route {
    font-size: 14px;
    font-weight: 600;
    color: var(--ct-navy);
}

.ct-diff-up {
    color: var(--ct-danger);
    font-size: 11px;
}

.ct-diff-down {
    color: var(--ct-success);
    font-size: 11px;
}

/* ---------- Status pills (MudChip) ---------- */

.ct-pill.mud-chip {
    height: 20px;
    margin: 0;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--ct-mist);
    color: var(--ct-slate);
}

.ct-pill-info.mud-chip { background: var(--ct-info-tint); color: var(--ct-info); }
.ct-pill-warning.mud-chip { background: var(--ct-warning-tint); color: var(--ct-warning); }
.ct-pill-success.mud-chip { background: var(--ct-success-tint); color: var(--ct-success); }
.ct-pill-danger.mud-chip { background: var(--ct-danger-tint); color: var(--ct-danger); }

/* ---------- Side panel (drawer) ---------- */

.ct-panel {
    border-radius: 0;
    min-height: 100%;
    padding: 18px 20px 28px;
    background: var(--ct-white);
    color: var(--ct-ink);
}

.ct-panel-section {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ct-navy);
}

.ct-history.mud-timeline .mud-timeline-item-content {
    padding-bottom: 12px;
}

/* ============================================================
   Vessel tracking: the map page with floating cards over it.
   ============================================================ */

.vt-root {
    position: relative;
    height: calc(100vh - 150px);
    min-height: 600px;
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    background: var(--ct-mist);
    box-shadow: var(--mud-elevation-4);
    font-size: 0.85rem;
    color: var(--ct-ink);
    --vt-ontime: var(--ct-success);
    --vt-late: var(--mud-palette-error);
}

    .vt-root.vt-alt-colors {
        --vt-ontime: var(--ct-info);
        --vt-late: var(--ct-warning);
    }

.vt-map { position: absolute; inset: 0; }

.vt-map-error {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--ct-slate);
}

.vt-map-label {
    position: absolute;
    white-space: nowrap;
    background: var(--ct-white);
    color: var(--ct-navy);
    font: 600 11px/1 Roboto, sans-serif;
    padding: 4px 6px;
    border-radius: 3px;
    border-left: 3px solid var(--ct-navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    pointer-events: none;
}

.vt-card {
    position: absolute; z-index: 2;
    display: flex; flex-direction: column;
    background: var(--ct-white);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-6);
    overflow: hidden;
}

/* Used with .ct-card-header. */
.vt-card-header { justify-content: space-between; flex-shrink: 0; height: 40px; padding: 0 12px; }
.vt-card-header .vt-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; }
.vt-header-actions { display: flex; gap: 8px; }

.vt-icon-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 0; display: flex; }

.vt-panel { top: 12px; left: 12px; bottom: 12px; width: 360px; transition: transform .25s ease; }
.vt-panel.vt-closed { transform: translateX(calc(-100% - 12px)); }

.vt-vessel-name { padding: 12px 16px 4px; font-size: 1.4rem; font-weight: 600; color: var(--ct-navy); letter-spacing: .5px; }

.vt-status {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
    margin: 6px 16px 0; padding: 6px 10px; border-radius: var(--mud-default-borderradius);
    background: var(--ct-mist); font-size: .8rem;
}
.vt-status span { white-space: nowrap; }
.vt-status span:first-child { color: var(--vt-ontime); font-weight: 500; }
.vt-status span:last-child { color: var(--ct-slate); }

.vt-panel-body { flex: 1; overflow-y: auto; padding: 0 16px 12px; }

.vt-section { padding: 12px 0; border-bottom: 1px solid var(--ct-line); }
.vt-section:last-child { border-bottom: none; }

.vt-section h4 { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ct-navy); }
.vt-section h4 small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ct-slate); margin-left: 6px; }

.vt-row { display: grid; grid-template-columns: 130px 1fr; padding: 2px 0; align-items: center; }
.vt-row > span:first-child { color: var(--ct-slate); }
.vt-row.vt-row-stack { grid-template-columns: 1fr; gap: 6px; }

.vt-open-btn { position: absolute; top: 12px; left: 12px; z-index: 2; }

.vt-maptype { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--ct-white); border-radius: var(--mud-default-borderradius); box-shadow: var(--mud-elevation-4); }

.vt-portcalls { top: 60px; right: 12px; width: 340px; max-height: calc(100% - 72px); }

.vt-portcalls-cols {
    display: grid; grid-template-columns: 1fr 1fr; padding: 6px 12px 6px 46px;
    background: var(--ct-mist); color: var(--ct-navy); font-weight: 700; text-align: center;
    border-bottom: 1px solid var(--ct-line);
}

.vt-portcalls-list { overflow-y: auto; position: relative; }

.vt-portcall { position: relative; cursor: pointer; border-left: 3px solid transparent; }
.vt-portcall:hover { background: var(--ct-navy-hover); }
.vt-portcall.vt-selected { background: var(--ct-navy-selected); border-left-color: var(--ct-navy); }

.vt-portcall::before {
    content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: var(--ct-line);
}

.vt-portcall-name {
    position: relative; display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 2px 34px; font-weight: 600; color: var(--ct-navy);
}

.vt-portcall-name::before {
    content: ""; position: absolute; left: 11px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--ct-navy); border: 2px solid var(--ct-white); box-shadow: 0 0 0 1px var(--ct-navy); box-sizing: border-box;
}

.vt-incidents { color: var(--ct-warning); font-size: .75rem; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }

.vt-portcall-row { display: grid; grid-template-columns: 36px 1fr 1fr; padding: 2px 12px 2px 34px; white-space: nowrap; }
.vt-portcall-row:last-child { padding-bottom: 8px; }
.vt-portcall-row > span:first-child { color: var(--ct-slate); }
.vt-portcall-row > span { display: flex; gap: 10px; }

.vt-ontime { color: var(--vt-ontime); font-weight: 500; }
.vt-late { color: var(--vt-late); font-weight: 500; }
.vt-na { color: var(--ct-slate); }

.vt-legend { display: flex; gap: 14px; padding: 8px 12px; background: var(--ct-mist); border-top: 1px solid var(--ct-line); font-size: .75rem; }
.vt-legend span { color: var(--ct-ink); font-weight: 400; }
.vt-legend span::before {
    content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px;
}
.vt-legend .vt-ontime::before { background: var(--vt-ontime); }
.vt-legend .vt-late::before { background: var(--vt-late); }
.vt-legend .vt-na::before { background: var(--ct-faint); }

@media (max-width: 960px) {
    .vt-panel { width: calc(100% - 24px); }
    .vt-portcalls { display: none; }
}

/* ============================================================
   Dashboard stat tiles (Shared/Components/ContraStatTile.razor).
   Icon, divider, label and a count pill. Each tile has a tone; the selected tile is
   solid navy. Tones use the status colours below.
   ============================================================ */

:root {
    --ct-amber: #D98A00;
    --ct-amber-tint: #FFF6E8;
    --ct-amber-line: #F6D9A8;
    --ct-green: #1E8E4E;
    --ct-green-tint: #EAF7EF;
    --ct-green-line: #BFE5CC;
    --ct-blue: #2F5FBF;
    --ct-blue-tint: #EDF2FC;
    --ct-blue-line: #C8D6F2;
    --ct-orange: #E2621B;
    --ct-orange-tint: #FFF1E8;
    --ct-orange-line: #F6CDB2;
    --ct-stat-height: 56px;
    --ct-hero-height: 80px; /* page banners (ContraPageHero): all the same height */
}

.ct-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 10px;
    background: var(--ct-white);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-card);
    box-shadow: var(--ct-shadow-sm);
}

.ct-stat {
    --tone: var(--ct-navy);
    --tone-tint: var(--ct-navy-tint);
    --tone-line: var(--ct-line);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ct-stat-height);
    padding: 8px 14px;
    border: 1px solid var(--tone-line);
    border-radius: 12px;
    background-color: var(--tone-tint);
    color: var(--ct-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

    /* Faint hill along the bottom. */
    .ct-stat::after {
        content: "";
        position: absolute;
        left: -10%;
        right: -10%;
        bottom: -60%;
        height: 90%;
        border-radius: 50%;
        background: var(--tone);
        opacity: .06;
        pointer-events: none;
    }

    .ct-stat:hover {
        transform: translateY(-2px);
        box-shadow: var(--ct-shadow-md);
    }

    .ct-stat:focus-visible {
        outline: 2px solid var(--ct-navy);
        outline-offset: 2px;
    }

.ct-stat-amber { --tone: var(--ct-amber); --tone-tint: var(--ct-amber-tint); --tone-line: var(--ct-amber-line); }
.ct-stat-green { --tone: var(--ct-green); --tone-tint: var(--ct-green-tint); --tone-line: var(--ct-green-line); }
.ct-stat-blue { --tone: var(--ct-blue); --tone-tint: var(--ct-blue-tint); --tone-line: var(--ct-blue-line); }
.ct-stat-orange { --tone: var(--ct-orange); --tone-tint: var(--ct-orange-tint); --tone-line: var(--ct-orange-line); }
.ct-stat-red { --tone: var(--ct-red); --tone-tint: var(--ct-danger-tint); --tone-line: #EFC3C6; }
.ct-stat-slate { --tone: var(--ct-slate); --tone-tint: #F3F4F7; --tone-line: var(--ct-line); }

.ct-stat-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    padding-right: 12px;
    border-right: 1px solid color-mix(in srgb, var(--tone) 25%, transparent);
    color: var(--tone);
}

    .ct-stat-icon .mud-icon-root {
        width: 28px;
        height: 28px;
        font-size: 28px;
    }

    .ct-stat-icon .ct-stat-icon-badge.mud-icon-root {
        position: absolute;
        top: -10px;
        left: 8px;
        width: 12px;
        height: 12px;
        font-size: 12px;
    }

.ct-stat-label {
    flex: 1;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ct-navy);
}

.ct-stat-count {
    flex-shrink: 0;
    min-width: 40px;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone) 14%, var(--ct-white));
    color: var(--tone);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

/* The active filter: solid navy, white text, translucent pill. */
.ct-stat.ct-stat-selected {
    border-color: transparent;
    background: var(--ct-tile-gradient);
    box-shadow: 0 6px 16px rgba(36, 54, 111, .30);
}

    .ct-stat.ct-stat-selected::after {
        background: var(--ct-white);
    }

    .ct-stat.ct-stat-selected .ct-stat-icon,
    .ct-stat.ct-stat-selected .ct-stat-label {
        color: var(--ct-white);
    }

    .ct-stat.ct-stat-selected .ct-stat-icon {
        border-right-color: rgba(255, 255, 255, .3);
    }

    .ct-stat.ct-stat-selected .ct-stat-count {
        background: rgba(255, 255, 255, .18);
        color: var(--ct-white);
    }

/* ============================================================
   Summary info tiles (Shared/Components/ContraInfoTile.razor), e.g. the top of
   Shipment Details: round icon badge, small label, bold value, faint watermark.
   Same height as the dashboard stat tiles.
   ============================================================ */

.ct-info-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.ct-info {
    --tone: var(--ct-navy);
    --tone-tint: #F7F8FC;
    --tone-line: var(--ct-line);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--ct-stat-height);
    padding: 8px 14px;
    border: 1px solid var(--tone-line);
    border-radius: 12px;
    background-color: var(--tone-tint);
}

.ct-info-green { --tone: var(--ct-green); --tone-tint: var(--ct-green-tint); --tone-line: var(--ct-green-line); }
.ct-info-orange { --tone: var(--ct-orange); --tone-tint: var(--ct-orange-tint); --tone-line: var(--ct-orange-line); }

.ct-info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 12%, var(--ct-white));
    color: var(--tone);
}

    .ct-info-badge .mud-icon-root {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }

.ct-info-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-info-label {
    font-size: 12px;
    color: var(--ct-slate);
    line-height: 1.3;
}

.ct-info-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--ct-navy);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-info-green .ct-info-value,
.ct-info-orange .ct-info-value {
    color: var(--tone);
}

/* Faint watermark on the right: a globe with a dotted route, or a ship. */
.ct-info-mark {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--tone);
    opacity: .16;
    pointer-events: none;
}

    .ct-info-mark .ct-info-mark-icon.mud-icon-root {
        width: 48px;
        height: 48px;
        font-size: 48px;
    }

.ct-info-route {
    position: absolute;
    right: 2px;
    width: 40px;
    height: 20px;
}

    .ct-info-route path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-dasharray: 3 3;
    }

    .ct-info-route circle {
        fill: currentColor;
    }

/* Cards stacked directly in one column get the standard gap (same as MudGrid Spacing 2). */
.mud-main-content .mud-card + .mud-card {
    margin-top: 8px;
}

/* A button next to a dense outlined field: same 40px height as the field. */
.ct-btn-field-height.mud-button-root {
    height: 40px;
}

/* App bar loading indicator (Shared/GlobalSpinner.razor): a thin 3px line. */
.ct-top-loader.mud-progress-linear {
    margin: 0 !important;
    height: 3px;
}

/* Inputs inside table cells (e.g. a date per row): no extra margin, tighter box. */
.mud-simple-table td .mud-input-control,
.mud-table-cell .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

    .mud-simple-table td .mud-input.mud-input-outlined .mud-input-slot,
    .mud-table-cell .mud-input.mud-input-outlined .mud-input-slot {
        padding-top: 6px;
        padding-bottom: 6px;
    }

/* Simple tables without a fixed header never need a vertical scrollbar (an input in the
   last row can otherwise push it 2-3px over). */
.mud-simple-table:not(.mud-table-sticky-header) > .mud-table-container {
    overflow-y: hidden;
}

/* ============================================================
   Page banner (Shared/Components/ContraPageHero.razor): soft blue band with a round
   icon, title and subtitle, and a picture fading in on the right.
   ============================================================ */

.ct-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--ct-hero-height);
    padding: 10px 20px;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-card);
    background: linear-gradient(100deg, #EEF3FA 0%, #E3EBF6 55%, #D6E2F2 100%);
    box-shadow: var(--ct-shadow-sm);
}

    /* Soft hill behind the text. */
    .ct-hero::before {
        content: "";
        position: absolute;
        left: 25%;
        bottom: -70%;
        width: 60%;
        height: 120%;
        border-radius: 50%;
        background: rgba(255, 255, 255, .45);
        pointer-events: none;
    }

.ct-hero-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    color: var(--ct-navy);
}

    .ct-hero-icon .mud-icon-root {
        width: 26px;
        height: 26px;
        font-size: 26px;
    }

.ct-hero-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ct-hero-title.mud-typography {
    color: var(--ct-navy);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.ct-hero-subtitle.mud-typography {
    margin-top: 2px;
    color: var(--ct-slate);
}

.ct-hero-picture {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    max-width: 45%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
    mask-image: linear-gradient(to right, transparent 0%, #000 35%);
    pointer-events: none;
}

.ct-hero-ship {
    width: 230px;
    height: auto;
    bottom: 0;
}

    .ct-hero-ship .ct-hero-sea { fill: rgba(34, 46, 101, .10); }
    .ct-hero-ship .ct-hero-hull { fill: var(--ct-navy); opacity: .55; }
    .ct-hero-ship .ct-hero-bridge { fill: var(--ct-navy); opacity: .45; }
    .ct-hero-ship .ct-hero-boxes rect { fill: var(--ct-red); opacity: .35; stroke: #fff; stroke-width: 1.5; }
    .ct-hero-ship .ct-hero-boxes rect:nth-child(3n) { fill: var(--ct-navy); opacity: .3; }

/* Buttons on the right of the banner, in front of any picture. */
.ct-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .ct-hero-picture { display: none; }
}

/* ============================================================
   Login page (Pages/Account/LoginRegister.razor): photo panel with the logo on the left,
   sign-in and Track Shipments on the right. The account layout's card is narrow (500px) for the
   other account pages; this page widens only that card and lets the panels fill it edge to edge.
   ============================================================ */

.mud-container:has(.ct-login-page) {
    max-width: 1600px;
}

.mud-paper:has(> .ct-login-page) {
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--ct-radius-card);
}

.ct-login-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 680px;
}

/* Left: the photo (wwwroot/images/login/login-hero.jpg); a soft white glow behind the logo keeps it
   readable and leaves the rest of the photo untouched. If the photo is missing, the light gradient
   underneath shows instead. The logo sits in the centre. */
.ct-login-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px;
    text-align: center;
    background:
        radial-gradient(ellipse 260px 220px at 50% 50%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%),
        url("../images/login/login-hero.jpg") left bottom / cover no-repeat,
        linear-gradient(160deg, #F7F9FC 0%, #E3EBF6 55%, #C9D7EC 100%);
}

.ct-login-logo {
    width: 280px;
    max-width: 80%;
    height: auto;
}

/* Right: one padding for everything, so tabs, heading, fields, buttons and Track Shipments line up. */
.ct-login-form {
    padding: 32px 48px 40px;
    background: var(--ct-white);
    min-width: 0;
}

.ct-login-title.mud-typography {
    color: var(--ct-ink);
    font-weight: 700;
}

.ct-login-label {
    margin-bottom: 6px;
    color: var(--ct-ink);
    font-size: 14px;
    font-weight: 600;
}

.ct-login-field .mud-input.mud-input-outlined {
    background-color: #EEF3FB;
}

/* Password: lock icon in the field, show/hide eye over its right end. */
.ct-login-password {
    position: relative;
}

    .ct-login-password .mud-input-slot {
        padding-right: 44px !important;
    }

.ct-login-eye.mud-icon-button {
    position: absolute;
    top: 20px;
    right: 8px;
    transform: translateY(-50%);
    color: var(--ct-slate);
}

.ct-login-submit.mud-button-root {
    height: 48px;
    font-size: 16px;
}

/* Track Shipments under the login form (TrackingSearchComponentHome): icon left, text and search right. */
.ct-track-home {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius-card);
    background: var(--ct-mist);
}

.ct-track-home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #E3EAF6;
    color: var(--ct-navy);
}

    .ct-track-home-icon svg {
        width: 30px;
        height: 30px;
    }

/* Narrow screens: the photo panel sits above the form, shorter. */
@media (max-width: 960px) {
    .ct-login-page {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .ct-login-hero {
        padding: 32px 24px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .8) 100%),
            url("../images/login/login-hero.jpg") left bottom / cover no-repeat,
            linear-gradient(160deg, #F7F9FC 0%, #E3EBF6 55%, #C9D7EC 100%);
    }

    .ct-login-form {
        padding: 24px;
    }

        /* MudTabs sets min-width:160px inline, which makes it show scroll arrows on phones. */
        .ct-login-form .mud-tab {
            min-width: 120px !important;
        }

    .ct-track-home-icon {
        display: none;
    }
}