/* GMSL WMS — base stylesheet and design tokens.
   Palette and type carried over from the Portland WMS concept demo.
   Themes: light (default), dark, warehouse (high contrast, large targets for tablets on the depot floor).
   Set with <html data-theme="light|dark|warehouse">; with no attribute, follows the OS light/dark setting.
   Glass: translucent, blurred surfaces (.glass) for things that float above content: nav, sidebar,
   segmented controls, menus, sheets, action bars, the sign-in card. Three strengths (thin / regular /
   thick). Cards, tables, forms and the TRF stay solid so data stays readable. Warehouse opts out.
   One accent colour (navy, steel in dark) for focus, selection and hover; orange is for the brand
   mark, "Bonded" and warnings only. */

:root {
    --ground: #EFF1F6; --surface: #FFFFFF; --surface-2: #E7EAF3; --surface-3: #DDE1EE;
    --ink: #111634; --ink-2: #3C4268; --muted: #6E7594; --line: #D5D9E7; --line-2: #C3C8DC;
    --navy: #1B2253; --navy-2: #2E3A82; --steel: #5566A6; --steel-soft: #8C99C8;
    --green: #0F8A43; --green-soft: #D6EEDF; --orange: #E85C1E; --orange-soft: #FBE0D3;
    --red: #D81E24; --red-soft: #F8D7D8; --amber: #A86E0F; --amber-soft: #F6E9CF;
    --on-navy: #FFFFFF;
    /* System fonts first: SF Pro on Apple devices, Inter elsewhere. Mono is for data only. */
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", system-ui, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
    --shadow: 0 1px 2px rgba(17,22,52,.04), 0 6px 20px rgba(17,22,52,.06);
    --shadow-lg: 0 2px 8px rgba(17,22,52,.08), 0 24px 48px rgba(17,22,52,.12);
    /* concentric corners: inner radius = outer radius - padding */
    --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px; --radius-input: 10px;
    --tap: 40px; --text: 16px; --border-w: 1px;
    --maxw: 1600px;   /* wide enough for the data tables on a desktop screen */
    --on-status: #FFFFFF; --orange-strong: #C2461A; --green-strong: #0C7D3C; --red-strong: #A81419; --accent: var(--navy-2); --card-border: transparent;
    --glass-thin: rgba(255,255,255,.40); --glass-regular: rgba(255,255,255,.58); --glass-thick: rgba(255,255,255,.76);
    --glass-bg: var(--glass-regular); --glass-bg-strong: var(--glass-thick);
    --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.18) 45%, rgba(255,255,255,.06));
    --glass-border: rgba(255,255,255,.65); --glass-edge: rgba(17,22,52,.08);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.8);
    --glass-blur: saturate(180%) blur(24px);
    --glass-shadow: 0 8px 32px rgba(17,22,52,.10), 0 1px 2px rgba(17,22,52,.06);
    --ambient: radial-gradient(1200px 600px at 10% -10%, rgba(85,102,166,.18), transparent 60%),
               radial-gradient(900px 500px at 110% 10%, rgba(232,92,30,.10), transparent 60%);
    --ease-spring: cubic-bezier(.32, .72, 0, 1); --dur: 280ms;
    --focus-ring: 0 0 0 4px rgba(85,102,166,.25);
    color-scheme: light;
}

[data-theme="light"] {
    --ground: #EFF1F6; --surface: #FFFFFF; --surface-2: #E7EAF3; --surface-3: #DDE1EE;
    --ink: #111634; --ink-2: #3C4268; --muted: #6E7594; --line: #D5D9E7; --line-2: #C3C8DC;
    --navy: #1B2253; --navy-2: #2E3A82; --steel: #5566A6; --steel-soft: #8C99C8;
    --green: #0F8A43; --green-soft: #D6EEDF; --orange: #E85C1E; --orange-soft: #FBE0D3;
    --red: #D81E24; --red-soft: #F8D7D8; --amber: #A86E0F; --amber-soft: #F6E9CF;
    --shadow: 0 1px 2px rgba(17,22,52,.04), 0 6px 20px rgba(17,22,52,.06);
    --shadow-lg: 0 2px 8px rgba(17,22,52,.08), 0 24px 48px rgba(17,22,52,.12);
    --tap: 40px; --text: 16px; --border-w: 1px;
    --on-status: #FFFFFF; --orange-strong: #C2461A; --green-strong: #0C7D3C; --red-strong: #A81419; --accent: var(--navy-2); --card-border: transparent;
    --glass-thin: rgba(255,255,255,.40); --glass-regular: rgba(255,255,255,.58); --glass-thick: rgba(255,255,255,.76);
    --glass-bg: var(--glass-regular); --glass-bg-strong: var(--glass-thick);
    --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.18) 45%, rgba(255,255,255,.06));
    --glass-border: rgba(255,255,255,.65); --glass-edge: rgba(17,22,52,.08);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.8);
    --glass-shadow: 0 8px 32px rgba(17,22,52,.10), 0 1px 2px rgba(17,22,52,.06);
    --ambient: radial-gradient(1200px 600px at 10% -10%, rgba(85,102,166,.18), transparent 60%),
               radial-gradient(900px 500px at 110% 10%, rgba(232,92,30,.10), transparent 60%);
    --focus-ring: 0 0 0 4px rgba(85,102,166,.25);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --ground: #0A0E28; --surface: #121838; --surface-2: #1A2148; --surface-3: #232B57;
        --ink: #ECEEF8; --ink-2: #B6BCDB; --muted: #8A92B8; --line: #293163; --line-2: #333C72;
        --navy: #3A46A0; --navy-2: #5563C4; --steel: #8C9AD8; --steel-soft: #48538F;
        --green: #3CC274; --green-soft: #12351F; --orange: #FF7A42; --orange-soft: #3A2114;
        --red: #FF5A5F; --red-soft: #3A1416; --amber: #E8B04A; --amber-soft: #3A2C10;
        --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
        --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.5);
        --on-status: #0A0E28; --orange-strong: var(--orange); --green-strong: var(--green); --red-strong: var(--red); --accent: var(--steel); --card-border: transparent;
        /* neutral smoke rather than a purple-navy tint */
        --glass-thin: rgba(28,30,44,.35); --glass-regular: rgba(28,30,44,.55); --glass-thick: rgba(28,30,44,.75);
        --glass-bg: var(--glass-regular); --glass-bg-strong: var(--glass-thick);
        --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, rgba(255,255,255,0));
        --glass-border: rgba(255,255,255,.10); --glass-edge: rgba(0,0,0,.4);
        --glass-highlight: inset 0 1px 0 rgba(255,255,255,.10);
        --glass-shadow: 0 8px 32px rgba(0,0,0,.35);
        --ambient: radial-gradient(1200px 600px at 10% -10%, rgba(85,99,196,.28), transparent 60%),
                   radial-gradient(900px 500px at 110% 10%, rgba(255,122,66,.10), transparent 60%);
        --focus-ring: 0 0 0 4px rgba(140,154,216,.35);
        color-scheme: dark;
    }
}

[data-theme="dark"] {
    --tap: 40px; --text: 16px; --border-w: 1px;
    --ground: #0A0E28; --surface: #121838; --surface-2: #1A2148; --surface-3: #232B57;
    --ink: #ECEEF8; --ink-2: #B6BCDB; --muted: #8A92B8; --line: #293163; --line-2: #333C72;
    --navy: #3A46A0; --navy-2: #5563C4; --steel: #8C9AD8; --steel-soft: #48538F;
    --green: #3CC274; --green-soft: #12351F; --orange: #FF7A42; --orange-soft: #3A2114;
    --red: #FF5A5F; --red-soft: #3A1416; --amber: #E8B04A; --amber-soft: #3A2C10;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.5);
    --on-status: #0A0E28; --orange-strong: var(--orange); --green-strong: var(--green); --red-strong: var(--red); --accent: var(--steel); --card-border: transparent;
    /* neutral smoke rather than a purple-navy tint */
    --glass-thin: rgba(28,30,44,.35); --glass-regular: rgba(28,30,44,.55); --glass-thick: rgba(28,30,44,.75);
    --glass-bg: var(--glass-regular); --glass-bg-strong: var(--glass-thick);
    --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, rgba(255,255,255,0));
    --glass-border: rgba(255,255,255,.10); --glass-edge: rgba(0,0,0,.4);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.10);
    --glass-shadow: 0 8px 32px rgba(0,0,0,.35);
    --ambient: radial-gradient(1200px 600px at 10% -10%, rgba(85,99,196,.28), transparent 60%),
           radial-gradient(900px 500px at 110% 10%, rgba(255,122,66,.10), transparent 60%);
    --focus-ring: 0 0 0 4px rgba(140,154,216,.35);
    color-scheme: dark;
}

/* Warehouse: maximum contrast, bigger text and touch targets, heavier borders.
   For tablets and phones used on the depot floor, in daylight or gloves. */
[data-theme="warehouse"] {
    --ground: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F2F6; --surface-3: #E2E4EC;
    --ink: #000000; --ink-2: #14182E; --muted: #3A3F5C; --line: #5A5F7A; --line-2: #14182E;
    --navy: #0B1240; --navy-2: #1B2780; --steel: #2A3880; --steel-soft: #5566A6;
    --green: #006B2E; --green-soft: #C8EBD5; --orange: #B23C00; --orange-soft: #FFD9C2;
    --red: #B00006; --red-soft: #FFD0D2; --amber: #7A4D00; --amber-soft: #FFE9B8;
    --shadow: none; --shadow-lg: 0 0 0 2px #14182E;
    --tap: 52px; --text: 18px; --border-w: 2px;
    /* no glass on the depot floor: solid, high-contrast surfaces */
    --on-status: #FFFFFF; --orange-strong: var(--orange); --green-strong: var(--green); --red-strong: var(--red); --accent: var(--navy); --card-border: var(--line-2);
    --glass-thin: var(--surface); --glass-regular: var(--surface); --glass-thick: var(--surface);
    --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-sheen: none;
    --glass-border: var(--line-2); --glass-edge: transparent;
    --glass-blur: none; --glass-highlight: none; --glass-shadow: none;
    --ambient: none; --focus-ring: 0 0 0 3px #14182E;
    color-scheme: light;
}

@media (prefers-reduced-transparency: reduce) {
    :root, [data-theme] {
        --glass-thin: var(--surface); --glass-regular: var(--surface); --glass-thick: var(--surface);
        --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-blur: none; --glass-sheen: none;
    }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; color: var(--ink);
    background: var(--ambient, none), var(--ground); background-color: var(--ground); background-attachment: fixed;
    font-family: var(--font-body); font-size: var(--text); line-height: 1.55;
    -webkit-font-smoothing: antialiased; min-height: 100vh;
}
h1, h2, h3, h4 {
    font-family: var(--font-display); font-weight: 700; line-height: 1.1;
    letter-spacing: -.022em; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.028em; }
h2 { font-size: clamp(24px, 3.4vw, 32px); }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h3, h4 { font-weight: 600; letter-spacing: -.012em; }
p { margin: 0; }
a { color: var(--accent); }
/* follows each element's own rounded shape */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 520px) { .wrap { padding-inline: 16px; } }
/* quiet sentence case, rendered as written */
.eyebrow {
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: var(--muted);
}
.lede { font-size: 1.15em; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

/* ---------- glass ---------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--glass-bg-strong); }
}
/* light edge: brightest at the top, fading down. :where keeps position:sticky/fixed on .nav etc. */
:where(.glass) { position: relative; }
.glass::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    background: var(--glass-sheen); pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-theme="warehouse"] .glass::before { display: none; }

/* ---------- nav ---------- */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--glass-regular);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: var(--border-w) solid color-mix(in srgb, var(--line) 60%, transparent);
}
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
/* Logo mark: a small glossy blue sphere with a soft glow */
.brand .dot {
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #9CC8FF 14%, #3B82F6 42%, #1D4ED8 72%, #0B2A7A 100%);
    box-shadow: 0 0 8px 1px rgba(59,130,246,.55), 0 0 2px rgba(29,78,216,.6), inset -2px -3px 4px rgba(6,20,70,.35);
}
[data-theme="warehouse"] .brand .dot { box-shadow: inset -2px -3px 4px rgba(6,20,70,.35); }

/* ---------- buttons ---------- */
.btn {
    font: 600 15px/1 var(--font-body); min-height: var(--tap); padding: 0 20px;
    border-radius: var(--radius-pill); border: var(--border-w) solid transparent; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--navy); color: var(--on-navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow); }
.btn-primary:hover { background: var(--navy-2); }
.btn-secondary {
    background: var(--glass-bg-strong); border-color: var(--line-2); color: var(--ink);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight);
}
.btn-secondary:hover { background: var(--surface); }
/* Accent is for rare call-to-action use only; Primary covers approvals too */
.btn-accent { background: var(--orange-strong); color: var(--on-status); }
.btn-accent:hover { filter: brightness(1.08); }
.btn-success { background: var(--green-strong); color: var(--on-status); }
.btn-danger { background: var(--red); color: var(--on-status); }
/* quieter destructive action, e.g. Scrap item */
.btn-destructive { background: var(--red-soft); color: var(--red-strong); }
.btn-destructive:hover { background: color-mix(in srgb, var(--red) 18%, var(--surface)); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { min-height: 32px; padding: 0 14px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; }
[data-theme="warehouse"] .btn-sm { min-height: 44px; font-size: 15px; }

/* ---------- labels: badge, pill, tag ---------- */
.badge {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 20px;
    background: var(--surface); border: var(--border-w) solid var(--line-2); color: var(--ink-2); display: inline-block;
}
/* sentence case labels, scaled with --text (13px normal, ~14.6px warehouse) */
.pill, .tag {
    font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none;
    font-size: calc(var(--text) * .8125); line-height: 1.4;
    display: inline-flex; align-items: center; gap: .4em;
}
.pill { padding: .2em .7em .2em .55em; border-radius: var(--radius-pill); }
.pill::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.pill-active  { background: var(--green-soft); color: var(--green); }
.pill-ship    { background: color-mix(in srgb, var(--steel) 20%, transparent); color: var(--steel); }
.pill-bond    { background: var(--orange-soft); color: var(--orange); }
.pill-quar    { background: var(--amber-soft); color: var(--amber); }
.pill-scrap   { background: var(--surface-3); color: var(--muted); }
.pill-laid    { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tag { padding: .2em .6em; border-radius: 6px; }
.tag-pass  { background: var(--green-soft); color: var(--green); }
.tag-fail  { background: var(--red-soft); color: var(--red); }
.tag-ref   { background: var(--amber-soft); color: var(--amber); }
.tag-draft { background: var(--surface-3); color: var(--ink-2); }
.arm { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); border: var(--border-w) solid var(--line); }

/* ---------- cards & KPIs ---------- */
.card {
    background: var(--surface); border: var(--border-w) solid var(--card-border);
    border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 6px; }
.card p { color: var(--ink-2); font-size: .92em; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--surface); border: var(--border-w) solid var(--card-border); border-radius: var(--radius); padding: 16px; }
.kpi.glass { background: var(--glass-bg); border-color: var(--glass-border); }
.kpi .n { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .n small { font-size: .5em; color: var(--muted); margin-left: 3px; }
.kpi .l { font-size: 13px; color: var(--muted); margin-top: 4px; }
.kpi .n.ok { color: var(--green); } .kpi .n.warn { color: var(--orange); } .kpi .n.crit { color: var(--red); }

/* ---------- alerts ---------- */
.alert {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
    font-size: 14px; border: var(--border-w) solid var(--card-border); background: var(--surface);
}
.alert .sev { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--steel); }
.alert .aw { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.alert-red   { background: var(--red-soft); }   .alert-red .sev   { background: var(--red); }
/* neutral by default: the dot carries the colour, only the urgent alert is tinted */
.alert-amber .sev { background: var(--amber); }
.alert-green .sev { background: var(--green); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; align-content: start; }   /* fields side by side keep their inputs level */
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field .error { font-size: 12.5px; color: var(--red); font-weight: 500; }
.input, .select, .textarea {
    font: 400 16px/1.4 var(--font-body); color: var(--ink); background-color: var(--surface-2);
    border: var(--border-w) solid transparent; border-radius: var(--radius-input);
    min-height: var(--tap); padding: 8px 12px; width: 100%;
}
/* iOS Safari zooms into any field under 16px on focus and stays zoomed, pushing the layout off-screen.
   Keep every typed-into field at 16px+ on touch screens (don't block zoom in the viewport tag instead:
   that also stops pinch-to-zoom). */
@media (pointer: coarse) {
    :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"]) { font-size: max(16px, 1em) !important; }
}
/* inputs and selects share one fixed height in every browser and theme */
.input, .select { height: var(--tap); }
/* own the select's look (Safari ignores padding and height on its native control) and draw the
   chevron from two gradients, so it follows the theme colours */
.select {
    -webkit-appearance: none; appearance: none; padding-right: 36px; text-overflow: ellipsis;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
}
.textarea { min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; background-color: var(--surface); border-color: var(--accent); box-shadow: var(--focus-ring); }
.input.is-invalid { background-color: var(--surface); border-color: var(--red); }
.input.mono { font-family: var(--font-mono); }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; min-height: var(--tap); }
.check input { width: 18px; height: 18px; accent-color: var(--navy); }
[data-theme="warehouse"] .check input { width: 24px; height: 24px; }
.input:disabled, .select:disabled { background-color: var(--surface-3); color: var(--muted); opacity: .7; }
/* warehouse keeps outlined fields */
[data-theme="warehouse"] :is(.input, .select, .textarea) { background-color: var(--surface); border-color: var(--line-2); }

/* ---------- segmented control (glass track, solid thumb) ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); }
.seg button, .seg a {
    font: 600 13px var(--font-body); color: var(--ink-2); background: transparent; border: none; text-decoration: none;
    padding: 0 14px; min-height: 32px; border-radius: var(--radius-pill); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover, .seg a:hover { color: var(--ink); }
.seg [aria-pressed="true"], .seg [aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
[data-theme="warehouse"] .seg button, [data-theme="warehouse"] .seg a { min-height: 44px; font-size: 15px; }
[data-theme="warehouse"] .seg [aria-pressed="true"], [data-theme="warehouse"] .seg [aria-current="page"] { background: var(--navy); color: #fff; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; border: var(--border-w) solid var(--card-border); border-radius: var(--radius-lg); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: calc(var(--text) * .875); }
table.data th {
    text-align: left; font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none;
    color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: var(--border-w) solid var(--line); background: transparent; white-space: nowrap;
}
[data-theme="warehouse"] table.data th { font-size: 14px; }
table.data td { padding: 11px 12px; border-bottom: var(--border-w) solid var(--line); white-space: nowrap; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
table.data td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* On desktop, text may wrap inside its cell so tables fit rather than scroll; numbers, serials,
   codes and labels stay on one line. Phones keep one line per cell and scroll sideways instead. */
@media (min-width: 1024px) {
    table.data td, table.data th { white-space: normal; }
    table.data th { vertical-align: bottom; }
    table.data td.num, table.data td.mono, table.data td :is(.mono, .arm, .pill, .tag) { white-space: nowrap; }
}

/* ---------- tabs: a segmented control ---------- */
.tabs {
    display: inline-flex; gap: 2px; padding: 3px; border: none; max-width: 100%; overflow-x: auto;
    border-radius: var(--radius-pill); background: var(--surface-2);
}
.tabs button {
    font: 600 13px var(--font-body); color: var(--ink-2); background: transparent; border: none; white-space: nowrap;
    min-height: 32px; padding: 0 14px; border-radius: var(--radius-pill); cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
[data-theme="warehouse"] .tabs button { min-height: 44px; font-size: 15px; }
[data-theme="warehouse"] .tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }

/* ---------- TRF (transfer request form) block ---------- */
.trf { display: grid; grid-template-columns: 1fr 1fr; border: var(--border-w) solid var(--card-border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.trf .fld { padding: 12px 15px; border-bottom: var(--border-w) solid var(--line); border-right: var(--border-w) solid var(--line); }
.trf .fld:nth-child(even) { border-right: none; }
.trf .full { grid-column: 1 / -1; border-right: none; }
.trf .fk { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.trf .fv { font-size: 15px; color: var(--ink); margin-top: 3px; }
@media (max-width: 520px) { .trf { grid-template-columns: 1fr; } .trf .fld { border-right: none; } }

/* solid content: a hairline and soft shadow instead of a border; warehouse keeps hard edges */
.card, .kpi, .tbl-wrap, .trf { box-shadow: 0 0 0 .5px color-mix(in srgb, var(--line-2) 70%, transparent), var(--shadow); }
[data-theme="warehouse"] :is(.card, .kpi, .tbl-wrap, .trf) { box-shadow: none; }

/* ---------- layout helpers ---------- */
.stack > * + * { margin-top: var(--stack, 16px); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
    .btn, .seg button, .seg a, .tabs button, .input, .select, .textarea { transition: background-color var(--dur) var(--ease-spring), color var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-spring), transform 120ms var(--ease-spring); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* A themed panel (not just <html>) repaints its own background and text */
[data-theme] { background: var(--ground); color: var(--ink); }

/* ---------- footer: copyright and credit (partials/footer) ---------- */
.site-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
    width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px 24px;
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
    border-top: var(--border-w) solid var(--line);
}
.site-foot p { margin: 0; }
.site-foot a { color: inherit; text-underline-offset: 2px; }
.site-foot a:hover { color: var(--ink); }
.site-foot .sep { margin-inline: 8px; opacity: .6; }
@media (max-width: 520px) {
    .site-foot { flex-direction: column; text-align: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sticky glass action bar (Save / Cancel), shown when a form has unsaved changes */
.actionbar {
    position: sticky; bottom: 16px; z-index: 40; margin-top: 24px;
    display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
    padding: 8px 8px 8px 20px; border-radius: var(--radius-pill);
}
.actionbar .msg { margin-right: auto; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.actionbar[hidden] { display: none; }

/* ---------- fill meter (tank capacity) ---------- */
.meter { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); max-width: 100%; }
.meter.high > span { background: var(--amber); }
.meter.over > span { background: var(--red); }
.meter.unknown > span { width: 0 !important; }
[data-theme="warehouse"] .meter { height: 12px; outline: var(--border-w) solid var(--line-2); }

/* ---------- details: label / value pairs ---------- */
.details { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 24px; margin: 0; }
.details dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.details dd { margin: 3px 0 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- pager ---------- */
.pager { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.pager .row { gap: 8px; }