*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface2: #eef0f4;
  --border: #dde1e9;
  --primary: #4f46e5;
  --primary-h: #4338ca;
  --text: #111827;
  --muted: #6b7280;
  --success: #16a34a;
  --error: #dc2626;
  --warning: #d97706;
  --radius: 10px;
  --t: 0.15s ease;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--primary); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--primary-h); }

/* ── Nav ──
   Two rows instead of one long horizontally-scrolling row: a fixed top strip
   (brand, search, and the utility cluster — notifications/chat/+New/account —
   which always stays visible), and a tab row below it that wraps onto as many
   lines as it needs instead of overflowing sideways. Height is intentionally
   not fixed, since the tab row's line count varies by role/viewport; see the
   nav-height sync script in nav.ejs and the #notifBannerWrap rule below. */
nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 2rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 32px;
}
.nav-utility {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.nav-row-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.3rem;
  max-width: 1260px;
}
.nav-brand { font-size: 1.05rem; font-weight: 700; color: var(--text); flex-shrink: 0; }
.nav-brand span { color: var(--primary); }
.nav-pill {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.nav-pill:hover { background: var(--surface2); color: var(--text); }
.nav-pill.active { background: var(--surface2); color: var(--text); }

/* ── Main ── */
main { flex: 1; padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: background var(--t), transform var(--t), opacity var(--t);
  text-align: center;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-h); color: #fff; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--surface2); color: var(--text); }
.btn-danger { background: transparent; color: var(--error); border: 1px solid rgba(248,113,113,0.35); }
.btn-danger:hover { background: rgba(248,113,113,0.1); color: var(--error); }

/* ── Flash ── */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  margin-bottom: 1.25rem;
}
.flash.success { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.25); color: var(--success); }
.flash.error   { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); color: var(--error); }

/* ── Page header ── */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.page-header p { color: var(--muted); font-size: 0.9rem; }

/* ── Section card ── */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.section h2 { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1rem; }

/* ── Form elements ── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--muted); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.form-group textarea { resize: vertical; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.req { color: var(--error); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 1rem; }
.form-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 1rem; }

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  align-items: center;
}
.filter-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 0.5rem 0.85rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  flex: 1;
  min-width: 180px;
  transition: border-color var(--t);
}
.filter-input:focus { border-color: var(--primary); }
.filter-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t);
}
.filter-select:focus { border-color: var(--primary); }

/* ── Data table ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  background: var(--surface);
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .clickable-row { cursor: pointer; transition: background var(--t); }
.data-table .clickable-row:hover td { background: var(--surface2); }
.mono { font-family: monospace; font-size: 0.8rem; color: var(--muted); }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Status badges */
.status-new             { background: rgba(79,70,229,0.1);  color: #3730a3; }
.status-ordered         { background: rgba(217,119,6,0.12); color: #92400e; }
.status-received                { background: rgba(22,163,74,0.12);  color: #166534; }
.status-received-in-warehouse   { background: rgba(22,163,74,0.12);  color: #166534; }
.status-shipped                 { background: rgba(37,99,235,0.12);  color: #1e40af; }
.status-shipped-to-store        { background: rgba(37,99,235,0.12);  color: #1e40af; }
.status-delivered       { background: rgba(5,150,105,0.12);  color: #065f46; }
.status-pending-info    { background: rgba(217,119,6,0.12);  color: #92400e; }
.status-unable-to-source{ background: rgba(220,38,38,0.1);   color: #991b1b; }
.status-cancelled       { background: rgba(107,114,128,0.12);color: #374151; }

/* Urgency badges */
.urgency-low      { background: rgba(107,114,128,0.12); color: #374151; }
.urgency-medium   { background: rgba(217,119,6,0.12);   color: #92400e; }
.urgency-high     { background: rgba(234,88,12,0.12);   color: #9a3412; }
.urgency-critical { background: rgba(220,38,38,0.12);   color: #991b1b; }

/* ── Stat cards ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: border-color var(--t), transform var(--t);
  display: block;
  color: var(--text);
}
.stat-card:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--text); }
.stat-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 0.4rem; }
.stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

/* ── Bar chart ── */
.bar-list { display: flex; flex-direction: column; gap: 0.75rem; }
.bar-row { display: flex; flex-direction: column; gap: 0.3rem; }
.bar-label { display: flex; align-items: center; justify-content: space-between; text-decoration: none; }
.bar-label:hover .badge { opacity: 0.85; }
.bar-count { font-size: 0.8rem; font-weight: 700; color: var(--muted); min-width: 24px; text-align: right; }
.bar-track { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; }

/* Bar fill colours keyed to existing badge colours */
.status-new-fill              { background: #4f46e5; }
.status-ordered-fill          { background: #d97706; }
.status-received-fill               { background: #16a34a; }
.status-received-in-warehouse-fill  { background: #16a34a; }
.status-shipped-fill                { background: #2563eb; }
.status-shipped-to-store-fill       { background: #2563eb; }
.status-delivered-fill        { background: #059669; }
.status-pending-info-fill     { background: #d97706; }
.status-unable-to-source-fill { background: #dc2626; }
.status-cancelled-fill        { background: #6b7280; }
.urgency-low-fill      { background: #6b7280; }
.urgency-medium-fill   { background: #d97706; }
.urgency-high-fill     { background: #ea580c; }
.urgency-critical-fill { background: #dc2626; }

/* ── Detail cell ── */
.detail-cell {
  background: var(--surface2);
  border-radius: 7px;
  padding: 0.6rem 0.85rem;
}
.detail-cell span { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.15rem; }
.detail-cell strong { font-size: 0.875rem; font-weight: 600; }

/* Needs Ordering / In Warehouse statuses */
.status-needs-ordering         { background: rgba(234,88,12,0.12);  color: #9a3412; }
.status-needs-ordering-fill    { background: #ea580c; }
.status-in-warehouse           { background: rgba(37,99,235,0.12);  color: #1e40af; }
.status-in-warehouse-fill      { background: #2563eb; }

/* ── Ordering Queue ── */
.queue-group { margin-bottom: 1.5rem; }
.queue-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}
.queue-group-critical { color: var(--error); }

/* Overdue row highlight */
.row-overdue td { background: rgba(248,113,113,0.05) !important; }
.row-overdue:hover td { background: rgba(248,113,113,0.1) !important; }

/* Overdue text + pill */
.overdue-text { color: var(--error); font-weight: 600; }
.overdue-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(248,113,113,0.15);
  color: var(--error);
  vertical-align: middle;
}

/* ── Shipment badges ── */
.badge-received { background: rgba(22,163,74,0.12);   color: #166534; }
.badge-invoiced { background: rgba(37,99,235,0.12);   color: #1e40af; }
.badge-pending  { background: rgba(107,114,128,0.12); color: #374151; }
.shipment-ref   { font-family: monospace; font-size: 0.85rem; color: #4f46e5; font-weight: 700; }

/* ── Checklist (new-shipment patient items) ── */
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item:hover { background: var(--surface2); margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ── Bulk item rows ── */
.bulk-item-row {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}
.bulk-item-row input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.bulk-item-row input:focus { border-color: var(--primary); }

/* ── Goods In ── */
.btn-success { background: rgba(22,163,74,0.1); color: var(--success); border: 1px solid rgba(22,163,74,0.3); }
.btn-success:hover { background: rgba(22,163,74,0.18); color: var(--success); }

.goods-in-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.25rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.goods-in-divider::before,
.goods-in-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.bulk-section { background: var(--surface2); }

/* ── Timeline ── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: 0.75rem; padding-bottom: 1rem; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 5px;
}
.timeline-content { flex: 1; min-width: 0; }

/* ── Role badges ── */
.role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.role-badge.role-coordinator { background: #e0eaf4; color: #0d4a7c; }
.role-badge.role-ordering    { background: #eae4f5; color: #4b2887; }
.role-badge.role-warehouse   { background: #e2f5e3; color: #1a6b20; }
.role-badge.role-manager     { background: #fef3c7; color: #92400e; }
.role-badge.role-store       { background: #e0f2fe; color: #0369a1; }
.role-badge.role-admin       { background: #fdecea; color: #b71c1c; }

/* ── Search bar in nav ── */
.search-bar-nav {
  flex: 1;
  min-width: 0;
  max-width: 340px;
  margin: 0 0.75rem;
}

/* ── Discrepancy banner ── */
.discrepancy-banner {
  background: #fff3e0;
  border: 1px solid #f0aa30;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #633806;
}

/* ── Badge: discrepancy ── */
.badge-discrepancy {
  background: rgba(217,119,6,0.12);
  color: #92400e;
  border: 1px solid rgba(217,119,6,0.35);
}

/* ── Badge: resend / repair ── */
.badge-resend {
  background: #e8f0fe;
  color: #1a56b0;
  border: 1px solid #b0c8f5;
}
.badge-repair {
  background: #ede7f6;
  color: #4527a0;
  border: 1px solid #c5b0f0;
}

/* ── Invoice totals ── */
.invoice-total {
  margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text);
  border: 1px solid var(--border);
}
.invoice-breakdown {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Dashboard stat grid (6 cols) ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}


/* ── Control Tower panels ─────────────────────────── */
.ct-panel {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.ct-panel--warning { border-left: 4px solid #f59e0b; }
.ct-panel--danger  { border-left: 4px solid #ef4444; }
.ct-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
}
.ct-responsibilities-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.ct-resp-row { display: flex; align-items: center; gap: 0.5rem; }
.ct-resp-label { width: 200px; font-size: 0.875rem; color: var(--text-muted, #64748b); }
.ct-resp-label--unset { color: #f59e0b; font-weight: 600; }
.ct-resp-input { padding: 4px 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 4px; font-size: 0.875rem; }
.ct-resp-input--empty { border-color: #f59e0b; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ct-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border, #e2e8f0); font-weight: 600; white-space: nowrap; }
.ct-table td { padding: 6px 8px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: middle; }
.ct-table tr:last-child td { border-bottom: none; }
.ct-reason { max-width: 260px; font-size: 0.8rem; color: var(--text-muted, #64748b); }
.ct-muted { color: var(--text-muted, #64748b); }
.ct-action-btns { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ct-empty { color: var(--text-muted, #64748b); font-size: 0.875rem; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-amber  { background: #fef3c7; color: #d97706; }
.badge-green  { background: #dcfce7; color: #16a34a; }
.badge-blue   { background: #dbeafe; color: #2563eb; }
.badge-grey   { background: #f1f5f9; color: #64748b; }
.btn-green { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn-blue  { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn-red   { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-grey  { background: #94a3b8; color: #fff; border-color: #94a3b8; }

/* ════════════════════════════════════════════════════════════════
   LENSTEC UX  (presentation only — added in the Lenstec UX pass)
   Small set of reusable classes to replace repeated inline styles
   across the Lenstec views. Visual appearance kept close to the
   existing design; no behaviour change.
   ════════════════════════════════════════════════════════════════ */

/* Sub-navigation shared across Lenstec pages */
.lenstec-subnav {
  display: flex; flex-wrap: nowrap; gap: .4rem;
  margin-bottom: 1.25rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.lenstec-subnav::-webkit-scrollbar { height: 4px; }
.lenstec-subnav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.lenstec-subnav a {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  padding: .3rem .7rem; border-radius: 7px; border: 1px solid transparent;
  white-space: nowrap; flex: 0 0 auto;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.lenstec-subnav a:hover { background: var(--surface2); color: var(--text); }
.lenstec-subnav a.active {
  background: rgba(79,70,229,.10); color: var(--primary);
  border-color: rgba(79,70,229,.30);
}

/* Generic card / alert */
.lenstec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1rem;
}
.lenstec-card-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: .6rem;
}

/* "Next step" hero card on the store hub */
.lenstec-next {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.25);
  border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.lenstec-next.ok { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.30); }
.lenstec-next-icon { font-size: 1.6rem; line-height: 1; }
.lenstec-next-body { flex: 1; min-width: 0; }
.lenstec-next-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lenstec-next-text { font-weight: 800; font-size: 1.05rem; margin-top: .1rem; }
.lenstec-next-sub  { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.lenstec-next-cta {
  background: var(--primary); color: #fff; border-radius: 9px;
  padding: .55rem 1.15rem; font-size: .85rem; font-weight: 700;
  white-space: nowrap; transition: background var(--t);
}
.lenstec-next-cta:hover { background: var(--primary-h); color: #fff; }

/* Upload status chips */
.lenstec-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 600; padding: .25rem .6rem;
  border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
  background: var(--surface);
}
.lenstec-chip.done  { color: var(--success); border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.08); }
.lenstec-chip.miss  { color: var(--warning); border-color: rgba(217,119,6,.35); background: rgba(217,119,6,.07); }

/* Status pill (counts, banners headers) */
.lenstec-status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 999px; padding: .25rem .75rem;
  font-size: .78rem; font-weight: 700; text-decoration: none;
}
.lenstec-status-pill.warn { background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.35); color: var(--warning); }
.lenstec-status-pill.err  { background: rgba(220,38,38,.10); border: 1px solid rgba(220,38,38,.30); color: var(--error); }
.lenstec-status-pill.ok   { background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.30); color: var(--success); }

/* Action / list rows */
.lenstec-action-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem .9rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); margin-bottom: .5rem;
}
.lenstec-action-row.overdue { border-left: 3px solid var(--error); background: rgba(220,38,38,.04); }
.lenstec-action-row.attention { border-left: 3px solid var(--warning); }

/* Quick-filter chip row (client-side filtering) */
.lenstec-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.lenstec-filter {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-family: inherit;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.lenstec-filter:hover { background: var(--surface2); }
.lenstec-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Table header row for scannable lists */
.lenstec-thead {
  display: grid; gap: .5rem; padding: .4rem .9rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}

/* Copy-request box (SAP coverage) */
.lenstec-copybox {
  display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem .9rem; margin-bottom: 1rem;
}
.lenstec-copybox textarea {
  flex: 1; min-width: 240px; resize: vertical; font-family: inherit;
  font-size: .85rem; border: 1px solid var(--border); border-radius: 8px;
  padding: .55rem .7rem; background: var(--surface); color: var(--text);
}
.lenstec-copy-btn {
  background: var(--primary); color: #fff; border: none; border-radius: 8px;
  padding: .55rem 1rem; font-weight: 700; font-size: .82rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.lenstec-copy-btn:hover { background: var(--primary-h); }

/* ══════════════════════════════════════════════════════════════════
   SMART PORTAL — design system
   Scoped to body.portal-shell so the rest of the app (Requests,
   Lenstec, 205, etc.) is completely untouched.

   Subject: an internal tool for opticians — the material world is
   lenses, frames, dioptre/acuity charts. The signature device is the
   "focus ring" (concentric circles, like a lens or a Snellen target):
   used as a small mark beside the wordmark, as functional icons on
   stat cards, and as a faint watermark on hero headers.
   ══════════════════════════════════════════════════════════════════ */

body.portal-shell {
  --p-ink: #16261F;
  --p-paper: #F6F4EC;
  --p-surface: #FFFFFF;
  --p-surface-2: #EEEBDD;
  --p-border: #DCD6C2;
  --p-primary: #1F5F4E;
  --p-primary-ink: #163F34;
  --p-primary-tint: #E3EEE7;
  --p-amber: #A8672A;
  --p-amber-tint: #F2E2CC;
  --p-signal: #AC3A32;
  --p-signal-tint: #F3DCD9;
  --p-gold: #A8862B;
  --p-muted: #6C7566;
  --p-radius: 14px;
  --p-radius-lg: 20px;
  --p-shadow: 0 1px 2px rgba(22,38,31,0.04), 0 8px 24px -12px rgba(22,38,31,0.12);
  --p-shadow-hover: 0 4px 10px rgba(22,38,31,0.06), 0 16px 36px -14px rgba(22,38,31,0.20);

  background: var(--p-paper);
  color: var(--p-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

/* Nav: keep structure, retint for the portal's own identity */
body.portal-shell nav {
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}
body.portal-shell .nav-brand span { color: var(--p-primary); }
body.portal-shell .nav-pill.active { background: var(--p-primary-tint); color: var(--p-primary-ink); }
body.portal-shell .nav-pill:hover { background: var(--p-surface-2); color: var(--p-ink); }
body.portal-shell .btn-primary { background: var(--p-primary); color: #fff; }
body.portal-shell .btn-primary:hover { background: var(--p-primary-ink); }
body.portal-shell main { max-width: 1180px; }

/* ── Signature mark: the focus ring ── */
.lens-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lens-mark svg circle { transition: opacity .2s ease; }

/* ── Hero header ── */
.portal-hero {
  position: relative;
  overflow: hidden;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  padding: 2rem 2.2rem;
  margin-bottom: 1.6rem;
  box-shadow: var(--p-shadow);
}
.portal-hero::after {
  /* faint watermark focus-ring, purely decorative */
  content: '';
  position: absolute;
  right: -60px; top: 50%; transform: translateY(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 28px solid var(--p-primary-tint);
  opacity: .55;
  pointer-events: none;
}
.portal-hero::before {
  content: '';
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 16px solid var(--p-amber-tint);
  opacity: .55;
  pointer-events: none;
}
.portal-hero-eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--p-primary); display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem;
  position: relative; z-index: 1;
}
.portal-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 620;
  font-size: 2.1rem;
  letter-spacing: -0.01em;
  color: var(--p-ink);
  margin-bottom: .25rem;
  position: relative; z-index: 1;
}
.portal-hero p { color: var(--p-muted); font-size: .92rem; position: relative; z-index: 1; }

/* ── Page header (non-hero pages: cases, chat, messages, etc.) ── */
body.portal-shell .page-header h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}
body.portal-shell .page-header p { color: var(--p-muted); }
body.portal-shell .section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--p-ink);
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
body.portal-shell .section h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--p-ink);
}

/* ── Panel (was completely undefined — every card in the portal used
   this class with zero styling; this is the fix) ── */
body.portal-shell .panel {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  transition: box-shadow .18s ease, border-color .18s ease;
}
body.portal-shell a.panel:hover,
body.portal-shell .panel:has(> a:hover) {
  box-shadow: var(--p-shadow-hover);
  border-color: var(--p-primary);
}
body.portal-shell .panel-accent {
  border-left: 4px solid var(--accent, var(--p-primary));
}
body.portal-shell .section {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  padding: 1.5rem 1.6rem;
}

/* ── Stat cards: refined, with a small functional focus-ring icon ── */
body.portal-shell .stat-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  padding: 1.15rem 1.3rem;
  position: relative;
}
body.portal-shell .stat-card:hover { border-color: var(--p-primary); box-shadow: var(--p-shadow-hover); transform: none; }
body.portal-shell .stat-label {
  color: var(--p-muted); font-size: .72rem; font-weight: 700; letter-spacing: .07em;
}
body.portal-shell .stat-value {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.02em; color: var(--p-ink);
}

/* ── Badges / status pills ── */
body.portal-shell .badge {
  border-radius: 999px;
  padding: .22rem .7rem;
  background: var(--p-surface-2);
  color: var(--p-ink);
  font-weight: 600;
  border: 1px solid transparent;
}

/* ── Buttons ── */
body.portal-shell .btn {
  border-radius: 10px;
  font-weight: 600;
}
body.portal-shell .btn-sm {
  padding: .42rem .9rem;
  font-size: .82rem;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  color: var(--p-ink);
}
body.portal-shell .btn-sm:hover { border-color: var(--p-primary); color: var(--p-primary-ink); background: var(--p-primary-tint); }

/* ── Priority accent helpers (traffic-light system) ── */
.p-accent-urgent { --accent: var(--p-signal, #AC3A32); }
.p-accent-high   { --accent: var(--p-amber, #A8672A); }
.p-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.p-dot-urgent { background: var(--p-signal); }
.p-dot-high   { background: var(--p-amber); }
.p-dot-normal { background: var(--p-muted); opacity: .6; }

/* ── Store picker cards ── */
.store-pick-card {
  position: relative; overflow: hidden;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg);
  padding: 1.3rem 1.4rem; box-shadow: var(--p-shadow); text-decoration: none; color: inherit; display: block;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.store-pick-card:hover { box-shadow: var(--p-shadow-hover); border-color: var(--p-primary); transform: translateY(-2px); color: inherit; }
.store-pick-card .store-pick-name {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.15rem; color: var(--p-ink); margin-bottom: .1rem;
}
.store-pick-card .store-pick-stats { display: flex; flex-direction: column; gap: .3rem; margin-top: .7rem; font-size: .84rem; color: var(--p-muted); }
.store-pick-card .store-pick-stats strong { color: var(--p-ink); font-weight: 700; }

/* ── Update feed items ── */
.update-item {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  padding: .85rem 1.05rem; border-radius: var(--p-radius);
  background: var(--p-surface); border: 1px solid var(--p-border); box-shadow: var(--p-shadow);
}
.update-item.is-urgent { border-left: 4px solid var(--p-signal); }
.update-item.is-high { border-left: 4px solid var(--p-amber); }
.update-item .update-title { font-weight: 700; color: var(--p-ink); }
.update-item .update-meta { color: var(--p-muted); font-size: .8rem; margin-top: .15rem; }

/* ── Case tiles (new-case picker) ── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .7rem; }
.issue-tile {
  position: relative; text-align: left; padding: 1rem .95rem; border-radius: var(--p-radius);
  background: var(--p-surface); border: 1.5px solid var(--p-border); cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--p-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: var(--p-shadow); display: flex; flex-direction: column; gap: .5rem; min-height: 84px;
}
.issue-tile:hover { border-color: var(--p-primary); box-shadow: var(--p-shadow-hover); }
.issue-tile .issue-tile-ring { opacity: .5; }
.issue-tile.selected {
  border-color: var(--p-primary); background: var(--p-primary-tint); color: var(--p-primary-ink);
  box-shadow: var(--p-shadow-hover);
}
.issue-tile.selected .issue-tile-ring circle { stroke: var(--p-primary-ink); }
.issue-tile.selected .issue-tile-ring { opacity: 1; }

/* ── Portal inputs ── */
body.portal-shell input[type="text"],
body.portal-shell input[type="file"],
body.portal-shell select,
body.portal-shell textarea {
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-ink);
  border-radius: 10px;
  font-family: inherit;
}
body.portal-shell input[type="text"]:focus,
body.portal-shell select:focus,
body.portal-shell textarea:focus {
  outline: 2px solid var(--p-primary);
  outline-offset: 1px;
  border-color: var(--p-primary);
}

@media (max-width: 640px) {
  .portal-hero { padding: 1.4rem 1.3rem; }
  .portal-hero h1 { font-size: 1.5rem; }
  .portal-hero::after, .portal-hero::before { display: none; }
}

@media (max-width: 720px) {
  nav { padding: 0.5rem 1rem 0.45rem; }
  .nav-row-top { flex-wrap: wrap; row-gap: 0.35rem; }
  .search-bar-nav { order: 3; max-width: none; flex-basis: 100%; margin: 0; }
}

/* ── Strong notification banners (every portal page, under the nav) ── */
#notifBannerWrap { position: sticky; top: var(--nav-h, 92px); z-index: 90; }
.notif-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.4rem;
  font-size: .92rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.notif-banner-body { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.notif-banner-flag {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  padding: .22rem .6rem; border-radius: 999px; flex-shrink: 0;
  background: rgba(255,255,255,.22); color: inherit;
}
.notif-banner-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-banner-msg { opacity: .85; }
.notif-banner-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.notif-banner-open {
  background: rgba(255,255,255,.95); border: none; border-radius: 8px;
  padding: .38rem .95rem; font-weight: 700; font-size: .8rem; cursor: pointer;
  font-family: inherit; color: var(--p-ink, #16261F);
}
.notif-banner-open:hover { background: #fff; }
.notif-banner-dismiss {
  background: transparent; border: none; color: inherit; opacity: .7;
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: .2rem .4rem;
}
.notif-banner-dismiss:hover { opacity: 1; }

.notif-urgent {
  background: var(--p-signal, #AC3A32); color: #fff;
  animation: notifPulse 2s ease-in-out infinite;
}
.notif-high { background: var(--p-amber, #A8672A); color: #fff; }
.notif-normal {
  background: var(--p-primary-tint, #E3EEE7); color: var(--p-primary-ink, #163F34);
  border-bottom-color: var(--p-border, #DCD6C2);
}
.notif-normal .notif-banner-flag { background: rgba(31,95,78,.14); }
.notif-normal .notif-banner-open { background: var(--p-primary, #1F5F4E); color: #fff; }
.notif-normal .notif-banner-open:hover { background: var(--p-primary-ink, #163F34); }

@keyframes notifPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
.notif-banner-enter { animation: notifSlide .35s ease-out, notifPulse 2s ease-in-out infinite .35s; }
@keyframes notifSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .notif-urgent, .notif-banner-enter { animation: none; }
}
@media (max-width: 640px) {
  .notif-banner { padding: .6rem .9rem; flex-wrap: wrap; }
  .notif-banner-text { white-space: normal; }
}