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

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

/* ── 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; }
/* Column-filter row stays on the dark header background, so its inputs must be
   LIGHT to be readable. Target any input inside the grid header (title cells
   have no inputs, so this only hits 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: #f1f5f9 !important; caret-color: #f1f5f9 !important;
}
.cw-card .mud-data-grid thead input::placeholder,
.cw-card .mud-data-grid .mud-table-head input::placeholder {
    color: rgba(226,232,240,0.55) !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(255,255,255,0.28) !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: #93c5fd !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; }

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

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

/* ── 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 */
.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: 16px; align-items: flex-start; }
.cw-pd-main { flex: 1; min-width: 0; }
.cw-pd-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cw-pd-canvas-wrap {
    background: #eef1f5; padding: 24px; border-radius: 12px;
    overflow: auto; max-height: 76vh;
}
.cw-pd-canvas {
    position: relative; background: #fff; margin: 0 auto;
    box-shadow: 0 6px 22px rgba(15,23,42,0.18);
    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;
}
.cw-pd-el.sel { outline: 2px solid #2563eb; outline-offset: 0; z-index: 5; }
.cw-pd-el-line { background: #334155; }
.cw-pd-el-box { border: 1px solid #94a3b8; }
.cw-pd-el-table { border: 1px dashed #cbd5e1; background: #f8fafc; font-size: 9px; color: #64748b; }
.cw-pd-el-company { border: 1px dashed #cbd5e1; }
.cw-pd-panel {
    width: 300px; flex: 0 0 300px;
    background: #fff; border: 1px solid #e7eaf0; border-radius: 12px; padding: 14px 16px;
}
.cw-pd-panel h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #0f172a; }
.cw-pd-panel .cw-pd-empty { color: #94a3b8; font-size: 13px; }
.cw-pd-color span { display: block; font-size: 12px; color: #64748b; margin-bottom: 2px; }
.cw-pd-color input[type=color] {
    width: 46px; height: 30px; padding: 0; border: 1px solid #cbd5e1;
    border-radius: 6px; background: #fff; cursor: pointer;
}
@media (max-width: 1100px) { .cw-pd { flex-direction: column; } .cw-pd-panel { width: 100%; flex: 1; } }

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