/* ==========================================================================
   LEN UI "Jalur": one token layer + the global skin for MudBlazor.
   Quiet surfaces, loud data. Brand colours come from the LEN Logistics logo:
   navy #0F3367 (primary), cyan #1EACE2 (movement), red #EA271A (logo and map
   origin only, never a control). Colour only carries meaning.

   - Tokens are --len-*; dark mode redefines them under html[data-theme="dark"]
     (set by index.html at start-up and by BaseLayout when the theme changes).
   - The MudBlazor palette (Theme/*.cs) uses the same values, so --mud-palette-*
     and --len-* agree.
   - Loaded after MudBlazor, fsh.css and dashboard.css; page <style> blocks still
     win where they set something themselves.
   ========================================================================== */

/* ---------- fonts (self-hosted, SIL Open Font License: fonts/OFL-*.txt) ---------- */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/geist-mono-latin-wght.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens: light ---------- */
:root {
    --len-navy: #0F3367;
    --len-navy-700: #0B2853;
    --len-navy-500: #17458C;
    --len-cyan: #1EACE2;
    --len-red: #EA271A;

    --len-bg: #F4F6F9;
    --len-surface: #FFFFFF;
    --len-surface-2: #F9FAFB;
    --len-surface-3: #F0F3F7;
    --len-border: #E3E7ED;
    --len-border-2: #EDF0F4;
    --len-border-strong: #CBD2DC;
    --len-text: #101828;
    --len-text-2: #475467;
    --len-text-3: #667085;
    --len-text-4: #98A2B3;

    /* Primary and secondary follow the theme manager (Pengaturan tampilan): MudThemeProvider writes the user's
       colours to --mud-palette-*, and every LEN accent below is derived from them. The values after the commas
       are the LEN defaults, used only until the palette is there. */
    --len-primary: var(--mud-palette-primary, #203463);
    --len-primary-hover: var(--mud-palette-primary-darken, #0B2853);
    --len-on-primary: var(--mud-palette-primary-text, #FFFFFF);
    --len-primary-soft: color-mix(in srgb, var(--len-primary) 9%, #FFFFFF);
    --len-primary-soft-text: color-mix(in srgb, var(--len-primary) 82%, #FFFFFF);
    /* accent text and icons on any surface (links, active labels, section icons) */
    --len-link: var(--len-primary);
    --len-accent: var(--mud-palette-secondary, #1EACE2);
    --len-accent-soft: color-mix(in srgb, var(--len-accent) 12%, #FFFFFF);
    --len-accent-text: color-mix(in srgb, var(--len-accent) 62%, #101828);
    --len-brand-oms: #0B7DB4;
    --len-danger: #D92D20;
    --len-warning: #F79009;
    --len-success: #17B26A;

    /* status tones: text / soft fill / hairline / dot. One meaning per tone on every screen:
       neutral = not started or closed, amber = waiting for us, cyan = moving,
       navy = assigned or arrived, green = done, red = problem, violet = exception. */
    --len-t-neutral: #475467; --len-t-neutral-bg: #F2F4F7; --len-t-neutral-bd: #E4E7EC; --len-t-neutral-dot: #98A2B3;
    --len-t-navy: #1F3F7A;    --len-t-navy-bg: #EDF2FA;    --len-t-navy-bd: #CCD9EF;    --len-t-navy-dot: #3D64AE;
    --len-t-cyan: #075E85;    --len-t-cyan-bg: #E8F6FC;    --len-t-cyan-bd: #BDE4F5;    --len-t-cyan-dot: #1EACE2;
    --len-t-amber: #93370D;   --len-t-amber-bg: #FFF6E5;   --len-t-amber-bd: #FBDDA6;   --len-t-amber-dot: #F79009;
    --len-t-green: #067647;   --len-t-green-bg: #ECFDF3;   --len-t-green-bd: #ABEFC6;   --len-t-green-dot: #17B26A;
    --len-t-red: #B42318;     --len-t-red-bg: #FEF3F2;     --len-t-red-bd: #FECDCA;     --len-t-red-dot: #F04438;
    --len-t-violet: #5925DC;  --len-t-violet-bg: #F4F3FF;  --len-t-violet-bd: #D9D6FE;  --len-t-violet-dot: #7A5AF8;

    /* charts: every chart maps its series to these */
    --len-chart-1: var(--len-primary); --len-chart-2: var(--len-accent); --len-chart-3: #F5A524; --len-chart-4: #8EA0C4; --len-chart-5: #17B26A; --len-chart-6: #E5484D;
    --len-chart-grid: #EAEEF3;

    /* shape, depth, motion */
    --len-r-sm: 6px; --len-r: 8px; --len-r-lg: 12px; --len-r-xl: 16px;
    --len-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --len-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --len-shadow-overlay: 0 18px 44px -12px rgba(16, 24, 40, .24), 0 4px 12px -4px rgba(16, 24, 40, .08);
    --len-ring: 0 0 0 3px color-mix(in srgb, var(--len-accent) 32%, transparent);
    --len-ease: cubic-bezier(.2, .7, .3, 1);
    --len-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --len-mono: "Geist Mono", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

    color-scheme: light;
}

/* ---------- tokens: dark ---------- */
html[data-theme="dark"] {
    --len-bg: #0A1120;
    --len-surface: #0F182A;
    --len-surface-2: #121C30;
    --len-surface-3: #18243B;
    --len-border: #1F2C44;
    --len-border-2: #19253B;
    --len-border-strong: #2C3C59;
    --len-text: #E7ECF4;
    --len-text-2: #AAB5C7;
    --len-text-3: #8592A8;
    --len-text-4: #5E6B82;

    /* The dark palette's primary and secondary (theme manager), lifted where they are text on a dark surface. */
    --len-primary-hover: var(--mud-palette-primary-lighten, #3A78E0);
    --len-primary-soft: color-mix(in srgb, var(--len-primary) 18%, transparent);
    --len-primary-soft-text: color-mix(in srgb, var(--len-primary) 45%, #FFFFFF);
    --len-link: color-mix(in srgb, var(--len-primary) 70%, #FFFFFF);
    --len-accent-soft: color-mix(in srgb, var(--len-accent) 14%, transparent);
    --len-accent-text: color-mix(in srgb, var(--len-accent) 55%, #FFFFFF);
    --len-brand-oms: #1EACE2;

    --len-t-neutral: #B8C2D3; --len-t-neutral-bg: rgba(152, 162, 179, .12); --len-t-neutral-bd: rgba(152, 162, 179, .22); --len-t-neutral-dot: #8592A8;
    --len-t-navy: #A9C8FF;    --len-t-navy-bg: rgba(61, 100, 174, .22);   --len-t-navy-bd: rgba(110, 150, 230, .30);  --len-t-navy-dot: #6E96E6;
    --len-t-cyan: #7FD5F5;    --len-t-cyan-bg: rgba(30, 172, 226, .13);   --len-t-cyan-bd: rgba(30, 172, 226, .30);   --len-t-cyan-dot: #1EACE2;
    --len-t-amber: #FDC56B;   --len-t-amber-bg: rgba(247, 144, 9, .13);   --len-t-amber-bd: rgba(247, 144, 9, .30);   --len-t-amber-dot: #F79009;
    --len-t-green: #6CE4A6;   --len-t-green-bg: rgba(23, 178, 106, .13);  --len-t-green-bd: rgba(23, 178, 106, .30);  --len-t-green-dot: #17B26A;
    --len-t-red: #FDA29B;     --len-t-red-bg: rgba(240, 68, 56, .13);     --len-t-red-bd: rgba(240, 68, 56, .32);     --len-t-red-dot: #F04438;
    --len-t-violet: #C3B5FD;  --len-t-violet-bg: rgba(122, 90, 248, .15); --len-t-violet-bd: rgba(122, 90, 248, .32); --len-t-violet-dot: #9B8AFB;

    --len-chart-1: var(--len-link); --len-chart-2: var(--len-accent); --len-chart-3: #F5A524; --len-chart-4: #5D6F93; --len-chart-5: #17B26A; --len-chart-6: #F0625F;
    --len-chart-grid: #1C2840;

    --len-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --len-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --len-shadow-overlay: 0 18px 48px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);

    color-scheme: dark;
}

/* ---------- base ---------- */
html, body {
    font-family: var(--len-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background-color: var(--mud-palette-background, var(--len-bg));
    color: var(--len-text);
}

::selection {
    background: color-mix(in srgb, var(--len-accent) 22%, transparent);
}

/* Codes (AWB, manifest, DRS, plate numbers) are easier to read and compare in mono. */
.len-mono {
    font-family: var(--len-mono);
    font-size: .94em;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.len-num,
.mud-table-cell,
.mud-input-slot {
    font-variant-numeric: tabular-nums;
}

.len-muted { color: var(--len-text-3); }

/* Keyboard focus is visible everywhere; the mouse keeps the quiet look. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-chip:focus-visible,
.mud-tab:focus-visible,
.mud-nav-link:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

/* ---------- buttons ---------- */
.mud-button-root.mud-button {
    min-height: 36px;
    padding: 6px 14px;
    letter-spacing: normal;
    transition: background-color 150ms var(--len-ease), border-color 150ms var(--len-ease), color 150ms var(--len-ease), box-shadow 150ms var(--len-ease);
}

/* A small button in a table row is compact (30 px), as in the mockups. Other small buttons keep 36 px so they line up
   with the inputs next to them. MudBlazor 6 names the size class per variant. */
.mud-table-cell .mud-button-root.mud-button:is(.mud-button-text-size-small, .mud-button-outlined-size-small, .mud-button-filled-size-small) {
    min-height: 30px;
    padding: 3px 10px;
    font-size: .8125rem;
    line-height: 1.6;
}

.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:active,
.mud-fab {
    box-shadow: none;
}

.mud-button-outlined {
    background-color: var(--mud-palette-surface);
}

.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined:not([class*="mud-button-outlined-"]) {
    border-color: var(--len-border-strong);
    color: var(--len-text);
}

.mud-button-root.mud-icon-button {
    border-radius: var(--len-r);
}

.mud-button-root.mud-icon-button.mud-button-root-circle,
.mud-fab {
    border-radius: 999px;
}

.mud-button-label .mud-button-icon-start { margin-inline-end: 6px; }
.mud-button-label .mud-button-icon-end { margin-inline-start: 6px; }

/* ---------- inputs ---------- */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--len-border-strong);
    border-radius: var(--len-r);
    transition: border-color 150ms var(--len-ease), box-shadow 150ms var(--len-ease);
}

.mud-input.mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border {
    border-color: var(--len-text-4);
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--len-ring);
}

.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: var(--mud-palette-error);
    box-shadow: none;
}

.mud-input-label {
    color: var(--len-text-3);
}

.mud-input-label.mud-input-label-inputcontrol {
    font-weight: 500;
}

.mud-input-helper-text {
    color: var(--len-text-3);
}

.mud-input > input.mud-input-root,
.mud-input > textarea.mud-input-root,
.mud-input-slot {
    color: var(--len-text);
}

.mud-input > input.mud-input-root::placeholder,
.mud-input > textarea.mud-input-root::placeholder {
    color: var(--len-text-4);
    opacity: 1;
}

/* Plain form fields (not MudBlazor's): in dark mode the browser paints them its own grey. No specificity, so
   any page style for a field still wins. */
:where(html[data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]), select, textarea) {
    background-color: var(--len-surface);
    color: var(--len-text);
}

/* The sign-in design always has a light card, even when the saved app theme is dark. Keep native controls
   and browser autofill on that same palette without changing the user's saved theme. */
.lp.lp-o {
    color-scheme: light;
}

.lp-o .lf-box input:is(:autofill, :-webkit-autofill) {
    -webkit-text-fill-color: var(--lf-text);
    caret-color: var(--lf-text);
    box-shadow: inset 0 0 0 100px var(--lf-bg);
}

.lp-o .lf-box:focus-within input:is(:autofill, :-webkit-autofill) {
    box-shadow: inset 0 0 0 100px #FFFFFF;
}

/* ---------- surfaces ---------- */
.mud-card,
.mud-table:not(.mud-table-square),
.mud-expansion-panels:not(.mud-expansion-panels-square) {
    border-radius: var(--len-r-lg);
}

.mud-card-header .mud-card-header-content .mud-typography-h6,
.mud-card-header .mud-card-header-content .mud-typography-subtitle1 {
    font-weight: 650;
}

.mud-divider {
    border-color: var(--len-border);
}

/* ---------- tables ---------- */
.mud-table-head .mud-table-cell,
.mud-table-head th.mud-table-cell {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--len-text-3);
    background-color: var(--len-surface-2);
    border-bottom: 1px solid var(--len-border);
    white-space: nowrap;
}

/* When the content area is narrow, headers may wrap and cells sit closer, so the table fits the page instead of
   scrolling: below 1280 px, and below 1540 px while the side menu is open (it takes 260 px). Below 900 px lists
   are cards (fsh.css). */
@media (min-width: 900px) and (max-width: 1279.98px) {
    .mud-table-head .mud-table-cell,
    .mud-table-head th.mud-table-cell {
        white-space: normal;
    }

    .mud-table .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 1280px) and (max-width: 1539.98px) {
    .mud-drawer-open-persistent-left .mud-table-head .mud-table-cell,
    .mud-drawer-open-persistent-left .mud-table-head th.mud-table-cell {
        white-space: normal;
    }

    .mud-drawer-open-persistent-left .mud-table .mud-table-cell {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.mud-table-head .mud-table-cell .mud-table-sort-label {
    color: inherit;
}

/* The sort arrow is hidden until hover or sort, but it still takes room: keep that room small. */
.mud-table-head .mud-table-sort-label .mud-table-sort-label-icon {
    font-size: 16px;
    margin-left: 2px;
    margin-right: 0;
}

.mud-table-body .mud-table-cell {
    color: var(--len-text);
    border-bottom-color: var(--len-border-2);
}

.mud-table-row {
    transition: background-color 120ms var(--len-ease);
}

.mud-table-pagination {
    color: var(--len-text-3);
    font-size: .8125rem;
}

.mud-table-pagination .mud-select .mud-input,
.mud-table-pagination-caption {
    font-size: .8125rem;
}

.mud-table-pagination-toolbar {
    border-top: 1px solid var(--len-border-2);
}

/* ---------- chips, tabs, badges ---------- */
.mud-chip {
    font-weight: 600;
    letter-spacing: normal;
}

.mud-chip.mud-chip-size-small {
    font-size: .75rem;
}

.mud-tabs-toolbar {
    border-bottom: 1px solid var(--len-border);
}

.mud-tab {
    min-width: 96px;
    min-height: 44px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--len-text-3);
}

.mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.mud-tab:hover {
    color: var(--len-text);
}

.mud-tab-slider {
    height: 2px;
    border-radius: 2px 2px 0 0;
}

/* ---------- overlays: dialogs, menus, tooltips, snackbars ---------- */
.mud-dialog {
    border-radius: var(--len-r-xl);
}

.mud-dialog .mud-dialog-title {
    font-weight: 700;
}

.mud-dialog .mud-dialog-title .mud-typography-h6 {
    font-size: 1.0625rem;
    font-weight: 700;
}

.mud-dialog .mud-dialog-actions {
    gap: 8px;
    padding: 12px 24px 20px;
}

.mud-dialog .mud-dialog-actions > :not(:first-child) {
    margin-left: 0;
}

.mud-popover {
    border-radius: var(--len-r-lg);
}

.mud-popover.mud-paper {
    border: 1px solid var(--len-border);
}

.mud-list-item {
    font-size: .875rem;
}

.mud-tooltip {
    padding: 6px 9px;
    border-radius: var(--len-r-sm);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
}

.mud-tooltip.mud-tooltip-default {
    background-color: #101828;
    color: #F9FAFB;
}

html[data-theme="dark"] .mud-tooltip.mud-tooltip-default {
    background-color: #E7ECF4;
    color: #0A1120;
}

.mud-snackbar {
    border-radius: var(--len-r-lg);
    box-shadow: var(--len-shadow-overlay);
    font-weight: 500;
}

/* MudBlazor 6 uses darkened severity text for text/outlined snackbars, even on dark surfaces. Pair each
   message with the matching status tone, and put translucent tints over a solid surface on every route. */
.mud-snackbar:is(.mud-alert-text-info, .mud-alert-outlined-info) {
    --len-toast-text: var(--len-t-cyan);
    --len-toast-bg: var(--len-t-cyan-bg);
    --len-toast-border: var(--len-t-cyan-bd);
}

.mud-snackbar:is(.mud-alert-text-success, .mud-alert-outlined-success) {
    --len-toast-text: var(--len-t-green);
    --len-toast-bg: var(--len-t-green-bg);
    --len-toast-border: var(--len-t-green-bd);
}

.mud-snackbar:is(.mud-alert-text-warning, .mud-alert-outlined-warning) {
    --len-toast-text: var(--len-t-amber);
    --len-toast-bg: var(--len-t-amber-bg);
    --len-toast-border: var(--len-t-amber-bd);
}

.mud-snackbar:is(.mud-alert-text-error, .mud-alert-outlined-error) {
    --len-toast-text: var(--len-t-red);
    --len-toast-bg: var(--len-t-red-bg);
    --len-toast-border: var(--len-t-red-bd);
}

.mud-snackbar[class*="mud-alert-text-"],
.mud-snackbar[class*="mud-alert-outlined-"] {
    color: var(--len-toast-text, var(--len-text));
    background-color: var(--len-surface);
    border-color: var(--len-toast-border, var(--len-border-strong));
}

.mud-snackbar[class*="mud-alert-text-"] {
    background-image: linear-gradient(var(--len-toast-bg, transparent), var(--len-toast-bg, transparent));
}

.mud-snackbar .mud-snackbar-icon,
.mud-snackbar .mud-alert-icon {
    color: inherit;
}

.mud-alert {
    border-radius: var(--len-r-lg);
}

.mud-overlay-dark {
    backdrop-filter: blur(2px);
}

/* ---------- app bar and drawer (shell details live in MainLayout/NavMenu) ---------- */
.mud-appbar.mud-appbar-fixed-top,
.mud-appbar {
    border-bottom: 1px solid var(--len-border);
}

.mud-drawer.mud-drawer-pos-left {
    border-right: 1px solid var(--len-border);
}

/* On phones the menu slides over the page, so it floats on the overlay shadow. */
.mud-drawer.mud-drawer-temporary.mud-drawer-pos-left {
    border-right: 0;
    box-shadow: var(--len-shadow-overlay);
}

/* The floating theme-manager tab is only left on the sign-in page; signed in, it sits in the app bar. */
.theme-button {
    opacity: .82;
    transition: opacity 150ms var(--len-ease);
}

.theme-button:hover {
    opacity: 1;
}

/* App bar: connection to the notification hub ("Realtime"). */
.len-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    margin: 0 6px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--len-border);
    border-radius: 999px;
    background: var(--len-surface);
    color: var(--len-text-2);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}

.len-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--len-t-red-dot);
}

.len-live--on   { color: var(--len-t-green); background: var(--len-t-green-bg); border-color: var(--len-t-green-bd); }
.len-live--on .len-live__dot   { background: var(--len-t-green-dot); }
.len-live--wait { color: var(--len-t-amber); background: var(--len-t-amber-bg); border-color: var(--len-t-amber-bd); }
.len-live--wait .len-live__dot { background: var(--len-t-amber-dot); }
.len-live--off  { color: var(--len-t-red);   background: var(--len-t-red-bg);   border-color: var(--len-t-red-bd); }

.len-live--compact {
    width: 26px;
    margin: 0 2px;
    padding: 0;
    justify-content: center;
}

/* The company logo is navy on transparent; on the dark app bar it sits on a white plate so "LEN" stays readable. */
html[data-theme="dark"] .logo-container img {
    border-radius: 6px;
    background: #FFFFFF;
}

/* ---------- sidebar (NavMenu) ----------
   Rounded rows inset from the edge; groups open onto a guide line; links inside a group drop their icon
   so deep levels keep room for the text; the page you are on is a soft navy row with a cyan tick. */
.mud-drawer-content > .mud-navmenu {
    padding: 8px 10px 28px;
}

.mud-drawer .mud-nav-link {
    position: relative;
    align-items: center;
    min-height: 36px;
    margin: 1px 0;
    padding: 6px 10px !important;
    border-radius: var(--len-r);
    color: var(--len-text-2);
    font-size: .875rem;
    line-height: 1.35;
    white-space: normal !important;
    transition: background-color 150ms var(--len-ease), color 150ms var(--len-ease);
}

.mud-drawer .mud-nav-link .mud-nav-link-text {
    margin-left: 10px;
    margin-inline-start: 10px;
    margin-inline-end: 0;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon,
.mud-drawer .mud-nav-link .mud-nav-link-expand-icon {
    flex: none;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mud-drawer .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--len-text-3);
}

.mud-drawer .mud-nav-link .mud-nav-link-expand-icon {
    color: var(--len-text-4);
}

/* MudBlazor paints an open group's chevron in the primary colour; keep it quiet. */
.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: currentColor;
}

.mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled),
.mud-drawer .mud-nav-link:focus:not(.mud-nav-link-disabled) {
    background-color: var(--len-surface-3);
    color: var(--len-text);
}

.mud-drawer .mud-nav-group > .mud-nav-link.mud-expanded {
    color: var(--len-text);
}

/* Inside a group the rows hang off a guide line drawn under the group icon. Links drop their icon so
   the third level still has room for its text. MudBlazor clips each link (ripple, overflow:hidden),
   so the "you are here" tick is an inset shadow on the row that sits over the line. */
.mud-drawer .mud-navgroup-collapse .mud-navmenu {
    margin-left: 19px;          /* under a top-level group icon: 10px padding + half the 18px icon */
    padding-left: 0;
    border-left: 1px solid var(--len-border);
}

.mud-drawer .mud-navgroup-collapse .mud-navgroup-collapse .mud-navmenu {
    margin-left: 27px;          /* under a nested group icon: 18px padding + half the icon */
}

.mud-drawer .mud-navgroup-collapse .mud-nav-link {
    padding-left: 18px !important;
    border-radius: 0 var(--len-r) var(--len-r) 0;
}

.mud-drawer .mud-navgroup-collapse .mud-nav-item {
    margin-left: -1px;          /* over the guide line */
}

.mud-drawer .mud-navgroup-collapse .mud-nav-item .mud-nav-link-icon {
    display: none;
}

.mud-drawer .mud-navgroup-collapse .mud-nav-item .mud-nav-link-text {
    margin-left: 0;
    margin-inline-start: 0;
}

/* The page you are on (NavLink "active", or the dashboard links' len-nav-current). */
.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.mud-drawer .mud-nav-item.len-nav-current > .mud-nav-link,
.mud-drawer .mud-nav-item.len-nav-current > .mud-nav-link:hover {
    background-color: var(--len-primary-soft);
    color: var(--len-primary-soft-text);
    font-weight: 600 !important;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .mud-nav-item.len-nav-current > .mud-nav-link .mud-nav-link-icon {
    color: var(--len-primary-soft-text) !important;
}

.mud-drawer .mud-navgroup-collapse .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-navgroup-collapse .mud-nav-item.len-nav-current > .mud-nav-link {
    box-shadow: inset 2px 0 0 var(--len-accent);
}

/* Section labels: Omnichannel, TMS, CMS, Finance, Personal, Administration. */
.nav-section-label {
    margin: 20px 10px 6px;
    color: var(--len-text-4);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* A count after a menu label, e.g. AWB edit requests waiting (amber = waiting for us). */
.nav-link-with-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

/* Touch: phones and tablets get taller rows. */
@media (max-width: 899px) {
    .mud-drawer .mud-nav-link {
        min-height: 42px;
        font-size: .9rem;
    }
}

/* ==========================================================================
   Shared LEN components (Components/Common: StatusBadge, PageHeader, ...)
   ========================================================================== */

/* StatusBadge: Bahasa label in sentence case, tone from StatusMap. */
.len-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 22px;
    padding: 0 9px 0 8px;
    border: 1px solid var(--len-t-neutral-bd);
    border-radius: 999px;
    background: var(--len-t-neutral-bg);
    color: var(--len-t-neutral);
    font-family: var(--len-sans);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}

.len-badge__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--len-t-neutral-dot);
}

.len-badge__text {
    overflow: hidden;
    /* Room for descenders (g, p, j): overflow:hidden clips at the line box. */
    line-height: 1.35;
    text-overflow: ellipsis;
}

.len-badge--sm { height: 20px; padding: 0 7px 0 6px; font-size: .6875rem; }
.len-badge--lg { height: 26px; padding: 0 11px 0 10px; font-size: .8125rem; }

.len-badge--navy   { color: var(--len-t-navy);   background: var(--len-t-navy-bg);   border-color: var(--len-t-navy-bd); }
.len-badge--cyan   { color: var(--len-t-cyan);   background: var(--len-t-cyan-bg);   border-color: var(--len-t-cyan-bd); }
.len-badge--amber  { color: var(--len-t-amber);  background: var(--len-t-amber-bg);  border-color: var(--len-t-amber-bd); }
.len-badge--green  { color: var(--len-t-green);  background: var(--len-t-green-bg);  border-color: var(--len-t-green-bd); }
.len-badge--red    { color: var(--len-t-red);    background: var(--len-t-red-bg);    border-color: var(--len-t-red-bd); }
.len-badge--violet { color: var(--len-t-violet); background: var(--len-t-violet-bg); border-color: var(--len-t-violet-bd); }

.len-badge--navy .len-badge__dot   { background: var(--len-t-navy-dot); }
.len-badge--cyan .len-badge__dot   { background: var(--len-t-cyan-dot); }
.len-badge--amber .len-badge__dot  { background: var(--len-t-amber-dot); }
.len-badge--green .len-badge__dot  { background: var(--len-t-green-dot); }
.len-badge--red .len-badge__dot    { background: var(--len-t-red-dot); }
.len-badge--violet .len-badge__dot { background: var(--len-t-violet-dot); }

/* Moving shipments pulse softly; reduced motion keeps the dot still. */
.len-badge--cyan .len-badge__dot {
    box-shadow: 0 0 0 0 rgba(30, 172, 226, .45);
    animation: len-pulse 2.4s var(--len-ease) infinite;
}

@keyframes len-pulse {
    0% { box-shadow: 0 0 0 0 rgba(30, 172, 226, .45); }
    70% { box-shadow: 0 0 0 5px rgba(30, 172, 226, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 172, 226, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .len-badge--cyan .len-badge__dot { animation: none; }
}

/* Guarded action: the reason sits next to the disabled control. */
.len-guard {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.len-guard__reason {
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.35;
}

/* Share bar: one row of segments, each a status share (dashboard status card). */
.len-share {
    display: flex;
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--len-surface-3);
    gap: 2px;
}

.len-share__seg {
    min-width: 3px;
    height: 100%;
    transition: flex-grow 300ms var(--len-ease);
}

.len-share__seg:first-child { border-radius: 999px 0 0 999px; }
.len-share__seg:last-child { border-radius: 0 999px 999px 0; }
.len-share__seg:only-child { border-radius: 999px; }

/* Page header (FshTitle): optional eyebrow above the title and the page's main actions on the right. */
.page-heading__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.page-heading__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--len-link);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.page-heading.page-heading--with-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

.page-heading--with-actions .page-heading__text {
    flex: 1 1 320px;
}

.page-heading__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* When the user may not use any of the page's buttons, no empty box is left beside the title. */
.page-heading__actions:empty {
    display: none;
}

@media (max-width: 599px) {
    .page-heading__actions {
        width: 100%;
    }

    .page-heading__actions > * {
        flex: 1 1 auto;
    }
}

/* Statistics strip (Manifest, DRS, Invoice, Petty Cash): one card, a tile per figure. A dot in the label is
   the tone of the status badge the figure counts. The separators are 1px shadows that the card clips at its
   edges, so tiles that wrap onto a second row on narrow screens get lines between rows too. */
.len-stats {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-lg);
    background: var(--len-surface);
    box-shadow: var(--len-shadow-xs);
}

.len-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

/* When the tiles (at least 128 px each) do not fit on one row, they wrap into even rows rather than leave one
   tile alone on the last row: seven as 4 + 3, six as 3 + 3, five as 3 + 2; the last tile of a shorter last row
   spans the empty slot. The card is the size reference. */
.len-stats {
    container-type: inline-size;
}

@container (min-width: 512px) and (max-width: 895.98px) {
    .len-stats__grid:has(> :nth-child(7)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .len-stats__grid > :nth-child(7):last-child {
        grid-column: span 2;
    }
}

@container (min-width: 384px) and (max-width: 767.98px) {
    .len-stats__grid:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (min-width: 384px) and (max-width: 639.98px) {
    .len-stats__grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .len-stats__grid > :nth-child(5):last-child {
        grid-column: span 2;
    }
}

.len-stat {
    min-width: 0;
    padding: 14px 18px;
    box-shadow: -1px 0 0 var(--len-border-2), 0 -1px 0 var(--len-border-2);
}

.len-stat__label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--len-text-3);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.len-stat__value {
    margin-top: 4px;
    overflow: hidden;
    color: var(--len-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.len-stat__value--negative {
    color: var(--len-t-red);
}

.len-stat__sub {
    margin-top: 2px;
    color: var(--len-text-3);
    font-size: .75rem;
}

.len-stat__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1976d2;
}

.len-stat__dot--orange { background: #f57c00; }
.len-stat__dot--purple { background: #7b1fa2; }
.len-stat__dot--green { background: #388e3c; }
.len-stat__dot--teal { background: #00695c; }
.len-stat__dot--red { background: #d32f2f; }
.len-stat__dot--sky { background: #0369a1; }
.len-stat__dot--violet { background: #6d28d9; }

/* Bulk bar: shown above a list while rows are selected (how many, then what can be done with them). The same on
   every list; it follows the theme's primary colour. */
.bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--len-primary) 22%, transparent);
    border-radius: var(--len-r-lg);
    background: var(--len-primary-soft);
}

.bulk-actions-text {
    font-weight: 600;
    color: var(--len-primary-soft-text);
}

/* Codes users compare (AWB, manifest, plate numbers): mono, navy link colour, no underline until hover. */
.len-code {
    font-family: var(--len-mono);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

a.len-code,
.len-code--link {
    color: var(--len-link);
    text-decoration: none;
    cursor: pointer;
}

a.len-code:hover,
.len-code--link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Detail pages (View AWB; next: shipment status, edit-request review, ...)
   A header with a back link, cards of label/value pairs and a side column for actions and status.
   ========================================================================== */

/* Header: back link, the code as the title with its status badge, a subtitle and the page's actions. */
.len-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.len-detail-head__text {
    flex: 1 1 360px;
    min-width: 0;
}

.len-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--len-link);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

.len-back:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.len-back:focus-visible {
    border-radius: var(--len-r-sm);
    outline: none;
    box-shadow: var(--len-ring);
}

.len-back .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.len-detail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

.len-detail-title__code {
    margin: 0;
    color: var(--len-text);
    font-family: var(--len-mono);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.len-detail-title .mud-icon-button {
    color: var(--len-text-3);
}

.len-detail-sub {
    margin: 4px 0 0;
    color: var(--len-text-3);
    font-size: .84375rem;
    line-height: 1.5;
}

/* Subtitle facts after the first, separated by a middle dot. */
.len-detail-sub__part::before {
    content: "\00B7";
    margin: 0 6px;
    color: var(--len-text-4);
}

.len-detail-head__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.len-detail-head__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 599px) {
    .len-detail-head__actions,
    .len-detail-head__buttons {
        align-items: stretch;
        width: 100%;
    }

    .len-detail-head__buttons > * {
        flex: 1 1 auto;
    }
}

/* A boxed note, e.g. why an action is not available now. */
.len-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 460px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface-3);
    color: var(--len-text-2);
    font-size: .78125rem;
    line-height: 1.45;
}

.len-note .mud-icon-root {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    font-size: 15px;
    color: var(--len-text-3);
}

.len-note b {
    color: var(--len-text);
    font-weight: 600;
}

/* An error box at the top of a page (e.g. data that could not be loaded). */
.len-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--len-t-red-bd);
    border-radius: var(--len-r-lg);
    background: var(--len-t-red-bg);
    color: var(--len-t-red);
    font-size: .8125rem;
    line-height: 1.5;
}

.len-alert .mud-icon-root {
    flex: none;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.len-alert ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* Two columns: the record on the left, actions and status on the right. */
.len-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    align-items: start;
    gap: 16px;
}

.len-detail-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (max-width: 1099px) {
    .len-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Card: a titled block on a page. */
.len-card {
    min-width: 0;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-lg);
    background: var(--len-surface);
    box-shadow: var(--len-shadow-xs);
}

.len-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--len-border-2);
}

.len-card__title {
    margin: 0;
    color: var(--len-text);
    font-size: .90625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
}

.len-card__sub {
    color: var(--len-text-3);
    font-size: .78125rem;
}

.len-card__head-end {
    margin-left: auto;
}

.len-card__body {
    padding: 14px 16px 16px;
}

.len-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--len-border-2);
    border-radius: 0 0 var(--len-r-lg) var(--len-r-lg);
    background: var(--len-surface-2);
    color: var(--len-text-3);
    font-size: .78125rem;
    line-height: 1.45;
}

.len-card__foot .mud-icon-root {
    flex: none;
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--len-text-4);
}

a.len-card__foot {
    justify-content: space-between;
    color: var(--len-link);
    font-weight: 500;
    text-decoration: none;
}

a.len-card__foot:hover {
    background: var(--len-surface-3);
}

a.len-card__foot:focus-visible {
    outline: none;
    box-shadow: inset var(--len-ring);
}

/* Sections inside a card, split by a dashed line and headed by a small caps label. */
.len-dsec {
    padding: 16px 0;
    border-top: 1px dashed var(--len-border);
}

.len-dsec:first-child {
    padding-top: 0;
    border-top: 0;
}

.len-dsec:last-child {
    padding-bottom: 0;
}

.len-dsec__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    color: var(--len-text-3);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.len-dsec__label .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--len-text-4);
}

/* Label above value, in four columns (two on tablets, one on phones). */
.len-kv-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
}

.len-kv-cols > div {
    min-width: 0;
}

.len-kv-cols .len-span-2 { grid-column: span 2; }
.len-kv-cols .len-span-3 { grid-column: span 3; }
.len-kv-cols .len-span-all { grid-column: 1 / -1; }

.len-kv__k {
    margin: 0 0 3px;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.4;
}

.len-kv__v {
    margin: 0;
    color: var(--len-text);
    font-size: .84375rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.len-kv__v.len-code {
    font-size: .8125rem;
    white-space: normal;
}

.len-kv__v .len-muted,
.len-dl .len-muted {
    font-weight: 500;
}

@media (max-width: 959px) {
    .len-kv-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .len-kv-cols .len-span-3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479px) {
    .len-kv-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .len-kv-cols .len-span-2 {
        grid-column: auto;
    }
}

/* Label beside value, one pair per row. */
.len-dl {
    display: grid;
    grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
    gap: 8px 14px;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
}

.len-dl > dt {
    color: var(--len-text-3);
}

.len-dl > dd {
    min-width: 0;
    margin: 0;
    color: var(--len-text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.len-dl > dd.is-strong {
    font-weight: 700;
}

.len-pre {
    white-space: pre-line;
}

/* Two parties side by side (sender and recipient), stacked on narrow screens. */
.len-party-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
}

.len-party-grid > * {
    min-width: 0;
}

@media (max-width: 767px) {
    .len-party-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A small data table inside a card. */
.len-dtable-wrap {
    overflow-x: auto;
}

.len-dtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--len-text);
    font-size: .8125rem;
}

.len-dtable th {
    height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid var(--len-border);
    background: var(--len-surface-2);
    color: var(--len-text-3);
    font-size: .75rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.len-dtable td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--len-border-2);
    vertical-align: middle;
}

/* A second, quieter line in a cell (e.g. the volume under the dimensions). */
.len-dtable__sub {
    display: block;
    margin-top: 1px;
    color: var(--len-text-3);
    font-size: .71875rem;
    font-weight: 400;
}

.len-dtable tbody tr:last-child td {
    border-bottom: 0;
}

.len-dtable tfoot td {
    border-top: 1px solid var(--len-border);
    background: var(--len-surface-2);
    font-weight: 600;
}

.len-dtable .is-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.len-dtable .is-strong {
    font-weight: 600;
}

/* Choice cards: a radio group drawn as cards (e.g. the AWB print mode). */
.len-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.len-choice-list > legend {
    margin: 0 0 8px;
    padding: 0;
    color: var(--len-text-2);
    font-size: .78125rem;
    font-weight: 600;
}

.len-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface);
    cursor: pointer;
    transition: border-color 120ms var(--len-ease), background-color 120ms var(--len-ease), box-shadow 120ms var(--len-ease);
}

.len-choice:hover {
    border-color: var(--len-border-strong);
}

.len-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.len-choice__rad {
    display: grid;
    flex: none;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid var(--len-border-strong);
    border-radius: 50%;
    background: var(--len-surface);
}

.len-choice__t {
    display: block;
    color: var(--len-text);
    font-size: .84375rem;
    font-weight: 600;
    line-height: 1.4;
}

.len-choice__d {
    display: block;
    margin-top: 1px;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.4;
}

.len-choice.is-on {
    border-color: var(--len-primary);
    background: var(--len-primary-soft);
    box-shadow: 0 0 0 1px var(--len-primary);
}

.len-choice.is-on .len-choice__rad {
    border-color: var(--len-primary);
}

.len-choice.is-on .len-choice__rad::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--len-primary);
}

.len-choice:has(> input:focus-visible) {
    box-shadow: var(--len-ring);
}

.len-choice.is-disabled {
    cursor: not-allowed;
    opacity: .6;
}

/* The latest event of a record, toned like its status. */
.len-last-ev {
    --len-ev: var(--len-t-cyan);
    --len-ev-bg: var(--len-t-cyan-bg);
    --len-ev-bd: var(--len-t-cyan-bd);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--len-border-2);
    border-radius: var(--len-r);
    background: var(--len-surface-2);
}

.len-last-ev--neutral { --len-ev: var(--len-t-neutral); --len-ev-bg: var(--len-t-neutral-bg); --len-ev-bd: var(--len-t-neutral-bd); }
.len-last-ev--navy { --len-ev: var(--len-t-navy); --len-ev-bg: var(--len-t-navy-bg); --len-ev-bd: var(--len-t-navy-bd); }
.len-last-ev--amber { --len-ev: var(--len-t-amber); --len-ev-bg: var(--len-t-amber-bg); --len-ev-bd: var(--len-t-amber-bd); }
.len-last-ev--green { --len-ev: var(--len-t-green); --len-ev-bg: var(--len-t-green-bg); --len-ev-bd: var(--len-t-green-bd); }
.len-last-ev--red { --len-ev: var(--len-t-red); --len-ev-bg: var(--len-t-red-bg); --len-ev-bd: var(--len-t-red-bd); }
.len-last-ev--violet { --len-ev: var(--len-t-violet); --len-ev-bg: var(--len-t-violet-bg); --len-ev-bd: var(--len-t-violet-bd); }

.len-last-ev__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--len-ev-bd);
    border-radius: 50%;
    background: var(--len-ev-bg);
    color: var(--len-ev);
}

.len-last-ev__icon .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.len-last-ev__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--len-text-3);
    font-size: .78125rem;
    line-height: 1.45;
}

.len-last-ev__text b {
    color: var(--len-text);
    font-size: .84375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Destination pin of a recipient: how exact it is, its coordinates and the button to set it. */
.len-pin {
    --len-pin: var(--len-t-neutral);
    --len-pin-bg: var(--len-t-neutral-bg);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface-2);
}

.len-pin--exact { --len-pin: var(--len-t-green); --len-pin-bg: var(--len-t-green-bg); }
.len-pin--area { --len-pin: var(--len-t-amber); --len-pin-bg: var(--len-t-amber-bg); }
.len-pin--error { --len-pin: var(--len-t-red); --len-pin-bg: var(--len-t-red-bg); }

.len-pin__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--len-pin-bg);
    color: var(--len-pin);
}

.len-pin__icon .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.len-pin__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: var(--len-text-3);
    font-size: .78125rem;
    line-height: 1.45;
}

/* Title on the left, the button on the right; the text below gets the full width. */
.len-pin__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    min-height: 30px;
}

.len-pin__title {
    color: var(--len-text);
    font-size: .8125rem;
    font-weight: 600;
}

.len-pin__src {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: var(--len-pin);
    font-weight: 600;
}

.len-pin__coords {
    color: var(--len-text-2);
    font-family: var(--len-mono);
    font-size: .75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.len-pin__action {
    flex: none;
}

/* Busy layer while a page loads or saves: a dim layer with a small panel; snackbars and dialogs stay above it. */
.len-busy {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: grid;
    place-items: center;
    background: rgba(16, 24, 40, .28);
}

.len-busy__panel {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 14px 18px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-lg);
    background: var(--len-surface);
    box-shadow: var(--len-shadow-overlay);
    color: var(--len-text-2);
    font-size: .875rem;
    font-weight: 500;
}

.len-busy__spinner {
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--len-border);
    border-top-color: var(--len-accent);
    border-radius: 50%;
    animation: len-busy-spin .8s linear infinite;
}

@keyframes len-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .len-busy__spinner {
        animation-duration: 2.4s;
    }
}

/* ==========================================================================
   Form pages (AWB, Booking and request edit)
   Numbered section cards, labelled fields and a sticky summary with the save button. The pages keep
   their native inputs (.form-control) and SearchableSelect; inside .len-form-page they get one look.
   ========================================================================== */

.len-form-page {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}

.len-detail-title__text {
    margin: 0;
    color: var(--len-text);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.len-req-mark {
    color: var(--len-t-red);
    font-weight: 600;
}

.len-detail-sub a {
    color: var(--len-link);
    font-weight: 500;
    text-decoration: none;
}

.len-detail-sub a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Form on the left, summary on the right. */
.len-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 16px;
}

@media (max-width: 1099px) {
    .len-form-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Segmented switch, e.g. Auto AWB / Manual AWB. */
.len-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface-3);
}

.len-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--len-text-3);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms var(--len-ease), color 150ms var(--len-ease);
}

.len-seg__btn:hover {
    color: var(--len-text);
}

.len-seg__btn.is-on {
    background: var(--len-surface);
    color: var(--len-text);
    box-shadow: var(--len-shadow-xs);
}

.len-seg__btn:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

.len-seg__btn .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* Jump links to the form's sections, each with its state. */
.len-sec-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.len-sec-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--len-border);
    border-radius: 999px;
    background: var(--len-surface);
    color: var(--len-text-2);
    font: inherit;
    font-size: .78125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 150ms var(--len-ease), color 150ms var(--len-ease);
}

.len-sec-nav__btn:hover {
    border-color: var(--len-border-strong);
    color: var(--len-text);
}

.len-sec-nav__btn:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

.len-sec-nav__btn .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--len-text-4);
}

.len-sec-nav__btn.is-ok .mud-icon-root {
    color: var(--len-t-green);
}

.len-sec-nav__btn.is-miss {
    border-color: var(--len-t-red-bd);
    color: var(--len-t-red);
}

.len-sec-nav__btn.is-miss .mud-icon-root {
    color: var(--len-t-red);
}

.len-sec-nav__btn.is-changed {
    border-color: var(--len-t-amber-bd);
    color: var(--len-t-amber);
}

.len-sec-nav__btn.is-changed .mud-icon-root {
    color: var(--len-t-amber);
}

/* Form section cards: a step number before the title and the section's state at the end. */
.len-form-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.len-form-col > .len-card {
    scroll-margin-top: 84px;
}

/* Brief ring after a jump link scrolled to the section (window.scrollToElement adds .highlighted). */
.len-form-col > .len-card.highlighted {
    box-shadow: var(--len-ring);
    transition: box-shadow 300ms var(--len-ease);
}

.len-step {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--len-surface-3);
    color: var(--len-text-2);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.len-sec-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: .78125rem;
    font-weight: 500;
}

.len-sec-state .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

.len-sec-state--ok { color: var(--len-t-green); }
.len-sec-state--miss { color: var(--len-t-red); }
.len-sec-state--changed { color: var(--len-t-amber); }

/* Fields: label, control, hint. --len-cols sets the columns; fields can span 2 or the full row. */
.len-form-grid {
    --len-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--len-cols), minmax(0, 1fr));
    gap: 14px 16px;
}

.len-form-grid--3 { --len-cols: 3; }
.len-form-grid--4 { --len-cols: 4; }

.len-form-grid + .len-form-grid {
    margin-top: 14px;
}

.len-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.len-field--span-2 { grid-column: span 2; }
.len-field--span-3 { grid-column: span 3; }
.len-field--full { grid-column: 1 / -1; }

@media (max-width: 959px) {
    .len-form-grid--3,
    .len-form-grid--4 {
        --len-cols: 2;
    }

    .len-field--span-3 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599px) {
    .len-form-grid,
    .len-form-grid--3,
    .len-form-grid--4 {
        --len-cols: 1;
    }

    .len-field--span-2 {
        grid-column: 1 / -1;
    }
}

.len-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0;
    color: var(--len-text-2);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.len-label.is-req::after {
    content: "*";
    color: var(--len-t-red);
    font-weight: 600;
}

.len-hint {
    margin: 0;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.45;
}

.len-hint b {
    color: var(--len-text-2);
    font-weight: 600;
}

.len-hint--error {
    color: var(--len-t-red);
}

.len-hint--above {
    margin: -4px 0 14px;
}

/* Native inputs on form pages, including the inputs inside SearchableSelect and SavedAddressPicker. */
.len-form-page .form-control {
    display: block;
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid var(--len-border-strong);
    border-radius: var(--len-r);
    background: var(--len-surface);
    color: var(--len-text);
    font: inherit;
    font-size: .875rem;
    line-height: 1.5;
    transition: border-color 150ms var(--len-ease), box-shadow 150ms var(--len-ease);
}

.len-form-page .form-control::placeholder {
    color: var(--len-text-4);
    opacity: 1;
}

.len-form-page .form-control:hover:not(:disabled):not([readonly]) {
    border-color: var(--len-text-4);
}

.len-form-page .form-control:focus {
    border-color: var(--len-primary);
    outline: none;
    box-shadow: var(--len-ring);
}

.len-form-page .form-control[readonly],
.len-form-page .form-control:disabled {
    border-style: dashed;
    background: var(--len-surface-2);
    color: var(--len-text-2);
}

.len-form-page textarea.form-control {
    min-height: 64px;
    resize: vertical;
}

.len-form-page input[type="number"].form-control {
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .len-form-page .form-control {
    color-scheme: dark;
}

/* Hint line rendered by the shared pickers (HintText). */
.len-form-page .form-hint {
    display: block;
    margin-top: 6px;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.45;
}

.len-form-page .form-hint i {
    margin-right: 4px;
    color: var(--len-text-4);
}

/* Keep room for the clear and chevron buttons of the shared pickers. */
.len-form-page .searchable-select-input {
    padding-right: 56px;
}

.len-form-page .saved-address-input {
    padding-right: 38px;
}

/* A field that differs from the saved AWB (edit page). */
.len-form-page .form-control.is-changed,
.len-form-page .is-changed .form-control {
    border-color: var(--len-t-amber);
    background: var(--len-t-amber-bg);
}

.len-changed-tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--len-t-amber-bd);
    border-radius: 4px;
    background: var(--len-t-amber-bg);
    color: var(--len-t-amber);
    font-size: .6875rem;
    font-weight: 600;
}

.len-was {
    color: var(--len-text-4);
    text-decoration: line-through;
}

/* In a label the tag comes after the required mark. */
.len-label .len-changed-tag {
    order: 1;
}

.len-dim-empty__title .len-changed-tag {
    margin-left: 6px;
    vertical-align: 1px;
}

/* A unit after the value, e.g. kg or m³. */
.len-affix {
    position: relative;
}

.len-affix > .form-control {
    padding-right: 48px;
}

.len-affix > .form-control::-webkit-inner-spin-button,
.len-affix > .form-control::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.len-affix > input[type="number"].form-control {
    -moz-appearance: textfield;
}

.len-affix__unit {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--len-text-3);
    font-size: .8125rem;
    pointer-events: none;
}

/* Search box with a result list (e.g. the destination village). */
.len-ac {
    position: relative;
}

.len-ac__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 1100;
    max-height: 300px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-lg);
    background: var(--len-surface);
    box-shadow: var(--len-shadow-overlay);
}

.len-ac__item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--len-r-sm);
    cursor: pointer;
}

.len-ac__item:hover {
    background: var(--len-surface-3);
}

.len-ac__item > .mud-icon-root {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    font-size: 16px;
    color: var(--len-text-4);
}

.len-ac__main {
    display: block;
    color: var(--len-text);
    font-size: .84375rem;
    font-weight: 600;
}

.len-ac__sub {
    display: block;
    margin-top: 1px;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.4;
}

.len-ac__state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: var(--len-text-3);
    font-size: .8125rem;
}

/* A value picked from a list, with where it came from and a button to change it. */
.len-picked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 38px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--len-t-green-bd);
    border-radius: var(--len-r);
    background: var(--len-t-green-bg);
    color: var(--len-text);
    font-size: .875rem;
}

.len-picked > .mud-icon-root {
    flex: none;
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--len-t-green);
}

.len-picked__text {
    flex: 1 1 200px;
    min-width: 0;
    font-weight: 500;
}

.len-picked__src {
    color: var(--len-text-3);
    font-size: .75rem;
    white-space: nowrap;
}

/* Per-koli dimensions: an empty state with the button, or a table with the totals. */
.len-dim-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px dashed var(--len-border-strong);
    border-radius: var(--len-r-lg);
    background: var(--len-surface-2);
}

.len-dim-empty__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--len-border);
    border-radius: 50%;
    background: var(--len-surface);
    color: var(--len-text-3);
}

.len-dim-empty__icon .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.len-dim-empty__text {
    flex: 1 1 260px;
    min-width: 0;
    color: var(--len-text-3);
    font-size: .78125rem;
    line-height: 1.45;
}

.len-dim-empty__title {
    display: block;
    margin-bottom: 2px;
    color: var(--len-text);
    font-size: .84375rem;
    font-weight: 600;
}

.len-subsec {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-lg);
}

.len-subsec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--len-border-2);
    background: var(--len-surface-2);
}

.len-subsec__title {
    margin: 0;
    color: var(--len-text);
    font-size: .84375rem;
    font-weight: 600;
}

.len-subsec__head > .mud-button-root {
    margin-left: auto;
}

.len-subsec__foot {
    padding: 8px 12px;
    border-top: 1px solid var(--len-border-2);
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.45;
}

/* Summary next to the form: route, key facts, section checklist and the save button. */
.len-summary {
    position: sticky;
    top: 80px;
}

@media (max-width: 1099px) {
    .len-summary {
        position: static;
    }
}

.len-route {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--len-border-2);
    border-radius: var(--len-r);
    background: var(--len-surface-2);
}

.len-route > .mud-icon-root {
    flex: none;
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--len-text-4);
}

.len-route__end {
    flex: 1 1 0;
    min-width: 0;
}

.len-route__end:last-child {
    text-align: right;
}

.len-route__k {
    display: block;
    color: var(--len-text-4);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.len-route__v {
    display: block;
    color: var(--len-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.len-route__v.is-empty {
    color: var(--len-text-4);
    font-weight: 500;
}

/* Origin above destination: for a narrow column or a destination that is a full address. */
.len-route--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.len-route--stack > .mud-icon-root {
    transform: rotate(90deg);
}

.len-route--stack .len-route__end,
.len-route--stack .len-route__end:last-child {
    flex: none;
    width: 100%;
    text-align: left;
}

.len-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--len-border-2);
    list-style: none;
}

.len-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--len-text-2);
    font-size: .8125rem;
    line-height: 1.4;
}

.len-checklist__item > .mud-icon-root {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    font-size: 16px;
    color: var(--len-text-4);
}

.len-checklist__item.is-ok > .mud-icon-root { color: var(--len-t-green); }
.len-checklist__item.is-miss > .mud-icon-root { color: var(--len-t-red); }
.len-checklist__item.is-changed > .mud-icon-root { color: var(--len-t-amber); }

.len-checklist__why {
    display: block;
    color: var(--len-t-red);
    font-size: .75rem;
}

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

/* What is still missing before the form can be saved; each item jumps to its section. */
.len-lock {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface-3);
    color: var(--len-text-2);
    font-size: .78125rem;
    line-height: 1.45;
}

.len-lock__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--len-text);
    font-weight: 600;
}

.len-lock__title .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--len-text-3);
}

.len-lock ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.len-lock__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--len-link);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.len-lock__link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.len-lock__link:focus-visible {
    border-radius: 3px;
    outline: none;
    box-shadow: var(--len-ring);
}

.len-note--ok {
    max-width: none;
    border-color: var(--len-t-green-bd);
    background: var(--len-t-green-bg);
    color: var(--len-t-green);
}

.len-note--ok .mud-icon-root {
    color: var(--len-t-green);
}

/* Changes since the AWB was opened (edit page): field, old value struck through, new value. */
.len-changes {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.len-changes__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--len-border-2);
}

.len-changes__item:first-child {
    padding-top: 0;
}

.len-changes__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--len-text);
    font-size: .8125rem;
    font-weight: 600;
}

.len-changes__sec {
    color: var(--len-text-4);
    font-size: .71875rem;
    font-weight: 500;
    white-space: nowrap;
}

.len-changes__vals {
    margin-top: 2px;
    color: var(--len-text);
    font-size: .8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.len-changes__vals .mud-icon-root {
    width: 13px;
    height: 13px;
    margin: 0 4px;
    font-size: 13px;
    color: var(--len-text-4);
    vertical-align: -2px;
}

.len-changes__empty {
    margin: 0;
    color: var(--len-text-3);
    font-size: .8125rem;
}

/* The field name jumps to its section. */
.len-changes__field {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.len-changes__field:hover {
    color: var(--len-link);
    text-decoration: underline;
}

.len-changes__field:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--len-ring);
}

/* A long list scrolls inside the summary so Update and Batal stay in view. */
.len-summary .len-changes {
    max-height: min(46vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1099px) {
    .len-summary .len-changes {
        max-height: none;
    }
}

/* A notice that something waits (e.g. an edit request still pending); same shape as .len-alert. */
.len-alert--amber {
    border-color: var(--len-t-amber-bd);
    background: var(--len-t-amber-bg);
    color: var(--len-t-amber);
}

.len-alert strong {
    font-weight: 600;
}

/* A note that may use the full width of its card. */
.len-note--block {
    max-width: none;
}

/* What the field looks mean: editable, locked, changed (request edit page). */
.len-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    color: var(--len-text-3);
    font-size: .75rem;
    list-style: none;
}

.len-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.len-legend__swatch {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
    border: 1px solid var(--len-border-strong);
    border-radius: 4px;
    background: var(--len-surface);
}

.len-legend__swatch--locked {
    border-style: dashed;
    background: var(--len-surface-2);
}

.len-legend__swatch--locked .mud-icon-root {
    width: 10px;
    height: 10px;
    font-size: 10px;
    color: var(--len-text-3);
}

.len-legend__swatch--changed {
    border-color: var(--len-t-amber);
    background: var(--len-t-amber-bg);
}

/* A field that cannot be changed here: a lock before the value. */
.len-locked {
    position: relative;
}

.len-locked > .mud-icon-root {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 15px;
    height: 15px;
    font-size: 15px;
    color: var(--len-text-4);
    transform: translateY(-50%);
    pointer-events: none;
}

.len-form-page .len-locked > .form-control {
    padding-left: 33px;
}

/* Koli rows edited in place: compact inputs, the changed cells marked, the changed row tinted. */
.len-dtable--edit th,
.len-dtable--edit th.is-num {
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.3;
    white-space: normal;
    vertical-align: bottom;
}

.len-dtable--edit th,
.len-dtable--edit td {
    padding-left: 6px;
    padding-right: 6px;
}

.len-dtable--edit th:first-child,
.len-dtable--edit td:first-child {
    padding-left: 12px;
}

.len-dtable--edit th:last-child,
.len-dtable--edit td:last-child {
    padding-right: 12px;
}

.len-koli-no {
    font-weight: 600;
    white-space: nowrap;
}

.len-koli-dims {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.len-koli-dims__x {
    color: var(--len-text-4);
    font-size: .75rem;
}

.len-form-page .len-dtable .len-cell-input {
    display: inline-block;
    width: 72px;
    min-height: 32px;
    padding: 4px 8px;
    font-size: .8125rem;
    text-align: right;
    -moz-appearance: textfield;
}

.len-form-page .len-dtable .len-cell-input::-webkit-inner-spin-button,
.len-form-page .len-dtable .len-cell-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.len-form-page .len-dtable .len-cell-input--dim {
    width: 52px;
}

.len-form-page .len-dtable .len-cell-input--rp {
    width: 86px;
}

/* The description takes the room that is left. */
.len-form-page .len-dtable .len-cell-input--text {
    width: 100%;
    min-width: 108px;
    text-align: left;
}

/* Second lines may wrap here, so the table fits the form column on common screens. */
.len-dtable--edit .len-dtable__sub {
    white-space: normal;
}

.len-dtable tr.is-row-changed > td {
    background: var(--len-t-amber-bg);
}

.len-form-page .len-dtable td.is-changed .form-control {
    background: var(--len-surface);
}

/* Totals under the koli table. */
.len-koli-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
}

.len-koli-stats > div {
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--len-border-2);
    border-radius: var(--len-r);
    background: var(--len-surface-2);
}

.len-koli-stats dt {
    color: var(--len-text-3);
    font-size: .71875rem;
    font-weight: 500;
}

.len-koli-stats dd {
    margin: 2px 0 0;
    color: var(--len-text);
    font-size: .875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.len-koli-stats dd.is-strong {
    font-weight: 700;
}

@media (max-width: 959px) {
    .len-koli-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.len-koli-foot {
    margin-top: 12px;
}

/* The reason field in the summary, under the changes. */
.len-reason {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--len-border-2);
}

/* A small spinner inside a button while it works. */
.mud-button-root .len-btn-spinner.mud-progress-circular {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: inherit;
}

/* ==========================================================================
   List pages (AWB, manifest, booking, DRS, shipment status, petty cash, inventory, CMS, ...)
   About 25 pages repeat the same <style> blocks: period pills, a filter bar of native inputs and row
   action links. These rules carry one more selector part than the pages' own, so they win without
   !important and every list page looks the same.
   ========================================================================== */

/* Period: one segmented control, the chosen period on a raised tab. */
div.period-filter-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--len-border);
    border-radius: 10px;
    background: var(--len-surface-3);
}

div.period-filter-container > .period-btn {
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--len-text-2);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color 150ms var(--len-ease), color 150ms var(--len-ease), box-shadow 150ms var(--len-ease);
}

div.period-filter-container > .period-btn:hover:not(.active) {
    background: color-mix(in srgb, var(--len-primary) 6%, transparent);
    color: var(--len-text);
}

div.period-filter-container > .period-btn.active {
    background: var(--len-primary);
    color: var(--len-on-primary);
    font-weight: 600;
    box-shadow: var(--len-shadow-xs);
}

div.period-filter-container > .period-btn:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

@media (max-width: 600px) {
    div.period-filter-container {
        display: flex;
    }
}

/* Filter bar: native inputs and selects drawn like the MudBlazor fields. */
.filter-bar input:not([type="checkbox"]):not([type="radio"]),
.filter-bar select:not([multiple]) {
    border-color: var(--len-border-strong);
    border-radius: var(--len-r);
    background-color: var(--len-surface);
    color: var(--len-text);
    transition: border-color 150ms var(--len-ease), box-shadow 150ms var(--len-ease);
}

.filter-bar input:not([type="checkbox"]):not([type="radio"]):hover,
.filter-bar select:not([multiple]):hover {
    border-color: var(--len-text-4);
}

.filter-bar input:not([type="checkbox"]):not([type="radio"]):focus,
.filter-bar select:not([multiple]):focus {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--len-ring);
}

.filter-bar input:not([type="checkbox"]):not([type="radio"])::placeholder {
    color: var(--len-text-4);
    opacity: 1;
}

/* Row actions: the same on every list, whatever the page's own rules say (several set sizes and colours with
   !important, hence the !important here). Every icon button and icon link is a 32 px square with an 18 px icon,
   grey at rest; hover and keyboard focus show the theme's primary on a soft tint, and delete turns red.
   The icons start at the left of the cell (pages used to centre them), so a row with fewer actions does not
   shift the others: the first icon is in the same place on every row. */
.mud-table-cell .action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 4px !important;
}

.mud-table-cell .action-buttons .mud-icon-button,
.mud-table-cell .mud-icon-button.action-btn,
.mud-table-cell a.action-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: var(--len-r) !important;
    background-color: transparent;
    color: var(--len-text-3) !important;
    text-decoration: none;
    transition: background-color 150ms var(--len-ease), color 150ms var(--len-ease);
}

.mud-table-cell .action-buttons .mud-icon-button .mud-icon-root,
.mud-table-cell .mud-icon-button.action-btn .mud-icon-root,
.mud-table-cell a.action-link .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px !important;
}

.mud-table-cell .action-buttons .mud-icon-button:hover,
.mud-table-cell .action-buttons .mud-icon-button:focus-visible,
.mud-table-cell .mud-icon-button.action-btn:hover,
.mud-table-cell .mud-icon-button.action-btn:focus-visible,
.mud-table-cell a.action-link:hover,
.mud-table-cell a.action-link:focus-visible {
    background-color: var(--len-primary-soft) !important;
    color: var(--len-link) !important;
    outline: none;
}

/* Delete stays recognisable: grey at rest, red on hover. */
.mud-table-cell .action-buttons .mud-icon-button.mud-icon-button-color-error:hover,
.mud-table-cell .action-buttons .mud-icon-button.mud-icon-button-color-error:focus-visible,
.mud-table-cell .mud-icon-button.action-btn.mud-icon-button-color-error:hover,
.mud-table-cell .mud-icon-button.action-btn.mud-icon-button-color-error:focus-visible {
    background-color: var(--len-t-red-bg) !important;
    color: var(--len-t-red) !important;
}

.mud-table-cell .action-buttons .mud-icon-button:disabled,
.mud-table-cell .mud-icon-button.action-btn:disabled {
    background-color: transparent !important;
    color: var(--len-text-4) !important;
}

/* A spinner in place of a button while its action runs keeps the button's size. */
.mud-table-cell .action-buttons .mud-progress-circular {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px !important;
    margin: 7px;
}

/* Row actions stay on one line while the table has room, so rows keep one height. When the content area is
   narrow (the widths of the compact cells above), four or more icons wrap into two even rows (2 + 2, 3 + 3,
   4 + 4) rather than piling up one icon per line, so the table can still fit the page. */
@media (min-width: 900px) {
    .mud-table-cell .action-buttons {
        flex-wrap: nowrap !important;
    }
}

@media (min-width: 900px) and (max-width: 1279.98px) {
    .mud-table-cell .action-buttons:has(> :nth-child(4)) {
        flex-wrap: wrap !important;
        width: 68px;
    }

    .mud-table-cell .action-buttons:has(> :nth-child(5)) {
        width: 104px;
    }

    .mud-table-cell .action-buttons:has(> :nth-child(7)) {
        width: 140px;
    }
}

@media (min-width: 1280px) and (max-width: 1539.98px) {
    .mud-drawer-open-persistent-left .mud-table-cell .action-buttons:has(> :nth-child(4)) {
        flex-wrap: wrap !important;
        width: 68px;
    }

    .mud-drawer-open-persistent-left .mud-table-cell .action-buttons:has(> :nth-child(5)) {
        width: 104px;
    }

    .mud-drawer-open-persistent-left .mud-table-cell .action-buttons:has(> :nth-child(7)) {
        width: 140px;
    }
}

/* ==========================================================================
   Edit request review (mockup 06): old and new values side by side, one card per koli, the decision.
   ========================================================================== */

/* A table inside a card body with its own frame. */
.len-dtable-wrap--boxed {
    border: 1px solid var(--len-border-2);
    border-radius: var(--len-r);
}

/* Old and new values: the old value on red, the new one on green with an arrow before it. */
.len-diff th {
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.3;
    vertical-align: bottom;
}

.len-diff td {
    line-height: 1.5;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.len-diff .len-diff__field {
    width: 28%;
}

.len-diff td.len-diff__field {
    color: var(--len-text);
    font-weight: 600;
}

.len-diff td.len-diff__old {
    background: var(--len-t-red-bg);
    color: var(--len-text-2);
}

.len-diff td.len-diff__new {
    background: var(--len-t-green-bg);
    color: var(--len-text);
    font-weight: 500;
}

.len-diff--main td.len-diff__new {
    position: relative;
    padding-left: 30px;
}

.len-diff__arrow.mud-icon-root {
    position: absolute;
    top: 12px;
    left: 9px;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: var(--len-text-4);
}

.len-diff .len-muted {
    white-space: nowrap;
}

/* "Nilai lama" / "Nilai baru" above each value on phones, where the table header is hidden. */
.len-diff__tag {
    display: none;
}

/* Koli changes: one small card per koli. */
.len-koli-changes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
    gap: 12px;
}

.len-koli-change {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--len-border-2);
    border-radius: var(--len-r);
    background: var(--len-surface);
}

.len-koli-change__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--len-border-2);
    background: var(--len-surface-2);
}

.len-koli-change__head .mud-icon-root {
    flex: none;
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: var(--len-text-4);
}

.len-koli-change__title {
    color: var(--len-text);
    font-size: .8125rem;
    font-weight: 700;
}

.len-koli-change__count {
    margin-left: auto;
    color: var(--len-text-3);
    font-size: .75rem;
}

.len-diff--koli th {
    background: var(--len-surface);
}

.len-diff--koli .len-diff__field {
    width: 34%;
}

.len-diff--koli th:not(.len-diff__field) {
    width: 33%;
}

/* A box that sits inside a section, without the page margin under it. */
.len-alert--flush {
    margin: 0;
}

/* A link at the end of a card head (e.g. Lihat AWB). */
.len-head-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--len-link);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.len-head-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.len-head-link:focus-visible {
    border-radius: var(--len-r-sm);
    outline: none;
    box-shadow: var(--len-ring);
}

.len-head-link .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* The decision: notes, Tolak and Setujui side by side, a note on what approving does. */
.len-label__opt {
    color: var(--len-text-3);
    font-weight: 400;
}

.len-decision {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
    margin-top: 14px;
}

.len-decision__note {
    margin-top: 12px;
}

@media (max-width: 599px) {
    /* Each change stacks: the field on top, old and new value side by side under it. */
    .len-diff--main thead {
        display: none;
    }

    .len-diff--main,
    .len-diff--main tbody {
        display: block;
    }

    .len-diff--main tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        border-bottom: 1px solid var(--len-border-2);
    }

    .len-diff--main tbody tr:last-child {
        border-bottom: 0;
    }

    .len-diff--main td {
        border-bottom: 0;
    }

    .len-diff--main td.len-diff__field {
        grid-column: 1 / -1;
        width: auto;
        padding-bottom: 6px;
    }

    .len-diff__tag {
        display: block;
        margin-bottom: 2px;
        color: var(--len-text-3);
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

/* A count of waiting items as a button that filters the list to them (edit request list). */
.len-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--len-t-amber-bd);
    border-radius: var(--len-r);
    background: var(--len-t-amber-bg);
    color: var(--len-t-amber);
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 150ms var(--len-ease), box-shadow 150ms var(--len-ease);
}

.len-pending-chip:hover {
    border-color: var(--len-t-amber-dot);
}

.len-pending-chip:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

.len-pending-chip[aria-pressed="true"] {
    cursor: default;
}

.len-pending-chip .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--len-t-amber-dot);
}

.len-pending-chip b {
    font-weight: 700;
}

.len-pending-chip__act {
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid var(--len-t-amber-bd);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Phone: the date and customer filters fill the width like the search and status fields (the invoice list already does this). */
@media (max-width: 600px) {
    .filter-bar input[type="date"].filter-date,
    .filter-bar > .filter-customer {
        width: 100%;
        max-width: none;
    }
}

/* ==========================================================================
   Shipment status detail (mockup 08): AWB summary, tracking map, status
   history (timeline) and the manual status (POD) form.
   ========================================================================== */

/* Summary: six facts in one row on wide screens, three on laptops, two on phones. */
.len-ship-kv {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1279px) {
    .len-ship-kv {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .len-ship-kv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.len-ship-parties {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--len-border);
}

.len-ship-party .len-dsec__label {
    margin-bottom: 6px;
}

.len-ship-party__name {
    margin: 0 0 4px;
    color: var(--len-text);
    font-size: .90625rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.len-ship-party__line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 0;
    color: var(--len-text-2);
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.len-ship-party__line .mud-icon-root {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--len-text-3);
    font-size: 15px;
}

.len-ship-grid {
    margin-top: 16px;
}

.len-ship-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/* The tracking map is the first card of its column, so it drops its own top gap. */
.len-ship-track > .trk-card {
    margin-top: 0;
}

/* One column: the form comes right after the summary, as on the old page. */
@media (max-width: 1099px) {
    .len-ship-side {
        order: -1;
    }
}

/* Status history: one step per status, newest first, joined by a line. */
.len-tl {
    margin: 0;
    padding: 0;
    list-style: none;
}

.len-tl__item {
    --len-tl: var(--len-t-neutral);
    --len-tl-bg: var(--len-t-neutral-bg);
    --len-tl-bd: var(--len-t-neutral-bd);
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 12px;
    padding-bottom: 20px;
}

.len-tl__item:last-child {
    padding-bottom: 0;
}

.len-tl__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 4px;
    left: 15px;
    width: 2px;
    border-radius: 1px;
    background: var(--len-border);
}

.len-tl__item--navy { --len-tl: var(--len-t-navy); --len-tl-bg: var(--len-t-navy-bg); --len-tl-bd: var(--len-t-navy-bd); }
.len-tl__item--cyan { --len-tl: var(--len-t-cyan); --len-tl-bg: var(--len-t-cyan-bg); --len-tl-bd: var(--len-t-cyan-bd); }
.len-tl__item--amber { --len-tl: var(--len-t-amber); --len-tl-bg: var(--len-t-amber-bg); --len-tl-bd: var(--len-t-amber-bd); }
.len-tl__item--green { --len-tl: var(--len-t-green); --len-tl-bg: var(--len-t-green-bg); --len-tl-bd: var(--len-t-green-bd); }
.len-tl__item--red { --len-tl: var(--len-t-red); --len-tl-bg: var(--len-t-red-bg); --len-tl-bd: var(--len-t-red-bd); }
.len-tl__item--violet { --len-tl: var(--len-t-violet); --len-tl-bg: var(--len-t-violet-bg); --len-tl-bd: var(--len-t-violet-bd); }

.len-tl__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--len-tl-bd);
    border-radius: 50%;
    color: var(--len-tl);
    background: var(--len-tl-bg);
}

.len-tl__icon .mud-icon-root {
    width: 17px;
    height: 17px;
    font-size: 17px;
}

/* Position reports: a dashed ring, like the dotted route on the map. */
.len-tl__item.is-dashed .len-tl__icon {
    border-style: dashed;
    background: var(--len-surface);
}

/* The newest step: a filled icon with a soft halo. */
.len-tl__item.is-latest .len-tl__icon {
    border-color: var(--len-tl);
    border-style: solid;
    color: var(--len-surface);
    background: var(--len-tl);
    box-shadow: 0 0 0 4px var(--len-tl-bg);
}

/* Title and description on the left, the date and time beside them on the right. */
.len-tl__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    min-width: 0;
    padding-top: 5px;
}

.len-tl__body > * {
    grid-column: 1 / -1;
}

.len-tl__head {
    display: contents;
}

.len-tl__heading {
    grid-column: 1;
    grid-row: 1;
}

.len-tl__when {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.len-tl__desc {
    grid-column: 1;
    grid-row: 2;
}

.len-tl__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.len-tl__title {
    margin: 0;
    color: var(--len-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
}

.len-tl__tag {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r-sm);
    color: var(--len-text-3);
    background: var(--len-surface-2);
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.len-tl__tag--editing {
    border-color: var(--len-t-amber-bd);
    color: var(--len-t-amber);
    background: var(--len-t-amber-bg);
}

.len-tl__when {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.len-tl__desc {
    margin: 2px 0 0;
    color: var(--len-text-2);
    font-size: .8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.len-tl__facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px 16px;
    margin: 6px 0 0;
    font-size: .78125rem;
    line-height: 1.5;
}

.len-tl__facts > div {
    display: contents;
}

.len-tl__facts dt {
    color: var(--len-text-3);
}

.len-tl__facts dd {
    margin: 0;
    color: var(--len-text-2);
    overflow-wrap: anywhere;
}

/* A manual status (POD) is a record someone entered: its facts sit in a box. */
.len-tl__facts.is-boxed {
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid var(--len-border-2);
    border-radius: var(--len-r);
    background: var(--len-surface-2);
}

.len-tl__facts.is-boxed dd {
    color: var(--len-text);
}

.len-tl__map {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface);
}

.len-tl__map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--len-border-2);
    color: var(--len-text-2);
    font-size: .75rem;
    line-height: 1.45;
}

.len-tl__map-head .mud-icon-root {
    width: 16px;
    height: 16px;
    color: var(--len-text-3);
    font-size: 16px;
}

.len-tl__map-title {
    color: var(--len-text);
    font-weight: 600;
}

.len-tl__coords {
    font-family: var(--len-mono);
    font-size: .71875rem;
    font-variant-numeric: tabular-nums;
}

.len-tl__src {
    margin-left: auto;
    padding: 0 8px;
    border: 1px solid var(--len-t-cyan-bd);
    border-radius: 999px;
    color: var(--len-t-cyan);
    background: var(--len-t-cyan-bg);
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1.6;
}

.len-tl__map-canvas {
    height: 180px;
    background: var(--len-surface-3);
}

.len-tl__photos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.len-tl__photo {
    position: relative;
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    background: var(--len-surface-3);
    cursor: zoom-in;
    transition: border-color .15s var(--len-ease), box-shadow .15s var(--len-ease);
}

.len-tl__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.len-tl__photo:hover {
    border-color: var(--len-border-strong);
}

.len-tl__photo:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

.len-tl__photo-tag {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 0 5px;
    border-radius: 4px;
    color: #fff;
    background: rgba(15, 23, 42, .72);
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.6;
}

.len-tl__photos-count {
    color: var(--len-text-3);
    font-size: .75rem;
}

.len-tl__meta {
    margin: 8px 0 0;
    color: var(--len-text-3);
    font-size: .75rem;
    line-height: 1.5;
}

.len-tl__meta + .len-tl__meta {
    margin-top: 2px;
}

/* Entered on another day than the status date: say how far apart. */
.len-tl__late {
    color: var(--len-t-amber);
    font-weight: 500;
}

.len-tl__meta.is-edited {
    color: var(--len-link);
}

.len-tl__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.len-tl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 16px;
    color: var(--len-text-3);
    text-align: center;
}

.len-tl-empty .mud-icon-root {
    width: 32px;
    height: 32px;
    font-size: 32px;
    opacity: .7;
}

.len-tl-empty p {
    margin: 0;
    font-size: .8125rem;
}

@media (max-width: 599px) {
    .len-tl__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .len-tl__when {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        text-align: left;
    }

    .len-tl__desc {
        grid-row: 3;
    }

    .len-tl__src {
        margin-left: 0;
    }
}

/* Manual status (POD) form. */
.len-ship-form.is-editing {
    border-color: var(--len-t-amber-bd);
}

.len-ship-form__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.len-ship-form__body .len-lock {
    margin-top: 0;
}

/* Status and Tipe status side by side only when both have room (long status labels). */
.len-ship-form__body .len-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.len-ship-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--len-border-2);
}

.len-ship-form__save {
    margin-left: auto;
}

.len-suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--len-text-3);
    font-size: .75rem;
}

.len-suggest__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--len-border);
    border-radius: 999px;
    color: var(--len-text-2);
    background: var(--len-surface);
    font: inherit;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s var(--len-ease), color .15s var(--len-ease);
}

.len-suggest__chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.len-suggest__chip .mud-icon-root {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.len-suggest__chip:hover {
    border-color: var(--len-border-strong);
    color: var(--len-text);
}

.len-suggest__chip:focus-visible,
.len-photos__remove:focus-visible,
.len-photos__add:focus-visible {
    outline: none;
    box-shadow: var(--len-ring);
}

.len-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.len-photos__item {
    position: relative;
    width: 76px;
    height: 76px;
}

.len-photos__item img {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--len-border);
    border-radius: var(--len-r);
    object-fit: cover;
}

.len-photos__remove {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--len-border);
    border-radius: 50%;
    color: var(--len-text-2);
    background: var(--len-surface);
    box-shadow: var(--len-shadow-xs);
    cursor: pointer;
}

.len-photos__remove .mud-icon-root {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

.len-photos__remove:hover {
    border-color: var(--len-t-red-bd);
    color: var(--len-t-red);
}

.len-photos__add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 76px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px dashed var(--len-border-strong);
    border-radius: var(--len-r);
    color: var(--len-text-2);
    background: var(--len-surface-2);
    font: inherit;
    font-size: .78125rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s var(--len-ease), color .15s var(--len-ease);
}

.len-photos__add .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.len-photos__add:hover:not(:disabled) {
    border-color: var(--len-link);
    color: var(--len-link);
}

.len-photos__add:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.len-photos__count {
    display: block;
    color: var(--len-text-3);
    font-size: .71875rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* A spinner inside a button while it works (Export Excel). */
.mud-button-root .len-btn-spin.mud-progress-circular {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: inherit;
}

/* ==========================================================================
   Maps (Leaflet) in dark mode
   Leaflet paints its controls, popups and the empty map white; in dark mode they follow the LEN surface. The
   street map turns dark too: the tiles are inverted and turned back to their hues, then muted, so land is dark
   grey and water slate. Markers, routes and labels sit in other panes and keep their colours.
   ========================================================================== */
html[data-theme="dark"] .leaflet-container {
    background: var(--len-surface-2);
}

html[data-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.3);
}

html[data-theme="dark"] .leaflet-bar,
html[data-theme="dark"] .leaflet-touch .leaflet-bar {
    border-color: var(--len-border-strong);
}

html[data-theme="dark"] .leaflet-bar a {
    border-bottom-color: var(--len-border);
    background-color: var(--len-surface);
    color: var(--len-text);
}

html[data-theme="dark"] .leaflet-bar a:hover,
html[data-theme="dark"] .leaflet-bar a:focus {
    background-color: var(--len-surface-3);
}

html[data-theme="dark"] .leaflet-bar a.leaflet-disabled {
    background-color: var(--len-surface-2);
    color: var(--len-text-4);
}

html[data-theme="dark"] .leaflet-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--len-surface) 85%, transparent);
    color: var(--len-text-3);
}

html[data-theme="dark"] .leaflet-container .leaflet-control-attribution a {
    color: var(--len-link);
}

html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
    background: var(--len-surface);
    color: var(--len-text);
    box-shadow: var(--len-shadow-overlay);
}

html[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button {
    color: var(--len-text-3);
}

/* The distance label on the route map (mapDistanceComponent.js). */
html[data-theme="dark"] .distance-label {
    background: var(--len-surface);
}

/* ==========================================================================
   Wide tables
   A table wider than its card scrolls sideways. Its own scrollbar is drawn a little stronger than the page's,
   and while it is below the bottom of the screen a copy sits there instead, under the table
   (js/table-scrollbar.js).
   ========================================================================== */
.mud-table-container::-webkit-scrollbar {
    height: 10px;
}

.mud-table-container::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--len-text-3) 45%, transparent);
}

.mud-table-container::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--len-text-3) 70%, transparent);
}

.len-table-hscroll {
    position: fixed;
    bottom: 0;
    z-index: 999;
    display: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--len-border);
    background: color-mix(in srgb, var(--len-surface) 92%, transparent);
}

.len-table-hscroll.is-visible {
    display: block;
}

.len-table-hscroll > div {
    height: 1px;
}

.len-table-hscroll::-webkit-scrollbar {
    height: 12px;
}

.len-table-hscroll::-webkit-scrollbar-thumb {
    border-width: 3px;
    background-color: color-mix(in srgb, var(--len-text-3) 55%, transparent);
}

.len-table-hscroll::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--len-text-3) 80%, transparent);
}

@media print {
    .len-table-hscroll {
        display: none !important;
    }
}

/* Booking uses the same form cards, fields and summary as AWB. */
.len-booking-summary > .len-card { display:flex; flex-direction:column; max-height:var(--len-panel-height, calc(100dvh - 240px)); }
.len-booking-summary .len-card__head { flex:none; }
.len-booking-summary .len-card__body { display:flex; flex-direction:column; min-height:0; }
.len-booking-summary__facts { min-height:0; overflow-y:auto; }
.len-booking-summary .len-summary__actions { flex:none; }
.len-booking-summary__jump { padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.len-booking-summary__jump:hover { color:var(--len-link); text-decoration:underline; }
.len-booking-summary__jump:focus-visible { outline:none; box-shadow:var(--len-ring); }
.len-booking-summary__hint { display:none; margin:0 0 8px; color:var(--len-text-3); font-size:.75rem; }
.len-booking__package-hint { margin:0 0 14px; }
.len-booking .len-card { scroll-margin-top:80px; }
.len-booking .autocomplete-container { position:relative; min-width:0; }
.len-booking .autocomplete-dropdown { position:absolute; top:calc(100% + 4px); inset-inline:0; max-height:280px; overflow-y:auto; z-index:20; border:1px solid var(--len-border-strong); border-radius:var(--len-r); background:var(--len-surface); box-shadow:var(--len-shadow-overlay); }
.len-booking .autocomplete-item { padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--len-border-2); }
.len-booking .autocomplete-item:hover, .len-booking .autocomplete-item.selected { background:var(--len-primary-soft); }
.len-booking .autocomplete-item-main { color:var(--len-text); font-size:.8125rem; font-weight:500; }
.len-booking .autocomplete-item-sub, .len-booking .autocomplete-no-results, .len-booking .autocomplete-loading { color:var(--len-text-3); font-size:.75rem; }
.len-booking .autocomplete-no-results, .len-booking .autocomplete-loading { padding:14px; }
.len-booking :is(.dimension-btn, .calculate-btn, .change-price-btn) { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:8px 12px; border:1px solid var(--len-border-strong); border-radius:var(--len-r); background:var(--len-surface); color:var(--len-text-2); font:inherit; font-size:.8125rem; font-weight:600; cursor:pointer; }
.len-booking :is(.dimension-btn, .calculate-btn, .change-price-btn):hover { background:var(--len-surface-2); color:var(--len-text); }
.len-booking .dimension-details { margin-top:16px; padding-top:16px; border-top:1px solid var(--len-border); }
.len-booking .dimension-details h4 { margin:0 0 12px; color:var(--len-text-2); font-size:.875rem; font-weight:600; }
.len-booking .dimension-item { padding:12px; margin-bottom:10px; border:1px solid var(--len-border); border-radius:var(--len-r); background:var(--len-surface-2); }
.len-booking .dimension-item-title { margin-bottom:6px; color:var(--len-text); font-size:.8125rem; font-weight:600; }
.len-booking .dimension-item-details { color:var(--len-text-2); font-size:.8125rem; line-height:1.7; }
.len-booking .chargeable-weight { color:var(--len-t-green); font-weight:600; }
.len-booking :is(.dimension-summary, .weight-calculation) { padding:12px; border:1px solid var(--len-border); border-radius:var(--len-r); background:var(--len-surface-2); color:var(--len-text-2); font-size:.8125rem; }
.len-booking :is(.summary-row, .weight-item) { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.len-booking .weight-item + .weight-item { margin-top:8px; }
.len-booking .price-panel { padding:16px; border:1px solid var(--len-border); border-radius:var(--len-r-lg); background:var(--len-surface); }
.len-booking .price-panel .section-title { margin:0 0 16px; color:var(--len-text); font-size:.875rem; font-weight:600; }
.len-booking .weight-calculation { margin-bottom:16px; }
.len-booking .price-panel > button { margin:12px 8px 0 0; }
.len-booking--view .form-control[readonly] { padding:0; min-height:0; border:0; background:transparent; color:var(--len-text); font-weight:600; }
.len-booking--view textarea.form-control[readonly] { resize:none; }
.len-booking--view .len-label { color:var(--len-text-3); font-weight:400; }

/* Status entry: keep optional evidence together and give history more room. */
.len-ship { --tracking-map-height:clamp(260px, 36dvh, 400px); }
.len-ship-form__foot { background:var(--len-surface); border-radius:0 0 var(--len-r-lg) var(--len-r-lg); }
.len-ship-evidence { border:1px solid var(--len-border); border-radius:var(--len-r); }
.len-ship-evidence > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; color:var(--len-text-2); font-size:.8125rem; font-weight:600; cursor:pointer; list-style:none; }
.len-ship-evidence > summary::-webkit-details-marker { display:none; }
.len-ship-evidence > summary::after { content:'+'; color:var(--len-text-3); font-size:1rem; }
.len-ship-evidence[open] > summary::after { content:'\2212'; }
.len-ship-evidence > summary:focus-visible { outline:none; box-shadow:var(--len-ring); border-radius:var(--len-r); }
.len-ship-evidence__body { display:flex; flex-direction:column; gap:14px; padding:0 12px 12px; }