/* Inventory batch-update UI, matched to the Source Logistics Customer Portal, which swaps
   its accent with the theme: brand yellow on near-black chrome in dark, brand green on white
   chrome in light.

   Every rule is scoped under .inv on purpose. This app is primarily the driver kiosk, which
   is Bootstrap + the brand sheet in app.css; the two share class names (.btn, .card, .alert,
   .pill) and would trample each other unscoped. Nothing here applies outside the inventory
   pages, and nothing in app.css reaches inside them except Bootstrap's element defaults,
   which the rules below override. */

.inv {
    --bg: #1c1c1c; --chrome: #141414; --panel: #262626; --panel-2: #2e2e2e;
    --line: #3a3a3a; --line-soft: #303030;
    --ink: #ececec; --muted: #a0a0a0; --faint: #7a7a7a;
    --accent: #ffcc00; --accent-dim: #d9ad00; --on-accent: #141414;
    --nav: #c9c9c9; --nav-hover: #ffffff; --nav-on-bg: #1f1f1f; --chrome-ink: #ffffff;
    --good: #7ac47e; --warn: #e8b33c; --crit: #e8776c; --info: #7fb2f0;
    --good-bg: #1e2c1f; --warn-bg: #2f2712; --crit-bg: #301c19; --info-bg: #17222f; --none-bg: #2c2c2c;
    --mono-bg: #161616;
}

html[data-theme="light"] .inv {
    --bg: #f7f7f5; --chrome: #ffffff; --panel: #ffffff; --panel-2: #f4f4f1;
    --line: #dcdcd8; --line-soft: #ececea;
    --ink: #1c1c1c; --muted: #5c5c58; --faint: #86867f;
    --accent: #2e7d32; --accent-dim: #24602a; --on-accent: #ffffff;
    --nav: #3d3d39; --nav-hover: #1c1c1c; --nav-on-bg: #eef4ee; --chrome-ink: #1c1c1c;
    --good: #2e7d32; --warn: #a5730a; --crit: #b3261e; --info: #2f5fa8;
    --good-bg: #e7f2e8; --warn-bg: #fbf1dc; --crit-bg: #fbe9e7; --info-bg: #e8eefa; --none-bg: #ececea;
    --mono-bg: #f2f2ef;
}

.inv, .inv * { box-sizing: border-box; }

.inv {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.inv a { color: var(--accent); }

/* ── chrome ─────────────────────────────────────────────────────────────── */
.inv .topbar {
    background: var(--chrome); color: var(--chrome-ink);
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
}
.inv .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; }
.inv .brand .mark {
    width: 22px; height: 22px; border-radius: 3px; flex: none;
    background: linear-gradient(135deg, var(--accent) 0 50%, #3f9d46 50% 100%);
}
.inv .topbar .title { font-size: 1rem; font-weight: 600; }
.inv .topbar .spacer { flex: 1; }
.inv .theme-toggle {
    appearance: none; border: 1px solid var(--line); background: var(--panel);
    color: var(--ink); border-radius: 6px; padding: .3rem .6rem; cursor: pointer; font: inherit; font-size: .8rem;
}
.inv .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.inv .who { font-size: .8rem; color: var(--muted); }
.inv .signout-form { display: inline; }

.inv .shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: calc(100vh - 49px); }
.inv .side { background: var(--chrome); padding: .6rem 0; border-right: 1px solid var(--line); }
.inv .side a {
    display: block; padding: .5rem 1rem; color: var(--nav); text-decoration: none;
    font-size: .86rem; border-left: 3px solid transparent;
}
.inv .side a:hover { color: var(--nav-hover); }
.inv .side a.active {
    color: var(--accent); border-left-color: var(--accent);
    background: var(--nav-on-bg); font-weight: 600;
}
.inv .main { padding: 1.1rem 1.25rem 3rem; min-width: 0; }

@media (max-width: 900px) {
    .inv .shell { grid-template-columns: minmax(0, 1fr); }
    .inv .side { display: none; }
}

/* ── page furniture ─────────────────────────────────────────────────────── */
.inv .crumbs { font-size: .82rem; color: var(--muted); margin-bottom: .9rem; }
.inv .crumbs b { color: var(--ink); font-weight: 600; }
.inv .pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.inv h1 {
    font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    margin: 0; padding-left: .6rem; border-left: 4px solid var(--accent);
}
.inv .sitepick {
    margin-left: auto; background: var(--panel); border: 1px solid var(--line);
    color: var(--ink); border-radius: 6px; padding: .4rem .7rem; font: inherit; font-size: .84rem;
}

.inv .tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-wrap: wrap; }
.inv .tab {
    appearance: none; border: 0; background: none; cursor: pointer; color: var(--muted);
    font: inherit; font-weight: 600; font-size: .86rem; padding: .5rem .85rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.inv .tab:hover { color: var(--ink); }
.inv .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.inv .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.inv .tab .badge {
    display: inline-block; min-width: 1.15rem; padding: 0 .3rem; margin-left: .3rem;
    border-radius: 999px; background: var(--accent); color: var(--on-accent);
    font-size: .7rem; font-variant-numeric: tabular-nums;
}

.inv .toolbar { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: .8rem; }
.inv .toolbar input, .inv .toolbar select {
    font: inherit; font-size: .85rem; padding: .45rem .6rem; color: var(--ink);
    background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
.inv .toolbar input:focus, .inv .toolbar select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.inv .toolbar .search { flex: 1; min-width: 14rem; }
.inv .tally { font-size: .82rem; color: var(--muted); }
.inv .tally b { color: var(--ink); font-variant-numeric: tabular-nums; }
.inv .snapshot { font-size: .75rem; color: var(--faint); }

.inv .split { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1rem; align-items: start; }
@media (max-width: 1250px) { .inv .split { grid-template-columns: minmax(0, 1fr); } }

.inv .card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.inv .scroll { overflow-x: auto; max-height: 56vh; overflow-y: auto; }

.inv table { border-collapse: collapse; width: 100%; font-size: .83rem; color: var(--ink); margin: 0; }
.inv thead th {
    position: sticky; top: 0; z-index: 1; background: var(--accent); color: var(--on-accent);
    text-align: left; font-size: .72rem; font-weight: 700; padding: .55rem .6rem; white-space: nowrap;
}
.inv tbody td { padding: .42rem .6rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.inv tbody tr:hover { background: var(--panel-2); }
.inv tbody tr.picked { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.inv .id { color: var(--accent); font-weight: 600; }
.inv .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv .mono { font-family: "Consolas", ui-monospace, monospace; }
.inv .dim { color: var(--faint); }
.inv .chk { width: 1.6rem; text-align: center; }
.inv input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.inv .pill {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.inv .p-good { color: var(--good); background: var(--good-bg); }
.inv .p-warn { color: var(--warn); background: var(--warn-bg); }
.inv .p-crit { color: var(--crit); background: var(--crit-bg); }
.inv .p-info { color: var(--info); background: var(--info-bg); }
.inv .p-none { color: var(--muted); background: var(--none-bg); }

.inv .pager {
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
    padding: .5rem .6rem; border-top: 1px solid var(--line);
}
.inv .btn {
    appearance: none; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    padding: .4rem .8rem; border-radius: 6px; border: 1px solid var(--line);
    background: var(--panel-2); color: var(--ink);
}
.inv .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.inv .btn:disabled { opacity: .4; cursor: not-allowed; }
.inv .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inv .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.inv .btn.primary:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--on-accent); }
.inv .btn.sm { font-size: .75rem; padding: .25rem .55rem; }
.inv .pageinfo { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.inv aside {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    padding: .9rem; position: sticky; top: 1rem;
}
.inv aside h2 { font-size: .92rem; margin: 0 0 .1rem; }
.inv aside .sub { font-size: .78rem; color: var(--muted); margin: 0 0 .85rem; }
.inv .empty { color: var(--muted); font-size: .85rem; padding: 1.6rem .25rem; text-align: center; }

.inv dl.facts { display: grid; grid-template-columns: auto 1fr; gap: .22rem .7rem; margin: 0 0 .9rem; font-size: .82rem; }
.inv dl.facts dt { color: var(--muted); }
.inv dl.facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.inv fieldset { border: 0; padding: 0; margin: 0 0 .85rem; }
.inv legend {
    font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); padding: 0; margin-bottom: .35rem; float: none; width: auto;
}
.inv .seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.inv .seg button {
    flex: 1; appearance: none; border: 0; background: var(--panel-2); color: var(--muted);
    font: inherit; font-size: .77rem; font-weight: 600; padding: .42rem .3rem; cursor: pointer;
}
.inv .seg button.on { background: var(--accent); color: var(--on-accent); }
.inv .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.inv .wide {
    width: 100%; font: inherit; font-size: .86rem; padding: .42rem .5rem;
    background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
}
.inv .wide:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.inv .basket { max-height: 15rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin-bottom: .8rem; }
.inv .basket .row {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
    border-bottom: 1px solid var(--line-soft); font-size: .79rem;
    margin: 0; width: auto;
}
.inv .basket .row:last-child { border-bottom: 0; }
.inv .basket .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv .x { appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0 .2rem; }
.inv .x:hover { color: var(--crit); }

.inv details.batch { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-bottom: .7rem; }
.inv details.batch > summary {
    cursor: pointer; padding: .6rem .8rem; display: flex; flex-wrap: wrap;
    gap: .6rem; align-items: center; font-size: .85rem;
}
.inv details.batch .body { border-top: 1px solid var(--line); }
.inv .bstat { display: flex; gap: .35rem; margin-left: auto; }

.inv .alert {
    border: 1px solid var(--warn); border-left-width: 3px; background: var(--warn-bg);
    border-radius: 6px; padding: .6rem .8rem; margin-bottom: .8rem; font-size: .85rem;
    color: var(--ink);
}
.inv .alert.bad { border-color: var(--crit); background: var(--crit-bg); }
.inv .alert.ok { border-color: var(--good); background: var(--good-bg); }

.inv .spinner {
    display: inline-block; width: 12px; height: 12px; border: 2px solid var(--muted);
    border-top-color: transparent; border-radius: 50%; animation: inv-spin .7s linear infinite;
    vertical-align: -1px; margin-right: .35rem;
}
@keyframes inv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .inv .spinner { animation: none; } }

/* ── sign-in ────────────────────────────────────────────────────────────── */
.inv .signin {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.inv .signin-card {
    width: 100%; max-width: 380px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel); padding: 1.4rem;
}
.inv .signin-card h1 {
    font-size: 1.05rem; margin: .9rem 0 .3rem; letter-spacing: .02em;
    padding-left: .6rem; border-left: 4px solid var(--accent);
}
.inv .signin-card .sub { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; line-height: 1.5; }
.inv .signin-card label {
    display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin: .8rem 0 .3rem;
}