/* =====================================================================
   D2C Ease — Bringing Efficiency
   ---------------------------------------------------------------------
   Design intent: this is a working tool, not a marketing page. A store's
   staff scan barcodes at a counter, pack orders, review payroll. So the
   priorities are legibility at a glance, unmistakable status colors, and
   calm surfaces that don't fatigue over a long shift — kept compact and
   icon-forward so more fits on screen without feeling cluttered.

   The brand's gold/navy/cream identity is kept, but pushed toward a
   deeper, less washed-out register so status colors read clearly
   against it. Signature device: a thin gold rule that anchors the top
   of every screen, echoing the brand's lattice motif without repeating
   it decoratively everywhere.
   ===================================================================== */

:root{
  /* ---- Ink: a warm near-black. Replaces the old cool "navy"; the --navy*
     names are kept as aliases so no existing markup breaks. ---- */
  --ink:#1F2422;
  --ink-soft:#586460;
  --ink-faint:#8C9793;
  --navy:var(--ink);
  --navy-soft:var(--ink-soft);
  --navy-faint:var(--ink-faint);

  /* ---- Gold: the primary action colour + the signature top rule ---- */
  --gold:#AE7F0C;
  --gold-light:#D6A32B;
  --gold-deep:#875F0F;
  --gold-dark:var(--gold-deep);
  --gold-wash:#FBF2DC;

  /* ---- Green: the second accent. "OK / done / positive", header tint,
     scan panels. Paired with gold everywhere. ---- */
  --green:#2E6B4C;
  --green-light:#3F8C65;
  --green-deep:#1C3E30;
  --green-wash:#E4EFE8;

  /* ---- Surfaces: warm cream / white ---- */
  --cream:#FAF7F0;
  --cream-dark:#F0EADB;      /* was used ~40x in app.js but never defined */
  --surface:#FFFFFF;
  --surface-sunk:#F4EEE2;
  --border:#E7DFCD;
  --border-strong:#D6C9AF;

  /* ---- Status — distinct in hue AND lightness so they read for the
     common forms of colour blindness. green=ok, amber=warn, clay=alert. ---- */
  --sage:var(--green);
  --sage-wash:var(--green-wash);
  --clay:#B4462F;
  --clay-wash:#FBE3DC;
  --amber:#966400;
  --amber-wash:#FBEAC9;
  --info:#3A6B8F;
  --info-wash:#E3EEF6;

  --radius:10px;
  --radius-sm:7px;
  --shadow-sm: 0 1px 2px rgba(31,36,34,0.06);
  --shadow-md: 0 3px 12px rgba(31,36,34,0.08), 0 1px 3px rgba(31,36,34,0.05);
  --shadow-lg: 0 16px 40px rgba(31,36,34,0.16), 0 4px 10px rgba(31,36,34,0.07);

  --ease: cubic-bezier(.2,.7,.3,1);

  /* Touch-target floor, relaxed on desktop and raised on small screens. */
  --tap:32px;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--navy);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:13.5px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif; margin:0; color:var(--green-deep); letter-spacing:-0.01em;}
h1{font-size:23px; line-height:1.2;}
#root{max-width:1800px; margin:0 auto; padding:16px 22px 72px;}
a{color:var(--gold);}
i.fa-solid, i.fa-regular, i.fa-brands{line-height:1;}

/* Signature: the gold rule that opens every screen. Kept as a single
   quiet gesture rather than repeating the lattice across the page. */
.lattice{
  height:3px; margin:8px 0 14px; border-radius:2px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 14%, var(--green) 22%, var(--border) 22%, var(--border) 100%);
}
/* ---------- Announcement ticker (replaces the old space-eating board) ---------- */
.announcement-ticker{
  display:flex; align-items:center; gap:10px; background:var(--gold-wash); border:1px solid var(--gold);
  border-radius:8px; padding:8px 14px; margin-bottom:14px; cursor:pointer; overflow:hidden;
  transition:background .15s var(--ease);
}
.announcement-ticker:hover{background:#F5E6C3;}
.announcement-ticker.urgent{background:var(--clay-wash); border-color:var(--clay);}
.announcement-ticker-icon{flex:none; color:var(--gold); font-size:13px;}
.announcement-ticker.urgent .announcement-ticker-icon{color:var(--clay); animation:ticker-pulse 1.4s ease-in-out infinite;}
@keyframes ticker-pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.announcement-ticker-text-wrap{flex:1; min-width:0; overflow:hidden; position:relative; height:18px;}
.announcement-ticker-text{
  font-size:12.5px; font-weight:500; color:var(--navy); white-space:nowrap;
  position:absolute; top:0; left:0; animation:ticker-fade-slide .4s var(--ease);
}
@keyframes ticker-fade-slide{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.announcement-ticker-text.scrolling{animation:ticker-marquee 14s linear infinite;}
@keyframes ticker-marquee{0%{transform:translateX(0);} 100%{transform:translateX(-100%);}}
.announcement-ticker-count{flex:none; font-size:10.5px; color:var(--navy-soft); font-family:'IBM Plex Mono',monospace;}

.brand-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.brand-eyebrow i{font-size:11px;}
.brand-tagline{color:var(--navy-soft); font-weight:500; text-transform:none; letter-spacing:0.01em;}
.subtle{color:var(--navy-soft); font-size:13px;}
.header-row{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------- Controls ---------- */
button{
  font-family:inherit; cursor:pointer; border:none; border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600; padding:8px 14px; letter-spacing:0.01em;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  transition:background .16s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease), color .16s var(--ease);
}
button:active{transform:translateY(1px);}
button:disabled{opacity:.5; cursor:not-allowed; transform:none;}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible{
  outline:2px solid var(--gold-light); outline-offset:2px;
}
/* Primary call-to-action — deliberately the loudest thing on any screen. */
.btn-gold{
  background:linear-gradient(180deg, var(--gold-light), var(--gold)); color:#fff; font-weight:700;
  box-shadow:0 1px 2px rgba(135,95,15,0.3), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-gold:hover{background:linear-gradient(180deg, #E1AE35, var(--gold-light)); box-shadow:var(--shadow-md);}
.btn-gold:disabled{background:var(--gold-light);}
/* Positive secondary action */
.btn-green{background:linear-gradient(180deg, var(--green-light), var(--green)); color:#fff; font-weight:700; box-shadow:var(--shadow-sm);}
.btn-green:hover{background:var(--green-light); box-shadow:var(--shadow-md);}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{background:var(--surface-sunk); border-color:var(--ink-faint);}
.btn-danger{background:transparent; color:var(--clay); border:1px solid var(--clay);}
.btn-danger:hover{background:var(--clay-wash);}
.icon-btn{
  background:transparent; border:none; color:var(--navy-faint); font-size:15px; line-height:1;
  padding:4px 7px; border-radius:50%; transition:background .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover{background:var(--clay-wash); color:var(--clay);}
.link-btn{
  background:none; border:none; color:var(--gold); font-size:12.5px; padding:0; cursor:pointer;
  font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
  display:inline-flex; align-items:center; gap:4px;
}
.link-btn:hover{color:var(--ink);}

/* ---------- High-visibility surfaces ----------
   Scan / dispatch / RTO panels — used fast, at a counter — get a distinct
   green treatment so they're unmistakable on a busy dashboard. Apply
   class="card scan-panel" to the wrapper (`.card.scan-panel` so it beats the
   plain `.card` rule that's defined later in this file). */
.card.scan-panel{
  background:linear-gradient(180deg, var(--green-wash), var(--surface) 62%);
  border:1.5px solid var(--green-light);
  box-shadow:0 0 0 3px rgba(46,107,76,0.08), var(--shadow-sm);
}
.scan-panel > h3, .scan-panel .scan-title{color:var(--green-deep);}
.scan-panel input[type=text]{
  border:1.5px solid var(--green-light); font-size:15px; padding:11px 13px; background:var(--surface);
}
.scan-panel input[type=text]:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(46,107,76,0.18);}

/* Anything urgent / overdue / past-SLA — an unmistakable alert shade. */
.is-urgent{background:var(--clay-wash); color:var(--clay); font-weight:700; border:1px solid rgba(180,70,47,0.35);}
@media (prefers-reduced-motion: no-preference){
  .is-urgent.pulse{animation:pulse-urgent 2.2s var(--ease) infinite;}
}

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=month], input[type=number], input[type=time], select, textarea{
  font-family:inherit; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:8px 10px; font-size:13px; background:var(--surface); color:var(--navy); width:100%;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,134,11,0.14);
}
input::placeholder, textarea::placeholder{color:var(--navy-faint);}
label{font-size:11.5px; font-weight:600; color:var(--navy-soft); display:block; margin-bottom:4px; letter-spacing:0.01em;}
textarea{resize:vertical;}

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:2px; margin:14px 0 16px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface-sunk); padding:4px; border-radius:9px; width:100%; scrollbar-width:thin;
}
.tab-btn{
  background:transparent; color:var(--navy-soft); padding:7px 13px; border-radius:6px; font-weight:500;
  flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
}
.tab-btn i{font-size:12px; opacity:0.8;}
.tab-btn:hover{color:var(--ink); background:rgba(255,255,255,0.6);}
.tab-btn.active{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow-sm), inset 0 -2px 0 var(--gold);}
.tab-btn.active i{opacity:1; color:var(--gold);}

/* ---------- Cards & layout ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px;}
@media (max-width:760px){.cards-grid{grid-template-columns:1fr;}}

/* ---------- Universal modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,35,47,0.45); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:modal-fade-in .15s var(--ease);
}
@keyframes modal-fade-in{from{opacity:0;} to{opacity:1;}}
.modal-panel{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  max-width:640px; width:100%; max-height:88vh; overflow-y:auto; position:relative;
  animation:modal-slide-up .18s var(--ease);
}
@keyframes modal-slide-up{from{transform:translateY(12px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.modal-panel-inner{padding:22px 24px;}
.modal-close-btn{
  position:absolute; top:14px; right:14px; background:var(--surface-sunk); border:none;
  width:30px; height:30px; border-radius:50%; color:var(--navy-soft); font-size:14px;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.modal-close-btn:hover{background:var(--clay-wash); color:var(--clay);}
@media (max-width:640px){
  .modal-overlay{padding:0; align-items:flex-end;}
  .modal-panel{max-width:100%; max-height:92vh; border-radius:var(--radius) var(--radius) 0 0;}
}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 15px; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease);
}
.card:hover{box-shadow:var(--shadow-md);}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:8px;}
.card-head h3{font-size:16px; display:flex; align-items:center; gap:7px;}
.card-head h3 i{color:var(--gold); font-size:14px;}
.count-pill{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--navy-soft);
  background:var(--surface-sunk); padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.card-actions{display:flex; gap:5px; margin:8px 0 10px; flex-wrap:wrap;}
.card-actions button{font-size:11px; padding:5px 10px;}

/* ---------- Collapsible settings sections (Company Profile, Courier cards) ----------
   Native <details>/<summary> — free keyboard/a11y behavior, no JS state to manage.
   Nesting one inside another (e.g. a courier block inside the Courier Shipping
   section) just works; only the outer gets the heavier card chrome. */
.settings-section{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); margin-bottom:14px; overflow:hidden;
}
.settings-section > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 15px; font-weight:600; font-size:14px; color:var(--ink);
}
.settings-section > summary::-webkit-details-marker{display:none;}
.settings-section > summary::marker{content:'';}
.settings-section > summary:hover{background:var(--surface-sunk);}
.settings-section > summary .section-title{display:flex; align-items:center; gap:8px;}
.settings-section > summary .section-status{display:flex; align-items:center; gap:6px; font-weight:400;}
.settings-section > summary .summary-caret{color:var(--ink-faint); font-size:12px; transition:transform .16s var(--ease);}
.settings-section[open] > summary .summary-caret{transform:rotate(180deg);}
.settings-section[open] > summary{border-bottom:1px solid var(--border);}
.settings-section > .section-body{padding:15px;}
/* A courier block nested inside the Courier Shipping section: same disclosure
   behavior, lighter chrome (no shadow/outer border — it's already inside one). */
.settings-subsection{border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden;}
.settings-subsection > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; font-weight:600; font-size:12.5px;
}
.settings-subsection > summary::-webkit-details-marker{display:none;}
.settings-subsection > summary::marker{content:'';}
.settings-subsection > summary:hover{background:var(--surface-sunk);}
.settings-subsection > summary .summary-caret{color:var(--ink-faint); font-size:11px; transition:transform .16s var(--ease);}
.settings-subsection[open] > summary .summary-caret{transform:rotate(180deg);}
.settings-subsection[open] > summary{border-bottom:1px solid var(--border);}
.settings-subsection > .section-body{padding:12px;}

.sd-rate-row:first-child{border-top:none;}
.sd-rate-row:hover{background:var(--surface-sunk);}
.sd-rate-row-selected{background:var(--sage-wash);}

.task-row{
  display:flex; align-items:flex-start; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--border);
}
.task-row:last-child{border-bottom:none;}
.status-dot{width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background:var(--border-strong);}
.status-dot.done{background:var(--sage);}
.status-dot.overdue{background:var(--clay);}
.task-text{flex:1; font-size:13px; line-height:1.4;}
.task-note{display:block; font-size:11.5px; color:var(--navy-soft); font-style:italic; margin-top:3px;}

.add-row{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.add-row input{flex:1; min-width:120px;}

.empty-state{
  text-align:center; padding:32px 18px; color:var(--navy-soft); font-size:13px;
  background:var(--surface-sunk); border-radius:var(--radius); border:1px dashed var(--border-strong);
}
.empty-state i{font-size:26px; color:var(--border-strong); margin-bottom:10px; display:inline-block;}

/* ---------- Login ---------- */
.login-wrap{display:flex; align-items:center; justify-content:center; min-height:78vh;}
.login-card{
  max-width:390px; width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:30px 28px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.login-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
}
.login-card .brand-eyebrow{font-size:12px; justify-content:center;}
.login-card .brand-eyebrow i{
  font-size:15px; color:#fff; background:linear-gradient(160deg, var(--gold-light), var(--gold));
  width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.login-card h2{text-align:center; margin-top:10px;}
.login-card .field{margin-bottom:15px;}
.error-msg{color:var(--clay); font-size:12.5px; margin:9px 0; line-height:1.4;}

/* ---------- Employee task list ---------- */
.task-list-card{
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm);
}
.task-progress-bar{background:var(--surface-sunk); border-radius:20px; height:7px; overflow:hidden; margin:8px 0 14px;}
.task-progress-fill{height:100%; background:linear-gradient(90deg, var(--gold), var(--sage)); border-radius:20px; transition:width .3s var(--ease);}
.emp-task{display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--border);}
.emp-task:last-child{border-bottom:none;}
.emp-task.overdue{background:linear-gradient(90deg, var(--clay-wash) 0%, transparent 3%); padding-left:8px; margin-left:-8px;}
.emp-task input[type=checkbox]{width:20px; height:20px; margin-top:1px; accent-color:var(--sage); flex:none; cursor:pointer;}
.emp-task-body{flex:1;}
.emp-task-text{font-size:14.5px; line-height:1.4; font-weight:500;}
.emp-task-text.done{text-decoration:line-through; color:var(--navy-faint); font-weight:400;}
.emp-task-desc{font-size:12.5px; color:var(--navy-soft); margin-top:3px;}
.emp-task textarea{margin-top:8px; min-height:38px; font-size:12.5px;}

.priority-tag{
  font-size:10px; font-family:'IBM Plex Mono',monospace; padding:2px 7px; border-radius:10px;
  margin-left:6px; vertical-align:middle; font-weight:500; letter-spacing:0.02em;
}
.priority-high{background:var(--clay-wash); color:var(--clay);}
.priority-normal{background:var(--surface-sunk); color:var(--navy-soft);}
.priority-low{background:var(--surface-sunk); color:var(--navy-faint);}

.save-bar{display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:10px; flex-wrap:wrap;}
.dirty-flag{font-size:12px; color:var(--amber); font-weight:600;}
.saved-flag{font-size:12px; color:var(--sage); font-weight:600;}

/* ---------- Reports ---------- */
.perf-controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.perf-summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.perf-summary-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 15px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  border-left:3px solid var(--gold);
}
.perf-summary-item .subtle{display:flex; align-items:center; gap:6px;}
.perf-summary-item .subtle i{color:var(--gold); font-size:12px;}
.perf-summary-item .big{
  font-family:'Playfair Display',serif; font-size:25px; line-height:1.1; margin-top:3px;
  font-variant-numeric:tabular-nums;
}

.heatmap{
  overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); padding:16px; box-shadow:var(--shadow-sm);
}
.heatmap-row{display:flex; align-items:center; gap:4px; margin-bottom:6px;}
.heatmap-row:last-child{margin-bottom:0;}
.heatmap-label{width:96px; flex:none; font-size:12.5px; font-weight:600; cursor:pointer;}
.heatmap-label:hover{color:var(--gold);}
.heatmap-cell{width:14px; height:14px; border-radius:3px; background:var(--surface-sunk); flex:none;}
.heatmap-cell.full{background:var(--sage);}
.heatmap-cell.partial{background:var(--gold-light);}
.heatmap-cell.none{background:var(--clay);}

.summary-table{
  width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
.summary-table th, .summary-table td{
  text-align:left; padding:11px 14px; font-size:13.5px; border-bottom:1px solid var(--border);
}
.summary-table th{
  background:var(--surface-sunk); font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.07em; color:var(--navy-soft); font-weight:600;
}
.summary-table tbody tr{transition:background .12s var(--ease);}
.summary-table tbody tr:hover{background:var(--cream);}
.summary-table tr:last-child td{border-bottom:none;}
.summary-table td.mono, .summary-table td .mono{font-variant-numeric:tabular-nums;}
.summary-table.compact th, .summary-table.compact td{padding:6px 10px; font-size:12px;}
.summary-table.compact th{font-size:9.5px;}

/* Universal column sorting — every .summary-table gets clickable headers via
   makeTableSortable() in app.js. */
.summary-table th.sortable-th{cursor:pointer; user-select:none; white-space:nowrap;}
.summary-table th.sortable-th:hover{color:var(--navy); background:var(--cream-dark);}
.summary-table th.sortable-th .sort-arrow{opacity:0.28; margin-left:4px; font-size:9px;}
.summary-table th.sortable-th.sort-active{color:var(--gold-dark, #9A6B12);}
.summary-table th.sortable-th.sort-active .sort-arrow{opacity:1;}

.flag-chip{
  display:inline-block; font-size:10.5px; padding:3px 9px; border-radius:20px;
  margin:2px 4px 2px 0; font-weight:600; letter-spacing:0.01em;
}
.flag-red{background:var(--clay-wash); color:var(--clay); font-weight:700; border:1px solid rgba(180,70,47,0.32);}
.flag-amber{background:var(--amber-wash); color:var(--amber); font-weight:600;}
.flag-green{background:var(--green-wash); color:var(--green-deep); font-weight:600;}

.drill-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin-top:16px; box-shadow:var(--shadow-sm);
}
.note-item{border-bottom:1px solid var(--border); padding:11px 0;}
.note-item:last-child{border-bottom:none;}
.note-meta{font-size:11px; color:var(--navy-faint); margin-top:4px;}

/* ---------- Top bar & reminder pills ---------- */
.top-bar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; gap:16px; flex-wrap:wrap;}
.top-bar .who{font-size:13px; color:var(--navy-soft); font-weight:500;}
.nav-pill{
  display:inline-block; font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:20px;
  margin:6px 4px 0 0; background:var(--info-wash); color:var(--info);
}
.nav-pill-urgent{background:var(--clay-wash); color:var(--clay);}
@media (prefers-reduced-motion: no-preference){
  .nav-pill-urgent{animation:pulse-urgent 2.4s var(--ease) infinite;}
}
@keyframes pulse-urgent{0%,100%{opacity:1;} 50%{opacity:.6;}}

/* ---------- Escalations & tickets ---------- */
.escalation-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px;
  margin-bottom:11px; background:var(--surface); box-shadow:var(--shadow-sm);
}
.escalation-card.needs-response{border-left:3px solid var(--clay); background:#FEFAF9;}
.escalation-status{
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px;
  text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap;
}
.escalation-status.pending_response{background:var(--clay-wash); color:var(--clay);}
.escalation-status.pending_review{background:var(--amber-wash); color:var(--amber);}
.escalation-status.accepted{background:var(--sage-wash); color:var(--sage);}
.escalation-status.rejected{background:var(--clay-wash); color:var(--clay);}
.escalation-status.open{background:var(--info-wash); color:var(--info);}
.escalation-status.in_progress{background:var(--amber-wash); color:var(--amber);}
.escalation-status.resolved{background:var(--sage-wash); color:var(--sage);}
.escalation-status.closed{background:var(--surface-sunk); color:var(--navy-soft);}

/* ---------- Order journey stepper ---------- */
.stage-stepper{display:flex; align-items:center; gap:2px; margin:6px 0;}
.stage-step-dot{
  width:16px; height:16px; border-radius:50%; background:var(--surface); flex:none;
  border:2px solid var(--border-strong); transition:all .2s var(--ease);
  display:flex; align-items:center; justify-content:center; font-size:8px; color:#fff;
}
.stage-step-dot.done{background:var(--sage); border-color:var(--sage);}
.stage-step-dot.current{background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(184,134,11,0.18);}
@media (prefers-reduced-motion: no-preference){
  .stage-step-dot.current{animation:pulse-current 1.8s var(--ease) infinite;}
}
@keyframes pulse-current{0%,100%{box-shadow:0 0 0 4px rgba(184,134,11,0.18);} 50%{box-shadow:0 0 0 7px rgba(184,134,11,0.1);}}
.stage-step-line{flex:1; height:2px; background:var(--border-strong); border-radius:1px;}
.stage-step-line.done{background:var(--sage);}
.stage-step-label{font-size:10px; color:var(--navy-soft); white-space:nowrap; letter-spacing:0.01em;}

/* ---------- Settings ---------- */
.settings-section{margin-bottom:20px;}
.pref-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.pref-row:last-child{border-bottom:none;}
.toggle-switch{position:relative; display:inline-block; width:42px; height:24px; flex:none;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{
  position:absolute; cursor:pointer; inset:0; background:var(--border-strong);
  border-radius:24px; transition:background .2s var(--ease);
}
.toggle-slider:before{
  position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:transform .2s var(--ease); box-shadow:var(--shadow-sm);
}
input:checked + .toggle-slider{background:var(--sage);}
input:checked + .toggle-slider:before{transform:translateX(18px);}
.toggle-switch input:focus-visible + .toggle-slider{outline:2px solid var(--gold-light); outline-offset:2px;}

.role-chip{
  display:inline-block; font-size:10.5px; padding:3px 9px; border-radius:20px;
  margin:1px 3px 1px 0; background:var(--surface-sunk); color:var(--navy-soft); font-weight:600;
}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,35,47,0.55); z-index:998;
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(2px);
}
.modal-box{
  background:var(--surface); border-radius:16px; padding:28px; max-width:450px; width:100%;
  box-shadow:var(--shadow-lg);
}
@media (prefers-reduced-motion: no-preference){
  .modal-box{animation:modal-in .22s var(--ease);}
}
@keyframes modal-in{from{opacity:0; transform:translateY(10px) scale(.985);} to{opacity:1; transform:none;}}

.link-box{
  display:flex; align-items:center; gap:9px; background:var(--surface-sunk);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px;
}
.link-box .mono{flex:1; font-size:11px; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Toast ---------- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px);
  background:var(--navy); color:var(--cream); padding:12px 20px; border-radius:10px;
  font-size:13px; font-weight:500; opacity:0; pointer-events:none;
  transition:opacity .24s var(--ease), transform .24s var(--ease); z-index:999;
  box-shadow:var(--shadow-lg); max-width:calc(100vw - 40px);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.footer-note{margin-top:36px; text-align:center; font-size:11.5px; color:var(--navy-faint);}

/* ---------- Sidebar navigation (collapsible, icon + label) ---------- */
.app-shell{display:flex; gap:18px; align-items:flex-start;}
.sidebar{
  width:210px; flex:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); position:sticky; top:14px; max-height:calc(100vh - 28px);
  display:flex; flex-direction:column; overflow:hidden; transition:width .22s var(--ease);
}
.sidebar.collapsed{width:56px;}
.sidebar-top{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:14px 12px; border-bottom:1px solid var(--border); flex:none;
}
.sidebar.collapsed .sidebar-top{justify-content:center; padding:14px 8px;}
.sidebar-toggle-btn{
  background:transparent; border:none; color:var(--navy-soft); padding:4px 6px; border-radius:6px; font-size:12px;
}
.sidebar-toggle-btn:hover{background:var(--surface-sunk); color:var(--navy);}
.sidebar-nav{display:flex; flex-direction:column; gap:1px; padding:8px; overflow-y:auto; flex:1;}
.sidebar-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; justify-content:flex-start;
  background:transparent; border:none; color:var(--navy-soft); padding:9px 10px; border-radius:7px;
  font-weight:500; font-size:12.5px; white-space:nowrap;
}
.sidebar-item i{width:15px; text-align:center; font-size:13px; opacity:0.85; flex:none;}
.sidebar-item:hover{background:var(--surface-sunk); color:var(--ink);}
.sidebar-item.active{background:var(--green-wash); color:var(--green-deep); font-weight:600; box-shadow:inset 3px 0 0 var(--green);}
.sidebar-item.active i{opacity:1; color:var(--green);}
.sidebar.collapsed .sidebar-item{justify-content:center; padding:10px 6px;}
.sidebar.collapsed .sidebar-text{display:none;}
.sidebar-bottom{border-top:1px solid var(--border); padding:10px; flex:none;}
.sidebar-bottom .who{font-size:12px; color:var(--navy-soft); font-weight:500; display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.sidebar.collapsed .sidebar-bottom .who{justify-content:center;}
.main-content{flex:1; min-width:0;}

/* =====================================================================
   Responsive — three ranges: desktop (default), tablet (≤1024), phone
   (≤640). The sidebar goes vertical → horizontal strip on tablet, and
   a horizontal scroll rail on phone. Tables always scroll inside their
   own box rather than pushing the page sideways.
   ===================================================================== */

/* ---- Tablet ---- */
@media (max-width:1024px){
  #root{padding:14px 16px 72px;}
  .app-shell{flex-direction:column; gap:12px;}
  .sidebar{
    width:100%; position:sticky; top:0; z-index:20; max-height:none; flex-direction:column;
    border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-md);
  }
  .sidebar.collapsed{width:100%;}
  .sidebar.collapsed .sidebar-text{display:inline;}
  .sidebar-top{padding:10px 12px;}
  .sidebar-toggle-btn{display:none;}
  .sidebar-nav{
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    gap:4px; padding:8px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .sidebar-item{width:auto; flex:none; padding:8px 12px; border-radius:20px; font-size:12.5px;}
  .sidebar-item.active{box-shadow:none; background:var(--green-wash); border:1px solid var(--green-light);}
  .sidebar-bottom{display:flex; align-items:center; gap:10px; border-top:1px solid var(--border); padding:8px 12px;}
  .sidebar-bottom .who{margin-bottom:0;}
  .sidebar-bottom #logout-btn{width:auto !important;}
  .cards-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));}
}

/* ---- Phone ---- */
@media (max-width:640px){
  :root{--tap:44px;}
  #root{padding:10px 12px 84px;}
  h1{font-size:20px;}
  .lattice{margin:6px 0 12px;}
  /* sidebar scrolls away with the page on a phone; the sub-tabs are the
     thing worth pinning instead */
  .sidebar{position:static;}

  /* Stop iOS from zooming the viewport when a small input gets focus. */
  input[type=text], input[type=email], input[type=password], input[type=date],
  input[type=month], input[type=number], input[type=time], select, textarea{font-size:16px; padding:10px 12px;}

  /* Comfortable tap targets */
  button{min-height:var(--tap); padding:9px 14px;}
  .btn-ghost, .btn-gold, .btn-green, .btn-danger{min-height:var(--tap);}
  .icon-btn{min-width:var(--tap); min-height:var(--tap);}
  .link-btn{min-height:28px;}
  .tab-btn{min-height:38px; padding:8px 14px;}
  .sidebar-item{min-height:38px;}

  .tabs{position:sticky; top:0; z-index:15; box-shadow:0 4px 8px -6px rgba(31,36,34,0.25);}
  .card{padding:14px 13px;}
  .card-head h3, .card h3{font-size:15px;}
  .cards-grid{grid-template-columns:1fr; gap:10px;}
  .top-bar{flex-direction:column; align-items:stretch; gap:10px;}
  .header-row{align-items:flex-start;}

  /* Tables: keep them on ONE horizontal scroller, never widen the page. */
  .summary-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; border-radius:var(--radius-sm);}
  .summary-table thead th{position:sticky; top:0;}
  .perf-summary{grid-template-columns:repeat(auto-fit, minmax(46%, 1fr));}
  .perf-summary-item .big{font-size:21px;}
  .heatmap-label{width:64px; font-size:11.5px;}
  .heatmap-cell{width:12px; height:12px;}

  .modal-panel-inner, .modal-box{padding:18px 16px;}
  #toast{left:12px; right:12px; transform:translateY(16px); max-width:none;}
  #toast.show{transform:translateY(0);}
  .app-shell{gap:8px;}
}

/* Very small phones */
@media (max-width:380px){
  #root{padding:8px 9px 84px;}
  .brand-eyebrow{font-size:10px;}
  .perf-summary{grid-template-columns:1fr;}
}

/* ---------- Courier logos (brand-colour wordmarks) ---------- */
.cl-logo{display:inline-flex; align-items:center; justify-content:center; flex:none; font-family:Inter,system-ui,sans-serif;
  font-weight:800; letter-spacing:.02em; border-radius:7px; white-space:nowrap; line-height:1; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.cl-logo.sm{height:20px; min-width:20px; padding:0 6px; font-size:9.5px; border-radius:5px;}
.cl-logo.md{height:30px; min-width:30px; padding:0 9px; font-size:11.5px;}
.cl-logo.lg{height:40px; min-width:40px; padding:0 12px; font-size:14px; border-radius:9px;}
.cl-logo img{height:70%; max-width:100%; object-fit:contain;}
.cl-inline{display:inline-flex; align-items:center; gap:6px; vertical-align:middle;}

/* ---------- Rate comparison ---------- */
.rate-highlights{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:6px 0 12px;}
.rate-hl{border:1.5px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--surface); cursor:pointer; text-align:left;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); font:inherit; color:inherit;}
.rate-hl:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.rate-hl .hl-kicker{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:6px; margin-bottom:6px;}
.rate-hl .hl-value{font-size:24px; font-weight:800; line-height:1.1; font-family:'IBM Plex Mono',monospace;}
.rate-hl .hl-who{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; font-weight:600;}
.rate-hl.price{border-color:#9BC7AC; background:linear-gradient(180deg,#F1F8F3,#fff);} .rate-hl.price .hl-kicker{color:var(--green);}
.rate-hl.fast{border-color:#A9C6DD; background:linear-gradient(180deg,#EEF5FA,#fff);} .rate-hl.fast .hl-kicker{color:var(--info);}
.rate-hl.prio{border-color:#E3C77F; background:linear-gradient(180deg,#FCF6E6,#fff);} .rate-hl.prio .hl-kicker{color:var(--gold-deep);}
.rate-sort{display:inline-flex; background:var(--surface-sunk); border-radius:999px; padding:3px; gap:2px; margin-bottom:8px;}
.rate-sort button{border:none; background:none; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.rate-sort button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.rate-cards{display:grid; gap:8px;}
.rate-card{display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:12px; padding:11px 14px; border:1.5px solid var(--border);
  border-radius:12px; background:var(--surface); cursor:pointer; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
.rate-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-sm);}
.rate-card.selected{border-color:var(--green); box-shadow:0 0 0 3px rgba(46,107,76,.14); background:#FBFDFB;}
.rate-card input[type=radio]{width:18px; height:18px; margin:0; accent-color:var(--green);}
.rate-card .rc-name{font-size:14.5px; font-weight:700; line-height:1.25;}
.rate-card .rc-sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.rate-card .rc-badges{display:flex; flex-wrap:wrap; gap:4px; margin-top:5px;}
.rate-card .rc-eta{text-align:right; min-width:96px;}
.rate-card .rc-eta .d{font-size:17px; font-weight:800; line-height:1.1;}
.rate-card .rc-eta .s{font-size:10.5px; color:var(--ink-faint);}
.rate-card .rc-price{text-align:right; min-width:92px;}
.rate-card .rc-price .p{font-size:22px; font-weight:800; font-family:'IBM Plex Mono',monospace; line-height:1.1;}
.rate-card .rc-price .s{font-size:10.5px; color:var(--ink-faint);}
.rate-card .rc-price .contract{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.rbadge{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.rbadge.price{background:#DFF1E5; color:#1E6B3F;} .rbadge.fast{background:var(--info-wash); color:var(--info);}
.rbadge.prio{background:var(--gold-wash); color:var(--gold-deep);} .rbadge.warn{background:var(--amber-wash); color:var(--amber);}
.rbadge.src{background:var(--surface-sunk); color:var(--ink-soft); font-weight:600;}
.rate-hidden{margin-top:10px; border:1px dashed var(--border-strong); border-radius:10px; padding:8px 12px; font-size:12px; color:var(--ink-soft);}
.rate-hidden summary{cursor:pointer; font-weight:600;}
.rate-hidden .rh-row{display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid var(--border);}
.rate-hidden .rh-row:first-of-type{border-top:none;}
/* Overlap fixes: rate cards are <label>s (don't inherit form-label styles), and
   long courier/partner names must wrap instead of pushing columns over each other. */
.rate-card{margin:0; font-size:13px; font-weight:400; color:var(--ink); letter-spacing:normal;}
.rate-card > div{min-width:0;}
.rate-card .rc-name, .rate-card .rc-sub{overflow-wrap:anywhere;}
.rate-hl{min-width:0; overflow:hidden;}
.rate-hl .hl-who{flex-wrap:wrap; min-width:0; overflow-wrap:anywhere;}
.cl-logo{max-width:150px; overflow:hidden; text-overflow:ellipsis;}
.bs-pick .bp-main{min-width:0; flex:1;}
.bs-pick .bp-name{overflow-wrap:anywhere;}
.ship-dialog-head{padding-right:40px;}
.sd-footer{border-top:1px solid var(--border); padding:12px 0 4px; margin-top:8px; display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;}
.sd-footer .field{flex:1 1 260px; min-width:0; margin:0;}
.sd-footer select{width:100%;}
@media (max-width:640px){
  .rate-card{grid-template-columns:auto auto 1fr; row-gap:6px;}
  .rate-card .rc-eta, .rate-card .rc-price{grid-column:3; text-align:left;}
}

/* Bulk-ship per-order pick */
.bs-pick{display:flex; align-items:center; gap:8px; min-width:230px;}
.bs-pick .bp-main{line-height:1.2;}
.bs-pick .bp-name{font-size:12.5px; font-weight:700;}
.bs-pick .bp-meta{font-size:11px; color:var(--ink-soft);}
.bs-pick .bp-price{font-size:15px; font-weight:800; font-family:'IBM Plex Mono',monospace;}
.prio-chain{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.prio-step{display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px 10px 3px 4px; font-size:12px; font-weight:600;}
.prio-step .n{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--gold-wash); color:var(--gold-deep); font-size:11px; font-weight:800;}

img.zoomable{cursor:zoom-in;}

/* Compact agent panels (Assign Tasks) — click to expand */
.agent-panel{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .15s, border-color .15s; align-self:start;}
.agent-panel:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.agent-panel[open]{border-color:var(--gold); box-shadow:var(--shadow-md);}
.agent-panel > summary{list-style:none; display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; user-select:none;}
.agent-panel > summary::-webkit-details-marker{display:none;}
.ap-avatar{width:42px; height:42px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; overflow:hidden;}
.ap-avatar img{width:100%; height:100%; object-fit:cover;}
.ap-who{flex:1; min-width:0;}
.ap-name{font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ap-role{font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ap-bar{height:5px; background:var(--surface-sunk); border-radius:3px; margin-top:6px; overflow:hidden;}
.ap-bar span{display:block; height:100%; background:var(--green,#2E7D4F); border-radius:3px;}
.ap-stats{display:flex; flex-direction:column; align-items:flex-end; gap:4px;}
.ap-count{font-family:'IBM Plex Mono',monospace; font-weight:800; font-size:14px; background:var(--surface-sunk); padding:2px 8px; border-radius:999px;}
.ap-count.all-done{background:#DFF1E5; color:#1E6B3F;}
.ap-chip{font-size:10.5px; font-weight:700; color:var(--clay); background:var(--clay-wash); padding:1px 7px; border-radius:999px;}
.ap-chev{color:var(--ink-faint); transition:transform .2s;}
.agent-panel[open] .ap-chev{transform:rotate(180deg);}
.ap-body{padding:4px 14px 14px; border-top:1px solid var(--border);}
@media (max-width:640px){ .agent-panel > summary{padding:12px;} .ap-avatar{width:38px; height:38px;} }

/* Section panels (employee dashboard + admin tab cards) — same look, full width */
.emp-panels{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.emp-panel{overflow:visible; scroll-margin-top:12px; align-self:stretch;} /* visible: in-section dropdowns / sticky bars must not be clipped */
.emp-panel-icon{width:38px; height:38px; border-radius:10px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--green-wash); color:var(--green-deep); font-size:16px;}
.emp-panel[open] .emp-panel-icon{background:var(--green); color:#fff;}
.emp-panel > .ap-body{padding-top:12px;}
/* Some sections draw nothing when there's no data — say so instead of an empty panel */
.emp-panel > .ap-body > div[data-empty]:empty::before{content:attr(data-empty); display:block; padding:6px 2px; font-size:13px; color:var(--ink-soft);}
.emp-panel > .ap-body > div > .card:last-child,
.emp-panel > .ap-body > div > .task-list-card:last-child{margin-bottom:0;}
@media (max-width:640px){ .emp-panel-icon{width:34px; height:34px; font-size:14px;} .emp-panel > .ap-body{padding:10px 10px 12px;} }

/* Admin tab cards wrapped by panelizeTabCards(): the panel is the chrome now,
   so the inner card goes flat and its own heading (shown in the summary) hides. */
.tab-panel{margin-bottom:10px;}
.tab-panel > .ap-body > .card{border:none; box-shadow:none; background:transparent; padding:0; margin:0; border-radius:0;}
.tab-panel > .ap-body > .card > h3:first-child,
.tab-panel > .ap-body > :is(h2,h3):first-child{display:none;}
.tab-panel > .ap-body > .card > .header-row:first-child > h3:first-child,
.tab-panel > .ap-body > .card > .header-row:first-child > h2:first-child{display:none;}
.tab-panel > .ap-body > .card > .header-row:first-child:has(> :is(h2,h3):only-child){display:none;}
.tab-panel > .ap-body > .card > .header-row:first-child{justify-content:flex-end;}

/* Company Profile's collapsible sections — same panel feel */
details.settings-section{border-radius:14px; transition:box-shadow .15s, border-color .15s;}
details.settings-section:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong);}
details.settings-section[open]{border-color:var(--gold); box-shadow:var(--shadow-md);}

/* Shopify order tags (orderTagChips) — all tags, wrapping; alert tags red */
.tag-chips{display:inline-flex; flex-wrap:wrap; gap:3px; max-width:220px;}
.flag-chip.tag-alert{background:var(--clay-wash); color:var(--clay); font-weight:700;}

/* Duplicate / repeat-customer references */
.dup-flag{display:inline-flex; flex-direction:column; gap:2px; vertical-align:top;}
.dup-ref{font-size:10.5px; color:var(--clay); white-space:nowrap;}
.dup-ref .link-btn{font-size:10.5px; font-weight:700;}

/* =====================================================================
   Presentation pass (2026-10-09) — no text off-screen, bigger product
   images, clearer order status, calmer + richer panels.
   ===================================================================== */

/* ---- Tables never push the page sideways: they scroll in their own box.
   ensureTableScroller() in app.js wraps any bare .summary-table. ---- */
.table-wrap, .table-scroll-host{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  border-radius:var(--radius);
}
.table-wrap{margin-bottom:2px;}
.table-wrap > .summary-table{margin:0;}
.main-content, .card, .drill-panel, .agent-panel, .tab-panel, .ap-body{min-width:0;}
.card, .drill-panel, .ap-body, .modal-panel-inner{overflow-wrap:break-word;}
.summary-table td{overflow-wrap:break-word; vertical-align:middle;}
.summary-table th{white-space:nowrap;}
.subtle, .flag-chip, .rbadge{overflow-wrap:break-word;}
.flag-chip{max-width:100%; white-space:normal;}
/* Phone: the wrapper scrolls now, so the table can stay a real table. */
@media (max-width:640px){
  .table-wrap > .summary-table, .table-scroll-host > .summary-table{display:table; overflow:visible;}
  .summary-table td.cell-wrap{white-space:normal; min-width:130px;}
}

/* ---- Order tables ---- */
.order-table td{vertical-align:middle;}
.order-table tbody tr:hover{background:#FCF9F2;}
.order-table tr.row-cancelled td{opacity:.62;}
.order-table .order-no{font-weight:700; font-size:13.5px; text-decoration:none; color:var(--green-deep); font-family:'IBM Plex Mono',monospace;}
.order-table .order-no:hover{color:var(--gold); text-decoration:underline;}
.cell-main{font-weight:600; line-height:1.25;}
.cell-sub{font-size:11px; color:var(--ink-soft); margin-top:2px; line-height:1.25;}
.cell-wrap{min-width:140px; max-width:240px; white-space:normal;}
.cell-tags{max-width:230px; white-space:normal;}
.cell-chips{min-width:120px; max-width:220px; white-space:normal;}
.cell-chips .pchip{margin:0 4px 4px 0;}
.cell-actions{white-space:nowrap; text-align:right;}
.cell-actions .icon-btn{font-size:13px; color:var(--ink-soft); border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:var(--surface);}
.cell-actions .icon-btn:hover{background:var(--gold-wash); color:var(--gold-deep); border-color:var(--gold-light);}
.cell-actions .icon-btn.danger:hover{background:var(--clay-wash); color:var(--clay); border-color:var(--clay);}

/* ---- Product thumbnails (orderThumbStack) — large enough to recognise ---- */
.thumb-stack{display:flex; align-items:center; padding:3px 0;}
.thumb-item{position:relative; flex:none;}
.thumb-item + .thumb-item{margin-left:calc(var(--thumb, 96px) * -0.28);}
.thumb-item img, .thumb-ph{
  width:var(--thumb, 96px); height:var(--thumb, 96px); border-radius:12px; display:block;
  object-fit:cover; border:2px solid var(--surface); background:var(--surface-sunk);
  box-shadow:0 2px 8px rgba(31,36,34,.14), 0 0 0 1px rgba(31,36,34,.06);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.thumb-item:hover{z-index:20 !important;}
.thumb-item:hover img{transform:scale(1.06); box-shadow:0 8px 22px rgba(31,36,34,.22);}
.thumb-ph{display:flex; align-items:center; justify-content:center; color:var(--border-strong); font-size:calc(var(--thumb, 96px) * .3);}
.thumb-qty{
  position:absolute; bottom:-4px; right:-4px; background:var(--ink); color:#fff; font-size:11px; font-weight:800;
  padding:1px 7px; border-radius:999px; line-height:1.5; box-shadow:0 0 0 2px var(--surface);
}
.thumb-more{
  flex:none; margin-left:8px; font-size:11.5px; font-weight:700; color:var(--ink-soft);
  background:var(--surface-sunk); border-radius:999px; padding:3px 9px;
}

/* ---- Order status pills (Pending / Processed / Completed / All / Cancelled) ---- */
.status-pills{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.status-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px 8px 14px; border-radius:999px;
  background:var(--surface); border:1.5px solid var(--border); color:var(--ink-soft); font-weight:600; font-size:12.5px;
  box-shadow:var(--shadow-sm); min-width:0;
}
.status-pill i{font-size:12px; opacity:.8;}
.status-pill:hover{border-color:var(--border-strong); color:var(--ink); box-shadow:var(--shadow-md);}
.status-pill .sp-label{white-space:nowrap;}
.status-pill .sp-count{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; background:var(--surface-sunk);
  color:var(--ink); border-radius:999px; padding:1px 9px; min-width:26px; text-align:center;
}
.status-pill.active{color:#fff; border-color:transparent; box-shadow:0 3px 10px rgba(31,36,34,.18);}
.status-pill.active i{opacity:1;}
.status-pill.active .sp-count{background:rgba(255,255,255,.22); color:#fff;}
.status-pill.sp-pending.active{background:linear-gradient(180deg, var(--gold-light), var(--gold));}
.status-pill.sp-processed.active{background:linear-gradient(180deg, #4A80A8, var(--info));}
.status-pill.sp-completed.active{background:linear-gradient(180deg, var(--green-light), var(--green));}
.status-pill.sp-all.active{background:linear-gradient(180deg, #46504C, var(--ink));}
.status-pill.sp-cancelled.active{background:linear-gradient(180deg, #C85B43, var(--clay));}
@media (max-width:640px){
  .status-pills{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
  .status-pill{flex:none;}
}

/* ---- Where-the-order-stands chip (orderProcessChip) ---- */
.pchip{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:999px; white-space:nowrap; letter-spacing:.01em; border:1px solid transparent;
}
.pchip.pc-new{background:var(--gold-wash); color:var(--gold-deep); border-color:#EBD49A;}
.pchip.pc-printed{background:var(--info-wash); color:var(--info); border-color:#BCD3E5;}
.pchip.pc-shipped{background:#E8E4F7; color:#4B3A99; border-color:#CFC6EE;}
.pchip.pc-done{background:var(--green-wash); color:var(--green-deep); border-color:#B9D6C4;}
.pchip.pc-cancelled{background:var(--clay-wash); color:var(--clay); border-color:rgba(180,70,47,.3);}

/* ---- Order progress stepper: a little bolder ---- */
.stage-stepper{min-width:120px;}
.stage-step-dot{width:20px; height:20px; font-size:9px;}
.stage-step-line{height:3px; min-width:10px;}
.stage-step-label{font-size:11px; font-weight:600; color:var(--ink-soft); white-space:normal;}

/* ---- Shipping tab: To ship / Printed-Processed switch ---- */
.ship-views{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; margin-bottom:14px;}
.ship-view{
  display:flex; align-items:center; gap:12px; text-align:left; justify-content:flex-start; padding:14px 16px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:14px; color:var(--ink);
  box-shadow:var(--shadow-sm); font-weight:500; min-width:0;
}
.ship-view:hover{border-color:var(--border-strong); box-shadow:var(--shadow-md);}
.ship-view .sv-icon{
  width:44px; height:44px; border-radius:12px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-sunk); color:var(--ink-soft); font-size:18px;
}
.ship-view .sv-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ship-view .sv-title{font-size:14.5px; font-weight:700;}
.ship-view .sv-sub{font-size:11.5px; color:var(--ink-soft); white-space:normal; line-height:1.3;}
.ship-view .sv-count{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:800; flex:none;}
.ship-view.active[data-bs-view="toship"]{border-color:var(--gold); background:linear-gradient(180deg, var(--gold-wash), var(--surface) 70%); box-shadow:0 0 0 3px rgba(174,127,12,.12), var(--shadow-sm);}
.ship-view.active[data-bs-view="toship"] .sv-icon{background:var(--gold); color:#fff;}
.ship-view.active[data-bs-view="processed"]{border-color:var(--info); background:linear-gradient(180deg, var(--info-wash), var(--surface) 70%); box-shadow:0 0 0 3px rgba(58,107,143,.12), var(--shadow-sm);}
.ship-view.active[data-bs-view="processed"] .sv-icon{background:var(--info); color:#fff;}

/* Segmented switch (print centre source etc.) */
.seg-switch{display:inline-flex; flex-wrap:wrap; background:var(--surface-sunk); border-radius:999px; padding:3px; gap:2px; max-width:100%;}
.seg-switch button{background:none; border:none; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.seg-switch button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.seg-switch .seg-n{font-family:'IBM Plex Mono',monospace; font-size:11px; background:var(--surface-sunk); border-radius:999px; padding:0 7px; margin-left:2px;}
.seg-switch button.active .seg-n{background:var(--gold-wash); color:var(--gold-deep);}

/* ---- General panel polish ---- */
.card{border-radius:12px;}
.card > h3:first-child, .card .header-row h3{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card > h3:first-child > i, .card .header-row h3 > i{color:var(--gold);}
.summary-table th{padding-top:10px; padding-bottom:10px;}
.summary-table tbody tr:nth-child(even){background:rgba(250,247,240,.55);}
.summary-table tbody tr:hover{background:#FCF9F2;}
.perf-summary-item{border-radius:12px; transition:box-shadow .16s var(--ease), transform .16s var(--ease);}
.perf-summary-item:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.perf-controls > *{min-width:0;}
.perf-controls input, .perf-controls select{width:auto; max-width:100%;}
.tabs{scroll-snap-type:x proximity;}
.tab-btn{scroll-snap-align:start;}
.drill-panel{border-radius:12px;}
.task-row{min-width:0;}
.task-row .task-text{min-width:0; overflow-wrap:anywhere;}
.cl-inline{flex-wrap:wrap;}

/* Order detail product rows: bigger images */
.drill-panel .task-row img.zoomable{width:110px !important; height:110px !important; border-radius:12px !important; box-shadow:0 2px 8px rgba(31,36,34,.12);}
.order-table td:has(> .thumb-stack){width:1%; white-space:nowrap;}

/* ---- Shipping worklist: filters, bulk-action bar, selection ---- */
.ws-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;}
.ws-filters select, .ws-filters input[type=date]{width:auto; max-width:230px;}
.ws-filters .ws-search{flex:1 1 240px; min-width:200px; width:auto;}
.ws-date{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:11.5px; white-space:nowrap;}
.bulk-bar{
  position:sticky; top:0; z-index:12; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 12px; margin-bottom:10px; border-radius:12px; background:var(--surface);
  border:1.5px dashed var(--border-strong); transition:background .15s var(--ease), border-color .15s var(--ease);
}
.bulk-bar.has-sel{background:var(--gold-wash); border:1.5px solid var(--gold-light); box-shadow:0 4px 14px rgba(174,127,12,.14);}
.bulk-bar .bb-count{font-size:13px; display:inline-flex; align-items:center; gap:6px;}
.bulk-bar .bb-count i{color:var(--gold);}
.ship-worklist tr.row-selected td{background:#FFF8E6;}
.ship-worklist td{vertical-align:top;}
.ship-worklist td:first-child{vertical-align:middle;}
.ship-worklist input[type=checkbox]{width:18px !important; height:18px; accent-color:var(--gold);}
.age-chip{display:inline-block; font-size:10px; font-weight:700; padding:0 6px; border-radius:999px; background:var(--green-wash); color:var(--green-deep); margin-left:2px;}
.age-chip.mid{background:var(--amber-wash); color:var(--amber);}
.age-chip.old{background:var(--clay-wash); color:var(--clay);}
@media (max-width:640px){ .bulk-bar{position:static;} .ws-filters select, .ws-filters input[type=date]{max-width:100%;} }

/* ---- Initial setup (bulk close) ---- */
.setup-card{border-left:4px solid var(--green);}
.setup-options{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:10px;}
.setup-opt{border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--cream); display:flex; flex-direction:column; gap:6px; min-width:0;}
.setup-opt .so-head{font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:7px;}
.setup-opt .so-head i{color:var(--green);}
.setup-opt .so-body{font-size:12px; color:var(--ink-soft); flex:1;}
.setup-opt .so-foot{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.setup-opt .so-n{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:800; color:var(--green-deep);}
.setup-opt .so-foot button{margin-left:auto;}
.setup-hint{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:9px 12px; border-radius:10px; background:var(--cream-dark); font-size:12.5px;}
.setup-hint > span{flex:1; min-width:200px;}
.bc-summary{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px 0 4px;}
.bc-summary > div{background:var(--surface-sunk); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column;}
.bc-summary .bc-n{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:800;}
.bc-summary .bc-l{font-size:11px; color:var(--ink-soft);}
@media (max-width:480px){ .bc-summary{grid-template-columns:1fr;} }
.thumb-ph{color:var(--ink-faint); background:repeating-linear-gradient(45deg, var(--surface-sunk), var(--surface-sunk) 8px, var(--cream) 8px, var(--cream) 16px);}

/* =====================================================================
   Employee workspace (2026-10-09) — same shape as the admin Order
   Pipeline: hero + KPI tiles, one section on screen at a time under a
   rich header, Pipeline-style order tables. Phones get a bottom tab bar,
   a "More" sheet and order rows as stacked cards.
   ===================================================================== */

/* ---- Hero ---- */
.emp-hero{margin-bottom:4px;}
.eh-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.eh-who{min-width:0;}
.eh-who h1{margin-top:3px; font-size:26px;}
.eh-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:6px; font-size:12.5px; color:var(--ink-soft);}
.eh-meta > span:first-child{display:inline-flex; align-items:center; gap:6px; margin-right:4px;}
.eh-meta .role-chip{margin:0; background:var(--green-wash); color:var(--green-deep);}
.eh-actions{display:none; align-items:center; gap:6px; flex:none;}
.eh-bell{position:relative; font-size:17px; color:var(--ink-soft); border:1px solid var(--border); background:var(--surface); border-radius:12px;}
.eh-bell[data-badge]:not([data-badge=""])::after{
  content:attr(data-badge); position:absolute; top:-5px; right:-5px; background:var(--clay); color:#fff;
  font-size:9.5px; font-weight:800; line-height:1; padding:3px 5px; border-radius:999px; box-shadow:0 0 0 2px var(--cream);
}
.eh-logout span{display:none;}

/* ---- KPI tiles ---- */
.emp-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:14px;}
.emp-kpi{
  display:flex; align-items:center; gap:12px; text-align:left; justify-content:flex-start; min-width:0;
  padding:13px 15px; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--gold);
  border-radius:14px; box-shadow:var(--shadow-sm); color:var(--ink); font-weight:400;
}
.emp-kpi:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.emp-kpi.active{border-color:var(--gold); box-shadow:0 0 0 3px rgba(174,127,12,.12), var(--shadow-sm);}
.ek-icon{width:42px; height:42px; flex:none; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--gold-wash); color:var(--gold-deep); font-size:17px;}
.ek-text{display:flex; flex-direction:column; min-width:0;}
.ek-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ek-value{font-family:'Playfair Display',Georgia,serif; font-size:24px; font-weight:700; line-height:1.15; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ek-sub{font-size:11.5px; color:var(--ink-soft); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.emp-kpi[data-tone="good"]{border-left-color:var(--green);}
.emp-kpi[data-tone="good"] .ek-icon{background:var(--green-wash); color:var(--green);}
.emp-kpi[data-tone="warn"]{border-left-color:var(--amber);}
.emp-kpi[data-tone="warn"] .ek-icon{background:var(--amber-wash); color:var(--amber);}
.emp-kpi[data-tone="alert"]{border-left-color:var(--clay);}
.emp-kpi[data-tone="alert"] .ek-icon{background:var(--clay-wash); color:var(--clay);}
.emp-kpi[data-tone="alert"] .ek-value{color:var(--clay);}
.emp-hero .lattice{margin:14px 0 14px;}

/* ---- Sections: one at a time ---- */
.emp-view{display:none;}
.emp-view.active{display:block;}
@media (prefers-reduced-motion: no-preference){ .emp-view.active{animation:emp-view-in .22s var(--ease);} }
@keyframes emp-view-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.emp-view-head{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px;
  background:linear-gradient(110deg, var(--green-wash), var(--surface) 70%); border:1px solid #CFE2D6;
  border-radius:16px; box-shadow:var(--shadow-sm);
}
.evh-icon{width:48px; height:48px; flex:none; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#fff; font-size:20px; box-shadow:0 4px 12px rgba(46,107,76,.25);}
.evh-text{flex:1; min-width:0;}
.evh-text h2{font-size:21px; line-height:1.2;}
.evh-hint{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.evh-chip{font-family:'IBM Plex Mono',monospace; font-weight:800; font-size:15px; background:var(--surface); border:1px solid var(--border); color:var(--ink); padding:4px 12px; border-radius:999px; flex:none;}
.evh-chip.all-done{background:#DFF1E5; color:#1E6B3F; border-color:#B9D6C4;}
.emp-view-body{min-width:0;}
.emp-view-body:empty::before{
  content:attr(data-empty); display:block; text-align:center; padding:34px 18px; color:var(--ink-soft);
  background:var(--surface-sunk); border:1px dashed var(--border-strong); border-radius:var(--radius);
}
.emp-view-body > .card, .emp-view-body > .task-list-card{margin-bottom:14px;}

/* Sidebar count chip */
.sidebar-item .nav-chip{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:800; background:var(--surface-sunk); color:var(--ink-soft); padding:1px 7px; border-radius:999px;}
.sidebar-item.active .nav-chip{background:var(--green); color:#fff;}
.sidebar-item .nav-chip.all-done{background:#DFF1E5; color:#1E6B3F;}

/* ---- Order queue (Pipeline look) ---- */
.pq-scan{margin-bottom:14px;}
.pq-scan-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:10px;}
.pq-scan-icon{width:40px; height:40px; flex:none; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--green); color:#fff; font-size:17px;}
.pq-scan-head h3{font-size:16px;}
.pq-scan-head .subtle{font-size:12.5px; margin-top:2px;}
.pq-scan-row{display:flex; gap:8px; flex-wrap:wrap;}
.pq-scan-row input{flex:1 1 240px; min-width:0;}
.pq-note{font-size:11.5px; color:var(--ink-soft); margin-top:8px;}
.pq-feedback{font-size:12.5px; font-weight:600; margin-top:8px; min-height:1px;}
.pq-feedback:empty{display:none;}
.pq-session{margin-top:10px; max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; background:var(--surface);}
.pq-board{margin-bottom:14px;}
.pq-board-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.pq-board-head h3{font-size:17px; display:flex; align-items:center; gap:8px;}
.pq-board-head h3 i{color:var(--gold);}
.pq-board-head .subtle{font-size:12.5px; margin-top:3px;}
.pq-board-actions{display:flex; gap:8px; flex-wrap:wrap;}
.pq-board-actions button{font-size:12px; padding:7px 12px;}
.status-pill.sp-stage.active{background:linear-gradient(180deg, var(--green-light), var(--green));}
.status-pill.sp-urgent{border-color:rgba(180,70,47,.35); color:var(--clay);}
.status-pill.sp-urgent.active{background:linear-gradient(180deg, #C85B43, var(--clay)); color:#fff;}
.pq-explain{display:block; font-size:12.5px; color:var(--ink-soft); background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin-bottom:10px;}
.pq-explain i{color:var(--info); margin-right:6px;}
.pq-pager{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:12px;}
.pq-pager button{font-size:12px; padding:6px 11px;}
.pq-filters .pq-search{flex:1 1 260px; min-width:0;}
.sla-over{color:var(--clay); font-weight:700;}
.order-table tr.row-hot td:first-child{box-shadow:inset 3px 0 0 var(--clay);}
.adv-check{display:inline-flex; flex-direction:column; align-items:center; gap:3px; margin:0; cursor:pointer; font-size:10px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.adv-check input{width:22px !important; height:22px; accent-color:var(--green); margin:0; cursor:pointer;}
.scan-lead{display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; background:var(--green-wash); color:var(--green-deep);}

/* ---- Bottom tab bar + "More" sheet (phones only) ---- */
.emp-bottom-nav{display:none;}
.emp-more-sheet{display:none;}

/* ---- Tablet ---- */
@media (max-width:1024px){
  /* The shell stacks vertically here with align-items:flex-start, which let
     .main-content grow to its content's width (944px on a 390px phone) and
     pushed every page sideways — admin and employee alike. */
  .app-shell > .main-content{align-self:stretch; width:100%;}
  .emp-kpis{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* ---- Phone ---- */
@media (max-width:640px){
  #root:has(.emp-shell){padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  .emp-shell .sidebar{display:none;}
  .eh-actions{display:flex;}
  .eh-who h1{font-size:21px;}
  .eh-meta{font-size:11.5px;}
  .emp-kpis{display:flex; overflow-x:auto; gap:8px; margin:12px -12px 0; padding:0 12px 4px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .emp-kpis::-webkit-scrollbar{display:none;}
  .emp-kpi{flex:0 0 72%; max-width:250px; scroll-snap-align:start; padding:11px 12px;}
  .ek-icon{width:36px; height:36px; font-size:15px; border-radius:10px;}
  .ek-value{font-size:20px;}
  .emp-hero .lattice{margin:10px 0 12px;}
  .emp-view-head{padding:11px 12px; gap:11px; border-radius:14px; margin-bottom:12px;}
  .evh-icon{width:40px; height:40px; font-size:17px; border-radius:12px;}
  .evh-text h2{font-size:18px;}
  .evh-hint{font-size:11.5px;}
  .pq-scan-row button{flex:1 1 auto;}
  .pq-scan-row #scan-finish-btn{flex-basis:100%;}
  .pq-board-actions{width:100%;}
  .pq-board-actions button{flex:1 1 auto;}
  .pq-filters select, .pq-filters input{flex:1 1 45%;}
  .emp-shell .status-pills{scrollbar-width:none;}
  .emp-shell .status-pills::-webkit-scrollbar{display:none;}

  /* Bottom tab bar */
  .emp-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:250;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--border); box-shadow:0 -6px 20px rgba(31,36,34,.08);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .ebn-item{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; padding:6px 2px; min-height:52px; border-radius:12px; color:var(--ink-faint);
    font-size:10.5px; font-weight:600;
  }
  .ebn-icon{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:28px; border-radius:999px; font-size:17px; transition:background .16s var(--ease);}
  .ebn-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
  .ebn-item.active{color:var(--green-deep);}
  .ebn-item.active .ebn-icon{background:var(--green-wash); color:var(--green);}
  .ebn-chip{position:absolute; top:-4px; right:-2px; font-size:9.5px; font-weight:800; line-height:1; padding:3px 5px; border-radius:999px; background:var(--clay); color:#fff; font-family:'IBM Plex Mono',monospace; box-shadow:0 0 0 2px #fff;}
  .ebn-chip.all-done{background:var(--green);}

  /* "More" sheet */
  .emp-more-sheet{display:block; position:fixed; inset:0; z-index:260; pointer-events:none;}
  .ems-backdrop{position:absolute; inset:0; background:rgba(22,35,47,.45); opacity:0; transition:opacity .2s var(--ease);}
  .ems-panel{
    position:absolute; left:0; right:0; bottom:0; max-height:82vh; overflow-y:auto; background:var(--cream);
    border-radius:20px 20px 0 0; padding:8px 14px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .26s var(--ease); box-shadow:var(--shadow-lg);
  }
  .emp-more-sheet.open{pointer-events:auto;}
  .emp-more-sheet.open .ems-backdrop{opacity:1;}
  .emp-more-sheet.open .ems-panel{transform:none;}
  .ems-grip{width:42px; height:5px; border-radius:3px; background:var(--border-strong); margin:4px auto 10px;}
  .ems-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:15px;}
  .ems-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .ems-item{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; justify-content:flex-start;
    background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; color:var(--ink); min-width:0;
  }
  .ems-item.active{border-color:var(--green); box-shadow:0 0 0 3px rgba(46,107,76,.12);}
  .ems-icon{width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--green-wash); color:var(--green-deep); font-size:15px; margin-bottom:2px;}
  .ems-item.active .ems-icon{background:var(--green); color:#fff;}
  .ems-label{font-size:13px; font-weight:700;}
  .ems-hint{font-size:11px; color:var(--ink-soft); font-weight:400; line-height:1.3; white-space:normal;}

  /* Order rows as stacked cards */
  .table-wrap:has(> .m-cards){overflow:visible;}
  .table-wrap > .summary-table.m-cards, .summary-table.m-cards{display:block; border:none; box-shadow:none; background:transparent; white-space:normal; overflow:visible;}
  .m-cards thead{display:none;}
  .m-cards tbody{display:block;}
  .m-cards tbody tr{
    display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; align-items:start;
    background:var(--surface) !important; border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:10px; box-shadow:var(--shadow-sm);
  }
  .m-cards tbody tr.row-hot{border-left:4px solid var(--clay);}
  .order-table.m-cards tr.row-hot td:first-child{box-shadow:none;}
  .m-cards td{display:block; padding:0; border:none !important; min-width:0; max-width:none; white-space:normal; grid-column:2;}
  .m-cards td.cell-thumbs{grid-column:1; grid-row:1 / span 3;}
  .m-cards td.cell-thumbs:empty{display:none;}
  .m-cards td.cell-tags, .m-cards td.cell-progress, .m-cards td.cell-chips, .m-cards td.cell-courier{grid-column:1 / -1;}
  .m-cards td.cell-lead{grid-column:1 / -1; order:99; border-top:1px solid var(--border) !important; padding-top:10px;}
  .m-cards td.cell-lead .adv-check{flex-direction:row; gap:10px; font-size:12px; width:100%; justify-content:center; padding:8px; border-radius:10px; background:var(--green-wash); color:var(--green-deep);}
  .m-cards td[data-label]:not([data-label=""])::before{content:attr(data-label); display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:2px;}
  .m-cards td.cell-order .order-no{font-size:15px;}
  .m-cards .stage-stepper{min-width:0;}
  .m-cards .tag-chips{max-width:none;}
  .m-cards tr.row-empty{display:block;}
  .m-cards tr.row-empty td{text-align:center;}
}

/* ===================== Universal search (Ctrl/⌘+K) ===================== */
.admin-topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.us-trigger{
  display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 460px;
  padding:9px 12px; background:var(--surface); color:var(--ink-faint); text-align:left;
  border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--shadow-sm); cursor:text;
  font-size:13.5px; font-weight:400; transition:border-color .15s, box-shadow .15s;
}
.us-trigger:hover{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); color:var(--ink-soft); background:var(--surface);}
.us-trigger > i{color:var(--ink-soft); font-size:14px;}
.us-trigger-text{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.us-trigger kbd, .us-foot kbd{
  font:600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink-soft);
  background:var(--surface-sunk); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:3px 6px;
}
.us-trigger.emp-search{margin-top:14px; width:100%; max-width:none; flex:none;}
.eh-search{display:none; font-size:16px; color:var(--ink-soft); border:1px solid var(--border); background:var(--surface); border-radius:12px;}

.us-overlay{
  position:fixed; inset:0; z-index:1100; background:rgba(22,30,27,0.45); backdrop-filter:blur(2px);
  display:flex; justify-content:center; align-items:flex-start; padding:9vh 16px 16px;
}
body.us-open{overflow:hidden;}
.us-panel{
  width:100%; max-width:720px; max-height:78vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
@media (prefers-reduced-motion: no-preference){ .us-panel{animation:modal-in .16s var(--ease);} }
.us-bar{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);}
.us-bar > i{color:var(--gold); font-size:16px;}
.us-bar input{flex:1; min-width:0; border:none !important; box-shadow:none !important; outline:none; padding:6px 0; font-size:16px; background:transparent;}
.us-bar input::-webkit-search-cancel-button{display:none;}
.us-spin{color:var(--ink-faint);}
.us-close{font:600 11px/1 ui-monospace, monospace; padding:5px 8px; background:var(--surface-sunk); color:var(--ink-soft); border:1px solid var(--border); border-radius:6px;}
.us-results{overflow-y:auto; padding:6px 6px 10px; flex:1;}
.us-group{margin-top:4px;}
.us-group-head{
  display:flex; align-items:center; gap:7px; padding:9px 10px 5px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-deep);
}
.us-count{margin-left:auto; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink-faint);}
.us-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:8px 10px;
  background:transparent; border:none; border-radius:10px; color:var(--ink); font-weight:400; box-shadow:none; cursor:pointer;
}
.us-item.active, .us-item:hover{background:var(--gold-wash);}
.us-item.active{box-shadow:inset 3px 0 0 var(--gold);}
.us-thumb{
  flex:none; width:38px; height:38px; border-radius:9px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-sunk); border:1px solid var(--border);
}
.us-thumb img{width:100%; height:100%; object-fit:cover;}
.us-thumb-icon{color:var(--ink-soft); font-size:15px;}
.us-avatar{border-radius:50%; background:var(--green-wash); color:var(--green-deep); font-weight:700; font-size:13px; border-color:transparent;}
.us-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.us-main{font-size:14px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.us-sub{font-size:12px; color:var(--ink-soft); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.us-dim{color:var(--ink-soft); font-weight:400;}
.us-right{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right;}
.us-right-main{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;}
.us-right-sub{font-size:11.5px; color:var(--ink-soft);}
.us-low{color:var(--clay);}
.us-item mark{background:#F8E3A3; color:inherit; border-radius:3px; padding:0 1px;}
.us-pill{display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--surface-sunk); color:var(--ink-soft); white-space:nowrap;}
.us-pill-green{background:var(--green-wash); color:var(--green-deep);}
.us-pill-red{background:var(--clay-wash); color:var(--clay);}
.us-empty{padding:34px 16px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center;}
.us-empty > i{font-size:22px; color:var(--ink-faint);}
.us-recent{display:flex; flex-wrap:wrap; gap:6px; padding:2px 10px 6px;}
.us-chip{font-size:12.5px; font-weight:500; padding:5px 10px; border-radius:999px; background:var(--surface-sunk); color:var(--ink-soft); border:1px solid var(--border); box-shadow:none;}
.us-chip:hover{border-color:var(--gold); color:var(--ink);}
.us-tips ul{margin:0; padding:0 12px 6px 30px; font-size:12.5px; color:var(--ink-soft); line-height:1.75;}
.us-foot{display:flex; gap:16px; padding:8px 14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-faint); background:var(--cream);}
.us-foot kbd{margin-right:3px; padding:2px 5px;}

/* Customer profile / product quick view (opened from search) */
.cp-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:14px;}
.cp-avatar{width:52px; height:52px; font-size:18px;}
.pq-img{width:72px; height:72px; border-radius:12px; object-fit:cover; border:1px solid var(--border); flex:none;}
.cp-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin-bottom:10px;}
.cp-tile{background:var(--cream); border:1px solid var(--border); border-radius:10px; padding:9px 11px;}
.cp-tile-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
.cp-tile-value{font-size:18px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums;}
.cp-tile.good .cp-tile-value{color:var(--green);}
.cp-tile.bad .cp-tile-value{color:var(--clay);}

/* Order-history import card */
.hi-months{display:flex; align-items:flex-end; gap:4px; overflow-x:auto; padding:6px 0 2px;}
.hi-month{display:flex; flex-direction:column; align-items:center; min-width:30px;}
.hi-bar{width:16px; background:var(--green-light); border-radius:4px 4px 0 0;}
.hi-mlabel{font-size:9.5px; color:var(--ink-faint); margin-top:3px;}
.hi-mcount{font-size:10px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.hi-quick{font-size:12px; color:var(--ink-soft); margin-bottom:8px;}
.hi-quick .link-btn{font-size:12px;}
.hi-status{font-size:12px; line-height:1.6; padding:8px 11px; border-radius:9px; background:var(--surface-sunk); border:1px solid var(--border); margin-top:6px;}
.hi-status.running{background:var(--gold-wash); border-color:#EED9A2;}
.hi-status.done{background:var(--green-wash); border-color:#C7DDCF;}
.hi-status.failed{background:var(--clay-wash); border-color:#EFC2B6;}

/* "New version available" bar */
.app-update-bar{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:1200; max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-radius:14px;
  background:var(--ink, #1F2422); color:#fff; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.app-update-bar .btn-gold{padding:6px 14px; font-size:12.5px;}
.app-update-x{background:none; border:none; color:#fff; opacity:.7; font-size:18px; padding:0 4px; box-shadow:none;}
@media (max-width:640px){ .app-update-bar{bottom:calc(92px + env(safe-area-inset-bottom));} }

/* Notification bell panel */
.notif-card{
  position:fixed; z-index:1050; width:360px; max-height:440px; display:flex; flex-direction:column; padding:0 !important; overflow:hidden;
  box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.18)); border:1px solid var(--border); border-radius:14px;
}
.notif-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px 6px;}
.notif-head h3{font-size:14px; margin:0; display:flex; align-items:center; gap:8px;}
.notif-count{font:600 11px/1 inherit; color:var(--clay); background:var(--clay-wash); padding:3px 7px; border-radius:999px; font-family:inherit;}
.notif-tabs{display:flex; gap:4px; padding:0 12px 8px; border-bottom:1px solid var(--border);}
.notif-tab{font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; background:transparent; color:var(--ink-soft); border:1px solid transparent; box-shadow:none;}
.notif-tab.active{background:var(--green-wash); color:var(--green-deep); border-color:#C7DDCF;}
.notif-list{overflow-y:auto; flex:1; padding:4px 6px 8px;}
.notif-item{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; padding:9px 8px; margin:0;
  background:transparent; border:none; border-radius:10px; color:var(--ink); font-weight:400; box-shadow:none; cursor:pointer; position:relative;
}
.notif-item:hover{background:var(--surface-sunk);}
.notif-item.unread{background:var(--gold-wash);}
.notif-item.unread:hover{background:#F6E7BE;}
.notif-icon{flex:none; width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-sunk); color:var(--ink-soft); font-size:13px;}
.notif-item.unread .notif-icon{background:var(--surface); color:var(--gold-deep);}
.notif-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.notif-title{font-size:12.5px; font-weight:600;}
.notif-item:not(.unread) .notif-title{font-weight:500; color:var(--ink-soft);}
.notif-msg{font-size:11.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.notif-meta{font-size:10.5px; color:var(--ink-faint);}
.notif-open{color:var(--green-deep); font-weight:600;}
.notif-dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--clay); margin-top:6px;}
.notif-empty{padding:28px 14px; text-align:center; font-size:12.5px; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:8px;}
.notif-empty > i{font-size:20px; color:var(--ink-faint);}
.notif-more{display:block; width:calc(100% - 8px); margin:6px 4px 0; font-size:12px;}

@media (max-width:640px){
  .us-overlay{padding:0; align-items:stretch;}
  .us-panel{max-width:none; max-height:none; height:100%; border-radius:0; border:none;}
  .us-foot{display:none;}
  .us-trigger kbd{display:none;}
  /* Keep the full search bar on phones too — the icon-only header button was
     too easy to miss, so agents reported search as "not available". */
  .us-trigger.emp-search{margin-top:10px; padding:11px 12px; font-size:14px;}
  .us-right-sub .us-pill{font-size:10px; padding:1px 6px;}
  .admin-topbar .us-trigger{flex:1 1 100%;}
}

/* ---- Exports / imports / business dashboard / EDPMS / label-printed (2026-10) ---- */
.tbl-tools{display:flex; justify-content:flex-end; margin:0 0 4px;}
.tbl-export-btn{background:none; border:1px solid var(--border); border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.tbl-export-btn:hover{background:var(--surface-sunk); color:var(--ink);}
.exp-menu{position:absolute; z-index:10050; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; min-width:190px;}
.exp-menu button{display:flex; align-items:center; gap:8px; width:100%; background:none; border:none; padding:8px 10px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left;}
.exp-menu button:hover{background:var(--surface-sunk);}
.exp-menu .fa-file-excel{color:#1d6f42;} .exp-menu .fa-file-csv{color:var(--ink-soft);}
.exp-note{font-size:11px; color:var(--ink-soft); padding:4px 10px 2px; border-top:1px solid var(--border); margin-top:4px;}
.imp-cols{display:flex; flex-wrap:wrap; gap:4px;}
.imp-col{font-size:11px; padding:2px 8px; border-radius:999px; background:var(--surface-sunk); color:var(--ink-soft);}
.imp-col.req{background:var(--green-wash); color:var(--green); font-weight:700;}
.imp-summary{display:flex; gap:6px; margin-bottom:8px;}

.lp-chip{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; white-space:nowrap;}
.lp-yes{background:var(--green-wash); color:var(--green);}
.lp-no{background:#FFF1D6; color:#8A5A00;}
.lp-portal{background:var(--surface-sunk); color:var(--ink-soft);}
tr.row-printed td{opacity:.55;}
tr.row-printed:hover td{opacity:.9;}
tr.row-attn td:first-child{box-shadow:inset 3px 0 0 #E0A100;}
.print-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.print-tabs button{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.print-tabs button.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.print-tabs .seg-n{margin-left:4px; font-variant-numeric:tabular-nums; opacity:.85;}

.biz-head .biz-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.biz-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin:12px 0;}
.biz-tile{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
.biz-tile .bt-label{font-size:12px; color:var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:6px;}
.biz-tile .bt-value{font-size:24px; font-weight:700; color:var(--ink); margin-top:2px; font-variant-numeric:tabular-nums;}
.biz-tile .bt-sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.biz-tile[data-tone="bad"] .bt-value{color:var(--clay);}
.sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; flex:none;}
.biz-attn{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
.biz-attn-item{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-size:12.5px; color:var(--ink-soft); cursor:pointer;}
.biz-attn-item b{color:var(--ink); font-size:14px;}
.biz-attn-item:hover{border-color:var(--ink-soft); color:var(--ink);}
.edp-chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.edp-chip{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.edp-chip b{color:var(--ink); margin-left:3px;}
.edp-chip.warn b{color:#8A5A00;} .edp-chip.bad b{color:var(--clay);}
.edp-chip.active{background:var(--ink); border-color:var(--ink); color:#fff;} .edp-chip.active b{color:#fff;}
@media (max-width:640px){
  .biz-tiles{grid-template-columns:repeat(2, minmax(0,1fr));}
  .biz-tile .bt-value{font-size:20px;}
}

/* =====================================================================
   2026-10 — Pipeline navigation, knowledge base, type-ahead, boards.
   Shared by Accounts, Influencers, Reports, Company Profile, Attendance
   and Assign Tasks so every module navigates the same way.
   ===================================================================== */

/* ---- Pipeline nav: connected step tabs (like the order pipeline) ---- */
.pipe-nav{
  display:flex; align-items:stretch; gap:0; margin:2px 0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:5px; box-shadow:var(--shadow-sm);
  scrollbar-width:thin; scroll-snap-type:x proximity;
}
.pipe-step{
  position:relative; flex:1 0 auto; display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:transparent; border:none; border-radius:10px; padding:9px 18px 9px 14px; margin-right:14px;
  color:var(--ink-soft); font-weight:600; font-size:12.5px; white-space:nowrap; cursor:pointer; scroll-snap-align:start;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.pipe-step:last-child{margin-right:0;}
.pipe-step:not(:last-child)::after{
  content:''; position:absolute; right:-11px; top:50%; width:8px; height:8px; margin-top:-4px;
  border-top:2px solid var(--border-strong); border-right:2px solid var(--border-strong); transform:rotate(45deg);
}
.pipe-step .ps-ico{
  width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-sunk); color:var(--ink-soft); font-size:12px; flex:none;
}
.pipe-step .ps-n{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; background:var(--surface-sunk);
  color:var(--ink); border-radius:999px; padding:0 8px; line-height:18px;
}
.pipe-step .ps-n.warn{background:var(--amber-wash); color:var(--amber);}
.pipe-step .ps-n.bad{background:var(--clay-wash); color:var(--clay);}
.pipe-step:hover{background:var(--surface-sunk); color:var(--ink);}
.pipe-step.active{background:linear-gradient(180deg, var(--green-light), var(--green)); color:#fff; box-shadow:0 3px 10px rgba(46,107,76,.25);}
.pipe-step.active .ps-ico{background:rgba(255,255,255,.18); color:#fff;}
.pipe-step.active .ps-n{background:rgba(255,255,255,.22); color:#fff;}
.pipe-pane{animation:pipeIn .18s var(--ease);}
.pipe-pane[hidden]{display:none !important;}
@keyframes pipeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (max-width:640px){
  .pipe-step{flex:none; padding:8px 14px 8px 10px;}
  .pipe-step .ps-label{font-size:12px;}
}

/* ---- Module header (title + actions) ---- */
.mod-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.mod-head h2{font-size:19px; margin:0; display:flex; align-items:center; gap:10px;}
.mod-head h2 .mh-ico{width:36px; height:36px; border-radius:11px; background:var(--green-wash); color:var(--green); display:inline-flex; align-items:center; justify-content:center; font-size:16px;}
.mod-head .mh-sub{font-size:12px; color:var(--ink-soft); font-weight:400; margin-top:2px;}
.mod-head .mh-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}

/* ---- KPI tiles with an icon + tone ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin:0 0 14px;}
.kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 14px; display:flex; gap:12px; align-items:flex-start;
  box-shadow:var(--shadow-sm); min-width:0; transition:box-shadow .15s var(--ease), transform .15s var(--ease);
}
.kpi:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.kpi .k-ico{width:36px; height:36px; border-radius:11px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--gold-wash); color:var(--gold-deep); font-size:15px;}
.kpi .k-body{min-width:0;}
.kpi .k-label{font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.kpi .k-value{font-size:22px; font-weight:800; color:var(--ink); line-height:1.15; margin-top:2px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.kpi .k-sub{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.kpi[data-tone="good"] .k-ico{background:var(--green-wash); color:var(--green);}
.kpi[data-tone="good"] .k-value{color:var(--green-deep);}
.kpi[data-tone="bad"] .k-ico{background:var(--clay-wash); color:var(--clay);}
.kpi[data-tone="bad"] .k-value{color:var(--clay);}
.kpi[data-tone="info"] .k-ico{background:var(--info-wash); color:var(--info);}
.kpi[data-tone="warn"] .k-ico{background:var(--amber-wash); color:var(--amber);}
.kpi.clickable{cursor:pointer;}
@media (max-width:640px){ .kpi-grid{grid-template-columns:repeat(2, minmax(0,1fr));} .kpi .k-value{font-size:18px;} .kpi .k-ico{width:30px; height:30px;} }

/* ---- P&L statement ---- */
.pnl-statement{font-size:13px;}
.pnl-row{display:flex; justify-content:space-between; gap:12px; padding:7px 2px; border-bottom:1px dashed var(--border);}
.pnl-row .pv{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; white-space:nowrap;}
.pnl-row.minus .pv{color:var(--clay);}
.pnl-row.sub{padding-left:16px; font-size:12px; color:var(--ink-soft);}
.pnl-row.total{border-bottom:none; border-top:2px solid var(--ink); font-weight:800; font-size:14.5px; padding-top:9px;}
.pnl-row.mid{font-weight:700; background:var(--surface-sunk); border-radius:6px; padding:7px 8px; border-bottom:none; margin:4px 0;}
.pnl-row.total.pos .pv{color:var(--green-deep);} .pnl-row.total.neg .pv{color:var(--clay);}
.pnl-bar{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-sunk); margin:10px 0 6px;}
.pnl-bar span{display:block; height:100%;}
.pnl-legend{display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft);}

/* ---- Knowledge base ("How to set this up") ---- */
.kb-box{
  border:1px solid #BCD3E5; background:linear-gradient(180deg, var(--info-wash), var(--surface) 80%);
  border-radius:12px; margin:0 0 14px; overflow:hidden;
}
.kb-box > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 14px; font-weight:700; font-size:13px; color:var(--info);
}
.kb-box > summary::-webkit-details-marker{display:none;}
.kb-box > summary .kb-ico{width:28px; height:28px; border-radius:8px; background:var(--info); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:none;}
.kb-box > summary .kb-chev{margin-left:auto; transition:transform .15s var(--ease); font-size:11px;}
.kb-box[open] > summary .kb-chev{transform:rotate(180deg);}
.kb-body{padding:2px 16px 14px 16px; font-size:12.5px; color:var(--ink); line-height:1.55;}
.kb-body ol{margin:6px 0 8px; padding-left:20px;} .kb-body li{margin:3px 0;}
.kb-body .kb-tip{background:var(--gold-wash); border-left:3px solid var(--gold); padding:7px 10px; border-radius:6px; margin:8px 0; font-size:12px;}
.kb-body .kb-warn{background:var(--clay-wash); border-left:3px solid var(--clay); padding:7px 10px; border-radius:6px; margin:8px 0; font-size:12px;}
.kb-body code{font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--surface-sunk); padding:1px 5px; border-radius:4px;}
.kb-body h4{font-size:12.5px; margin:10px 0 4px; color:var(--green-deep);}

/* ---- Type-ahead suggestion popover ---- */
.sug-pop{
  position:absolute; z-index:2000; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
  box-shadow:var(--shadow-lg); max-height:280px; overflow-y:auto; padding:4px; min-width:220px;
}
.sug-item{display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:12.5px;}
.sug-item:hover, .sug-item.on{background:var(--gold-wash);}
.sug-item .si-main{flex:1; min-width:0;}
.sug-item .si-title{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sug-item .si-sub{font-size:11px; color:var(--ink-soft);}
.sug-item .si-right{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); white-space:nowrap;}
.sug-item img{width:28px; height:28px; border-radius:6px; object-fit:cover; flex:none;}
.sug-empty{padding:8px 10px; font-size:12px; color:var(--ink-soft);}
.sug-pop mark{background:none; color:var(--gold-deep); font-weight:800;}

/* ---- Kanban board (influencer collabs, task stages) ---- */
.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 1fr); gap:12px; overflow-x:auto; padding-bottom:6px;}
.board-col{background:var(--surface-sunk); border-radius:14px; padding:10px; min-height:120px; display:flex; flex-direction:column; gap:8px;}
.board-col-head{display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); padding:2px 4px 4px;}
.board-col-head .bc-dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px;}
.board-col-head .bc-n{font-family:'IBM Plex Mono',monospace; background:var(--surface); border-radius:999px; padding:0 8px; color:var(--ink);}
.board-card{background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:10px 11px; box-shadow:var(--shadow-sm); font-size:12.5px; cursor:pointer;}
.board-card:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.board-card .bcard-title{font-weight:700; color:var(--ink); margin-bottom:3px;}
.board-card .bcard-sub{font-size:11.5px; color:var(--ink-soft);}
.board-card .bcard-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:7px; font-size:11px; color:var(--ink-soft); align-items:center;}
.board-card .bcard-actions{display:flex; gap:6px; margin-top:8px;}
.board-card .bcard-actions button{font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); cursor:pointer;}
.board-card .bcard-actions button:hover{border-color:var(--green); color:var(--green);}
.board-card.overdue{border-left:3px solid var(--clay);}
.board-empty{font-size:11.5px; color:var(--ink-faint); text-align:center; padding:14px 4px;}

/* ---- Creator cards ---- */
.inf-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px;}
.inf-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow-sm); cursor:pointer; display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s var(--ease), transform .15s var(--ease);}
.inf-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.inf-card.archived{opacity:.55;}
.inf-card .ic-top{display:flex; gap:10px; align-items:center;}
.inf-avatar{width:42px; height:42px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; background:linear-gradient(135deg, var(--gold-light), var(--green));}
.inf-card .ic-name{font-weight:700; font-size:14px; color:var(--ink);}
.inf-card .ic-handle{font-size:11.5px; color:var(--ink-soft);}
.inf-card .ic-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; text-align:center;}
.inf-card .ic-stats div{background:var(--surface-sunk); border-radius:8px; padding:6px 4px;}
.inf-card .ic-stats b{display:block; font-size:13px; font-variant-numeric:tabular-nums;}
.inf-card .ic-stats span{font-size:10.5px; color:var(--ink-soft);}
.inf-card .ic-socials{display:flex; gap:8px; color:var(--ink-soft); font-size:13px;}

/* ---- Toolbar row (search + filters) ---- */
.toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.toolbar .tb-search{position:relative; flex:1; min-width:180px; max-width:340px;}
.toolbar .tb-search i{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:12px;}
.toolbar .tb-search input{padding-left:30px;}
.chip-filter{display:inline-flex; gap:4px; flex-wrap:wrap;}
.chip-filter button{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.chip-filter button.active{background:var(--ink); border-color:var(--ink); color:#fff;}

/* ---- Attendance status chips ---- */
.att-chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;}
.att-chip.present{background:var(--green-wash); color:var(--green-deep);}
.att-chip.late{background:var(--amber-wash); color:var(--amber);}
.att-chip.half-day{background:#F5EBCB; color:#7A5E12;}
.att-chip.absent{background:var(--clay-wash); color:var(--clay);}
.att-chip.on-leave{background:#ECE8FA; color:#5A4BB0;}
.att-chip.weekly-off, .att-chip.holiday, .att-chip.future, .att-chip.before-joining{background:var(--surface-sunk); color:var(--ink-soft);}
.face-thumb{width:40px; height:40px; border-radius:10px; object-fit:cover; background:var(--surface-sunk); display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint); flex:none;}

/* ---- Task composer + stage chips ---- */
.composer{background:linear-gradient(180deg, var(--gold-wash), var(--surface) 70%); border:1px solid #EBD49A; border-radius:14px; padding:14px; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.composer .cp-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.composer .cp-title{flex:1; min-width:220px; font-size:14px; padding:10px 12px;}
.person-pick{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px;}
.person-pick button{display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1.5px solid var(--border); border-radius:999px; padding:4px 11px 4px 4px; font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.person-pick button .pp-av{width:22px; height:22px; border-radius:50%; background:var(--surface-sunk); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:var(--ink);}
.person-pick button.on{border-color:var(--green); background:var(--green-wash); color:var(--green-deep);}
.person-pick button.on .pp-av{background:var(--green); color:#fff;}
.person-pick .pp-role{border-style:dashed;}
.stage-chip{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;}
.stage-chip.pending{background:var(--surface-sunk); color:var(--ink-soft);}
.stage-chip.working{background:var(--gold-wash); color:var(--gold-deep);}
.stage-chip.closed{background:var(--green-wash); color:var(--green-deep);}
.acc-vendor-grid{display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:12px; align-items:start;}
@media (max-width:900px){ .acc-vendor-grid{grid-template-columns:minmax(0,1fr);} }
/* Company Profile: each pane IS the section, so its header doesn't collapse. */
.company-pane > details.settings-section > summary{pointer-events:none; cursor:default;}
.company-pane > details.settings-section > summary .summary-caret{display:none;}
.company-pane > details.settings-section{margin-top:0;}
.kpi-grid{grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));}
.kpi .k-value{white-space:nowrap; font-size:20px; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:640px){ .kpi .k-value{font-size:17px;} }