/* WMS Warehouse UI design system.
   Look: floor-marking tape on concrete. Selection is always tape yellow; data states borrow from warehouse signage.
   Theme: <html data-theme="light|dark">, set before first paint by the inline script in App.razor. */

:root {
    color-scheme: light;

    --bg: #e4e5e1;
    --surface: #f4f5f2;
    --surface-2: #eaebe7;
    --surface-3: #dcdeD8;
    --ink: #19212b;
    --ink-2: #4a5663;
    --ink-3: #727d8a;
    --line: #c8cbc4;
    --line-strong: #a9aea6;

    --accent: #1b4f9e;
    --accent-ink: #ffffff;
    --accent-soft: #d5e1f3;
    --tape: #f4c20d;
    --tape-ink: #1b1a10;
    --focus: #1b4f9e;

    --c-empty: #e9eae6;
    --c-empty-ink: #7c8794;
    --c-s1: #cddff4;
    --c-s2: #96bbe6;
    --c-s3: #4f86cc;
    --c-s3-ink: #ffffff;
    --c-sentinel: #d9bff0;
    --c-over: #ee8f78;
    --c-s-ink: #17202b;

    --ok: #2a7d4f;
    --warn: #9a6700;
    --danger: #b3321f;
    --danger-soft: #f7d9d2;
    --sentinel-ink: #6b2f9a;
    --sentinel-soft: #ead9f7;

    --canvas: #f8f8f5;
    --canvas-grid: #d9dbd5;
    --canvas-grid-major: #bfc3bb;

    --shadow: 0 1px 2px rgb(20 28 40 / 12%), 0 6px 18px rgb(20 28 40 / 10%);
    --radius: 6px;
    --radius-lg: 10px;
    --topbar-h: 52px;

    --font-ui: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
    --font-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f1318;
    --surface: #171c23;
    --surface-2: #1e252d;
    --surface-3: #28313b;
    --ink: #e7e9e4;
    --ink-2: #aab3bd;
    --ink-3: #7c8794;
    --line: #2b343e;
    --line-strong: #3d4955;

    --accent: #8fb6f5;
    --accent-ink: #0e1a2e;
    --accent-soft: #1f3250;
    --tape: #f4c20d;
    --tape-ink: #1b1a10;
    --focus: #8fb6f5;

    --c-empty: #1b222a;
    --c-empty-ink: #66727f;
    --c-s1: #24384f;
    --c-s2: #31598c;
    --c-s3: #4f86cc;
    --c-s3-ink: #ffffff;
    --c-sentinel: #5a3d78;
    --c-over: #b4482f;
    --c-s-ink: #e7e9e4;

    --ok: #5fc08a;
    --warn: #e0ae3a;
    --danger: #f0836d;
    --danger-soft: #4a231b;
    --sentinel-ink: #d2a8f2;
    --sentinel-soft: #3b2850;

    --canvas: #12171d;
    --canvas-grid: #1f2730;
    --canvas-grid-major: #323d49;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #0f1318; --surface: #171c23; --surface-2: #1e252d; --surface-3: #28313b;
        --ink: #e7e9e4; --ink-2: #aab3bd; --ink-3: #7c8794; --line: #2b343e; --line-strong: #3d4955;
        --accent: #8fb6f5; --accent-ink: #0e1a2e; --accent-soft: #1f3250; --focus: #8fb6f5;
        --c-empty: #1b222a; --c-empty-ink: #66727f; --c-s1: #24384f; --c-s2: #31598c; --c-sentinel: #5a3d78; --c-over: #b4482f; --c-s-ink: #e7e9e4;
        --ok: #5fc08a; --warn: #e0ae3a; --danger: #f0836d; --danger-soft: #4a231b; --sentinel-ink: #d2a8f2; --sentinel-soft: #3b2850;
        --canvas: #12171d; --canvas-grid: #1f2730; --canvas-grid-major: #323d49;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin: 0;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

h1:focus { outline: none; }

p { margin: 0 0 0.6em; }
a { color: var(--accent); text-underline-offset: 2px; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--surface-2); padding: 0.05em 0.35em; border-radius: 3px; }

.muted { color: var(--ink-3); }
.small { font-size: 0.82rem; }
.error { color: var(--danger); }
.warn { color: var(--warn); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

::selection { background: var(--tape); color: var(--tape-ink); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0 0.85rem;
    font: 500 0.95rem/1 var(--font-ui);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); }
.btn.tape { background: var(--tape); color: var(--tape-ink); border-color: var(--tape); font-weight: 600; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-3); }
.btn.icon { width: 34px; padding: 0; }
.btn.small { min-height: 28px; padding: 0 0.6rem; font-size: 0.88rem; }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Segmented control: choose one of a few modes */
.seg {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--surface-3);
    border-radius: var(--radius);
}

.seg > button, .seg > a {
    min-height: 30px;
    padding: 0 0.8rem;
    font: 500 0.95rem/1 var(--font-ui);
    color: var(--ink-2);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.seg > button:hover:not(.on):not(:disabled) { color: var(--ink); }
.seg > button.on, .seg > a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 18%); font-weight: 600; }
.seg > button:disabled { opacity: 0.45; cursor: not-allowed; }
.seg .count { font-size: 0.8rem; color: var(--ink-3); font-weight: 500; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.88rem; color: var(--ink-2); }
.field > span.hint { font-size: 0.8rem; color: var(--ink-3); }

input[type=text], input[type=search], input[type=number], input[type=password], select, textarea {
    min-height: 34px;
    padding: 0.3rem 0.6rem;
    font: 400 0.98rem/1.2 var(--font-ui);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    width: 100%;
}

input::placeholder { color: var(--ink-3); }
input[type=number] { font-variant-numeric: tabular-nums; }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.08rem 0.5rem;
    font: 600 0.78rem/1.5 var(--font-ui);
    border-radius: 99px;
    white-space: nowrap;
}

.badge.sentinel { background: var(--sentinel-soft); color: var(--sentinel-ink); }
.badge.over-capacity { background: var(--danger-soft); color: var(--danger); }
.badge.neutral { background: var(--surface-3); color: var(--ink-2); }
.badge.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }

/* Data table */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }

table.data { width: 100%; border-collapse: collapse; }

table.data th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.55rem 0.75rem;
    text-align: left;
    font: 600 0.82rem/1.2 var(--font-head);
    letter-spacing: 0.04em;
    color: var(--ink-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
    user-select: none;
}

table.data th.sortable { cursor: pointer; }
table.data th.sortable:hover { color: var(--ink); }
table.data th.num, table.data td.num { text-align: right; }

table.data td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr.selected { background: color-mix(in srgb, var(--tape) 30%, transparent); box-shadow: inset 4px 0 0 var(--tape); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data.static tbody tr { cursor: default; }
table.data.static tbody tr:hover { background: transparent; }

.row-count { margin: 0.6rem 0.2rem 0; color: var(--ink-3); font-size: 0.88rem; }

.notice { padding: 0.65rem 0.9rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.notice.warn { background: color-mix(in srgb, var(--tape) 22%, transparent); border-color: var(--tape); color: var(--ink); }
.notice.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* Modal dialog: scrim + card, rendered conditionally by the owning component */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgb(8 12 18 / 55%);
}

.dialog {
    width: min(460px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 1.2rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.dialog h2 { margin-bottom: 0.9rem; }
.dialog .row { display: flex; gap: 0.75rem; }
.dialog .row > * { flex: 1; }
.dialog .stack { display: flex; flex-direction: column; gap: 0.8rem; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.2rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Blazor framework chrome */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); }

.blazor-error-boundary {
    padding: 1rem;
    color: #fff;
    background: var(--danger);
    border-radius: var(--radius);
}

.blazor-error-boundary::after { content: "Something went wrong rendering this part of the page."; }

/* Page scaffolding shared by Explore and Alerts: content column plus a dock for the inspector */
.page { padding: 1rem 1.25rem 2rem; max-width: 1700px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 0.9rem; }
.page-head h1 { margin-right: auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.toolbar .grow { flex: 1; min-width: 12rem; }
.with-dock { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.with-dock > .dock { position: sticky; top: 1rem; max-height: calc(100dvh - var(--topbar-h) - 2rem); overflow: auto; }

@media (max-width: 960px) {
    .page { padding: 0.75rem 0.75rem 6rem; }
    .with-dock { grid-template-columns: minmax(0, 1fr); }
}

.page.narrow { max-width: 56rem; margin: 0 auto; }
.page.narrow h1, .page.narrow h2 { margin: 0.8rem 0 0.5rem; }