/* CargoWeb theme — ported from LogisticsDashboard design system */
:root { --imp-offset: 0px; }

html, body { font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif; }

/* ── Layout shell ── */
.sb-layout { display: flex; min-height: 100vh; max-width: 100vw; overflow-x: hidden; }

/* ── Sidebar ── */
.sb-sidebar {
    width: 260px; height: 100vh;
    position: fixed; left: 0; top: var(--imp-offset, 0px);
    background: linear-gradient(180deg, #0f172a 0%, #1a2744 100%);
    display: flex; flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100; overflow: hidden;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
}
.sb-sidebar.collapsed { width: 64px; }

/* ── Collapsed (icon-rail) sidebar rules ──
   Tighten every block so the icon rail reads as a single neat strip
   instead of widely-spaced floating glyphs. */
.sb-sidebar.collapsed .sb-logo-area {
    padding: 12px 8px;
    min-height: 58px;
    justify-content: center;
    gap: 0;
}
.sb-sidebar.collapsed .sb-logo-icon-wrap {
    width: 36px; height: 36px; min-width: 36px;
}
.sb-sidebar.collapsed .sb-logo-text,
.sb-sidebar.collapsed .sb-collapse-btn { display: none; }
.sb-sidebar.collapsed .sb-nav {
    padding: 8px 4px;
}
.sb-sidebar.collapsed .sb-nav-label,
.sb-sidebar.collapsed .sb-group-toggle,
.sb-sidebar.collapsed .sb-nav-sublabel,
.sb-sidebar.collapsed .sb-nav-subitems {
    display: none !important;
}
/* Subtle 1px line between logical groups in the rail (every 5 icons after
   the Dashboard) — keeps the rail readable without group headers. */
.sb-sidebar.collapsed .sb-nav > .sb-nav-item.collapsed:nth-of-type(5n+1):not(:first-of-type) {
    margin-top: 8px;
    position: relative;
}
.sb-sidebar.collapsed .sb-nav > .sb-nav-item.collapsed:nth-of-type(5n+1):not(:first-of-type)::after {
    content: ''; position: absolute;
    top: -5px; left: 8px; right: 8px; height: 1px;
    background: rgba(255,255,255,0.06);
}

.sb-logo-area {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 16px; min-height: 68px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sb-logo-icon-wrap {
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff; font-weight: 800; font-size: 18px;
}
.sb-logo-text { display: flex; flex-direction: column; white-space: nowrap; overflow: hidden; }
.sb-logo-title { font-size: 16px; font-weight: 700; color: #f8fafc; line-height: 1.2; letter-spacing: -0.2px; }
.sb-logo-subtitle { font-size: 10.5px; color: #64748b; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; }
.sb-logo-icon-wrap { background: #fff !important; }
.sb-logo-icon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-wolke { background: #fff; border-radius: 6px; padding: 5px 10px; display: inline-flex; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.sb-wolke img { height: 18px; width: auto; display: block; }
.sb-wolke.sm { padding: 4px 6px; }
.sb-wolke.sm img { height: 13px; }
.sb-collapse-btn {
    background: none; border: none; color: #475569; cursor: pointer;
    padding: 4px; border-radius: 6px; display: flex; align-items: center;
    justify-content: center; margin-left: auto; transition: all 0.2s;
}
.sb-collapse-btn .material-icons { font-size: 20px; }
.sb-collapse-btn:hover { background: rgba(255,255,255,0.06); color: #94a3b8; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; scrollbar-width: thin; }
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.sb-nav-label { font-size: 10px; font-weight: 600; color: #475569; letter-spacing: 1.5px; padding: 14px 12px 8px; text-transform: uppercase; }
.sb-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; cursor: pointer;
    font: inherit; text-align: left; transition: color 0.15s;
}
.sb-group-toggle:hover { color: #93c5fd; }
.sb-group-chevron { font-size: 15px !important; transition: transform 0.18s ease; opacity: 0.7; }
.sb-group-chevron.closed { transform: rotate(-90deg); }

/* Second-tier group label (sub-group under a parent group) */
.sb-nav-sublabel {
    display: flex; align-items: center; gap: 10px;
    width: 100%; background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.78); font: inherit; text-align: left;
    padding: 9px 12px; margin: 2px 0; border-radius: 8px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
    transition: background 0.15s, color 0.15s;
}
.sb-nav-sublabel:hover { background: rgba(255,255,255,0.06); color: #ffffff; }
.sb-nav-sublabel .sb-nav-sub-ic { font-size: 18px !important; color: #93c5fd; opacity: 0.9; }
.sb-nav-sublabel .sb-group-chevron { margin-left: auto; }
.sb-nav-subitems { padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.06); margin: 2px 0 4px 14px; }

/* Pull the red active rail of nested items back to the sidebar's left edge
   so the highlight matches top-level items (28px = subitems margin + padding). */
.sb-nav-subitems .sb-nav-item { position: relative; }
.sb-nav-subitems .sb-nav-item.active::before { left: -28px !important; }
/* Hide the dotted left guide on the row that is currently active so the red
   rail is the only vertical accent in that strip. */
.sb-nav-subitems:has(> .sb-nav-item.active) { border-left-color: transparent; }

.sb-footer {
    margin-top: auto; padding: 12px 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}

/* Compact one-row variant — Wolke + India badge side by side, no header label. */
.sb-footer-compact {
    flex-direction: row;
    align-items: center; justify-content: center;
    gap: 8px;
    padding: 8px 10px 10px;
}
.sb-footer-compact .sb-wolke {
    padding: 3px 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}
.sb-footer-compact .sb-wolke img { height: 14px; }
.sb-version { font-size: 10px; color: #94a3b8; white-space: nowrap; letter-spacing: 0.2px; }

/* ─────────────────────────────────────────────────────────────
   LR quick-search — pill input in the topbar between greeting
   and the company/user actions. Enter or arrow-button navigates
   to /transactions/booking/edit/{lrNo}.
   ───────────────────────────────────────────────────────────── */
.sb-lr-search {
    flex: 1 1 320px;
    max-width: 420px;
    min-width: 180px;
    display: inline-flex; align-items: center;
    background: #f4f7fd;
    border: 1px solid #e3e9f5;
    border-radius: 10px;
    padding: 3px 5px 3px 10px;
    height: 34px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin-right: auto;  /* sits left, pushes chips to the right */
}
.sb-lr-search:focus-within {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sb-lr-search-icon {
    font-size: 18px !important;
    color: #64748b;
    margin-right: 6px;
}
.sb-lr-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-size: 13px; color: #0f172a;
    height: 100%;
}
.sb-lr-search input::placeholder { color: #94a3b8; }

.sb-lr-search-clear {
    border: 0; background: transparent; cursor: pointer;
    width: 20px; height: 20px;
    color: #94a3b8; font-size: 16px; line-height: 1;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-lr-search-clear:hover { background: #e2e8f0; color: #0f172a; }

.sb-lr-search-go {
    border: 0; cursor: pointer;
    width: 26px; height: 26px;
    background: #2563eb; color: #ffffff;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 3px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.sb-lr-search-go:hover:not(:disabled) {
    background: #1d4ed8; transform: scale(1.05);
}
.sb-lr-search-go:disabled {
    background: #cbd5e1; cursor: not-allowed;
}
.sb-lr-search-go .material-icons { font-size: 16px; }

/* Hide LR search on narrow screens — it would crowd out the company chip.
   Power users on mobile can still navigate via the Bookings menu. */
@media (max-width: 1100px) {
    .sb-lr-search { display: none; }
}
.sb-powered-label { font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }


/* ── Main area ── */
.sb-main {
    margin-left: 260px; flex: 1; min-height: 100vh; background: #f8f9fb;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; min-width: 0; overflow-x: hidden;
}
.sb-main.sidebar-collapsed { margin-left: 64px; }
.sb-content { padding: 24px; flex: 1; }

.sb-topbar {
    position: sticky; top: var(--imp-offset, 0px); z-index: 90;
    display: flex; align-items: center; gap: 8px;
    padding: 0 24px; height: 66px; min-width: 0; overflow: visible;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border-bottom: 1px solid #e7eaf2;
    box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
/* Eye-catching brand accent line across the top of the header */
.sb-topbar::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 45%, #e11d48 100%);
}
.sb-menu-btn {
    background: none; border: none; cursor: pointer;
    padding: 8px; border-radius: 8px; color: #64748b;
    display: flex; align-items: center; transition: all 0.15s;
}
.sb-menu-btn:hover { background: #f1f5f9; color: #1e293b; }
.sb-menu-btn .material-icons { font-size: 24px; }

.sb-topbar-greeting { flex: 1; }
.sb-greeting-title { display: block; font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.25; letter-spacing: -0.2px; }
.sb-greeting-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #94a3b8; font-weight: 500; }
.sb-greeting-sub .material-icons { font-size: 14px; color: #cbd5e1; }

.sb-topbar-actions { display: flex; align-items: center; gap: 12px; }
/* Base context chip — defaults; the two-line "stack" overrides below
   (around line 1530+) refine this. Kept here for any non-stack callers. */
.sb-context-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f4f7fd; color: #1e293b; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; border: 1px solid #e3e9f5;
}
.sb-context-chip .material-icons { font-size: 17px; color: #2563eb; }
.sb-topbar-divider { width: 1px; height: 34px; background: #e7eaf2; margin: 0 2px; }
.sb-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.sb-user-name { font-size: 13.5px; font-weight: 600; color: #1e293b; line-height: 1.2; }
.sb-user-role { font-size: 11px; color: #94a3b8; }

/* Centered shell for unauthenticated pages (login / select tenant) */
.sb-plain { min-height: 100vh; background: #f8f9fb; display: flex; flex-direction: column; }

/* ════════════════════════════════════════════════
   PROFESSIONAL UI LAYER (applies to all pages)
   ════════════════════════════════════════════════ */
.sb-content { background: #f8f9fb; }

/* Page header band — ORIGINAL pre-redesign styling, restored.
   Flat row, blue-gradient icon, no background band. */
.cw-page-head {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 20px;
    /* A toolbar that will not fit wraps to a second row. Without this it kept taking space from
       the title instead, so on a crowded screen (the Print Designer) a three-word title stacked
       into three one-word lines AND the last button was still clipped off the right edge. */
    flex-wrap: wrap;
}
.cw-page-head .cw-ph-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff;
    box-shadow: 0 6px 16px rgba(37,99,235,0.28);
}
.cw-page-head .cw-ph-icon .material-icons { font-size: 24px; }
/* min-width:0 lets the block shrink to an ELLIPSIS rather than to its longest word, which is
   what a flex item does by default. flex:1 1 auto keeps it claiming the row before the toolbar
   wraps underneath it. */
.cw-ph-text { flex: 1 1 auto; min-width: 0; }
.cw-ph-title {
    font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.2; letter-spacing: -0.3px;
    /* One line, always. A page title that stacks vertically reads as a broken screen. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-ph-sub {
    font-size: 13px; color: #64748b; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-ph-actions {
    margin-left: auto; display: flex; align-items: center; gap: 10px;
    /* Wrap inside itself too, so a very long toolbar makes two tidy rows instead of running
       off the edge of the page. */
    flex-wrap: wrap; justify-content: flex-end;
}
.cw-count-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px;
}

/* Filter toolbar — search + date filters sit on their own row above a
   list grid, so the page header stays clean (title + primary action). */
.cw-filterbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 8px 12px;
    background: #fff; border: 1px solid #e7eaf0; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.cw-filterbar .cw-filterbar-search { flex: 1 1 280px; min-width: 220px; }
.cw-filterbar .mud-input-control { margin: 0; }
/* Date filters keep a fixed, compact width and never stretch. The width is
   applied to the INPUT only (not the picker root) so it never constrains the
   calendar popover, which is a separate paper. */
.cw-filterbar .mud-picker { flex: 0 0 auto; }
.cw-filterbar .mud-picker.cw-date-filter { width: 170px; }

/* Entry-form date pickers: keep the input wide enough for the full
   "dd-MM-yyyy" value plus the calendar adornment icon so the date is
   never cramped inside a dense grid cell. The `input.mud-input-slot`
   selector outranks MudBlazor's own `.mud-input-slot.mud-input-root`
   (which forces width:100% / min-width:0). */
.cw-form-date.mud-picker { min-width: 172px; }
.cw-form-date input.mud-input-slot { min-width: 118px; }

/* The same floor for EVERY date picker, not just the ~23 call sites that
   remembered the class. 180 pickers across 83 forms; a long label such as
   "Insurance upto" in a narrow grid cell rendered underneath the calendar
   adornment, leaving both unreadable ("Insurance [icon] to").

   min() rather than a flat 172px: inside a narrow column, or on a phone, the
   picker still shrinks to the cell instead of overflowing it and forcing the
   page to scroll sideways. Filter-bar dates opt out - they set their own
   compact width deliberately. */
.mud-picker:not(.cw-date-filter) { min-width: min(172px, 100%); }

/* …and the INPUT inside it. Widening the picker alone is not enough: MudBlazor's
   own `.mud-input-slot.mud-input-root` forces `width:100%; min-width:0`, so in a
   dense grid cell the text box collapses to a few pixels and a date renders as
   "1" instead of "01-04-2026". The `input.mud-input-slot` selector outranks it -
   the same trick .cw-form-date has always used, now applied everywhere. */
.mud-picker:not(.cw-date-filter) input.mud-input-slot { min-width: 118px; }

/* Belt and braces for the overlap itself: whatever the width, the floating
   label stops short of the end adornment instead of sliding under it. ~44px
   clears the icon and its padding. Applies in both label states, so a label
   too long for its field truncates with an ellipsis - readable, where the
   overlap was not. */
.mud-picker .mud-input-label {
    max-width: calc(100% - 44px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── MudBlazor date-picker calendar popover ──
   The Liner button theme (`.mud-button-root { padding:8px 18px }`) bloats the
   calendar day cells (they are MudButtons), and the picker popover paper was
   sized too narrow — so the 7-column grid overflowed and clipped. Force the
   popover paper wide enough and reset the day cells to a compact 36px grid. */
.mud-picker-paper,
.mud-picker-inline-paper,
.mud-picker-container,
.mud-picker-calendar-container,
.mud-picker-calendar-transition,
.mud-picker-calendar { min-width: 300px !important; }
.mud-picker-calendar-day.mud-button-root,
.mud-picker-calendar-day {
    padding: 0 !important;
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
}
/* Weekday-label row: each label sits in a 36px slot so it lines up with the
   day-number columns below. (Do NOT width-clamp the header row itself.) */
.mud-picker-calendar-header-day { display: flex !important; }
.mud-picker-calendar-header-day .mud-day-label {
    width: 36px !important;
    min-width: 36px !important;
    text-align: center !important;
    font-size: 11px !important;
}
.mud-picker-calendar-header-transition,
.mud-picker-calendar-week { display: flex !important; }
.mud-picker-calendar-header .mud-button-root,
.mud-picker-calendar-header .mud-icon-button { padding: 4px !important; min-width: 0 !important; }
.mud-picker-month-container .mud-picker-month,
.mud-picker-year .mud-button-root { padding: 6px 10px !important; }

/* Card surface */
.cw-card.mud-paper {
    border: 1px solid #e7eaf0; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px rgba(16,24,40,0.05);
    overflow: hidden; background: #fff;
}
.cw-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid #eef1f5; background: #fcfcfd;
}

/* MudTable -> premium data grid */
.cw-card .mud-table-root { background: transparent; }
.cw-card .mud-table-head th,
.cw-card .mud-table-head .mud-table-cell {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    color: #e2e8f0 !important; font-weight: 600 !important;
    font-size: 11.5px !important; letter-spacing: 0.6px; text-transform: uppercase;
    border-bottom: none !important; padding: 12px 16px !important;
}
.cw-card .mud-table-row:hover .mud-table-cell { background: #f1f6ff !important; }
.cw-card .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell { background: #fafbfc; }
.cw-card .mud-table-body .mud-table-cell {
    border-bottom: 1px solid #f1f3f7 !important;
    padding: 11px 16px !important; font-size: 13px; color: #1e293b;
}
.cw-card .mud-table-row { transition: background 0.12s; }

/* Buttons */
.mud-button-filled-primary {
    box-shadow: 0 4px 12px rgba(25,118,210,0.28) !important;
    text-transform: none !important; font-weight: 600 !important; letter-spacing: 0;
}
.mud-button-root { text-transform: none !important; }

/* Inputs */
.mud-input-outlined .mud-input-outlined-border { border-radius: 10px; }

/* Focused form control — bold, unmistakable highlight so the active field
   stands out. Applies to every form (text/select/autocomplete/date/numeric). */
.mud-input-control:focus-within .mud-input {
    background-color: #dbeafe !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
    border-radius: 8px;
}
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: #1d4ed8 !important;
    border-width: 2px !important;
}
.mud-input-control:focus-within label.mud-input-label {
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* Action icon buttons in rows */
.cw-card .mud-table-cell .mud-icon-button { color: #64748b; }
.cw-card .mud-table-cell .mud-icon-button:hover { background: #eef2ff; color: #2563eb; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid #f8f9fb; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ════════ MudDataGrid premium styling ════════ */
.cw-card .mud-data-grid { border: none; background: transparent; }
.cw-card .mud-data-grid .mud-table-toolbar { display: none; }
.cw-card .mud-data-grid .mud-table-head .mud-table-cell,
.cw-card .mud-data-grid thead th {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    color: #e2e8f0 !important; font-weight: 600 !important;
    font-size: 11.5px !important; letter-spacing: 0.5px; text-transform: uppercase;
    border-bottom: none !important; padding: 12px 16px !important; white-space: nowrap;
}
.cw-card .mud-data-grid .mud-table-head .mud-table-cell .mud-button-root,
.cw-card .mud-data-grid .mud-table-head .mud-icon-button { color: #cbd5e1 !important; }
.cw-card .mud-data-grid tbody .mud-table-row:hover .mud-table-cell { background: #f1f6ff !important; }
.cw-card .mud-data-grid tbody .mud-table-row:nth-child(even) .mud-table-cell { background: #fafbfc; }
.cw-card .mud-data-grid tbody .mud-table-cell {
    border-bottom: 1px solid #f1f3f7 !important; padding: 10px 16px !important;
    font-size: 13px; color: #1e293b;
}
.cw-card .mud-data-grid .mud-table-pagination {
    border-top: 1px solid #eef1f5; background: #fcfcfd; color: #475569; font-size: 12.5px;
}
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-table-cell { background: #fbfcfe !important; padding: 6px 12px !important; }
/* The column-filter row cell has a LIGHT background (see the rule above), so its
   inputs must be DARK to be readable. (Title cells carry no inputs, so these
   thead/head input selectors only hit the filter row.) */
.cw-card .mud-data-grid thead input,
.cw-card .mud-data-grid .mud-table-head input,
.cw-card .mud-data-grid thead .mud-input-slot,
.cw-card .mud-data-grid .mud-table-head .mud-input-slot {
    color: #1e293b !important; caret-color: #1e293b !important;
}
.cw-card .mud-data-grid thead input::placeholder,
.cw-card .mud-data-grid .mud-table-head input::placeholder {
    color: #94a3b8 !important; opacity: 1;
}
.cw-card .mud-data-grid thead .mud-input-underline::before,
.cw-card .mud-data-grid .mud-table-head .mud-input-underline::before {
    border-bottom-color: rgba(15,23,42,0.20) !important;
}
.cw-card .mud-data-grid thead .mud-input-underline::after,
.cw-card .mud-data-grid .mud-table-head .mud-input-underline::after {
    border-bottom-color: #2563eb !important;
}

/* Column-filter row: keep it compact so the field is readable in narrow columns */
.cw-card .mud-data-grid thead .mud-input-control,
.cw-card .mud-data-grid .mud-table-head .mud-input-control { min-width: 0 !important; }
.cw-card .mud-data-grid thead .mud-input,
.cw-card .mud-data-grid .mud-table-head .mud-input { width: 100% !important; min-width: 0 !important; }
.cw-card .mud-data-grid thead .mud-input-slot input,
.cw-card .mud-data-grid .mud-table-head .mud-input-slot input { min-width: 0 !important; padding-right: 2px !important; }
/* Drop numeric spinner arrows that overlap ID / PIN filter fields */
.cw-card .mud-data-grid thead input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.cw-card .mud-data-grid thead input[type=number]::-webkit-outer-spin-button,
.cw-card .mud-data-grid thead input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
/* Shrink the per-column filter action buttons so the input has room */
.cw-card .mud-data-grid thead .mud-table-cell .mud-icon-button {
    width: 24px !important; height: 24px !important; padding: 2px !important; margin: 0 !important;
}
.cw-card .mud-data-grid thead .mud-table-cell .mud-icon-button .mud-icon-root,
.cw-card .mud-data-grid thead .mud-table-cell .mud-icon-button .material-icons {
    font-size: 15px !important;
}
.cw-card .mud-data-grid thead .mud-table-cell { padding-left: 8px !important; padding-right: 8px !important; }

/* Autocomplete / select look */
.mud-autocomplete .mud-input-outlined-border,
.mud-select .mud-input-outlined-border { border-radius: 10px; }
.mud-list-item.mud-list-item-clickable:hover { background: #eef2ff; }

/* ════════════════ MOBILE RESPONSIVE ════════════════ */
.sb-backdrop { display: none; }

@media (max-width: 960px) {
    /* Off-canvas sidebar */
    .sb-sidebar {
        width: 260px !important;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1300;
    }
    .sb-sidebar.collapsed { width: 260px !important; }
    .sb-sidebar.collapsed .sb-logo-text,
    .sb-sidebar.collapsed .sb-nav-item-label,
    .sb-sidebar.collapsed .sb-nav-label { display: initial; }
    .sb-sidebar.mobile-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.45); }

    .sb-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1290;
        background: rgba(15,23,42,0.5); opacity: 0; pointer-events: none;
        transition: opacity 0.2s;
    }
    .sb-backdrop.show { opacity: 1; pointer-events: auto; }

    .sb-main, .sb-main.sidebar-collapsed { margin-left: 0 !important; }
    .sb-content { padding: 14px; }

    .sb-topbar { padding: 0 12px; gap: 4px; }
    .sb-greeting-sub { display: none; }
    .sb-greeting-title { font-size: 14px; }
    .sb-context-chip {
        max-width: none; padding: 4px 8px;
    }
    .sb-context-cmp { font-size: 11.5px; max-width: 180px; }
    .sb-context-meta { display: none; }
    .sb-topbar-divider, .sb-user-name, .sb-user-role { display: none; }

    /* Page header stacks */
    .cw-page-head { flex-wrap: wrap; }
    .cw-ph-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .cw-ph-actions .mud-input-control,
    .cw-ph-actions .mud-input-root { min-width: 0; }
    .cw-ph-actions > * { flex: 1 1 auto; }

    /* Wide data grids scroll horizontally instead of breaking layout */
    .cw-card { overflow-x: auto; }
    .cw-card .mud-table-container { overflow-x: auto; }

    /* Auth split-screens already collapse at 900px; keep cards full width.
       Note: .cw-form-inner is intentionally omitted here — the new login
       page (Login.razor) owns its own width rules in its inline <style>. */
    .cw-auth-card, .cw-st-inner { max-width: 100% !important; }
}

@media (max-width: 480px) {
    .sb-content { padding: 10px; }
    .cw-ph-title { font-size: 17px; }
    .sb-greeting-title { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ════════ Wide form pages (replaces popup dialogs) ════════
   Every master edit page renders inside a .cw-form-wrap. We default to
   full-content-width so the form card spans edge-to-edge of the layout's
   content area — the legacy 1080px cap left huge empty gutters on wide
   monitors. Forms still respect the surrounding MainLayout padding, so
   they don't bleed into the side nav. */
.cw-form-wrap { max-width: 100%; margin: 0; }

/* Positioned ancestor so the round loading overlay (CwLoadingOverlay,
   Absolute=true) covers just the form area, not the whole viewport. */
.cw-form-wrap-rel { position: relative; min-height: 160px; }

/* ── Freight-memo attached-challans grid — clean, professional table ──────── */
.cw-challan-grid {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.cw-challan-grid table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cw-challan-grid thead th {
    text-align: left;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 11px 16px;
    border-bottom: 1px solid #e7eaf0;
    white-space: nowrap;
}
.cw-challan-grid thead th.num { text-align: right; }
.cw-challan-grid thead th.act { width: 52px; }
.cw-challan-grid tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.cw-challan-grid tbody tr { transition: background .12s ease; }
.cw-challan-grid tbody tr:hover { background: #f6faff; }
.cw-challan-grid tbody tr:last-child td { border-bottom: none; }
.cw-challan-grid td.num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}
.cw-challan-grid td.muted { color: #64748b; white-space: nowrap; }
.cw-challan-grid td.act { text-align: center; }

/* Grid that holds EDITABLE inputs (bill charges, and any other entry grid).
   The reading-grid padding above is 12px/16px, which costs 32px of every cell.
   Stack an outlined MudNumericField's own padding on top of that inside a ~96px
   charge column and the number itself has almost no room left - the amount ends
   up clipped or scrolled out of view while the user is typing it.
   This modifier tightens the cell and the input together, and right-aligns the
   REAL <input> element: a text-align on the MudNumericField only styles its
   wrapper, so figures stayed left-aligned and looked ragged against the
   right-aligned read-only totals beside them. */
.cw-challan-grid.cw-grid-input tbody td { padding: 5px 6px; }
.cw-challan-grid.cw-grid-input thead th { padding: 9px 6px; }

.cw-challan-grid.cw-grid-input .mud-input-slot,
.cw-challan-grid.cw-grid-input input.mud-input-root {
    padding-left: 7px;
    padding-right: 7px;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}

/* The numeric columns carry .num on the header; align their inputs to match. */
.cw-challan-grid.cw-grid-input td input.mud-input-root { text-align: right; }
/* Free-text cells (invoice no, DD no) read better left-aligned. */
.cw-challan-grid.cw-grid-input td.txt input.mud-input-root { text-align: left; }

/* Outlined fields reserve vertical room for a floating label none of these use. */
.cw-challan-grid.cw-grid-input .mud-input.mud-input-outlined > input { padding-top: 7px; padding-bottom: 7px; }
.cw-challan-grid.cw-grid-input .mud-input-control { margin: 0; }

/* Challan-number pill */
.cw-challan-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    letter-spacing: .01em;
}

/*  A pill that OPENS something. An identical pill that is inert two columns away teaches
    people not to try either one, so the ones that do something say so. */
.cw-pill-link { cursor: pointer; text-decoration: underline dotted; }
.cw-pill-link:hover { filter: brightness(0.94); }

/* From → To route cell */
.cw-route { display: inline-flex; align-items: center; gap: 9px; line-height: 1.2; }
.cw-route-pt { font-weight: 600; color: #1e293b; }
.cw-route-arrow {
    font-size: 17px !important;
    color: #fff;
    background: #6366f1;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(99, 102, 241, .35);
}

/* Metric value + tiny unit caption */
.cw-metric-unit { font-size: .66rem; color: #94a3b8; font-weight: 500; margin-left: 2px; }

.cw-challan-empty { text-align: center; padding: 30px 16px; color: #94a3b8; }
.cw-challan-empty .material-icons { font-size: 30px; color: #cbd5e1; display: block; margin: 0 auto 6px; }

/* ── Metric cards — highlight computed totals (gross / advance / balance …) ── */
.cw-metric {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 16px;
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    height: 100%;
}
.cw-metric-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cw-metric-label .material-icons { font-size: 15px; }
.cw-metric-value { font-size: 1.2rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.cw-metric-sub { font-size: .68rem; color: #94a3b8; }
.cw-metric--accent { background: linear-gradient(135deg, #eff6ff 0%, #fff 70%); border-color: #dbeafe; }
.cw-metric--accent .cw-metric-value { color: #1d4ed8; }
.cw-metric--ok { background: linear-gradient(135deg, #ecfdf5 0%, #fff 70%); border-color: #bbf7d0; }
.cw-metric--ok .cw-metric-value { color: #047857; }
.cw-metric--warn { background: linear-gradient(135deg, #fffbeb 0%, #fff 70%); border-color: #fde68a; }
.cw-metric--warn .cw-metric-value { color: #b45309; }

/* ── Keyboard-shortcuts hint bar (under the tab stepper) ──────────────────── */
.cw-shortcuts-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: 10px;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    color: #475569;
    font-size: .8rem;
}
.cw-shortcuts-bar .material-icons { font-size: 18px; color: #6366f1; }
.cw-shortcuts-bar strong { color: #334155; font-weight: 700; margin-right: 2px; }
.cw-shortcuts-bar .cw-sc-dot { color: #c7d2fe; }
.cw-shortcuts-bar kbd {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    margin: 0 1px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 0 #cbd5e1;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    color: #334155;
    text-align: center;
    line-height: 1.5;
}

/* Subtle section sub-header inside a tab */
.cw-subhead {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: .9rem;
    color: #334155;
    margin: 4px 0 2px;
}
.cw-subhead .material-icons { font-size: 18px; color: #6366f1; }
.cw-subhead .cw-subhead-note { font-weight: 400; font-size: .78rem; color: #94a3b8; }

/* Wide mode: same full-width treatment but ChildContent lays itself out
   as section cards directly on the page background (no outer card).
   Used by tab-mode master edits. */
.cw-form-wrap-wide { max-width: 100% !important; margin: 0 !important; }
.cw-form-wrap-wide > .cw-form-actions-bar {
    position: sticky; bottom: 0; z-index: 5;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    padding: 12px 18px !important;
    margin-top: 16px !important;
    box-shadow: 0 -2px 12px rgba(15,23,42,0.05);
}

/* Section card — chrome for grouped form sections inside a wide form. */
.cw-section-card {
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.04);
    margin-bottom: 16px;
    overflow: hidden;
}
.cw-section-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f3f7;
}
.cw-section-card-head .cw-section-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #3730a3; flex-shrink: 0;
}
.cw-section-card-head .cw-section-icon .material-icons { font-size: 20px; }
.cw-section-card-head .cw-section-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.cw-section-card-head .cw-section-sub   { font-size: 12.5px; color: #64748b; margin-top: 2px; line-height: 1.3; }
.cw-section-card-body { padding: 20px; }

/* Two-column section grid. */
.cw-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.cw-section-grid > .cw-section-card { margin-bottom: 0; }
.cw-section-grid .cw-section-span-2 { grid-column: span 2; }
@media (max-width: 960px) {
    .cw-section-grid { grid-template-columns: 1fr; }
    .cw-section-grid .cw-section-span-2 { grid-column: span 1; }
}

.cw-form-card.mud-paper {
    border: 1px solid #e7eaf0; border-radius: 14px; padding: 28px 32px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 20px rgba(16,24,40,0.05);
    background: #fff;
}
.cw-form-actions {
    display: flex; gap: 12px; justify-content: flex-end;
    margin-top: 24px; padding-top: 20px; border-top: 1px solid #eef1f5;
}
.cw-form-section {
    font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: #64748b; margin: 20px 0 6px;
}
@media (max-width: 960px) {
    .cw-form-card.mud-paper { padding: 18px 16px; }
    .cw-form-actions { flex-direction: column-reverse; }
    .cw-form-actions .mud-button-root { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   CwYesNo — binary toggle styled as an outlined field with floating
   label, matching MudTextField outlined+dense dimensions so the two
   align pixel-perfectly when placed in the same MudGrid row.

   Structure:
     .cw-yesno-field                 outlined container (40px tall, like Mud)
       .cw-yesno-floatlabel          notched label sitting on top border
       .cw-yesno-track               inner rounded pill holding the buttons
         .cw-yesno-opt × 2           the two clickable options
         .cw-yesno-thumb             sliding white indicator
   ═══════════════════════════════════════════════════════════════ */

.cw-yesno-field {
    position: relative;
    display: flex; align-items: center;
    height: 40px;                       /* same as MudTextField outlined+dense */
    padding: 0 6px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.23);   /* matches MUD outlined border */
    border-radius: 4px;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    width: 100%;
    min-width: 160px;
}
.cw-yesno-field:hover { border-color: rgba(0, 0, 0, 0.6); }

/* Notched floating label — mirrors MudTextField's floated-state geometry.
   transform/scale/position chosen to land on the same line as MudBlazor's
   floated outlined label so labels in adjacent grid items align. */
.cw-yesno-floatlabel {
    position: absolute;
    top: -8px; left: 10px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
    letter-spacing: 0.15px;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.cw-yesno-track {
    position: relative;
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 3px;
    user-select: none;
    height: 30px; box-sizing: border-box;
    flex: 0 0 auto;
    margin-left: auto;                  /* push to the right inside the field */
}

.cw-yesno-opt {
    position: relative;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; cursor: pointer;
    padding: 0 14px;
    height: 24px;
    font-size: 12.5px; font-weight: 600;
    color: #64748b;
    border-radius: 999px;
    transition: color 0.18s ease;
    white-space: nowrap;
    min-width: 70px; justify-content: center;
}
.cw-yesno-opt:hover { color: #0f172a; }
.cw-yesno-opt.is-active { color: #0f172a; }
.cw-yesno-opt:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
}
.cw-yesno-icon {
    font-size: 15px !important;
    line-height: 1;
}

/* Sliding white thumb anchored inside the inner track. */
.cw-yesno-thumb {
    position: absolute;
    top: 3px; bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
                0 4px 10px rgba(15, 23, 42, 0.10);
    transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}
.cw-yesno-thumb.is-right { left: 50%; }

/* Legacy classes kept as no-ops so any leftover markup doesn't break. */
.cw-yesno { display: contents; }
.cw-yesno-label { display: none; }
.cw-status-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0 12px 0;
}

/* An <a> inside a report cell that opens the document it names.
   MudBlazor's reset leaves a bare <a> the same colour as the text around it, so a
   clickable LR number in a table reads as plain text and nobody clicks it. Underlined
   only on hover, because a column of permanently underlined numbers is unreadable. */
.cw-link { color: #2563eb; text-decoration: none; font-weight: 600; }
.cw-link:hover { text-decoration: underline; }

/* ════════════════ FLUID / ADAPTIVE SCALING ════════════════
   Whole UI (layout, spacing, font) scales down smoothly as the
   screen shrinks. rem-based sizes follow the root font-size. */
html { font-size: 16px; }

/* Laptops / small desktops */
@media (max-width: 1280px) {
    html { font-size: 15px; }
    .sb-content { padding: 18px; }
    .cw-form-wrap { max-width: 100%; }
}

/* Tablets */
@media (max-width: 1024px) {
    html { font-size: 14.5px; }
    .cw-card .mud-data-grid tbody .mud-table-cell,
    .cw-card .mud-table-body .mud-table-cell { padding: 9px 12px !important; font-size: 12.5px; }
    .cw-card .mud-data-grid thead th,
    .cw-card .mud-table-head .mud-table-cell { padding: 10px 12px !important; }
}

/* Large phones / small tablets — single-column forms */
@media (max-width: 768px) {
    html { font-size: 14px; }
    .sb-content { padding: 14px; }
    .cw-form-card.mud-paper { padding: 16px 14px; }
    /* Force every form grid item to full width so fields stack */
    .cw-form-card .mud-grid-item { flex-basis: 100% !important; max-width: 100% !important; }
    .cw-page-head { gap: 8px; }
    .cw-ph-title { font-size: 1.15rem; }
    .cw-ph-subtitle { font-size: 0.78rem; }
    .mud-dialog { width: 96vw !important; margin: 8px !important; }
}

/* Phones */
@media (max-width: 600px) {
    html { font-size: 13.5px; }
    .sb-content { padding: 10px; }
    .cw-card.mud-paper { border-radius: 10px; }
    .cw-form-card.mud-paper { border-radius: 10px; padding: 14px 12px; }
    .cw-ph-title { font-size: 1.05rem; }
    /* Header search + buttons each take a full row */
    .cw-ph-actions > * { flex: 1 1 100% !important; max-width: 100% !important; }
    .cw-ph-actions .mud-button-root { width: 100%; }
    .cw-card .mud-data-grid tbody .mud-table-cell,
    .cw-card .mud-table-body .mud-table-cell { padding: 8px 10px !important; font-size: 12px; }
    .mud-table-pagination-toolbar { flex-wrap: wrap; height: auto !important; padding: 6px 0; }
}

/* Very small phones */
@media (max-width: 380px) {
    html { font-size: 12.5px; }
    .sb-greeting-title { max-width: 110px; }
    .cw-ph-title { font-size: 0.98rem; }
}

/* ════════ Topbar user menu (professional dropdown) ════════ */
.sb-user-activator {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 6px 10px 6px 8px; border-radius: 10px; transition: background 0.15s;
}
.sb-user-activator:hover { background: #f1f5f9; }
.sb-user-meta { display: flex; flex-direction: column; line-height: 1.18; }
.sb-user-caret { font-size: 18px !important; color: #94a3b8; }
.sb-user-avatar.lg { width: 42px; height: 42px; font-size: 16px; }

.cw-usermenu-pop.mud-popover {
    border-radius: 12px !important; border: 1px solid #e7eaf0;
    box-shadow: 0 12px 34px rgba(16,24,40,0.16), 0 2px 6px rgba(16,24,40,0.06) !important;
    overflow: hidden; min-width: 248px; margin-top: 6px;
}
.cw-usermenu-list { padding: 6px !important; }
.cw-usermenu-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px; }
.cw-um-name { font-weight: 700; color: #0f172a; font-size: 14px; }
.cw-um-ctx { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 12px; margin-top: 3px; }
.cw-um-ctx .material-icons { font-size: 14px; }
.cw-usermenu-list .mud-list-item {
    border-radius: 8px; font-weight: 600; font-size: 13.5px; color: #334155;
    padding: 9px 12px; transition: background 0.12s, color 0.12s;
}
.cw-usermenu-list .mud-list-item:hover { background: #fef2f2; color: #b91c1c; }
.cw-usermenu-list .mud-list-item:hover .mud-icon-root { color: #b91c1c !important; }

/* Clickable context chip (switch company / year / branch / godown) */
.sb-context-btn {
    border: 1px solid transparent; cursor: pointer; font: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.sb-context-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
.sb-context-swap { font-size: 16px !important; color: #6366f1; margin-left: 2px; }

/* ════════════════ DASHBOARD ════════════════ */
.cw-dash { display: flex; flex-direction: column; gap: 16px; }

.cw-hero {
    position: relative; overflow: hidden; border-radius: 14px;
    padding: 18px 24px; color: #e8eefc;
    background:
        radial-gradient(900px 420px at 88% -20%, #1d4ed8 0%, transparent 55%),
        linear-gradient(150deg, #0b1f3a 0%, #122a4d 55%, #0e2038 100%);
    box-shadow: 0 8px 22px rgba(11,31,58,0.22);
}
.cw-hero-deco {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 90% 80%, rgba(229,57,53,0.20), transparent 58%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 28px);
}
.cw-hero-body { position: relative; z-index: 1; }
.cw-hero-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 2px; color: #60a5fa; }
.cw-hero h1 {
    margin: 5px 0 3px; font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
    color: #f8fafc; line-height: 1.15;
}
.cw-hero p { margin: 0 0 14px; color: #9fb3cc; font-size: 13px; }
.cw-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-hero-chips span {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #dbe6f7;
}
.cw-hero-chips .material-icons { font-size: 14px; color: #93c5fd; }

.cw-stat-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.cw-stat {
    display: flex; align-items: center; gap: 14px; background: #fff;
    border: 1px solid #e7eaf0; border-left: 4px solid var(--a, #2563eb);
    border-radius: 14px; padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 18px rgba(16,24,40,0.05);
}
.cw-stat-ic {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--a) 14%, #fff); color: var(--a);
}
.cw-stat-ic .material-icons { font-size: 22px; }
.cw-stat-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; }
.cw-stat-v { display: block; font-size: 17px; font-weight: 700; color: #0f172a; margin-top: 3px; line-height: 1.2; }

.cw-sec-title { font-size: 16px; font-weight: 700; color: #0f172a; margin: 6px 0 -6px; }

.cw-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cw-quick-card {
    text-align: left; cursor: pointer; background: #fff;
    border: 1px solid #e7eaf0; border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 4px;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}
.cw-quick-card:hover {
    transform: translateY(-3px); border-color: #c7d2fe;
    box-shadow: 0 12px 28px rgba(16,24,40,0.10);
}
.cw-quick-ic {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--a) 14%, #fff); color: var(--a);
}
.cw-quick-ic .material-icons { font-size: 22px; }
.cw-quick-t { font-size: 15px; font-weight: 700; color: #0f172a; }
.cw-quick-s { font-size: 12.5px; color: #64748b; }

@media (max-width: 1100px) {
    .cw-stat-row { grid-template-columns: repeat(2, 1fr); }
    .cw-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cw-hero { padding: 24px 20px; }
    .cw-hero h1 { font-size: 23px; }
    .cw-stat-row, .cw-quick { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   BOLD LOGISTICS — Final visual layer.
   Goal: stop looking like stock MudBlazor. Navy primary, red
   accent, larger typography, confident hierarchy, branded
   controls. This layer is intentionally last so it wins.
   ════════════════════════════════════════════════════════════ */

:root {
    --cw-ink: #0b1f3a;
    --cw-ink-soft: #1f3a66;
    --cw-red: #e11d48;
    --cw-red-soft: rgba(225,29,72,0.10);
    --cw-line: #e6eaf1;
    --cw-line-soft: #eef1f6;
    --cw-bg: #f3f5f9;
    --cw-muted: #5b6679;
    --cw-muted-soft: #8a93a4;
}

body { background: var(--cw-bg); color: var(--cw-ink); font-feature-settings: "cv11","ss01"; }
.sb-content { padding: 22px 28px; }

/* ── Buttons — confident, no caps, branded ── */
.mud-button-root {
    text-transform: none !important; font-weight: 600 !important;
    letter-spacing: 0 !important; border-radius: 10px !important;
    box-shadow: none !important; padding: 8px 16px !important;
    font-size: 0.9rem !important;
}
.mud-button-filled.mud-button-filled-primary {
    background: var(--cw-ink) !important; color: #fff !important;
}
.mud-button-filled.mud-button-filled-primary:hover { background: var(--cw-ink-soft) !important; }
.mud-button-filled.mud-button-filled-secondary,
.mud-button-filled.mud-button-filled-error {
    background: var(--cw-red) !important; color: #fff !important;
}
.mud-button-outlined.mud-button-outlined-primary {
    border: 1.5px solid var(--cw-ink) !important; color: var(--cw-ink) !important;
}
.mud-button-outlined.mud-button-outlined-primary:hover { background: rgba(11,31,58,0.05) !important; }
.mud-button-text.mud-button-text-primary { color: var(--cw-ink) !important; }

/* ── Inputs — branded outline, calmer label ── */
.mud-input-control .mud-input-label { color: var(--cw-muted) !important; font-weight: 500; }
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px !important; border-color: #dfe4ec !important;
}
.mud-input-outlined:hover .mud-input-outlined-border { border-color: #b8c0cf !important; }
.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-outlined .mud-input-outlined-border:focus-within {
    border-color: var(--cw-ink) !important; border-width: 1.5px !important;
}
.mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-active {
    color: var(--cw-ink) !important; font-weight: 600;
}

/* ── Paper / cards — flat with hairline border, subtle lift ── */
.mud-paper {
    border-radius: 14px !important; border: 1px solid var(--cw-line);
    box-shadow: 0 1px 0 rgba(11,31,58,0.03), 0 6px 20px rgba(11,31,58,0.04) !important;
}
.mud-alert { border-radius: 10px !important; }

/* ── Page header — bigger, branded ── */
.cw-page-head { padding: 4px 2px 16px; align-items: center; }
.cw-ph-title { color: var(--cw-ink); font-weight: 800; letter-spacing: -0.02em; font-size: 1.55rem; }
.cw-ph-subtitle { color: var(--cw-muted); font-size: 0.85rem; }
.cw-ph-count, .cw-page-head .cw-ph-count {
    background: linear-gradient(180deg, var(--cw-ink) 0%, #122a4d 100%);
    color: #fff; padding: 6px 14px; border-radius: 999px;
    font-weight: 700; font-size: 0.78rem; letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(11,31,58,0.20);
}

/* Make the cw-card a soft surface for data grids */
.cw-card.mud-paper { border-radius: 14px !important; border: 1px solid var(--cw-line); }
.cw-card .mud-table-head .mud-table-cell,
.cw-card .mud-data-grid .mud-table-head .mud-table-cell,
.cw-card .mud-data-grid thead th {
    background: linear-gradient(180deg, #0b1f3a 0%, #112b50 100%) !important;
    color: #e7eefc !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px !important;
    border-bottom: none !important; padding: 12px 14px !important;
}
.cw-card .mud-data-grid tbody .mud-table-row:hover .mud-table-cell { background: #f4f7fd !important; }
.cw-card .mud-data-grid tbody .mud-table-cell {
    border-bottom: 1px solid var(--cw-line-soft) !important; color: var(--cw-ink);
    padding: 11px 14px !important; font-size: 13.5px;
}

/* Status pills — bigger, with a dot */
.cw-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px;

    /*  A BADGE WITH NO MODIFIER IS STILL A BADGE.

        The base class set only the shape and the dot - the background and the colour came from
        -active / -inactive. Five places use it bare for a genuinely neutral state ("not posted",
        "no diesel to compare"), and those rendered as a loose grey dot beside plain text with no
        pill behind it. In a narrow column the text then wrapped to two lines and the dot floated
        against the middle of them, which reads as a rendering fault rather than a state.

        So the neutral state gets a neutral pill. Every modifier below still overrides both
        properties, so nothing that already carries one changes. */
    background: #f1f5f9;
    color: #475569;

    /*  The pill is a label, not a paragraph. Wrapping it puts the dot beside line two; a caller
        that needs a long neutral label widens its column instead. */
    white-space: nowrap;
}
.cw-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.85;
}

/* ── Topbar refresh — softer brand strip, taller, navy text ── */
.sb-topbar {
    height: 64px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--cw-line) !important;
    box-shadow: none !important;
}
.sb-topbar::before {
    background: var(--cw-red) !important; height: 2px !important; opacity: 0.95;
}
.sb-greeting-title { color: var(--cw-ink); font-size: 15.5px; }
.sb-greeting-sub   { color: var(--cw-muted-soft); }
.sb-context-chip   {
    background: #f6f8fc; border-color: #e3e8f1; color: var(--cw-ink);
    font-weight: 600; border-radius: 999px;
}
.sb-context-chip .material-icons { color: var(--cw-red); }
.sb-user-avatar { background: var(--cw-ink) !important; color: #fff !important; font-weight: 700; }

/* ── Sidebar refresh — confident navy, prominent logo ── */
.sb-sidebar {
    background: #0b1f3a !important;
    border-right: 1px solid rgba(255,255,255,0.05);
}
.sb-logo-area { border-bottom-color: rgba(255,255,255,0.08); }
.sb-logo-title { color: #ffffff; letter-spacing: -0.01em; }
.sb-logo-subtitle { color: rgba(255,255,255,0.45); }
.sb-nav-label { color: rgba(255,255,255,0.40); }
.sb-group-toggle:hover { color: #fff !important; }

/* Sidebar items already restyled in SbNavLink — match red rail */
.sb-nav-item { color: rgba(255,255,255,0.72) !important; }
.sb-nav-item:hover { background: rgba(255,255,255,0.06) !important; color: #ffffff !important; }

/* ── Form shell tighter, cleaner ── */
.cw-form-card.mud-paper {
    border-radius: 16px !important; padding: 28px 32px !important;
    border: 1px solid var(--cw-line) !important;
    box-shadow: 0 1px 0 rgba(11,31,58,0.03), 0 10px 32px rgba(11,31,58,0.06) !important;
}
.cw-form-actions { border-top-color: var(--cw-line-soft); }

/* ── Switch / checkbox use navy primary ── */
.mud-switch .mud-switch-thumb-checked { background: var(--cw-ink) !important; }
.mud-switch .mud-switch-track-checked  { background: rgba(11,31,58,0.30) !important; }
.mud-checkbox.mud-checked .mud-icon-root { color: var(--cw-ink) !important; }

/* Keyboard hint strip inside form actions */
.cw-form-actions { justify-content: space-between; }
.cw-form-actions > :nth-last-child(2) { margin-left: auto; }
.cw-form-keys-hint {
    font-size: 11.5px; color: #8a93a4; flex: 1; display: flex;
    align-items: center; gap: 4px; flex-wrap: wrap;
}
.cw-form-keys-hint kbd {
    background: #f3f5f9; color: #0b1f3a; border: 1px solid #dfe4ec;
    border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px;
    font-weight: 700; line-height: 1.4; margin: 0 1px;
}
@media (max-width: 768px) {
    .cw-form-keys-hint { display: none; }
    .cw-form-actions { justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════════
   CARGOWYRE REFERENCE LAYER (last — wins the cascade)
   Ported from LogisticsDashboard `app.css` (Angular-style):
   gradient blue buttons, light data-grid header, soft
   #f8fafc inputs with blue focus glow.
   ════════════════════════════════════════════════════════════ */

:root {
    --cs-primary: #2563eb;
    --cs-primary-dark: #1d4ed8;
    --cs-primary-soft: rgba(37,99,235,0.08);
    --cs-input-bg: #f8fafc;
    --cs-input-border: #e2e8f0;
    --cs-input-border-hover: #cbd5e1;
    --cs-text: #1e293b;
    --cs-text-soft: #475569;
    --cs-muted: #94a3b8;
    --cs-row-line: #f1f5f9;
}

/* ── Buttons — gradient primary, soft outline ── */
.mud-button-root {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    transition: all 0.2s !important;
}
/* ════════════════════════════════════════════════════════════
   LINER-STYLE BUTTONS — solid / outline / soft / gradient / ghost.
   Palette ported from the Liner admin theme:
     Primary  = dark navy   #0f172a
     Success  = emerald     #10b981
     Danger   = red         #ef4444
     Warning  = amber       #f59e0b
     Info     = cyan        #06b6d4
     Secondary = light grey #e8eaee  (with dark text)
   Solid variants are flat (no gradient on the base colour). Hover
   darkens 8-12 %. Soft & outline variants reuse the same hues at
   reduced intensity. Gradient variants are reserved for hero CTAs
   via opt-in utility classes (cw-btn-grad-*).
   ════════════════════════════════════════════════════════════ */

/* Base look — applies to every MudBlazor button */
.mud-button-root {
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background-color .15s ease, color .15s ease,
                box-shadow .15s ease, border-color .15s ease, transform .12s ease !important;
}
.mud-button-root:active { transform: translateY(0); }
.mud-button-root:disabled,
.mud-button-root.mud-disabled {
    opacity: .55 !important; transform: none !important; box-shadow: none !important;
}

/* ── Solid (filled) variants ────────────────────────────────── */
.mud-button-filled.mud-button-filled-primary {
    background: #0f172a !important; color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.18) !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
    background: #1e293b !important;
    box-shadow: 0 6px 16px rgba(15,23,42,0.25) !important;
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-secondary {
    background: #e8eaee !important; color: #0f172a !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
}
.mud-button-filled.mud-button-filled-secondary:hover {
    background: #d8dce3 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.10) !important;
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-success {
    background: #10b981 !important; color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(16,185,129,0.25) !important;
}
.mud-button-filled.mud-button-filled-success:hover {
    background: #059669 !important;
    box-shadow: 0 6px 16px rgba(16,185,129,0.30) !important;
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-error {
    background: #ef4444 !important; color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(239,68,68,0.25) !important;
}
.mud-button-filled.mud-button-filled-error:hover {
    background: #dc2626 !important;
    box-shadow: 0 6px 16px rgba(239,68,68,0.30) !important;
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-warning {
    background: #f59e0b !important; color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(245,158,11,0.25) !important;
}
.mud-button-filled.mud-button-filled-warning:hover {
    background: #d97706 !important;
    box-shadow: 0 6px 16px rgba(245,158,11,0.30) !important;
    transform: translateY(-1px);
}

.mud-button-filled.mud-button-filled-info {
    background: #06b6d4 !important; color: #fff !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(6,182,212,0.25) !important;
}
.mud-button-filled.mud-button-filled-info:hover {
    background: #0891b2 !important;
    box-shadow: 0 6px 16px rgba(6,182,212,0.30) !important;
    transform: translateY(-1px);
}

/* Filled-default = "Ghost" — transparent base, dark text */
.mud-button-filled.mud-button-filled-default {
    background: transparent !important; color: #0f172a !important;
    border: none !important; box-shadow: none !important;
}
.mud-button-filled.mud-button-filled-default:hover {
    background: rgba(15,23,42,0.06) !important;
}

/* ── Outline variants ──────────────────────────────────────── */
.mud-button-outlined {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    box-shadow: none !important;
}
.mud-button-outlined:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
.mud-button-outlined.mud-button-outlined-primary {
    border-color: #0f172a !important; color: #0f172a !important;
}
.mud-button-outlined.mud-button-outlined-primary:hover {
    background: rgba(15,23,42,0.05) !important; border-color: #0f172a !important;
}
.mud-button-outlined.mud-button-outlined-success {
    border-color: #10b981 !important; color: #059669 !important;
}
.mud-button-outlined.mud-button-outlined-success:hover {
    background: #ecfdf5 !important; border-color: #059669 !important;
}
.mud-button-outlined.mud-button-outlined-error {
    border-color: #ef4444 !important; color: #dc2626 !important;
}
.mud-button-outlined.mud-button-outlined-error:hover {
    background: #fef2f2 !important; border-color: #dc2626 !important;
}
.mud-button-outlined.mud-button-outlined-warning {
    border-color: #f59e0b !important; color: #b45309 !important;
}
.mud-button-outlined.mud-button-outlined-warning:hover {
    background: #fffbeb !important; border-color: #d97706 !important;
}
.mud-button-outlined.mud-button-outlined-info {
    border-color: #06b6d4 !important; color: #0891b2 !important;
}
.mud-button-outlined.mud-button-outlined-info:hover {
    background: #ecfeff !important; border-color: #0891b2 !important;
}

/* ── Text (link-style) variants ────────────────────────────── */
.mud-button-text.mud-button-text-primary { color: #0f172a !important; }
.mud-button-text.mud-button-text-primary:hover { background: rgba(15,23,42,0.05) !important; }
.mud-button-text.mud-button-text-success { color: #059669 !important; }
.mud-button-text.mud-button-text-error   { color: #dc2626 !important; }
.mud-button-text.mud-button-text-warning { color: #b45309 !important; }
.mud-button-text.mud-button-text-info    { color: #0891b2 !important; }

/* ── Soft / Tinted utility variants — opt-in via Class="cw-btn-soft-*" ──
   Subtle background, coloured text. Use for less-prominent CTAs and
   row actions where solids would feel too loud. */
.mud-button-root.cw-btn-soft-primary {
    background: #eff6ff !important; color: #1e40af !important; border: none !important;
    box-shadow: none !important;
}
.mud-button-root.cw-btn-soft-primary:hover { background: #dbeafe !important; }

.mud-button-root.cw-btn-soft-cyan {
    background: #ecfeff !important; color: #0e7490 !important; border: none !important; box-shadow: none !important;
}
.mud-button-root.cw-btn-soft-cyan:hover { background: #cffafe !important; }

.mud-button-root.cw-btn-soft-emerald,
.mud-button-root.cw-btn-soft-success {
    background: #ecfdf5 !important; color: #047857 !important; border: none !important; box-shadow: none !important;
}
.mud-button-root.cw-btn-soft-emerald:hover,
.mud-button-root.cw-btn-soft-success:hover { background: #d1fae5 !important; }

.mud-button-root.cw-btn-soft-amber,
.mud-button-root.cw-btn-soft-warning {
    background: #fffbeb !important; color: #b45309 !important; border: none !important; box-shadow: none !important;
}
.mud-button-root.cw-btn-soft-amber:hover,
.mud-button-root.cw-btn-soft-warning:hover { background: #fef3c7 !important; }

.mud-button-root.cw-btn-soft-red,
.mud-button-root.cw-btn-soft-danger {
    background: #fef2f2 !important; color: #b91c1c !important; border: none !important; box-shadow: none !important;
}
.mud-button-root.cw-btn-soft-red:hover,
.mud-button-root.cw-btn-soft-danger:hover { background: #fee2e2 !important; }

/* ── Gradient utility variants — opt-in via Class="cw-btn-grad-*" ──
   Eye-catching CTAs for the dashboard hero / "New" actions. */
.mud-button-root.cw-btn-grad-purple {
    background: linear-gradient(135deg, #1e3a8a, #0f172a) !important; color: #fff !important;
    border: none !important; box-shadow: 0 6px 16px rgba(15,23,42,0.30) !important;
}
.mud-button-root.cw-btn-grad-purple:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,0.35) !important; }

.mud-button-root.cw-btn-grad-cyan {
    background: linear-gradient(135deg, #06b6d4, #0e7490) !important; color: #fff !important;
    border: none !important; box-shadow: 0 6px 16px rgba(6,182,212,0.30) !important;
}
.mud-button-root.cw-btn-grad-cyan:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(6,182,212,0.35) !important; }

.mud-button-root.cw-btn-grad-green {
    background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important;
    border: none !important; box-shadow: 0 6px 16px rgba(16,185,129,0.30) !important;
}
.mud-button-root.cw-btn-grad-green:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16,185,129,0.35) !important; }

.mud-button-root.cw-btn-grad-orange {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important;
    border: none !important; box-shadow: 0 6px 16px rgba(245,158,11,0.30) !important;
}
.mud-button-root.cw-btn-grad-orange:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(245,158,11,0.35) !important; }

.mud-button-root.cw-btn-grad-rose {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important; color: #fff !important;
    border: none !important; box-shadow: 0 6px 16px rgba(244,63,94,0.30) !important;
}
.mud-button-root.cw-btn-grad-rose:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(244,63,94,0.35) !important; }

/* ── Sizes — five steps mirroring the Liner gallery ───────────
   Drop one of these classes onto the button: cw-btn-xs / sm / md
   (default) / lg / xl. Matches the existing MudBlazor Size enum
   when present but doesn't depend on it. */
.mud-button-root.cw-btn-xs { padding: 4px 10px !important; font-size: 11.5px !important; border-radius: 8px !important; }
.mud-button-root.cw-btn-sm { padding: 7px 14px !important; font-size: 12.5px !important; border-radius: 9px !important; }
.mud-button-root.cw-btn-lg { padding: 11px 22px !important; font-size: 14.5px !important; border-radius: 11px !important; }
.mud-button-root.cw-btn-xl { padding: 14px 28px !important; font-size: 15.5px !important; border-radius: 12px !important; }

/* Row action icon buttons (square with hairline border on hover-focus state) */
.cw-card .mud-table-cell .mud-icon-button {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1.5px solid transparent; color: #64748b;
    transition: all 0.15s;
}
.cw-card .mud-table-cell .mud-icon-button:hover {
    background: #f8fafc; border-color: var(--cs-input-border-hover);
    color: var(--cs-primary);
}

/* ── Inputs — soft #f8fafc bg, 1.5px border, blue focus glow ── */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px !important;
    border-width: 1.5px !important;
    border-color: var(--cs-input-border) !important;
    background: var(--cs-input-bg) !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
    /* The fieldset overlays the field area — never let it eat clicks
       (the actual input/textarea sits on top of it). */
    pointer-events: none !important;
    z-index: 0;
}
/* Make sure the actual input + adornments stay above the fieldset and
   remain interactive. */
.mud-input-outlined .mud-input-slot,
.mud-input-outlined .mud-input-adornment,
.mud-input-outlined input,
.mud-input-outlined textarea {
    position: relative; z-index: 1; background: transparent;
}
.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    background: #ffffff !important;
}
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--cs-input-border-hover) !important;
}
.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input-outlined .mud-input-outlined-border:focus-within {
    border-color: var(--cs-primary) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 3px var(--cs-primary-soft);
}
.mud-input-control .mud-input-label { color: var(--cs-muted) !important; font-weight: 500; }
.mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-active {
    color: var(--cs-primary) !important; font-weight: 600;
}
.mud-input-outlined input,
.mud-input-outlined .mud-input-slot input {
    font-size: 13.5px !important; color: var(--cs-text) !important;
}
.mud-input-outlined input::placeholder { color: var(--cs-muted) !important; }

/* ════════════════════════════════════════════════════════════
   DATA GRID — PREMIUM v2
   Goal: looks like Stripe / Linear / Vercel admin tables.
   Sticky header, generous spacing, accent-bordered hover row,
   compact filter row, modern rounded pagination, refined sort
   chevrons, professional action buttons.
   ════════════════════════════════════════════════════════════ */

/* Card surface around the grid: tighter, single hairline + softer lift */
.cw-card.mud-paper {
    border: 1px solid #e6eaf0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 4px 14px rgba(16,24,40,0.04) !important;
    background: #fff !important;
    overflow: hidden;
}
.cw-card .mud-data-grid { border: none !important; background: transparent !important; }
.cw-card .mud-data-grid .mud-table-container { background: #fff; }

/* ── Header — dark, uppercase, sticky (premium black look) ── */
.cw-card .mud-data-grid .mud-table-head .mud-table-cell,
.cw-card .mud-data-grid thead th,
.cw-card .mud-table-head .mud-table-cell {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #1e293b !important;
    padding: 14px 20px !important;
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
}
/* Sort/filter buttons inside the header */
.cw-card .mud-data-grid .mud-table-head .mud-button-root,
.cw-card .mud-data-grid .mud-table-head .mud-icon-button,
.cw-card .mud-data-grid thead .mud-button-root {
    color: #e2e8f0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
}
.cw-card .mud-data-grid .mud-table-head .mud-button-root:hover,
.cw-card .mud-data-grid thead .mud-button-root:hover { color: #ffffff !important; }
.cw-card .mud-data-grid .mud-table-head .mud-icon-root,
.cw-card .mud-data-grid thead .mud-icon-root { font-size: 15px !important; color: #cbd5e1 !important; opacity: 0.9; }

/* ── Body rows — generous, hierarchical typography, hover accent ── */
.cw-card .mud-data-grid tbody .mud-table-cell,
.cw-card .mud-table-body .mud-table-cell {
    font-size: 13px !important;
    color: #1f2937 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f3f7 !important;
    background: #fff !important;
    transition: background 0.12s ease;
    vertical-align: middle;
}
.cw-card .mud-data-grid tbody .mud-table-row,
.cw-card .mud-table-body .mud-table-row { position: relative; transition: transform 0.12s; }
.cw-card .mud-data-grid tbody .mud-table-row:hover .mud-table-cell,
.cw-card .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: #f7faff !important;
}
/* Subtle blue rail on hover (left edge of the row) */
.cw-card .mud-data-grid tbody .mud-table-row:hover .mud-table-cell:first-child::before,
.cw-card .mud-table-body .mud-table-row:hover .mud-table-cell:first-child::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cs-primary); border-radius: 0 3px 3px 0;
}
/* First non-utility cell carries slightly stronger typography */
.cw-card .mud-data-grid tbody .mud-table-cell:nth-child(1) {
    font-weight: 600 !important; color: #0f172a !important;
}
/* Last row drops its bottom border */
.cw-card .mud-data-grid tbody .mud-table-row:last-child .mud-table-cell { border-bottom: none !important; }

/* ── Sort indicator polish ── */
.cw-card .mud-data-grid .sortable-column-header .mud-icon-root,
.cw-card .mud-data-grid .mud-table-sort-label-icon { transition: opacity 0.15s, transform 0.15s; }

/* ── Filter row — dark, compact pills under the dark header ── */
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-table-cell,
.cw-card .mud-data-grid thead tr:nth-child(2) .mud-table-cell {
    background: #1e293b !important;
    padding: 6px 10px !important;
    border-bottom: 1px solid #334155 !important;
    position: sticky; top: 41px; z-index: 1;
}
/* Compact filter inputs sit on dark — dark surface, light text */
.cw-card .mud-data-grid thead .mud-input-outlined-border,
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-input-outlined-border {
    border: 1px solid #334155 !important;
    background: #0f172a !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.cw-card .mud-data-grid thead .mud-input,
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-input { font-size: 12px !important; min-height: 28px !important; }
.cw-card .mud-data-grid thead input,
.cw-card .mud-data-grid .mud-data-grid-filter-row input {
    color: #f1f5f9 !important; caret-color: #f1f5f9 !important;
    font-size: 12px !important; padding: 4px 8px !important;
}
.cw-card .mud-data-grid thead input::placeholder,
.cw-card .mud-data-grid .mud-data-grid-filter-row input::placeholder {
    color: rgba(241,245,249,0.55) !important; opacity: 1; font-weight: 400;
}
/* ── Form-control focus highlight ──
   Master/transaction edit forms have lots of fields and the default
   MudBlazor outlined-input focus state is too subtle on a busy page
   (pale-grey 1px border). Bump to a 2px primary-blue ring + faint glow
   so the user always knows which control is active. Applies to every
   MudTextField, MudNumericField, MudSelect, MudAutocomplete that uses
   the outlined variant — i.e. virtually every form input in the app. */
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #2563eb !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
/* Slightly stronger when the field carries an error so it stays distinct
   from the normal focus ring — red, same ring radius. */
.mud-input.mud-input-outlined.mud-input-error:focus-within .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-error.mud-focused .mud-input-outlined-border {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
/* Required fields — a faint amber left-rail when not focused so the
   eye can scan unfilled mandatory inputs at a glance. */
.mud-input.mud-input-outlined.mud-required:not(.mud-focused):not(:focus-within) .mud-input-outlined-border {
    border-left: 3px solid #fbbf24 !important;
}

/* Keyboard-shortcut hint strip — sits below the form, surfaces the
   Ctrl+→ / Alt+N shortcuts so power users discover them. */
.cw-kbd-hint {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 6px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #eff6ff 0%, #f5f3ff 100%);
    border: 1px solid #dbeafe;
    border-radius: 10px;
    color: #475569;
    font-size: 12.5px;
    line-height: 1.5;
}
.cw-kbd-hint .material-icons { font-size: 18px; color: #2563eb; }
.cw-kbd-hint kbd {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 1px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* Stretch every filter input to fill the column — without this the
   input keeps its intrinsic ~80px width and shows the placeholder
   truncated ("Filt", "Fil") inside a much wider cell. */
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-input-control,
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-input-outlined,
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-input { width: 100% !important; }
.cw-card .mud-data-grid .mud-data-grid-filter-row .mud-input-slot { min-width: 0 !important; }

/* ── Pagination bar — pill buttons, refined ── */
.cw-card .mud-data-grid .mud-table-pagination,
.cw-card .mud-table-pagination {
    border-top: 1px solid #f1f3f7 !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    padding: 8px 16px !important;
}
.cw-card .mud-table-pagination .mud-table-pagination-actions .mud-icon-button {
    width: 32px !important; height: 32px !important;
    border-radius: 8px !important;
    color: #64748b !important;
    border: 1px solid transparent !important;
    transition: all 0.15s;
}
.cw-card .mud-table-pagination .mud-table-pagination-actions .mud-icon-button:hover:not(:disabled) {
    background: var(--cs-primary-soft) !important;
    border-color: #c7d2fe !important;
    color: var(--cs-primary) !important;
}
.cw-card .mud-table-pagination .mud-table-pagination-actions .mud-icon-button:disabled { opacity: 0.35 !important; }
.cw-card .mud-table-pagination .mud-input-outlined-border { background: #fff !important; border-color: #e6eaf0 !important; }

/* ── Empty / loading state ── */
.cw-card .mud-data-grid .mud-table-no-records,
.cw-card .mud-table-no-records {
    padding: 56px 24px !important; text-align: center; color: #94a3b8;
    font-size: 13.5px; background: #fafbfc !important;
}
.cw-card .mud-progress-linear { background: #eef2ff !important; }

/* ── Row action buttons — compact, modern, fade-in style ── */
.cw-card .mud-table-cell .mud-icon-button {
    width: 32px !important; height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    color: #64748b !important;
    transition: all 0.15s ease;
}
.cw-card .mud-table-cell .mud-icon-button .mud-icon-root { font-size: 18px !important; }
.cw-card .mud-table-cell .mud-icon-button:hover {
    background: var(--cs-primary-soft) !important;
    border-color: #c7d2fe !important;
    color: var(--cs-primary) !important;
    transform: translateY(-1px);
}
.cw-card .mud-table-cell .mud-icon-button[aria-label*="Delete" i]:hover,
.cw-card .mud-table-cell .mud-icon-button[title*="Delete" i]:hover {
    background: #fef2f2 !important; border-color: #fecaca !important; color: #dc2626 !important;
}

/* ── Status badges (cw-badge) — slightly richer dot ── */
.cw-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    border: 1px solid transparent;
    /*  Carried down from the first .cw-badge block, which was otherwise entirely overridden
        by this one. It was that block's ONLY surviving declaration - nothing else sets
        line-height on a badge - so deleting the block without moving this would have changed
        the pill's height everywhere. */
    line-height: 1.4;
}
.cw-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.cw-badge-active   { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.cw-badge-inactive { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cw-badge-amber    { background: #fffbeb; color: #b45309; border-color: #fde68a; }
/* Used by the statistics health block for an ERROR-severity count. The palette had
   active / inactive / amber but no danger, so the class resolved to nothing. */
.cw-badge-danger   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.cw-badge-info     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* ── Polish: align right-side action / status columns visually ── */
.cw-card .mud-data-grid tbody .mud-table-cell:last-child,
.cw-card .mud-table-body .mud-table-cell:last-child { padding-right: 16px !important; }


/* ── Page header count chip — back to soft indigo (was navy pill) ── */
.cw-page-head .cw-ph-count,
.cw-count-chip {
    background: #eef2ff !important;
    color: #4338ca !important;
    box-shadow: none !important;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* Page header icon tile — match new primary */
.cw-page-head .cw-ph-icon {
    background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-dark)) !important;
    box-shadow: 0 6px 16px rgba(37,99,235,0.28) !important;
}

/* ── Autocomplete / Select list items ── */
.mud-list-item.mud-list-item-clickable:hover { background: var(--cs-primary-soft) !important; }
.mud-list-item.mud-selected-item { background: var(--cs-primary-soft) !important; color: var(--cs-primary-dark) !important; }

/* ════════════════════════════════════════════════════════════
   TOPBAR POLISH (final overlay — wins the cascade)
   Goals: proper vertical centering, refined typography, tighter
   chip/avatar styling, subtler accent strip, clearer hover
   states for every interactive element in the topbar.
   ════════════════════════════════════════════════════════════ */
.sb-topbar {
    height: 58px !important;                       /* tightened — was 68 */
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e7eaf2 !important;
    box-shadow: 0 1px 0 rgba(15,23,42,0.02), 0 4px 14px rgba(15,23,42,0.04) !important;
}
/* Slimmer, single-blue accent line (replaces the previous tri-color strip) */
.sb-topbar::before {
    height: 2px !important;
    background: linear-gradient(90deg, transparent 0%, var(--cs-primary) 30%, var(--cs-primary-dark) 70%, transparent 100%) !important;
    opacity: 0.65;
}

/* Hamburger — slimmer hit area, nicer hover */
.sb-menu-btn {
    width: 38px; height: 38px;
    padding: 0 !important;
    border-radius: 10px !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
}
.sb-menu-btn:hover {
    background: var(--cs-primary-soft) !important;
    color: var(--cs-primary) !important;
}
.sb-menu-btn .material-icons { font-size: 22px !important; }

/* Greeting block — single-line, date inline as muted suffix.
   Bold name on the left, faint date on the right of the same row. The
   block flexes to fill remaining space but truncates with ellipsis so
   it never pushes the LR search / company chip off the bar. */
.sb-topbar-greeting {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex: 0 1 auto !important;
    min-width: 0;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
}
.sb-greeting-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.sb-greeting-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
}
.sb-greeting-date .material-icons {
    font-size: 13px !important;
    color: #cbd5e1 !important;
}
/* Legacy class kept as alias — older callsites use .sb-greeting-sub. */
.sb-greeting-sub { display: none !important; }

/* Actions cluster — even spacing, baseline align */
.sb-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0;
}

/* Two-line context chip — company on top (bold), year + branch + godown on
   a smaller meta line. Tightened to fit a 58 px topbar. */
.sb-context-chip {
    min-height: 40px;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 12px !important;
    border-radius: 10px !important;
    background: #f4f7fd !important;
    border: 1px solid #e3e9f5 !important;
    color: #0f172a !important;
    transition: all 0.15s ease !important;
    max-width: none;
    white-space: nowrap;
}
.sb-context-chip > .material-icons:first-child {
    font-size: 19px !important;
    color: var(--cs-primary) !important;
    flex: 0 0 auto;
}
.sb-context-stack {
    display: inline-flex; flex-direction: column;
    align-items: flex-start; gap: 1px;
    min-width: 0;
    line-height: 1.15;
}
.sb-context-cmp {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.1px;
    max-width: 420px;
    overflow: hidden; text-overflow: ellipsis;
}
.sb-context-meta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    color: #64748b;
    letter-spacing: 0.1px;
}
.sb-context-tag {
    display: inline-flex; align-items: center; gap: 3px;
    white-space: nowrap;
}
.sb-context-tag .material-icons {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
}
.sb-context-sep { color: #cbd5e1; font-weight: 700; }
.sb-context-chip.sb-context-btn {
    cursor: pointer; border-style: solid;
}
.sb-context-chip.sb-context-btn:hover {
    background: var(--cs-primary-soft) !important;
    border-color: #c7d2fe !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}
.sb-context-chip.sb-context-btn:hover .sb-context-swap {
    color: var(--cs-primary-dark) !important;
}
.sb-context-swap {
    font-size: 16px !important;
    color: var(--cs-primary) !important;
}

/* Divider between context and user — slimmer */
.sb-topbar-divider {
    width: 1px; height: 28px;
    background: #e7eaf2; margin: 0 4px;
    flex-shrink: 0;
}

/* User pill — compact, hover ring */
.sb-user-activator {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 10px 4px 4px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
}
.sb-user-activator:hover {
    background: #f8fafc !important;
    border-color: #e7eaf2 !important;
}
.sb-user-avatar {
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-dark)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
    flex-shrink: 0;
}
.sb-user-meta {
    display: flex; flex-direction: column;
    line-height: 1.15; gap: 1px;
}
.sb-user-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.1px;
}
.sb-user-role {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}
.sb-user-caret {
    color: #94a3b8 !important;
    font-size: 18px !important;
}

@media (max-width: 960px) {
    .sb-topbar { padding: 0 12px !important; gap: 8px !important; height: 60px !important; }
    /* On narrow screens keep the chip readable: hide the meta line, only the
       company name + swap icon survive. Tap the chip to see/change full scope. */
    .sb-context-chip { max-width: none; padding: 4px 10px !important; min-height: 38px; }
    .sb-context-cmp { font-size: 12px; max-width: 220px; }
    .sb-context-meta { display: none; }
    .sb-greeting-sub { display: none !important; }
    .sb-user-meta { display: none; }
    .sb-topbar-divider { display: none; }
}

/* ════════════════════════════════════════════════════════════
   PREFERENCES — toggle-list layout (Liner-style)
   Title + helper text on the left, MudSwitch on the right.
   Lives inside a `.cw-card` paper.
   ════════════════════════════════════════════════════════════ */
.cw-pref-head {
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: #94a3b8;
    padding: 18px 22px 6px;
}
.cw-pref-list {
    display: flex; flex-direction: column;
}
.cw-pref-row {
    display: flex; align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid #f1f3f7;
    gap: 16px;
}
.cw-pref-row:last-child { border-bottom: none; }
.cw-pref-row .cw-pref-text { flex: 1 1 auto; min-width: 0; }
.cw-pref-row .cw-pref-title {
    font-size: 14px; font-weight: 600; color: #0f172a;
    line-height: 1.25; margin: 0 0 3px;
}
.cw-pref-row .cw-pref-desc {
    font-size: 12.5px; color: #64748b; line-height: 1.35; margin: 0;
}
.cw-pref-row .cw-pref-control { flex-shrink: 0; }
.cw-pref-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 14px 22px;
    border-top: 1px solid #f1f3f7; background: #fafbfc;
}

/* MudSwitch styling — dark-navy when ON, neutral grey when OFF.
   Targets MudBlazor 7.x track/thumb DOM. */
.mud-switch .mud-switch-track {
    background-color: #cbd5e1 !important;
    opacity: 1 !important;
}
.mud-switch .mud-switch-thumb {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.25);
}
.mud-switch.mud-checked .mud-switch-track,
.mud-switch .mud-switch-track-checked {
    background-color: #0f172a !important;
    opacity: 1 !important;
}
.mud-switch.mud-checked .mud-switch-thumb,
.mud-switch .mud-switch-thumb-checked {
    background-color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════
   HORIZONTAL FORM LAYOUT — label left (1/3), input right (2/3)
   Wrap any form section in `.cw-hform` and rows in `.cw-hform-row`.
   The label receives `.cw-hform-label` (right-aligned, vertically
   centred). The input column receives `.cw-hform-control`.
   Stacks to a single column under 768 px.
   ════════════════════════════════════════════════════════════ */
.cw-hform { display: flex; flex-direction: column; gap: 18px; }
.cw-hform-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr;
    gap: 18px;
    align-items: start;
}
.cw-hform-label {
    text-align: right;
    padding-top: 10px; /* aligns with MudTextField input baseline */
}
.cw-hform-label .cw-hform-title {
    font-size: 13.5px; font-weight: 600; color: #0f172a; line-height: 1.25;
}
.cw-hform-label .cw-hform-title .cw-req { color: #ef4444; margin-left: 2px; }
.cw-hform-label .cw-hform-help {
    display: block; font-size: 11.5px; color: #94a3b8; margin-top: 2px;
    line-height: 1.3;
}
.cw-hform-control { min-width: 0; } /* prevents wide inputs from overflowing the grid */

/* Card chrome for horizontal form blocks (matches the Liner screenshot). */
.cw-hform-card.mud-paper {
    border: 1px solid #e7eaf0 !important; border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 4px 14px rgba(16,24,40,0.04) !important;
}
.cw-hform-card .cw-hform-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid #f1f3f7;
}
.cw-hform-card-head .cw-hform-card-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #3730a3;
}
.cw-hform-card-head .cw-hform-card-icon .material-icons { font-size: 20px; }
.cw-hform-card-head .cw-hform-card-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.cw-hform-card-head .cw-hform-card-sub   { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.cw-hform-card-body { padding: 22px; }
.cw-hform-card-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-top: 1px solid #f1f3f7;
}

@media (max-width: 768px) {
    .cw-hform-row { grid-template-columns: 1fr; gap: 8px; }
    .cw-hform-label { text-align: left; padding-top: 0; }
    .cw-hform-label .cw-hform-help { display: inline-block; margin-left: 6px; }
}

/* Note: the previous login-page CSS block that lived here
   (".cw-login-brand", "::before/::after" circle decor, ".cw-brand-stats-grid",
   ".cw-brand-stat-tile", ".cw-brand-checks") was removed in 2026-05.
   It was tied to an older login design that has been replaced by the
   self-styled two-panel layout in src/CargoWeb.Client/Pages/Login.razor —
   keeping the old rules here caused class-name collisions (a hardcoded
   `background: !important` and decorative ::before/::after circles bled
   through onto the new brand panel). All login styling now lives inline in
   Login.razor's <style> block. */

/* ════════════════════════════════════════════════════════════
   LINER UI KIT — alerts, banners, stat cards, tabs, pills.
   ════════════════════════════════════════════════════════════ */

/* Alerts — tinted bg + colored left rail */
.mud-alert { border-radius: 12px !important; padding: 14px 16px !important; border: 1px solid transparent !important; border-left-width: 4px !important; box-shadow: none !important; font-size: 13.5px; line-height: 1.45; }
.mud-alert .mud-alert-icon { font-size: 20px !important; }
.mud-alert .mud-alert-message-title, .mud-alert .mud-alert-title { font-weight: 700 !important; margin-bottom: 2px; }
.mud-alert.mud-alert-filled-success, .mud-alert.mud-alert-outlined-success, .mud-alert.mud-alert-text-success { background: #ecfdf5 !important; border-color: #10b981 !important; color: #065f46 !important; }
.mud-alert.mud-alert-filled-success .mud-alert-icon, .mud-alert.mud-alert-outlined-success .mud-alert-icon, .mud-alert.mud-alert-text-success .mud-alert-icon { color: #10b981 !important; }
.mud-alert.mud-alert-filled-info, .mud-alert.mud-alert-outlined-info, .mud-alert.mud-alert-text-info { background: #ecfeff !important; border-color: #06b6d4 !important; color: #155e75 !important; }
.mud-alert.mud-alert-filled-info .mud-alert-icon, .mud-alert.mud-alert-outlined-info .mud-alert-icon, .mud-alert.mud-alert-text-info .mud-alert-icon { color: #06b6d4 !important; }
.mud-alert.mud-alert-filled-warning, .mud-alert.mud-alert-outlined-warning, .mud-alert.mud-alert-text-warning { background: #fffbeb !important; border-color: #f59e0b !important; color: #92400e !important; }
.mud-alert.mud-alert-filled-warning .mud-alert-icon, .mud-alert.mud-alert-outlined-warning .mud-alert-icon, .mud-alert.mud-alert-text-warning .mud-alert-icon { color: #f59e0b !important; }
.mud-alert.mud-alert-filled-error, .mud-alert.mud-alert-outlined-error, .mud-alert.mud-alert-text-error { background: #fef2f2 !important; border-color: #ef4444 !important; color: #991b1b !important; }
.mud-alert.mud-alert-filled-error .mud-alert-icon, .mud-alert.mud-alert-outlined-error .mud-alert-icon, .mud-alert.mud-alert-text-error .mud-alert-icon { color: #ef4444 !important; }
.mud-alert.cw-alert-primary { background: #eff6ff !important; border-color: #0f172a !important; color: #0f172a !important; }
.mud-alert.cw-alert-primary .mud-alert-icon { color: #0f172a !important; }
.mud-alert.cw-alert-with-actions .mud-alert-message { display: flex; flex-direction: column; gap: 10px; }
.mud-alert.cw-alert-with-actions .cw-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.mud-alert.cw-alert-with-actions .cw-alert-actions .mud-button-root { padding: 6px 14px !important; font-size: 12.5px !important; border-radius: 8px !important; }

/* System status banners */
.cw-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.cw-banner > .cw-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.18); flex-shrink: 0; }
.cw-banner > .cw-banner-icon .material-icons { font-size: 17px; color: #fff; }
.cw-banner > .cw-banner-body { flex: 1 1 auto; min-width: 0; }
.cw-banner .cw-banner-strong { font-weight: 700; margin-right: 4px; }
.cw-banner .cw-banner-link { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; margin-left: 6px; cursor: pointer; }
.cw-banner .cw-banner-action { background: rgba(255,255,255,0.18); color: #fff; border: none; padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cw-banner .cw-banner-action:hover { background: rgba(255,255,255,0.25); }
.cw-banner .cw-banner-close { cursor: pointer; color: rgba(255,255,255,0.85); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: transparent; border: none; }
.cw-banner .cw-banner-close:hover { background: rgba(255,255,255,0.15); }
.cw-banner.cw-banner-warning  { background: #f59e0b; }
.cw-banner.cw-banner-success  { background: #10b981; }
.cw-banner.cw-banner-danger   { background: #ef4444; }
.cw-banner.cw-banner-primary  { background: #0c2440; }
.cw-banner.cw-banner-info     { background: #06b6d4; }
.cw-banner.cw-banner-neutral  { background: #1e293b; }

/* Stat cards — gradient family */
.cw-stat-card { position: relative; overflow: hidden; border-radius: 14px; padding: 20px 22px; color: #fff; min-height: 130px; box-shadow: 0 6px 18px rgba(15,23,42,0.10); }
.cw-stat-card::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.cw-stat-card .cw-stat-card-head { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.cw-stat-card .cw-stat-card-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.88); }
.cw-stat-card .cw-stat-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.18); }
.cw-stat-card .cw-stat-card-ic .material-icons { color: #fff; font-size: 20px; }
.cw-stat-card .cw-stat-card-value { position: relative; z-index: 1; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-top: 14px; }
.cw-stat-card .cw-stat-card-trend { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; background: rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }
.cw-stat-card .cw-stat-card-foot { position: relative; z-index: 1; font-size: 11.5px; color: rgba(255,255,255,0.80); margin-top: 4px; display: inline-block; }
.cw-stat-card.cw-stat-navy   { background: linear-gradient(135deg, #1e3a8a, #0c2440); }
.cw-stat-card.cw-stat-cyan   { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.cw-stat-card.cw-stat-green  { background: linear-gradient(135deg, #10b981, #059669); }
.cw-stat-card.cw-stat-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cw-stat-card.cw-stat-rose   { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.cw-stat-card.cw-stat-purple { background: linear-gradient(135deg, #7c3aed, #4c1d95); }

/* Light tinted stat cards */
.cw-stat-light { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.cw-stat-light .cw-stat-light-head { display: flex; align-items: center; gap: 10px; }
.cw-stat-light .cw-stat-light-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.cw-stat-light .cw-stat-light-ic .material-icons { font-size: 18px; }
.cw-stat-light .cw-stat-light-trend { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.cw-stat-light .cw-stat-light-value { font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -0.3px; margin-top: 6px; }
.cw-stat-light .cw-stat-light-label { font-size: 12px; color: #64748b; }
.cw-stat-light.cw-stat-tint-cyan    .cw-stat-light-ic { background: #ecfeff; color: #0891b2; }
.cw-stat-light.cw-stat-tint-emerald .cw-stat-light-ic { background: #ecfdf5; color: #059669; }
.cw-stat-light.cw-stat-tint-amber   .cw-stat-light-ic { background: #fffbeb; color: #b45309; }
.cw-stat-light.cw-stat-tint-red     .cw-stat-light-ic { background: #fef2f2; color: #b91c1c; }
.cw-stat-light.cw-stat-tint-purple  .cw-stat-light-ic { background: #f3e8ff; color: #6d28d9; }
.cw-trend-up   { background: #ecfdf5; color: #047857; }
.cw-trend-down { background: #fef2f2; color: #b91c1c; }

/* Basic / hover / glass cards */
.cw-basic-card { background: #fff; border: 1px solid #e7eaf0; border-radius: 14px; padding: 22px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.cw-basic-card.cw-card-hover { transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; }
.cw-basic-card.cw-card-hover:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: 0 10px 30px rgba(15,23,42,0.10); }
.cw-basic-card.cw-card-glass { background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }

/* Tabs — line + pill */
.mud-tabs .mud-tabs-toolbar { background: transparent !important; border-bottom: 1px solid #e7eaf0; }
.mud-tabs .mud-tab { text-transform: none !important; font-weight: 600 !important; color: #64748b !important; min-width: 0 !important; padding: 12px 16px !important; font-size: 13.5px !important; }
.mud-tabs .mud-tab:hover { color: #0f172a !important; }
.mud-tabs .mud-tab.mud-tab-active { color: #0f172a !important; }
.mud-tabs .mud-tab-slider { background-color: #0f172a !important; height: 2px !important; }
.mud-tabs.cw-tabs-pill .mud-tabs-toolbar { background: #f1f5f9 !important; border-radius: 10px; border: 1px solid #e7eaf0; padding: 4px; display: inline-flex; }
.mud-tabs.cw-tabs-pill .mud-tab { border-radius: 8px !important; padding: 8px 14px !important; }
.mud-tabs.cw-tabs-pill .mud-tab.mud-tab-active { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.mud-tabs.cw-tabs-pill .mud-tab-slider { display: none !important; }

/* Status / category / priority pills */
.cw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; }
.cw-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cw-pill.no-dot::before { display: none; }
.cw-pill-open      { background: #eff6ff; color: #1d4ed8; }
.cw-pill-inprog    { background: #fffbeb; color: #b45309; }
.cw-pill-resolved  { background: #ecfdf5; color: #047857; }
.cw-pill-closed    { background: #f1f5f9; color: #475569; }
.cw-pill-paid      { background: #ecfdf5; color: #047857; }
.cw-pill-pending   { background: #fffbeb; color: #b45309; }
.cw-pill-overdue   { background: #fef2f2; color: #b91c1c; }
.cw-pill-active    { background: #ecfdf5; color: #047857; }
.cw-pill-onleave   { background: #fffbeb; color: #b45309; }
.cw-pill-inactive  { background: #f1f5f9; color: #64748b; }
.cw-cat-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.cw-cat-bug      { background: #fef2f2; color: #b91c1c; }
.cw-cat-feature  { background: #eff6ff; color: #1d4ed8; }
.cw-cat-perf     { background: #fffbeb; color: #b45309; }
.cw-cat-design   { background: #fdf2f8; color: #be185d; }
.cw-cat-product  { background: #faf5ff; color: #6d28d9; }
.cw-cat-engineer { background: #eff6ff; color: #1d4ed8; }
.cw-cat-qa       { background: #ecfeff; color: #0891b2; }
.cw-cat-data     { background: #f0fdf4; color: #047857; }
.cw-cat-devops   { background: #fdf4ff; color: #86198f; }
.cw-cat-marketing{ background: #fff7ed; color: #b45309; }
.cw-priority { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.cw-priority::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cw-priority-high   { color: #b91c1c; }
.cw-priority-medium { color: #b45309; }
.cw-priority-low    { color: #047857; }

/* Avatar cell */
.cw-avatar-cell { display: inline-flex; align-items: center; gap: 10px; }
.cw-avatar-cell .cw-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; overflow: hidden; }
.cw-avatar-cell .cw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cw-avatar-cell .cw-avatar-name  { font-weight: 600; color: #0f172a; font-size: 13px; line-height: 1.2; }
.cw-avatar-cell .cw-avatar-email { font-size: 11.5px; color: #94a3b8; line-height: 1.2; }
.cw-av-amber   { background: #f59e0b; }
.cw-av-blue    { background: #2563eb; }
.cw-av-pink    { background: #ec4899; }
.cw-av-emerald { background: #10b981; }
.cw-av-violet  { background: #7c3aed; }
.cw-av-cyan    { background: #06b6d4; }
.cw-av-rose    { background: #f43f5e; }
.cw-av-orange  { background: #fb923c; }

/* Dialog polish */
.mud-dialog { border-radius: 14px !important; box-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 8px 18px rgba(15,23,42,0.08) !important; }
.mud-dialog-title { padding: 18px 22px !important; font-weight: 700 !important; font-size: 16px !important; border-bottom: 1px solid #f1f3f7; }
.mud-dialog-content { padding: 20px 22px !important; }
.mud-dialog-actions { padding: 14px 22px !important; border-top: 1px solid #f1f3f7; background: #fafbfc; }

/* KPI summary chips — ORIGINAL pre-redesign styling, restored. */
.cw-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.cw-kpi-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 12px 18px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); min-width: 0; }
.cw-kpi-tile .cw-kpi-num { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1.15; letter-spacing: -0.4px; white-space: nowrap; }
.cw-kpi-tile .cw-kpi-label { font-size: 13px; font-weight: 600; color: #64748b; white-space: nowrap; }
.cw-kpi-tile.cw-kpi-info    { background: #eff6ff; border-color: #dbeafe; }
.cw-kpi-tile.cw-kpi-info    .cw-kpi-num { color: #1d4ed8; }
.cw-kpi-tile.cw-kpi-amber   { background: #fffbeb; border-color: #fef3c7; }
.cw-kpi-tile.cw-kpi-amber   .cw-kpi-num { color: #b45309; }
.cw-kpi-tile.cw-kpi-emerald { background: #ecfdf5; border-color: #d1fae5; }
.cw-kpi-tile.cw-kpi-emerald .cw-kpi-num { color: #047857; }
.cw-kpi-tile.cw-kpi-red     { background: #fef2f2; border-color: #fee2e2; }
.cw-kpi-tile.cw-kpi-red     .cw-kpi-num { color: #b91c1c; }
@media (max-width: 960px) { .cw-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cw-kpi-row { grid-template-columns: 1fr; } }

/* Two-Step Verification page */
.cw-2fa-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: #f7f8fb; }
.cw-2fa-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.cw-2fa-logo { width: 60px; height: 60px; border-radius: 14px; background: #0c2440; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(12,36,64,0.25); overflow: hidden; }
.cw-2fa-logo img { width: 100%; height: 100%; object-fit: cover; }
.cw-2fa-name { font-size: 18px; font-weight: 800; color: #0f172a; }
.cw-2fa-card { width: 100%; max-width: 440px; background: #fff; border-radius: 14px; border: 1px solid #e7eaf0; box-shadow: 0 4px 18px rgba(15,23,42,0.06); padding: 32px 28px; text-align: center; }
.cw-2fa-shield { width: 56px; height: 56px; border-radius: 50%; background: #eff6ff; color: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cw-2fa-shield .material-icons { font-size: 26px; }
.cw-2fa-card h2 { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; }
.cw-2fa-card .cw-2fa-sub { font-size: 13.5px; color: #64748b; margin: 6px 0 0; }
.cw-2fa-card .cw-2fa-email { font-weight: 700; color: #0f172a; }
.cw-2fa-label { font-size: 13.5px; color: #475569; font-weight: 500; margin: 22px 0 10px; }
.cw-2fa-otp { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.cw-2fa-otp input { width: 46px; height: 52px; text-align: center; font-size: 22px; font-weight: 700; color: #0f172a; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.cw-2fa-otp input:focus { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,0.10); }
.cw-2fa-resend { font-size: 12.5px; color: #64748b; margin-top: 6px; }
.cw-2fa-resend a { color: #1d4ed8; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; cursor: pointer; }
.cw-2fa-expiry { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.cw-2fa-back { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: #475569; text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; }
.cw-2fa-back:hover { color: #0f172a; }

/* ── Ledger opening: bill-wise breakup block ───────────── */
.cw-opening-breakup {
    margin-top: 18px;
    background: #fafbfc;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 14px 16px;
}
.cw-opening-breakup-title {
    font-size: 13.5px; font-weight: 700; color: #0f172a;
    display: flex; align-items: center; gap: 8px;
}
.cw-opening-breakup-sub {
    font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.4;
}
.cw-opening-breakup-foot {
    margin-top: 10px;
    display: flex; align-items: center; gap: 18px;
    font-size: 12.5px; color: #334155;
    border-top: 1px solid #eef1f5; padding-top: 10px;
    flex-wrap: wrap;
}
.cw-opening-breakup-foot strong { color: #0f172a; }

/* Ledger visibility: branch / user deny+allow chips */
.cw-access-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 2px; min-height: 36px; align-items: center; }
.cw-access-chips .cw-pill { padding-right: 6px; }
.cw-access-chip-x { background: transparent; border: none; cursor: pointer; color: inherit; opacity: 0.7; font-size: 12px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 0; line-height: 1; }
.cw-access-chip-x:hover { background: rgba(0,0,0,0.08); opacity: 1; }

/* ── Dashboard layout (Liner-style) ──────────────────────── */
.cw-dash-welcome {
    position: relative; overflow: hidden;
    border-radius: 16px; padding: 24px 28px;
    color: #fff;
    background:
        radial-gradient(900px 360px at 90% -20%, #1d4ed8 0%, transparent 55%),
        linear-gradient(135deg, #0c2440 0%, #122a4d 60%, #0e2038 100%);
    box-shadow: 0 12px 28px rgba(11,31,58,0.22);
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.cw-dash-welcome-deco {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 90% 80%, rgba(225,29,72,0.20), transparent 58%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 28px);
}
.cw-dash-welcome-body { position: relative; z-index: 1; flex: 1 1 380px; min-width: 0; }
.cw-dash-welcome-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #93c5fd;
}
.cw-dash-welcome h1 {
    margin: 6px 0 4px; font-size: 24px; font-weight: 800;
    letter-spacing: -0.4px; color: #ffffff;
}
.cw-dash-welcome p {
    margin: 0; color: rgba(255,255,255,0.78); font-size: 13.5px; line-height: 1.5;
    max-width: 720px;
}
.cw-dash-welcome p strong { color: #ffffff; }
.cw-dash-welcome-chips {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.cw-dash-welcome-chips span {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
    padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.92);
}
.cw-dash-welcome-chips span .material-icons { font-size: 14px; color: #93c5fd; }
.cw-dash-welcome-cta { position: relative; z-index: 1; }
.cw-dash-welcome-cta .mud-button-root {
    background: #ffffff !important; color: #0c2440 !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.20) !important;
    font-weight: 700 !important;
}
.cw-dash-welcome-cta .mud-button-root:hover {
    background: #f1f5f9 !important; transform: translateY(-1px);
}

.cw-dash-stat-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 1100px) { .cw-dash-stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cw-dash-stat-row { grid-template-columns: 1fr; } }

.cw-dash-section-head { margin: 22px 0 12px; }
.cw-dash-section-head h2 {
    font-size: 16px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.2px;
}
.cw-dash-section-head p {
    font-size: 13px; color: #64748b; margin: 3px 0 0;
}

/* ── Dashboard charts + recent activity ── */
.cw-charts-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
.cw-chart-card, .cw-recent-card {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
}
.cw-chart-card { padding: 14px 16px 6px; }
.cw-chart-card h3, .cw-recent-card h3 {
    margin: 0; font-size: 14px; font-weight: 700; color: #0f172a;
}
.cw-chart-card .cw-chart-sub { font-size: 12px; color: #64748b; margin: 2px 0 6px; }
.cw-recent-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cw-recent-card h3 { padding: 11px 18px; border-bottom: 1px solid #eef1f5; }
.cw-recent-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 18px; border-bottom: 1px solid #f3f5f8; font-size: 13px;
}
.cw-recent-item:last-child { border-bottom: none; }
.cw-recent-doc { font-weight: 700; color: #1d4ed8; min-width: 92px; }
.cw-recent-party { color: #475569; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-recent-amt { font-weight: 700; color: #0f172a; }
.cw-recent-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: 13px; }
@media (max-width: 1100px) {
    .cw-charts-row { grid-template-columns: 1fr; }
    .cw-recent-row { grid-template-columns: 1fr; }
}

/* ── Dashboard financial overview ── */
.cw-fin-card {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    padding: 16px 18px; margin-bottom: 16px;
}
.cw-fin-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cw-fin-head h2 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -0.2px; }
.cw-fin-head span { font-size: 12px; color: #64748b; font-weight: 600; }
.cw-fin-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: #eef1f5; border: 1px solid #eef1f5; border-radius: 10px; overflow: hidden;
}
.cw-fin-cell { background: #fff; padding: 12px 14px; }
.cw-fin-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: #64748b;
}
.cw-fin-value { font-size: 19px; font-weight: 800; color: #0f172a; margin-top: 3px; }
.cw-fin-value.pos  { color: #047857; }
.cw-fin-value.warn { color: #b45309; }
.cw-fin-value.neg  { color: #b91c1c; }
@media (max-width: 900px) { .cw-fin-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Dashboard bar lists (aging / top customers) ── */
.cw-bar-list { padding: 6px 4px 2px; }
.cw-bar-row { margin: 9px 6px; }
.cw-bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; }
.cw-bar-name { color: #334155; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-bar-val  { color: #0f172a; font-weight: 700; white-space: nowrap; }
.cw-bar-track { height: 8px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.cw-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2563eb, #3b82f6); }
.cw-bar-fill.amber { background: linear-gradient(90deg, #d97706, #f59e0b); }

/* ── Print layout designer ── */
.cw-pd { display: flex; gap: 20px; align-items: flex-start; }
/*  Layout problems, above the canvas. Full width - it sits OUTSIDE .cw-pd for that reason,
    which is a flex row and would otherwise stand the strip beside the design area. */
.cw-pd-problems { margin-bottom: 12px; }
.cw-pd-problems .mud-alert { padding-top: 6px; padding-bottom: 6px; }
.cw-pd-main { flex: 1; min-width: 0; }

/* Tool palette — a floating tool strip above the canvas */
.cw-pd-palette {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 0;
    padding: 7px 10px; background: transparent;
    border: 0; border-top: 1px solid #eef1f5; border-radius: 0; box-shadow: none;
}
/*  Twelve tools in one undifferentiated row read as twelve equally likely choices. Grouped
    and captioned, the eye lands on the group first - which is how a drawing tool has been
    laid out since the first one. */
.cw-pd-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cw-pd-tools-label {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #94a3b8; margin: 0 6px 0 2px; white-space: nowrap;
}

/*  The designer toolbar.

    Every control on it is forced to ONE height, ONE radius and ONE type size. It could not
    be done by setting Size="Size.Small" on the buttons: the global
    `.mud-button-root { padding: 8px 16px !important; font-size: .9rem !important }` earlier
    in this file overrides MudBlazor's own size classes, so every button on the screen
    rendered full size whatever it asked for. Beside 34px icon buttons that produced two
    heights on one row and a toolbar needing FOUR rows at 1600px wide. */
/*  ONE chrome block under the title, holding the toolbar row and the tool palette row.
    They were two separate bordered cards, and the toolbar was a third thing squeezed into
    the page header beside the title - where it had to WRAP, because the header gives the
    title first claim on the row and the admin shell has already spent 260px on its sidebar.
    Full-width rows in a single card cannot be squeezed by a long template name. */
.cw-pd-chrome {
    background: #fff; border: 1px solid #e7eaf0; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    margin-bottom: 14px; overflow: hidden;
}
.cw-pd-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    padding: 7px 10px; background: transparent;
    border: 0; border-radius: 0; box-shadow: none;
}
/* Back and Save sit beside the TITLE, where the action that finishes a screen belongs. */
.cw-pd-head-acts { display: flex; align-items: center; gap: 8px; }
.cw-pd-head-acts .mud-button-root {
    height: 36px; min-height: 36px; padding: 0 16px !important;
    font-size: 13px !important; border-radius: 9px !important;
}
.cw-pd-tb-group { display: flex; align-items: center; gap: 4px; }
/*  A hairline between groups: what the page IS / what I just DID / what I am LOOKING at /
    leaving. Four things to scan instead of eleven. */
.cw-pd-tb-sep { flex: 0 0 1px; width: 1px; height: 20px; background: #e2e8f0; margin: 0 5px; }

.cw-pd-toolbar .mud-button-root,
.cw-pd-palette .mud-button-root {
    height: 32px; min-height: 32px; min-width: 0;
    padding: 0 10px !important; font-size: 12.5px !important; border-radius: 8px !important;
}
.cw-pd-toolbar .mud-icon-button,
.cw-pd-palette .mud-icon-button { width: 32px; padding: 0 !important; }
.cw-pd-toolbar .mud-button-root .mud-icon-root,
.cw-pd-palette .mud-button-root .mud-icon-root { font-size: 17px; }
.cw-pd-toolbar .mud-button-icon-start,
.cw-pd-palette .mud-button-icon-start { margin-right: 6px; margin-left: -1px; }
/*  A tool button at rest is a quiet one. The colour is spent on the two things that carry
    it: an engaged toggle, and Save. */
.cw-pd-toolbar .mud-button-outlined.mud-button-outlined-default,
.cw-pd-palette .mud-button-outlined.mud-button-outlined-default {
    border-color: #e2e8f0; color: #334155; background: #fff;
}
.cw-pd-toolbar .mud-button-outlined.mud-button-outlined-default:hover,
.cw-pd-palette .mud-button-outlined.mud-button-outlined-default:hover {
    border-color: #c7d3e4; background: #f6f8fc;
}
.cw-pd-toolbar .mud-icon-button:hover { background: #f1f5f9; }

/* Whose template this is. Sits at the far end of the element palette because it is not an
   element you add - it decides which customer's CUSTOM FIELDS the palette and the table
   column list offer. Separated by the auto margin so it never reads as another button. */
.cw-pd-palette-company {
    margin-left: auto; display: flex; align-items: flex-start;
    padding-left: 12px; border-left: 1px solid #e7eaf0;
}
@media (max-width: 900px) {
    .cw-pd-palette-company { margin-left: 0; border-left: 0; padding-left: 0; width: 100%; }
}

/* Canvas workspace — soft surface with a subtle dot grid (Figma-like) */
.cw-pd-canvas-wrap {
    background:
        radial-gradient(circle at 1px 1px, rgba(100,116,139,0.18) 1px, transparent 0) 0 0 / 20px 20px,
        linear-gradient(180deg, #eef1f6, #e6eaf1);
    padding: 28px; border-radius: 16px; border: 1px solid #e2e8f0;
    overflow: auto; max-height: 76vh;
}
.cw-pd-canvas {
    position: relative; background: #fff; margin: 0 auto; border-radius: 3px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.10);
    touch-action: none; user-select: none;
}
.cw-pd-el {
    position: absolute; box-sizing: border-box; cursor: move;
    overflow: hidden; padding: 1px 2px; line-height: 1.25; border-radius: 2px;
    transition: outline-color .12s ease, box-shadow .12s ease;
}
.cw-pd-el:hover { outline: 1px dashed #93c5fd; }
.cw-pd-el.sel {
    outline: 2px solid #2563eb; outline-offset: 0; z-index: 5;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.16);
}
/*  "Apply to all selected" - set apart from the properties below it, because those edit ONE
    element and these edit every selected one. Two panels that look alike would be read as one. */
.cw-pd-bulk {
    margin: 8px 0 12px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 6px;
    background: var(--mud-palette-background-grey, #f5f5f5);
}

/*  The rubber band swept over empty canvas to select an area. pointer-events:none is not
    decoration: without it the band sits under the pointer and eats the pointerup that ends
    the sweep, so the selection never lands and the band never disappears. */
.cw-pd-marquee {
    position: absolute;
    border: 1px solid #2563eb;
    background: rgba(37, 99, 235, 0.10);
    pointer-events: none;
    z-index: 40;
}
.cw-pd-el-line { background: #334155; }
.cw-pd-el-box { border: 1px solid #94a3b8; }
/* Grab strips along a box's edges — the hollow interior lets clicks fall through. */
/* A small table inside a card or an expansion panel - the freight-memo lines on Hire
   Payment, the trip lines on Refused Placements. The class was on all three tables and
   defined nowhere, so they rendered as bare unspaced rows. Deliberately lighter than
   .cw-report-tbl: this is a detail inside something else, not a report of its own. */
.cw-mini-table { width: 100%; border-collapse: collapse; }
.cw-mini-table thead th {
    background: #f8fafc; color: #475569; text-align: left; font-weight: 600;
    font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 6px 10px; white-space: nowrap; border-bottom: 1px solid #e2e8f0;
}
.cw-mini-table td {
    padding: 6px 10px; border-bottom: 1px solid #f1f5f9;
    font-variant-numeric: tabular-nums; color: #0f172a;
}
.cw-mini-table tbody tr:last-child td { border-bottom: 0; }
.cw-mini-table .num, .cw-mini-table th.num, .cw-mini-table td.num { text-align: right; }

/* A titled sub-panel in the print designer - the per-band options, the grouping panel.
   Both the box and its title were used and defined nowhere, so the panels rendered as
   loose rows of checkboxes with a bold-less caption floating above them and no visible
   boundary between one section's options and the next. */
.cw-pd-box {
    border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    padding: 10px 12px;
}
.cw-pd-box-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: #334155;
    letter-spacing: 0.2px; margin-bottom: 6px;
}

/* The horizontal / vertical pair on a selected rule. Full width so the two halves read as
   one switch rather than as two unrelated buttons. */
.cw-pd-linedir { display: flex; width: 100%; }
.cw-pd-linedir .mud-button { flex: 1; font-size: 12px; }

.cw-pd-box-edge { touch-action: none; }
.cw-pd-box-edge:hover { background: rgba(37,99,235,0.14); }
.cw-pd-el-table { border: 1px dashed #cbd5e1; background: #f8fafc; font-size: 9px; color: #64748b; }
.cw-pd-el-company { border: 1px dashed #cbd5e1; }

/* Resize handle on the selected element's bottom-right corner */
.cw-pd-handle {
    position: absolute; width: 12px; height: 12px; box-sizing: border-box;
    background: #fff; border: 2px solid #2563eb; border-radius: 3px;
    cursor: nwse-resize; z-index: 6; touch-action: none;
    box-shadow: 0 1px 3px rgba(15,23,42,0.25);
}
.cw-pd-handle:hover { background: #2563eb; }

/* ── Designer rulers (mm) ─────────────────────────────────────────────── */
.cw-pd-stage { width: max-content; margin: 0 auto; }
.cw-pd-stage.ruled {
    display: grid; grid-template-columns: 22px max-content; grid-template-rows: 22px max-content;
    border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px #d3dae5;
}
.cw-pd-corner { background: #e9edf3; border-right: 1px solid #d3dae5; border-bottom: 1px solid #d3dae5; }
.cw-pd-ruler { position: relative; background: #f4f6fa; overflow: hidden; }
.cw-pd-ruler-h { height: 22px; border-bottom: 1px solid #d3dae5; }
.cw-pd-ruler-v { width: 22px; border-right: 1px solid #d3dae5; }
.cw-pd-rtick { position: absolute; background: #aab4c4; }
.cw-pd-ruler-h .cw-pd-rtick { top: 15px; width: 1px; height: 7px; }
.cw-pd-ruler-h .cw-pd-rtick.maj { top: 9px; height: 13px; background: #64748b; }
.cw-pd-ruler-v .cw-pd-rtick { left: 15px; height: 1px; width: 7px; }
.cw-pd-ruler-v .cw-pd-rtick.maj { left: 9px; width: 13px; background: #64748b; }
.cw-pd-rlabel { position: absolute; font-size: 8px; color: #64748b; line-height: 1; }
.cw-pd-ruler-h .cw-pd-rlabel { top: 1px; transform: translateX(2px); }
.cw-pd-ruler-v .cw-pd-rlabel { left: 2px; transform: translateY(1px); writing-mode: vertical-rl; }

/* ── Designer preview (read-only print look) ──────────────────────────── */
.cw-pd-preview-wrap {
    background: linear-gradient(180deg, #eef1f6, #e6eaf1);
    padding: 24px; border-radius: 14px; overflow: auto; max-height: 78vh; text-align: center;
}
.cw-pd-preview-page {
    position: relative; background: #fff; margin: 0 auto; border-radius: 3px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.10);
}
.cw-pd-preview-page .cw-pd-el { cursor: default; }
.cw-pd-preview-page .cw-pd-el:hover { outline: none; }
.cw-pd-preview-page .cw-pd-el.sel { outline: none; box-shadow: none; }
/* Print-realistic preview elements (no design chrome) */
.cw-pd-pv-el { position: absolute; overflow: hidden; line-height: 1.25; color: #0f172a; box-sizing: border-box; }
.cw-pd-pv-company { display: flex; flex-direction: column; gap: 2px; }
.cw-pd-pv-cname { font-weight: 800; font-size: 1.4em; color: #0f172a; }
.cw-pd-pv-caddr { font-size: 0.82em; color: #475569; }
.cw-pd-pv-logo {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    border: 1px solid #cbd5e1; color: #94a3b8; font-size: 11px; letter-spacing: 1px; background: #fafbfc;
}
/* overflow:hidden so rows past the element's box are cut at a ROW boundary, the way the
   printed table continues on another sheet - rather than every row being squeezed. */
.cw-pd-pv-table { width: 100%; height: 100%; display: flex; flex-direction: column; border: 1px solid #334155; overflow: hidden; }
/* flex: 0 0 auto, NOT flex: 1. Stretching every row to an equal share of a fixed-height box
   made each row shrink as rows were added, and the cells hide their overflow - so a value
   that wrapped to two lines showed its first line and half its second, and the preview
   reported data as missing that prints perfectly well. A row takes the height its content
   needs; the table clips at its own edge. */
.cw-pd-pv-trow { display: flex; flex: 0 0 auto; border-bottom: 1px solid #cbd5e1; min-height: 1.5em; }
.cw-pd-pv-trow:last-child { border-bottom: none; }
.cw-pd-pv-thead { flex: 0 0 auto; background: #f1f5f9; font-weight: 700; }
/*  min-width:0 and border-box, or the columns come out the WRONG WIDTH.

    A flex item defaults to min-width:auto, i.e. it will not shrink below its own content,
    so a narrow column holding "BUNDLE" is floored at that word and takes the room from a
    wide one. Measured: weights of 2.4 and 2.6 drew at 2.12 and 2.28 while a weight of 0.8
    drew 0.84 - the thin columns fat, the wide ones thin, which is exactly backwards for
    somebody trying to decide whether a description column is wide enough. A designer that
    misreports the widths it exists to set is worse than the placeholder it replaced.
    Clipping is the honest outcome: a value that does not fit should LOOK like it does not. */
.cw-pd-pv-cell {
    flex: 1; padding: 2px 5px; overflow: hidden;
    box-sizing: border-box; min-width: 0;
}
/*  Vertical rules are the COLUMN LINES switch, not the borders switch - the renderer treats
    them separately (borders are horizontal) and this preview drew them on EVERY table, so it
    overstated the ink on any layout that had not asked for them. */
.cw-pd-pv-table.collines .cw-pd-pv-cell { border-right: 1px solid #cbd5e1; }
.cw-pd-pv-table.collines .cw-pd-pv-cell:last-child { border-right: none; }
.cw-pd-pv-ttotal { flex: 0 0 auto; font-weight: 700; background: #eef2f7; border-top: 1.5px solid #334155; }
/* Borderless table (element ShowBorders = false) — strip every grid line and
   the grey header/total fills so only the text shows (for pre-printed paper). */
/*  Cells are NOT in this list: borders off with column lines on is a real combination (a
    ruled grid with no horizontal lines), and blanket-killing the cell border would lose it. */
.cw-pd-pv-table.noborder,
.cw-pd-pv-table.noborder .cw-pd-pv-trow,
.cw-pd-pv-table.noborder .cw-pd-pv-thead,
.cw-pd-pv-table.noborder .cw-pd-pv-ttotal { border: none; }
.cw-pd-pv-table.noborder .cw-pd-pv-thead,
.cw-pd-pv-table.noborder .cw-pd-pv-ttotal { background: transparent; }

/*  ── The canvas face ──────────────────────────────────────────────────────────────────
    These OVERRIDE the preview rules above, so they sit after them - and must, for a second
    reason: PreviewTableRowHeightTests finds a rule by matching its selector as a substring,
    so a `.cw-pd-el-table .cw-pd-pv-table` rule placed earlier in the file answers in place of
    the base `.cw-pd-pv-table` it was asking about. */
/*  A table on the canvas draws its REAL face (PrintTableFace.razor). No padding, so its edges
    are the element's edges - measuring is the whole point - and the box clips it deliberately:
    whether the rows fit is the question being asked, and a face allowed to overflow its own
    element would answer it wrongly. */
.cw-pd-el-table { padding: 0; }
.cw-pd-el-table .cw-pd-pv-table { height: 100%; color: #0f172a; }
/*  A canvas-only column guide. What PRINTS is decided by Show table borders and Column lines;
    this is UI - faint enough not to be mistaken for ink - and it is what makes a borderless
    table's boundaries visible while its widths are being dragged. */
.cw-pd-el-table .cw-pd-pv-cell { box-shadow: inset -1px 0 0 rgba(148,163,184,0.30); }
.cw-pd-el-table .cw-pd-pv-cell:last-child { box-shadow: none; }
/*  The properties panel.

    It was a fixed 312px. A TABLE element stacks six controls per column inside it, and at
    312 their labels truncated to "Club with (opti..." and "In the totals ro..." - the
    operator could not tell one control from the next. How much room it needs depends
    entirely on which element is selected, so it is RESIZABLE rather than merely wider:
    drag the bottom-right corner. */
.cw-pd-panel {
    width: clamp(360px, 26vw, 460px); flex: 0 0 auto;
    min-width: 320px; max-width: 640px; resize: horizontal;
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 0 18px 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    position: sticky; top: 16px;
    /*  Its OWN scroll. Before this the panel was as tall as its contents, so reaching the
        Grouping box at the foot of a table's properties scrolled the whole PAGE and took
        the canvas with it - you were editing a document you could no longer see. */
    max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
}
.cw-pd-panel::-webkit-scrollbar { width: 11px; }
.cw-pd-panel::-webkit-scrollbar-track { background: transparent; }
.cw-pd-panel::-webkit-scrollbar-thumb {
    background: #dbe2ec; border-radius: 999px; border: 3px solid #fff;
}
.cw-pd-panel::-webkit-scrollbar-thumb:hover { background: #bfcbdb; }

/*  Which element you are editing, pinned while its properties scroll under it. Twenty
    controls down a table's panel there was otherwise nothing left on screen saying so. */
.cw-pd-panel h3 {
    position: sticky; top: 0; z-index: 3;
    margin: 0 0 14px; font-size: 12px; font-weight: 800; color: #334155;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 16px 0 10px; border-bottom: 1px solid #eef1f5; background: #fff;
}
/* A minor heading inside the panel - "Columns", "Grouping". */
.cw-pd-sub {
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #94a3b8; margin: 16px 0 8px;
}

/*  One table column's settings. A bordered card carrying the column's POSITION, because
    the printed table follows this list's order and six identical grey boxes do not say
    which one is which. */
.cw-pd-col {
    position: relative; margin: 0 0 14px;
    border: 1px solid #e4e9f0; border-radius: 10px; background: #fbfcfe;
    padding: 12px 10px 8px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cw-pd-col:hover { border-color: #c7d3e4; box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
.cw-pd-col-n {
    position: absolute; top: -9px; left: 10px; z-index: 1;
    background: #eef2ff; color: #4338ca; border: 1px solid #dde3fb;
    font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px;
}
.cw-pd-col-head { display: flex; align-items: center; gap: 4px; }
/*  Wrapping, and with a floor under the control that carries text. The panel is resizable,
    so a row that can only shrink eventually crushes a label to "Club with (opti..." - which
    is the illegibility the whole panel was widened to cure. */
.cw-pd-col-row {
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.cw-pd-col-head > *, .cw-pd-col-row > * { min-width: 0; }
.cw-pd-col-head > .flex-grow-1,
.cw-pd-col-row > .flex-grow-1 { flex: 1 1 116px; min-width: 116px; }
.cw-pd-col-acts { display: flex; align-items: center; flex: 0 0 auto; }
.cw-pd-col-acts .mud-icon-button { width: 28px; height: 28px; padding: 0 !important; }
.cw-pd-col-acts .mud-icon-root { font-size: 16px; }
.cw-pd-col-foot { margin-top: 6px; }
/* A checkbox line in the panel is prose, not a form label - 15px reads as shouting here. */
.cw-pd-panel .mud-checkbox-label { font-size: 13px; line-height: 1.35; }
.cw-pd-panel .cw-pd-empty {
    color: #94a3b8; font-size: 13px; line-height: 1.5; text-align: center;
    background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 10px; padding: 16px 14px;
}
.cw-pd-color span { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 600; }
.cw-pd-color input[type=color] {
    width: 48px; height: 32px; padding: 0; border: 1px solid #d3dae5;
    border-radius: 8px; background: #fff; cursor: pointer;
}
@media (max-width: 1100px) {
    .cw-pd { flex-direction: column; }
    /*  Stacked under the canvas it is no longer a side panel, so the viewport cap, the
        pinned heading and the resize grip all stop making sense - a panel that scrolls
        inside a page that also scrolls is unusable on a phone. */
    .cw-pd-panel {
        width: 100%; max-width: none; flex: 1; position: static;
        resize: none; max-height: none; overflow: visible; padding: 18px;
    }
    .cw-pd-panel h3 { position: static; padding-top: 0; }
}

.cw-quick {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 1100px) { .cw-quick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cw-quick { grid-template-columns: 1fr; } }

.cw-dash-recent { display: flex; flex-direction: column; }

/* ─────────────────────────────────────────────────────────────
   Ledger TAB layout — wraps the MudTabs inside the edit form.
   Style goals:
     • Tab bar reads like a section nav: white card, pill tabs,
       active tab highlighted by the primary slider underneath.
     • Panel body has comfortable padding and a soft surface so it
       visually belongs to the same card.
     • Small inline section heads (cw-tab-section-title) carry the
       same colored icon language as the legacy section cards, so
       users moving between forms still get the visual anchors.
   ───────────────────────────────────────────────────────────── */

.cw-tabs {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

/* Force light toolbar even if MudBlazor primary palette wins specificity
   (Color.Primary on MudTabs paints the bar navy by default). */
.cw-tabs .mud-tabs-toolbar,
.cw-tabs .mud-tabs-toolbar.mud-theme-primary,
.cw-tabs .mud-tabs-toolbar.mud-theme-transparent {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 8px 0;
    min-height: 56px;
}

.cw-tabs .mud-tab {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 13.5px;
    letter-spacing: 0.1px;
    color: #475569 !important;
    opacity: 1 !important;
    min-height: 48px;
    padding: 6px 18px;
    border-radius: 8px 8px 0 0;
    transition: background 0.15s, color 0.15s;
}
.cw-tabs .mud-tab:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a !important;
}
.cw-tabs .mud-tab.mud-tab-active {
    color: #0f172a !important;
    background: #ffffff;
    font-weight: 700 !important;
}
.cw-tabs .mud-tab .mud-icon-root,
.cw-tabs .mud-tab.mud-tab-active .mud-icon-root {
    color: inherit !important;
}
.cw-tabs .mud-tab .mud-icon-root {
    font-size: 18px;
    margin-right: 8px;
}
.cw-tabs .mud-tab-slider {
    height: 3px;
    border-radius: 3px 3px 0 0;
}

/* Badge dot/chip the tab uses for "needs attention" flags. */
.cw-tabs .mud-badge {
    font-size: 10.5px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
}

/* Panel body container. */
.cw-tab-panel,
.cw-tabs .mud-tabs-panels {
    padding: 22px 24px 26px;
    background: #ffffff;
}

/* Inline section heads inside a tab (used in Contact tab to
   separate "General" vs "Accounts dept", and in Marketing to
   announce the table). */
.cw-tab-section-title {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px;
    font-size: 14px; font-weight: 700; color: #0f172a;
    margin: 4px 0 14px;
    letter-spacing: -0.1px;
}
.cw-tab-section-title .material-icons {
    font-size: 20px;
}
.cw-tab-section-title .cw-tab-section-sub {
    flex-basis: 100%;
    font-weight: 500;
    font-size: 12.5px;
    color: #64748b;
    margin-top: 2px;
    margin-left: 30px;
}

/* Smaller phones: stack tab labels vertically, allow horizontal scroll. */
@media (max-width: 720px) {
    .cw-tabs .mud-tabs-toolbar { padding: 4px 4px 0; }
    .cw-tabs .mud-tab { padding: 6px 12px; font-size: 12.5px; }
    .cw-tab-panel,
    .cw-tabs .mud-tabs-panels { padding: 16px 14px 20px; }
}

/* ── Tab stepper bar (Back / progress dots / Next | Save) ───── */
.cw-tab-stepper {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px 18px;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.cw-tab-progress {
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cw-tab-progress-label {
    font-size: 12.5px; color: #64748b; font-weight: 500;
}
.cw-tab-progress-label strong { color: #0f172a; font-weight: 700; }

.cw-tab-progress-dots {
    display: flex; align-items: center; gap: 8px;
}
.cw-tab-dot {
    width: 28px; height: 6px; border-radius: 3px;
    background: #e2e8f0; border: 0; padding: 0; cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.cw-tab-dot:hover    { background: #cbd5e1; transform: scaleY(1.4); }
.cw-tab-dot.is-past  { background: #93c5fd; }
.cw-tab-dot.is-active{
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
    width: 40px; transform: scaleY(1.2);
}

@media (max-width: 720px) {
    .cw-tab-stepper { padding: 12px 14px 14px; gap: 10px; flex-wrap: wrap; }
    .cw-tab-progress-label { font-size: 11.5px; }
    .cw-tab-dot { width: 18px; }
    .cw-tab-dot.is-active { width: 26px; }
}

/* ─────────────────────────────────────────────────────────────
   Party-centric Contact editor — banner + grid styling.
   The banner sits above the grid and shows which ledger we're
   editing contacts for, so the user has constant context.
   ───────────────────────────────────────────────────────────── */
.cw-party-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(120deg, #eff6ff 0%, #ffffff 100%);
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
}
.cw-party-banner-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.cw-party-banner-icon .material-icons { font-size: 22px; }
.cw-party-banner-body { display: flex; flex-direction: column; gap: 2px; }
.cw-party-banner-name {
    font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -0.2px;
}
.cw-party-banner-sub {
    font-size: 12.5px; color: #475569;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cw-party-banner-dot { color: #cbd5e1; }

/* Compact KPI strip variant — used between the banner and the grid. */
.cw-kpi-row.cw-kpi-tight {
    gap: 10px;
    margin-bottom: 14px;
}
.cw-kpi-row.cw-kpi-tight .cw-kpi-tile {
    padding: 10px 14px;
}
.cw-kpi-row.cw-kpi-tight .cw-kpi-num {
    font-size: 22px;
}

/* Contact grid: dense single-table editor. */
.cw-contact-grid th {
    background: #f8fafc;
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: #475569;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}
.cw-contact-grid td {
    padding: 6px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}
.cw-contact-grid tr:last-child td { border-bottom: 0; }
.cw-contact-grid .mud-input-control { margin-top: 0; }
.cw-contact-grid .mud-checkbox { margin: 0; }
.cw-contact-grid .mud-switch-base { padding: 0; }

/* Highlight unsaved (new) rows with a soft amber rail so users see
   what's about to be inserted vs. what already exists in the DB. */
.cw-contact-row-new td:first-child {
    border-left: 3px solid #f59e0b;
}
.cw-contact-row-new td {
    background: rgba(254, 243, 199, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   Native <input list="…"> + <datalist> field — used in StationEdit
   for State. Styled to match a MudTextField outlined+dense so the
   field doesn't visually clash with its neighbours. The browser
   renders the dropdown of <option>s on its own (no Blazor focus
   games), which makes typing rock-solid.
   ───────────────────────────────────────────────────────────── */
.cw-native-field-label {
    display: block;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 4px 2px;
    font-weight: 400;
    letter-spacing: 0.15px;
}
.cw-native-field {
    display: block; width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background: #ffffff;
    font-size: 14px;
    color: #0f172a;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.cw-native-field:hover { border-color: rgba(0, 0, 0, 0.6); }
.cw-native-field:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px #2563eb;
}
.cw-native-field::placeholder { color: #94a3b8; }
/* Force uppercase as the user types — keeps tenant state names in
   the same casing the master uses. */
.cw-native-field { text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════
   Hero band + KPI strip + flex toolbar
   Used by the Ledgers / Parties page (and any future master that
   adopts the same shell). Designed to coexist with the older
   cw-page-head / cw-kpi-row classes — those stay untouched so
   other master pages render exactly as before.
   ═══════════════════════════════════════════════════════════════ */

/* Hero — coloured gradient band carrying icon + title + actions. */
.cw-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin: 0 0 16px 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 60%, #faf5ff 100%);
    border: 1px solid #e0e7ff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

    /*  STATED, not inherited, and this is a fix rather than a tidy-up.

        There is an OLDER .cw-hero further up this file - the dark navy dashboard hero - which
        sets color:#e8eefc for light text on a dark ground. This rule replaced its background and
        never its colour, so every light hero on all 136 screens still handed near-white down to
        its children. The title and subtitle set their own colours and looked fine; anything that
        INHERITED did not. A MudButton with Color="Color.Inherit" - which is how "All vehicles" is
        written - rendered #e8eefc on pale lavender and simply was not there.

        The dark block is now unreachable: nothing uses cw-hero-deco or cw-hero-body any more.
        It is left in place rather than deleted (owner rule 9) - flagged for the owner instead. */
    color: #0b1f3a;
}
.cw-hero-indigo { background: linear-gradient(135deg, #eef2ff 0%, #ede9fe 100%); border-color: #ddd6fe; }
.cw-hero-emerald { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #a7f3d0; }
.cw-hero-amber  { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fde68a; }
.cw-hero-rose   { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); border-color: #fecdd3; }

.cw-hero-icon {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.30);
}
.cw-hero-icon .material-icons { font-size: 28px; }

.cw-hero-text { flex: 1 1 auto; min-width: 0; }
.cw-hero-title {
    font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
    color: #0b1f3a; line-height: 1.15;
}
.cw-hero-sub {
    margin-top: 3px;
    font-size: 13px; color: #64748b; font-weight: 500;
}

.cw-hero-actions {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    justify-content: flex-end;
}

/* KPI strip — four icon cards in a row, wraps on narrow viewports.
   Each card carries a tinted square icon + value + label. The colour
   variants stay aligned with the meaning of the metric (emerald=good,
   rose=warning, indigo=neutral master count, amber=secondary stat). */
.cw-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 16px 0;
}
.cw-kpi-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e6eaf1;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.cw-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}
.cw-kpi-ic {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
}
.cw-kpi-ic .material-icons { font-size: 22px; }

.cw-kpi-v {
    font-size: 22px; font-weight: 800;
    color: #0b1f3a; line-height: 1.1;
    letter-spacing: -0.01em;
}
.cw-kpi-l {
    margin-top: 2px;
    font-size: 12px; font-weight: 600;
    color: #64748b; letter-spacing: 0.01em;
}

/* Per-variant accent — only the icon background + colour shift.
   Card frame stays neutral so the wall of tiles doesn't get noisy. */
.cw-kpi-indigo  .cw-kpi-ic { background: #eef2ff; color: #4338ca; }
.cw-kpi-emerald .cw-kpi-ic { background: #ecfdf5; color: #047857; }
.cw-kpi-rose    .cw-kpi-ic { background: #fff1f2; color: #be123c; }
.cw-kpi-amber   .cw-kpi-ic { background: #fffbeb; color: #b45309; }
.cw-kpi-violet  .cw-kpi-ic { background: #f5f3ff; color: #6d28d9; }

/* Toolbar — flex row above the grid. Left side: search + refresh,
   right side: filter pills. Both sides wrap independently. */
.cw-toolbar-flex {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px !important;
}
.cw-toolbar-left  { display: flex; align-items: center; gap: 6px; flex: 1 1 360px; min-width: 0; }
/*  flex: 0 0 auto - DO NOT SHRINK.

    The default (flex: 0 1 auto) lets this group be compressed below the width of the controls
    inside it, and a pair of date pickers then wraps into a narrow stack against the right edge
    while the search box on the left keeps all the room it asked for. The search box is the one
    that should give up width: it is legible at any size, and a From/To pair is not.

    Left already carries min-width: 0, so it shrinks instead. flex-wrap stays: a toolbar with a
    genuinely unfittable number of controls should still wrap rather than overflow the card. */
.cw-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

/* Pill-style toggle replacing the bare MudSwitch — easier to scan and
   matches the rest of the toolbar's pill aesthetic. Native checkbox
   stays hidden but accessible (focus + keyboard works as expected). */
.cw-pill-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #475569;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease;
}
.cw-pill-toggle:hover { border-color: #94a3b8; color: #0f172a; }
.cw-pill-toggle .material-icons { font-size: 16px; }
.cw-pill-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cw-pill-toggle.on {
    background: #eef2ff; border-color: #6366f1; color: #4338ca;
}
.cw-pill-toggle.on .material-icons { color: #4338ca; }

/* Compact-mode adjustments on tighter viewports. */
@media (max-width: 720px) {
    .cw-hero { padding: 14px 16px; border-radius: 12px; }
    .cw-hero-title { font-size: 19px; }
    .cw-hero-icon { width: 44px; height: 44px; border-radius: 11px; }
    .cw-hero-icon .material-icons { font-size: 22px; }
    .cw-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .cw-kpi-v { font-size: 18px; }
}

/* Phones: stack the hero so the title gets the full width (otherwise the
   New/action buttons squeeze it into one word per line) and the actions drop
   onto their own row below. */
@media (max-width: 600px) {
    .cw-hero { flex-wrap: wrap; align-items: center; row-gap: 12px; }
    .cw-hero-text { flex: 1 1 0; min-width: 0; }
    .cw-hero-title { font-size: 18px; line-height: 1.2; }
    .cw-hero-sub { font-size: 12.5px; }
    /* Full-width second row, left-aligned, natural-size controls. */
    .cw-hero-actions {
        order: 3; flex: 1 1 100%;
        justify-content: flex-start; gap: 10px;
        padding-top: 12px; margin-top: 2px;
        border-top: 1px solid rgba(15,23,42,0.06);
    }
    .cw-hero-actions .mud-button-root { flex: 0 0 auto; }

    /* Party picker + "+ New" button share a flex row on desktop; on phones the
       button squeezed the field so long party names truncated ("RENEN…").
       Stack them so the party field spans the full width. */
    .cw-party-row { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
    .cw-party-row > .mud-button-root { align-self: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════
   KPI icon-card overrides — polished cards with a per-variant
   Material Icons icon rendered via ::before, without touching the
   original page header (which stays flat-row + blue icon badge).

   Markup contract (unchanged from before):
       <div class="cw-kpi-row">
         <div class="cw-kpi-tile cw-kpi-info">
           <span class="cw-kpi-num">10,591</span>
           <span class="cw-kpi-label">Loaded in view</span>
         </div>
         ... 3 more tiles ...
       </div>

   Per-variant mapping:
       Variant          Icon              Tint
       cw-kpi-info      database          Indigo  (#4338ca)
       cw-kpi-emerald   check_circle      Emerald (#047857)
       cw-kpi-red       block             Rose    (#be123c)
       cw-kpi-amber     account_tree      Amber   (#b45309)
       (none/default)   insights          Indigo  (#4338ca)

   The icon uses the Material Icons font ligature feature (e.g. the
   string "database" renders as the database glyph) — so we don't
   need to alter the existing two-span markup on any master page.
   ═══════════════════════════════════════════════════════════════ */

.cw-kpi-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 16px 0 !important;
    /* Strip any "single connected card" framing — each tile is its
       own card again. */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.cw-kpi-tile {
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    min-width: 0 !important;
    position: relative !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease !important;
}
.cw-kpi-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06) !important;
    border-color: #cbd5e1 !important;
}
/* The icon square sits in column 1, spanning both rows of the grid.
   Material Icons font + ligature renders the glyph from the content
   string. Default icon is "insights"; per-variant overrides below. */
.cw-kpi-tile::before {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: #eef2ff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Material Icons';
    font-size: 22px;
    line-height: 1;
    color: #4338ca;
    content: "insights";
    /* Prevent the glyph from inheriting any text transforms from
       the surrounding theme (e.g. uppercase on labels). */
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: normal !important;
}
.cw-kpi-tile .cw-kpi-num {
    grid-column: 2;
    grid-row: 1;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0b1f3a !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
}
.cw-kpi-tile .cw-kpi-label {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap;
    letter-spacing: 0.01em;
    text-transform: none !important;
}

/* Per-variant icon + tint. Card frame stays neutral white — only the
   icon square shifts colour so a row of four tiles never gets noisy. */
.cw-kpi-tile.cw-kpi-info::before    { content: "database";     background: #eef2ff; color: #4338ca; }
.cw-kpi-tile.cw-kpi-emerald::before { content: "check_circle"; background: #ecfdf5; color: #047857; }
.cw-kpi-tile.cw-kpi-red::before     { content: "block";        background: #fff1f2; color: #be123c; }
.cw-kpi-tile.cw-kpi-amber::before   { content: "account_tree"; background: #fffbeb; color: #b45309; }

/* Override the old pastel backgrounds + variant-coloured numbers from
   the original styling — the unified white card + dark navy number
   reads cleaner now that the icon carries the colour. */
.cw-kpi-tile.cw-kpi-info,
.cw-kpi-tile.cw-kpi-emerald,
.cw-kpi-tile.cw-kpi-red,
.cw-kpi-tile.cw-kpi-amber {
    background: #ffffff !important;
    border-color: #e6eaf1 !important;
}
.cw-kpi-tile.cw-kpi-info    .cw-kpi-num,
.cw-kpi-tile.cw-kpi-emerald .cw-kpi-num,
.cw-kpi-tile.cw-kpi-red     .cw-kpi-num,
.cw-kpi-tile.cw-kpi-amber   .cw-kpi-num { color: #0b1f3a !important; }

@media (max-width: 720px) {
    .cw-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
    .cw-kpi-tile .cw-kpi-num { font-size: 18px !important; }
}
@media (max-width: 480px) {
    .cw-kpi-row { grid-template-columns: 1fr !important; }
}

/* ── Notification bell (topbar) ─────────────────────────────────────── */
.sb-bell-activator {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    color: #475569; transition: background .15s ease, color .15s ease;
}
.sb-bell-activator:hover { background: #f1f5f9; color: #1976d2; }
.sb-bell-icon { font-size: 22px; }

.cw-notif-pop { margin-top: 6px; }
.cw-notif-panel { width: 360px; max-width: 92vw; }
.cw-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 10px; font-size: 14px;
}
.cw-notif-link {
    background: none; border: 0; color: #1976d2; cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 2px 4px;
}
.cw-notif-link:hover { text-decoration: underline; }
.cw-notif-empty { padding: 28px 14px; text-align: center; color: #94a3b8; font-size: 13px; }
.cw-notif-list { max-height: 380px; overflow-y: auto; }
.cw-notif-row {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9;
    transition: background .12s ease;
}
.cw-notif-row:hover { background: #f8fafc; }
.cw-notif-row.unread { background: #eff6ff; }
.cw-notif-row.unread:hover { background: #e0edff; }
.cw-notif-ico { font-size: 20px; margin-top: 1px; }
.cw-notif-body { flex: 1; min-width: 0; }
.cw-notif-title { font-size: 13px; font-weight: 600; color: #0f172a; }
.cw-notif-msg {
    font-size: 12px; color: #475569; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cw-notif-time { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.cw-notif-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #1976d2;
    margin-top: 6px; flex: 0 0 auto;
}
.cw-notif-foot { padding: 8px 14px; text-align: center; }

/* Print-designer barcode/QR preview — force the QR SVG to fill its box. */
.cw-qr-fill svg { width: 100%; height: 100%; display: block; }

/* "Back to Admin Panel" button on the purple impersonation banner — a clean
   white pill that reads clearly on the purple, used in MainLayout / AdminLayout
   / PortalLayout so it looks identical everywhere. */
.cw-back-admin-btn.mud-button-root {
    background: #ffffff !important;
    color: #6d28d9 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .2px;
    text-transform: none !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    box-shadow: 0 2px 8px rgba(12,8,40,0.28) !important;
    transition: background-color .15s, box-shadow .15s, transform .05s;
}
.cw-back-admin-btn.mud-button-root:hover {
    background: #f5edff !important;
    box-shadow: 0 4px 14px rgba(12,8,40,0.38) !important;
}
.cw-back-admin-btn.mud-button-root:active { transform: translateY(1px); }
.cw-back-admin-btn .mud-icon-root,
.cw-back-admin-btn .material-icons { color: #6d28d9 !important; }

/* ═════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — general pass (2026-07-09)
   Additive, small-screen-only rules that close the common remaining gaps
   on top of the existing responsive base (off-canvas shell, .cw-card table
   scroll, MudGrid xs reflow, page-header stacking). Desktop is untouched
   because everything here is inside max-width media queries. Per-screen
   tweaks are layered ABOVE this from screenshots.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Every data table scrolls sideways WITHIN its own box instead of forcing
       the whole page wider — extends the .cw-card rule to report/list/master
       tables that sit outside a .cw-card (Booking Register etc. already do this
       via their own wrapper; this catches the rest). */
    .mud-table-container,
    .cw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Filter / action / toolbar rows wrap rather than overflow. (No-ops when a
       page doesn't use these classes.) */
    .cw-toolbar, .cw-filter-bar, .cw-actions-row { flex-wrap: wrap; }

    /* Report/list pages: let their action bars wrap and buttons breathe. */
    .cw-ph-actions > .mud-button-root { flex: 0 1 auto; }
}

@media (max-width: 600px) {
    /* All form pages built on CwFormShell / .cw-form-wrap (transaction forms —
       Booking/Challan/Bill/Freight Memo/Delivery Challan/DMR/Pickup — AND every
       master edit form) collapse to a SINGLE column across the whole phone-width
       range, so each field gets full width instead of a cramped 2-up. 600px is
       MudBlazor's xs/sm boundary, so this cleanly covers portrait phones. */
    .cw-form-wrap .mud-grid > .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Reclaim a little width on small phones. */
    .cw-card { padding: 12px !important; }
    .cw-form-wrap { padding-left: 0; padding-right: 0; }
}

.cw-notif-push { padding: 8px 12px; }
.cw-push-toggle { display: flex; flex-direction: column; gap: 2px; }

/* POD upload pick buttons (Choose file / Take photo) — label wraps a hidden InputFile. */
.cw-pod-pick { display:inline-flex; align-items:center; cursor:pointer; padding:8px 14px;
    border:1px solid #cbd5e1; border-radius:8px; font-size:13px; font-weight:600; color:#334155;
    background:#f8fafc; transition:background .15s, border-color .15s; }
.cw-pod-pick:hover { background:#eef2ff; border-color:#6366f1; color:#4338ca; }
.cw-pod-pick-cam { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.cw-pod-pick-cam:hover { background:#dbeafe; border-color:#2563eb; }

/* Topbar icon button (scan) — matches the notification bell activator. */
.sb-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:10px; color:#475569; cursor:pointer; text-decoration:none; transition:background .15s, color .15s; }
.sb-icon-btn:hover { background:#f1f5f9; color:#1976d2; }
.sb-icon-btn .material-icons { font-size:22px; }

/* Scan page — animated focus frame over the camera preview. */
.cw-scan-frame { position:absolute; inset:14%; border:3px solid rgba(37,99,235,0.9); border-radius:14px;
    box-shadow:0 0 0 100vmax rgba(0,0,0,0.25); animation:cw-scan-pulse 1.4s ease-in-out infinite; pointer-events:none; }
@keyframes cw-scan-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* Offline / queued-upload bar (global, below the topbar). */
.cw-offline-bar { display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:13px;
    font-weight:600; position:sticky; top:0; z-index:60; }
.cw-offline-bar .material-icons { font-size:19px; }
.cw-offline-bar-off { background:#fef3c7; color:#92400e; box-shadow:0 1px 4px rgba(146,64,14,0.15); }
.cw-offline-bar-pending { background:#e0f2fe; color:#075985; box-shadow:0 1px 4px rgba(7,89,133,0.12); }
.cw-offline-sync { margin-left:auto; background:#0284c7; color:#fff; border:none; border-radius:6px;
    padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.cw-offline-sync:disabled { opacity:.6; cursor:default; }

/* ══════════════════════════════════════════════════════════════════════════
   NATIVE MOBILE SHELL — bottom tab bar + touch polish + safe areas.
   Purely additive: everything here is gated to ≤768px, so the desktop
   sidebar layout above that breakpoint is completely untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* The bar itself is hidden by default (desktop) and revealed only on phones/
   tablets in the media query below. */
.cw-bottomnav { display: none; }

@media (max-width: 768px) {
    .cw-bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #ffffff;
        border-top: 0.5px solid #e6eaf1;
        box-shadow: 0 -2px 12px rgba(11,31,58,0.06);
        align-items: stretch; justify-content: space-around;
    }
    .cw-bn-item {
        flex: 1 1 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 2px;
        background: none; border: none; cursor: pointer;
        text-decoration: none; color: #8a94a6;
        font-size: 10px; font-weight: 600; padding: 6px 0 4px;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s;
    }
    .cw-bn-item .material-icons { font-size: 23px; }
    .cw-bn-item.active { color: #0b1f3a; }
    .cw-bn-label { line-height: 1; }

    /* Centre "Scan" — raised circular FAB that overhangs the bar top edge. */
    .cw-bn-fab-wrap { color: #8a94a6; }
    .cw-bn-fab {
        display: flex; align-items: center; justify-content: center;
        width: 50px; height: 50px; border-radius: 50%;
        background: #0b1f3a; color: #fff;
        margin-top: -24px; margin-bottom: 1px;
        border: 3px solid #fff;
        box-shadow: 0 4px 12px rgba(11,31,58,0.35);
    }
    .cw-bn-fab .material-icons { font-size: 26px; color: #fff; }
    .cw-bn-item:active .cw-bn-fab { transform: scale(0.94); }

    /* Give page content room so the fixed bar never covers the last rows /
       action buttons. Extra 58px bar + a little breathing space + safe area. */
    .sb-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Keep the top-bar clear of the notch on standalone/PWA. */
    .sb-topbar { padding-top: env(safe-area-inset-top, 0px); }

    /* The top-bar scan icon is redundant with the bottom FAB on phones. */
    .sb-topbar .sb-icon-btn[href="scan"] { display: none; }
}

/* Touch polish — global, harmless on desktop. Removes the grey tap-flash on
   buttons/links and stops the whole page rubber-banding on iOS while inner
   scroll areas still scroll normally. */
button, a, .mud-button-root, .sb-nav-item, .cw-bn-item {
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
    html, body { overscroll-behavior-y: contain; }
}

/* ── Responsive show/hide + native card lists ──────────────────────────────
   List pages keep their MudDataGrid on desktop (.cw-hide-mobile) and render a
   tappable card list on phones (.cw-only-mobile). One card = one record. */
.cw-only-mobile { display: none; }
@media (max-width: 768px) {
    .cw-hide-mobile { display: none !important; }
    .cw-only-mobile { display: block; }
}

.cw-mcard-list { display: flex; flex-direction: column; gap: 10px; }
.cw-mcard {
    background: #fff; border: 0.5px solid #e6eaf1; border-radius: 12px;
    padding: 12px 14px; box-shadow: 0 1px 3px rgba(11,31,58,0.04);
    -webkit-tap-highlight-color: transparent;
}
.cw-mcard:active { background: #f8fafc; }
.cw-mcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cw-mcard-title { font-weight: 700; font-size: 14px; color: #0b1f3a; letter-spacing: -0.01em; }
.cw-mcard-date { font-size: 11.5px; color: #8a94a6; font-weight: 600; }
.cw-mcard-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #5b6679; margin-top: 5px; }
.cw-mcard-row .material-icons { font-size: 16px; color: #9aa4b5; flex: none; }
.cw-mcard-row .cw-mcard-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*  A text label standing in the ICON slot of a card row. Every other .cw-mcard-row leads
    with a material icon; the POD row leads with the word "POD" instead, because there is
    no icon that reads as "has the paper come back". It carried no rule at all, so it came
    out at row size in row colour and looked like part of the value beside it rather than
    the quiet marker the icons are. flex:none keeps it out of the ellipsis fight, and the
    min-width holds the chip on the same left edge the icon-led rows start their text on. */
.cw-mcard-row .cw-mcard-lbl {
    flex: none; min-width: 16px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: #9aa4b5;
}
.cw-mcard-foot {
    display: flex; justify-content: space-between; align-items: center;
    /*  WRAPS. The footer was a no-wrap row, which was fine while it held a pill and an
        amount - the bill card puts a status pill, a part-paid note, the amount AND two
        action buttons in it, and on a 346px card they compressed into each other: the
        pill broke across two lines inside itself and the four items sat at four
        different heights. Wrapping only changes what already did not fit. */
    flex-wrap: wrap; gap: 6px 8px;
    margin-top: 10px; padding-top: 9px; border-top: 0.5px solid #eef1f6;
}
/*  A pill is a label, not a paragraph - it keeps its own line. */
.cw-mcard-foot .cw-pill { white-space: nowrap; }
/*  The part-paid note takes the whole of a second line, and reads at footer size. It
    carried NO style at all, so it rendered at inherited body size beside 11-13px
    siblings and took two lines of the row it was squeezed into. */
.cw-mcard-part {
    order: 1; flex: 1 0 100%;
    font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums;
}
.cw-mcard-amt { font-weight: 700; font-size: 13.5px; color: #0b1f3a; font-variant-numeric: tabular-nums; }
.cw-mcard-amt small { font-weight: 600; color: #8a94a6; font-size: 10.5px; margin-right: 3px; }
.cw-mcard-actions { display: flex; align-items: center; gap: 0; margin-left: auto; }
.cw-mcard-empty { text-align: center; color: #8a94a6; padding: 32px 12px; font-size: 13px; }

/* Grand-total summary bar — sticks just above the bottom nav while the card
   list scrolls. Right padding keeps the Amount clear of the floating + FAB. */
.cw-mcard-total {
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    margin-top: 10px;
    background: #0b1f3a; color: #fff;
    border-radius: 12px;
    padding: 10px 64px 10px 14px;
    box-shadow: 0 6px 18px rgba(11,31,58,0.34);
}
.cw-mct-head {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #9fb4d6; margin-bottom: 7px;
}
.cw-mct-metrics { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; }
.cw-mct-metrics > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cw-mct-metrics span { font-size: 10.5px; color: #9fb4d6; white-space: nowrap; }
.cw-mct-metrics strong { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-mct-amt strong { color: #4ade80; }

/* Floating "create" action button — mobile only, sits above the bottom bar. */
.cw-fab { display: none; }
@media (max-width: 768px) {
    .cw-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; z-index: 1240;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        width: 52px; height: 52px; border-radius: 50%;
        background: #e11d48; color: #fff; border: none; cursor: pointer;
        box-shadow: 0 4px 14px rgba(225,29,72,0.42);
    }
    .cw-fab .material-icons { font-size: 27px; color: #fff; }
    .cw-fab:active { transform: scale(0.94); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3 — motion: page transitions, pull-to-refresh, skeleton loaders.
   All gated to phones (≤768px); desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page slide-in on route change. MainLayout re-triggers the animation via
   cargoUi.pageTransition() after each navigation renders. */
@media (max-width: 768px) {
    @keyframes cw-page-in {
        from { opacity: 0; transform: translateX(14px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    .sb-content.cw-page-in { animation: cw-page-in 0.24s cubic-bezier(0.22,0.61,0.36,1); }
}
/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .sb-content.cw-page-in { animation: none !important; }
    .cw-skel { animation: none !important; }
}

/* Pull-to-refresh spinner — a floating puck managed by mobileux.js. It's fixed
   to the top-centre and slides/rotates with the pull, then spins on release. */
.cw-ptr-spinner {
    position: fixed; top: 8px; left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 38px; height: 38px; border-radius: 50%;
    background: #ffffff; color: #0b1f3a;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(11,31,58,0.22);
    opacity: 0; z-index: 1260; pointer-events: none;
    transition: opacity 0.15s ease;
}
.cw-ptr-spinner .material-icons { font-size: 22px; }
.cw-ptr-spinner.spin .material-icons { animation: cw-ptr-rot 0.7s linear infinite; }
@keyframes cw-ptr-rot { to { transform: rotate(360deg); } }

/* Skeleton loaders — shimmering placeholder cards while a list loads. */
.cw-skel {
    background: linear-gradient(90deg, #eef1f6 25%, #e3e8f1 37%, #eef1f6 63%);
    background-size: 400% 100%;
    animation: cw-shimmer 1.3s ease infinite;
    border-radius: 6px; height: 12px;
}
.cw-skel-line { margin: 9px 0; }
.cw-skel-card { pointer-events: none; }
@keyframes cw-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   GENERIC GRID → CARDS — any MudDataGrid inside a .cw-card becomes a stacked
   label:value card list on phones (masters, admin, anywhere). Cell labels are
   copied from the header by mobileux.js (data-label). Search, sort state and
   the pager all keep working — only the visual layout changes. The bespoke
   transaction cards are unaffected: their grids carry .cw-hide-mobile (display
   :none ≤768px) so this never touches them.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cw-card table.mud-table-root { display: block; background: transparent; }
    .cw-card table.mud-table-root thead { display: none; }
    .cw-card table.mud-table-root tbody { display: block; }
    .cw-card .mud-table-container { overflow-x: visible !important; }

    .cw-card table.mud-table-root tbody tr.mud-table-row {
        display: block; background: #fff;
        border: 0.5px solid #e6eaf1; border-radius: 12px;
        padding: 4px 12px; margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(11,31,58,0.04);
    }
    .cw-card table.mud-table-root tbody tr.mud-table-row:active { background: #f8fafc; }

    .cw-card table.mud-table-root tbody td.mud-table-cell {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        white-space: normal !important; text-align: right !important;
        padding: 8px 0 !important; border: none !important;
        border-bottom: 0.5px solid #f1f4f9 !important;
        font-size: 13px; height: auto !important;
    }
    .cw-card table.mud-table-root tbody td.mud-table-cell:last-child { border-bottom: none !important; }

    /* Column name on the left, rendered from the copied header text. */
    .cw-card table.mud-table-root tbody td.mud-table-cell[data-label]::before {
        content: attr(data-label);
        font-weight: 600; color: #8a94a6; font-size: 12px;
        text-align: left; white-space: nowrap; flex: 0 0 auto;
    }
    /* Label-less cells (action/icon columns) put their controls on the right. */
    .cw-card table.mud-table-root tbody td.mud-table-cell:not([data-label]) { justify-content: flex-end; }

    /* Empty-state / no-records row shouldn't look like a data card. */
    .cw-card table.mud-table-root tbody tr.mud-table-row td[colspan] {
        justify-content: center; text-align: center !important; color: #8a94a6;
    }

    /* Keep the pager readable and unpadded on small screens. */
    .cw-card .mud-table-pagination { border: none; }
    .cw-card .mud-table-pagination-toolbar { flex-wrap: wrap; height: auto !important; padding: 6px 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE LR SEARCH — instead of hiding the global LR search on narrow screens,
   drop it onto its own full-width row under the top bar so phone/tablet users
   keep the quick lookup. Placed at end-of-file so it wins over the earlier
   `display:none` and the fixed 60px top-bar height. Overrides ONLY on ≤1100px.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .sb-topbar {
        flex-wrap: wrap !important;
        height: auto !important;
        row-gap: 8px;
        /* Keep the notch/status-bar inset on standalone PWA — a plain
           `padding: 10px 12px` shorthand here would wipe safe-area-inset-top. */
        padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 12px !important;
    }
    .sb-lr-search {
        display: flex !important;
        order: 10;                 /* pushed below the menu + chip + actions row */
        flex: 1 1 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SHELL — consolidated geometry + fixes (2026-07-10 audit).
   One source of truth for the bottom-nav stack so the bar, the raised Scan
   button (which peaks ABOVE the bar), the sticky total bar, the create-FAB and
   the content clearance all stay in sync. End-of-file so it wins the cascade.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --cw-bottomnav-h: 58px;          /* .cw-bottomnav height */
    --cw-fab-overhang: 24px;         /* .cw-bn-fab margin-top (Scan button rise) */
    --cw-safe-b: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 768px) {
    /* Clear the bar AND the raised Scan button so the last card / total bar is
       never covered (Scan peaks ~82px; old 72px pad left it clipped). */
    .sb-content {
        padding-bottom: calc(var(--cw-bottomnav-h) + var(--cw-fab-overhang) + 10px + var(--cw-safe-b)) !important;
    }
    /* Sticky grand-total bar sits just above the bar; wider right gap clears the
       floating create-FAB (was 64px vs a FAB reaching 68px → slight overlap). */
    .cw-mcard-total {
        bottom: calc(var(--cw-bottomnav-h) + 10px + var(--cw-safe-b));
        padding-right: 76px;
    }
    /* Create-FAB rides above the bar and the total bar. */
    .cw-fab {
        bottom: calc(var(--cw-bottomnav-h) + 20px + var(--cw-safe-b));
    }
    /* Forms: an un-scoped desktop rule (`.cw-form-card.mud-paper padding:28px 32px
       !important`) was forcing 32px side padding on phones, wasting width. Reclaim it. */
    .cw-form-card.mud-paper { padding: 16px 14px !important; }
    /* Filter bars stack their search + date pickers (the earlier rule targeted a
       misspelled `.cw-filter-bar` and silently no-opped). */
    .cw-filterbar { flex-wrap: wrap; }
    .cw-filterbar > * { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 600px) {
    .cw-form-card.mud-paper { padding: 14px 12px !important; }
}

/* ── Audit fixes (2026-07-10): toolbars, dialogs, raw report tables ──
   Global rules so ~30 pages are covered without per-file edits. */
@media (max-width: 768px) {
    /* Raw report tables (.cw-report-tbl) scroll horizontally instead of
       overflowing — or worse, being clipped inside an overflow:hidden parent.
       Making the table itself the scroll box needs no per-page wrapper. */
    .cw-report-tbl {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}
@media (max-width: 600px) {
    /* Master-list toolbars: search field + refresh icon were overflowing the
       row because the field carries an inline min-width:300px. Let the row wrap
       and the field shrink to fit. */
    .cw-toolbar, .cw-toolbar-flex, .cw-toolbar-left { flex-wrap: wrap; }
    .cw-toolbar-left { width: 100%; }
    .cw-toolbar-left > * { min-width: 0 !important; }

    /* Dialogs never force a body wider than the phone — several dialog bodies
       set an inline min-width of 360–420px (Compose/Email/WhatsApp/AssignDashboard). */
    .mud-dialog { max-width: 96vw !important; }
    .mud-dialog .mud-dialog-content > * { min-width: 0 !important; }
}

/* ── Unified voucher form (Voucher.razor) ─────────────────────────────── */
.cw-vtable { width: 100%; border-collapse: collapse; }
.cw-vtable thead th {
    text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
    padding: .5rem .6rem; border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}
.cw-vtable tbody td { padding: .3rem .6rem; vertical-align: middle; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cw-vtable tbody tr:last-child td { border-bottom: 0; }
.cw-vtable tbody tr { transition: background .12s ease; }
.cw-vtable tbody tr:hover { background: var(--mud-palette-action-default-hover); }
.cw-vrow-dr { box-shadow: inset 3px 0 0 0 var(--mud-palette-success); }
.cw-vrow-cr { box-shadow: inset 3px 0 0 0 var(--mud-palette-error); }
.cw-vtable-empty { text-align: center; padding: 1.25rem; color: var(--mud-palette-text-secondary); font-size: .9rem; }

.cw-vtotals {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: .85rem 1.1rem;
    background: var(--mud-palette-surface); border-top: 2px solid var(--mud-palette-lines-default);
    border-radius: 0 0 12px 12px;
}
.cw-vtot { display: flex; flex-direction: column; min-width: 120px; }
.cw-vtot-l { font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.cw-vtot-v { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cw-vtot-dr .cw-vtot-v { color: var(--mud-palette-success); }
.cw-vtot-cr .cw-vtot-v { color: var(--mud-palette-error); }
.cw-vtot-ok .cw-vtot-v { color: var(--mud-palette-success); }
.cw-vtot-bad .cw-vtot-v { color: var(--mud-palette-error); }
.cw-vtot-bad { animation: cw-vtot-pulse 1.4s ease-in-out infinite; }
@keyframes cw-vtot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

@media (max-width: 640px) {
    .cw-vtot { min-width: 90px; }
    .cw-vtot-v { font-size: 1.05rem; }
}

/* ── Voucher / accounting report table (VoucherReport.razor) ───────────── */
.cw-rpt { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cw-rpt thead th {
    position: sticky; top: 0; z-index: 1; background: var(--mud-palette-surface);
    text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
    padding: .6rem .75rem; border-bottom: 2px solid var(--mud-palette-lines-default); white-space: nowrap;
}
.cw-rpt tbody td { padding: .5rem .75rem; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; }
.cw-rpt tbody tr:hover td { background: var(--mud-palette-action-default-hover); }
.cw-rpt .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-rpt .nowrap { white-space: nowrap; }
.cw-rpt .muted { color: var(--mud-palette-text-secondary); }
.cw-rpt-grp td {
    background: var(--mud-palette-background-grey); font-weight: 700; color: var(--mud-palette-primary);
    padding: .5rem .75rem; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.cw-rpt-sub td { border-top: 1px solid var(--mud-palette-lines-default); font-weight: 600; background: var(--mud-palette-surface); }
.cw-rpt-grand td { border-top: 2px solid var(--mud-palette-text-primary); font-weight: 800; font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Fleet owner dashboard (/fleet)

   Only what the dashboard needs that the shared vocabulary does not already
   have: the period bar, the donut + legend pairing, and the wide vehicle
   board. Everything else on that screen reuses cw-card / cw-kpi-* /
   cw-badge-* / cw-bar-* so it stays visually identical to the rest of Fleet.
   ══════════════════════════════════════════════════════════════════════════ */

.cw-fd-periodbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 10px 14px;
}
.cw-fd-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-fd-dates   { display: flex; gap: 12px; flex-wrap: wrap; }

/* Profit stated per month beneath the bars rather than drawn as a negative bar. */
.cw-fd-monthstrip {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 4px 14px 14px; border-top: 1px solid #f1f4f8; margin-top: 6px;
}
.cw-fd-monthchip { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cw-fd-monthchip-l { color: #64748b; font-weight: 600; }

/* Donut and its legend sit side by side; the legend carries the numbers,
   because reading a value off a doughnut is guesswork. */
.cw-fd-donutwrap {
    display: flex; align-items: center; gap: 18px;
    padding: 10px 14px 16px; flex-wrap: wrap;
}
.cw-fd-legend { display: flex; flex-direction: column; gap: 7px; min-width: 150px; flex: 1; }
.cw-fd-legend-row {
    display: grid; grid-template-columns: 12px 1fr auto;
    align-items: center; gap: 9px; font-size: 12.5px; color: #334155;
}
.cw-fd-legend-row b { color: #0f172a; }
.cw-fd-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* The board is deliberately wide — it is the complete picture of every lorry —
   so it scrolls inside its own box rather than pushing the page sideways. */
.cw-fd-boardscroll { overflow-x: auto; }
.cw-fd-board { min-width: 1180px; }
.cw-fd-board th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
    color: #64748b; font-weight: 700; white-space: nowrap;
}
.cw-fd-board td { font-size: 13px; vertical-align: top; }
.cw-fd-board .ta-r { text-align: right; }
.cw-fd-board .ta-c { text-align: center; }
.cw-fd-board th.ta-r { text-align: right; }
.cw-fd-board th.ta-c { text-align: center; }
.cw-fd-sub { font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.cw-fd-empty { text-align: center; color: #94a3b8; padding: 26px 0; }
.cw-fd-total td { border-top: 2px solid #cbd5e1; background: #f8fafc; }

/* A loss is a bar too — same scale, opposite colour. Without this a
   loss-making lorry draws an empty track and reads as "no data". */
.cw-bar-fill.cw-bar-fill-rose { background: linear-gradient(90deg, #dc2626, #ef4444); }

@media (max-width: 900px) {
    .cw-fd-periodbar { flex-direction: column; align-items: stretch; }
    .cw-fd-donutwrap { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESCUE — must stay LAST in this file

   A @media block adds NO specificity. So a plain global rule written further
   down the file beats a mobile rule written further up, on phones:

       @media (max-width: 600px) { .sb-content { padding: 10px } }   L936
       .sb-content { padding: 22px 28px }                            L1093  <- wins

   Seventeen declarations were being lost that way. The visible result was an
   app that had a mobile shell (off-canvas drawer, bottom tab bar) but desktop
   metrics inside it: 56px of horizontal padding on a 375px screen, quick-action
   tiles still four-across, table cells still at desk spacing, and a 1.55rem
   page title. It looked like a shrunken desktop, which is exactly the report.

   The structural fix is to move every max-width block to the end of the file.
   That is a large reorder of a 3,800-line stylesheet carrying years of layered
   overrides, and it would be hard to review. This block restores the intended
   values instead, and MobileCssCascadeTests fails the build if a new one appears.

   !important is used ONLY where the rule being beaten also used it — matching
   important at equal specificity means the later one (this) wins.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .cw-card .mud-table-head .mud-table-cell { padding: 10px 12px !important; }
}

@media (max-width: 960px) {
    .sb-content { padding: 14px; }
    .sb-greeting-title { font-size: 14px !important; }
}

@media (max-width: 768px) {
    .cw-ph-subtitle { font-size: 0.78rem; }
}

@media (max-width: 640px) {
    /* Four quick-action tiles side by side on a 375px screen is ~85px each. */
    .cw-quick { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .sb-content { padding: 10px; }
    .cw-card.mud-paper { border-radius: 10px !important; }
    .cw-form-card.mud-paper { border-radius: 10px !important; }
    .cw-card .mud-table-body .mud-table-cell {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}

@media (max-width: 380px) {
    .cw-ph-title { font-size: 0.98rem; }
    .sb-greeting-title { max-width: 110px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPLASH — shown by index.html while the WebAssembly runtime downloads.

   Plain CSS on plain markup: no Blazor has run at that point, so nothing here
   can depend on a component. Blazor replaces the whole #app node once it boots,
   so there is nothing to dismiss.

   The bar is driven by --blazor-load-percentage, which the runtime updates as
   it loads, so it reports real progress rather than animating for effect.

   Palette follows the sign-in design pack: light ground, navy type, blue accent.
   ══════════════════════════════════════════════════════════════════════════ */

.cw-splash {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 12vh 26px 34px;
    background: linear-gradient(180deg, #ffffff 0%, #F6F9FC 55%, #e9eef6 100%);
    font-family: Poppins, Inter, "Segoe UI", system-ui, sans-serif;
    text-align: center;
    animation: cw-splash-in .35s ease-out both;
}
@keyframes cw-splash-in { from { opacity: 0 } to { opacity: 1 } }

.cw-splash-brand { display: flex; flex-direction: column; align-items: center; }
.cw-splash-mark {
    width: 76px; height: 76px; border-radius: 20px; display: block;
    box-shadow: 0 12px 30px rgba(11, 29, 58, .16);
}
.cw-splash-word { margin-top: 14px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.cw-splash-word span:first-child { color: #0B1D3A; }
.cw-splash-word span:last-child  { color: #1565FF; }

.cw-splash-tag {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 7px;
    font-size: 8.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #64748B;
}
.cw-splash-tag i { width: 26px; height: 1px; background: #94A3B8; display: block; }

.cw-splash-head { margin-top: 30px; font-size: 21px; font-weight: 600; line-height: 1.42; color: #0B1D3A; }
.cw-splash-head b { color: #1565FF; font-weight: 700; }

.cw-splash-scene { width: 100%; max-width: 420px; margin-top: auto; }
.cw-splash-scene svg { width: 100%; height: auto; display: block; }

.cw-splash-foot { width: 100%; max-width: 260px; margin-top: 18px; }
.cw-splash-bar { height: 4px; border-radius: 3px; background: #dbe3ee; overflow: hidden; }
.cw-splash-bar i {
    display: block; height: 100%; border-radius: 3px;
    width: var(--blazor-load-percentage, 15%);
    background: linear-gradient(90deg, #1565FF, #00C6FF);
    transition: width .18s ease-out;
}
.cw-splash-note { margin-top: 11px; font-size: 12.5px; color: #64748B; }

@media (prefers-reduced-motion: reduce) {
    .cw-splash { animation: none; }
    .cw-splash-bar i { transition: none; }
}

/* Short screens: drop the scene rather than squash the wordmark. */
@media (max-height: 620px) {
    .cw-splash { padding-top: 7vh; }
    .cw-splash-scene { display: none; }
    .cw-splash-head { margin-top: 22px; font-size: 19px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   SIGNED-OUT SCREENS — /login and /select-tenant
   Built to the approved sign-in design pack.

   LIGHT BRAND HALF ON THE LEFT (AuthBrandPanel.razor), DARK FORM HALF ON THE
   RIGHT. That is the reverse of what was here before, so every rule below is a
   rewrite rather than an override — the previous block was removed rather than
   layered on, because a second set of colours fighting the first is how a
   stylesheet becomes unmaintainable.

   The form sits on navy now, which changes more than the background: labels,
   input fills, borders, placeholder and helper text all have to be re-picked
   for a dark ground. MudBlazor's outlined field assumes a light one, so a
   handful of its internals are overridden here.

   Palette is the pack's, verbatim.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --cw-navy:      #0B1D3A;   /* deep navy   */
    --cw-navy-2:    #112A55;   /* dark blue   */
    --cw-blue:      #1565FF;   /* primary     */
    --cw-cyan:      #00C6FF;   /* accent      */
    --cw-lightblue: #F6F9FC;   /* light panel */
    --cw-muted:     #64748B;   /* body text   */
    --cw-border:    #94A3B8;   /* borders     */
    --cw-success:   #22C55E;

    --cw-auth-font: Poppins, Inter, "Segoe UI", system-ui, sans-serif;
}

.cw-login-page {
    position: fixed; inset: 0; overflow: auto;
    background: #e9eef6;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 12px; padding: 20px;
    font-family: var(--cw-auth-font);
}

.cw-login-card {
    width: 100%; max-width: 1400px;
    height: min(90vh, 900px); min-height: 580px;
    display: grid; grid-template-columns: 53% 47%;
    border-radius: 22px; overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(11, 29, 58, .18), 0 2px 8px rgba(11, 29, 58, .06);
}

.cw-login-foot { display: none; }   /* the copyright lives inside the dark half now */

/* ══ LEFT — light brand half ══ */
.cw-lb {
    position: relative; overflow: hidden;
    background: var(--cw-lightblue);
    display: flex; flex-direction: column;
    padding: 34px 38px 22px;
}
/* Soft corner sweep, as in the pack. */
.cw-lb-wash {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(58% 42% at 0% 0%, rgba(21, 101, 255, .10) 0%, rgba(246, 249, 252, 0) 62%),
        radial-gradient(46% 40% at 100% 100%, rgba(0, 198, 255, .09) 0%, rgba(246, 249, 252, 0) 66%);
}
/* The wash and the artwork slot are both absolutely positioned overlays. They must be
   excluded here — this rule would otherwise force them back to `relative`, turning the
   empty artwork slot into a flex item 42% of the panel tall and squeezing the drawn
   scene to zero height. */
.cw-lb > *:not(.cw-lb-wash):not(.cw-lb-photo) { position: relative; z-index: 1; }

.cw-lb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

.cw-lb-lockup { display: flex; align-items: center; gap: 13px; }
.cw-lb-mark {
    width: 56px; height: 56px; border-radius: 15px; display: block; flex: 0 0 auto;
    box-shadow: 0 8px 20px rgba(11, 29, 58, .13);
}
.cw-lb-word { font-size: 31px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.cw-lb-w1 { color: var(--cw-navy); }
.cw-lb-w2 { color: var(--cw-blue); }
.cw-lb-tagline {
    display: flex; align-items: center; gap: 8px; margin-top: 4px;
    font-size: 8.5px; font-weight: 500; letter-spacing: .17em;
    text-transform: uppercase; color: var(--cw-muted);
}
.cw-lb-rule { width: 22px; height: 1px; background: var(--cw-border); display: block; }

/* The handwritten note. Caveat at a slight rotation, with its own underline. */
.cw-lb-script {
    position: relative; flex: 0 0 auto; text-align: center;
    font-family: Caveat, cursive; font-size: 25px; font-weight: 700; line-height: 1.02;
    color: var(--cw-navy); transform: rotate(-6deg); padding: 2px 6px 12px;
}
.cw-lb-swoosh { position: absolute; left: 2px; right: 0; bottom: 0; width: 100%; height: 10px; color: var(--cw-blue); }

.cw-lb-head {
    margin: 26px 0 0; font-size: 33px; font-weight: 700; line-height: 1.22;
    color: var(--cw-navy); letter-spacing: -.02em; text-wrap: balance;
}
.cw-lb-accent { color: var(--cw-blue); }
.cw-lb-sub { margin: 10px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--cw-muted); }

/* Rendered-illustration slot. Empty by default so nothing 404s; drop an image in
   wwwroot/images/ and uncomment to use it instead of the drawn scene. */
.cw-lb-photo {
    position: absolute; left: 0; right: 0; top: 40%; height: 42%;
    /* background-image: url("../images/login-scene.png"); */
    background-size: contain; background-position: center; background-repeat: no-repeat;
    pointer-events: none; z-index: 2;
}

.cw-lb-scene { flex: 1; min-height: 0; display: flex; align-items: center; margin: 4px 0; }
.cw-lb-scene svg { width: 100%; height: 100%; display: block; }

/* four capability cards */
.cw-lb-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cw-lb-card {
    background: #fff; border: 1px solid #e6ecf5; border-radius: 13px;
    padding: 13px 12px 14px; text-align: center;
    box-shadow: 0 2px 8px rgba(11, 29, 58, .05);
}
.cw-lb-card .mud-icon-root { font-size: 22px; color: var(--cw-blue); }
.cw-lb-card-t { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--cw-navy); line-height: 1.25; }
.cw-lb-card-p { margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--cw-muted); }

.cw-lb-trust {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #e3eaf3;
    font-size: 12px; color: var(--cw-muted);
}
.cw-lb-trust-main { position: relative; padding-left: 11px; font-weight: 500; color: #46586f; }
.cw-lb-trust-main::before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
    width: 3px; border-radius: 2px; background: var(--cw-blue);
}
.cw-lb-trust-sep { width: 1px; height: 14px; background: #d6dfea; }
.cw-lb-trust-pills { display: flex; align-items: center; gap: 9px; }
.cw-lb-trust-pills b { font-weight: 500; }
.cw-lb-trust-pills i { width: 4px; height: 4px; border-radius: 50%; background: var(--cw-blue); display: block; }

/* ══ RIGHT — dark form half ══ */
.cw-lf {
    position: relative; overflow: hidden auto;
    background: linear-gradient(160deg, #0e2450 0%, var(--cw-navy) 52%, #08152c 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 30px 52px 74px;

    /* An OPAQUE stand-in for a field's ground. The fields are rgba(255,255,255,.05) over the
       gradient above, which is fine until something needs a solid colour — Chrome's autofill
       override below can only be masked with an opaque inset shadow, as a translucent one
       would let the browser's tint through. Sampled where the fields actually sit (~35% down,
       so between the first two stops) and composited with the 5% white: rgb(24,42,75).
       The panel shifts only ~4/255 in blue across the four fields' span, so one value serves
       all of them without a visible seam. Keep it in step with the gradient and the .05 above. */
    --cw-lf-field-solid: #182A4B;
}
/* Wave shapes along the foot, as in the pack.
   bottom:0, NOT a negative offset — an absolutely positioned decoration hanging past the
   panel counts towards scrollHeight and gives the form a scrollbar it does not need. A
   -6% bleed on an 720px panel put exactly 43px below the fold and did precisely that. */
.cw-lf::after {
    content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 46%;
    pointer-events: none; opacity: .5;
    background:
        radial-gradient(60% 100% at 20% 100%, rgba(21, 101, 255, .30) 0%, transparent 62%),
        radial-gradient(52% 100% at 78% 100%, rgba(0, 198, 255, .16) 0%, transparent 62%);
}
.cw-lf-inner { width: 100%; max-width: 452px; position: relative; z-index: 1; }

/* eyebrow, pinned top-right */
.cw-lf-eyebrow {
    position: absolute; top: 26px; right: 34px; z-index: 2;
    display: flex; align-items: center; gap: 11px;
    font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(214, 229, 255, .68);
}
.cw-lf-eyebrow span { white-space: nowrap; }
.cw-lf-eyebrow s { width: 1px; height: 11px; background: rgba(214, 229, 255, .3); text-decoration: none; }
.cw-lf-eyebrow em { width: 42px; height: 2px; background: var(--cw-blue); border-radius: 2px; }

.cw-lf-mobilebrand { display: none; align-items: center; gap: 12px; margin-bottom: 24px; }
.cw-lf-mb-mark { width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: #fff; flex: 0 0 auto; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.cw-lf-mb-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-lf-mb-name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.cw-lf-mb-name span:first-child { color: #fff; }
.cw-lf-mb-name span:last-child { color: #4d90ff; }
.cw-lf-mb-tag { font-size: 8.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(214,229,255,.55); margin-top: 2px; }

.cw-lf-h {
    margin: 0; font-size: 41px; font-weight: 700; color: #fff;
    letter-spacing: -.025em; line-height: 1.08;
}
.cw-lf-p { margin: 9px 0 30px; font-size: 15px; color: rgba(214, 229, 255, .72); }
.cw-lf-p b, .cw-lf-p strong { color: #4d90ff; font-weight: 600; }

.cw-lf-label { display: block; font-size: 13.5px; font-weight: 500; color: #e8f0ff; margin-bottom: 8px; }
.cw-lf-labelrow { display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; }
.cw-lf-labelrow .cw-lf-label { margin-bottom: 8px; }
.cw-lf-forgot { font-size: 13px; font-weight: 500; color: #4d90ff; text-decoration: none; cursor: pointer; }
.cw-lf-forgot:hover { color: #7fb0ff; text-decoration: underline; }
.cw-lf-req { color: #ff8a8a; font-weight: 600; }

/* "Open this company by default" - sits under the company picker on the dark signed-out card,
   so it needs the panel's own light-on-dark treatment rather than MudBlazor's default text
   button colour, which is unreadable there. Pulled up tight under the field it belongs to. */
.cw-lf-pin { margin: -2px 0 2px; }
.cw-lf-pin-btn {
    text-transform: none; font-size: 12.5px; font-weight: 500;
    color: #9fc0ff; padding: 2px 6px; min-width: 0;
}
.cw-lf-pin-btn:hover { background: rgba(159, 192, 255, .10); }

/* THE FIELD BOX IS DRAWN ON .mud-input — THE FIELDSET IS REMOVED.
   ─────────────────────────────────────────────────────────────────────────────
   MudBlazor paints an outlined field with a decorative <div class="mud-input-outlined-border">
   sitting behind the input. For the light app this stylesheet fills that element from five
   different rules, all !important:

       .mud-input-outlined .mud-input-outlined-border            { background: var(--cs-input-bg) !important }
       .mud-input-outlined.mud-focused .mud-input-outlined-border{ background: #ffffff !important }
       .mud-input-outlined:focus-within …                        { background: #ffffff !important }
       …plus two more for border-color

   On a navy panel every one of those paints a near-white box under near-white text, and
   overriding them one at a time turned into a specificity war that kept regressing: fix
   the resting state and focus breaks; fix focus and autofill breaks.

   So the element is taken out of the picture entirely. Nothing else in this stylesheet
   sets `display` on it (checked: 33 rules touch the fieldset, none set display), so a
   single declaration wins uncontested — and a rule cannot paint an element that is not
   rendered. The box then goes on .mud-input, which no light-app rule targets, so the
   dark styling has no competition at all.

   The fieldset was only ever decorative: pointer-events:none, z-index 0, no content. */
.cw-lf .cw-lf-input .mud-input-outlined-border { display: none !important; }

.cw-lf .cw-lf-input .mud-input.mud-input-outlined {
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(148, 163, 184, .38);
    border-radius: 11px;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.cw-lf .cw-lf-input .mud-input.mud-input-outlined:hover {
    border-color: rgba(148, 163, 184, .58);
}
/* The focused state MUST carry !important, and here is why it is not optional.
   The app-wide focus highlight near the top of this file paints every focused field
   pale blue:

       .mud-input-control:focus-within .mud-input { background-color: #dbeafe !important }

   That is right for the light data-entry screens and wrong here. Specificity does not
   settle it: !important outranks any number of classes, so without !important of our own
   the field turns pale blue on focus while the value text stays near-white (#eef4ff on
   #dbeafe is 1.06:1 — the text is simply gone). That is the "text in the textbox is not
   showing" report, and the same rule is what blanked the workspace picker's select. */
.cw-lf .cw-lf-input .mud-input.mud-input-outlined.mud-focused,
.cw-lf .cw-lf-input .mud-input.mud-input-outlined:focus-within {
    background-color: rgba(255, 255, 255, .085) !important;
    border-color: var(--cw-blue) !important;
    box-shadow: 0 0 0 3px rgba(21, 101, 255, .16) !important;
}

/* The value text stays light in every state.
   NOT `input.mud-input-slot`. MudBlazor puts the slot class on two different elements: a real
   <input> for MudTextField and MudAutocomplete, and a <div> for MudSelect, which is readonly
   and only ever displays the chosen item's text. Qualifying the selector with `input` therefore
   missed the Company select on the workspace picker — its value fell through to MudBlazor's
   default dark text and was all but unreadable on the navy panel, while the three
   autocompletes beside it were crisp white. Match the class on whatever element carries it. */
.cw-lf .cw-lf-input .mud-input-slot,
.cw-lf .cw-lf-input .mud-input.mud-focused .mud-input-slot,
.cw-lf .cw-lf-input .mud-input-slot:focus {
    color: #eef4ff !important;
    -webkit-text-fill-color: #eef4ff !important;
}

/* A GUARANTEED visible focus indicator, on the input itself.
   The blue border above is the nicer treatment, but it hangs off .mud-focused /
   :focus-within, which MudBlazor applies inconsistently. A plain :focus on the element
   that actually has focus always resolves, and a UA outline paints over everything —
   so keyboard users get a focus ring even if the prettier one does not fire. */
.cw-lf .cw-lf-input input.mud-input-slot:focus,
.cw-lf .cw-lf-input input.mud-input-slot:focus-visible {
    /* !important because MudBlazor clears the UA focus ring with `outline: none` on its
       input roots — without it this resolves to `outline-style: none` and draws nothing. */
    outline: 2px solid var(--cw-blue) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}
/* ─── Restored: form controls, security strip, forgot-password step and workspace
    picker. These were lost when an earlier edit truncated the stylesheet at the
    autofill marker; everything below it went with it. ─── */

/* --- Restored: form controls, security strip, forgot-password step and workspace picker.
    These were lost when an earlier edit truncated the stylesheet at the autofill
    marker; every rule below that point went with it. --- */
.cw-lf-remember { margin: 16px 0 2px; }
.cw-lf-remember .mud-typography { font-size: 14px; color: #dbe6f7; }
.cw-lf-remember .mud-checkbox .mud-icon-root { color: var(--cw-blue) !important; }
.cw-lf-remember .mud-button-root:hover { background: rgba(255,255,255,.06) !important; }

.cw-lf-alert { margin: 14px 0 2px; border-radius: 11px; }

/* Primary action. Three classes because theme.css sets
   .mud-button-filled.mud-button-filled-primary with a background SHORTHAND and
   !important — a shorter selector loses even when marked important, and the
   gradient silently never paints. */
.cw-lf .cw-lf-btn.mud-button-filled-primary {
    margin-top: 22px; height: 56px; border-radius: 12px;
    font-family: var(--cw-auth-font) !important;
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: .01em;
    text-transform: none !important; color: #fff !important;
    background-color: var(--cw-blue) !important;
    background-image: linear-gradient(90deg, var(--cw-blue) 0%, #2b7bff 55%, #3d8bff 100%) !important;
    box-shadow: 0 12px 26px rgba(21, 101, 255, .34) !important;
}
.cw-lf .cw-lf-btn.mud-button-filled-primary:hover {
    background-image: linear-gradient(90deg, #0f52d6 0%, #1f6bf0 55%, #2f7dff 100%) !important;
    box-shadow: 0 14px 30px rgba(21, 101, 255, .42) !important;
}
.cw-lf .cw-lf-btn.mud-button-filled-primary.mud-button-disabled,
.cw-lf .cw-lf-btn.mud-button-filled-primary:disabled {
    background-image: none !important;
    background-color: rgba(148, 163, 184, .28) !important;
    color: rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
}

/* Waiting while the person already signed in is asked to give the account up. Sits on the
   dark half of the sign-in page, so it lifts off the navy rather than painting its own ground. */
.cw-lf .cw-lf-wait {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 0 18px; padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 13.5px; line-height: 1.5;
    color: rgba(255, 255, 255, .86);
}

/* security reassurance strip */
.cw-lf-secure {
    display: flex; align-items: center; gap: 12px; margin-top: 30px;
    font-size: 12.5px; color: rgba(214, 229, 255, .82);
}
.cw-lf-secure hr { flex: 1; height: 1px; border: 0; background: rgba(148, 163, 184, .26); margin: 0; }
/* The signed-out screens use MudIcon (inline SVG) rather than the .material-icons webfont,
   so nothing on them depends on a font download — see AuthBrandPanel.razor for why.
   MudBlazor sizes its SVG icons with font-size (width/height are 1em) and fills them with
   currentColor, so both properties still work exactly as they did on the font glyphs.
   These selectors carry two classes and so outrank MudBlazor's own .mud-icon-size-medium. */
.cw-lf-secure .mud-icon-root { font-size: 17px; color: #4d90ff; }
.cw-lf-secure-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.cw-lf-secure-note {
    margin-top: 9px; text-align: center; font-size: 12.5px; line-height: 1.55;
    color: rgba(214, 229, 255, .55);
}

.cw-lf-2farow { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.cw-lf-2farow a { color: #4d90ff; text-decoration: none; cursor: pointer; }
.cw-lf-2farow a.muted { color: rgba(214, 229, 255, .55); }

.cw-lf-powered {
    margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, .2);
    display: flex; align-items: center; justify-content: center; gap: 9px;
    font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(214, 229, 255, .5);
}
.cw-lf-powered img { height: 15px; width: auto; display: block; background: #fff; padding: 2px 4px; border-radius: 3px; }

.cw-lf-panelfoot {
    position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12px; color: rgba(214, 229, 255, .45); text-align: center; padding: 0 24px;
}
.cw-lf-panelfoot .material-icons { font-size: 15px; }

/* forgot-password step */
.cw-lf-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0; margin-bottom: 18px;
    font-family: var(--cw-auth-font);
    font-size: 13.5px; font-weight: 500; color: rgba(214, 229, 255, .7); cursor: pointer;
}
.cw-lf-back:hover { color: #fff; }
.cw-lf-back .mud-icon-root { font-size: 19px; }

.cw-lf-safe {
    display: flex; gap: 13px; align-items: flex-start;
    margin-top: 24px; padding: 15px 16px;
    background: rgba(21, 101, 255, .10); border: 1px solid rgba(21, 101, 255, .26);
    border-radius: 13px;
}
.cw-lf-safe .mud-icon-root { color: #4d90ff; font-size: 22px; flex: 0 0 auto; }
.cw-lf-safe-t { font-size: 13.5px; font-weight: 600; color: #fff; }
.cw-lf-safe-p { font-size: 12.5px; line-height: 1.55; color: rgba(214, 229, 255, .72); margin-top: 3px; }
.cw-lf-safe-p b { color: #dbe6f7; font-weight: 600; }

.cw-lf-backlink { margin-top: 22px; text-align: center; font-size: 13.5px; color: rgba(214,229,255,.6); }
.cw-lf-backlink a { color: #4d90ff; font-weight: 500; text-decoration: none; cursor: pointer; }

/* workspace picker */
.cw-lf-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cw-lf-switch.mud-button-root {
    text-transform: none !important; font-weight: 500 !important; font-size: 13.5px !important;
    font-family: var(--cw-auth-font) !important;
    color: rgba(214, 229, 255, .78) !important; flex: 0 0 auto;
}
.cw-lf-switch.mud-button-root:hover { color: #fff !important; background: rgba(255,255,255,.07) !important; }

.cw-lf-steps {
    display: flex; align-items: center; gap: 12px; margin: 20px 0 24px; padding: 11px 14px;
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px;
}
.cw-lf-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.cw-lf-step-ic {
    width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600;
    color: #fff; flex: 0 0 auto;
}
.cw-lf-step.done .cw-lf-step-ic { background: var(--cw-success); }
.cw-lf-step.done .cw-lf-step-ic .mud-icon-root { font-size: 15px; }
.cw-lf-step.done .cw-lf-step-lbl { color: rgba(214, 229, 255, .78); }
.cw-lf-step.active .cw-lf-step-ic { background: var(--cw-blue); box-shadow: 0 0 0 3px rgba(21, 101, 255, .22); }
.cw-lf-step.active .cw-lf-step-lbl { color: #fff; }
.cw-lf-stepline { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cw-success), var(--cw-blue)); }
.cw-lf-pick { margin-bottom: 15px; }


/* ---------------------------------------------------------------------------
   OWNER OVERVIEW (/overview) - the third dashboard.

   Scoped entirely under .ov-page so it cannot reach the main dashboard (.cdash-*)
   or the fleet command centre (.cw-*), both of which stay exactly as they were.

   The band colours are load-bearing, not decoration: a red dot means "open
   position, ignores the period" and a blue dot means "activity in the window".
   That is the distinction users kept getting wrong, so it is in the layout.
   --------------------------------------------------------------------------- */
.ov-page { padding: 2px; }

.ov-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ov-h1 { font-size: 21px; font-weight: 750; color: #0f172a; margin: 0; letter-spacing: -.01em; }
.ov-sub { font-size: 13px; color: #64748b; margin: 2px 0 0; }
.ov-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ov-periodbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
                background: #fff; border: 1px solid #e7ecf3; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.ov-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ov-chip { font-size: 12px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0;
           color: #475569; cursor: pointer; transition: background .12s, color .12s; }
.ov-chip:hover:not(:disabled) { background: #f1f5f9; }
.ov-chip.on { background: #0f172a; color: #fff; border-color: #0f172a; font-weight: 600; }
.ov-chip:disabled { opacity: .55; cursor: default; }
.ov-dates { display: flex; gap: 10px; flex-wrap: wrap; }

.ov-band { display: flex; align-items: baseline; gap: 9px; margin: 20px 0 9px; }
.ov-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ov-dot-now { background: #dc2626; } .ov-dot-period { background: #2563eb; }
.ov-dot-cash { background: #0891b2; } .ov-dot-margin { background: #16a34a; }
.ov-dot-act { background: #7c3aed; }
.ov-band-name { font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: #0f172a; }
.ov-band-note { font-size: 11.5px; color: #94a3b8; }

.ov-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 4px; }
.ov-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ov-grid-2 { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
.ov-span2 { grid-column: span 2; }

.ov-card { background: #fff; border: 1px solid #e7ecf3; border-radius: 12px; padding: 12px 13px;
           box-shadow: 0 1px 2px rgba(15,23,42,.04); display: flex; flex-direction: column;
           text-align: left; font: inherit; color: inherit; }
.ov-card-go { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ov-card-go:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,.09); transform: translateY(-1px); }
.ov-card-go:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ov-card-red { border-left: 3px solid #dc2626; } .ov-card-amber { border-left: 3px solid #f59e0b; }
.ov-card-green { border-left: 3px solid #16a34a; } .ov-card-blue { border-left: 3px solid #2563eb; }

.ov-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .045em; color: #64748b;
          font-weight: 650; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ov-val { font-size: 20px; font-weight: 750; color: #0f172a; margin-top: 4px; letter-spacing: -.02em; }
.ov-foot { font-size: 10.5px; color: #94a3b8; margin-top: 4px; line-height: 1.45; }
.ov-dim { color: #94a3b8; font-weight: 500; }
.ov-empty { font-size: 12px; color: #94a3b8; padding: 10px 0 4px; }
.ov-warn { display: block; margin-top: 5px; color: #b45309; }

.ov-ftag { background: #dbeafe; color: #1d4ed8; font-size: 8.5px; padding: 1px 5px; border-radius: 4px;
           letter-spacing: .02em; text-transform: uppercase; font-weight: 700; }
.ov-tag { background: #f1f5f9; color: #475569; font-size: 8.5px; padding: 1px 5px; border-radius: 4px;
          letter-spacing: .02em; text-transform: uppercase; font-weight: 700; }

.ov-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
          padding: 6px 0; border-bottom: 1px dashed #eef2f7; }
.ov-row:last-of-type { border-bottom: 0; }
.ov-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-pos { color: #15803d; } .ov-neg { color: #b91c1c; } .ov-bad { color: #b45309; font-weight: 600; }

.ov-pipe { display: flex; gap: 3px; margin-top: 10px; }
.ov-seg { padding: 8px 9px; border-radius: 7px; display: flex; flex-direction: column; min-width: 0; }
.ov-seg b { font-size: 14px; font-weight: 750; }
.ov-seg span { font-size: 9.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-seg-a { background: #dbeafe; color: #1e3a8a; }
.ov-seg-b { background: #fef3c7; color: #92400e; }
.ov-seg-c { background: #f1f5f9; color: #334155; }

.ov-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.ov-pill { font-size: 12px; padding: 7px 12px; border-radius: 9px; border: 1px solid; text-decoration: none; }
.ov-pill b { font-size: 8.5px; background: #dbeafe; color: #1d4ed8; padding: 1px 5px;
             border-radius: 4px; margin-left: 5px; text-transform: uppercase; }
.ov-pill.red { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ov-pill.amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ov-pill.blue { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.ov-pill.green { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

@media (max-width: 1240px) {
    .ov-grid { grid-template-columns: repeat(3, 1fr); }
    .ov-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ov-span2 { grid-column: span 2; }
}
@media (max-width: 820px) {
    .ov-grid, .ov-grid-3, .ov-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .ov-span2 { grid-column: span 2; }
    .ov-periodbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
    .ov-grid, .ov-grid-3, .ov-grid-2 { grid-template-columns: 1fr; }
    .ov-span2 { grid-column: span 1; }
}
/* Payment-behaviour rows on the Owner Overview. The dot carries the verdict, so the
   eye lands on the band before it reads the name or the number. */
.ov-brow { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px dashed #eef2f7; }
.ov-brow:last-of-type { border-bottom: 0; }
.ov-bdot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.ov-bdot-broken { background: #dc2626; } .ov-bdot-drifting { background: #f59e0b; }
.ov-bdot-normal { background: #16a34a; } .ov-bdot-historic { background: #cbd5e1; }
.ov-bmain { flex: 1; min-width: 0; }
.ov-bname { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ov-bwhy { font-size: 10.5px; color: #94a3b8; margin-top: 1px; line-height: 1.4; }
.ov-brow b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; }

/* The historic panel: dashed and grey so it reads as a footnote, never an alert. */
.ov-card.ov-quiet { background: #fafbfc; border-style: dashed; margin-top: 10px; }
.ov-card.ov-quiet .ov-lab { color: #94a3b8; }
/* Committed-cost kind chips. Colour carries meaning: payroll and rent are the two that
   never stop, so they read heaviest. */
.cc-kind { display: inline-block; padding: 2px 9px; border-radius: 999px;
           font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.cc-salary        { background: #ede9fe; color: #5b21b6; }
.cc-rent          { background: #ffe4e6; color: #9f1239; }
.cc-insurance     { background: #dbeafe; color: #1e40af; }
.cc-loan_interest { background: #fef3c7; color: #92400e; }
.cc-other         { background: #e2e8f0; color: #334155; }

/* Cash-forecast bars. Ghost = best case, solid = expected: the gap between hope and
   plan is drawn rather than argued. Red overlay is committed money out. */
.ov-fc { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.ov-fcw { flex: 1; min-width: 0; text-align: center; }
.ov-fcbars { position: relative; height: 104px; display: flex; align-items: flex-end;
             justify-content: center; }
/* min-height: a week with a small but real figure must read as a small bar, not as a
   rendering fault. The current part-week sits at ~2% of the peak; without this it draws
   a 2px sliver that looks broken rather than quiet. */
.ov-fcghost, .ov-fcbar, .ov-fcout { position: absolute; bottom: 0; border-radius: 4px 4px 0 0;
                                    min-height: 3px; }
.ov-fcghost { width: 78%; background: #dbeafe; }
.ov-fcbar   { width: 78%; background: #2563eb; }
.ov-fcout   { width: 30%; right: 4%; background: #dc2626; opacity: .85; border-radius: 3px 3px 0 0; }
/* A week whose expected receipts do not cover its committed payments. Marked with a rule
   under the bar rather than by recolouring it: the blue bar still has to be readable
   against the ghost, and a second colour meaning on the same shape would muddle both. */
.ov-fcshort .ov-fcbars { border-bottom: 3px solid #dc2626; }
.ov-fcshort .ov-fcl    { color: #dc2626; font-weight: 700; }

.ov-fcv { font-size: 10.5px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.ov-fcl { font-size: 9.5px; color: #94a3b8; }
/* BROWSER AUTOFILL — MASK THE PALE TINT, KEEP THE FIELD DARK.
   ─────────────────────────────────────────────────────────────────────────────
   Chrome and Edge tint a field they can fill, and that tint is painted by the browser
   on the input itself. The usual counter is a huge inset box-shadow plus a very long
   transition delay. Both are here — but they are NOT relied on.

   An earlier version of this block CONCEDED the pale tint and used dark navy text, on the
   theory that the override might lose and light text would then be invisible. That theory
   was wrong, and the result looked wrong: only the <input> is tinted, not the wrapper or
   the start adornment, so an autofilled username rendered as a white pill floating inside
   a dark field while the password beside it stayed dark. "Why is the username looking like
   this" is the entirely reasonable reaction.

   The override cannot lose. Chrome's tint is a BACKGROUND, and CSS paints an inset
   box-shadow above the background and below the content, so a 1000px inset shadow covers
   whatever the browser painted there. (Only `background`/`background-color` genuinely lose
   to the UA sheet, which is the whole reason the shadow trick exists.) So the shadow is the
   real mechanism and it is safe to rely on: the ground stays dark and the text stays light,
   and an autofilled field is indistinguishable from one that was typed into.

   The long `transition` delay is the companion trick — it stalls Chrome's animated fade to
   the tint, so nothing flashes pale on the way in.

   #eef4ff on --cw-lf-field-solid measures 12.5:1. */
.cw-lf .cw-lf-input input:-webkit-autofill {
    -webkit-text-fill-color: #eef4ff !important;
    caret-color: #eef4ff !important;
    -webkit-box-shadow: 0 0 0 1000px var(--cw-lf-field-solid) inset !important;
            box-shadow: 0 0 0 1000px var(--cw-lf-field-solid) inset !important;
    transition: background-color 600000s 0s, color 600000s 0s !important;
}
.cw-lf .cw-lf-input input:-webkit-autofill:hover,
.cw-lf .cw-lf-input input:-webkit-autofill:focus,
.cw-lf .cw-lf-input input:-webkit-autofill:active {
    -webkit-text-fill-color: #eef4ff !important;
    -webkit-box-shadow: 0 0 0 1000px var(--cw-lf-field-solid) inset !important;
            box-shadow: 0 0 0 1000px var(--cw-lf-field-solid) inset !important;
}
/* Chrome's "suggestion showing" state — the wash drawn while the saved-info dropdown is
   open, before anything is chosen. Non-standard, so it gets its own rule: an unrecognised
   selector invalidates only the list it sits in. */
.cw-lf .cw-lf-input input:-internal-autofill-selected {
    -webkit-text-fill-color: #eef4ff !important;
    background-color: var(--cw-lf-field-solid) !important;
}
/* ══ responsive ══ */
@media (max-width: 1240px) {
    .cw-login-card { grid-template-columns: 50% 50%; }
    .cw-lb { padding: 26px 26px 18px; }
    .cw-lb-word { font-size: 26px; }
    .cw-lb-head { font-size: 27px; margin-top: 20px; }
    .cw-lb-script { font-size: 20px; }
    .cw-lb-cards { grid-template-columns: repeat(2, 1fr); }
    .cw-lf { padding: 26px 34px 70px; }
    .cw-lf-h { font-size: 34px; }
}

/* Below this the illustration half stops earning its width: the form takes the
   whole card and the identity moves to a compact lockup above the heading. */
@media (max-width: 940px) {
    .cw-login-page { padding: 0; background: var(--cw-navy); }
    .cw-login-card {
        grid-template-columns: 1fr; height: 100vh; max-width: none;
        border-radius: 0; box-shadow: none;
    }
    .cw-lb { display: none; }
    .cw-lf { padding: 30px 22px 34px; align-items: flex-start; }
    .cw-lf-inner { margin: 0 auto; padding-top: 14px; }
    .cw-lf-mobilebrand { display: flex; }
    .cw-lf-eyebrow { display: none; }
    .cw-lf-h { font-size: 31px; }
    .cw-lf-panelfoot { display: none; }
}

@media (max-height: 720px) {
    .cw-lf { padding-bottom: 30px; }
    .cw-lf-panelfoot { display: none; }
}
/* Workspace-picker trims (the taller of the two panels: a step bar plus FOUR selectors). */
@media (max-height: 860px) {
    .cw-lf-steps { margin: 16px 0 18px; padding: 9px 12px; }
    .cw-lf-pick { margin-bottom: 11px; }
    .cw-lf-labelrow { margin-top: 16px; }
    .cw-lf-label { margin-bottom: 6px; }
}
@media (max-height: 720px) {
    .cw-lf-secure, .cw-lf-secure-note { display: none; }
}

/* ── Profit by vehicle ──────────────────────────────────────────────────────
   The old panel drew ONE bar per lorry, scaled against the biggest profit either way,
   and captioned itself explaining that scaling. Two things were wrong with it: the
   reader had to be taught the mechanism before the picture meant anything, and profit
   alone ranks a lorry badly - 3 lakh on 30 lakh of revenue is a worse vehicle than 1.5
   lakh on 5 lakh, and the old bar drew the first one twice as long.

   So the bar is now REVENUE split into what it cost and what was left, every vehicle on
   the same scale. The proportion is the answer, and it needs no caption. */
.cw-pv { padding: 4px 16px 14px; }

/* The fleet's own totals, so the list has an anchor. There was no total anywhere. */
.cw-pv-sum {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding: 12px 14px; margin-bottom: 6px;
    background: #fbfcfe; border: 1px solid #eef2f7; border-radius: 12px;
}
.cw-pv-sum > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-pv-sum span { font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; }
.cw-pv-sum b { font-size: 14.5px; color: #0f172a; letter-spacing: -.01em; }
/* Its OWN colour classes. Reusing .cw-pv-val here dragged in that rule's
   `margin-left:auto` - which inside this column flex pushed the profit figure to the
   right-hand edge of its cell while the other three sat under their labels. */
.cw-pv-sum b.is-profit { color: #15803d; }
.cw-pv-sum b.is-loss { color: #dc2626; }

.cw-pv-row { padding: 9px 2px; border-top: 1px solid #f4f6f9; }
.cw-pv-row:first-of-type { border-top: 0; }
/* A GRID, not a flex row. With flex, the margin chip started wherever that lorry's
   registration happened to end, so the middle of the list was ragged - six chips at six
   different x positions. Fixed columns line the chip and the figure up down the whole
   list; the name takes whatever is left. */
.cw-pv-head {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 92px minmax(112px, auto);
    align-items: baseline; gap: 8px; margin-bottom: 5px;
}
.cw-pv-rank { font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.cw-pv-name {
    font-size: 12.5px; font-weight: 700; color: #0f172a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Margin is the comparator profit alone cannot be. */
.cw-pv-margin {
    font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap;
    background: #f1f5f9; border-radius: 5px; padding: 1px 6px;
    text-align: center; justify-self: stretch;
}
.cw-pv-margin.is-loss { background: #fef2f2; color: #dc2626; }
/* Right-aligned in its own column - no `margin-left:auto`, which is what leaked into
   the summary strip above. */
.cw-pv-val { text-align: right; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cw-pv-val.is-profit { color: #15803d; }
.cw-pv-val.is-loss { color: #dc2626; }

/* One track, two segments: what it cost, then what was left. On a loss the second
   segment runs PAST the revenue in red - the overrun is drawn, not described. */
.cw-pv-track {
    height: 10px; background: #f4f6f9; border-radius: 6px; overflow: hidden; display: flex;
}
.cw-pv-seg { height: 100%; }
.cw-pv-seg.cost   { background: #cbd5e1; }
.cw-pv-seg.profit { background: linear-gradient(90deg, #16a34a, #22c55e); }
.cw-pv-seg.loss   { background: repeating-linear-gradient(45deg, #dc2626 0 5px, #ef4444 5px 10px); }

.cw-pv-meta { font-size: 11px; color: #94a3b8; margin-top: 4px; }

/* Legend in the panel header, so the two colours are named once. */
.cw-pv-key { display: flex; align-items: center; gap: 11px; font-size: 11px; color: #64748b; }
.cw-pv-key span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cw-pv-key i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; font-style: normal; }
.cw-pv-key i.cost { background: #cbd5e1; }
.cw-pv-key i.profit { background: #22c55e; }
.cw-pv-key i.loss { background: #ef4444; }

@media (max-width: 640px) {
    .cw-pv-sum { grid-template-columns: repeat(2, 1fr); }
    .cw-pv-key { display: none; }
    /* Two columns and the chip moves under the name, rather than squeezing a
       registration number down to an ellipsis. */
    .cw-pv-head { grid-template-columns: 16px minmax(0, 1fr) auto; }
    .cw-pv-margin { grid-column: 2; justify-self: start; }
    .cw-pv-val { grid-row: 1; grid-column: 3; }
}

/* ── Where the kilometres went ──────────────────────────────────────────────
   The last dark-header data grid in the region, and the one whose captions floated in
   the middle of nowhere: the headers were left-aligned while the figures under them were
   right-aligned, so TRIPS sat two hundred pixels from the number it named.

   One grid template shared by the caption row and every data row - that is the whole fix
   for alignment, and it is why they cannot drift apart again. */
.cw-lane { padding: 0 16px 14px; }
.cw-lane-head, .cw-lane-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 108px 128px;
    align-items: center; gap: 12px;
}
.cw-lane-head {
    padding: 10px 2px; border-bottom: 1px solid #eef2f7;
    font-size: 10.5px; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .5px;
}
.cw-lane-row { padding: 10px 2px; border-top: 1px solid #f4f6f9; font-size: 12.5px; }
.cw-lane-row:first-of-type { border-top: 0; }

.cw-lane-name { font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Figures right-aligned, and their captions right-aligned WITH them. */
.cw-lane-n, .cw-lane-km, .cw-lane-head .n, .cw-lane-head .km { text-align: right; }
.cw-lane-n { color: #475569; }
.cw-lane-km { font-weight: 700; color: #0f172a; }

.cw-lane-share { display: flex; align-items: center; gap: 8px; }
.cw-lane-track { flex: 1 1 auto; height: 7px; background: #f4f6f9; border-radius: 5px; overflow: hidden; }
.cw-lane-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.cw-lane-pct { font-size: 11px; font-weight: 600; color: #64748b; min-width: 30px; text-align: right; }

/* Every kilometre unattributed is not a lane breakdown - it is the absence of one, and
   saying so beats drawing a full-width bar against a row called "No lane recorded". */
.cw-lane-none { padding: 16px 2px 4px; font-size: 12.5px; color: #64748b; line-height: 1.55; }
.cw-lane-none b { color: #0f172a; }

@media (max-width: 720px) {
    .cw-lane-head, .cw-lane-row { grid-template-columns: minmax(0, 1fr) 58px 84px; }
    .cw-lane-share, .cw-lane-head .sh { display: none; }
}

/* ── Fleet "what needs me" region ───────────────────────────────────────────
   This area used to carry FOUR different visual languages in one screenful - a bar
   list, a striped key/value table and two dark-header data grids - so nothing told the
   reader which panels were related or which figure wanted acting on. Two shapes now do
   all of it: a TILE for a standing figure, and a ROW for one thing on a list. */

/* Tiles: the standing exposures. A figure of zero is not news, so it recedes; anything
   above zero takes colour. That contrast is the whole point - the old table printed
   four zeros and one real number in identical bold type. */
.cw-need-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 10px; padding: 14px 16px 16px;
}
.cw-need {
    border: 1px solid #eef2f7; border-radius: 12px; padding: 11px 13px; background: #fff;
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cw-need.is-link { cursor: pointer; }
.cw-need.is-link:hover {
    border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(16,24,40,.08); transform: translateY(-1px);
}
.cw-need-label { font-size: 11.5px; font-weight: 600; color: #64748b; line-height: 1.3; }
.cw-need-val { font-size: 19px; font-weight: 700; color: #0f172a; letter-spacing: -.02em; }
.cw-need-sub { font-size: 11px; color: #94a3b8; }

/* Nothing owing: grey, quiet, and it SAYS so rather than printing a rupee zero. */
.cw-need.is-clear { background: #fbfcfe; border-color: #f1f5f9; }
.cw-need.is-clear .cw-need-val { color: #94a3b8; font-weight: 600; font-size: 15px; }

.cw-need.is-warn { background: #fffdf5; border-color: #fde68a; }
.cw-need.is-warn .cw-need-val { color: #b45309; }
.cw-need.is-bad  { background: #fffafa; border-color: #fecaca; }
.cw-need.is-bad  .cw-need-val { color: #dc2626; }

/* Rows: one item on a list of things to deal with. Replaces two dark-header grids -
   three columns of chrome for what is really a title, a when and a how-bad. */
.cw-att { display: flex; flex-direction: column; }
.cw-att-row {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 16px; border-top: 1px solid #f1f5f9; cursor: pointer;
    transition: background .12s ease;
}
.cw-att-row:first-child { border-top: 0; }
.cw-att-row:hover { background: #f8fafc; }
/* The severity rail. A colour down the left edge is read without being looked at,
   which a chip in a third column is not. */
.cw-att-rail { width: 3px; align-self: stretch; border-radius: 2px; flex: 0 0 auto; background: #e2e8f0; }
.cw-att-rail.sev-crit { background: #dc2626; }
.cw-att-rail.sev-high { background: #f97316; }
.cw-att-rail.sev-med  { background: #eab308; }
.cw-att-rail.sev-low  { background: #94a3b8; }
.cw-att-body { flex: 1 1 auto; min-width: 0; }
.cw-att-title { font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.35; }
/* Clamped, not truncated: leakage evidence is a sentence and the first two lines of it
   are the part worth reading. */
.cw-att-meta {
    font-size: 11.5px; color: #64748b; line-height: 1.4; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cw-att-right { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.cw-att-when { font-size: 12px; font-weight: 600; color: #334155; white-space: nowrap; }
.cw-att-when.is-late { color: #dc2626; }
.cw-att-when.is-soon { color: #b45309; }
.cw-att-amt { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; }
.cw-att-sev { font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .4px; }
.cw-att-empty { padding: 18px 16px; font-size: 12.5px; color: #64748b; }

/* The "All 12" affordance read as a value rather than a way through. */
.cw-att-all { font-size: 12px; font-weight: 600; color: #2563eb; cursor: pointer; white-space: nowrap; }
.cw-att-all:hover { text-decoration: underline; }

/* Profit bars: the value takes the sign's colour too. The bar already had a rose
   variant for a loss, but the FIGURE beside it stayed the same near-black either way,
   so a loss-making lorry read as a smaller win. */
.cw-bar-val.is-loss { color: #dc2626; }
.cw-bar-val.is-profit { color: #15803d; }

/* ── Reminder calendar (CwReminderCalendar) ─────────────────────────────────
   A grid of days, not a prettier list: four renewals landing in one week is the
   thing that hurts, and only a calendar shows it. */
/* The card it sits in (.cw-card) carries NO padding of its own - it is built to wrap
   tables, which bring their own. Without this the heading sat hard against the corner of
   the card with the grid flush to all four edges. */
.cw-cal { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }

/* Header band: title and count on the left, month navigation on the right, separated
   from the grid by a hairline so the controls read as a header and not as a first row. */
.cw-cal-head {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; border-bottom: 1px solid #eef2f7;
}
.cw-cal-title {
    font-weight: 700; font-size: 15.5px; color: #0f172a; letter-spacing: -.01em;
    display: flex; align-items: center; gap: 8px;
}
/* A small accent bar, so the heading has a left edge of its own inside the card. */
.cw-cal-title::before {
    content: ''; width: 3px; height: 15px; border-radius: 2px;
    background: linear-gradient(180deg, #2563eb, #60a5fa); flex: 0 0 auto;
}
.cw-cal-sub { font-size: 12px; color: #64748b; margin-top: 3px; padding-left: 11px; }

/* Legend - the day colours mean nothing until they are named once. */
.cw-cal-legend { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #64748b; }
.cw-cal-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cw-cal-legend i {
    width: 8px; height: 8px; border-radius: 3px; display: inline-block; font-style: normal;
}
.cw-cal-legend i.over { background: #fca5a5; }
.cw-cal-legend i.soon { background: #fcd34d; }
.cw-cal-legend i.ok   { background: #bbf7d0; }
/* Reminders with no due date - due by DISTANCE. Clickable, because the only place they can
   be read is the reminders list; a calendar has no day to draw them on. */
.cw-cal-nodate { cursor: pointer; text-decoration: underline dotted; margin-left: 2px; }
.cw-cal-nodate:hover { color: #334155; }
.cw-cal-month { font-weight: 700; font-size: 13.5px; min-width: 122px; text-align: center; color: #0f172a; }
/* The three controls read as one unit rather than three loose buttons. */
.cw-cal-nav {
    display: flex; align-items: center; gap: 2px;
    border: 1px solid #e7eaf0; border-radius: 10px; padding: 2px; background: #f8fafc;
}

.cw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cw-cal-dow { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
.cw-cal-dow > div { padding: 2px 4px; }

.cw-cal-day {
    min-height: 78px; border: 1px solid #eef2f7; border-radius: 10px;
    padding: 6px 7px; cursor: pointer; background: #fff;
    display: flex; flex-direction: column; gap: 3px; overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cw-cal-day:hover {
    border-color: #cbd5e1; box-shadow: 0 3px 10px rgba(16,24,40,.07); transform: translateY(-1px);
}
.cw-cal-num { font-size: 11.5px; font-weight: 700; color: #475569; }
.cw-cal-out { background: #fbfcfe; opacity: .5; }
/* Today is a filled marker on the DATE, not a ring round the whole cell - a ring competes
   with the severity colour the cell is already carrying. */
.cw-cal-today .cw-cal-num {
    background: #2563eb; color: #fff; border-radius: 6px;
    padding: 1px 6px; align-self: flex-start;
}
.cw-cal-today { border-color: #bfdbfe; }

/* Worst severity wins the day. */
.cw-cal-day.cw-cal-over { background: #fef2f2; border-color: #fca5a5; }
.cw-cal-day.cw-cal-soon { background: #fffbeb; border-color: #fcd34d; }
.cw-cal-day.cw-cal-ok   { background: #f0fdf4; border-color: #bbf7d0; }

.cw-cal-chip {
    font-size: 10.5px; line-height: 1.3; padding: 2px 6px; border-radius: 5px;
    background: #fff; border: 1px solid rgba(15,23,42,.10); color: #334155;
    font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-cal-more { font-size: 10px; color: #64748b; font-weight: 600; padding-left: 2px; }

.cw-cal-detail {
    border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; background: #fbfcfe;
}
.cw-cal-detail-head { display: flex; align-items: center; margin-bottom: 6px; }
.cw-cal-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid #f1f5f9; }
.cw-cal-row:first-of-type { border-top: 0; }
.cw-cal-meta { font-size: 11.5px; color: #64748b; }
.cw-cal-empty { font-size: 12.5px; color: #64748b; padding: 6px 0; }
.cw-cal-sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }
.cw-cal-sev.cw-cal-over { background: #dc2626; }
.cw-cal-sev.cw-cal-soon { background: #d97706; }
.cw-cal-sev.cw-cal-ok   { background: #16a34a; }

/* Compact: the dashboard strip. */
.cw-cal-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.cw-cal-pill {
    flex: 0 0 auto; min-width: 138px; border: 1px solid #eef2f7; border-radius: 12px;
    padding: 9px 12px; cursor: pointer; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cw-cal-pill:hover {
    border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(16,24,40,.08); transform: translateY(-1px);
}
.cw-cal-pill.cw-cal-over { background: #fef2f2; border-color: #fca5a5; }
.cw-cal-pill.cw-cal-soon { background: #fffbeb; border-color: #fcd34d; }
.cw-cal-pill.cw-cal-ok   { background: #f0fdf4; border-color: #bbf7d0; }
.cw-cal-pill-day { font-size: 11.5px; font-weight: 700; color: #334155; }
.cw-cal-pill-n { font-size: 12.5px; font-weight: 700; }
.cw-cal-pill-t { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
    .cw-cal-legend { display: none; }
}
@media (max-width: 720px) {
    .cw-cal { padding: 12px 12px 14px; }
    .cw-cal-day { min-height: 58px; }
    .cw-cal-chip { display: none; }
    .cw-cal-head { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Report tables, for pages that do NOT render CwReportShell.

   .cw-report-tbl is declared inside CwReportShell's own <style> block, so it
   only exists while a report page is on screen. Settings and accounting
   screens use the same table markup without that shell, and their tables came
   out completely unstyled — counts running into amounts, no header band, no
   right-aligned money.

   Same rules, declared globally. CwReportShell's copy comes later in the
   document and simply wins where both are present; they are identical, so
   there is nothing to see either way. If one is changed, change both.
   ───────────────────────────────────────────────────────────────────────── */
.cw-report-tbl                  { width: 100%; border-collapse: collapse; font-size: 12px; }
.cw-report-tbl thead th         { background: #1e293b; color: #fff; padding: 8px 10px;
                                  text-align: left; font-weight: 600; white-space: nowrap;
                                  text-transform: uppercase; font-size: 10.5px;
                                  letter-spacing: .3px; }
.cw-report-tbl td               { padding: 6px 10px; border-bottom: 1px solid #eef2f7;
                                  white-space: nowrap; font-variant-numeric: tabular-nums; }
.cw-report-tbl tbody tr:hover td { background: #f1f5f9; }
.cw-report-tbl tfoot tr         { background: #fef3c7; }
.cw-report-tbl tfoot td         { background: #fef3c7; padding: 8px 10px;
                                  border-top: 2px solid #f59e0b; font-size: 12px;
                                  font-weight: 700; color: #92400e; white-space: nowrap;
                                  font-variant-numeric: tabular-nums; }
.cw-report-tbl .num             { text-align: right; }
.cw-report-tbl .pos             { color: #15803d; font-weight: 600; }
.cw-report-tbl .neg             { color: #b91c1c; font-weight: 600; }

/* The scroll wrapper every report uses inline. Named so new screens stop
   inventing their own. */
.cw-tbl-wrap                    { overflow-x: auto; }

/* ── Command palette (Ctrl+K) ─────────────────────────────────────────────
   Overlay search across every screen in the app. Sits above MudBlazor's
   popovers (z-index 1400) but below the snackbar so a save confirmation is
   never hidden behind it. */
.cw-cmdk-scrim {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(2px);
    display: flex; justify-content: center;
    padding: 12vh 16px 16px;
    animation: cw-cmdk-fade .12s ease-out;
}
@keyframes cw-cmdk-fade { from { opacity: 0; } to { opacity: 1; } }

.cw-cmdk {
    width: 100%; max-width: 640px; height: fit-content;
    max-height: min(62vh, 540px);
    background: #ffffff;
    border: 1px solid #dbe3f0;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.12);
    display: flex; flex-direction: column; overflow: hidden;
    animation: cw-cmdk-rise .14s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cw-cmdk-rise { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .cw-cmdk-scrim, .cw-cmdk { animation: none; }
}

.cw-cmdk-input {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid #eef2f7;
}
.cw-cmdk-input > .material-icons { color: #94a3b8; font-size: 21px; }
.cw-cmdk-input input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-size: 15.5px; color: #0f172a; font-family: inherit;
}
.cw-cmdk-input input::placeholder { color: #94a3b8; }

.cw-cmdk-clear, .cw-cmdk-x {
    border: 0; background: transparent; cursor: pointer;
    width: 24px; height: 24px; border-radius: 50%;
    color: #94a3b8; line-height: 1; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cw-cmdk-x .material-icons { font-size: 18px; }
.cw-cmdk-clear:hover, .cw-cmdk-x:hover { background: #eef2f7; color: #0f172a; }

.cw-cmdk-results { overflow-y: auto; padding: 6px; flex: 1; min-height: 0; }
.cw-cmdk-results::-webkit-scrollbar { width: 8px; }
.cw-cmdk-results::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

.cw-cmdk-cap {
    padding: 8px 12px 5px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #94a3b8;
}

.cw-cmdk-row {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 9px; cursor: pointer;
    min-width: 0;
}
.cw-cmdk-row.sel { background: #eff5ff; }
.cw-cmdk-ic { font-size: 19px !important; color: #94a3b8; flex-shrink: 0; }
.cw-cmdk-row.sel .cw-cmdk-ic { color: #2563eb; }

.cw-cmdk-lbl {
    font-size: 14px; color: #0f172a; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.cw-cmdk-lbl mark {
    background: #fde68a; color: #78350f;
    border-radius: 2px; padding: 0 1px; font-weight: 600;
}

.cw-cmdk-kind {
    flex-shrink: 0;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase;
    color: #15803d; background: #dcfce7;
    border-radius: 4px; padding: 2px 6px;
}

.cw-cmdk-path {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; color: #94a3b8; white-space: nowrap;
    padding-left: 10px;
}

.cw-cmdk-empty { padding: 34px 20px; text-align: center; }
.cw-cmdk-empty .material-icons { font-size: 34px; color: #cbd5e1; }
.cw-cmdk-empty-title { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: #334155; }
.cw-cmdk-empty-hint  { margin-top: 5px; font-size: 12.5px; color: #94a3b8; line-height: 1.5; }

.cw-cmdk-foot {
    display: flex; align-items: center; gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid #eef2f7; background: #f8fafc;
    font-size: 11.5px; color: #64748b;
}
.cw-cmdk-foot kbd {
    display: inline-block; margin-right: 3px;
    font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;
    padding: 1px 5px; border: 1px solid #dbe3f0; border-bottom-width: 2px;
    border-radius: 4px; background: #ffffff; color: #475569;
}
.cw-cmdk-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* The top-bar button that opens the palette by mouse. Sits beside the LR
   search so the two ways of finding things are next to each other. */
.sb-cmdk-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 10px;
    border: 1px solid #e3e9f5; border-radius: 10px;
    background: #f4f7fd; color: #64748b; cursor: pointer;
    font-size: 12.5px; font-family: inherit; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
.sb-cmdk-btn:hover { border-color: #2563eb; color: #0f172a; }
.sb-cmdk-btn .material-icons { font-size: 17px; }
.sb-cmdk-btn kbd {
    font-family: ui-monospace, Consolas, monospace; font-size: 10px;
    padding: 1px 5px; border: 1px solid #dbe3f0; border-bottom-width: 2px;
    border-radius: 4px; background: #ffffff; color: #64748b;
}

@media (max-width: 900px) {
    /* On a phone the palette is the primary way to navigate, so it takes the
       full sheet rather than floating. The label on the button goes; the icon
       stays. */
    .cw-cmdk-scrim { padding: 0; }
    .cw-cmdk { max-width: none; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
    .cw-cmdk-path { display: none; }
    .sb-cmdk-btn span.sb-cmdk-label, .sb-cmdk-btn kbd { display: none; }
    .sb-cmdk-btn { padding: 0 8px; }
}

/* Live progress for a long bulk run (CwBulkProgress). Sits under the action bar so the counts
   and the button it belongs to stay readable while the work goes. */
.cw-bulkprog { margin: 8px 2px 2px; padding: 10px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.cw-bulkprog-row { display: flex; align-items: center; gap: 12px; }
.cw-bulkprog-pct { font-size: 13px; font-weight: 700; color: #1e293b;
    min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.cw-bulkprog-caption { margin-top: 6px; font-size: 12px; color: #64748b;
    font-variant-numeric: tabular-nums; }

/* A tab that has something in it. FILLED, not complete: on a trip sheet the consignment and
   market tabs are alternatives, so a tick meaning "done" would mark a correct tab as wrong.
   Only forms that pass CwTabPage a TabFilled predicate ever get this - every other form's
   dots are untouched. */
.cw-tab-dot.is-filled { background: #16a34a; border-color: #16a34a; }
.cw-tab-dot.is-filled.is-active { box-shadow: 0 0 0 3px rgba(22, 163, 74, .22); }


/* ═══════════════════════════════════════════════════════════════════════════
   ROWS TO CARDS — the one mobile treatment for a line grid inside a FORM.

   A document form's line grid is the widest thing in the application: the freight bill's
   is 23 columns, the challan's 13. On a phone every one of them was a horizontal
   scrollbar with bound inputs hidden behind it, which is why nobody works a document
   from a phone.

   ONE DOM, reflowed — never a second hidden set of cards. These rows hold BOUND INPUTS,
   so a duplicate would be a second field writing to the same line: a focus fight, a
   duplicated element id, and only one of them ever right on screen. (The rule is the
   other way round for a READ-ONLY list, where the house pattern is a hidden card list
   and both get built.)

   TO USE, on the grid's wrapper:

       <div class="cw-challan-grid cw-rows-to-cards chl-lines">

   then, in the page's own <style>, give every cell the heading it loses when the header
   row goes:

       .chl-lines td:nth-child(2)::before { content: "LR no"; }

   The labels live beside the columns they name, in one rule set, so they cannot drift
   from the <th> they replace.

   ALWAYS SCOPE IT with a per-screen class. cw-challan-grid alone is shared by twelve
   screens and reflowing that would change all of them at once.

   A row that is ONE cell — a "nothing here" message, a divider — must carry
   .cw-rows-msg, or its colspan cell lands in the first column of a grid it was never
   part of.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .cw-rows-to-cards { overflow-x: visible; }
    .cw-rows-to-cards table,
    .cw-rows-to-cards tbody { display: block; width: 100%; min-width: 0; }
    .cw-rows-to-cards thead { display: none; }

    .cw-rows-to-cards tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
        border: 1px solid #e2e8f0; border-radius: 10px;
        padding: 11px 12px; margin-bottom: 10px; background: #fff;
    }
    .cw-rows-to-cards td { display: block; border: 0; padding: 0; min-width: 0; }

    /* the heading each cell lost when thead went */
    .cw-rows-to-cards td::before {
        display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
        text-transform: uppercase; color: #94a3b8; margin-bottom: 2px;
    }

    /* numbers read right on a card as they did in a column */
    .cw-rows-to-cards td .mud-input-slot { text-align: right; }

    /* a row that is one cell, not many */
    .cw-rows-to-cards tr.cw-rows-msg {
        display: block; border: 0; border-radius: 0; background: transparent;
        margin: 0; padding: 0;
    }
    .cw-rows-to-cards tr.cw-rows-msg > td { display: block; }

    /* helpers a page can put on a cell */
    .cw-rows-to-cards td.cw-rows-wide { grid-column: 1 / -1; }
    .cw-rows-to-cards td.cw-rows-head { grid-area: 1 / 1 / 2 / 2; font-weight: 700; }
    .cw-rows-to-cards td.cw-rows-tail { grid-area: 1 / 2 / 2 / 3; text-align: right; font-weight: 700; }
    .cw-rows-to-cards td.cw-rows-tail::before { text-align: right; }
    .cw-rows-to-cards td.cw-rows-break {
        grid-column-start: 1; border-top: 1px solid #f1f5f9; padding-top: 9px; margin-top: 2px;
    }
    .cw-rows-to-cards td.cw-rows-act { grid-column: 1 / -1; text-align: right; }
    .cw-rows-to-cards td.cw-rows-act::before { content: none; }
}

/* ── Merged list cells (.lb-*) ───────────────────────────────────────────────
   A value with the fact that qualifies it underneath, in one grid cell. Used by
   every document list - LR booking, challan, freight memo, arrival, delivery
   challan - and by the Fleet trip and route lists, so a reader who learns one
   list has learned all of them.

   Defined once here rather than per page: five identical copies in five .razor
   <style> blocks is five chances for one of them to drift, and the point of the
   shape is that the lists look the same.

   .lb-no      the document number - the thing being scanned for
   .lb-strong  a primary value that is not a number
   .lb-sub     the qualifying fact, one line under it (.lb-num for figures,
               .lb-mono for a lorry/vehicle number)
   .lb-amt     a money figure, right-aligned by the column's CellStyle
   ──────────────────────────────────────────────────────────────────────────── */
.lb-no { font-weight: 700; font-size: 13.5px; display: block; white-space: nowrap; }
.lb-strong { font-weight: 600; display: block; }
.lb-sub { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; white-space: nowrap; }
.lb-sub.lb-num { font-variant-numeric: tabular-nums; }
.lb-sub.lb-mono { font-family: ui-monospace, Consolas, monospace; }
.lb-amt { font-weight: 700; font-variant-numeric: tabular-nums; display: block; }

/* ── Report table pager (.cw-tpager) ─────────────────────────────────────────
   Used by CwTablePager, which every hand-rolled report table shares. Defined
   once here rather than per page for the same reason .lb-* is: seventeen copies
   is seventeen chances to drift, and the point of a shared control is that a
   reader who learns it on one report has learned it on all of them.
   ──────────────────────────────────────────────────────────────────────────── */
.cw-tpager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 8px 4px 0; margin-top: 6px;
    border-top: 0.5px solid #e6eaf1;
}
.cw-tpager-info { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.cw-tpager-controls { display: flex; align-items: center; gap: 6px; }
.cw-tpager-label { font-size: 12px; color: #64748b; }
.cw-tpager-size {
    font-size: 12px; padding: 3px 6px; border: 0.5px solid #cbd5e1;
    border-radius: 6px; background: #fff; color: #0f172a; cursor: pointer;
}
.cw-tpager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 0.5px solid #cbd5e1; border-radius: 6px;
    background: #fff; color: #475569; cursor: pointer;
}
.cw-tpager-btn:hover:not(:disabled) { background: #f1f5f9; }
.cw-tpager-btn:disabled { opacity: .4; cursor: default; }
.cw-tpager-btn .material-icons { font-size: 18px; }
.cw-tpager-ind {
    font-size: 12px; color: #0f172a; font-variant-numeric: tabular-nums;
    min-width: 96px; text-align: center;
}

/* On a phone the count line and the controls each take a full row - side by side
   they squeeze the page indicator until "Page 1 of 12" wraps mid-number. */
@media (max-width: 640px) {
    .cw-tpager { justify-content: flex-start; }
    .cw-tpager-info, .cw-tpager-controls { width: 100%; }
    .cw-tpager-controls { justify-content: space-between; }
    .cw-tpager-label { display: none; }
}

/* ── Mail template field palette ─────────────────────────────────────────────
   The list of {{fields}} a template may use, on the email template editor. Chips
   rather than a dropdown: a person writing wording needs to SEE what is available
   while they type, not go looking for it. */
.cw-field-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cw-field-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--cw-border, #e2e8f0);
    border-radius: 999px;
    background: var(--cw-surface, #fff);
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
}

.cw-field-chip:hover {
    border-color: var(--cw-primary, #2563eb);
    background: rgba(37, 99, 235, .06);
}

.cw-field-chip-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    color: var(--cw-primary, #2563eb);
}

.cw-field-chip-label {
    font-size: .74rem;
    color: #64748b;
}

/* The rendered preview of the message. White-space is preserved because the body is
   written as text with line breaks, and that is how the email sends it. */
.cw-mail-preview {
    font-size: .88rem;
    line-height: 1.55;
    word-break: break-word;
}


/* Vehicle document renewal - "last time" strip on the document dialog. One line, quiet, and it
   sits directly under the vendor and cost it explains. */
.cw-vd-last {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    font-size: 12.5px; color: #334155;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px;
}
.cw-vd-last .material-icons { font-size: 16px; color: #94a3b8; }
.cw-vd-up   { font-weight: 700; color: #991b1b; }
.cw-vd-down { font-weight: 700; color: #166534; }


/* Vehicle master - what still has to be fixed, above the form rather than in a third-width
   column beside it. Two side-by-side groups on a wide screen, stacked on a narrow one; the
   whole strip is absent when there is nothing wrong, which is the usual case. */
.cw-veh-warn { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.cw-veh-warn-grp {
    flex: 1 1 320px; min-width: 0;
    border: 1px solid #fcd34d; border-left: 3px solid #f59e0b; border-radius: 8px;
    background: #fffbeb; padding: 8px 12px;
}
.cw-veh-warn-doc { border-color: #fca5a5; border-left-color: #ef4444; background: #fef2f2; }
.cw-veh-warn-hd {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #92400e; margin-bottom: 3px;
}
.cw-veh-warn-doc .cw-veh-warn-hd { color: #991b1b; }
.cw-veh-warn-hd .material-icons { font-size: 16px; }
.cw-veh-warn ul { margin: 0; padding-left: 18px; }
.cw-veh-warn li { font-size: 12.5px; color: #334155; margin: 1px 0; }


/* Vehicle master - the dealer's free services, grouped so four fields read as one entitlement
   rather than as four unrelated boxes on the money tab. */
.cw-veh-free {
    border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff;
    padding: 9px 12px 4px;
}
.cw-veh-free-hd {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #3730a3;
}
.cw-veh-free-hd .material-icons { font-size: 16px; }

/*  Lorry Hire Payment - how each memo adds up.

    A grid of three columns rather than a table: the middle one carries the working
    ("900.00 x 0.800 MT = 720.00"), which is the widest and the most compressible, so it is the
    one that wraps on a phone while the label and the figure stay on one line. No second hidden
    copy for mobile - nothing here is bound (working rule 6). */
.hp-workings { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px 0; }

.hp-working {
    flex: 1 1 340px; min-width: 0;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 10px; padding: 10px 12px;
    background: var(--mud-palette-surface, #fff);
}

.hp-working-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.hp-working-weigh { font-size: 12px; color: #475569; }

.hp-wr {
    display: grid; grid-template-columns: minmax(120px, auto) 1fr auto;
    gap: 8px; align-items: baseline;
    padding: 2px 0; font-size: 13px;
}
.hp-wr-k { color: #475569; }
.hp-wr-w { color: #0f172a; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.hp-wr-v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hp-wr.minus .hp-wr-v { color: #b91c1c; }
.hp-wr.total { border-top: 1px solid var(--mud-palette-lines-default, #e2e8f0); margin-top: 6px; padding-top: 6px; }
.hp-wr.total .hp-wr-k, .hp-wr.total .hp-wr-v { font-weight: 700; }
.hp-wr-note { font-size: 11.5px; color: #64748b; margin: 0 0 4px 0; }

@media (max-width: 600px) {
    /*  The working drops onto its own line rather than squeezing the figure off the card. */
    .hp-wr { grid-template-columns: 1fr auto; }
    .hp-wr-w { grid-column: 1 / -1; order: 3; color: #475569; }
}

/*  A picker and its inline "create one" button.

    The button used to sit in a `d-flex align-center` row, which centres it against the WHOLE
    field - input AND helper text. Every one of these pickers carries a helper line, so the
    button was pushed about eight pixels below the box it belongs to, on every screen that has
    one. It reads as a stray control rather than part of the field.

    The row now aligns to the TOP and the button is centred inside a box the height of the input
    itself, so it lines up whether the field has a helper line, an error line, both or neither -
    which is what makes this a fix rather than a nudge.

    The numbers are MudBlazor's own, not guesses: `.mud-input-root-margin-dense` is
    padding 10px/11px around a ~19px line = 40px, and `.mud-input-control-margin-dense` adds
    margin-top:3px above it. Centring is left to flexbox so the button's own size can change
    without this needing to know. */
.cw-pick-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

/*  The field takes the room. min-width:0 is what lets it actually shrink inside a grid cell -
    without it a flex item refuses to go below its content width and pushes the button out. */
.cw-pick-row > *:first-child { flex: 1 1 auto; min-width: 0; }

.cw-pick-row > .cw-pick-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--cw-input-dense-height, 40px);
    margin-top: var(--cw-input-dense-offset, 3px);
}

/* ---------------------------------------------------------------------------
   "What is still needed" strip  (cw-needs)
   Used by: Fleet > Driver form.

   It replaces a fixed right-hand column of red alerts. Two reasons it is a
   STRIP and not a panel:

     - a wall of red on an untouched new form is alarm, not information, so
       this stays one quiet line until the user asks or presses Save; and
     - the old panel said WHAT was missing and never WHERE. Across five tabs
       that is the actual friction, so every count here is a button that
       jumps to the tab holding it.

   The per-field error text is MudBlazor's own (Error / ErrorText). This is
   only the summary.
   --------------------------------------------------------------------------- */
.cw-needs {
    margin-top: 10px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
    padding: 10px 14px;
}
.cw-needs.is-ready {
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.cw-needs-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cw-needs-head .material-icons { font-size: 20px; color: #b45309; }
.cw-needs.is-ready .cw-needs-head .material-icons { color: #16a34a; }

.cw-needs-title {
    font-size: 13px; font-weight: 700; color: #92400e;
}
.cw-needs.is-ready .cw-needs-title { color: #15803d; }

/*  One chip per tab that still wants something. The count sits inside the
    chip so a glance answers "how many, and where". */
.cw-needs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #fcd34d; border-radius: 999px;
    background: #ffffff; color: #92400e;
    font: inherit; font-size: 12px; font-weight: 600;
    padding: 3px 6px 3px 11px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.cw-needs-chip:hover { background: #fffbeb; border-color: #f59e0b; }
.cw-needs-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: #f59e0b; color: #ffffff; font-size: 11px; font-weight: 700;
    padding: 0 5px;
}

.cw-needs-toggle {
    margin-left: auto;
    border: 0; background: none; padding: 2px 4px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: #b45309; cursor: pointer; text-decoration: underline dotted;
}
.cw-needs-toggle:hover { color: #92400e; }

.cw-needs-list, .cw-needs-advice {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.cw-needs-list li button {
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    text-align: left; border: 0; background: none; padding: 4px 6px;
    border-radius: 8px; font: inherit; font-size: 12.5px; color: #7c2d12;
    cursor: pointer;
}
.cw-needs-list li button:hover { background: #fef3c7; }
.cw-needs-where {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: #b45309;
    background: #fef3c7; border-radius: 5px; padding: 1px 6px;
}

/*  Advisories are true and are NOT a reason to refuse the record - an expired
    licence saves, it just cannot be put on a trip. Kept visually quieter than
    the blocking list on purpose. */
.cw-needs-advice li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: #475569; padding: 3px 6px;
}
.cw-needs-advice .material-icons { font-size: 16px; color: #64748b; }

@media (max-width: 720px) {
    .cw-needs { padding: 10px; }
    .cw-needs-toggle { margin-left: 0; }
    .cw-needs-list li button { align-items: flex-start; flex-direction: column; gap: 3px; }
}