:root {
    /* Brand */
    --brand: #2a6df4;
    --brand-dark: #1f55c4;
    --brand-soft: #1E6FCE;
    --brand-tint: #eef4ff;
    --brand-tint-2: #f0f6ff;

    /* Surfaces */
    --ink: #0A0A0A;
    --bg: #f7f8fb;
    --bg-soft: #f7f8fb;
    --bg-stripe: #f2f5fb;
    --card: #ffffff;
    --card-2: #fafbfd;
    --border: #e3e6ec;
    --border-strong: #cdd3de;
    --divider: #eef0f5;

    /* Text */
    --text: #1b1f24;
    --muted: #5b6472;
    --text-muted: #5b6472;
    --text-soft: #8a93a3;

    /* Geometry */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 18px 42px rgba(15, 23, 42, 0.12);

    /* Typography */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;

    /* Layout */
    --maxw: 1120px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.brand:hover { text-decoration: none; }

/* ---- PIKKLIO logo (header small + homepage hero) ---- */
.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    color: #0A0A0A;
    text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-wordmark {
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #0A0A0A;
}
.logo-wordmark-accent {
    color: #1E6FCE;
}
.logo-sep {
    color: #c1c6d0;
    font-weight: 400;
    margin: 0 0.1rem;
}
.logo-tenant {
    color: #5b6472;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.logo--sm .logo-wordmark { font-size: 1.15rem; }

.logo--hero .logo-wordmark { font-size: 4rem; line-height: 1; }

.logo-tagline {
    margin: 0.75rem 0 2rem;
    color: #1E6FCE;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
}

.hero-actions {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.nav-link {
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
}
.nav-link:hover { color: var(--brand); text-decoration: none; }

.info-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 0;
}
.info-page h1 { margin-top: 0; }
.info-page h2 {
    margin-top: 2rem;
    font-size: 1.35rem;
}
.info-list { padding-left: 1.25rem; }
.info-list li { margin-bottom: 0.75rem; }
.info-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.site-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}
.btn-primary {
    background: var(--brand);
    color: #fff;
}
.btn-primary:hover {
    background: var(--brand-dark);
    text-decoration: none;
}
.btn-lg { padding: 0.85rem 1.6rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}
.hero h1 { font-size: 2.5rem; margin: 0 0 0.5rem; }
.lede {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 1.5rem;
}

.features {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 2rem;
}
.feature {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.feature h2 { margin-top: 0; font-size: 1.15rem; }
.feature p { color: var(--muted); margin-bottom: 0; }

.auth-card {
    max-width: 400px;
    margin: 3rem auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.auth-card h1 { margin: 0 0 0.25rem; }
.muted { color: var(--muted); }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.auth-form label {
    font-weight: 600;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.auth-form input {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    background: #fff;
}
.auth-form input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(42, 109, 244, 0.15);
}
.auth-form button { margin-top: 1rem; }

.auth-foot {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg); text-decoration: none; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.message {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    background: #eef4ff;
    border: 1px solid #c8daf9;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.message-error, .message-warning {
    background: #fff1f0;
    border-color: #f7c3bf;
}
.message-success { background: #eefcf3; border-color: #b9e6c9; }

.form-error {
    background: #fff1f0;
    border: 1px solid #f7c3bf;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: #8a1e15;
    margin-bottom: 1rem;
}
.form-error ul { margin: 0; padding-left: 1.25rem; }

.pin-card {
    max-width: 340px;
    margin: 4rem auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    text-align: center;
}
.pin-card h1 { margin: 0 0 0.25rem; }
.pin-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.pin-input {
    font-size: 2rem;
    letter-spacing: 0.5rem;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.pin-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(42, 109, 244, 0.15);
}
.pin-error {
    color: #8a1e15;
    background: #fff1f0;
    border: 1px solid #f7c3bf;
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.order-page { max-width: 960px; }
.order-page h1 { margin-bottom: 0.25rem; }

.order-form { margin-top: 1.5rem; }

.order-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.order-grid th, .order-grid td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.order-grid th { background: var(--bg); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.order-grid__group td {
    background: #f2f5fb;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.order-grid .cat-row th {
    background: #f2f5fb;
    color: var(--ink, #1f2937);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.1rem;
    font-weight: 800;
}
.order-grid .line-item {
    font-weight: 500;
}
.col-item { width: 55%; }
.col-uom { width: 25%; color: var(--muted); }
.col-qty { width: 20%; }

.col-qty input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.col-qty input:focus { outline: none; border-color: var(--brand); }
.col-qty input.touched {
    border-left: 4px solid var(--brand);
    background: #f0f6ff;
    padding-left: 0.4rem;
}

.col-min, .col-max {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    width: 6ch;
}
.col-to-order {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    width: 8ch;
    color: var(--muted);
}

.order-grid .col-qty {
    width: 10ch;
}
.order-grid .col-qty input {
    min-width: 8ch;
}
.col-to-order.to-order--positive {
    color: var(--brand);
    background: #f0f6ff;
}

.comments-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.order-form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
}

.confirmation-banner {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.confirmation-banner h1 {
    font-size: 4rem;
    letter-spacing: 0.1em;
    color: var(--brand);
    margin: 0 0 1rem;
}

.clerk-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.clerk-header h1 { margin-bottom: 0.25rem; }
.clerk-toolbar { display: flex; gap: 0.5rem; }

.tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.tile-count {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
}
.tile-label {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.filter-bar label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--muted);
    gap: 0.25rem;
}
.filter-bar select, .filter-bar input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: #fff;
}

.order-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.order-table th, .order-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.order-table th {
    background: var(--bg);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.order-table tr:last-child td { border-bottom: none; }

.status-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #eef4ff;
    color: #1f55c4;
}
.status-pending { background: #fff4d6; color: #8a5e00; }
.status-validated { background: #d8f3e4; color: #19663d; }
.status-exported { background: #e1e8f4; color: #2a4580; }

.export-queued   { background: #fff4d6; color: #8a5e00; }
.export-sent     { background: #d8f3e4; color: #19663d; }
.export-failed   { background: #ffd6d6; color: #8a1a1a; }

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.85rem; }

.clerk-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.comment-box {
    background: #fff8e6;
    border: 1px solid #f3e0a1;
    color: #7a5800;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.print-sheet {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1rem;
}
.print-sheet header h1 { margin: 0 0 0.5rem; }

/* One order block inside a by-location sheet. Orders are kept separate (never
   merged into a single consolidated pick list) so the picker can see who each
   line is for. */
.loc-order { margin-top: 1.5rem; }
.loc-order:first-of-type { margin-top: 1rem; }
.loc-order h2 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}
.loc-order h2 .muted { font-weight: 400; font-size: 0.9rem; }

/* ==========================================================================
   Marketing site (.mkt) — refreshed visual system from the design handoff.
   Scoped under body.mkt so existing app surfaces stay unchanged.
   ========================================================================== */

body.mkt {
    background: #ffffff;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.mkt a { color: var(--brand); }
body.mkt a:hover { text-decoration: underline; }

/* ---- Topbar (sticky) ---- */
.mkt-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
}
.mkt-topbar__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.mkt-topbar .logo-wordmark { font-size: 1.2rem; }
.mkt-topbar__nav { display: flex; align-items: center; gap: 0.25rem; }
.mkt-topbar .nav-link {
    padding: 0.5rem 0.85rem;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    transition: background 0.12s, color 0.12s;
}
.mkt-topbar .nav-link:hover {
    background: var(--bg-soft);
    color: var(--brand);
    text-decoration: none;
}
.mkt-topbar .nav-link--active { color: var(--brand); }

.mkt-lang-switch {
    display: inline-flex;
    align-items: center;
    margin: 0 0.25rem 0 0.5rem;
    padding: 0.15rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    gap: 0.1rem;
}
.mkt-lang-switch__btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-soft, var(--text));
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.12s, color 0.12s;
}
.mkt-lang-switch__btn:hover { color: var(--brand); }
.mkt-lang-switch__btn--active {
    background: #fff;
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---- Marketing layout primitives ---- */
body.mkt main { display: block; }
.mkt-container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.mkt-section { padding: 5rem 0; }
.mkt-section--tight { padding: 3rem 0; }
.mkt-section--soft { background: var(--bg-soft); }
.mkt-section--ink {
    background: var(--ink);
    color: #fff;
}
.mkt-section--ink h1,
.mkt-section--ink h2,
.mkt-section--ink h3 { color: #fff; }
.mkt-section--ink .lede { color: #c2c8d2; }

.eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-soft);
    margin: 0 0 0.85rem;
}

body.mkt h1, body.mkt h2, body.mkt h3 {
    letter-spacing: -0.01em;
    text-wrap: balance;
}
body.mkt h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    margin: 0 0 1rem;
    line-height: 1.05;
    font-weight: 800;
}
body.mkt h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    margin: 0 0 1rem;
    line-height: 1.15;
    font-weight: 800;
}
body.mkt h3 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
}
body.mkt .lede {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    max-width: 56ch;
    margin: 0 0 1.5rem;
    text-wrap: pretty;
}

/* ---- Marketing buttons ---- */
body.mkt .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.97rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    white-space: nowrap;
}
body.mkt .btn:hover { text-decoration: none; }
body.mkt .btn:active { transform: translateY(1px); }
body.mkt .btn-ink { background: var(--ink); color: #fff; }
body.mkt .btn-ink:hover { background: #222; }
body.mkt .btn-brand { background: var(--brand); color: #fff; }
body.mkt .btn-brand:hover { background: var(--brand-dark); }
body.mkt .btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
body.mkt .btn-ghost:hover {
    background: var(--bg-soft);
    border-color: var(--border-strong);
}
body.mkt .btn-lg { padding: 0.95rem 1.5rem; font-size: 1.02rem; }

/* ---- Hero ---- */
.mkt-hero { padding: 5rem 0 4rem; position: relative; overflow: hidden; }
.mkt-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}
.mkt-hero__copy h1 { margin-bottom: 1.25rem; }
.mkt-hero__cta { display: flex; gap: 0.75rem; margin: 1.75rem 0 1.25rem; flex-wrap: wrap; }
.mkt-hero__meta {
    display: flex;
    gap: 1.25rem;
    color: var(--text-soft);
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.mkt-hero__meta strong { color: var(--text); }

/* ---- Hero device images (kiosk + tablet/PC, side by side) ---- */
.hero-devices {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.9rem;
    align-items: center;
}
.hero-devices__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    background: var(--bg-soft);
}

/* ---- Employee-view section (CSS device mock + supporting copy) ---- */
.employee-view {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
.employee-view__copy h2 { margin: 0.5rem 0 1rem; }

/* ---- Device mock (browser-window-style frame for the order screen) ---- */
.device {
    position: relative;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.device__bar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}
.device__dot { width: 11px; height: 11px; border-radius: 50%; background: #d6d9df; }
.device__dot:nth-child(1) { background: #ff5f57; }
.device__dot:nth-child(2) { background: #ffbd2e; }
.device__dot:nth-child(3) { background: #28c840; }
.device__url {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-soft);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.18rem 0.6rem;
}

.mini-order { padding: 1rem 1.1rem 1.2rem; }
.mini-order__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.85rem;
}
.mini-order__title { font-weight: 700; font-size: 1.05rem; }
.mini-order__ws { color: var(--text-muted); font-size: 0.85rem; }
.mini-order__mode {
    font-size: 0.75rem;
    color: var(--text-soft);
    letter-spacing: 0.06em;
}
.mini-order__row {
    display: grid;
    grid-template-columns: 1fr 4ch 7ch;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.mini-order__row:last-child { border-bottom: none; }
.mini-order__row .uom { color: var(--text-soft); font-size: 0.82rem; }
.mini-order__row .qty {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    background: var(--brand-tint);
    color: var(--brand-dark);
    border-radius: var(--radius-sm);
    padding: 0.18rem 0.55rem;
}
.mini-order__row .qty--zero { background: transparent; color: var(--text-soft); }
.mini-order__group {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding: 0.7rem 0 0.35rem;
    border-bottom: 1px solid var(--border);
}
.mini-order__cta {
    margin-top: 1rem;
    background: var(--brand);
    color: #fff;
    text-align: center;
    padding: 0.85rem;
    border-radius: var(--radius);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ---- Steps ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.step {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
}
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    margin-bottom: 0.85rem;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { margin: 0; color: var(--text-muted); }

/* ---- Stat strip ---- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.stat__num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--text-muted); font-size: 0.92rem; margin-top: 0.2rem; }

/* ---- Feature cards ---- */
.feature-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(3, 1fr);
}
.feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.feature-card__num {
    font-family: var(--font-mono);
    color: var(--brand-soft);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.feature-card h3 { margin-top: 0.35rem; margin-bottom: 0.45rem; }
.feature-card p { margin: 0; color: var(--text-muted); }

/* ---- Pricing ---- */
.price-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 2.25rem;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: var(--shadow);
}
.price-card__lede { color: var(--text-muted); margin: 0 0 1.5rem; }
.price-tag { font-size: 1.4rem; font-weight: 800; color: var(--ink); }
.price-card ul { list-style: none; padding: 0; margin: 1.5rem 0; }
.price-card li {
    padding: 0.55rem 0 0.55rem 1.85rem;
    position: relative;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.price-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--brand-tint);
    border-radius: 50%;
    transform: translateY(-50%);
}
.price-card li::after {
    content: "";
    position: absolute;
    left: 0.36rem;
    top: 50%;
    width: 0.55rem;
    height: 0.32rem;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: translateY(-72%) rotate(-45deg);
}
.price-card li:last-child { border-bottom: none; }

/* ---- Contact ---- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.contact-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.contact-list li:last-child { border-bottom: none; }
.email-link {
    display: inline-block;
    padding: 0.65rem 1rem;
    background: var(--brand-tint);
    color: var(--brand-dark);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-weight: 600;
}
/* Secondary heading inside a contact card, for the mailing address that
   sits under the email link. */
.contact-card__sub {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.75rem 0 0.6rem;
}
/* <address> is italic by default in every browser — reset it. */
.contact-address {
    font-style: normal;
    color: var(--text);
    line-height: 1.6;
}

/* ---- Footer (dark) ---- */
.mkt-footer {
    background: var(--ink);
    color: #c2c8d2;
    padding: 4rem 0 2rem;
}
.mkt-footer__grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
.mkt-footer__col h4 {
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.85rem;
    font-weight: 700;
}
.mkt-footer__col a {
    display: block;
    color: #c2c8d2;
    padding: 0.25rem 0;
    cursor: pointer;
}
.mkt-footer__col a:hover { color: #fff; text-decoration: none; }
.mkt-footer__brand .logo-wordmark { color: #fff; font-size: 1.4rem; }
.mkt-footer__brand p { color: #8a93a3; max-width: 28ch; margin: 1rem 0 0; }
.mkt-footer__btm {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 2rem 1.5rem 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #2a2f3a;
    font-size: 0.85rem;
    color: #8a93a3;
}

/* ---- Responsive ---- */
@media (max-width: 800px) {
    .mkt-hero__inner { grid-template-columns: 1fr; }
    .feature-grid, .steps { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .mkt-footer__grid { grid-template-columns: 1fr 1fr; }
    .mkt-topbar__nav .nav-link:not(.btn) { display: none; }
    .employee-view { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   Workstation kiosk (.kiosk) — touch-first PIN + ordering screens.
   Scoped under body.kiosk so existing app surfaces stay unchanged.
   ========================================================================== */

body.kiosk {
    background: var(--bg);
    font-size: 17px;
    line-height: 1.45;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Status feedback colors used by kiosk */
body.kiosk {
    --success: #16a34a;
    --success-soft: #ecfdf5;
    --success-border: #b9e8c8;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
}

/* Ordering screen: banners raised by kiosk_order.js — a restored draft, or a
   session that timed out anyway. Built in JS rather than rendered hidden,
   because neither is a normal part of the page. */
.kiosk-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    margin: 0 0 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: 0.95rem;
    line-height: 1.4;
}
.kiosk-notice--info {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: #14532d;
}
.kiosk-notice--warn {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
    font-weight: 600;
}
.kiosk-notice span { flex: 1; min-width: 0; }
.kiosk-notice__close {
    flex: none;
    background: none;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.25rem;
}
.kiosk-notice__close:hover { opacity: 1; }

/* ---- Kiosk header ---- */
.kiosk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.kiosk-header__brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1rem;
}
.kiosk-header__brand .logo-wordmark { font-size: 1rem; }
.kiosk-header__sep { color: var(--border-strong); }
.kiosk-header__tenant { color: var(--text-muted); font-weight: 500; }
.kiosk-header__ws { color: var(--text); font-weight: 600; }
.kiosk-header__right { display: flex; align-items: center; gap: 1rem; }
.kiosk-header__user { color: var(--text-muted); font-size: 0.95rem; }

/* ---- Kiosk PIN ---- */
.pin-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
body.kiosk .pin-card {
    width: 100%;
    max-width: 460px;
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: var(--shadow);
    text-align: center;
}
body.kiosk .pin-card h1 {
    margin: 0 0 0.4rem;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
}
body.kiosk .pin-card .sub {
    margin: 0 0 1.6rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.pin-display {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin: 1rem 0 1.4rem;
}
.pin-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--card);
    transition: background 0.12s, border-color 0.12s;
}
.pin-dot--filled { background: var(--brand); border-color: var(--brand); }
.pin-dot--error { border-color: var(--danger); }
body.kiosk .pin-error {
    color: var(--danger);
    font-size: 0.9rem;
    margin: 0 0 0.8rem;
    background: transparent;
    border: 0;
    padding: 0;
}
.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 1rem;
}
.key {
    font: inherit;
    cursor: pointer;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 1.6rem;
    font-weight: 500;
    height: 64px;
    color: var(--text);
    transition: background 0.1s, transform 0.05s;
}
.key:hover { background: var(--card-2); }
.key:active { background: var(--brand-tint); transform: scale(0.97); }
.key--util { font-size: 1rem; color: var(--text-muted); }
.pin-foot {
    margin-top: 1.5rem;
    color: var(--text-soft);
    font-size: 0.85rem;
}

/* ---- Kiosk workstation chooser ----
   Shown after PIN login when an employee is assigned to more than one
   workstation. Big touch targets: this is a workstation touchscreen. */
body.kiosk .pin-card--wide { max-width: 620px; }
.ws-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    margin-top: 0.5rem;
}
.ws-choice {
    font: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 96px;
    padding: 1.1rem 1.2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    transition: background 0.1s, border-color 0.1s, transform 0.05s;
}
.ws-choice:hover { background: var(--card-2); border-color: var(--border-strong); }
.ws-choice:active { background: var(--brand-tint); border-color: var(--brand); transform: scale(0.985); }
.ws-choice__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.ws-choice__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.ws-choice__code { font-family: var(--font-mono); }
.ws-choice__mode {
    background: var(--brand-tint);
    color: var(--brand);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Kiosk button overrides */
body.kiosk .btn {
    border-radius: var(--radius-lg);
    padding: 0.65rem 1.1rem;
    font-weight: 600;
}
body.kiosk .btn-lg {
    padding: 1rem 1.6rem;
    font-size: 1.05rem;
    border-radius: 12px;
}
body.kiosk .btn-primary:disabled {
    background: var(--border-strong);
    border-color: var(--border-strong);
    color: #fff;
    cursor: not-allowed;
}
body.kiosk .btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}
body.kiosk .btn-ghost:hover {
    background: var(--card-2);
    color: var(--text);
}

/* ---- Kiosk order pages ---- */
body.kiosk .order-page {
    flex: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.5rem 8rem;
    width: 100%;
}
.order-head h1 {
    margin: 0.4rem 0 0.3rem;
    font-size: 1.9rem;
    letter-spacing: -0.015em;
}
.order-head .sub { margin: 0; color: var(--text-muted); }
.mode-pill {
    display: inline-block;
    background: var(--brand-tint);
    color: var(--brand);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.order-search { margin: 1.5rem 0 1.2rem; }
.order-search input {
    width: 100%;
    font: inherit;
    font-size: 1.05rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}
.order-search input:focus {
    outline: 2px solid var(--brand-tint);
    border-color: var(--brand);
}

.cat-section { margin-bottom: 1.6rem; }
.cat-section__title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 0.25rem 0.6rem;
}
.cat-section__count {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-soft);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.items {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.item__name { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.15rem; }
.item__meta {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.item__sku {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: var(--card-2);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--border);
}

/* Stepper (free order) */
.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--card);
    overflow: hidden;
}
.stepper--zero { border-color: var(--border); }
.stepper__btn {
    font: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text);
    transition: background 0.1s;
}
.stepper__btn:hover:not(:disabled) { background: var(--card-2); }
.stepper__btn:active:not(:disabled) { background: var(--brand-tint); }
.stepper__btn:disabled { color: var(--border-strong); cursor: not-allowed; }
.stepper__val {
    min-width: 44px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
}

/* Free order column grid */
.items--free { padding: 0; }
.free-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 200px;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.free-row:last-child { border-bottom: none; }
.free-row--has-qty { background: #d3e2ff; box-shadow: inset 5px 0 0 0 var(--brand); }
.free-row--seen { background: var(--card-2); box-shadow: inset 5px 0 0 0 var(--border-strong); }
.free-row--head {
    background: var(--card-2);
    padding: 0.55rem 1.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.free-row--head:hover { background: var(--card-2); }
.mm-col { min-width: 0; }
.mm-col--qty { display: flex; justify-content: flex-end; }
.free-row--head .mm-col--qty { padding-right: 0.5rem; }

/* Min/Max column grid */
.items--mm { padding: 0; }
.mm-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 60px 60px 110px 90px;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.mm-row:last-child { border-bottom: none; }
.mm-row--has-qty { background: #d3e2ff; box-shadow: inset 5px 0 0 0 var(--brand); }
.mm-row--head {
    background: var(--card-2);
    padding: 0.55rem 1.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.mm-row--head:hover { background: var(--card-2); }
.mm-col--pkg { color: var(--text-muted); font-size: 0.9rem; }
/* Header pkg cell should match the other column headers, not the body cells. */
.free-row--head .mm-col--pkg,
.mm-row--head .mm-col--pkg { font-size: inherit; }
.mm-col--num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}
.mm-row--head .mm-col--num,
.mm-row--head .mm-col--input,
.mm-row--head .mm-col--out { text-align: center; }
.onhand-input {
    font: inherit;
    width: 100%;
    height: 48px;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--card);
}
.onhand-input::placeholder { color: var(--text-soft); font-weight: 400; }
.onhand-input:focus {
    outline: 2px solid var(--brand-tint);
    border-color: var(--brand);
}
.onhand-input--touched {
    border: 2px solid var(--brand-dark);
    background: #d3e2ff;
    color: var(--brand-dark);
}
.toorder-pill {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-2);
    color: var(--text-soft);
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
}
.toorder-pill--positive {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-border);
}

/* Comments box */
body.kiosk .comments { margin-top: 2rem; }
body.kiosk .comments label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
body.kiosk .comments textarea {
    width: 100%;
    font: inherit;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    resize: vertical;
}
body.kiosk .comments textarea:focus {
    outline: 2px solid var(--brand-tint);
    border-color: var(--brand);
}

/* Delivery date + time — only rendered for employees allowed to pick one. */
body.kiosk .delivery-input {
    font: inherit;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--text);
    min-height: 52px;
}
body.kiosk .delivery-input:focus {
    outline: 2px solid var(--brand-tint);
    border-color: var(--brand);
}
.delivery-field__hint {
    margin-top: 0.35rem;
    color: var(--text-soft);
    font-size: 0.8rem;
}

/* Sticky submit bar */
.submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04);
    z-index: 30;
}
.submit-bar__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
/* A rejected submit, said where the employee is actually looking.
   The detailed list sits at the top of the document, which on a 258-item
   screen can be thousands of pixels from the ORDER button — and the button
   lives in this fixed bar, so this is the one place always in view. */
.submit-bar__error {
    display: block;
    padding: 0.6rem 1.5rem;
    background: #fff1f0;
    border-bottom: 1px solid #f7c3bf;
    color: #8a1e15;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.submit-bar__error:hover,
.submit-bar__error:focus { text-decoration: underline; }

.submit-bar__summary { color: var(--text-muted); }
.submit-bar__summary strong { color: var(--text); font-weight: 700; }
.submit-bar .btn-lg { min-width: 200px; letter-spacing: 0.04em; }

/* Confirmation */
body.kiosk .confirmation {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    min-height: 80vh;
}
.confirmation__check {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--success-soft);
    position: relative;
    margin-bottom: 1.5rem;
    border: 2px solid var(--success-border);
}
.confirmation__check::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 46px;
    width: 18px;
    height: 36px;
    border: solid var(--success);
    border-width: 0 4px 4px 0;
    transform: rotate(45deg) translate(-2px, -10px);
}
body.kiosk .confirmation h1 {
    font-size: 2.2rem;
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
    color: var(--success);
}
body.kiosk .confirmation .num {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin: 0 0 1.5rem;
    font-size: 1rem;
}

/* ==========================================================================
   Clerk dashboard (.clerk) — stockroom triage + order fulfillment.
   Scoped under body.clerk so existing app surfaces stay unchanged.
   ========================================================================== */

body.clerk {
    background: var(--bg);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
}

/* Status palette (mirrors design tokens) */
body.clerk {
    --status-pending-bg: #fff4d6;     --status-pending-fg: #8a5e00;
    --status-validated-bg: #d8f3e4;   --status-validated-fg: #19663d;
    --status-exported-bg: #e1e8f4;    --status-exported-fg: #2a4580;
    --status-failed-bg: #ffd6d6;      --status-failed-fg: #8a1a1a;
    --status-info-bg: #eef4ff;        --status-info-fg: #1f55c4;
    --danger: #dc2626;                --danger-dark: #b91c1c;
    --danger-soft: #fef2f2;           --danger-border: #f6c9c9;
}

/* ---- Clerk header ---- */
.clerk-topbar {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.clerk-topbar__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--ink);
}
.clerk-topbar__brand .logo-wordmark { font-size: 1.1rem; }
.clerk-topbar__sep { color: #c1c6d0; font-weight: 400; }
.clerk-topbar__tenant { color: var(--text-muted); font-weight: 600; }
.clerk-topbar__role { color: var(--text-soft); font-weight: 500; font-size: 0.85rem; }
.clerk-topbar__user { display: flex; align-items: center; gap: 0.85rem; }
.user-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem 0.4rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    font-size: 0.9rem;
}
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
}

/* ---- Clerk page chrome ---- */
body.clerk main.clerk-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
    display: block;
}
body.clerk .container { max-width: 1200px; padding: 1.5rem 1.5rem 4rem; }

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.page-head h1 {
    margin: 0 0 0.25rem;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.page-head .sub { color: var(--text-muted); margin: 0; }
body.clerk .toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Separates the print menu from the one action that writes to the ERP, so
   the two never read as neighbours in the same list. */
.toolbar__divider {
    width: 1px;
    align-self: stretch;
    min-height: 1.6rem;
    background: var(--border);
}
/* Clerk button overrides */
body.clerk .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    border: 1px solid transparent;
    background: var(--card);
    color: var(--text);
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}
body.clerk .btn:hover { background: var(--bg-stripe); }
body.clerk .btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
body.clerk .btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
body.clerk .btn-dark {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
body.clerk .btn-dark:hover { background: #222; }
body.clerk .btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
body.clerk .btn-ghost:hover { background: var(--bg-stripe); }
body.clerk .btn-lg { padding: 0.75rem 1.25rem; font-size: 1rem; }
body.clerk .btn-sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

/* ---- Action menu (a <details>, so still no JS) ----
   The clerk's print variants used to sit in the page head as four
   full-width ghost buttons stacked in a right-aligned column: a wall of
   grey with ragged edges, four labels all starting with "Print", and an
   irreversible ERP write given exactly the same weight as a printout.
   They are really one choice — print, grouped how? — so they collapse
   into one button, and each option carries a line saying what the
   grouping is *for*, which the labels alone never said. Same
   `<details>` pattern as `.filter-dropdown` elsewhere in the app. */
.btn-menu { position: relative; }
.btn-menu__trigger {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.btn-menu__trigger::-webkit-details-marker { display: none; }
.btn-menu__trigger::after {
    content: "\25be";
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-soft);
}
.btn-menu[open] .btn-menu__trigger {
    background: var(--bg-stripe);
    border-color: var(--border-strong);
}
.btn-menu__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 19rem;
    padding: 0.35rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    text-align: left;
}
.btn-menu__item {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.btn-menu__item:hover,
.btn-menu__item:focus-visible {
    background: var(--bg-stripe);
    text-decoration: none;
}
.btn-menu__label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
}
.btn-menu__hint {
    display: block;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-muted);
}
.btn-menu__sep {
    height: 1px;
    margin: 0.3rem 0.35rem;
    background: var(--divider);
}
.btn-menu__group {
    padding: 0.45rem 0.6rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Stated on a pick sheet when direct lines are left off it, so a short list
   is never mistaken for a complete one. Prints — the picker needs to see it. */
.print-note {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--border-strong);
    background: var(--bg-stripe);
    font-size: 0.9rem;
    color: var(--text-muted);
}
@media print {
    .print-note {
        background: transparent;
        border-left: 2px solid #999;
        color: #000;
    }
}

/* The one toolbar action that writes into the customer's ERP and cannot be
   undone there. Tinted so it can never be mistaken for another print. */
body.clerk .btn-erp {
    background: var(--brand-tint);
    border-color: #c3d8fb;
    color: var(--brand-dark);
}
body.clerk .btn-erp:hover {
    background: #e2ecfe;
    border-color: var(--brand);
}
body.clerk .btn-erp:disabled {
    background: var(--card);
    border-color: var(--border);
    color: var(--text-soft);
    cursor: default;
}
/* Count of orders still owing purchase orders. */
.btn__count {
    display: inline-block;
    min-width: 1.35rem;
    padding: 0 0.32rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

/* ---- Destructive actions ----
   `.btn-danger` (order-detail cancellation) had no CSS at all, so the
   confirm button rendered identically to "Save delivered quantities". */
body.clerk .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
body.clerk .btn-danger:hover {
    background: var(--danger-dark);
    border-color: var(--danger-dark);
}
.cancel-zone { margin-top: 1.25rem; }
body.clerk .cancel-zone__trigger { color: var(--danger); }
body.clerk .cancel-zone__trigger:hover {
    background: var(--danger-soft);
    border-color: var(--danger-border);
}
.cancel-zone__panel {
    margin-top: 0.75rem;
    max-width: 40rem;
    padding: 1rem 1.1rem;
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-lg);
}
.cancel-zone__panel p { margin: 0 0 0.75rem; }
.cancel-zone__reason {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}
.cancel-zone__reason input {
    margin-top: 0.3rem;
    width: 100%;
    text-align: left;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--text);
}

/* ---- KPI tiles ---- */
.tile-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
body.clerk .tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    transition: border-color 0.12s;
    color: inherit;
    text-decoration: none;
    margin-bottom: 0;
    width: auto;
}
body.clerk .tile:hover {
    border-color: var(--border-strong);
    text-decoration: none;
}
body.clerk .tile--accent {
    background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 100%);
    border-color: #cfdfff;
}
body.clerk .tile--accent .tile-count { color: var(--brand-dark); }
body.clerk .tile--active {
    border: 2px solid var(--brand);
    padding: calc(1.1rem - 1px) calc(1.25rem - 1px);
}
body.clerk .tile--danger { border-color: #f3c4c4; }
body.clerk .tile--danger .tile-count { color: var(--status-failed-fg); }
body.clerk .tile-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
}
body.clerk .tile-count {
    font-size: 2.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: var(--text);
}
body.clerk .tile-meta { color: var(--text-muted); font-size: 0.85rem; }

/* ---- Status chips (segmented filter) ---- */
.chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    text-decoration: none;
}
.chip:hover { background: var(--bg-stripe); text-decoration: none; }
.chip--active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.chip__count {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    background: var(--bg-stripe);
    color: var(--text-muted);
    padding: 0 0.4rem;
    border-radius: 999px;
}
.chip--active .chip__count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ---- Clerk filter bar ---- */
body.clerk .filter-bar {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: end;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}
body.clerk .filter-bar .field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
body.clerk .filter-bar .field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}
body.clerk .filter-bar .field select,
body.clerk .filter-bar .field input {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text);
    min-width: 9rem;
}
body.clerk .filter-bar .field select:focus,
body.clerk .filter-bar .field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(42, 109, 244, 0.15);
}
body.clerk .filter-bar .field input[type="search"] { min-width: 16rem; }
body.clerk .filter-bar .field--grow { flex: 1; min-width: 12rem; }
body.clerk .filter-bar__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    align-self: end;
}

/* ---- Clerk card + table ---- */
body.clerk .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.card__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card__head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.card__head .count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin-left: 0.5rem;
}

body.clerk .table {
    width: 100%;
    border-collapse: collapse;
}
body.clerk .table th,
body.clerk .table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}
body.clerk .table thead th {
    background: var(--card-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
}
body.clerk .table tbody tr { transition: background 0.08s; }
body.clerk .table tbody tr:hover { background: var(--brand-tint-2); }
body.clerk .table tbody tr:last-child td { border-bottom: none; }
body.clerk .table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* A requested delivery date is emphasised; "Now" stays muted, so a future
   date jumps out of a long list of same-day orders. */
body.clerk .table .delivery-when {
    font-weight: 600;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
body.clerk .table .mono {
    font-family: var(--font-mono);
    font-size: 0.92rem;
}
body.clerk .row-strong { font-weight: 600; }

/* ---- Pills (status + export) ---- */
body.clerk .pill,
body.clerk .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    white-space: nowrap;
}
body.clerk .pill::before,
body.clerk .status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
body.clerk .pill--pending,
body.clerk .status-pending {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}
body.clerk .pill--validated,
body.clerk .status-validated {
    background: var(--status-validated-bg);
    color: var(--status-validated-fg);
}
body.clerk .pill--exported,
body.clerk .status-exported {
    background: var(--status-exported-bg);
    color: var(--status-exported-fg);
}
body.clerk .pill--failed,
body.clerk .export-failed {
    background: var(--status-failed-bg);
    color: var(--status-failed-fg);
}
body.clerk .pill--queued,
body.clerk .export-queued {
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}
body.clerk .pill--sent,
body.clerk .export-sent {
    background: var(--status-validated-bg);
    color: var(--status-validated-fg);
}

/* ---- Bulk-actions bar ---- */
.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--brand-tint);
    font-size: 0.92rem;
}
.bulk-bar strong { font-weight: 700; }

/* ---- Custom checkbox ---- */
.cb-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.cb-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}
.cb {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.1s, border-color 0.1s;
}
.cb-wrap input:checked + .cb,
.cb--checked {
    background: var(--brand);
    border-color: var(--brand);
}
.cb-wrap input:checked + .cb::after,
.cb--checked::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-2px);
}

/* ---- Order detail head ---- */
.detail-head {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.detail-head__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.detail-head h1 {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}
.detail-meta {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.detail-meta .dot { color: var(--text-soft); }
.detail-meta strong { color: var(--text); font-weight: 600; }
.detail-error {
    margin-top: 0.85rem;
    background: var(--status-failed-bg);
    border: 1px solid #f3c4c4;
    color: var(--status-failed-fg);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    font-size: 0.92rem;
}
.detail-erpref {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.detail-erpref code {
    font-family: var(--font-mono);
    background: var(--bg-stripe);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.note-box {
    background: #fff8e6;
    border: 1px solid #f3e0a1;
    color: #7a5800;
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.note-box strong { color: #5e4400; }

/* ---- Lines table ---- */
.lines {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.lines-table {
    width: 100%;
    border-collapse: collapse;
}
.lines-table th,
.lines-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--divider);
    text-align: left;
    vertical-align: middle;
}
.lines-table thead th {
    background: var(--card-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
}
.lines-table tbody tr:last-child td { border-bottom: none; }
.lines-table tbody .cat-row th {
    background: var(--card-2);
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
}
.lines-table .item-name { font-weight: 600; }
.lines-table .item-sku {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}
.lines-table .col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.qty-input {
    width: 8rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-family: inherit;
    background: #fff;
}
.qty-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(42, 109, 244, 0.15);
}
.qty-input--changed {
    border-color: var(--brand);
    border-left: 5px solid var(--brand);
    background: #d3e2ff;
    padding-left: 0.4rem;
    font-weight: 600;
}
.uom-select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    max-width: 12rem;
}
.uom-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(42, 109, 244, 0.15);
}

.actions-bar {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    position: sticky;
    bottom: 1rem;
    box-shadow: var(--shadow);
}
.actions-bar__hint {
    margin-right: auto;
    color: var(--text-muted);
    font-size: 0.92rem;
    align-self: center;
}

/* ---- Empty state ---- */
.empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.empty h3 { color: var(--text); margin: 0 0 0.4rem; }

@media (max-width: 900px) {
    .tile-row { grid-template-columns: repeat(2, 1fr); }
    body.clerk .filter-bar .field input[type="search"] { min-width: 100%; }
}
@media (max-width: 480px) {
    /* The panel's 19rem would overhang a phone, so let it shrink. */
    .btn-menu__panel { min-width: 0; width: calc(100vw - 3rem); }
}

/* ==========================================================================
   Tenant admin (.admin) — sidebar shell + KPIs + tables + drawers.
   Scoped under body.admin; replaces the default Django admin look at /manage/.
   ========================================================================== */

body.admin {
    --sidebar-w: 248px;
    --topbar-h: 56px;
    --row-py: 0.7rem;
    --row-px: 1rem;
    --gap: 1.25rem;

    --status-pending-bg: #fff4d6;     --status-pending-fg: #8a5e00;
    --status-validated-bg: #d8f3e4;   --status-validated-fg: #19663d;
    --status-exported-bg: #e1e8f4;    --status-exported-fg: #2a4580;
    --status-failed-bg: #ffd6d6;      --status-failed-fg: #8a1a1a;
    --status-info-bg: #eef4ff;        --status-info-fg: #1f55c4;
    /* Defined here as well as under body.kiosk/body.clerk: /manage/ already
       uses them (.past-due--blocked) and had nothing to resolve them to. */
    --danger: #dc2626;                --danger-dark: #b91c1c;
    --danger-soft: #fef2f2;           --danger-border: #f6c9c9;

    background: var(--bg);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

/* ---- Shell layout ---- */
.admin-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
    background: var(--card);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.admin-sidebar__brand {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.admin-sidebar__brand .logo-wordmark { font-size: 1.05rem; }
.tenant-pill {
    font-size: 0.7rem;
    background: var(--brand-tint);
    color: var(--brand-dark);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.admin-sidebar__search {
    padding: 0.7rem 0.7rem 0.2rem;
    position: relative;
}
.admin-sidebar__search-icon {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-30%);
    color: var(--text-soft);
    display: inline-flex;
    pointer-events: none;
}
.admin-sidebar__search input {
    width: 100%;
    padding: 0.45rem 0.65rem 0.45rem 1.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
}
.admin-sidebar__search input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
.admin-sidebar__nav {
    padding: 0.5rem 0.45rem 1rem;
    flex: 1;
    overflow: auto;
}
.nav-group { margin-top: 0.7rem; }
.nav-group:first-child { margin-top: 0; }
.nav-group__label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-soft);
    padding: 0 0.85rem 0.3rem;
    font-weight: 700;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--text);
    background: transparent;
    text-align: left;
    font-weight: 500;
    text-decoration: none;
}
.nav-item:hover { background: var(--bg-stripe); text-decoration: none; }
.nav-item.is-active {
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-weight: 600;
}
.nav-item__icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.nav-item.is-active .nav-item__icon { color: var(--brand-dark); }
.nav-item__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-item__count {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
.nav-item.is-active .nav-item__count { color: var(--brand-dark); }
.nav-item__badge {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
    font-variant-numeric: tabular-nums;
}
.admin-sidebar__foot {
    padding: 0.75rem 0.95rem;
    border-top: 1px solid var(--divider);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}
.admin-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.admin-user-meta {
    line-height: 1.15;
    min-width: 0;
    flex: 1;
}
.admin-user-meta strong {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-user-meta span {
    color: var(--text-soft);
    font-size: 0.78rem;
}

/* ---- Main column / topbar ---- */
.admin-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.admin-topbar {
    height: var(--topbar-h);
    border-bottom: 1px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.crumbs {
    color: var(--text-muted);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.crumbs strong { color: var(--text); font-weight: 600; }
.crumbs .sep { color: var(--text-soft); }
.admin-topbar__spacer { flex: 1; }
.admin-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
body.admin .iconbtn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    padding: 0;
}
body.admin .iconbtn:hover { background: var(--bg-stripe); color: var(--text); text-decoration: none; }
body.admin .iconbtn .dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e34d4d;
    border: 2px solid var(--card);
}

/* ---- Content + page head ---- */
.admin-content {
    padding: 1.5rem 2rem 4rem;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}
body.admin .page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
body.admin .page-head h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.admin .page-head p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.page-head__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ---- Past-due (dunning) banner ---- */
.past-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.25rem;
    border: 1px solid var(--status-pending-bg);
    border-left: 4px solid var(--status-pending-fg);
    border-radius: var(--radius);
    background: var(--status-pending-bg);
    color: var(--status-pending-fg);
}
/* Grace period exhausted — ordering is actually stopped, so escalate the tone. */
.past-due--blocked {
    border-color: var(--danger-soft);
    border-left-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}
.past-due__body { min-width: 0; }
.past-due__body strong {
    display: block;
    font-size: 0.98rem;
}
.past-due__body p {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ---- Sub-page tab strip (e.g. the Billing sections) ---- */
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--border);
}
.subnav__tab {
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    /* Sits on top of the strip's border so the active tab appears to join the panel. */
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: color 0.1s, background 0.1s;
}
.subnav__tab:hover {
    color: var(--text);
    background: var(--brand-tint-2);
}
.subnav__tab.is-active {
    color: var(--brand);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

/* ---- Admin buttons ---- */
body.admin .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    white-space: nowrap;
    text-decoration: none;
}
body.admin .btn:hover { background: var(--bg-stripe); }
body.admin .btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
body.admin .btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
body.admin .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
body.admin .btn-ghost:hover {
    background: var(--bg-stripe);
    color: var(--text);
}
body.admin .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

/* ---- KPI tiles ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: 1.5rem;
}
.kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s;
}
.kpi:hover { border-color: var(--border-strong); text-decoration: none; }
.kpi--accent { background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 100%); border-color: #cfdfff; }
.kpi--accent .kpi__value { color: var(--brand-dark); }
.kpi--danger { border-color: #f3c4c4; }
.kpi--danger .kpi__value { color: var(--status-failed-fg); }
.kpi__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
}
.kpi__value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.kpi__sub {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ---- Two-column row + panels ---- */
.cols {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gap);
    align-items: start;
}
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.05rem;
    border-bottom: 1px solid var(--divider);
    gap: 0.7rem;
}
.panel__head h2 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.panel__head .meta { color: var(--text-soft); font-size: 0.78rem; }
.panel__body { padding: 0.4rem 0; }
.panel__body--padded { padding: 1.05rem; }
.panel__foot {
    border-top: 1px solid var(--divider);
    padding: 0.55rem 1.05rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ---- Activity feed ---- */
.feed { padding: 0.3rem 0.5rem; }
.feed__item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    align-items: flex-start;
    font-size: 0.86rem;
}
.feed__item:hover { background: var(--bg-stripe); }
.feed__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}
.feed__icon.add    { background: var(--status-validated-bg); color: var(--status-validated-fg); }
.feed__icon.change { background: var(--brand-tint);          color: var(--brand-dark); }
.feed__icon.del    { background: var(--status-failed-bg);    color: var(--status-failed-fg); }
.feed__icon.sync   { background: var(--status-exported-bg);  color: var(--status-exported-fg); }
.feed__icon.dot    { background: var(--bg-stripe);           color: var(--text-muted); }
.feed__body strong { font-weight: 600; }
.feed__meta {
    color: var(--text-soft);
    font-size: 0.76rem;
    margin-top: 2px;
}
.feed__time {
    color: var(--text-soft);
    font-size: 0.76rem;
    white-space: nowrap;
}

/* ---- Admin tables ---- */
.table-wrap { overflow: auto; }
body.admin .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}
body.admin .table thead th {
    position: sticky;
    top: 0;
    background: var(--card-2);
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    padding: var(--row-py) var(--row-px);
    border-bottom: 1px solid var(--divider);
}
body.admin .table tbody td {
    padding: var(--row-py) var(--row-px);
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}
body.admin .table thead th .th-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
body.admin .table thead th .th-sort:hover { color: var(--text); }
body.admin .table thead th .th-sort.is-active { color: var(--text); }
body.admin .table thead th .th-sort__arrow {
    font-size: 0.7em;
    opacity: 0.4;
    line-height: 1;
}
body.admin .table thead th .th-sort.is-active .th-sort__arrow { opacity: 1; }
body.admin .table tbody tr:hover td { background: var(--bg-stripe); }
body.admin .table tbody tr:last-child td { border-bottom: none; }
body.admin .table .num { text-align: right; font-variant-numeric: tabular-nums; }
body.admin .table .mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}
body.admin .row-strong { font-weight: 600; }
body.admin .row-sub {
    color: var(--text-soft);
    font-size: 0.76rem;
    margin-top: 1px;
}

/* ---- Admin pills ---- */
body.admin .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.13rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--status-info-bg);
    color: var(--status-info-fg);
    white-space: nowrap;
}
body.admin .pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}
body.admin .pill.pending   { background: var(--status-pending-bg);   color: var(--status-pending-fg); }
body.admin .pill.validated { background: var(--status-validated-bg); color: var(--status-validated-fg); }
body.admin .pill.exported  { background: var(--status-exported-bg);  color: var(--status-exported-fg); }
body.admin .pill.failed    { background: var(--status-failed-bg);    color: var(--status-failed-fg); }
body.admin .pill.muted     { background: var(--bg-stripe); color: var(--text-muted); }
body.admin .pill.muted::before { display: none; }

/* ---- Filter bar (admin) ---- */
body.admin .filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow-sm);
}
body.admin .filterbar__search {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    color: var(--text-soft);
}
body.admin .filterbar__search input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.88rem;
    color: var(--text);
    font-family: inherit;
}
body.admin .filterbar .chip {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-2);
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
}
body.admin .filterbar .chip:hover { color: var(--text); background: var(--bg-stripe); }
body.admin .filterbar .chip.is-active {
    background: var(--brand-tint);
    border-color: var(--brand-tint);
    color: var(--brand-dark);
    font-weight: 600;
}
body.admin .filterbar .chip__count {
    background: var(--card);
    color: var(--text-muted);
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
body.admin .filterbar .chip.is-active .chip__count {
    background: var(--card);
    color: var(--brand-dark);
}

/* ---- Empty state / misc ---- */
body.admin .empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
body.admin .empty h3 { color: var(--text); margin: 0 0 0.4rem; }
body.admin .muted { color: var(--text-muted); }
body.admin .stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.stub-card {
    background: var(--card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 3rem 2rem;
    text-align: center;
    color: var(--text-muted);
}
.stub-card h2 {
    color: var(--text);
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.stub-card p { margin: 0; }

@media (max-width: 1080px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; }
}

/* Tenant admin: row-click drawer (Order / Item / Workstation detail) */
body.admin .row-clickable { cursor: pointer; }
body.admin .row-clickable:hover { background: var(--brand-tint); }
body.admin .row-clickable:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.drawer-scrim {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.32);
    z-index: 50; opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(560px, 96vw);
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 51;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--divider);
    gap: 0.75rem;
}
.drawer__head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.drawer__head .sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.drawer__body {
    padding: 1.25rem;
    overflow: auto;
    flex: 1;
}
.drawer__foot {
    border-top: 1px solid var(--divider);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.drawer__pills {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.drawer__panel { border-radius: var(--radius-sm); margin: 0; }
.drawer__panel .table { margin: 0; }
.drawer__comments {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    white-space: pre-wrap;
}
.drawer__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    color: var(--text);
}
.drawer__list li { margin: 0.15rem 0; }

.drawer__error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--card-2);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
    white-space: pre-wrap;
    overflow-x: auto;
}

.drawer__flash {
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--success-soft);
    border: 1px solid var(--success-border);
    color: var(--success);
}
.drawer__flash-pin {
    font-weight: 700;
    font-size: 1rem;
}
.drawer__flash-pin .mono {
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}
.drawer__flash-sub {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

dl.kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.88rem;
    margin: 0;
}
dl.kv dt { color: var(--text-muted); font-weight: 500; }
dl.kv dd { margin: 0; font-weight: 600; color: var(--text); }

.section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-soft);
    font-weight: 700;
    margin: 1.1rem 0 0.5rem;
}

/* Item drawer: the "Stocked at" workstation checklist. A scrolling list
   because a chain tenant has a dozen-plus stations and the drawer still has
   to reach its Save button. */
.ws-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
}
.ws-picker__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--divider);
    font-size: 0.85rem;
}
.ws-picker__head .muted { margin-right: auto; }
.ws-picker__list {
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.3rem;
}
.ws-picker__group {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-soft);
    font-weight: 700;
    padding: 0.5rem 0.5rem 0.25rem;
}
.ws-picker__row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
.ws-picker__row:hover { background: var(--bg-stripe); }
.ws-picker__row input[type="checkbox"] { margin: 0; flex: none; }
.ws-picker__name { min-width: 0; overflow-wrap: anywhere; }
.ws-picker__par {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex: none;
}
/* Unticking a row deletes its min/max, so the warning is coloured like the
   destructive thing it is describing rather than like a hint. */
.ws-picker__warn {
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.85rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

body.drawer-open { overflow: hidden; }

@media (max-width: 600px) {
    .drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
    .drawer, .drawer-scrim { transition: none; }
}

/* Tenant admin: bulk-edit form on Min/Max par levels page */
.parlevels-input {
    width: 5.5rem;
    padding: 0.35rem 0.5rem;
    text-align: right;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    background: var(--card);
    color: var(--text);
}
.parlevels-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: -1px;
    border-color: var(--brand);
}
body.admin .row-error { background: #fff5f5; }
body.admin .row-error .parlevels-input { border-color: #c0392b; }
body.admin .error-text {
    color: #c0392b;
    font-weight: 600;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.parlevels-add {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.ws-assign-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}
.ws-assign-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}
.ws-assign-list li:last-child { border-bottom: none; }
.ws-assign-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.ws-assign-add select.form-input {
    flex: 1 1 auto;
    min-width: 14rem;
    width: auto;
}
.parlevels-add__label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.parlevels-add select.form-input {
    width: auto;
    min-width: 18rem;
    flex: 1 1 auto;
    max-width: 32rem;
}

.parlevels-bulk {
    margin: 0 0 1rem;
    max-width: 32rem;
}
.parlevels-bulk > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.parlevels-bulk__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.parlevels-bulk__hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}
.parlevels-bulk__textarea {
    width: 100%;
    font-family: var(--font-mono, monospace);
    resize: vertical;
}
/* Direct child only: the workstation picker inside this form has its own
   Select all / Clear buttons, and they must stay centred in their row. */
.parlevels-bulk__form > .btn { align-self: flex-start; }
.parlevels-bulk__where {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-soft);
    font-weight: 700;
    margin-top: 0.35rem;
}

/* Tenant admin: drawer forms */
.drawer__form { display: flex; flex-direction: column; height: 100%; }
.form-row { margin-bottom: 0.85rem; }
.form-row label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.form-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font-size: 0.92rem;
    font-family: inherit;
}
.form-input.mono { font-family: var(--font-mono); }
.form-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: -1px;
    border-color: var(--brand);
}
.form-input.is-invalid {
    border-color: #c0392b;
    background: #fff5f5;
}
.form-input:disabled {
    background: var(--bg-stripe, #f3f3f3);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}
[x-cloak] { display: none !important; }
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.form-row--checkbox {
    display: flex;
    align-items: center;
    align-self: end;
}
.form-row--checkbox label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Tenant admin: bulk-select tables (Orders) */
body.admin .bulk-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0 0.6rem;
}
body.admin .bulk-actions__count {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
body.admin .col-check {
    width: 2.2rem;
    text-align: center;
}
body.admin .col-check input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

/* Tenant admin: multi-select dropdown filters (Items / categories) */
.filter-dropdown {
    position: relative;
}
.filter-dropdown[open] .filter-dropdown__summary {
    background: var(--bg-stripe);
    border-color: var(--border-strong);
}
.filter-dropdown__summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.filter-dropdown__summary::-webkit-details-marker { display: none; }
.filter-dropdown__summary::after {
    content: "▾";
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.filter-dropdown__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 18rem;
    max-height: 22rem;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0.4rem;
}
.filter-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    font-weight: 500;
}
.filter-dropdown__option:hover { background: var(--bg-stripe); }
.filter-dropdown__option input[type="checkbox"],
.filter-dropdown__option input[type="radio"] { margin: 0; }
.filter-dropdown__option .muted {
    margin-left: auto;
    font-size: 0.8rem;
}
.filter-dropdown__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem 0.2rem;
    border-top: 1px solid var(--divider);
    margin-top: 0.3rem;
}

/* ==========================================================================
   Kiosk responsive — PIN login + order screens (free / min-max)
   Layouts adapt for phones and iPad without changing the desktop look.
   Tier 1: ≤ 820px  → iPad portrait & large phones (tighter, drops the
                       package column in min/max).
   Tier 2: ≤ 600px  → phones (stacked rows, single-column PIN card,
                       full-width submit button).
   ========================================================================== */

@media (max-width: 820px) {
    .kiosk-header { padding: 0.8rem 1.15rem; }
    .kiosk-header__user { display: none; }

    body.kiosk .order-page { padding: 1.5rem 1rem 7.5rem; }
    .order-head h1 { font-size: 1.6rem; }

    body.kiosk .pin-card { padding: 2.25rem 1.5rem 1.75rem; }
    body.kiosk .pin-card h1 { font-size: 1.55rem; }
    .key { height: 60px; font-size: 1.5rem; }

    .free-row,
    .free-row--head {
        grid-template-columns: minmax(0, 1fr) 96px 170px;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }

    .mm-row,
    .mm-row--head {
        grid-template-columns: minmax(0, 1fr) 56px 56px 96px 80px;
        gap: 0.6rem;
        padding: 0.85rem 1rem;
    }
    .mm-col--pkg { display: none; }
}

@media (max-width: 600px) {
    /* Header: wrap brand chips, hide separators, compact logout button */
    .kiosk-header {
        padding: 0.55rem 0.85rem;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .kiosk-header__brand {
        font-size: 0.9rem;
        gap: 0.45rem;
        flex-wrap: wrap;
        min-width: 0;
    }
    .kiosk-header__brand .logo-wordmark { font-size: 0.95rem; }
    .kiosk-header__right { gap: 0.5rem; }
    .kiosk-header__right .btn { padding: 0.4rem 0.75rem; font-size: 0.85rem; }

    /* PIN card: top-aligned so the keypad never falls off the screen
       on phone-landscape; sized down to fit small viewports comfortably. */
    .pin-stage {
        justify-content: flex-start;
        padding: 1.25rem 0.75rem 1.5rem;
    }
    body.kiosk .pin-card {
        padding: 1.75rem 1.1rem 1.25rem;
        border-radius: 14px;
    }
    body.kiosk .pin-card h1 { font-size: 1.4rem; }
    body.kiosk .pin-card .sub { font-size: 0.9rem; margin-bottom: 1.2rem; }
    .pin-display { gap: 0.7rem; margin: 0.75rem 0 1.1rem; }
    .pin-dot { width: 16px; height: 16px; }
    .keypad { gap: 0.55rem; }
    .key {
        height: 58px;
        font-size: 1.45rem;
        border-radius: 10px;
    }
    .key--util { font-size: 0.9rem; }

    /* Order page chrome */
    body.kiosk .order-page { padding: 1rem 0.75rem 9.5rem; }
    .order-head h1 { font-size: 1.4rem; }
    .order-head .sub { font-size: 0.9rem; }
    .cat-section__title { padding: 0 0.2rem 0.5rem; font-size: 0.78rem; }

    /* Free order: stack item → package → stepper, hide the column header */
    .free-row--head { display: none; }
    .free-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.85rem 0.9rem;
    }
    .free-row .mm-col--pkg { font-size: 0.82rem; color: var(--text-muted); }
    .free-row .mm-col--qty {
        justify-content: flex-start;
        margin-top: 0.3rem;
    }
    .stepper__btn { width: 52px; height: 52px; font-size: 1.45rem; }

    /* Min/Max: 2 visual rows per item
       row 1: item name + on-hand input
       row 2: package · Min N · Max N + to-order pill */
    .mm-row--head { display: none; }
    .mm-row {
        grid-template-columns: minmax(0, 1fr) auto auto 100px;
        gap: 0.4rem 0.6rem;
        padding: 0.85rem 0.9rem;
        align-items: center;
    }
    .mm-col--pkg { display: block; }
    .mm-row > .mm-col--item  { grid-column: 1 / 4; grid-row: 1; }
    .mm-row > .mm-col--input { grid-column: 4; grid-row: 1; }
    .mm-row > .mm-col--pkg   { grid-column: 1; grid-row: 2;
                                font-size: 0.78rem; color: var(--text-muted);
                                text-align: left; }
    .mm-row > :nth-child(3)  { grid-column: 2; grid-row: 2; }
    .mm-row > :nth-child(4)  { grid-column: 3; grid-row: 2; }
    .mm-row > .mm-col--out   { grid-column: 4; grid-row: 2; }
    .mm-col--num {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-muted);
    }
    .mm-col--num[data-label]::before {
        content: attr(data-label) " ";
        color: var(--text-soft);
        font-weight: 400;
    }
    .onhand-input { height: 44px; font-size: 1.05rem; }
    .toorder-pill { height: 40px; font-size: 1.05rem; }

    /* Submit bar: stack summary above a full-width button */
    .submit-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.7rem 0.9rem;
    }
    .submit-bar__summary { text-align: center; font-size: 0.85rem; }
    .submit-bar .btn-lg { min-width: 0; width: 100%; }
}

/* A timed-out employee lands on the PIN pad; the notice sits inside the card,
   above "Enter your PIN", because that is where the eye already is. */
.pin-card__notice { text-align: left; margin-bottom: 1.25rem; }
.pin-card__notice span { flex: 1; }

/* ------------------------------------------------------------------
   Clerk review grid — every pending order as one editable cross-tab.

   The layout problem this solves is that the grid is both long (an item per
   row) and wide (an ordering point per column), so a quantity in the middle
   of it belongs to a product and a shop that have both scrolled out of view.
   Sticky headers and sticky leading columns are the same job Excel does with
   freeze panes, and without them the grid is unreadable at CalCali's twelve
   stations.
   ------------------------------------------------------------------ */
body.clerk main.clerk-page--wide { max-width: 1600px; }

.review-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    padding: 0 0 1rem;
}
.review-bar .field { display: flex; flex-direction: column; gap: 0.25rem; }
.review-bar label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.review-bar input, .review-bar select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line, #dfe3ea);
    border-radius: 6px;
    background: var(--card);
    font: inherit;
}
.review-bar input[type="search"] { min-width: 15rem; }
/* Sortable headers: the button looks like the header text it replaces. */
.rg-sort {
    all: unset;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    border-bottom: 1px dashed transparent;
}
.rg-sort:hover, .rg-sort:focus-visible { border-bottom-color: currentColor; }
.rg-sort.is-active .rg-sort__mark::after { content: " ▲"; font-size: 0.7em; }
.rg-sort.is-active.is-desc .rg-sort__mark::after { content: " ▼"; }

/* `hidden` must win over `display: flex` above, or the panel never closes. */
.review-bar[hidden] { display: none; }

/* The review page's whole head is ONE ribbon (the top bar): brand, title,
   counts, buttons, user. The grid is what is short of height. */
body.clerk-fullheight > main.clerk-page { padding-top: 0.5rem; }
.clerk-topbar.review-ribbon {
    padding: 0.35rem 1rem;
    gap: 0.75rem;
    flex-wrap: nowrap;  /* one line, always: the title gives way first */
}
.review-ribbon .clerk-topbar__brand { flex: none; }
.review-ribbon__title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}
/* The title is kept for screen readers but not drawn: the browser tab
   already names the page, and on a laptop its width is worth more as the
   counts — "72 of 72 items" is what tells her a filter is narrowing the grid. */
.review-ribbon__title h1 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.review-ribbon__title .sub { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.review-ribbon .toolbar { gap: 0.35rem; flex: none; flex-wrap: nowrap; margin-left: auto; }
body.clerk .review-ribbon .btn { padding: 0.28rem 0.65rem; font-size: 0.82rem; }
.review-ribbon .clerk-topbar__user { gap: 0.4rem; flex: none; }
#review-filters-toggle { position: relative; }
#review-filters-toggle.is-open { background: var(--bg-stripe); }
.review-filter-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--accent, #2a4580);
    vertical-align: middle;
}
.review-filter-dot[hidden] { display: none; }

/* 🔴 The grid is a PANE, not a page, and this is why.
   `max-height: 70vh` was measured on a box that already started 185px down the
   page, so its bottom landed at 750px in a 600px window — below the fold — and
   the sticky save bar sat on top of its last 62px. On a 1366x768 laptop the
   horizontal scrollbar was therefore BOTH below the fold and behind the bar,
   and there was no way to scroll right to the other shops at all. Reported
   from production against CalCali's twelve stations; invisible in the tests,
   and invisible in a walk at 1440px where the table happened to fit.
   The form now fits the window: only the table scrolls, its scrollbars stay
   inside the pane, and the save bar sits below it instead of over it.
   13rem is the measured 185px of header and page heading above the form, plus
   breathing room. `min-height` keeps the pane usable on a short window. */
/* No magic offsets: the page is a column, and the pane takes what is left.
   A `calc(100vh - Nrem)` was tried first and broke as soon as the page head
   wrapped to two lines at a narrower width — the pane ran off the bottom of
   the window again, taking its horizontal scrollbar with it. Letting the
   browser do the arithmetic cannot go stale that way.
   🔴 `min-height: 0` AND `min-width: 0` on every level are load-bearing: a
   flex item defaults to `min-*: auto`, so the table's own size wins and the
   pane never shrinks. Vertically that is the "runs off the bottom" bug;
   HORIZONTALLY it is worse — the pane grows wider than the window instead of
   scrolling, so the table has no scrollbar of its own and the whole page
   slides sideways. That is what "it doesn't let me scroll right to see more
   sites" actually was.
   Deliberately NO `overflow: hidden` on the body: if something unexpected
   makes the column too tall, the page should scroll, never clip. */
body.clerk-fullheight { height: 100vh; display: flex; flex-direction: column; }
body.clerk-fullheight > main.clerk-page {
    flex: 1;
    min-height: 0;
    min-width: 0;
    /* 🔴 `main` carries `margin: 0 auto` for centring, and an auto margin on a
       flex container's CROSS axis cancels `align-items: stretch` — so `main`
       stopped being window-width and sized to its content instead, growing to
       1342px inside a 1000px window. Everything downstream then measured
       against that, the table never got a scrollbar of its own, and the whole
       page slid sideways. `width: 100%` pins it back; `max-width` still
       centres it on a wide screen. */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 64px of bottom padding is right for a page you scroll and wrong for a
       pane that ends at the window. */
    padding-bottom: 1rem;
}
/* The footer costs 113px and this screen is a working tool, not a page to
   read to the end of — that height is three more rows of the table. */
body.clerk-fullheight > .site-footer { display: none; }
#review-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
}
#review-form > .card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;   /* or the table's height wins and the pane never shrinks */
    min-width: 0;    /* or its WIDTH does, and the pane outgrows the window */
}
.review-scroll { overflow: auto; flex: 1; min-height: 0; min-width: 0; }

.review-grid { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }
.review-grid th, .review-grid td {
    /* A visible grid, both ways: the old hairline (#eceff4, bottom only) all
       but vanished against the white cells, so a number could not be read
       across to its station. `--line` is not defined anywhere, so the
       fallback IS the colour. */
    border-bottom: 1px solid #c3cad6;
    border-right: 1px solid #d3d9e3;
    padding: 0.3rem 0.5rem;
    background: var(--card);
    white-space: nowrap;
}
/* Two header rows, both pinned. The site band sits at 0 and the station row
   directly under it, so a station name never floats away from its shop. */
/* A whole-pixel row height. The natural one was 39.36px, and at fractional
   offsets Chrome drops the odd horizontal line in the frozen columns — a row
   boundary simply vanished there while the shop columns still drew it. */
.review-grid tbody td { height: 40px; box-sizing: border-box; }
.review-grid thead th { position: sticky; z-index: 3; background: var(--bg); }
/* 🔴 The site row is exactly 2rem tall, because the station row below is
   pinned at `top: 2rem`. At its natural 31px the station row sat 1px low, so
   its bottom line missed the bottom line of the two-row headers beside it
   (Unidad, Total) — visible as a broken corner at both ends of the grid. */
.review-grid thead tr:first-child th { top: 0; }
.review-grid thead tr:first-child th:not([rowspan]) { height: 2rem; box-sizing: border-box; }
.review-grid thead tr:nth-child(2) th { top: 2rem; }
.review-grid thead th[rowspan="2"] { top: 0; }
/* No border-left: every cell draws its own right-hand line now, so a left
   one doubled up at each shop boundary. */
.rg-site {
    text-align: center;
    font-weight: 600;
}
.rg-station {
    text-align: center;
    font-weight: 500;
    color: var(--muted);
    font-size: 0.78rem;
}

/* The five identifying columns stay put while she scrolls right. Offsets are
   cumulative, so the widths below and these `left` values must agree. */
.rg-stick { position: sticky; z-index: 2; }
.review-grid thead .rg-stick { z-index: 4; }
/* ⚠️ Cumulative: each `left` is the sum of the widths before it, so a width
   change here needs every later `left` changed with it. 34rem in total, down
   from an original 40rem — on a 1366px laptop that set ate 640px, nearly half
   the screen, before a single shop was visible. The supplier column is the
   widest of the five because it is the only one she TYPES into. */
/* ⚠️ Each `left` is pulled back a further pixel on purpose, so the columns
   OVERLAP by 1px instead of meeting exactly. Rendered table widths are
   fractional while these offsets are whole rems, so meeting exactly leaves a
   sub-pixel hairline at each seam — and scrolled content shows through it as
   flickering slivers of text under the frozen columns. Overlapping costs
   nothing (the cells are opaque) and cannot leave a gap. */
/* 🔴 `min-width` is as load-bearing as `width`, and leaving it out is what
   made the frozen columns come apart the moment she filtered by a supplier.
   In an auto-layout table a specified `width` is only a *preference*: when
   the table is wider than its pane the browser compresses columns back
   toward their CONTENT, and a column whose content is narrower than its
   declared width is compressed below it. Filtering changes which rows count
   as content — two short product names instead of a hundred long ones — so
   the columns shrank while these `left` offsets stayed put, and every seam
   opened a gap with the scrolled-under table showing through it. Measured in
   Chromium: `Categoría` rendered 79px against its declared 96px, and every
   column after it sat 6px right of its own content. `min-width` pins the
   column so the offsets below can be trusted at any window size. */
.rg-stick--source   { left: 0;                 width: 9rem;   min-width: 9rem;   max-width: 9rem;   overflow: hidden; text-overflow: ellipsis; }
.rg-stick--category { left: calc(9rem - 2px);    width: 5.5rem; min-width: 5.5rem; max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; }
.rg-stick--code     { left: calc(14.5rem - 4px); width: 3rem;   min-width: 3rem;   max-width: 3rem;   overflow: hidden; }
.rg-stick--name     { left: calc(17.5rem - 6px); width: 12rem;  min-width: 12rem;  max-width: 12rem;  overflow: hidden; text-overflow: ellipsis; }
.rg-stick--uom      { left: calc(29.5rem - 8px); width: 4.5rem; min-width: 4.5rem; max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis;
                      border-right: 2px solid var(--line, #dfe3ea); }

/* The supplier column is the only editable one outside the quantity grid.
   The box fills its cell and is borderless until she touches it, so a page of
   them reads as a column of names rather than a wall of form fields — the
   same trick the quantity inputs use. ⚠️ The td keeps `overflow: hidden`, so
   the padding is trimmed to the bone or the text is clipped before the
   ellipsis can do its job. */
.review-grid td.rg-source { padding: 0.15rem 0.25rem; }
.rg-supplier {
    width: 100%;
    /* An <input> clips its overflow with no sign that it has — so a vendor
       name too long for the column would read as a different, shorter vendor.
       `text-overflow` does apply to an unfocused input in Chrome and Firefox,
       which puts this column back in step with the four beside it. */
    text-overflow: ellipsis;
    padding: 0.2rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    color: var(--muted);
}
.rg-supplier:hover { border-color: var(--line, #dfe3ea); }
.rg-supplier:focus {
    border-color: var(--accent, #2a4580);
    background: var(--card);
    color: var(--text);
    outline: none;
}
/* An empty box is where a purchasing run will fail — a Direct item with no
   vendor refuses the whole tenant's batch, tenant-wide — so it is drawn as a
   field asking to be filled rather than as one more blank cell. The border is
   half the signal: `--danger-soft` alone is #fef2f2, which against a white
   card is very nearly nothing. Same lesson as the locked cell's first hatch,
   which was invisible at 4px. */
.rg-supplier:placeholder-shown {
    background: var(--danger-soft, #fdeaea);
    border-color: var(--danger-border, #f6c9c9);
}
.rg-supplier.rg-changed,
.rg-cell input.rg-changed {
    background: var(--status-validated-bg);
    border-color: var(--status-validated-fg);
    color: var(--text);
    font-weight: 600;
}

.rg-cell { text-align: center; padding: 0.15rem 0.25rem; }
/* ⚠️ These four are qualified `.review-grid td…` for SPECIFICITY, not style:
   `.review-grid td` above sets `background: var(--card)` and scores (0,1,1),
   so a bare `.rg-cell--empty` at (0,1,0) LOSES to it and renders as an
   ordinary white cell. Every one of them was silently dead until the grid was
   opened in a browser — 159 empty cells and every corrected one painted plain
   white, because a test can assert the class is on the element but not that
   the element ends up any different. Keep the qualifier if you touch these. */
.review-grid td.rg-cell--empty { background: var(--bg-stripe); }
/* A cell a clerk has already corrected, so a changed number never reads as
   something an employee asked for. */
.review-grid td.rg-cell--corrected { background: var(--status-info-bg); }
.review-grid td.rg-cell--split { background: var(--status-pending-bg); }
.rg-input { display: flex; align-items: center; justify-content: center; gap: 0.2rem; }
.rg-order { font-size: 0.65rem; color: var(--muted); }
.rg-cell input {
    width: 3.4rem;
    padding: 0.2rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    text-align: right;
}
.rg-cell input:hover { border-color: var(--line, #dfe3ea); }
.rg-cell input:focus { border-color: var(--accent, #2a4580); background: var(--card); outline: none; }
/* `.rg-changed` — typed-but-not-yet-saved, so the Save button is never the
   only thing that knows something is pending. Declared once above, next to
   the supplier box, because both kinds of input wear it. */
/* Already on a purchase order that is in the ERP, so there is nothing left to
   correct here. Greyed rather than hidden: the quantity is still part of the
   day's total and part of what she is reading down the row — it is only the
   editing that is over. The hatched background says "not a field" at a
   glance, since a plain grey box reads as an empty one. */
.review-grid td.rg-cell--locked {
    background: repeating-linear-gradient(
        -45deg,
        var(--border, #e3e6ec), var(--border, #e3e6ec) 1px,
        var(--bg-stripe) 1px, var(--bg-stripe) 6px
    );
}
.rg-cell input:disabled {
    color: var(--muted);
    /* Safari greys disabled text its own way and ignores `color`. */
    -webkit-text-fill-color: var(--muted);
    cursor: not-allowed;
    opacity: 1;
}
.rg-cell input:disabled:hover { border-color: transparent; }

.rg-total { text-align: right; font-weight: 600; border-left: 2px solid var(--line, #dfe3ea); }

/* Clicking a cut-off name pops its full text up over it (clerk_review.js).
   Not a wider column: the frozen columns' `left` offsets are fixed, so
   widening one would open the seams the 🔴 notes above describe. */
.rg-expandable { cursor: pointer; }
.rg-popup {
    position: fixed;
    z-index: 50;
    max-width: 22rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #c3cad6;
    border-radius: 6px;
    background: var(--card, #fff);
    box-shadow: 0 4px 14px rgba(20, 30, 50, 0.18);
    font-size: 0.85rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}
/* A Stocked row's box normally shows its warehouse; cleared, it must NOT get
   the red "no supplier" warning a Direct row's empty box gets — clearing it
   means "back to the warehouse". Bought direct today, the cell says so. */
.review-grid td.rg-source .rg-supplier--stocked:placeholder-shown {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}
.review-grid td.rg-buy-direct { background: var(--status-pending-bg); }
/* The row she last clicked, so her eye keeps its place across a dozen shop
   columns. A green tint with a line above and below, chosen to differ from
   every state colour already on the grid (blue = corrected, yellow = split,
   grey = empty, hatched = ordered).
   ⚠️ Qualified for SPECIFICITY, like the cell states above: (0,2,2) beats
   `.review-grid td.rg-cell--empty` at (0,2,1). Corrected and split cells keep
   their own colour inside the highlighted row — the highlight must never hide
   what a cell is telling her — so they get the lines but not the tint. */
.review-grid tr.rg-active > td {
    box-shadow: inset 0 2px 0 #3a9a5b, inset 0 -2px 0 #3a9a5b;
}
.review-grid tr.rg-active > td:not(.rg-cell--corrected):not(.rg-cell--split) {
    background-color: #e3f4e8;
}

/* The save control lives in the page head now, not in a bar under the table.
   The bar had to be sticky so it could not scroll away — and that is exactly
   what put it on top of the table's horizontal scrollbar. In the head it is
   always visible without covering anything, and the table gets the height. */
.review-save__count { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

/* The locked-cell explanation, as a chip on the filter row rather than a
   paragraph above the grid: a full-width note cost the table two rows of a
   screen that is already short of height. The full reason is the tooltip. */
.review-chip {
    align-self: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--bg-stripe);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: help;
}
/* The supplier warning, on the Supplier header. */
.rg-help { color: var(--muted); font-weight: 400; cursor: help; }

.card--error { border-color: var(--danger-border); background: var(--danger-soft); }
.card--error h3 { color: var(--danger-dark); margin-top: 0; }
.error-list { margin: 0.5rem 0; padding-left: 1.2rem; }