/* ---- Static-mockup overlay ----
   Blocks clicks/hovers on any content wrapped in a
   `<div class="mockup-shell">…<div class="mockup-overlay"/>…</div>`
   and stamps a "Static mockup" badge in the top-right. Ported from
   the handoff bundle so a real user landing on one of these pages
   doesn't try to click a filter that isn't wired yet — they see the
   badge and know it's a preview. Delete the two rules (and the
   `mockup-overlay` div in each razor) once the page is wired to
   real data. */
.mockup-shell { position:relative; }
.mockup-overlay { position:absolute; inset:0; z-index:9999; pointer-events:auto; background:transparent; cursor:not-allowed; }
.mockup-overlay::after { content:"Static mockup"; position:absolute; top:8px; right:8px; background:rgba(15,23,42,.72); color:#fff; font:600 10px/1 system-ui; padding:5px 8px; border-radius:4px; letter-spacing:.04em; text-transform:uppercase; }

/* ================================================================
   mockup-warehouse.css  (2026-09)
   Shared design tokens ported verbatim from the WarehouseOverview /
   FrontWarehouse / PackingCasing hifi mockups (design_handoff bundle,
   file unimate.css). Loaded globally alongside custom.css so all three
   pages pick up the same nav-tabs / pill / table / detail styling
   without each razor having to duplicate them inline.

   Page-specific styles (`.kpi-wide`, `.kpi-fw`, `.kpi-pc`) live
   inline in each razor's own <style> block — those are unique per
   page and would only clutter the shared file.

   Class names picked to avoid collisions with the existing custom.css:
   grep custom.css confirmed no `.kpi-pill`, `.table-lite`,
   `.nav-tabs-lite`, `.pill-high` etc. exist there today.
   ================================================================ */

.page-sub{color:#6c757d;font-size:.85rem;margin:-4px 0 12px}

.kpi-pill{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#fff;border:1px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:160px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.kpi-pill:hover{border-color:#007bff;box-shadow:0 2px 6px rgba(0,123,255,.2);transform:translateY(-1px)}
.kpi-pill .kpi-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#f8f9fa;border-radius:6px;color:#495057;flex-shrink:0}
.kpi-pill .kpi-icon i{font-size:1.1rem}
.kpi-pill .kpi-title{font-size:.72rem;font-weight:500;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.15rem}
.kpi-pill .kpi-count{font-size:1.35rem;font-weight:700;color:#2c3e50;line-height:1}
.kpi-pill .kpi-sub{font-size:.7rem;color:#8a94a3;margin-top:2px}
.kpi-icon.bg-blue{background:#e8f0fe;color:#3b82f6}
.kpi-icon.bg-amber{background:#fef3d7;color:#f59e0b}
.kpi-icon.bg-purple{background:#efeaff;color:#7c5cff}
.kpi-icon.bg-green{background:#e3f5ec;color:#22a06b}
.kpi-icon.bg-orange{background:#ffece0;color:#f97b3b}
.kpi-icon.bg-red{background:#fde7ea;color:#dc3545}
.kpi-icon.bg-teal{background:#d7f0ee;color:#0d9488}

.nav-tabs-lite{border-bottom:1px solid #dee2e6;padding:.5rem .75rem 0;gap:.25rem}
.nav-tabs-lite .nav-link{border:0;color:#5b6270;font-size:.85rem;font-weight:500;padding:.5rem .9rem;border-radius:.4rem .4rem 0 0;display:inline-flex;align-items:center;gap:.4rem}
.nav-tabs-lite .nav-link .badge{background:#eef1f5;color:#5b6270;font-weight:600;font-size:.7rem}
.nav-tabs-lite .nav-link.active{background:#0d6efd;color:#fff}
.nav-tabs-lite .nav-link.active .badge{background:rgba(255,255,255,.25);color:#fff}

.table-lite{font-size:.82rem;margin-bottom:0}
.table-lite thead th{background:#f8f9fa;color:#46556a;font-size:.72rem;font-weight:700;border-bottom:1px solid #dee2e6;padding:.55rem .6rem;white-space:nowrap}
.table-lite tbody td{padding:.55rem .6rem;vertical-align:middle;border-color:#eef1f5;font-size:.78rem}
.table-lite tbody tr.selected{background:#eaf3ff}
.order-ref{color:#0d6efd;font-weight:600;text-decoration:none}
.order-ref:hover{text-decoration:underline}
.date-tbc{color:#0d6efd;font-weight:600}
.date-warn{color:#dc3545;font-weight:600}

.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.7rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill-high{background:#fde7ea;color:#d32f2f;border-color:#f6c6cc}
.pill-medium{background:#fff2d9;color:#b46700;border-color:#f8dfa9}
.pill-low{background:#e3f5ec;color:#22a06b;border-color:#b8e5cd}
.pill-new{background:#e8f0fe;color:#1a73e8;border-color:#b8d3f9}
.pill-picking{background:#efeaff;color:#5a3ee0;border-color:#d8ceff}
.pill-packing{background:#efeaff;color:#5a3ee0;border-color:#d8ceff}
.pill-repack{background:#fff2d9;color:#b46700;border-color:#f8dfa9}
.pill-qcready{background:#e3f5ec;color:#22a06b;border-color:#b8e5cd}
.pill-front{background:#e3f5ec;color:#22a06b;border-color:#b8e5cd}
.pill-info{background:#e8f0fe;color:#1a73e8;border-color:#b8d3f9}
.pill-ready{background:#e3f5ec;color:#22a06b;border-color:#b8e5cd}
.pill-warn{background:#fff2d9;color:#b46700;border-color:#f8dfa9}
.pill-check{background:#fef3d7;color:#b46700;border-color:#f8dfa9}
.pill-await{background:#fff2d9;color:#b46700;border-color:#f8dfa9}
.pill-docs{background:#efeaff;color:#5a3ee0;border-color:#d8ceff}
.pill-exception{background:#fde7ea;color:#d32f2f;border-color:#f6c6cc}
.pill-inprogress{background:#efeaff;color:#5a3ee0;border-color:#d8ceff}
.pill-completed{background:#e3f5ec;color:#22a06b;border-color:#b8e5cd}
.pill-scheduled{background:#eef1f5;color:#5b6270;border-color:#dcdfe4}
.pill-today{background:#e8f0fe;color:#1a73e8;border-color:#b8d3f9}
.pill-atfront{background:#e3f5ec;color:#22a06b;border-color:#b8e5cd}
.pill-blocked{background:#fde7ea;color:#d32f2f;border-color:#f6c6cc}

.detail-title{font-size:.95rem;font-weight:700;color:#212529;margin-bottom:.5rem}
.detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.detail-head .ref{font-size:1.25rem;font-weight:700;color:#212529}
.dl{display:grid;grid-template-columns:135px 1fr;gap:6px 10px;font-size:.78rem;color:#212529;margin-bottom:.75rem}
.dl dt{color:#6c757d;font-weight:400}
.dl dd{margin:0;font-weight:500}
.check-list{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0 .75rem;font-size:.82rem}
.check-list label{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin:0}
.info-bar{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:.65rem .9rem;display:flex;gap:.6rem;font-size:.8rem;color:#334155;line-height:1.4}
.info-bar i{color:#0d6efd;font-size:1rem;margin-top:1px}
.attention-bar{background:#fff8ec;border:1px solid #f8dfa9;border-radius:8px;padding:.85rem 1rem}
.attention-bar .head{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#b46700;margin-bottom:.6rem;font-size:.85rem}
.attention-item{background:#fff;border:1px solid #f0e2c2;border-radius:6px;padding:.55rem .7rem;font-size:.75rem;display:flex;flex-direction:column;gap:2px}
.attention-item .t{font-weight:600;color:#b46700;display:flex;align-items:center;gap:.35rem}
.attention-item .r{color:#0d6efd;font-weight:600}
.attention-item .s{color:#6c757d}
.exception-item{background:#fff;border:1px solid #eef1f5;border-radius:8px;padding:.7rem .85rem;display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;transition:all .15s}
.exception-item:hover{border-color:#0d6efd;box-shadow:0 2px 6px rgba(13,110,253,.1)}
.exception-item .ei-icon{width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#fde7ea;color:#dc3545;flex-shrink:0}
.exception-item .ei-t{font-weight:600;font-size:.8rem;color:#212529}
.exception-item .ei-r{color:#0d6efd;font-weight:600;font-size:.75rem}
.exception-item .ei-s{color:#6c757d;font-size:.72rem}
.exception-item .ei-arrow{margin-left:auto;color:#6c757d;align-self:center}