/* 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;
}
.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; }
.cw-ph-title { font-size: 20px; font-weight: 800; color: #0f172a; line-height: 1.2; letter-spacing: -0.3px; }
.cw-ph-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.cw-ph-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.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; }

/* 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;
}

/* 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;
}
.cw-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.4;
}
.cw-badge-active   { background: #dcfce7; color: #15803d; }
.cw-badge-inactive { background: #fee2e2; color: #b91c1c; }

/* ════════════════ 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;
}
.cw-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.85;
}
.cw-badge-active   { background: #e6f6ea; color: #166534; }
.cw-badge-inactive { background: #fde7eb; color: #9f1239; }

/* ── 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;
}
.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; }
.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; }
.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; gap: 8px; margin-bottom: 14px;
    padding: 10px 12px; background: #fff;
    border: 1px solid #e7eaf0; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}

/* 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);
}
.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. */
.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;
}
.cw-pd-pv-table { width: 100%; height: 100%; display: flex; flex-direction: column; border: 1px solid #334155; }
.cw-pd-pv-trow { display: flex; flex: 1; 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; }
.cw-pd-pv-cell { flex: 1; padding: 2px 5px; border-right: 1px solid #cbd5e1; overflow: hidden; }
.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). */
.cw-pd-pv-table.noborder,
.cw-pd-pv-table.noborder .cw-pd-pv-trow,
.cw-pd-pv-table.noborder .cw-pd-pv-cell,
.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; }
.cw-pd-panel {
    width: 312px; flex: 0 0 312px; align-self: stretch;
    background: #fff; border: 1px solid #e7eaf0; border-radius: 16px; padding: 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    position: sticky; top: 16px;
}
.cw-pd-panel h3 {
    margin: 0 0 14px; font-size: 12px; font-weight: 800; color: #334155;
    text-transform: uppercase; letter-spacing: .05em;
    padding-bottom: 10px; border-bottom: 1px solid #eef1f5;
}
.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; }
    .cw-pd-panel { width: 100%; flex: 1; position: static; }
}

.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);
}
.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-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; }

/* 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; }
.cw-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 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; }
.cw-mcard-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding-top: 9px; border-top: 0.5px solid #eef1f6;
}
.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; }

/* 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;
}

/* 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; }
}