/* ==========================================================================
   Smart WMS — IBM Carbon-based design system (Cocoa & Green theme)
   Flat, functional, sharp corners, IBM Plex, 8px spacing rhythm.
   ========================================================================== */

:root {
    /* Cocoa */
    --cocoa-900:#2C1810; --cocoa-800:#3D2318; --cocoa-700:#5A3626; --cocoa-600:#7A4A34;
    --cocoa-500:#9C5E42; --cocoa-400:#BE7A5A; --cocoa-300:#D4997A; --cocoa-200:#E6B99A;
    --cocoa-100:#F2D4BA; --cocoa-50:#FAEDE0;
    /* Green */
    --green-800:#1A4A2A; --green-700:#2A6E3A; --green-600:#3A8E4A; --green-500:#4CAF50;
    --green-400:#66BB6A; --green-300:#81C784; --green-200:#A5D6A7; --green-100:#C8E6C9; --green-50:#E8F5E9;
    /* Gold */
    --gold-700:#8A6D1F; --gold-600:#B08D2A; --gold-500:#D4A843; --gold-400:#E0C067;
    --gold-300:#ECD88B; --gold-200:#F5E9B3; --gold-100:#FAF4D9;
    /* Neutrals (Carbon gray ramp) */
    --white:#FFFFFF; --gray-10:#F4F4F4; --gray-20:#E0E0E0; --gray-30:#C6C6C6; --gray-40:#A8A8A8;
    --gray-50:#8D8D8D; --gray-60:#6F6F6F; --gray-70:#525252; --gray-80:#393939; --gray-90:#262626;
    /* Legacy aliases (older class references) */
    --gray-100:#F4F4F4; --gray-200:#E0E0E0; --gray-300:#C6C6C6; --gray-400:#A8A8A8;
    --gray-500:#6F6F6F; --gray-600:#525252; --gray-700:#393939;

    /* Semantic (Carbon-style tokens) */
    --ui-background:#F4F4F4;
    --layer:#FFFFFF;
    --layer-hover:#E8E8E8;
    --layer-accent:#EDEDED;
    --field:#F4F4F4;
    --border-subtle:#E0E0E0;
    --border-strong:#8D8D8D;
    --text-primary:#2C1810;
    --text-secondary:#525252;
    --text-helper:#6F6F6F;
    --text-on-color:#FFFFFF;
    --link:#2A6E3A;
    --focus:#2A6E3A;

    /* Status */
    --success:#2A6E3A; --warning:#B08D2A; --error:#C62828; --info:#1565C0;

    /* Role-themed */
    --primary:#2A6E3A; --primary-hover:#1A4A2A; --nav-bg:#3D2318;

    /* Spacing (Carbon scale) */
    --sp-01:2px; --sp-02:4px; --sp-03:8px; --sp-04:12px; --sp-05:16px; --sp-06:24px;
    --sp-07:32px; --sp-08:40px; --sp-09:48px; --sp-10:64px; --sp-11:80px; --sp-12:96px;

    /* Type scale (Carbon productive) */
    --label-01:.75rem; --helper-01:.75rem;
    --body-01:.875rem; --body-02:1rem;
    --heading-01:.875rem; --heading-02:1rem; --heading-03:1.25rem;
    --heading-04:1.75rem; --heading-05:2rem; --heading-06:2.625rem;
    /* legacy heading alias */
    --heading-07:2.625rem;

    --radius:0px;             /* Carbon: sharp corners */
    --header-h:48px;
    --font-sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
    --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,'Courier New',monospace;
}

/* Role themes (only recolour the header + primary accent) */
.admin-theme     { --primary:#2A6E3A; --primary-hover:#1A4A2A; --nav-bg:#21150E; }
.warehouse-theme { --primary:#2A6E3A; --primary-hover:#1A4A2A; --nav-bg:#3D2318; }
.quality-theme   { --primary:#8A6D1F; --primary-hover:#6b5417; --nav-bg:#3D2318; }
.dispatch-theme  { --primary:#1565C0; --primary-hover:#0D47A1; --nav-bg:#22303F; }
.viewer-theme    { --primary:#525252; --primary-hover:#393939; --nav-bg:#33291F; }

/* -------- Base -------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0; font-family:var(--font-sans); color:var(--text-primary);
    background:var(--ui-background); line-height:1.45; font-size:var(--body-01);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4,h5 { margin:0 0 var(--sp-02); color:var(--text-primary); line-height:1.25; font-weight:600; letter-spacing:0; }
.mono { font-family:var(--font-mono); letter-spacing:0; }
.heading-06,.heading-07 { font-size:var(--heading-05); font-weight:600; letter-spacing:-.01em; }
.heading-05 { font-size:var(--heading-04); font-weight:600; }
.heading-04 { font-size:var(--heading-03); font-weight:600; }
.text-muted { color:var(--text-secondary); }
.text-small { font-size:var(--label-01); }

/* Accessibility */
.skip-nav { position:absolute; top:-100%; left:0; padding:var(--sp-04); background:var(--primary); color:#fff; z-index:9999; }
.skip-nav:focus { top:0; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===================== UI Shell header ===================== */
.shell-header {
    position:sticky; top:0; z-index:200; height:var(--header-h);
    background:var(--nav-bg); color:#fff;
    display:flex; align-items:center; gap:var(--sp-02);
    padding-right:var(--sp-03); border-bottom:1px solid rgba(255,255,255,.08);
}
.shell-btn {
    height:var(--header-h); min-width:var(--header-h); padding:0 var(--sp-04);
    display:inline-flex; align-items:center; gap:var(--sp-03);
    background:transparent; border:none; color:#fff; cursor:pointer;
    font-family:inherit; font-size:var(--body-01);
}
.shell-btn:hover { background:rgba(255,255,255,.10); }
.shell-btn:active { background:rgba(255,255,255,.16); }
.shell-brand { display:flex; align-items:center; gap:var(--sp-03); font-weight:600; padding-left:var(--sp-02); color:#fff; }
.shell-brand:hover { text-decoration:none; }
.shell-brand .mark { color:var(--green-400); display:inline-flex; }
.shell-title { color:rgba(255,255,255,.72); font-size:var(--body-01); padding-left:var(--sp-04);
    border-left:1px solid rgba(255,255,255,.18); margin-left:var(--sp-03); }
.shell-spacer { flex:1; }
.shell-user { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; padding:0 var(--sp-03); }
.shell-user .u-name { font-size:var(--body-01); }
.shell-user .u-role { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); }
.shell-icon-btn { width:var(--header-h); height:var(--header-h); display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; color:#fff; cursor:pointer; }
.shell-icon-btn:hover { background:rgba(255,255,255,.10); }

/* ===================== App switcher (slide-over) ===================== */
.switcher-overlay { position:fixed; inset:0; background:rgba(22,14,8,.5); z-index:190; opacity:0; visibility:hidden; transition:opacity .2s; }
.switcher-overlay.open { opacity:1; visibility:visible; }
.switcher {
    position:fixed; top:var(--header-h); right:0; bottom:0; width:320px; max-width:86vw;
    background:var(--nav-bg); z-index:195; transform:translateX(100%); transition:transform .22s cubic-bezier(.2,0,.38,.9);
    display:flex; flex-direction:column; overflow-y:auto;
}
.switcher.open { transform:translateX(0); }
.switcher-title { color:rgba(255,255,255,.6); font-size:var(--label-01); text-transform:uppercase; letter-spacing:.08em; padding:var(--sp-05) var(--sp-05) var(--sp-03); }
.switcher-link { display:flex; align-items:center; gap:var(--sp-04); padding:var(--sp-04) var(--sp-05); color:rgba(255,255,255,.85); border-left:3px solid transparent; }
.switcher-link:hover { background:rgba(255,255,255,.08); text-decoration:none; color:#fff; }
.switcher-link.active { background:rgba(255,255,255,.10); border-left-color:var(--green-400); color:#fff; }
.switcher-link .s-icon { color:var(--green-400); display:inline-flex; }
.switcher-sep { height:1px; background:rgba(255,255,255,.1); margin:var(--sp-03) var(--sp-05); }

/* ===================== Main / content ===================== */
.app-main { min-height:calc(100vh - var(--header-h)); }
.content-wrap { max-width:1312px; margin:0 auto; padding:var(--sp-06) var(--sp-05) var(--sp-10); }

.content-header { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-05); margin-bottom:var(--sp-06); flex-wrap:wrap; }
.content-header .heading-06 { margin:0; }
.content-header p { margin:var(--sp-01) 0 0; }
.header-actions { display:flex; gap:var(--sp-03); flex-wrap:wrap; }
.back-link { display:inline-flex; align-items:center; gap:var(--sp-02); font-size:var(--label-01); color:var(--text-secondary); margin-bottom:var(--sp-02); }
.back-link:hover { color:var(--primary); }

/* ===================== Launcher ===================== */
.launch-greeting { margin-bottom:var(--sp-06); }
.launch-greeting h1 { font-size:var(--heading-04); font-weight:600; }
.launch-greeting p { color:var(--text-secondary); margin:var(--sp-01) 0 0; }

.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-subtle);
    border:1px solid var(--border-subtle); margin-bottom:var(--sp-07); }
.kpi { background:var(--layer); padding:var(--sp-05); }
.kpi .k-val { font-size:var(--heading-04); font-weight:600; color:var(--text-primary); line-height:1.1; }
.kpi .k-lbl { font-size:var(--label-01); color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-top:var(--sp-02); display:flex; align-items:center; gap:6px; }
.kpi .k-lbl .ic { color:var(--gray-50); }

.section-label { font-size:var(--label-01); text-transform:uppercase; letter-spacing:.08em; color:var(--text-helper); margin-bottom:var(--sp-04); font-weight:600; }

.apps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); }
.app-tile {
    position:relative; display:flex; flex-direction:column; gap:var(--sp-04);
    background:var(--layer); padding:var(--sp-06); min-height:172px; color:var(--text-primary);
    transition:background .12s, box-shadow .12s;
}
.app-tile:hover { text-decoration:none; box-shadow:inset 0 0 0 2px var(--primary); }
.app-tile:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--focus); }
.app-tile .t-icon { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; }
.app-tile.acc-green  .t-icon { background:var(--green-50);  color:var(--green-700); }
.app-tile.acc-cocoa  .t-icon { background:var(--cocoa-50);  color:var(--cocoa-700); }
.app-tile.acc-gold   .t-icon { background:var(--gold-100);  color:var(--gold-700); }
.app-tile .t-title { font-size:var(--heading-03); font-weight:600; }
.app-tile .t-desc { font-size:var(--label-01); color:var(--text-secondary); line-height:1.5; flex:1; }
.app-tile .t-foot { display:flex; align-items:center; justify-content:space-between; }
.app-tile .t-count { font-size:var(--label-01); color:var(--text-helper); font-weight:600; }
.app-tile .t-arrow { color:var(--gray-40); transition:transform .12s,color .12s; }
.app-tile:hover .t-arrow { color:var(--primary); transform:translateX(3px); }

/* ===================== Grid ===================== */
.grid { display:grid; gap:var(--sp-05); grid-template-columns:repeat(12,1fr); }
.stats-grid { grid-template-columns:repeat(4,1fr); }
.dash-grid { margin-top:var(--sp-05); }
.form-grid { gap:var(--sp-05); }
[class*="col-span-"] { grid-column:span 12; }
.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}
.col-span-6{grid-column:span 6}.col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}.col-span-9{grid-column:span 9}

/* ===================== Cards / tiles ===================== */
.card { background:var(--layer); border:1px solid var(--border-subtle); border-radius:var(--radius);
    padding:var(--sp-05); margin-bottom:var(--sp-05); }
.card:last-child { margin-bottom:0; }
.card-accent-green { border-left:3px solid var(--green-500); }
.card-header { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-05);
    margin-bottom:var(--sp-05); padding-bottom:var(--sp-03); border-bottom:1px solid var(--border-subtle); }
.card-header h4 { margin:0; font-size:var(--heading-02); font-weight:600; }
.card-actions { display:flex; gap:var(--sp-03); margin-top:var(--sp-05); flex-wrap:wrap; }

/* Stat cards (legacy dashboard) */
.stat-card { background:var(--layer); border:1px solid var(--border-subtle); border-left:3px solid var(--green-500);
    padding:var(--sp-05); display:flex; align-items:center; gap:var(--sp-04); margin:0; }
.stat-icon { color:var(--green-700); display:inline-flex; }
.stat-value { font-size:var(--heading-04); font-weight:600; color:var(--text-primary); display:block; line-height:1.1; }
.stat-label { color:var(--text-secondary); font-size:var(--label-01); text-transform:uppercase; letter-spacing:.05em; }

/* ===================== Buttons (Carbon) ===================== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-03);
    min-height:40px; padding:0 var(--sp-05); border:1px solid transparent; border-radius:var(--radius);
    font-family:var(--font-sans); font-weight:500; font-size:var(--body-01); line-height:1;
    cursor:pointer; transition:background .11s,border-color .11s; text-decoration:none; user-select:none;
    letter-spacing:.01em;
}
.btn:hover { text-decoration:none; }
.btn:focus-visible { outline:2px solid var(--focus); outline-offset:-4px; box-shadow:inset 0 0 0 1px #fff; }
.btn .ic { flex-shrink:0; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { background:var(--cocoa-700); color:#fff; }
.btn-secondary:hover { background:var(--cocoa-800); }
.btn-success { background:var(--green-600); color:#fff; }
.btn-success:hover { background:var(--green-700); }
.btn-ghost { background:transparent; color:var(--primary); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--layer-hover); }
.btn-danger { background:var(--error); color:#fff; }
.btn-danger:hover { background:#8E1B1B; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { min-height:32px; padding:0 var(--sp-04); font-size:var(--label-01); }
.btn-lg { min-height:48px; padding:0 var(--sp-06); font-size:var(--body-02); }
.btn-block { width:100%; }
.btn-icon { padding:0; width:40px; min-height:40px; }

/* ===================== Forms (Carbon fluid: fill + bottom border) ===================== */
.form-group { margin-bottom:var(--sp-05); }
.form-label { display:block; color:var(--text-secondary); font-weight:400; margin-bottom:var(--sp-03); font-size:var(--label-01); }
.form-input,.form-select,.form-textarea {
    width:100%; min-height:40px; padding:var(--sp-03) var(--sp-04);
    border:none; border-bottom:1px solid var(--border-strong); border-radius:0;
    font-size:var(--body-02); font-family:var(--font-sans); background:var(--field); color:var(--text-primary);
    transition:background .11s,outline .11s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus { outline:2px solid var(--focus); outline-offset:-2px; background:var(--field); }
.form-input:hover,.form-select:hover,.form-textarea:hover { background:#ededed; }
.form-input.error { outline:2px solid var(--error); outline-offset:-2px; }
.form-input::placeholder { color:var(--text-helper); }
.form-help { color:var(--text-helper); font-size:var(--helper-01); margin:var(--sp-02) 0 0; }
.form-textarea { min-height:80px; resize:vertical; line-height:1.5; }
.form-select { appearance:none; padding-right:2.2rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right var(--sp-04) center; }
.form-actions { display:flex; gap:var(--sp-03); justify-content:flex-end; margin-top:var(--sp-06); flex-wrap:wrap; }
.form-input-wrapper { position:relative; }
.form-input-wrapper .input-icon { position:absolute; left:var(--sp-04); top:50%; transform:translateY(-50%); color:var(--text-helper); display:inline-flex; }
.form-input-wrapper .form-input { padding-left:calc(var(--sp-04) + 28px); }
.inline-form { display:flex; gap:var(--sp-03); align-items:flex-end; flex-wrap:wrap; margin-top:var(--sp-04); padding-top:var(--sp-04); border-top:1px solid var(--border-subtle); }
.inline-form .form-input { width:auto; flex:1; min-width:120px; }
.scan-input-row { display:flex; gap:var(--sp-03); align-items:flex-end; }
.scan-input-row .form-input { flex:1; }

/* ===================== Tables (Carbon data table) ===================== */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:var(--body-01); background:var(--layer); }
.data-table th { text-align:left; background:var(--layer-accent); color:var(--text-primary); padding:var(--sp-04) var(--sp-05);
    font-weight:600; font-size:var(--label-01); letter-spacing:.02em; border-bottom:1px solid var(--border-subtle); white-space:nowrap; }
.data-table td { padding:var(--sp-04) var(--sp-05); border-bottom:1px solid var(--border-subtle); vertical-align:middle; height:48px; }
.data-table tbody tr:hover td { background:var(--layer-hover); }
.data-table .empty,.empty { text-align:center; color:var(--text-helper); padding:var(--sp-07); }

/* ===================== Tags / status (Carbon tags = pill) ===================== */
.status-badge { display:inline-flex; align-items:center; gap:var(--sp-02); padding:2px var(--sp-03); border-radius:99px;
    font-size:var(--label-01); font-weight:500; letter-spacing:.01em; white-space:nowrap; line-height:1.5; }
.status-received { background:var(--green-100); color:var(--green-800); }
.status-stored { background:var(--cocoa-100); color:var(--cocoa-800); }
.status-in-transit,.status-transit { background:var(--gold-200); color:var(--gold-700); }
.status-dispatched { background:#D0E2FF; color:#0043CE; }
.status-returned { background:var(--gray-20); color:var(--gray-70); }
.status-audit { background:#E8DAFF; color:#6929C4; }
.status-chips { display:flex; gap:var(--sp-03); flex-wrap:wrap; margin-bottom:var(--sp-06); }

/* ===================== Alerts (Carbon inline notification) ===================== */
.alert { display:flex; align-items:flex-start; gap:var(--sp-04); padding:var(--sp-04) var(--sp-05);
    margin-bottom:var(--sp-05); border-left:3px solid var(--primary); background:var(--layer); border:1px solid var(--border-subtle); }
.alert-icon { flex-shrink:0; font-weight:700; }
.alert-content { flex:1; }
.alert-content h4 { margin:0 0 var(--sp-02); font-size:var(--body-01); }
.alert-content p { margin:0; font-size:var(--body-01); }
.alert-close { background:none; border:none; font-size:1.1rem; cursor:pointer; color:inherit; opacity:.7; padding:0 var(--sp-02); }
.alert-close:hover { opacity:1; }
.alert-success { border-left-color:var(--green-600); background:var(--green-50); color:var(--green-800); }
.alert-error { border-left-color:var(--error); background:#FFF1F1; color:#A2191F; }
.alert-warning { border-left-color:var(--gold-500); background:var(--gold-100); color:var(--gold-700); }
.error-list { margin:var(--sp-02) 0 0 var(--sp-05); padding:0; }

/* ===================== Progress ===================== */
.progress-status { display:flex; align-items:center; gap:var(--sp-04); }
.progress-bar { flex:1; height:6px; background:var(--gray-20); border-radius:0; overflow:hidden; min-width:60px; }
.progress-fill { height:100%; background:var(--green-600); transition:width .5s; }
.progress-percent { font-size:var(--label-01); font-weight:500; color:var(--text-secondary); min-width:56px; text-align:right;
    font-family:var(--font-mono); }

/* ===================== Detail grids / rows ===================== */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-05); }
.detail-grid > div,.detail-row { display:flex; flex-direction:column; }
.detail-grid .label,.detail-row .label,.bag-details .label { font-size:var(--label-01); text-transform:uppercase; letter-spacing:.04em; color:var(--text-helper); }
.detail-grid .value,.detail-row .value { font-size:var(--body-02); font-weight:500; color:var(--text-primary); margin-top:var(--sp-01); }
.detail-row { flex-direction:row; justify-content:space-between; align-items:center; padding:var(--sp-03) 0; }
.callout { background:var(--cocoa-50); border-left:3px solid var(--cocoa-300); padding:var(--sp-04) var(--sp-05); margin-bottom:var(--sp-05); }

/* ===================== Activity feed / timeline ===================== */
.activity-feed { list-style:none; margin:0; padding:0; }
.activity-feed li { display:flex; gap:var(--sp-04); padding:var(--sp-04) 0; border-bottom:1px solid var(--border-subtle); }
.activity-feed li:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:var(--green-500); margin-top:6px; flex-shrink:0; }
.activity-type { font-size:var(--label-01); color:var(--text-secondary); }
.timeline { list-style:none; margin:0; padding:0 0 0 var(--sp-02); }
.timeline-item { position:relative; padding:0 0 var(--sp-05) var(--sp-06); border-left:1px solid var(--green-200); }
.timeline-item:last-child { border-left-color:transparent; }
.timeline-marker { position:absolute; left:-5px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--green-600); border:2px solid var(--layer); }
.timeline-head { display:flex; justify-content:space-between; gap:var(--sp-03); }

/* ===================== QR ===================== */
.qr-card { text-align:center; }
.qr-large { width:100%; max-width:220px; height:auto; image-rendering:pixelated; border:1px solid var(--border-subtle); }
.qr-caption { font-weight:600; letter-spacing:.06em; margin:var(--sp-03) 0; }
.qr-thumb { image-rendering:pixelated; border:1px solid var(--border-subtle); }

/* ===================== Login ===================== */
.auth-body { background:var(--nav-bg); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-05); }
.login-shell { width:100%; max-width:384px; }
.login-card { background:var(--layer); padding:var(--sp-08) var(--sp-07); border-top:3px solid var(--green-600); }
.login-brand { text-align:center; margin-bottom:var(--sp-07); }
.login-logo { color:var(--green-600); display:inline-flex; }
.login-brand h1 { font-size:var(--heading-04); margin:var(--sp-04) 0 var(--sp-02); }
.login-brand p { color:var(--text-secondary); font-size:var(--label-01); margin:0; }
.login-hint { margin-top:var(--sp-06); padding-top:var(--sp-05); border-top:1px solid var(--border-subtle); font-size:var(--label-01); color:var(--text-secondary); }
.hint-grid { display:flex; flex-wrap:wrap; gap:var(--sp-02); margin-top:var(--sp-03); }
.hint-grid span { background:var(--field); border:1px solid var(--border-subtle); padding:2px var(--sp-03); font-family:var(--font-mono); font-size:var(--label-01); }

/* ===================== Success hero / next steps ===================== */
.success-hero { display:flex; align-items:center; gap:var(--sp-05); }
.success-icon { width:48px; height:48px; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.next-steps { display:flex; flex-direction:column; gap:var(--sp-03); }

/* ===================== Scanner ===================== */
.scanner-card { text-align:center; }
.qr-reader { width:100%; max-width:420px; margin:0 auto var(--sp-05); overflow:hidden; background:#000; min-height:220px; }
.qr-reader-sm { max-width:100%; min-height:0; margin-top:var(--sp-04); }
.scanner-controls { display:flex; gap:var(--sp-03); justify-content:center; flex-wrap:wrap; }
.scanner-instructions { color:var(--text-secondary); font-size:var(--body-01); margin-top:var(--sp-04); }
.scan-result .result-header { display:flex; align-items:center; gap:var(--sp-03); margin-bottom:var(--sp-05); }
.result-icon.success { width:36px; height:36px; background:var(--green-100); color:var(--green-700); display:flex; align-items:center; justify-content:center; font-weight:700; }
.result-actions { display:flex; gap:var(--sp-03); flex-wrap:wrap; margin-top:var(--sp-05); }
.bag-details .detail-row { border-bottom:1px solid var(--border-subtle); }

/* ===================== Reports / warehouse / misc ===================== */
.report-nav { display:flex; flex-direction:column; gap:0; padding:0; }
.report-link { padding:var(--sp-04) var(--sp-05); color:var(--text-primary); font-size:var(--body-01); border-left:3px solid transparent; }
.report-link:hover { background:var(--layer-hover); text-decoration:none; }
.report-link.active { background:var(--green-50); border-left-color:var(--green-600); color:var(--green-800); font-weight:600; }
.empty-state { text-align:center; padding:var(--sp-09) var(--sp-05); }
.empty-icon { color:var(--gray-40); display:inline-flex; margin-bottom:var(--sp-04); }
.stack-mini-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-03); }
.stack-mini { background:var(--field); border:1px solid var(--border-subtle); padding:var(--sp-04); }
.stack-mini-name { font-size:var(--label-01); font-weight:600; display:block; margin-bottom:var(--sp-03); }
.flow-steps { display:flex; gap:1px; list-style:none; padding:0; margin:0 0 var(--sp-06); flex-wrap:wrap; background:var(--border-subtle); border:1px solid var(--border-subtle); }
.flow-steps li { flex:1; min-width:120px; padding:var(--sp-04) var(--sp-05); background:var(--layer); font-size:var(--label-01); color:var(--text-helper); }
.flow-steps li.active { color:var(--green-800); border-top:2px solid var(--green-600); }
.error-page { display:flex; align-items:center; justify-content:center; min-height:60vh; }
.error-card { text-align:center; max-width:420px; }
.error-code { font-size:3.5rem; font-weight:600; color:var(--cocoa-300); font-family:var(--font-mono); }

/* ===================== Footer ===================== */
.app-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-03); margin-top:var(--sp-07);
    padding-top:var(--sp-05); border-top:1px solid var(--border-subtle); color:var(--text-helper); font-size:var(--label-01); }