/* PalmStat ERP · components: cards, KPIs, tables, forms, buttons, modals, toasts */

.card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.card:hover { box-shadow: var(--shadow-md); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px 10px; }
.card__title { font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; }
.card__sub   { color: var(--fg-secondary); font-size: .8125rem; }
.card__body  { padding: 12px 18px 18px; }
.card__footer{ padding: 12px 18px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; gap: 8px; }

.kpi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 18px 18px 16px; position: relative; overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kpi__label { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--fg-secondary); text-transform: uppercase; }
.kpi__value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; color: var(--fg-primary); margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__unit { font-size: .9rem; font-weight: 500; color: var(--fg-secondary); margin-left: 4px; }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); margin-top: 8px; }
.kpi__delta.up { background: rgba(52,199,89,.14); color: var(--success); }
.kpi__delta.down { background: rgba(255,59,48,.14); color: var(--danger); }
.kpi__delta.flat { background: var(--bg-active); color: var(--fg-secondary); }
.kpi__spark { position: absolute; right: -10px; bottom: -8px; width: 110px; height: 60px; opacity: .65; pointer-events: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; font-size: .875rem; font-weight: 500; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--fg-primary); letter-spacing: -.01em; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); user-select: none; }
.btn:hover { background: var(--bg-hover); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
/* WCAG AA contrast: white on --brand-700 = 5.7:1 (passes 4.5:1); --brand-500 was 3.0:1 (failed). */
.btn--primary { background: var(--brand-700); color: var(--fg-on-brand); border-color: transparent; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 14px rgba(63,166,111,.28); }
.btn--primary:hover  { background: var(--brand-800); }
.btn--primary:active { background: var(--brand-900); }
.btn:focus-visible,
.tabs__tab:focus-visible,
.nav-item:focus-visible,
.theme-toggle button:focus-visible,
.topbar__icon-btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--bg-hover); }
.btn--danger { background: var(--danger); color: white; border-color: transparent; }
.btn--danger:hover { background: #E22E25; }
.btn--sm { height: 28px; padding: 0 10px; font-size: .8125rem; border-radius: var(--r-xs); }
.btn--lg { height: 42px; padding: 0 18px; font-size: 1rem; border-radius: var(--r-md); }
.btn--icon { width: 34px; padding: 0; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: .8125rem; font-weight: 500; color: var(--fg-primary); }
.field__hint  { font-size: .75rem; color: var(--fg-tertiary); }
.field__error { font-size: .75rem; color: var(--danger); }

.input, .select, .textarea { width: 100%; height: 36px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-primary); padding: 0 12px; font: inherit; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.textarea { height: auto; min-height: 80px; padding: 9px 12px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: var(--shadow-glow); }
.input::placeholder, .textarea::placeholder { color: var(--fg-tertiary); }

.table-wrap { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow-x: auto; box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 11px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); }
.table th { font-weight: 600; font-size: .75rem; color: var(--fg-secondary); text-transform: uppercase; letter-spacing: .04em; background: var(--bg-base); position: sticky; top: 0; z-index: 1; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--bg-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num  { text-align: right; font-variant-numeric: tabular-nums; }
.table .mono { font-family: var(--font-mono); font-size: .82em; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: .72rem; font-weight: 600; border-radius: var(--r-pill); background: var(--bg-active); color: var(--fg-secondary); letter-spacing: .02em; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge--success { background: rgba(52,199,89,.14);   color: #1F8F40; }
.badge--warning { background: rgba(255,159,10,.16);  color: #B7660A; }
.badge--danger  { background: rgba(255,59,48,.14);   color: #C72A20; }
.badge--info    { background: rgba(90,200,250,.16);  color: #0A85B9; }
.badge--brand   { background: var(--brand-bg-soft);  color: var(--brand-fg); }
.badge--neutral { background: var(--bg-active);      color: var(--fg-secondary); }
[data-theme="dark"] .badge--success { color: #50D26A; }
[data-theme="dark"] .badge--warning { color: #FFB849; }
[data-theme="dark"] .badge--danger  { color: #FF6961; }
[data-theme="dark"] .badge--info    { color: #6CD3FB; }

.tabs { display: inline-flex; background: var(--bg-active); padding: 3px; border-radius: var(--r-md); gap: 2px; }
.tabs__tab { height: 30px; padding: 0 12px; font-size: .8125rem; font-weight: 500; border: none; background: transparent; color: var(--fg-secondary); border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tabs__tab:hover { color: var(--fg-primary); }
.tabs__tab.is-active { background: var(--bg-card); color: var(--fg-primary); box-shadow: var(--shadow-xs); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 500; animation: fadeIn var(--t-base) var(--ease); }
.modal { width: min(560px, 92vw); max-height: 86vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: scaleIn var(--t-base) var(--ease-out); }
.modal__header { padding: 18px 22px 8px; }
.modal__title  { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.modal__sub    { color: var(--fg-secondary); font-size: .875rem; }
.modal__body   { padding: 12px 22px; }
.modal__footer { padding: 14px 22px 18px; display: flex; justify-content: flex-end; gap: 8px; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.toast-host { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; pointer-events: none; }
.toast { pointer-events: auto; min-width: 280px; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: slideUp var(--t-base) var(--ease-out); }
.toast__icon { flex-shrink: 0; }
.toast__title { font-weight: 600; font-size: .875rem; }
.toast__msg   { font-size: .8125rem; color: var(--fg-secondary); }
.toast--success .toast__icon { color: var(--success); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--error   .toast__icon { color: var(--danger); }
.toast--info    .toast__icon { color: var(--brand-500); }

@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.skeleton { background: linear-gradient(90deg, var(--bg-active) 0%, var(--bg-hover) 50%, var(--bg-active) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--fg-secondary); text-align: center; }
.empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--bg-active); margin-bottom: 12px; }
.empty__title { font-weight: 600; color: var(--fg-primary); margin-bottom: 4px; font-size: .9375rem; }

/* ============================================================
   CHARTS · futuristic, animated SVG visualisations
   ============================================================ */
.chart-panel { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 8px 0; }
.chart-panel--bar, .chart-panel--line { display: block; }
.chart { flex-shrink: 0; }
.chart--pie { filter: drop-shadow(0 8px 24px rgba(63,166,111,.18)); transition: filter var(--t-base) var(--ease); }
.chart--pie:hover { filter: drop-shadow(0 10px 30px rgba(63,166,111,.28)); }

/* Pie / donut slice entrance + hover */
.chart-pie__slice {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  opacity: 0;
  animation: pie-in .65s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--idx, 0) * 60ms);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  cursor: pointer;
  transform-origin: 50% 50%;
}
@keyframes pie-in {
  from { transform: scale(.55) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.04) rotate(0deg);  opacity: 1; }
  to   { transform: scale(1)    rotate(0deg);  opacity: 1; }
}
.chart-pie__slice:hover,
.chart-pie__slice.is-highlight {
  filter: brightness(1.12) drop-shadow(0 0 14px currentColor);
  transform: scale(1.04);
}
.chart.is-dimming .chart-pie__slice:not(.is-highlight) { opacity: .35; filter: saturate(.55); }

.chart-pie__hole { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pie-hole-in .5s cubic-bezier(.22,1,.36,1) .35s forwards; }
@keyframes pie-hole-in { to { transform: scale(1); } }
.chart-pie__center { opacity: 0; animation: fade-in .4s ease-out .55s forwards; }
@keyframes fade-in { to { opacity: 1; } }

/* Bar entrance + hover */
.chart-bar__rect {
  transform: scaleX(0);
  animation: bar-grow-x .8s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--idx, 0) * 70ms + .05s);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  cursor: pointer;
}
.chart-bar__rect--vert { transform: scaleY(0); animation-name: bar-grow-y; }
@keyframes bar-grow-x { to { transform: scaleX(1); } }
@keyframes bar-grow-y { to { transform: scaleY(1); } }
.chart-bar__rect:hover,
.chart-bar__rect.is-highlight {
  filter: brightness(1.15) drop-shadow(0 4px 14px currentColor);
}
.chart.is-dimming .chart-bar__rect:not(.is-highlight) { opacity: .35; filter: saturate(.55); }
.chart-bar__label, .chart-bar__value {
  opacity: 0;
  animation: fade-up .4s ease-out forwards;
  animation-delay: calc(var(--idx, 0) * 70ms + .35s);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Line draw + dots */
.chart-line__fill { opacity: 0; animation: fade-in .8s ease-out .8s forwards; }
.chart-line__path {
  animation: line-draw 1.6s cubic-bezier(.65,0,.35,1) forwards;
  filter: drop-shadow(0 2px 8px rgba(63,166,111,.45));
}
@keyframes line-draw { to { stroke-dashoffset: 0; } }
.chart-line__dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: dot-pop .45s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--idx, 0) * 80ms + 1.0s);
  transition: r var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
  cursor: pointer;
}
@keyframes dot-pop {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.6); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
.chart-line__dot:hover,
.chart-line__dot.is-highlight {
  r: 7;
  filter: drop-shadow(0 0 12px currentColor);
}
.chart.is-dimming .chart-line__dot:not(.is-highlight) { opacity: .4; }
.chart-line__xlabel { opacity: 0; animation: fade-in .35s ease-out forwards; animation-delay: calc(var(--idx, 0) * 30ms + 1.4s); }

/* Legend */
.chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.chart-legend__item {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: .78rem;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-4px);
  animation: fade-up-r .4s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--idx, 0) * 60ms + .25s);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@keyframes fade-up-r {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.chart-legend__item:hover,
.chart-legend__item.is-highlight {
  background: var(--bg-active);
  transform: translateX(2px);
}
.chart-legend__swatch { width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.chart-legend__label  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend__value  { color: var(--fg-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-legend__pct    { color: var(--fg-tertiary); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }

/* Floating tooltip */
.chart-tooltip {
  position: fixed; left: 0; top: 0;
  pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: .8125rem;
  opacity: 0;
  transform: translateY(4px) scale(.96);
  transition: opacity .14s var(--ease), transform .14s var(--ease);
  z-index: 9999;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.chart-tooltip.is-shown { opacity: 1; transform: translateY(0) scale(1); }
.chart-tooltip__swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.chart-tooltip__label  { font-weight: 600; color: var(--fg-primary); }
.chart-tooltip__value  { color: var(--fg-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .chart-pie__slice, .chart-bar__rect, .chart-line__path, .chart-line__dot,
  .chart-pie__hole, .chart-pie__center, .chart-line__fill, .chart-line__xlabel,
  .chart-bar__label, .chart-bar__value, .chart-legend__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

.live-pulse { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--success); }
.live-pulse__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: pulse 1.6s ease-out infinite; }
.live-pulse.is-offline { color: var(--fg-tertiary); }
.live-pulse.is-offline .live-pulse__dot { background: var(--fg-tertiary); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); } 70% { box-shadow: 0 0 0 8px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.text-secondary { color: var(--fg-secondary); }
.text-tertiary  { color: var(--fg-tertiary); }
.text-mono { font-family: var(--font-mono); }
.text-sm { font-size: .8125rem; }
.text-xs { font-size: .72rem; }
.text-lg { font-size: 1rem; }
.text-xl { font-size: 1.125rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-right { text-align: right; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.hidden { display: none !important; }

/* ============================================================ */
/* Executive Dashboard · hero, animated KPIs, live feed, gauge   */
/* ============================================================ */

@keyframes exec-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes exec-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(63,166,111,.7); }
  50%     { box-shadow: 0 0 0 10px rgba(63,166,111,0); }
}
@keyframes exec-gauge-sweep {
  from { stroke-dasharray: 0 1000; }
  to   { stroke-dasharray: 1000 0; }
}
@keyframes exec-progress-grow {
  from { width: 0; }
  to   { width: var(--target-w, 100%); }
}
@keyframes exec-feed-slide {
  from { opacity: 0; transform: translateX(-20px); background: rgba(63,166,111,.08); }
  to   { opacity: 1; transform: translateX(0);    background: transparent; }
}

/* Hero header */
.exec-hero {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 8px 0 22px; margin-bottom: 8px;
  animation: exec-fade-up .6s ease both;
  animation-delay: calc(var(--idx, 0) * 60ms);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap; gap: 16px;
}
.exec-hero__greeting { color: var(--fg-secondary); font-size: .9375rem; margin-bottom: 4px; }
.exec-hero__title    { font-size: 2.25rem; font-weight: 700; letter-spacing: -.032em; line-height: 1.1; margin: 0; }
.exec-hero__sub      { color: var(--fg-tertiary); font-size: .9375rem; margin-top: 6px; }
.exec-hero__pulse    { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
                       background: var(--brand-bg-soft); color: var(--brand-fg);
                       border-radius: 999px; font-size: .8125rem; font-weight: 600;
                       border: 1px solid rgba(63,166,111,.25); }
.exec-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500, #3FA66F);
  animation: exec-pulse-dot 1.6s infinite;
}

/* Hero KPI cards (oversized) */
.exec-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1280px) { .exec-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .exec-hero-grid { grid-template-columns: 1fr; } }

.exec-card {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 12px);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-height: 174px;
  animation: exec-fade-up .55s ease both;
  animation-delay: calc(var(--idx, 0) * 60ms);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.exec-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.18);
  border-color: rgba(63,166,111,.4);
}
.exec-card__label  { color: var(--fg-secondary); font-size: .8125rem; font-weight: 600;
                     text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.exec-card__value  { font-size: 2.4rem; font-weight: 700; letter-spacing: -.022em;
                     line-height: 1.1; margin: 4px 0 8px;
                     font-variant-numeric: tabular-nums; }
.exec-card__trend  { color: var(--fg-secondary); font-size: .8125rem; margin-bottom: 8px; flex: 1; }
.exec-card__trend strong { color: var(--fg-primary); }
.exec-trend-arrow  { color: var(--brand-500, #3FA66F); font-weight: 700; }
.exec-card__chart  { margin-top: auto; }
.exec-card__link   { display: inline-block; margin-top: auto; padding-top: 8px;
                     color: var(--brand-fg); font-size: .8125rem; font-weight: 600;
                     text-decoration: none; transition: color .15s ease, transform .15s ease; }
.exec-card__link:hover { color: var(--brand-500); transform: translateX(2px); }

/* Brand-accented hero card */
.exec-card--brand {
  background: linear-gradient(135deg, var(--brand-500, #3FA66F) 0%, #297548 100%);
  border-color: transparent; color: #fff;
}
.exec-card--brand .exec-card__label,
.exec-card--brand .exec-card__trend,
.exec-card--brand .exec-card__trend strong { color: rgba(255,255,255,.85); }
.exec-card--brand .exec-card__value { color: #fff; }
.exec-card--brand .exec-trend-arrow { color: #fff; }

/* Status variants */
.exec-card--warn { border-color: rgba(255,159,10,.4); }
.exec-card--warn .exec-card__value { color: #FF9F0A; }
.exec-card--ok   .exec-card__trend { color: var(--brand-fg); }

/* Progress bar inside hero card */
.progress-bar {
  height: 8px; background: var(--bg-subtle, rgba(0,0,0,.06));
  border-radius: 999px; overflow: hidden; margin-top: auto;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500, #3FA66F), #5FBE87);
  border-radius: 999px;
  width: var(--target-w, 0%);
  animation: exec-progress-grow 1.4s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: 200ms;
}

/* Gauge wrap */
.exec-gauge-wrap { padding: 4px 0 0; }
.exec-gauge-svg .exec-gauge-fill {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: exec-gauge-draw 1.6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: 300ms;
}
@keyframes exec-gauge-draw {
  to { stroke-dashoffset: 0; }
}

/* Secondary mini-card grid */
.exec-secondary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) { .exec-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.exec-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  animation: exec-fade-up .5s ease both;
  animation-delay: calc(var(--idx, 0) * 60ms);
  transition: transform .2s ease, box-shadow .2s ease;
}
.exec-mini-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.exec-mini-card__label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-secondary); font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.exec-mini-card__label [data-icon] { color: var(--fg-tertiary); }
.exec-mini-card__value {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.exec-mini-card__divider { color: var(--fg-tertiary); margin: 0 4px; }
.exec-mini-card__unit    { color: var(--fg-tertiary); font-size: .8rem; font-weight: 500; }
.exec-mini-card--warn .exec-mini-card__value { color: #FF9F0A; }

/* 3-column charts grid */
.exec-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1280px) { .exec-charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .exec-charts-grid { grid-template-columns: 1fr; } }

.exec-charts-grid > .card {
  animation: exec-fade-up .6s ease both;
  animation-delay: calc(var(--idx, 0) * 60ms);
}

/* Bottom split row */
.exec-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
}
@media (max-width: 1100px) { .exec-bottom-grid { grid-template-columns: 1fr; } }
.exec-bottom-grid > .card {
  animation: exec-fade-up .6s ease both;
  animation-delay: calc(var(--idx, 0) * 60ms);
}

/* Live activity feed */
.exec-feed { padding: 6px 14px 18px; max-height: 480px; overflow-y: auto; }
.exec-feed__empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 14px; color: var(--fg-tertiary); text-align: center; font-size: .875rem;
}
.exec-feed__empty [data-icon] { font-size: 28px; opacity: .5; }
.exec-feed__item {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--border-subtle);
  animation: exec-feed-slide .55s cubic-bezier(.2,.7,.2,1) both;
}
.exec-feed__item:last-child { border-bottom: none; }
.exec-feed__item.is-fresh   { background: linear-gradient(90deg, rgba(63,166,111,.10), transparent 60%); }
.exec-feed__icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(63,166,111,.12); color: var(--c, var(--brand-fg));
}
.exec-feed__icon svg { width: 18px; height: 18px; }
.exec-feed__headline { font-size: .875rem; font-weight: 600; color: var(--fg-primary); }
.exec-feed__detail   { font-size: .8125rem; color: var(--fg-secondary); margin-top: 2px; }
.exec-feed__time     { font-size: .75rem; color: var(--fg-tertiary); white-space: nowrap; }

/* Reduce motion respects */
@media (prefers-reduced-motion: reduce) {
  .exec-hero, .exec-card, .exec-mini-card,
  .exec-charts-grid > .card, .exec-bottom-grid > .card,
  .exec-feed__item { animation: none; }
  .exec-pulse-dot { animation: none; }
  .exec-gauge-svg .exec-gauge-fill { animation: none; stroke-dashoffset: 0; }
  .progress-bar__fill { animation: none; width: var(--target-w, 0%); }
}

/* ============================================================ */
/* GLOBAL ANIMATION PACK                                          */
/* ============================================================ */

@keyframes pgFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pgFadeIn { from { opacity: 0; } to { opacity: 1; } }
main, .main, #main { animation: pgFadeUp .35s cubic-bezier(.22,1,.36,1) both; }

/* Card hover lift (universal) */
.card { transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1); }
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(0,0,0,.15), 0 6px 12px -6px rgba(0,0,0,.08); border-color: rgba(63,166,111,.28); }

/* KPI tile hover lift */
.kpi { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1); }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(63,166,111,.22); }

/* Sidebar nav: animated active indicator */
.nav-item { position: relative; transition: background .15s ease, color .15s ease, padding-left .25s cubic-bezier(.22,1,.36,1); }
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
  opacity: 0; transform: scaleY(.4);
  transition: opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-item:hover { padding-left: 16px; }
.nav-item.is-active::before, .nav-item[aria-current="page"]::before { opacity: 1; transform: scaleY(1); }
.nav-item.is-active { padding-left: 16px; }

/* Button micro-interactions */
.btn, button.btn, button[class*="btn"] { transition: transform .12s cubic-bezier(.4,0,.2,1), box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
.btn--primary:hover { box-shadow: 0 6px 14px -4px rgba(63,166,111,.45); }

/* Skeleton shimmer (loading rows) */
@keyframes pgSkeletonShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.05) 100%);
  background-size: 800px 100%;
  animation: pgSkeletonShimmer 1.4s linear infinite;
  border-radius: 6px; display: inline-block;
}
.skeleton-row    { height: 14px; width: 100%; margin: 6px 0; display: block; }
.skeleton-row--sm { height: 12px; width: 60%; }
.skeleton-row--lg { height: 22px; width: 40%; }
.skeleton-circle { width: 36px; height: 36px; border-radius: 50%; }

/* Topbar live-pulse refinement */
@keyframes pgLivePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,166,111,.6); } 50% { box-shadow: 0 0 0 6px rgba(63,166,111,0); } }
.live-pulse__dot { animation: pgLivePulse 1.8s infinite; }

/* Search input focus glow */
.topbar__search { transition: box-shadow .18s ease, border-color .18s ease; }
.topbar__search:focus-within { box-shadow: 0 0 0 4px rgba(63,166,111,.18); border-color: var(--brand-400); border-radius: 12px; }

/* Modal entrance */
@keyframes pgModalIn { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pgBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop { animation: pgBackdropIn .2s ease-out both; }
.modal { animation: pgModalIn .26s cubic-bezier(.22,1,.36,1) both; }

/* Toast slide-in */
@keyframes pgToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast, .api-toast, .notification { animation: pgToastIn .3s cubic-bezier(.22,1,.36,1) both; }

/* Table row hover + staggered entrance */
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }
@keyframes pgRowIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
.table--animated tbody tr { animation: pgRowIn .35s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--idx, 0) * 30ms); }

/* Badge pulse for live/success/brand badges */
@keyframes pgBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.badge--success { animation: pgBadgePulse 2.4s ease-in-out infinite; transform-origin: center; display: inline-block; }

/* Segmented tabs (used in HR Hub profile + Integrations filters) */
.tabs { display: inline-flex; padding: 4px; background: var(--bg-subtle, rgba(0,0,0,.05)); border-radius: 999px; position: relative; gap: 4px; }
.tabs__btn { padding: 8px 18px; border: none; background: transparent; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--fg-secondary); cursor: pointer; border-radius: 999px; transition: color .18s ease, background .18s ease; position: relative; z-index: 1; }
.tabs__btn:hover { color: var(--fg-primary); }
.tabs__btn.is-active { color: var(--fg-on-brand, #fff); background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); box-shadow: 0 4px 10px rgba(63,166,111,.32); }

/* Status dots */
@keyframes pgDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot--live    { background: var(--brand-500, #3FA66F); animation: pgDotPulse 2s infinite; }
.status-dot--warn    { background: #FF9F0A; }
.status-dot--err     { background: #FF3B30; }
.status-dot--neutral { background: var(--fg-tertiary); }

/* Icon button scale on hover */
.icon-btn { transition: background .15s ease, transform .15s cubic-bezier(.4,0,.2,1); }
.icon-btn:hover { transform: scale(1.08); }
.icon-btn:active { transform: scale(.92); }

/* Tabular numbers for any count-up */
[data-count-up], [data-cu] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  main, .main, #main, .card, .kpi, .modal, .modal-backdrop,
  .toast, .table--animated tbody tr, .badge--success,
  .skeleton, .live-pulse__dot, .nav-item { animation: none !important; transition: none !important; }
}

/* ============================================================ */
/* HR HUB · employee grid, profile, skills bars, integrations    */
/* ============================================================ */

@keyframes hrCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.hr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 14px;
}
.hr-card {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
  padding: 14px; border: 1px solid var(--border-subtle); border-radius: 14px;
  background: var(--bg-card); cursor: pointer;
  animation: hrCardIn .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 25ms);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hr-card:hover {
  transform: translateY(-3px);
  border-color: rgba(63,166,111,.4);
  box-shadow: 0 14px 28px -10px rgba(0,0,0,.18);
}
.hr-card__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.1rem; color: rgba(0,0,0,.7);
  letter-spacing: -.02em;
}
.hr-card__name   { font-weight: 600; font-size: .95rem; color: var(--fg-primary); }
.hr-card__meta   { font-size: .8125rem; color: var(--fg-secondary); margin-top: 2px; }
.hr-card__dept   { font-size: .72rem; color: var(--fg-tertiary); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
.hr-card__status { font-size: .75rem; color: var(--fg-secondary); margin-top: 4px; }

/* Profile hero */
.hr-profile-hero {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; align-items: center;
  padding: 20px;
}
.hr-profile-hero__avatar {
  width: 100px; height: 100px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 2.4rem; color: rgba(0,0,0,.65);
  letter-spacing: -.03em;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
}
.hr-profile-hero__name { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg-primary); }
.hr-profile-hero__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.hr-profile-hero__status { color: var(--fg-secondary); font-size: .8125rem; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.hr-profile-hero__kpis { display: flex; gap: 24px; padding-right: 8px; }
.hr-profile-hero__k { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--brand-fg); font-variant-numeric: tabular-nums; }
.hr-profile-hero__l { font-size: .72rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 900px) {
  .hr-profile-hero { grid-template-columns: 80px 1fr; }
  .hr-profile-hero__kpis { grid-column: 1 / -1; padding: 0; }
}

/* Tab panes */
.hr-tabpane { display: none; animation: pgFadeUp .3s cubic-bezier(.22,1,.36,1) both; }
.hr-tabpane.is-active { display: block; }

/* DL helper */
.hr-dl { display: grid; grid-template-columns: 140px 1fr; row-gap: 10px; column-gap: 14px; padding: 14px; }
.hr-dl dt { color: var(--fg-tertiary); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.hr-dl dd { color: var(--fg-primary); font-size: .9375rem; margin: 0; }
.hr-dl--cols { grid-template-columns: repeat(2, 1fr); }
.hr-dl--cols > div { display: contents; }
.hr-dl--cols > div > dt { display: block; }
.hr-dl--cols > div > dd { display: block; margin-bottom: 10px; }

/* Skills */
.hr-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 14px; }
.hr-skill { padding: 12px; border-radius: 12px; background: var(--bg-subtle, rgba(0,0,0,.04)); }
.hr-skill__name { font-weight: 600; font-size: .875rem; margin-bottom: 8px; color: var(--fg-primary); }
.hr-skill__bar { height: 8px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
@keyframes hrSkillFill { from { width: 0; } to { width: var(--w, 0%); } }
.hr-skill__fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); border-radius: 999px; width: var(--w, 0%); animation: hrSkillFill 1.2s cubic-bezier(.22,1,.36,1) both; }
.hr-skill__level { font-size: .75rem; color: var(--fg-tertiary); }

/* Integration ribbon (shown on Hub + Profile + Integrations page) */
.hr-int-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; padding: 14px;
}
.hr-int-card {
  padding: 14px; border-radius: 12px; background: var(--bg-subtle, rgba(0,0,0,.03));
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s ease, border-color .2s ease;
}
.hr-int-card:hover { transform: translateY(-2px); border-color: rgba(63,166,111,.35); }
.hr-int-card--connected { border-color: rgba(63,166,111,.45); background: var(--brand-bg-soft, rgba(63,166,111,.08)); }
.hr-int-card__logo {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .02em;
}
.hr-int-card__name   { font-weight: 600; font-size: .9rem; color: var(--fg-primary); }
.hr-int-card__sub    { font-size: .75rem; color: var(--fg-secondary); }
.hr-int-card__status { font-size: .75rem; color: var(--fg-secondary); margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; }

.hr-payroll-card { padding-bottom: 14px; }
.hr-payroll-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.hr-integration-ribbon { background: linear-gradient(180deg, var(--brand-bg-soft, rgba(63,166,111,.06)), transparent); }

/* ============================================================ */
/* INTEGRATIONS PAGE · flow diagram + connector cards            */
/* ============================================================ */

.int-section-title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--fg-primary); margin: 8px 4px 12px;
}
.int-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.int-card {
  padding: 18px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
  animation: pgFadeUp .45s cubic-bezier(.22,1,.36,1) both;
}
.int-card:hover {
  transform: translateY(-3px);
  border-color: rgba(63,166,111,.4);
  box-shadow: 0 16px 32px -12px rgba(0,0,0,.18);
}
.int-card--connected { border-color: rgba(63,166,111,.45); }
.int-card--connected::before {
  content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(63,166,111,.15), transparent 70%);
  pointer-events: none; border-radius: 16px;
}
.int-card { position: relative; }
.int-card__head { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.int-card__logo { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .02em; box-shadow: 0 6px 14px -4px rgba(0,0,0,.18); }
.int-card__name { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.int-card__tag { margin-top: 4px; }
.int-card__status { font-size: .8125rem; color: var(--fg-secondary); display: inline-flex; align-items: center; gap: 6px; }
.int-card__desc { color: var(--fg-secondary); font-size: .875rem; line-height: 1.45; }
.int-card__sync { background: var(--bg-subtle, rgba(0,0,0,.04)); border-radius: 10px; padding: 10px 12px; }
.int-card__sync-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-tertiary); margin-bottom: 6px; }
.int-card__sync ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.int-card__sync li { font-size: .8125rem; color: var(--fg-primary); padding-left: 16px; position: relative; }
.int-card__sync li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--brand-500); font-weight: 700; }
.int-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* Flow diagram */
.int-flow-card { padding-bottom: 16px; }
.int-flow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 14px 4px;
  flex-wrap: wrap; gap: 10px;
}
.int-flow__node { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 90px; }
.int-flow__bubble {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .02em;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.25);
}
.int-flow__bubble--brand {
  width: 76px; height: 76px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  font-size: 1.15rem;
  box-shadow: 0 12px 28px -8px rgba(63,166,111,.55), 0 0 0 4px rgba(63,166,111,.18);
  animation: pgBadgePulse 3s ease-in-out infinite;
}
.int-flow__label { font-size: .75rem; text-align: center; color: var(--fg-secondary); line-height: 1.2; }
.int-flow__label small { color: var(--fg-tertiary); }
.int-flow__line {
  flex: 1; height: 2px; background: linear-gradient(90deg, rgba(63,166,111,.3), rgba(63,166,111,.6), rgba(63,166,111,.3));
  position: relative; min-width: 30px; margin: 0 4px; border-radius: 2px;
}
@keyframes intFlowDot {
  0%   { left: 0;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.int-flow__dot {
  position: absolute; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 8px rgba(63,166,111,.7);
  animation: intFlowDot 2.4s linear infinite;
}
.int-flow__dot--2 { animation-delay: .6s; }
.int-flow__dot--3 { animation-delay: 1.2s; }
.int-flow__dot--4 { animation-delay: 1.8s; }

@media (max-width: 900px) {
  .int-flow { justify-content: center; }
  .int-flow__line { display: none; }
}

/* =================== Demo Tour =================== */
/* Topbar "Take the tour" button · sits before .live-pulse */
.topbar__tour-btn {
  background: var(--brand-bg-soft);
  color: var(--brand-fg);
  border-color: transparent;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.topbar__tour-btn:hover { background: var(--brand-100, var(--brand-bg-soft)); filter: brightness(1.03); }
.topbar__tour-btn svg { width: 14px; height: 14px; }
/* Collapse the label to icon-only when the topbar runs out of room · prevents
 * the button from squeezing the page title ("Operations Overview" etc.) */
@media (max-width: 1100px) {
  .topbar__tour-btn span { display: none; }
  .topbar__tour-btn { padding: 6px 8px; }
}

/* Backdrop covers the whole viewport behind the spotlight + tooltip. */
.tour-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  z-index: 9000;
  pointer-events: auto;
  animation: tour-fade-in var(--t-base, 200ms) var(--ease, ease-out);
}

/* Spotlight cutout · uses an enormous box-shadow to mask everything except the
   target rect, which is left transparent. Cheaper than clip-path and supports
   smooth animated transitions. */
.tour-spotlight {
  position: fixed;
  z-index: 9000;
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(15, 23, 32, 0.65),
              0 0 0 3px rgba(63, 166, 111, 0.55),
              0 0 28px rgba(63, 166, 111, 0.45);
  pointer-events: none;
  transition: top var(--t-base, 200ms) var(--ease, ease),
              left var(--t-base, 200ms) var(--ease, ease),
              width var(--t-base, 200ms) var(--ease, ease),
              height var(--t-base, 200ms) var(--ease, ease);
}
/* When the spotlight is active, hide the plain backdrop (the spotlight's shadow
   already darkens everything outside the cutout). */
body.has-tour .tour-backdrop { display: none; }

/* Floating tooltip card */
.tour-tooltip {
  position: fixed;
  z-index: 9001;
  width: min(380px, calc(100vw - 32px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(15, 23, 32, 0.32), 0 4px 12px rgba(15, 23, 32, 0.12);
  overflow: hidden;
  animation: tour-slide-in var(--t-base, 220ms) var(--ease-out, cubic-bezier(.2,.8,.2,1));
}
.tour-tooltip.is-centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.tour-tooltip__progress {
  height: 4px;
  background: var(--bg-active);
  position: relative;
}
.tour-tooltip__progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500, #3FA66F), var(--brand-700, #2F8B58));
  transition: width var(--t-base, 240ms) var(--ease, ease);
}

.tour-tooltip__inner {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tour-tooltip__step {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-fg, var(--brand-700));
}

.tour-tooltip__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  line-height: 1.3;
}

.tour-tooltip__body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.tour-tooltip__fallback {
  font-size: 0.8125rem;
  color: var(--fg-tertiary);
  background: var(--bg-active);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  border-left: 3px solid var(--brand-500);
}

.tour-tooltip__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.tour-tooltip__spacer { flex: 1; }

/* Mobile: tooltip becomes a bottom sheet */
@media (max-width: 600px) {
  .tour-tooltip {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: none;
    transform: none;
  }
  .tour-tooltip.is-centered {
    transform: none;
  }
}

@keyframes tour-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tour-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  @keyframes tour-slide-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { transition: none; }
  .tour-tooltip,
  .tour-backdrop { animation: none; }
  .tour-tooltip__progress > span { transition: none; }
}

/* ============================================================ */
/* NOTIFICATIONS BELL + DROPDOWN                                  */
/* Topbar bell injected by js/notifications-bell.js               */
/* ============================================================ */

.topbar__notif-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--fg-primary);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.topbar__notif-bell:hover {
  transform: translateY(-1px);
  background: var(--bg-hover);
  border-color: rgba(63,166,111,.4);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.18);
}
.topbar__notif-bell:active { transform: translateY(0); }
.topbar__notif-bell:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.topbar__notif-bell__icon { display: inline-grid; place-items: center; }
.topbar__notif-bell__icon svg { width: 18px; height: 18px; }
.topbar__notif-bell[aria-expanded="true"] {
  background: var(--brand-bg-soft);
  border-color: rgba(63,166,111,.45);
  color: var(--brand-fg);
}

.topbar__notif-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill, 999px);
  background: #FF3B30;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-card), 0 2px 6px rgba(255,59,48,.4);
  animation: notifBadgePop .35s cubic-bezier(.22,1,.36,1) both;
  font-variant-numeric: tabular-nums;
}
.topbar__notif-bell__badge.is-hidden { display: none; }
@keyframes notifBadgePop {
  from { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* ----- Dropdown panel ------------------------------------------------- */
.notif-dropdown {
  position: fixed;
  top: 64px;
  right: 16px;
  width: min(380px, calc(100vw - 24px));
  max-height: 70vh;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-lg);
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifDropdownIn .22s cubic-bezier(.22,1,.36,1) both;
}
.notif-dropdown.is-hidden { display: none; }
@keyframes notifDropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.notif-dropdown__title {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--fg-primary);
  letter-spacing: -.01em;
}
.notif-dropdown__readall {
  background: transparent;
  border: none;
  color: var(--brand-fg);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm, 6px);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.notif-dropdown__readall:hover {
  background: var(--brand-bg-soft);
  color: var(--brand-500);
}

.notif-dropdown__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  min-height: 80px;
}

.notif-dropdown__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.notif-dropdown__viewall {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--brand-fg);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: var(--r-sm, 6px);
  transition: background var(--t-fast) var(--ease);
}
.notif-dropdown__viewall:hover { background: var(--brand-bg-soft); }

/* ----- Notification rows --------------------------------------------- */
.notif-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fg-primary);
  transition: background var(--t-fast) var(--ease);
  position: relative;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

.notif-item__dot {
  margin-top: 6px;
  margin-left: 8px;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}
.notif-item--unread::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--brand-500);
  border-radius: 0 2px 2px 0;
}

.notif-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notif-item__title {
  font-weight: 600;
  font-size: .875rem;
  color: var(--fg-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-item__detail {
  font-size: .8125rem;
  color: var(--fg-secondary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.notif-item__time {
  font-size: .72rem;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.notif-item__mark {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--brand-500);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.notif-item:hover .notif-item__mark { opacity: 1; }
.notif-item__mark:hover { background: var(--brand-bg-soft); }

/* Fresh-item slide-in for live updates */
@keyframes notifFreshSlide {
  0%   { opacity: 0; transform: translateY(-12px); background: rgba(63,166,111,.18); box-shadow: inset 3px 0 0 var(--brand-500); }
  60%  { opacity: 1; transform: translateY(0);     background: rgba(63,166,111,.10); box-shadow: inset 3px 0 0 var(--brand-500); }
  100% { opacity: 1; transform: translateY(0);     background: transparent;          box-shadow: inset 3px 0 0 transparent; }
}
.notif-item--fresh {
  animation: notifFreshSlide 1.6s cubic-bezier(.22,1,.36,1) both;
}

/* ----- Empty state --------------------------------------------------- */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
}
.notif-empty__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-active);
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.notif-empty__icon svg { width: 22px; height: 22px; }
.notif-empty__title {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--fg-primary);
}
.notif-empty__sub {
  font-size: .8125rem;
  color: var(--fg-tertiary);
}

/* ----- Mobile bottom-sheet ------------------------------------------- */
@media (max-width: 600px) {
  .notif-dropdown {
    position: fixed;
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    animation: notifSheetIn .25s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes notifSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .notif-dropdown__header { padding: 16px 18px 12px; }
  .notif-dropdown__header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notif-dropdown,
  .notif-item--fresh,
  .topbar__notif-bell__badge { animation: none !important; }
}

/* ============================================================ */
/* PRODUCTION BATCHES · status pills, hero, timeline, alerts     */
/* ============================================================ */

/* Status pills · sit alongside .badge but with batch-specific colour map. */
.batch-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--bg-subtle, rgba(0,0,0,.06));
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle, rgba(0,0,0,.08));
  white-space: nowrap;
}
.batch-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.batch-status--draft       { background: rgba(120,120,128,.12); color: var(--fg-tertiary); border-color: rgba(120,120,128,.25); }
.batch-status--planned     { background: rgba(63,166,111,.12); color: var(--brand-700, #297548); border-color: rgba(63,166,111,.30); }
.batch-status--blocked     { background: rgba(255,59,48,.10);  color: #C82319; border-color: rgba(255,59,48,.28); }
.batch-status--in_progress { background: rgba(13,150,236,.10); color: #0E73B5; border-color: rgba(13,150,236,.28); }
.batch-status--completed   { background: rgba(52,199,89,.12);  color: #1F9D55; border-color: rgba(52,199,89,.32); }
.batch-status--cancelled   { background: rgba(120,120,128,.16); color: var(--fg-tertiary); border-color: rgba(120,120,128,.30); text-decoration: line-through; }

/* Detail-page hero */
.batch-hero { padding: 18px 20px 14px; }
.batch-hero__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.batch-hero__ref { font-size: .8125rem; color: var(--fg-tertiary); margin-bottom: 4px; }
.batch-hero__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; color: var(--fg-primary); margin-bottom: 8px; }
.batch-hero__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.batch-hero__qty { display: flex; gap: 24px; }
.batch-hero__qty-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-tertiary); }
.batch-hero__qty-v { font-size: 1.25rem; font-weight: 700; color: var(--fg-primary); }

/* Horizontal timeline strip */
.batch-timeline {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
  flex-wrap: wrap;
}
.batch-timeline__step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 88px; flex: none;
}
.batch-timeline__dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .82rem;
  background: var(--bg-subtle, rgba(0,0,0,.06));
  color: var(--fg-tertiary);
  border: 2px solid var(--border-subtle, rgba(0,0,0,.10));
  transition: all .25s cubic-bezier(.22,1,.36,1);
}
.batch-timeline__step.is-done .batch-timeline__dot {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 4px 12px -4px rgba(63,166,111,.55);
}
.batch-timeline__label { font-size: .75rem; font-weight: 600; color: var(--fg-secondary); }
.batch-timeline__step.is-done .batch-timeline__label { color: var(--brand-700, #297548); }
.batch-timeline__ts { font-size: .68rem; color: var(--fg-tertiary); }
.batch-timeline__bar {
  flex: 1; height: 2px; min-width: 24px;
  background: var(--border-subtle, rgba(0,0,0,.10));
  border-radius: 2px;
  margin-top: -22px;
}
.batch-timeline__bar.is-done {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
}

/* Shortage alert card (BLOCKED batches) */
.batch-shortage-alert {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,159,10,.10);
  border: 1px solid rgba(255,159,10,.32);
  border-left: 4px solid #FF9F0A;
  animation: pgFadeUp .4s cubic-bezier(.22,1,.36,1) both;
}
.batch-shortage-alert__icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,159,10,.18);
  color: #B36800;
}
.batch-shortage-alert__title {
  font-weight: 700; font-size: .95rem; color: var(--fg-primary);
  margin-bottom: 4px;
}
.batch-shortage-alert__sub { font-size: .825rem; color: var(--fg-secondary); margin-bottom: 8px; }
.batch-shortage-alert__list {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  font-size: .825rem; color: var(--fg-primary);
}
.batch-shortage-alert__list li::before { content: '· '; color: #B36800; font-weight: 700; }

/* Detail tab panes (mirrors HR tabpane behaviour) */
.pb-tabpane { display: none; }
.pb-tabpane.is-active { display: block; animation: pgFadeUp .35s cubic-bezier(.22,1,.36,1) both; }

/* Quick guide list on the Batches landing page */
.pb-flow {
  margin: 0; padding: 0 0 0 18px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .875rem; color: var(--fg-secondary);
}
.pb-flow li strong { color: var(--fg-primary); }

/* 5-column KPI grid (used on Batches list hero strip) */
.section-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .section-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .section-grid.cols-5 { grid-template-columns: 1fr; } }
.section-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1280px) { .section-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .section-grid.cols-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .section-grid.cols-6 { grid-template-columns: 1fr; } }

@media (max-width: 700px) {
  .batch-hero__head { grid-template-columns: 1fr; }
  .batch-hero__qty { gap: 16px; flex-wrap: wrap; }
  .batch-timeline { gap: 0; }
  .batch-timeline__step { min-width: 64px; }
  .batch-timeline__bar { display: none; }
}

/* ---------- Sales-order dispatch status badges (per-line FG availability) ---------- */
.dispatch-status { letter-spacing: .02em; font-weight: 600; min-width: 84px; justify-content: center; display: inline-flex; }
.dispatch-status--ok      { background: rgba(52,199,89,.18);  color: #1F8F40; }
.dispatch-status--short   { background: rgba(255,59,48,.18);  color: #C72A20; }
.dispatch-status--pending { background: rgba(255,159,10,.20); color: #B7660A; }
[data-theme="dark"] .dispatch-status--ok      { color: #50D26A; }
[data-theme="dark"] .dispatch-status--short   { color: #FF6961; }
[data-theme="dark"] .dispatch-status--pending { color: #FFB849; }

/* Highlight short / pending rows with a subtle left border in the SO line table. */
tr[data-dispatch-status="SHORT"]   td:first-child { box-shadow: inset 3px 0 0 var(--danger, #C72A20); }
tr[data-dispatch-status="PENDING"] td:first-child { box-shadow: inset 3px 0 0 var(--warning, #B7660A); }

/* ---------- Item-detail BOM tab ---------- */
.bom-tab__table th, .bom-tab__table td { white-space: nowrap; }
.bom-tab__table tbody tr:hover { background: var(--bg-subtle, rgba(0,0,0,.03)); }
.bom-tab__empty { padding: 28px 12px; text-align: center; }
.item-tab-panel { animation: itemTabFadeIn .16s ease-out; }
@keyframes itemTabFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ============================================================ */
/* LIVE RUN PANE + LIVE FLOOR view                                */
/* ============================================================ */

@keyframes pbLiveDot { 0%,100% { box-shadow: 0 0 0 0 rgba(63,166,111,.7); } 50% { box-shadow: 0 0 0 6px rgba(63,166,111,0); } }
.pb-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500, #3FA66F); margin-right: 6px;
  animation: pbLiveDot 1.6s infinite;
}

.pb-live-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  grid-template-areas: "ring tput" "rm tick"; gap: 16px;
}
@media (max-width: 1100px) { .pb-live-grid { grid-template-columns: 1fr; grid-template-areas: "ring" "tput" "rm" "tick"; } }
.pb-live-ring-card   { grid-area: ring; }
.pb-live-tput-card   { grid-area: tput; }
.pb-live-rm-card     { grid-area: rm; }
.pb-live-ticker-card { grid-area: tick; }

@keyframes pbCardTick { 0% { box-shadow: 0 0 0 0 rgba(63,166,111,.4); } 60% { box-shadow: 0 0 0 12px rgba(63,166,111,0); } 100% { box-shadow: 0 0 0 0 rgba(63,166,111,0); } }
.pb-live-ring-card.is-tick { animation: pbCardTick .65s ease-out; }

.pb-live-ring-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; padding: 14px 18px 22px; }
@media (max-width: 700px) { .pb-live-ring-wrap { grid-template-columns: 1fr; } }
.pb-live-ring { width: 240px; max-width: 100%; height: auto; }

.pb-live-ring-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
.pb-live-stat__l { font-size: .72rem; font-weight: 600; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.pb-live-stat__v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--fg-primary); font-variant-numeric: tabular-nums; transition: color .3s ease; margin-top: 2px; }

.pb-live-rm-list { padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.pb-live-rm__head { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; margin-bottom: 6px; }
.pb-live-rm__name { color: var(--fg-primary); }
.pb-live-rm__qty  { color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.pb-live-rm__bar  { height: 8px; background: rgba(0,0,0,.07); border-radius: 999px; overflow: hidden; }
@keyframes pbRmFill { from { width: 0; } to { width: var(--w, 0%); } }
.pb-live-rm__fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); border-radius: 999px; width: var(--w, 0%); animation: pbRmFill 1.2s cubic-bezier(.22,1,.36,1) both; }

.pb-live-ticker { list-style: none; padding: 6px 14px 14px; margin: 0; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.pb-live-tick { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border-subtle); font-size: .8125rem; }
.pb-live-tick:last-child { border-bottom: none; }
.pb-live-tick__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 6px rgba(63,166,111,.5); }
@keyframes pbTickIn { from { opacity: 0; transform: translateX(-12px); background: rgba(63,166,111,.16); } to { opacity: 1; transform: none; background: transparent; } }
.pb-live-tick--fresh { animation: pbTickIn .6s cubic-bezier(.22,1,.36,1) both; }
.pb-live-tick--start .pb-live-tick__dot { background: #FF9F0A; }

/* ---- Live Floor view ---- */
.lf-hero { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 0 22px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); animation: pgFadeUp .5s cubic-bezier(.22,1,.36,1) both; flex-wrap: wrap; gap: 16px; }
.lf-hero__title { font-size: 2.25rem; font-weight: 700; letter-spacing: -.032em; line-height: 1.1; margin: 0; }
.lf-hero__sub   { color: var(--fg-secondary); font-size: .9375rem; margin-bottom: 4px; }
.lf-clock { display: inline-flex; align-items: center; gap: 12px; font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-fg); letter-spacing: -.01em; padding: 8px 18px; border-radius: 999px; background: var(--brand-bg-soft); border: 1px solid rgba(63,166,111,.25); }
.lf-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); animation: pbLiveDot 1.6s infinite; }

.lf-kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1280px) { .lf-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .lf-kpi-row { grid-template-columns: 1fr; } }
.lf-kpi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px 18px; animation: pgFadeUp .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--idx, 0) * 60ms); transition: transform .25s ease, box-shadow .25s ease; }
.lf-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(63,166,111,.18); }
.lf-kpi--warn { border-color: rgba(255,159,10,.4); }
.lf-kpi--warn .lf-kpi__v { color: #FF9F0A; }
.lf-kpi__l { font-size: .72rem; font-weight: 700; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.lf-kpi__v { font-size: 1.875rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.lf-kpi__v--money { color: var(--brand-fg); }
.lf-kpi__sub { font-size: .8125rem; color: var(--fg-secondary); }
.lf-kpi__bar { margin-top: 8px; height: 6px; background: rgba(0,0,0,.07); border-radius: 999px; overflow: hidden; }
.lf-kpi__bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); border-radius: 999px; width: var(--w, 0%); animation: pbRmFill 1.4s cubic-bezier(.22,1,.36,1) both; }

.lf-batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
.lf-batch { display: grid; grid-template-rows: auto 1fr auto auto; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: inherit; position: relative; overflow: hidden; animation: pgFadeUp .5s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--idx, 0) * 60ms); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lf-batch:hover { transform: translateY(-3px); border-color: rgba(63,166,111,.4); box-shadow: 0 14px 28px -10px rgba(0,0,0,.18); }
.lf-batch.is-live { border-color: rgba(63,166,111,.45); }
.lf-batch.is-live::before { content:''; position: absolute; top:0; right:0; width:80px; height:80px; background: radial-gradient(circle at top right, rgba(63,166,111,.18), transparent 70%); pointer-events: none; }
.lf-batch__head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.lf-batch__ref { font-weight: 700; font-size: .82rem; color: var(--brand-fg); font-family: var(--font-mono); letter-spacing: .02em; }
.lf-batch__product { font-size: .82rem; color: var(--fg-secondary); margin-top: 2px; line-height: 1.3; }
.lf-batch__ring-wrap { display: grid; place-items: center; padding: 6px 0; }
.lf-batch__ring { width: 140px; height: 140px; }
.lf-batch__ring-fill { transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1); }
.lf-batch__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.lf-batch__l { font-size: .7rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.lf-batch__v { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: color .3s ease; }

.lf-status { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; }
.lf-status--draft       { background: var(--bg-active); color: var(--fg-secondary); }
.lf-status--planned     { background: var(--brand-bg-soft); color: var(--brand-fg); }
.lf-status--blocked     { background: rgba(255,159,10,.16); color: #B7660A; }
.lf-status--in_progress { background: rgba(90,200,250,.18); color: #0A85B9; }
.lf-status--in_progress::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: #0A85B9; animation: pbLiveDot 1.6s infinite; }
.lf-status--completed   { background: rgba(52,199,89,.16); color: #1F8F40; }
.lf-status--cancelled   { background: rgba(255,59,48,.14); color: #C72A20; }

@keyframes lfPulseFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.lf-batch__pulse-bar { margin-top: 8px; height: 3px; border-radius: 999px; background: rgba(63,166,111,.10); overflow: hidden; position: relative; }
.lf-batch__pulse-fill { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); animation: lfPulseFlow 1.8s infinite linear; }

.lf-stream-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lf-stream-card { padding-bottom: 14px; }
.lf-stream { list-style: none; margin: 0; padding: 6px 14px 12px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.lf-stream__item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-subtle); font-size: .8125rem; }
.lf-stream__item:last-child { border-bottom: none; }
.lf-stream__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 6px rgba(63,166,111,.5); }
.lf-stream__t   { font-size: .72rem; color: var(--fg-tertiary); white-space: nowrap; }
@keyframes lfStreamIn { from { opacity:0; transform: translateX(-12px); background: rgba(63,166,111,.18); } to { opacity:1; transform:none; background: transparent; } }
.lf-stream__item--fresh { animation: lfStreamIn .55s cubic-bezier(.22,1,.36,1) both; }

@media (prefers-reduced-motion: reduce) {
  .pb-live-dot, .lf-pulse, .lf-batch.is-live::before, .lf-batch__pulse-fill,
  .pb-live-ring-card.is-tick, .pb-live-tick--fresh, .lf-stream__item--fresh,
  .lf-batch, .lf-kpi { animation: none !important; transition: none !important; }
}

/* ============================================================
   PRODUCTION BATCHES · WIP intelligence panel
   Mode segmented control + animated KPI tiles, progress bars.
   Reuses .kpi, .card, .badge, .table--animated.
   ============================================================ */
.pb-modepane { display: none; }
.pb-modepane.is-active { display: block; animation: pgFadeUp .4s cubic-bezier(.22,1,.36,1) both; }

.wip-kpi {
  position: relative;
  animation: pgFadeUp .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 70ms);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wip-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(63,166,111,.18);
  border-color: rgba(63,166,111,.4);
}
.wip-card {
  animation: pgFadeUp .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 70ms + .12s);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(29,86,52,.12);
}

.wip-progress {
  position: relative;
  width: 140px;
  height: 18px;
  background: var(--bg-active);
  border-radius: 999px;
  overflow: hidden;
}
.wip-progress__bar {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  border-radius: 999px;
  animation: wipProgFill 1.4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 30ms + .15s);
}
.wip-progress__lbl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
@keyframes wipProgFill { from { width: 0; } to { width: var(--w, 0%); } }

@media (prefers-reduced-motion: reduce) {
  .wip-kpi, .wip-card, .wip-progress__bar { animation: none !important; transition: none !important; }
  .wip-progress__bar { width: var(--w, 0%); }
}

/* ======================================================================
 * Raw Material Intake view (rm-intake.js)
 * KPI count-up · 4 method cards · scan station · pre-intake hint
 * ====================================================================== */

/* KPI tiles · gentle pop on number land */
@keyframes rmKpiPop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1);    }
}
.rm-kpi {
  animation: rmKpiPop .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 90ms);
}
.rm-kpi .kpi__value {
  background: linear-gradient(180deg, var(--fg-primary), var(--brand-fg));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Method cards ---- */
.rm-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 1280px) { .rm-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .rm-card-grid { grid-template-columns: 1fr; } }

@keyframes rmCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.rm-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 18px 18px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: rmCardIn .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 90ms);
}
.rm-card:hover {
  transform: translateY(-3px);
  border-color: rgba(63,166,111,.35);
  box-shadow: 0 18px 32px -14px rgba(63,166,111,.32);
}
.rm-card::after {
  /* soft glow corner · colour varies by tone */
  content: '';
  position: absolute;
  inset: -40% -40% auto auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle at center, var(--rm-glow, rgba(63,166,111,.28)), transparent 70%);
  opacity: .55;
  pointer-events: none;
  transition: opacity .3s ease;
}
.rm-card:hover::after { opacity: .9; }
.rm-card--brand   { --rm-glow: rgba(63,166,111,.28); }
.rm-card--info    { --rm-glow: rgba(90,200,250,.30); }
.rm-card--warn    { --rm-glow: rgba(255,159,10,.30); }
.rm-card--success { --rm-glow: rgba(52,199,89,.28);  }

/* Icon pill in a coloured circle that pulses */
.rm-card__icon-wrap {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--rm-glow, rgba(63,166,111,.16));
  color: var(--brand-fg);
}
.rm-card--info    .rm-card__icon-wrap { color: #0A85B9; }
.rm-card--warn    .rm-card__icon-wrap { color: #B7660A; }
.rm-card--success .rm-card__icon-wrap { color: #1F8F40; }
.rm-card__icon { display: grid; place-items: center; }
.rm-card__icon svg { width: 22px; height: 22px; }

@keyframes rmIconPulse {
  0%   { box-shadow: 0 0 0 0    rgba(63,166,111,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(63,166,111,0);   }
  100% { box-shadow: 0 0 0 0    rgba(63,166,111,0);   }
}
.rm-card__pulse {
  position: absolute; inset: 0;
  border-radius: 14px;
  animation: rmIconPulse 2.4s ease-out infinite;
}

/* Body / typography */
.rm-card__title-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rm-card__title {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--fg-primary);
}
.rm-card__audience {
  font-size: .65rem; letter-spacing: .08em; padding: 2px 8px;
}
.rm-card__blurb {
  margin-top: 6px;
  font-size: .8625rem; line-height: 1.45; color: var(--fg-secondary);
}
.rm-card__last {
  display: inline-flex; align-items: center;
  margin-top: 8px;
  padding: 3px 9px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px;
  background: var(--brand-bg-soft); color: var(--brand-fg);
}

/* CTA row */
.rm-card__cta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.rm-card__cta .btn { pointer-events: none; }

/* Live stream chart · today highlight on the last data point */
.rm-stream-today {
  filter: drop-shadow(0 0 6px rgba(63,166,111,.6));
}

/* CSV preview summary chips */
.rm-csv-summary { display: flex; gap: 6px; flex-wrap: wrap; }

/* Scan station modal */
.rm-scan { padding: 6px 0; }
.rm-scan__viewport {
  position: relative;
  height: 160px;
  border: 2px dashed rgba(63,166,111,.35);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-bg-soft) 0%, transparent 60%);
  display: grid; place-items: center;
  overflow: hidden;
}
.rm-scan__bigicon { color: var(--brand-fg); }
.rm-scan__bigicon svg { width: 64px; height: 64px; opacity: .6; }
@keyframes rmScanSweep {
  0%   { transform: translateY(-60px); opacity: 0;   }
  20%  {                                opacity: .9; }
  80%  {                                opacity: .9; }
  100% { transform: translateY(60px);   opacity: 0;   }
}
.rm-scan__pulse {
  position: absolute;
  left: 12%; right: 12%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  border-radius: 999px;
  animation: rmScanSweep 1.8s ease-in-out infinite;
}
.rm-scan-log {
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  font-size: .8125rem;
}
.rm-scan-log__row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-base);
  animation: rmCardIn .35s ease-out both;
}
.rm-scan-log__row--pending { opacity: .8; }
.rm-scan-log__row--ok      { background: rgba(52,199,89,.10);  color: #1F8F40; }
.rm-scan-log__row--err     { background: rgba(255,59,48,.10);  color: #C72A20; }
.rm-scan-log__t { font-size: .72rem; color: var(--fg-tertiary); }
.rm-scan-log__row--ok  .rm-scan-log__t { color: #1F8F40; }
.rm-scan-log__row--err .rm-scan-log__t { color: #C72A20; }

/* Pre-intake hint card · forward-looking dashed-border block */
.rm-hint {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  border: 1.5px dashed rgba(63,166,111,.35);
  background: linear-gradient(135deg, var(--brand-bg-soft) 0%, transparent 70%);
  animation: rmCardIn .6s cubic-bezier(.22,1,.36,1) both;
  animation-delay: 600ms;
}
.rm-hint__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--brand-bg-soft);
  color: var(--brand-fg);
}
.rm-hint__title {
  font-size: .95rem; font-weight: 700; color: var(--fg-primary);
  letter-spacing: -.01em; margin-bottom: 4px;
}
.rm-hint__body {
  font-size: .85rem; line-height: 1.5; color: var(--fg-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .rm-card, .rm-kpi, .rm-card__pulse, .rm-scan__pulse, .rm-hint,
  .rm-scan-log__row, .rm-method, .rm-method__pulse { animation: none !important; transition: none !important; }
}

/* ============================================================ */
/* RM Intake · capture-method LIST (linear, toggle on the right) */
/* ============================================================ */

.rm-method-list {
  list-style: none; margin: 0; padding: 4px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
@keyframes rmMethodIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.rm-method {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: rmMethodIn .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 70ms);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.rm-method:hover {
  transform: translateX(2px);
  border-color: rgba(63,166,111,.45);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.16), 0 0 0 1px rgba(63,166,111,.12) inset;
  background: var(--brand-bg-soft, rgba(63,166,111,.04));
}
.rm-method::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
  opacity: 0; transform: scaleY(.4);
  transition: opacity .25s ease, transform .25s ease;
}
.rm-method:hover::before { opacity: 1; transform: scaleY(1); }

/* Tone variants — left-edge gradient picks up the method's tone */
.rm-method--brand::before   { background: linear-gradient(180deg, #5FBE87, #1D5634); }
.rm-method--info::before    { background: linear-gradient(180deg, #5AC8FA, #0078A8); }
.rm-method--warn::before    { background: linear-gradient(180deg, #FFB347, #E0780A); }
.rm-method--success::before { background: linear-gradient(180deg, #34C759, #1F8F40); }

/* Icon pill on the left */
.rm-method__icon-wrap {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--brand-bg-soft, rgba(63,166,111,.10));
  color: var(--brand-fg);
}
.rm-method--info    .rm-method__icon-wrap { background: rgba(90,200,250,.14);  color: #0A85B9; }
.rm-method--warn    .rm-method__icon-wrap { background: rgba(255,159,10,.16);  color: #B7660A; }
.rm-method--success .rm-method__icon-wrap { background: rgba(52,199,89,.16);   color: #1F8F40; }

.rm-method__icon svg { width: 24px; height: 24px; }
@keyframes rmMethodPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: .55; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0; }
}
.rm-method__pulse {
  position: absolute; inset: 0; border-radius: 14px;
  border: 2px solid currentColor;
  animation: rmMethodPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* Body text */
.rm-method__body { min-width: 0; }
.rm-method__title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rm-method__title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--fg-primary); }
.rm-method__audience { font-size: .68rem; }
.rm-method__blurb { font-size: .8125rem; color: var(--fg-secondary); line-height: 1.4; }

/* CTA cluster on the right */
.rm-method__cta { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 160px; }
.rm-method__btn { justify-content: space-between; height: 38px; padding: 0 14px; font-weight: 600; }
.rm-method__btn--alt { font-weight: 500; opacity: .9; }
.rm-method__chevron { margin-left: 6px; opacity: .9; transition: transform .2s ease; }
.rm-method__btn:hover .rm-method__chevron { transform: translateX(3px); }

/* Mobile: stack body + CTA */
@media (max-width: 760px) {
  .rm-method { grid-template-columns: 48px 1fr; row-gap: 12px; }
  .rm-method__cta { grid-column: 1 / -1; flex-direction: row; min-width: 0; flex-wrap: wrap; }
  .rm-method__btn { flex: 1; min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-method, .rm-method__pulse { animation: none !important; transition: none !important; }
}

/* ============================================================ */
/* BOM Validation & Material Allocation                          */
/* ============================================================ */

@keyframes bomFlowDot { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes bomRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bomBodyOpen { from { max-height: 0; opacity: 0; } to { max-height: 1200px; opacity: 1; } }

/* Process flow strip */
.bom-flow-card { padding-bottom: 18px; }
.bom-flow {
  display: flex; align-items: center; padding: 18px 20px 4px;
  gap: 6px; flex-wrap: wrap;
}
.bom-flow__step {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  text-decoration: none; color: var(--fg-primary);
  flex: 1; min-width: 220px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.bom-flow__step:hover { transform: translateY(-2px); border-color: rgba(63,166,111,.45); box-shadow: 0 14px 28px -10px rgba(0,0,0,.18); }
.bom-flow__step.is-done { opacity: .82; }
.bom-flow__step.is-current {
  background: linear-gradient(135deg, rgba(63,166,111,.16), rgba(63,166,111,.06));
  border-color: rgba(63,166,111,.55);
  cursor: default;
}
.bom-flow__step.is-current:hover { transform: none; }
.bom-flow__num {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-bg-soft, rgba(63,166,111,.10));
  color: var(--brand-fg);
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.bom-flow__step.is-done .bom-flow__num { background: var(--brand-500); color: #fff; }
.bom-flow__step.is-current .bom-flow__num { background: var(--brand-500); color: #fff; box-shadow: 0 0 0 4px rgba(63,166,111,.18); }
.bom-flow__txt strong { display: block; font-size: .9375rem; }
.bom-flow__txt div { font-size: .75rem; color: var(--fg-secondary); margin-top: 2px; }
.bom-flow__arrow {
  flex: 0 1 60px;
  height: 3px; min-width: 30px;
  background: linear-gradient(90deg, rgba(63,166,111,.18), rgba(63,166,111,.55), rgba(63,166,111,.18));
  border-radius: 999px; position: relative; overflow: hidden;
}
.bom-flow__arrow-fill { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); animation: bomFlowDot 2s linear infinite; }
@media (max-width: 900px) { .bom-flow__arrow { display: none; } .bom-flow { flex-direction: column; align-items: stretch; } }

/* BOM listing rows */
.bom-list { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.bom-row {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  animation: bomRowIn .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 50ms);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bom-row.is-short { border-color: rgba(255,159,10,.4); }
.bom-row.is-ready:hover, .bom-row.is-short:hover { box-shadow: 0 10px 24px -10px rgba(0,0,0,.16); border-color: rgba(63,166,111,.45); }
.bom-row__head {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--bg-card);
  transition: background .15s ease;
}
.bom-row__head:hover { background: var(--brand-bg-soft, rgba(63,166,111,.04)); }
.bom-row__chevron { color: var(--fg-tertiary); transition: transform .25s ease; }
.bom-row.is-open .bom-row__chevron { transform: rotate(90deg); }
.bom-row__title { min-width: 0; }
.bom-row__product { font-size: .9375rem; font-weight: 600; color: var(--fg-primary); }
.bom-row__product strong { font-family: var(--font-mono); color: var(--brand-fg); }
.bom-row__sub { font-size: .8125rem; color: var(--fg-secondary); margin-top: 2px; }
.bom-row__health { white-space: nowrap; }
.bom-row__raise { white-space: nowrap; }
.bom-row__body {
  max-height: 0; overflow: hidden;
  border-top: 0;
  padding: 0 16px;
}
.bom-row.is-open .bom-row__body {
  padding: 14px 16px 18px;
  border-top: 1px solid var(--border-subtle);
  animation: bomBodyOpen .35s cubic-bezier(.22,1,.36,1) forwards;
}
.bom-row__lines { font-size: .8125rem; }
.bom-row__lines tr.is-short td { background: rgba(255,159,10,.05); }
.bom-row__lines tr.is-ok td { background: rgba(52,199,89,.04); }
.bom-row__alert {
  margin-top: 14px;
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px;
  background: rgba(255,159,10,.08);
  border: 1px solid rgba(255,159,10,.3);
  border-radius: 10px;
  color: var(--fg-primary);
}
.bom-row__alert [data-icon] { color: #B7660A; }

/* Raise PO modal · summary tiles + step flow */
.bom-po-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; padding: 4px 0 14px;
  margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle);
}
.bom-po-summary > div { padding: 10px 12px; background: var(--bg-subtle, rgba(0,0,0,.03)); border-radius: 10px; }
.bom-po-summary__l { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-tertiary); }
.bom-po-summary__v { font-size: .9375rem; font-weight: 600; margin-top: 4px; color: var(--fg-primary); }

.bom-po-flow {
  margin-top: 18px; display: flex; align-items: center; gap: 4px;
  padding: 14px; background: var(--bg-subtle, rgba(0,0,0,.03)); border-radius: 12px;
  flex-wrap: wrap;
}
.bom-po-flow__step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; flex: 1; min-width: 180px;
  font-size: .8125rem; color: var(--fg-secondary);
}
.bom-po-flow__num { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-500); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.bom-po-flow__arrow { flex: 0; width: 30px; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); }

/* RM allocation summary table tints */
.table tr.is-short td { background: rgba(255,159,10,.04); }
.table tr.is-ok td { background: rgba(52,199,89,.03); }

/* Subtle warn-tint kpi (allocation health below threshold) */
.kpi--warn { border-color: rgba(255,159,10,.35); }
.kpi--warn .kpi__value { color: #B7660A; }

@media (prefers-reduced-motion: reduce) {
  .bom-row, .bom-flow__arrow-fill { animation: none !important; transition: none !important; }
}

/* ============================================================ */
/* Production batch list · clickable row affordance              */
/* ============================================================ */

.pb-batch-table tbody tr {
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pb-batch-table tbody tr:hover {
  background: var(--brand-bg-soft, rgba(63,166,111,.06));
  box-shadow: inset 4px 0 0 var(--brand-500, #3FA66F);
}
.pb-batch-table tbody tr:hover td:first-child strong {
  color: var(--brand-fg);
}
.pb-batch-table tbody tr:hover .pb-open-btn {
  transform: translateX(2px);
  box-shadow: 0 6px 14px -4px rgba(63,166,111,.45);
}
.pb-batch-table__open-col { width: 100px; }
.pb-batch-table__open-cell { text-align: right; padding-right: 12px !important; }
.pb-open-btn { white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.pb-open-btn svg { display: inline-block; vertical-align: middle; }
@media (max-width: 760px) {
  .pb-batch-table__open-col, .pb-batch-table__open-cell { display: none; }
}

/* ============================================================ */
/* Form polish · required asterisk + invalid flash + labour block */
/* ============================================================ */

.ui-required {
  color: #FF3B30;
  font-weight: 700;
  margin-left: 2px;
}
.ui-form-hint {
  font-size: .72rem;
  color: var(--fg-tertiary);
  margin-top: 4px;
  line-height: 1.4;
}
@keyframes uiInvalidShake {
  0%, 100% { transform: translateX(0); border-color: #FF3B30; }
  20%      { transform: translateX(-4px); border-color: #FF3B30; }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  animation: uiInvalidShake .55s cubic-bezier(.36,.07,.19,.97) both;
  box-shadow: 0 0 0 4px rgba(255,59,48,.18);
  border-color: #FF3B30 !important;
}

/* Labour assignment block inside the new-batch modal */
.pb-labour-block {
  margin: 14px 0 6px;
  padding: 14px 16px 6px;
  border: 1px solid rgba(63,166,111,.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(63,166,111,.06), rgba(63,166,111,.02));
}
.pb-labour-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.pb-labour-block__title {
  font-weight: 700; font-size: .9375rem;
  color: var(--fg-primary); letter-spacing: -.005em;
}

/* ============================================================ */
/* WIP Tracking · Step 4                                          */
/* ============================================================ */

@keyframes wipFlowDot { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes wipBatchIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wipPulseFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes wipPulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(255,159,10,.6); } 50% { box-shadow: 0 0 0 6px rgba(255,159,10,0); } }

/* Process flow strip */
.wip-flow-card { padding-bottom: 18px; }

/* =====================================================================
   Floor / tablet polish · larger touch targets on Tally + QC + Scan
   Targets ≤900px viewport (typical 10" tablet in portrait or landscape)
   Per client brief: "Tablet/mobile compatibility for floor operations"
   ===================================================================== */
@media (max-width: 900px) {
  /* Tally modal · hourly count grid is the primary touch surface */
  .ts-modal { width: min(940px, 96vw); max-height: 96vh; }
  .ts-modal__body { padding: 14px 16px; }
  .ts-hourly-table input.input { font-size: 1.05rem; padding: 10px 8px; min-height: 44px; }
  .ts-hourly-table th, .ts-hourly-table td { padding: 8px 6px; }

  /* Tally finalize CTA · much bigger thumb-friendly button */
  .ts-finalize__cta { padding: 18px 22px; font-size: 1.12rem; }
  .ts-finalize__card .ts-field input.input { font-size: 1rem; padding: 10px 12px; min-height: 44px; }

  /* QC inspection · pass/fail/rework outcome buttons */
  #qc-pass, #qc-fail, #qc-rework { min-height: 56px; font-size: 1.05rem; padding: 14px 18px; }
  .qc-modal__title { font-size: 1.15rem; }
  .qc-check-row { padding: 10px 8px; }
  /* QC 16-point checks are <button class="qc-check-btn">, not radios. Boost
   * touch target so floor inspectors can tap PASS/FAIL/NA cleanly on tablet. */
  .qc-check-row .qc-check-btn { min-height: 44px; padding: 10px 14px; font-size: 1rem; }

  /* Production batch list · keep the "Open" cell visible on tablet portrait.
   * The previous rule (.pb-batch-table__open-cell { display:none } at ≤760px)
   * was an old desktop-only assumption that left tablet users with no way to
   * drill into a batch. Now visible from ~600px up. */
  .pb-batch-table__open-cell { display: table-cell !important; }
  .pb-batch-table tr[data-batch-id] { cursor: pointer; } /* whole row tappable as backup */

  /* Quick Dispatch · delete-line button is .btn--sm (28px); raise to WCAG min */
  #dh-lines-body .dh-l-del, .pb-open-btn { min-height: 44px; min-width: 44px; }

  /* Generic .btn (Close / Cancel etc.) also needs to be tap-friendly on tablet */
  .ts-modal .btn, .qc-modal .btn, .qrs-modal .btn { min-height: 40px; padding: 8px 14px; }

  /* QC queue tiles · stack 1-up so each is a tap target */
  .qc-queue-grid { grid-template-columns: 1fr; }

  /* Scan station camera modal · ensure inputs are big */
  .rm-scan__viewport { aspect-ratio: 4 / 3; }
  #rm-scan-input { font-size: 1.05rem; padding: 12px; min-height: 48px; }
  .qrs-modal { width: min(680px, 96vw); }
  .qrs-stage { aspect-ratio: 3 / 4; }
  .qrs-tools select, .qrs-tools button { font-size: 1rem; min-height: 40px; }

  /* Floor-mode buttons · primary actions get bigger thumbs */
  .btn.btn--primary, .btn.btn--brand { min-height: 44px; }
}
@media (max-width: 600px) {
  /* Tablet portrait fallback · hide secondary KPI tiles to save space */
  .section-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .ts-modal__head { flex-wrap: wrap; gap: 8px; }
  .ts-modal__sub { font-size: .76rem; }
  .lineage-strip { padding: 10px; }
}


/* =====================================================================
   Data lineage breadcrumb · batch detail · single source of truth trace
   ===================================================================== */
.lineage-card {
  border: 1px solid rgba(63, 166, 111, 0.25);
  background: linear-gradient(135deg, rgba(63, 166, 111, 0.05), transparent);
}
[data-theme="dark"] .lineage-card {
  background: linear-gradient(135deg, rgba(127, 208, 160, 0.08), transparent);
  border-color: rgba(127, 208, 160, 0.2);
}
.lineage-strip {
  display: flex; align-items: stretch; gap: 8px;
  padding: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lineage-step {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform var(--t-fast, 160ms) ease;
}
a.lineage-step:hover { transform: translateY(-2px); }
.lineage-step--done       { border-top-color: var(--brand-500); background: linear-gradient(180deg, rgba(63,166,111,.08), transparent 60%); }
.lineage-step--in-progress{ border-top-color: #F59E0B; background: linear-gradient(180deg, rgba(245,158,11,.10), transparent 60%); }
.lineage-step--pending    { border-top-color: var(--border); opacity: .72; }
.lineage-step--current    { border-top-color: var(--brand-700); background: linear-gradient(180deg, rgba(63,166,111,.14), transparent 60%); box-shadow: 0 0 0 1px rgba(63,166,111,.35) inset; }
.lineage-step--fail       { border-top-color: #EF4444; background: linear-gradient(180deg, rgba(239,68,68,.10), transparent 60%); }
.lineage-step__label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-tertiary);
}
.lineage-step__detail {
  font-size: .82rem; color: var(--fg-primary);
}
.lineage-arrow {
  display: inline-flex; align-items: center;
  color: var(--fg-tertiary);
  font-size: 1.5rem; line-height: 1;
  padding: 0 2px;
  user-select: none;
  flex: none;
}
@media (max-width: 820px) {
  .lineage-strip { flex-direction: column; }
  .lineage-arrow { display: none; }
}


/* =====================================================================
   Exceptions banner · dashboard top · operational issues at a glance
   ===================================================================== */
.exception-banner {
  margin: 0 0 18px 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(255, 159, 10, 0.06));
  border: 1px solid rgba(239, 68, 68, 0.35);
  position: relative;
  animation: pgRowIn .4s ease both;
}
[data-theme="dark"] .exception-banner {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(255, 159, 10, 0.08));
  border-color: rgba(239, 68, 68, 0.4);
}
.exception-banner__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.exception-banner__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  color: #fff;
  display: inline-grid; place-items: center;
  flex: none;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
  animation: pgBadgePulse 1.6s ease-in-out infinite;
}
.exception-banner__icon svg { width: 18px; height: 18px; }
.exception-banner__title {
  font-weight: 800; font-size: 1.02rem;
  color: var(--fg-primary);
}
.exception-banner__sub {
  font-size: .82rem; color: var(--fg-secondary);
}
.exception-banner__dismiss {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  width: 30px; height: 30px;
  border-radius: 8px;
  cursor: pointer; font-size: 18px;
  display: inline-grid; place-items: center;
}
.exception-banner__dismiss:hover { background: var(--bg-hover); }
.exception-banner__chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.exception-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast, 160ms) ease, box-shadow var(--t-fast, 160ms) ease;
}
.exception-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,.2); }
.exception-chip--high   { border-left-color: #EF4444; }
.exception-chip--medium { border-left-color: #F59E0B; }
.exception-chip--low    { border-left-color: #94A3B8; }
.exception-chip__count {
  grid-row: 1 / 3;
  font-size: 1.45rem; font-weight: 900;
  color: var(--fg-primary);
  letter-spacing: -.02em;
  line-height: 1;
}
.exception-chip--high   .exception-chip__count { color: #B91C1C; }
.exception-chip--medium .exception-chip__count { color: #B45309; }
[data-theme="dark"] .exception-chip--high   .exception-chip__count { color: #F87171; }
[data-theme="dark"] .exception-chip--medium .exception-chip__count { color: #FBBF24; }
.exception-chip__label { font-size: .85rem; font-weight: 700; color: var(--fg-primary); }
.exception-chip__detail { font-size: .72rem; color: var(--fg-tertiary); }
@media (max-width: 700px) {
  .exception-banner__chips { grid-template-columns: 1fr; }
}


/* =====================================================================
   QC Trends panel · pass-rate sparkline + bottleneck + per-machine
   ===================================================================== */
.qc-trend-card {
  border: 1px solid rgba(99, 102, 241, 0.30);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(63, 166, 111, 0.03));
}
[data-theme="dark"] .qc-trend-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(127, 208, 160, 0.05));
  border-color: rgba(127, 208, 160, 0.25);
}
.qc-trend-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  padding: 14px;
}
@media (max-width: 1100px) { .qc-trend-grid { grid-template-columns: 1fr; } }
.qc-trend-spark, .qc-trend-bottleneck, .qc-trend-machines {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.qc-trend-spark__title {
  font-size: .76rem; font-weight: 700; color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.qc-trend-spark__labels {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--fg-tertiary);
  margin-top: 4px;
}
.qc-trend-bot__list { list-style: none; padding: 0; margin: 0; }
.qc-trend-bot__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  animation: pgRowIn .35s calc(var(--idx, 0) * 60ms) ease both;
}
.qc-trend-bot__row:last-child { border-bottom: 0; }
.qc-trend-bot__rank {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  color: #fff;
  font-weight: 800; font-size: .78rem;
  display: inline-grid; place-items: center;
}
.qc-trend-bot__check {
  flex: 1; font-size: .88rem;
  text-transform: capitalize;
  color: var(--fg-primary);
}
.qc-trend-bot__count {
  font-size: .76rem; font-weight: 700;
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.12);
  padding: 2px 8px; border-radius: 999px;
}
[data-theme="dark"] .qc-trend-bot__count { color: #FCA5A5; background: rgba(239, 68, 68, 0.2); }
.qc-trend-mc-table {
  width: 100%; border-collapse: collapse; font-size: .86rem;
}
.qc-trend-mc-table th, .qc-trend-mc-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.qc-trend-mc-table th {
  font-size: .68rem; color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: .06em;
}
.qc-trend-mc-table td.num, .qc-trend-mc-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.qc-trend-mc-bar {
  position: relative; height: 16px;
  background: var(--bg-input);
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.qc-trend-mc-bar__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 8px;
  transition: width var(--t-base, 240ms) var(--ease, ease-out);
}
.qc-trend-mc-bar__label {
  position: relative; display: block;
  text-align: center; line-height: 16px;
  font-size: .68rem; font-weight: 700;
  color: var(--fg-primary);
  mix-blend-mode: difference; filter: invert(1);
}


/* =====================================================================
   Integrations · Financial-system bridge card
   ===================================================================== */
.int-bridge-card {
  border: 1px solid rgba(63, 166, 111, 0.30);
  background: linear-gradient(135deg, rgba(63, 166, 111, 0.06), rgba(63, 166, 111, 0.02));
  position: relative; overflow: hidden;
}
[data-theme="dark"] .int-bridge-card {
  background: linear-gradient(135deg, rgba(63, 166, 111, 0.14), rgba(127, 208, 160, 0.04));
  border-color: rgba(127, 208, 160, 0.32);
}
.int-bridge-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 12px rgba(63, 166, 111, 0.7), 0 0 0 4px rgba(63, 166, 111, 0.15);
  animation: pgBadgePulse 1.6s ease-in-out infinite;
  display: inline-block;
}

.int-bridge-targets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.int-bridge-target {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.int-bridge-target.is-configured { border-color: rgba(63, 166, 111, 0.4); }
.int-bridge-target__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.int-bridge-target__name { font-weight: 700; font-size: .9rem; color: var(--fg-primary); }
.int-bridge-target__meta { font-size: .76rem; color: var(--fg-secondary); }

.int-bridge-wizards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px;
}
@media (max-width: 980px) { .int-bridge-wizards { grid-template-columns: 1fr; } }
.int-bridge-wizard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.int-bridge-wizard--import {
  border-color: rgba(255, 159, 10, 0.4);
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.05), rgba(255, 159, 10, 0));
}
[data-theme="dark"] .int-bridge-wizard--import {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.12), rgba(255, 159, 10, 0.02));
}
.int-bridge-wizard__head { display: flex; align-items: center; gap: 12px; }
.int-bridge-wizard__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #fff;
  display: inline-grid; place-items: center;
  flex: none;
}
.int-bridge-wizard--import .int-bridge-wizard__icon {
  background: linear-gradient(135deg, #FFB347, #E0780A);
}
.int-bridge-wizard__icon svg { width: 18px; height: 18px; }
.int-bridge-wizard__title { font-weight: 800; font-size: .98rem; }
.int-bridge-wizard__sub { font-size: .78rem; color: var(--fg-secondary); margin-top: 1px; }
.int-bridge-wizard__sub code {
  background: var(--bg-input); border: 1px solid var(--border-subtle);
  padding: 1px 5px; border-radius: 4px; font-size: .76rem;
}
.int-bridge-wizard__form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px; align-items: end;
}
.int-bridge-wizard--import .int-bridge-wizard__form {
  grid-template-columns: 2fr 2fr auto;
}
.int-bridge-wizard__form label {
  font-size: .72rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .06em;
  display: flex; flex-direction: column; gap: 4px;
}
.int-bridge-wizard__form .input, .int-bridge-wizard__form .select {
  font-size: .88rem; padding: 6px 8px;
}
.int-bridge-wizard__check {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: normal;
  font-size: .78rem; color: var(--fg-secondary);
}
.int-bridge-wizard__btn {
  grid-column: -2 / -1;
  align-self: end;
}
.int-bridge-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: .82rem;
  color: var(--fg-secondary);
  background: rgba(63, 166, 111, 0.04);
}
.int-bridge-foot code {
  font-family: 'Roboto Mono','JetBrains Mono',Consolas,monospace;
  background: var(--bg-input); border: 1px solid var(--border-subtle);
  padding: 1px 5px; border-radius: 4px; font-size: .78rem;
}


/* =====================================================================
   AI Insights · 4-pillar operational intelligence card
   ===================================================================== */
.ai-insight-card {
  border: 1px solid rgba(99, 102, 241, 0.30);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(63, 166, 111, 0.04));
  position: relative; overflow: hidden;
}
[data-theme="dark"] .ai-insight-card {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(63, 166, 111, 0.08));
  border-color: rgba(127, 208, 160, 0.30);
}
.ai-insight-card__sparkle {
  width: 18px; height: 18px;
  background: radial-gradient(circle, #6366F1 30%, transparent 70%);
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.7);
  animation: pgBadgePulse 1.8s ease-in-out infinite;
  display: inline-block;
}
.ai-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px;
}
@media (max-width: 1100px) { .ai-insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ai-insight-grid { grid-template-columns: 1fr; } }

.ai-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  animation: pgRowIn .45s calc(var(--idx, 0) * 70ms) ease both;
  position: relative; overflow: hidden;
  color: var(--brand-700);
}
[data-theme="dark"] .ai-tile { color: #A8E2BF; }
.ai-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, currentColor, transparent 60%);
  opacity: .06;
  pointer-events: none;
}
.ai-tile--good     { color: #16A34A; }
.ai-tile--watch    { color: #F59E0B; }
.ai-tile--alert    { color: #EF4444; }
[data-theme="dark"] .ai-tile--good  { color: #4ADE80; }
[data-theme="dark"] .ai-tile--watch { color: #FBBF24; }
[data-theme="dark"] .ai-tile--alert { color: #F87171; }

.ai-tile__head { display: flex; align-items: center; gap: 8px; }
.ai-tile__icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: currentColor;
  /* NOTE: do NOT set `color: #fff` here — currentColor for background
     evaluates to whatever `color` resolves to on the SAME element, so
     overriding to white turns the container into white-on-white (icon
     vanishes). Let color inherit from .ai-tile band class, then force
     the inner SVG strokes to white below. */
  display: inline-grid; place-items: center;
  filter: saturate(.9) brightness(.92);
}
.ai-tile__icon svg { color: #fff; width: 18px; height: 18px; stroke: #fff; }
.ai-tile__title { flex: 1; font-weight: 800; font-size: .92rem; color: var(--fg-primary); }
.ai-tile__band {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px;
  background: currentColor;
  color: #fff;
  filter: saturate(.85);
}
.ai-tile__score-row { display: flex; align-items: center; justify-content: space-between; }
.ai-tile__score {
  font-size: 2.4rem; font-weight: 900;
  letter-spacing: -.03em; line-height: 1;
  color: var(--fg-primary);
}
.ai-tile__score::after { content: ''; }
.ai-tile__ring circle { transition: stroke-dashoffset 800ms cubic-bezier(.4,0,.2,1); }
.ai-tile__sub {
  font-size: .78rem; color: var(--fg-secondary);
  min-height: 32px;
}
.ai-tile__signals {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
  margin-top: 4px;
}
.ai-tile__signal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem;
}
.ai-tile__signal-label { color: var(--fg-tertiary); }
.ai-tile__signal-value { font-weight: 700; color: var(--fg-primary); font-variant-numeric: tabular-nums; }


/* =====================================================================
   WIP · Live production monitor (top card)
   ===================================================================== */
.wip-live-card {
  border: 1px solid rgba(63, 166, 111, 0.35);
  background: linear-gradient(135deg, rgba(63, 166, 111, 0.10), rgba(63, 166, 111, 0.04));
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .wip-live-card {
  background: linear-gradient(135deg, rgba(63, 166, 111, 0.18), rgba(127, 208, 160, 0.06));
  border-color: rgba(127, 208, 160, 0.4);
}
.wip-live-dot {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.85), 0 0 0 4px rgba(255, 59, 48, 0.18);
  animation: pgBadgePulse 1.6s ease-in-out infinite;
  flex: none;
}
.wip-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap: 14px;
  padding: 16px 18px;
}
.wip-live-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.wip-live-tile__label {
  font-size: .72rem; color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: .06em;
}
.wip-live-tile__value {
  font-size: 1.85rem; font-weight: 900; color: var(--brand-700);
  letter-spacing: -.02em; line-height: 1;
}
[data-theme="dark"] .wip-live-tile__value { color: #A8E2BF; }
.wip-live-tile__sub { font-size: .8rem; color: var(--fg-secondary); }
.wip-live-tile__stages {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-size: .78rem;
}
.wip-live-tile__stages > span:not(.arrow) {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 64px;
}
.wip-live-tile__stages b { font-size: 1.1rem; font-weight: 800; color: var(--brand-700); }
[data-theme="dark"] .wip-live-tile__stages b { color: #A8E2BF; }
.wip-live-tile__stages i {
  font-style: normal; font-size: .68rem; color: var(--fg-tertiary);
  letter-spacing: .04em; text-transform: uppercase;
}
.wip-live-tile__stages .arrow { color: var(--fg-tertiary); font-weight: 700; }
@media (max-width: 980px) {
  .wip-live-grid { grid-template-columns: 1fr 1fr; }
  .wip-live-tile__stages > span:not(.arrow) { min-width: 0; }
}

/* =====================================================================
   WIP · Machine utilization table
   ===================================================================== */
.wip-util-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.wip-util-table th, .wip-util-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: middle;
}
.wip-util-table th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-tertiary); font-weight: 700;
  background: var(--bg-input);
}
.wip-util-table td.num, .wip-util-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.wip-util-table tbody tr:hover { background: var(--bg-hover); }
.wip-util-bar {
  position: relative;
  height: 18px;
  background: var(--bg-input);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.wip-util-bar__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: 10px;
  transition: width var(--t-base, 240ms) var(--ease, ease-out);
}
.wip-util-bar__label {
  position: relative;
  display: block;
  text-align: center;
  font-size: .72rem; font-weight: 700;
  line-height: 18px;
  color: var(--fg-primary);
  mix-blend-mode: difference;
  filter: invert(1);
}

/* =====================================================================
   WIP · Idle materials grid
   ===================================================================== */
.wip-idle-mat-card {
  border: 1px solid rgba(255, 159, 10, 0.35);
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.08), rgba(255, 159, 10, 0.02));
}
[data-theme="dark"] .wip-idle-mat-card {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.14), rgba(255, 159, 10, 0.04));
  border-color: rgba(255, 184, 0, 0.45);
}
.wip-idle-mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding: 14px;
}
.wip-idle-mat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  animation: pgRowIn .4s calc(var(--idx, 0) * 50ms) ease both;
}
.wip-idle-mat-tile__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wip-idle-mat-tile__icon {
  width: 28px; height: 28px;
  background: rgba(255, 159, 10, 0.18);
  border-radius: 8px;
  display: inline-grid; place-items: center;
  color: #FF9F0A;
}
.wip-idle-mat-tile__code { font-family: 'Roboto Mono','JetBrains Mono',Consolas,monospace; font-weight: 800; font-size: .92rem; }
.wip-idle-mat-tile__desc { font-size: .8rem; color: var(--fg-secondary); margin: 2px 0 6px; min-height: 30px; }
.wip-idle-mat-tile__meta { font-size: .72rem; color: var(--fg-tertiary); }

.wip-flow {
  display: flex; align-items: center; padding: 18px 20px 4px;
  gap: 6px; flex-wrap: wrap;
}
.wip-flow__step {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  text-decoration: none; color: var(--fg-primary);
  flex: 1; min-width: 200px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.wip-flow__step:hover { transform: translateY(-2px); border-color: rgba(63,166,111,.45); box-shadow: 0 14px 28px -10px rgba(0,0,0,.18); }
.wip-flow__step.is-done { opacity: .82; }
.wip-flow__step.is-current {
  background: linear-gradient(135deg, rgba(63,166,111,.16), rgba(63,166,111,.06));
  border-color: rgba(63,166,111,.55);
  cursor: default;
}
.wip-flow__step.is-current:hover { transform: none; }
.wip-flow__num {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-bg-soft, rgba(63,166,111,.10));
  color: var(--brand-fg);
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.wip-flow__step.is-done .wip-flow__num { background: var(--brand-500); color: #fff; }
.wip-flow__step.is-current .wip-flow__num { background: var(--brand-500); color: #fff; box-shadow: 0 0 0 4px rgba(63,166,111,.18); }
.wip-flow__txt strong { display: block; font-size: .9375rem; }
.wip-flow__txt div { font-size: .75rem; color: var(--fg-secondary); margin-top: 2px; }
.wip-flow__arrow {
  flex: 0 1 50px;
  height: 3px; min-width: 24px;
  background: linear-gradient(90deg, rgba(63,166,111,.18), rgba(63,166,111,.55), rgba(63,166,111,.18));
  border-radius: 999px; position: relative; overflow: hidden;
}
.wip-flow__arrow-fill { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); animation: wipFlowDot 2s linear infinite; }
@media (max-width: 900px) { .wip-flow__arrow { display: none; } .wip-flow { flex-direction: column; align-items: stretch; } }

/* Unallocated BOMs alert card · amber-tinted */
.wip-unalloc-card {
  border-color: rgba(255,159,10,.4);
  background: linear-gradient(135deg, rgba(255,159,10,.06), rgba(255,159,10,.02));
}
.wip-unalloc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 6px 14px 14px;
}
.wip-unalloc-tile {
  display: block; text-decoration: none; color: var(--fg-primary);
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px dashed rgba(255,159,10,.55);
  border-radius: 12px;
  animation: wipBatchIn .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 40ms);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.wip-unalloc-tile:hover {
  transform: translateY(-2px);
  border-style: solid;
  border-color: #FF9F0A;
  box-shadow: 0 12px 24px -10px rgba(255,159,10,.25);
}
.wip-unalloc-tile__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wip-unalloc-tile__icon { color: #B7660A; font-size: 16px; }
.wip-unalloc-tile__icon svg { width: 18px; height: 18px; }
.wip-unalloc-tile__product { font-weight: 800; font-family: var(--font-mono); color: var(--brand-fg); font-size: .82rem; letter-spacing: .02em; }
.wip-unalloc-tile__name { font-size: .8125rem; color: var(--fg-primary); margin-top: 4px; line-height: 1.3; }
.wip-unalloc-tile__meta { font-size: .72rem; color: var(--fg-tertiary); margin-top: 6px; }

/* Active batch WIP cards · grid */
.wip-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 6px 14px 14px;
}
.wip-batch {
  display: block;
  text-decoration: none; color: var(--fg-primary);
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  animation: wipBatchIn .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 50ms);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wip-batch:hover { transform: translateY(-3px); border-color: rgba(63,166,111,.5); box-shadow: 0 16px 32px -10px rgba(0,0,0,.18); }
.wip-batch.is-live { border-color: rgba(63,166,111,.55); }
.wip-batch.is-live::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(63,166,111,.18), transparent 70%);
  pointer-events: none;
}
.wip-batch__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wip-batch__ref { font-weight: 700; font-family: var(--font-mono); color: var(--brand-fg); font-size: .82rem; letter-spacing: .02em; }
.wip-batch__product { font-size: .82rem; color: var(--fg-secondary); margin-top: 2px; line-height: 1.3; }
.wip-batch__body { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; }
.wip-batch__ring { width: 100px; height: 100px; }
.wip-batch__ring-fill { transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); }
.wip-batch__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
.wip-batch__meta > div { display: flex; flex-direction: column; gap: 2px; }
.wip-batch__l { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-tertiary); }
.wip-batch__v { font-size: .82rem; font-weight: 600; color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.wip-batch__pulse {
  margin-top: 12px; height: 3px; border-radius: 999px;
  background: rgba(63,166,111,.10); overflow: hidden; position: relative;
}
.wip-batch__pulse-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
  animation: wipPulseFlow 1.8s infinite linear;
}

/* Status pills */
.wip-status { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.wip-status--planned     { background: var(--brand-bg-soft); color: var(--brand-fg); }
.wip-status--in_progress { background: rgba(90,200,250,.18); color: #0A85B9; }
.wip-status--in_progress::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: #0A85B9; animation: wipPulseDot 1.6s infinite; }
.wip-status--blocked     { background: rgba(255,159,10,.16); color: #B7660A; }
.wip-status--draft       { background: var(--bg-active); color: var(--fg-secondary); }

@media (prefers-reduced-motion: reduce) {
  .wip-flow__arrow-fill, .wip-batch, .wip-batch__pulse-fill, .wip-batch__ring-fill,
  .wip-unalloc-tile, .wip-status--in_progress::before { animation: none !important; transition: none !important; }
}

/* ============================================================ */
/* Finished Goods · Step 5                                        */
/* ============================================================ */

@keyframes fgFlowDot { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes fgRecentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Process flow strip · 5 steps */
.fg-flow-card { padding-bottom: 18px; }
.fg-flow {
  display: flex; align-items: center; padding: 18px 20px 4px;
  gap: 4px; flex-wrap: wrap;
}
.fg-flow__step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  text-decoration: none; color: var(--fg-primary);
  flex: 1; min-width: 170px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.fg-flow__step:hover { transform: translateY(-2px); border-color: rgba(63,166,111,.45); box-shadow: 0 14px 28px -10px rgba(0,0,0,.18); }
.fg-flow__step.is-done { opacity: .8; }
.fg-flow__step.is-current {
  background: linear-gradient(135deg, rgba(63,166,111,.16), rgba(63,166,111,.06));
  border-color: rgba(63,166,111,.55);
  cursor: default;
}
.fg-flow__step.is-current:hover { transform: none; }
.fg-flow__num {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-bg-soft, rgba(63,166,111,.10));
  color: var(--brand-fg);
  font-weight: 800; font-size: .9375rem;
  flex-shrink: 0;
}
.fg-flow__step.is-done .fg-flow__num { background: var(--brand-500); color: #fff; }
.fg-flow__step.is-current .fg-flow__num { background: var(--brand-500); color: #fff; box-shadow: 0 0 0 4px rgba(63,166,111,.18); }
.fg-flow__txt strong { display: block; font-size: .875rem; }
.fg-flow__txt div { font-size: .7rem; color: var(--fg-secondary); margin-top: 2px; }
.fg-flow__arrow {
  flex: 0 1 30px;
  height: 3px; min-width: 18px;
  background: linear-gradient(90deg, rgba(63,166,111,.18), rgba(63,166,111,.55), rgba(63,166,111,.18));
  border-radius: 999px; position: relative; overflow: hidden;
}
.fg-flow__arrow-fill { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brand-500), transparent); animation: fgFlowDot 2s linear infinite; }
@media (max-width: 1100px) { .fg-flow__arrow { display: none; } .fg-flow { flex-direction: column; align-items: stretch; } }

/* Recent completions grid */
.fg-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 6px 14px 14px;
}
.fg-recent {
  display: block;
  text-decoration: none; color: var(--fg-primary);
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(63,166,111,.4);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  animation: fgRecentIn .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--idx, 0) * 50ms);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fg-recent::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(63,166,111,.18), transparent 70%);
  pointer-events: none;
}
.fg-recent:hover { transform: translateY(-3px); border-color: rgba(63,166,111,.7); box-shadow: 0 16px 32px -10px rgba(0,0,0,.18); }
.fg-recent__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; position: relative; }
.fg-recent__ref { font-weight: 700; font-family: var(--font-mono); color: var(--brand-fg); font-size: .82rem; letter-spacing: .02em; }
.fg-recent__product { font-size: .82rem; color: var(--fg-secondary); margin-top: 2px; line-height: 1.3; }
.fg-recent__body { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; }
.fg-recent__ring { width: 100px; height: 100px; }
.fg-recent__ring-fill { transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1); }
.fg-recent__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
.fg-recent__meta > div { display: flex; flex-direction: column; gap: 2px; }
.fg-recent__l { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-tertiary); }
.fg-recent__v { font-size: .82rem; font-weight: 600; color: var(--fg-primary); font-variant-numeric: tabular-nums; }

/* Yield colour ramps · used on ring strokes and pills in the ledger table */
.fg-yield--great       { stroke: #34C759; }
.fg-yield--ok          { stroke: #5FBE87; }
.fg-yield--watch       { stroke: #FF9F0A; }
.fg-yield--bad         { stroke: #FF3B30; }
.fg-yield-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .75rem;
}
.fg-yield-pill.fg-yield--great { background: rgba(52,199,89,.16); color: #1F8F40; }
.fg-yield-pill.fg-yield--ok    { background: rgba(95,190,135,.16); color: #297548; }
.fg-yield-pill.fg-yield--watch { background: rgba(255,159,10,.16); color: #B7660A; }
.fg-yield-pill.fg-yield--bad   { background: rgba(255,59,48,.16); color: #C72A20; }

@media (prefers-reduced-motion: reduce) {
  .fg-flow__arrow-fill, .fg-recent, .fg-recent__ring-fill { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Tally Sheet · Step 5
   ===================================================================== */
.ts-flow-card { padding: 4px 0 8px; }
.ts-flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 16px 16px;
  flex-wrap: wrap;
}
.ts-flow__step {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-base);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 64px;
}
.ts-flow__step:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); border-color: var(--brand-500); }
.ts-flow__step.is-done { background: linear-gradient(135deg, rgba(63,166,111,.08), rgba(63,166,111,0)); border-color: rgba(63,166,111,.32); }
.ts-flow__step.is-current { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); border-color: var(--brand-700); color: #fff; box-shadow: 0 8px 22px rgba(29,86,52,.28); animation: pgBadgePulse 2.4s ease-in-out infinite; }
.ts-flow__step.is-current .ts-flow__num { background: rgba(255,255,255,.18); color: #fff; }
.ts-flow__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-active); color: var(--brand-700);
  font-weight: 800; font-size: .9rem;
  flex: none;
}
.ts-flow__step.is-done .ts-flow__num { background: var(--brand-500); color: #fff; }
.ts-flow__txt { line-height: 1.25; font-size: .82rem; }
.ts-flow__txt strong { display: block; font-size: .92rem; }
.ts-flow__txt div { color: inherit; opacity: .82; }
.ts-flow__arrow { flex: 0 0 26px; align-self: center; height: 2px; background: var(--border-subtle); position: relative; }
.ts-flow__arrow-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); animation: bomFlowDot 1.6s ease-in-out infinite; }

/* ----- Eligible batch tiles ----- */
.ts-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 16px 16px;
}
.ts-batch {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--bg-base);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: pgFadeUp .42s calc(var(--idx, 0) * 50ms) ease both;
  display: flex; flex-direction: column; gap: 10px;
}
.ts-batch:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.08); border-color: var(--brand-500); }
.ts-batch__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ts-batch__ref { font-weight: 700; font-size: .92rem; }
.ts-batch__product { font-size: .82rem; color: var(--fg-tertiary); margin-top: 2px; }
.ts-batch__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  border-top: 1px dashed var(--border-subtle);
  border-bottom: 1px dashed var(--border-subtle);
  padding: 10px 0;
}
.ts-batch__meta > div { display: flex; flex-direction: column; }
.ts-batch__l { font-size: .68rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.ts-batch__v { font-weight: 700; font-size: .86rem; }
.ts-batch__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ----- Hand-off info card ----- */
.ts-handoff { background: linear-gradient(135deg, rgba(63,166,111,.06), rgba(63,166,111,0)); border-color: rgba(63,166,111,.28); }
.ts-handoff__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

/* ----- Modal (overlay + dialog) ----- */
.ts-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  padding: 24px;
  animation: pgFadeUp .2s ease both;
}
.ts-modal {
  background: var(--bg-elevated);
  border-radius: 18px;
  width: min(960px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border: 1px solid var(--border-subtle);
  animation: pgFadeUp .26s ease both;
}
.ts-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.ts-modal__title { font-weight: 800; font-size: 1.06rem; }
.ts-modal__sub { color: var(--fg-tertiary); font-size: .82rem; margin-top: 2px; }
.ts-modal__body { padding: 18px 22px; overflow: auto; }
.ts-modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
  border-radius: 0 0 18px 18px;
}

/* ----- Form grid + fields ----- */
.ts-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-field { display: flex; flex-direction: column; gap: 4px; }
.ts-field label { font-size: .74rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.ts-cell { padding: 6px 8px; font-size: .9rem; }

/* ----- Hourly table ----- */
.ts-hourly-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-tertiary); }
.ts-hourly-table td { padding: 6px 8px; }
.ts-hourly-table .num { text-align: right; }
.ts-hourly-table tfoot td { background: rgba(63,166,111,.08); font-size: .92rem; }
.ts-totals strong { color: var(--brand-700); }

/* ----- Sign-off strip ----- */
.ts-signoff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-subtle);
}
.ts-signoff__col { display: flex; flex-direction: column; gap: 6px; }
.ts-signoff__label { font-size: .74rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.ts-signoff__line {
  min-height: 28px;
  border-bottom: 2px solid var(--fg-primary);
  padding: 4px 0;
}

/* ===== Finalize panel · scroll-down full sign-off CTA ===== */
.ts-finalize {
  margin-top: 24px;
  padding: 20px 22px 18px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(63, 166, 111, 0.10), rgba(95, 190, 135, 0.06));
  border: 1px solid rgba(63, 166, 111, 0.35);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .ts-finalize {
  background:
    linear-gradient(135deg, rgba(63, 166, 111, 0.18), rgba(127, 208, 160, 0.08));
  border-color: rgba(127, 208, 160, 0.4);
}
.ts-finalize::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(127, 208, 160, 0.25), transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.ts-finalize__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.ts-finalize__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-300), var(--brand-500) 55%, var(--brand-700));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: 0 8px 22px rgba(29, 86, 52, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}
.ts-finalize__icon svg { width: 22px; height: 22px; stroke-width: 2.5; }
.ts-finalize__title {
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em;
  color: var(--brand-800);
}
[data-theme="dark"] .ts-finalize__title { color: #DBF5E5; }
.ts-finalize__sub {
  font-size: .88rem; color: var(--fg-secondary); margin-top: 2px;
}

.ts-finalize__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  position: relative; z-index: 1;
  margin-bottom: 14px;
}
.ts-finalize__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ts-finalize__role { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-finalize__pill {
  display: inline-block;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
}
.ts-finalize__pill--sup {
  background: rgba(63, 166, 111, 0.18);
  color: var(--brand-700);
  border: 1px solid rgba(63, 166, 111, 0.4);
}
.ts-finalize__pill--wh {
  background: rgba(255, 184, 0, 0.16);
  color: #B16500;
  border: 1px solid rgba(255, 184, 0, 0.45);
}
[data-theme="dark"] .ts-finalize__pill--sup { color: #A8E2BF; background: rgba(127, 208, 160, 0.18); }
[data-theme="dark"] .ts-finalize__pill--wh  { color: #FFD580; background: rgba(255, 184, 0, 0.18); border-color: rgba(255, 184, 0, 0.4); }
.ts-finalize__sig {
  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
}

.ts-finalize__warn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(232, 90, 79, 0.12);
  border: 1px solid rgba(232, 90, 79, 0.4);
  color: #B23A2E;
  font-size: .88rem;
  margin-bottom: 14px;
}
[data-theme="dark"] .ts-finalize__warn { color: #FFB4A8; background: rgba(232, 90, 79, 0.18); }
.ts-finalize__warn svg { width: 18px; height: 18px; flex: none; }

.ts-finalize__cta {
  width: 100%;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600) 55%, var(--brand-800));
  color: #fff;
  border: none;
  padding: 16px 22px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  position: relative;
  cursor: pointer;
  box-shadow:
    0 12px 28px -8px rgba(29, 86, 52, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 0 22px rgba(127, 208, 160, 0.35);
  transition: transform var(--t-fast, 160ms) var(--ease, ease-out), box-shadow var(--t-fast, 160ms) var(--ease, ease-out), filter var(--t-fast, 160ms) var(--ease, ease-out);
  overflow: hidden;
}
.ts-finalize__cta:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 16px 36px -8px rgba(29, 86, 52, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 0 30px rgba(127, 208, 160, 0.55);
}
.ts-finalize__cta:active:not(:disabled) { transform: translateY(0); filter: brightness(.98); }
.ts-finalize__cta:disabled { opacity: .6; cursor: progress; }
.ts-finalize__cta svg { width: 18px; height: 18px; }
.ts-finalize__cta-arrow { font-size: 1.4rem; line-height: 1; margin-left: 4px; opacity: .85; }
.ts-finalize__cta-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.22) 45%, transparent 65%);
  transform: translateX(-100%);
  animation: tsFinalizeSheen 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tsFinalizeSheen {
  0%, 60% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(100%); }
}
.ts-finalize__foot { margin-top: 10px; text-align: center; }
.ts-finalize__foot code {
  font-family: 'JetBrains Mono','Roboto Mono',Consolas,monospace;
  background: rgba(63,166,111,.12);
  border: 1px solid rgba(63,166,111,.28);
  padding: 1px 6px; border-radius: 4px;
  font-size: .78rem;
}

@media (max-width: 720px) {
  .ts-grid-2 { grid-template-columns: 1fr; }
  .ts-signoff { grid-template-columns: 1fr; }
  .ts-finalize__grid { grid-template-columns: 1fr; }
  .ts-flow__step { flex: 1 1 100%; }
  .ts-flow__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-flow__step, .ts-batch, .ts-overlay, .ts-modal { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Email Report · shared modal + toast (used by every lifecycle view)
   ===================================================================== */
.er-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9100;
  padding: 24px;
  animation: pgFadeUp .2s ease both;
}
.er-modal {
  background: var(--bg-elevated);
  border-radius: 18px;
  width: min(1080px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border: 1px solid var(--border-subtle);
  animation: pgFadeUp .26s ease both;
  overflow: hidden;
}
.er-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, rgba(63,166,111,.08), rgba(63,166,111,0));
}
.er-modal__title { font-weight: 800; font-size: 1.02rem; display: inline-flex; align-items: center; gap: 8px; }
.er-modal__title [data-icon] { color: var(--brand-500); }
.er-modal__sub { color: var(--fg-tertiary); font-size: .82rem; margin-top: 2px; }
.er-modal__body { padding: 18px 22px; overflow: auto; flex: 1; }
.er-modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.er-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.er-pane { display: flex; flex-direction: column; gap: 8px; }
.er-label {
  font-size: .72rem; color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 2px;
}
.er-pane .input { padding: 8px 10px; font-size: .92rem; }
.er-attach {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  background: rgba(63,166,111,.05);
  margin-top: 6px;
}
.er-attach__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.er-attach__name { font-weight: 700; font-size: .88rem; }
.er-attach__sub  { font-size: .76rem; color: var(--fg-tertiary); }
.er-preview {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 380px;
}
.er-preview__label {
  font-size: .72rem; color: var(--fg-tertiary);
  text-transform: uppercase; letter-spacing: .06em;
}
.er-preview__frame {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: #fff;
  min-height: 360px;
}

/* Toast */
.er-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px 16px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .92rem;
  font-weight: 600;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform .24s ease, opacity .24s ease;
  z-index: 9200;
  max-width: 420px;
}
.er-toast.er-toast--show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.er-toast--ok  { border-left: 4px solid var(--brand-500); }
.er-toast--ok  [data-icon] { color: var(--brand-500); }
.er-toast--err { border-left: 4px solid #FF3B30; }
.er-toast--err [data-icon] { color: #FF3B30; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pgSpin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes pgSpin { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
  .er-grid { grid-template-columns: 1fr; }
  .er-preview { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .er-overlay, .er-modal, .er-toast { animation: none !important; transition: none !important; }
}

/* =====================================================================
   FG hand-off card · auto-push from Tally CONFIRMED to Finished Goods
   Vibrant emerald treatment · pops in both light + dark themes
   ===================================================================== */
.fg-handoff-card {
  border: 1px solid rgba(63, 166, 111, 0.55);
  background:
    linear-gradient(135deg, rgba(63, 166, 111, 0.22) 0%, rgba(29, 86, 52, 0.16) 60%, rgba(95, 190, 135, 0.18) 100%);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 30px -8px rgba(29, 86, 52, 0.35);
}
[data-theme="dark"] .fg-handoff-card {
  border-color: rgba(127, 208, 160, 0.55);
  background:
    linear-gradient(135deg, rgba(63, 166, 111, 0.34) 0%, rgba(29, 86, 52, 0.30) 55%, rgba(127, 208, 160, 0.22) 100%);
  box-shadow:
    0 1px 0 rgba(127, 208, 160, 0.18) inset,
    0 14px 36px -6px rgba(63, 166, 111, 0.42),
    0 0 0 1px rgba(127, 208, 160, 0.12) inset;
}
.fg-handoff-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(127, 208, 160, 0.42), transparent 60%),
    radial-gradient(circle at bottom left, rgba(63, 166, 111, 0.30), transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.fg-handoff-card__strip {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  position: relative;
  z-index: 1;
}
.fg-handoff-card__pulse {
  width: 14px; height: 14px;
  background: var(--brand-400);
  border-radius: 50%;
  flex: none;
  position: relative;
  box-shadow: 0 0 14px rgba(95, 190, 135, 0.85), 0 0 0 4px rgba(95, 190, 135, 0.18);
  animation: pgBadgePulse 1.6s ease-in-out infinite;
}
.fg-handoff-card__pulse::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--brand-400);
  animation: pgBadgePulse 1.6s ease-in-out infinite reverse;
  opacity: .65;
}
.fg-handoff-card__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-300), var(--brand-500) 55%, var(--brand-700));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow:
    0 10px 24px rgba(29, 86, 52, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 0 18px rgba(127, 208, 160, 0.4);
}
.fg-handoff-card__icon [data-icon] svg,
.fg-handoff-card__icon svg { width: 22px; height: 22px; stroke-width: 2.5; }
.fg-handoff-card__txt { flex: 1; }
.fg-handoff-card__title {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  color: var(--brand-800);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .fg-handoff-card__title {
  color: #DBF5E5;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(127, 208, 160, 0.45);
}
.fg-handoff-card__sub {
  font-size: .88rem;
  margin-top: 4px;
  color: var(--brand-800);
  opacity: .82;
}
[data-theme="dark"] .fg-handoff-card__sub { color: #BCE9CC; opacity: .9; }
.fg-handoff-card__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 14px 16px;
  position: relative;
  z-index: 1;
}
.fg-handoff-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.8fr 0.8fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(63, 166, 111, 0.20);
  margin: 5px 0;
  animation: pgRowIn .4s calc(var(--idx, 0) * 60ms) ease both;
  transition: transform var(--t-fast, 160ms) var(--ease, ease-out), box-shadow var(--t-fast, 160ms) var(--ease, ease-out), border-color var(--t-fast, 160ms) var(--ease, ease-out);
}
.fg-handoff-row:hover {
  transform: translateY(-1px);
  border-color: rgba(63, 166, 111, 0.55);
  box-shadow: 0 6px 18px -8px rgba(29, 86, 52, 0.35);
}
[data-theme="dark"] .fg-handoff-row {
  background: linear-gradient(135deg, rgba(127, 208, 160, 0.12), rgba(63, 166, 111, 0.08));
  border-color: rgba(127, 208, 160, 0.22);
}
[data-theme="dark"] .fg-handoff-row:hover {
  border-color: rgba(127, 208, 160, 0.55);
  box-shadow: 0 8px 22px -8px rgba(63, 166, 111, 0.55);
}
.fg-handoff-row__ref {
  font-weight: 800;
  font-size: .95rem;
  color: var(--fg-primary);
  letter-spacing: -.005em;
}
.fg-handoff-row__sub { font-size: .78rem; color: var(--fg-secondary); margin-top: 3px; }
.fg-handoff-row__num {
  font-size: 1.32rem;
  font-weight: 900;
  color: var(--brand-700);
  display: inline-flex; align-items: baseline; gap: 6px;
  letter-spacing: -.02em;
}
[data-theme="dark"] .fg-handoff-row__num { color: #A8E2BF; }
.fg-handoff-row__num span {
  font-size: .7rem;
  color: var(--fg-tertiary);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fg-handoff-row__time {
  font-size: .82rem;
  color: var(--fg-tertiary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .fg-handoff-row { grid-template-columns: 1fr 1fr; }
  .fg-handoff-row__time { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-handoff-card__pulse, .fg-handoff-row { animation: none !important; }
}

/* =====================================================================
   Dispatch Hub · Kanban + loads + routes
   ===================================================================== */
.dh-board-card { padding-bottom: 8px; }
.dh-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
  overflow-x: auto;
}
.dh-col {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  display: flex; flex-direction: column;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.dh-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stage-accent);
}
.dh-col__head { padding: 12px 14px 6px; }
.dh-col__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .92rem;
}
.dh-col__dot {
  width: 9px; height: 9px;
  background: var(--stage-accent);
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-accent) 22%, transparent);
}
.dh-col__count {
  margin-left: auto;
  background: color-mix(in srgb, var(--stage-accent) 14%, transparent);
  color: var(--stage-accent);
  font-weight: 700;
  font-size: .8rem;
  padding: 2px 10px;
  border-radius: 999px;
}
.dh-col__sub { font-size: .76rem; color: var(--fg-tertiary); margin-top: 2px; }
.dh-col__body {
  flex: 1;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  max-height: 60vh;
}
.dh-col__body.is-dragover {
  background: color-mix(in srgb, var(--stage-accent) 8%, transparent);
}
.dh-col__foot {
  padding: 10px 14px;
  border-top: 1px dashed var(--border-subtle);
  font-size: .82rem;
  color: var(--fg-tertiary);
  display: flex; justify-content: space-between; align-items: center;
}
.dh-col__total { font-weight: 700; color: var(--fg-primary); }

/* ----- Order tile ----- */
.dh-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: grab;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
  animation: pgFadeUp .35s calc(var(--idx, 0) * 40ms) ease both;
  display: flex; flex-direction: column; gap: 6px;
}
.dh-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(0,0,0,.08); border-color: var(--brand-500); }
.dh-card.is-dragging { opacity: .45; cursor: grabbing; }
.dh-card__head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.dh-card__ref { font-weight: 700; font-size: .88rem; }
.dh-card__route {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-tertiary);
  background: var(--bg-active);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.dh-card__cust { font-size: .82rem; color: var(--fg-secondary); }
.dh-card__meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 8px;
}
.dh-card__meta > div { display: flex; flex-direction: column; }
.dh-card__meta span { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-tertiary); }
.dh-card__meta strong { font-size: .85rem; }
.dh-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .74rem;
  color: var(--fg-tertiary);
}
.dh-empty {
  text-align: center;
  color: var(--fg-tertiary);
  padding: 24px 0;
  font-size: 1.4rem;
  opacity: .35;
}

/* ----- Today's loads ----- */
.dh-loads { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.dh-load {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr .8fr .8fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-base);
  animation: pgRowIn .4s calc(var(--idx, 0) * 50ms) ease both;
}
.dh-load__route {
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--stage-accent);
  padding-left: 10px;
}
.dh-load__route-pill {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-700);
}
.dh-load__truck { font-size: .76rem; color: var(--fg-tertiary); }
.dh-load__ref { font-weight: 700; font-size: .9rem; }
.dh-load__cust { font-size: .78rem; color: var(--fg-tertiary); }
.dh-load__qty { font-size: 1.05rem; font-weight: 800; color: var(--brand-700); }
.dh-load__qty span { font-size: .68rem; color: var(--fg-tertiary); margin-left: 4px; font-weight: 600; }
.dh-load__cutoff { text-align: center; }
.dh-load__cutoff-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-tertiary); }
.dh-load__cutoff-time { font-weight: 800; font-size: .92rem; }

/* ----- Routes ----- */
.dh-routes { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.dh-route {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--bg-base);
  animation: pgRowIn .4s calc(var(--idx, 0) * 50ms) ease both;
}
.dh-route__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.dh-route__label { font-weight: 700; font-size: .92rem; }
.dh-route__meta { font-size: .76rem; color: var(--fg-tertiary); margin-top: 2px; }
.dh-route__count { font-weight: 800; font-size: 1.1rem; color: var(--brand-700); }
.dh-route__count span { font-size: .68rem; font-weight: 600; color: var(--fg-tertiary); margin-left: 4px; }
.dh-route__bar {
  height: 6px;
  background: var(--bg-active);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.dh-route__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  border-radius: 999px;
  transition: width .8s ease;
  position: relative;
}
.dh-route__bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: bomFlowDot 2.6s ease-in-out infinite;
}

/* ----- Hand-off footer ----- */
.dh-handoff {
  background: linear-gradient(135deg, rgba(63,166,111,.06), rgba(63,166,111,0));
  border-color: rgba(63,166,111,.28);
}
.dh-handoff__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

@media (max-width: 1280px) {
  .dh-board { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 720px) {
  .dh-board { grid-template-columns: 1fr; }
  .dh-load { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-card, .dh-load, .dh-route, .dh-route__bar-fill::after { animation: none !important; transition: none !important; }
}

/* ----- Dispatch lifecycle flow strip · Step 7 ----- */
.dh-flow-card { padding: 4px 0 8px; }
.dh-flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 16px 16px;
  flex-wrap: wrap;
}
.dh-flow__step {
  flex: 1 1 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-base);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 64px;
}
.dh-flow__step:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.06); border-color: var(--brand-500); }
.dh-flow__step.is-done { background: linear-gradient(135deg, rgba(63,166,111,.08), rgba(63,166,111,0)); border-color: rgba(63,166,111,.32); }
.dh-flow__step.is-current { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); border-color: var(--brand-700); color: #fff; box-shadow: 0 8px 22px rgba(29,86,52,.28); animation: pgBadgePulse 2.4s ease-in-out infinite; }
.dh-flow__step.is-current .dh-flow__num { background: rgba(255,255,255,.18); color: #fff; }
.dh-flow__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-active); color: var(--brand-700);
  font-weight: 800; font-size: .9rem;
  flex: none;
}
.dh-flow__step.is-done .dh-flow__num { background: var(--brand-500); color: #fff; }
.dh-flow__txt { line-height: 1.25; font-size: .82rem; }
.dh-flow__txt strong { display: block; font-size: .92rem; }
.dh-flow__txt div { color: inherit; opacity: .82; }
.dh-flow__arrow { flex: 0 0 22px; align-self: center; height: 2px; background: var(--border-subtle); position: relative; }
.dh-flow__arrow-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); animation: bomFlowDot 1.6s ease-in-out infinite; }

@media (max-width: 720px) {
  .dh-flow__step  { flex: 1 1 100%; }
  .dh-flow__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-flow__step.is-current, .dh-flow__arrow-fill { animation: none !important; }
}

/* =====================================================================
   Analytics Hero · the headline view · heavy animation pack
   ===================================================================== */

.kpi-hero-header .page-header__title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi-hero-title-glow {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  position: relative;
}
.kpi-hero-title-glow::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
  background: radial-gradient(closest-side, rgba(63,166,111,.22), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: kpiHeroGlow 4.8s ease-in-out infinite;
}
.kpi-hero-title-sub { color: var(--fg-tertiary); font-weight: 600; font-size: 0.85em; }
@keyframes kpiHeroGlow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Push to email · animated state machine CTA */
.kpi-push-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding-right: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border: none;
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi-push-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(29,86,52,.36); }
.kpi-push-cta__pulse {
  position: absolute;
  top: 50%; left: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: kpiPushPulse 1.8s ease-out infinite;
  opacity: 0.9;
}
.kpi-push-cta__icon { margin-left: 14px; }
.kpi-push-cta__label { font-weight: 700; letter-spacing: 0.01em; }
.kpi-push-cta__state { display: inline-flex; align-items: center; gap: 6px; }
.kpi-push-cta__dots { display: inline-flex; gap: 3px; }
.kpi-push-cta__dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  animation: kpiDotBlink 0.9s ease-in-out infinite;
}
.kpi-push-cta__dots i:nth-child(2) { animation-delay: 0.15s; }
.kpi-push-cta__dots i:nth-child(3) { animation-delay: 0.30s; }
.kpi-push-cta__check {
  display: inline-block; width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff; color: var(--brand-700);
  text-align: center; line-height: 18px; font-weight: 800; font-size: 12px;
  animation: kpiCheckPop 0.4s ease-out;
}
.kpi-push-cta__ref {
  font-family: "SF Mono", Menlo, monospace; font-size: 0.72rem;
  background: rgba(255,255,255,.18);
  padding: 2px 8px; border-radius: 8px;
  animation: kpiFadeIn 0.4s ease-out;
}
.kpi-push-cta.is-composing { animation: kpiBreathe 0.6s ease-in-out infinite; }
.kpi-push-cta.is-sending {
  background: linear-gradient(110deg, var(--brand-500) 30%, #5fbfa2 50%, var(--brand-500) 70%);
  background-size: 250% 100%;
  animation: kpiSendShimmer 1.2s linear infinite;
}
.kpi-push-cta.is-sent { background: linear-gradient(135deg, #1F8F40, #34C759); }
@keyframes kpiPushPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); opacity: 1; }
  60%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); opacity: 0.4; }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 0.9; }
}
@keyframes kpiDotBlink { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.9); } 30% { opacity: 1; transform: scale(1.2); } }
@keyframes kpiCheckPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes kpiFadeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kpiBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes kpiSendShimmer { 0% { background-position: 250% 0; } 100% { background-position: -150% 0; } }

/* AI Insights hero card */
.kpi-ai-card {
  background: linear-gradient(135deg, rgba(63,166,111,.05), rgba(29,86,52,.03));
  border-color: rgba(63,166,111,.3);
  overflow: hidden;
  position: relative;
}
.kpi-ai-card__head { display: flex; align-items: center; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 1; }
.kpi-ai-card__title { display: flex; align-items: center; gap: 12px; flex: 1; }
.kpi-ai-badge { position: relative; width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.kpi-ai-badge__core { width: 14px; height: 14px; background: var(--brand-500); border-radius: 50%; box-shadow: 0 0 12px rgba(63,166,111,.7); animation: kpiAiCorePulse 2s ease-in-out infinite; }
.kpi-ai-badge__ring { position: absolute; inset: 0; border: 2px solid var(--brand-500); border-radius: 50%; opacity: 0.5; animation: kpiAiRingExpand 2.4s ease-out infinite; }
@keyframes kpiAiCorePulse { 0%,100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes kpiAiRingExpand { 0% { transform: scale(0.4); opacity: 0.8; border-width: 3px; } 100% { transform: scale(1.4); opacity: 0; border-width: 1px; } }
.kpi-ai-title { font-weight: 800; font-size: 1.04rem; }
.kpi-ai-sub { font-size: 0.84rem; color: var(--fg-tertiary); margin-top: 2px; }
.kpi-ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); position: relative; z-index: 1; }
.kpi-ai-col { background: var(--bg-elevated); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.kpi-ai-col__head { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-tertiary); }
.kpi-ai-col__count { margin-left: auto; background: var(--bg-active); color: var(--fg-primary); padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.kpi-ai-col--alerts  .kpi-ai-col__head { color: #FF3B30; }
.kpi-ai-col--alerts  .kpi-ai-col__count { background: rgba(255,59,48,.16); color: #C72A20; }
.kpi-ai-col--watch   .kpi-ai-col__head { color: #F59E0B; }
.kpi-ai-col--watch   .kpi-ai-col__count { background: rgba(245,158,11,.16); color: #B7660A; }
.kpi-ai-col--wins    .kpi-ai-col__head { color: var(--brand-700); }
.kpi-ai-col--wins    .kpi-ai-col__count { background: rgba(63,166,111,.16); color: var(--brand-700); }
.kpi-ai-col--improve .kpi-ai-col__head { color: #3B82F6; }
.kpi-ai-col--improve .kpi-ai-col__count { background: rgba(59,130,246,.16); color: #1D4FB8; }
.kpi-ai-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-base); cursor: pointer; transition: transform .15s ease, background .15s ease; animation: kpiAiItemIn 0.45s calc(var(--idx, 0) * 60ms) ease both; text-decoration: none; color: inherit; }
.kpi-ai-item:hover { transform: translateX(2px); background: rgba(63,166,111,.07); }
.kpi-ai-item--alert   { border-left: 3px solid #FF3B30; }
.kpi-ai-item--watch   { border-left: 3px solid #F59E0B; }
.kpi-ai-item--win     { border-left: 3px solid var(--brand-500); cursor: default; }
.kpi-ai-item--improve { border-left: 3px solid #3B82F6; cursor: default; }
.kpi-ai-item__icon { font-size: 1rem; flex: none; margin-top: 2px; }
.kpi-ai-item--alert   .kpi-ai-item__icon { color: #FF3B30; }
.kpi-ai-item--watch   .kpi-ai-item__icon { color: #F59E0B; }
.kpi-ai-item--win     .kpi-ai-item__icon { color: var(--brand-500); }
.kpi-ai-item--improve .kpi-ai-item__icon { color: #3B82F6; }
.kpi-ai-item__txt { flex: 1; min-width: 0; }
.kpi-ai-item__label { font-weight: 700; font-size: 0.85rem; }
.kpi-ai-item__detail { font-size: 0.75rem; color: var(--fg-tertiary); margin-top: 2px; }
.kpi-ai-item__arrow { color: var(--fg-tertiary); font-size: 1.1rem; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.kpi-ai-item:hover .kpi-ai-item__arrow { opacity: 1; transform: translateX(4px); }
.kpi-ai-empty { font-size: 0.78rem; color: var(--fg-tertiary); padding: 8px 4px; text-align: center; font-style: italic; }
@keyframes kpiAiItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

.kpi-ai-vein { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top right, rgba(63,166,111,.10), transparent 60%), radial-gradient(ellipse at bottom left, rgba(29,86,52,.06), transparent 60%); animation: kpiAiVeinFlow 8s ease-in-out infinite; }
@keyframes kpiAiVeinFlow { 0%,100% { background-position: 0 0, 0 0; } 50% { background-position: 4% 2%, -2% -3%; } }

.kpi-hero-grid .kpi { animation: kpiTileIn 0.55s calc(var(--idx, 0) * 70ms) ease both; position: relative; overflow: hidden; }
.kpi-hero-grid .kpi::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(63,166,111,.06), transparent 60%); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.kpi-hero-grid .kpi:hover::before { opacity: 1; }
.kpi-hero-grid .kpi--alert { box-shadow: 0 0 0 1px rgba(255,59,48,.3), 0 6px 14px rgba(255,59,48,.08); }
.kpi-hero-grid .kpi--watch { box-shadow: 0 0 0 1px rgba(245,158,11,.3), 0 6px 14px rgba(245,158,11,.08); }
.kpi__spark--animated { transition: opacity .3s ease; }
.kpi__spark-path { transition: stroke-dashoffset 1.4s ease-out; }
.kpi__sparkle { position: absolute; bottom: 8px; right: 8px; width: 6px; height: 6px; background: var(--brand-500); border-radius: 50%; box-shadow: 0 0 8px rgba(63,166,111,.6); animation: kpiSparkle 2.4s ease-in-out infinite; }
@keyframes kpiTileIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kpiSparkle { 0%,100% { opacity: 0.3; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.3); } }

.kpi-trend-card { overflow: hidden; }
.kpi-trend-legend { display: inline-flex; align-items: center; gap: 12px; font-size: 0.78rem; color: var(--fg-tertiary); }
.kpi-trend-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.kpi-trend-legend__dot--prod  { background: var(--brand-500); }
.kpi-trend-legend__dot--stock { background: #94A3B8; }
.kpi-dual-trend { padding: 12px 18px 22px; }
.kpi-dual-trend svg { width: 100%; height: 220px; }
.kpi-trend-prod, .kpi-trend-stock { transition: stroke-dashoffset 1.6s ease-out; }
.kpi-trend-fill { transition: opacity 0.6s ease-out; }
.kpi-trend-dot  { transition: opacity 0.2s ease-out; }

.kpi-bar-race { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.kpi-bar-race__row { display: grid; grid-template-columns: 110px 1fr 110px; gap: 12px; align-items: center; animation: kpiRaceIn 0.45s calc(var(--idx, 0) * 90ms) ease both; }
.kpi-bar-race__label { font-weight: 700; font-size: 0.85rem; }
.kpi-bar-race__track { height: 10px; background: var(--bg-active); border-radius: 999px; overflow: hidden; position: relative; }
.kpi-bar-race__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); border-radius: 999px; transition: width 1.2s cubic-bezier(0.22, 0.94, 0.4, 1); position: relative; overflow: hidden; }
.kpi-bar-race__shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: kpiBarShimmer 2.4s ease-in-out infinite; }
.kpi-bar-race__value { font-weight: 700; font-size: 0.85rem; color: var(--brand-700); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes kpiRaceIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kpiBarShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.kpi-top-skus { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.kpi-top-sku { display: grid; grid-template-columns: 28px 1.2fr 1.4fr auto; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 8px; animation: kpiSkuIn 0.4s calc(var(--idx, 0) * 60ms) ease both; transition: background .15s ease; }
.kpi-top-sku:hover { background: var(--bg-active); }
.kpi-top-sku__rank { width: 24px; height: 24px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; font-weight: 800; font-size: 0.74rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kpi-top-sku__label { font-weight: 700; font-size: 0.84rem; }
.kpi-top-sku__bar { height: 6px; background: var(--bg-active); border-radius: 999px; overflow: hidden; }
.kpi-top-sku__bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); border-radius: 999px; transition: width 1s cubic-bezier(0.22, 0.94, 0.4, 1); }
.kpi-top-sku__value { font-weight: 700; font-size: 0.82rem; color: var(--brand-700); font-variant-numeric: tabular-nums; }
@keyframes kpiSkuIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

.kpi-donut-grid { padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-donut { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; background: var(--bg-base); border: 1px solid var(--border-subtle); animation: kpiDonutIn 0.5s calc(var(--idx, 0) * 90ms) ease both; transition: transform .2s ease, box-shadow .2s ease; }
.kpi-donut:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.07); }
.kpi-donut svg { width: 72px; height: 72px; }
.kpi-donut__arc { transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.94, 0.4, 1); }
.kpi-donut__label { font-weight: 700; font-size: 0.78rem; text-align: center; }
.kpi-donut__sub { font-size: 0.7rem; color: var(--fg-tertiary); }
@keyframes kpiDonutIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

.kpi-heatmap { padding: 14px 18px 18px; }
.kpi-heatmap__cols { display: grid; grid-template-columns: 50px repeat(8, 1fr); gap: 4px; margin-bottom: 6px; font-size: 0.66rem; color: var(--fg-tertiary); text-align: center; letter-spacing: 0.05em; }
.kpi-heatmap__cols span:first-child { display: none; }
.kpi-heatmap__row { display: grid; grid-template-columns: 50px repeat(24, 1fr); gap: 3px; margin-bottom: 3px; animation: kpiHeatRowIn 0.4s calc(var(--idx, 0) * 60ms) ease both; }
.kpi-heatmap__rowlabel { font-size: 0.72rem; color: var(--fg-tertiary); font-weight: 700; align-self: center; }
.kpi-heatmap__cell { height: 22px; border-radius: 3px; background: rgba(63,166,111, calc(0.05 + var(--intensity, 0) * 0.85)); transition: transform .15s ease; animation: kpiCellIn 0.3s calc(var(--cidx, 0) * 4ms) ease both; }
.kpi-heatmap__cell:hover { transform: scale(1.3); z-index: 2; box-shadow: 0 0 0 2px var(--brand-500); }
@keyframes kpiHeatRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kpiCellIn    { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

.kpi-handoff-card { background: linear-gradient(135deg, rgba(63,166,111,.06), rgba(29,86,52,.04)); border-color: rgba(63,166,111,.3); }
.kpi-handoff-card__strip { display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.kpi-handoff-card__icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 18px rgba(29,86,52,.28); animation: kpiHandoffIconPulse 2.4s ease-in-out infinite; }
.kpi-handoff-card__txt { flex: 1; }
.kpi-handoff-card__title { font-weight: 700; font-size: 1rem; }
.kpi-handoff-card__sub { font-size: 0.82rem; color: var(--fg-tertiary); margin-top: 3px; }
@keyframes kpiHandoffIconPulse { 0%,100% { transform: scale(1); box-shadow: 0 8px 18px rgba(29,86,52,.28); } 50% { transform: scale(1.05); box-shadow: 0 12px 26px rgba(29,86,52,.42); } }

@media (max-width: 1100px) { .kpi-ai-grid { grid-template-columns: repeat(2, 1fr); } .kpi-donut-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .kpi-ai-grid { grid-template-columns: 1fr; } .kpi-donut-grid { grid-template-columns: repeat(2, 1fr); } .kpi-bar-race__row { grid-template-columns: 80px 1fr 90px; } }
@media (prefers-reduced-motion: reduce) {
  .kpi-hero-title-glow::after, .kpi-push-cta__pulse, .kpi-push-cta__dots i, .kpi-push-cta.is-sending,
  .kpi-ai-badge__core, .kpi-ai-badge__ring, .kpi-ai-vein, .kpi-handoff-card__icon,
  .kpi-bar-race__shimmer, .kpi__sparkle { animation: none !important; }
  .kpi-hero-grid .kpi, .kpi-ai-item, .kpi-bar-race__row, .kpi-top-sku, .kpi-donut,
  .kpi-heatmap__row, .kpi-heatmap__cell { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Dashboard AI Insights strip · compact executive overview */
.dash-ai-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; background: linear-gradient(135deg, rgba(63,166,111,.06), rgba(29,86,52,.03)); border: 1px solid rgba(63,166,111,.28); border-radius: 16px; margin-bottom: 16px; position: relative; overflow: hidden; }
.dash-ai-strip::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(63,166,111,.12), transparent 60%); pointer-events: none; animation: kpiAiVeinFlow 8s ease-in-out infinite; }
.dash-ai-strip__badge { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.dash-ai-strip__badge .kpi-ai-badge { width: 32px; height: 32px; }
.dash-ai-strip__badge .kpi-ai-badge__core { width: 12px; height: 12px; }
.dash-ai-strip__badge-txt { font-weight: 800; font-size: 0.95rem; }
.dash-ai-strip__badge-sub { font-size: 0.74rem; color: var(--fg-tertiary); }
.dash-ai-strip__items { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.dash-ai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--bg-elevated); border: 1px solid var(--border-subtle); cursor: pointer; transition: transform .15s ease, border-color .15s ease; text-decoration: none; color: inherit; }
.dash-ai-chip:hover { transform: translateY(-1px); border-color: var(--brand-500); }
.dash-ai-chip--alert { color: #FF3B30; border-color: rgba(255,59,48,.35); }
.dash-ai-chip--alert::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 8px rgba(255,59,48,.7); animation: kpiAiCorePulse 1.4s ease-in-out infinite; }
.dash-ai-chip--watch { color: #B7660A; border-color: rgba(245,158,11,.35); }
.dash-ai-chip--watch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; }
.dash-ai-chip--win { color: var(--brand-700); border-color: rgba(63,166,111,.4); }
.dash-ai-chip--win::before { content: "✓"; color: var(--brand-500); font-weight: 900; }
.dash-ai-strip__cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; font-weight: 700; font-size: 0.84rem; cursor: pointer; text-decoration: none; position: relative; z-index: 1; transition: transform .15s ease, box-shadow .15s ease; }
.dash-ai-strip__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(29,86,52,.36); }
@media (max-width: 920px) { .dash-ai-strip { grid-template-columns: 1fr; } .dash-ai-strip__cta { justify-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { .dash-ai-strip::after, .dash-ai-chip--alert::before { animation: none !important; } }

/* =====================================================================
   START PRODUCTION HERO · the headline prompt on Dashboard
   ===================================================================== */
.start-prod-hero {
  position: relative;
  margin-bottom: 22px;
  padding: 28px 32px;
  border-radius: 22px;
  background: linear-gradient(135deg, #143C28 0%, #1D5634 45%, #2B7A4D 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(20,60,40,.35), 0 0 0 1px rgba(63,166,111,.25);
  animation: startProdHeroPulse 4.8s ease-in-out infinite;
  isolation: isolate;
}
@keyframes startProdHeroPulse {
  0%,100% { box-shadow: 0 18px 44px rgba(20,60,40,.35), 0 0 0 1px rgba(63,166,111,.25); }
  50%     { box-shadow: 0 22px 52px rgba(20,60,40,.45), 0 0 0 2px rgba(63,166,111,.5); }
}

/* radial spotlight that drifts across the banner */
.start-prod-hero__bg-glow {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(circle at 22% 30%, rgba(95,191,162,0.4) 0%, transparent 38%),
    radial-gradient(circle at 80% 70%, rgba(63,166,111,0.32) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 55%);
  pointer-events: none;
  animation: startProdHeroGlow 9s ease-in-out infinite;
  z-index: 0;
}
@keyframes startProdHeroGlow {
  0%,100% { transform: translate(0,0)   scale(1); opacity: 0.85; }
  33%     { transform: translate(-4%,2%) scale(1.05); opacity: 1; }
  66%     { transform: translate(3%,-3%) scale(0.95); opacity: 0.9; }
}

/* particle dots floating across the banner */
.start-prod-hero__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.start-prod-hero__particles span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  box-shadow: 0 0 12px rgba(95,191,162,0.85);
  opacity: 0.7;
}
.start-prod-hero__particles span:nth-child(1) { top: 18%; left:  8%; animation: startProdHeroParticle 7s ease-in-out infinite; }
.start-prod-hero__particles span:nth-child(2) { top: 65%; left: 18%; animation: startProdHeroParticle 9s ease-in-out infinite 1.2s; }
.start-prod-hero__particles span:nth-child(3) { top: 30%; left: 38%; animation: startProdHeroParticle 8s ease-in-out infinite 2.5s; }
.start-prod-hero__particles span:nth-child(4) { top: 78%; left: 48%; animation: startProdHeroParticle 6s ease-in-out infinite 0.6s; }
.start-prod-hero__particles span:nth-child(5) { top: 12%; left: 62%; animation: startProdHeroParticle 10s ease-in-out infinite 3s; }
.start-prod-hero__particles span:nth-child(6) { top: 55%; left: 72%; animation: startProdHeroParticle 7.5s ease-in-out infinite 1.8s; }
.start-prod-hero__particles span:nth-child(7) { top: 38%; left: 88%; animation: startProdHeroParticle 8.5s ease-in-out infinite 0.4s; }
.start-prod-hero__particles span:nth-child(8) { top: 84%; left: 92%; animation: startProdHeroParticle 9.2s ease-in-out infinite 2.2s; }
@keyframes startProdHeroParticle {
  0%,100% { transform: translate(0,0)     scale(1);   opacity: 0.3; }
  50%     { transform: translate(20px,-30px) scale(1.4); opacity: 1; }
}

.start-prod-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.start-prod-hero__left { display: flex; flex-direction: column; gap: 12px; }

/* pulsing READY badge */
.start-prod-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  width: fit-content;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  backdrop-filter: blur(8px);
}
.start-prod-hero__badge-core {
  position: absolute;
  left: 12px;
  width: 10px; height: 10px;
  background: #5fbfa2;
  border-radius: 50%;
  box-shadow: 0 0 10px #5fbfa2;
  animation: startProdHeroBadgeCore 1.6s ease-in-out infinite;
}
.start-prod-hero__badge-ring {
  position: absolute;
  left: 7px;
  width: 20px; height: 20px;
  border: 2px solid #5fbfa2;
  border-radius: 50%;
  animation: startProdHeroBadgeRing 2s ease-out infinite;
}
@keyframes startProdHeroBadgeCore { 0%,100% { transform: scale(0.85); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes startProdHeroBadgeRing { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }

/* Gigantic gradient title */
.start-prod-hero__title { font-size: 2.6rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.start-prod-hero__title-gradient {
  background: linear-gradient(135deg, #fff 0%, #c8f2dd 40%, #5fbfa2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: startProdHeroTitleShimmer 4s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 2px 12px rgba(95,191,162,0.4));
}
@keyframes startProdHeroTitleShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.start-prod-hero__sub { font-size: 1rem; opacity: 0.86; max-width: 640px; margin: 0; line-height: 1.5; }
.start-prod-hero__sub strong { color: #c8f2dd; font-weight: 800; }

/* CTA row */
.start-prod-hero__cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.start-prod-hero__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px 12px 38px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.start-prod-hero__cta--primary {
  background: linear-gradient(135deg, #5fbfa2, #3FA66F);
  color: #0E2F1F;
  box-shadow: 0 12px 28px rgba(95,191,162,0.45);
}
.start-prod-hero__cta--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(95,191,162,0.65); }
.start-prod-hero__cta--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  padding-left: 22px;
}
.start-prod-hero__cta--ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.start-prod-hero__cta-pulse {
  position: absolute;
  top: 50%; left: 14px;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: startProdHeroCtaPulse 1.5s ease-out infinite;
}
@keyframes startProdHeroCtaPulse {
  0%   { box-shadow: 0 0 0 0    rgba(255,255,255,0.7); opacity: 1; }
  70%  { box-shadow: 0 0 0 18px rgba(255,255,255,0);   opacity: 0.5; }
  100% { box-shadow: 0 0 0 0    rgba(255,255,255,0);   opacity: 1; }
}
.start-prod-hero__cta-arrow {
  font-size: 1.2rem;
  margin-left: 2px;
  display: inline-block;
  animation: startProdHeroArrow 1.2s ease-in-out infinite;
}
@keyframes startProdHeroArrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.start-prod-hero__cta.is-firing {
  transform: scale(0.96);
  background: linear-gradient(135deg, #34C759, #1F8F40);
}

/* 7-step mini-ribbon under the CTAs */
.start-prod-hero__steps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.78rem;
}
.start-prod-hero__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  animation: startProdStepIn 0.5s calc(var(--sidx, 0) * 80ms) ease both;
}
.start-prod-hero__step:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.start-prod-hero__step-num {
  width: 18px; height: 18px;
  background: rgba(95,191,162,0.85);
  color: #0E2F1F;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
}
.start-prod-hero__step-name { font-weight: 600; letter-spacing: 0.01em; }
.start-prod-hero__step-arrow { color: rgba(255,255,255,0.35); font-size: 0.9rem; }
@keyframes startProdStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Right-hand big play icon */
.start-prod-hero__right { display: flex; align-items: center; justify-content: center; }
.start-prod-hero__big-icon {
  width: 150px; height: 150px;
  position: relative;
  filter: drop-shadow(0 8px 24px rgba(95,191,162,0.5));
}
.start-prod-hero__big-icon svg { width: 100%; height: 100%; }
.start-prod-hero__circle-arc {
  transform-origin: center;
  animation: startProdCircleSpin 12s linear infinite;
}
@keyframes startProdCircleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.start-prod-hero__play {
  transform-origin: 60px 60px;
  animation: startProdPlayPulse 2.4s ease-in-out infinite;
}
@keyframes startProdPlayPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Responsive */
@media (max-width: 920px) {
  .start-prod-hero { padding: 22px 20px; }
  .start-prod-hero__inner { grid-template-columns: 1fr; gap: 18px; }
  .start-prod-hero__right { order: -1; }
  .start-prod-hero__big-icon { width: 100px; height: 100px; }
  .start-prod-hero__title { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .start-prod-hero,
  .start-prod-hero__bg-glow,
  .start-prod-hero__particles span,
  .start-prod-hero__badge-core,
  .start-prod-hero__badge-ring,
  .start-prod-hero__title-gradient,
  .start-prod-hero__cta-pulse,
  .start-prod-hero__cta-arrow,
  .start-prod-hero__step,
  .start-prod-hero__circle-arc,
  .start-prod-hero__play { animation: none !important; }
}

/* =====================================================================
   QC Inspection · warehouse-floor-friendly · large tiles + touch targets
   ===================================================================== */

/* Top-right CTA · pulsing brand green · BRIGHTENED for warehouse-floor visibility */
.qc-start-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px 12px 36px;
  /* Bright mint-green core flowing down to brand-500 · much more luminous than the earlier 500→700 ramp */
  background: linear-gradient(135deg, #6FD9A8 0%, #3FA66F 60%, #2E8D5C 100%);
  color: #fff;
  border: none;
  font-weight: 800;
  border-radius: 12px;
  cursor: pointer;
  /* Brighter glow · larger spread + a soft mint halo on top */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 18px rgba(95,217,168,0.45),
    0 12px 28px rgba(29,86,52,0.34);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.qc-start-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.28) inset,
    0 0 28px rgba(95,217,168,0.65),
    0 18px 36px rgba(29,86,52,0.5);
}
.qc-start-cta__pulse {
  position: absolute;
  top: 50%; left: 14px;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: qcStartPulse 1.6s ease-out infinite;
}
@keyframes qcStartPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.qc-start-cta__arrow { font-size: 1.2rem; transition: transform 0.15s ease; }
.qc-start-cta:hover .qc-start-cta__arrow { transform: translateX(4px); }

/* Priority badges on queue tiles */
.qc-priority {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.qc-priority--high { background: rgba(255,59,48,0.16); color: #C72A20; animation: qcPriPulse 1.4s ease-in-out infinite; }
.qc-priority--med  { background: rgba(245,158,11,0.16); color: #B7660A; }
.qc-priority--low  { background: rgba(63,166,111,0.16); color: var(--brand-700); }
@keyframes qcPriPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Queue tiles · warehouse-floor sized */
.qc-queue-card { padding-bottom: 8px; }
.qc-queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 14px 18px 18px;
}
.qc-queue-tile {
  border: 2px solid var(--border-subtle);
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--bg-base);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: qcTileIn 0.5s calc(var(--idx, 0) * 70ms) ease both;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.qc-queue-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(29,86,52,0.18);
  border-color: var(--brand-500);
}
.qc-queue-tile__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.qc-queue-tile__ref { font-weight: 800; font-size: 1rem; }
.qc-queue-tile__product { font-size: 0.85rem; color: var(--fg-tertiary); margin-top: 4px; }
.qc-queue-tile__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.qc-queue-tile__qty {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(63,166,111,0.1), rgba(63,166,111,0));
  border-radius: 10px;
  border-left: 4px solid var(--brand-500);
}
.qc-queue-tile__qty-num { font-size: 1.8rem; font-weight: 900; color: var(--brand-700); }
.qc-queue-tile__qty-unit { font-size: 0.85rem; color: var(--fg-tertiary); font-weight: 700; }
.qc-queue-tile__qty-target { font-size: 0.72rem; color: var(--fg-tertiary); margin-left: auto; }
.qc-queue-tile__scrap {
  font-size: 0.7rem; font-weight: 800;
  color: #B7660A;
  background: rgba(245,158,11,0.16);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
}
.qc-queue-tile__notes {
  font-size: 0.78rem;
  color: var(--fg-tertiary);
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--brand-500);
  border-radius: 6px;
  display: flex; align-items: flex-start; gap: 6px;
  font-style: italic;
}
.qc-queue-tile__notes [data-icon] { color: var(--brand-500); margin-top: 1px; flex: none; }

/* ===== Tally Summary inside QC modal · the pushed-from-tally context ===== */
.qc-tally-summary {
  background: linear-gradient(135deg, rgba(63,166,111,0.08), rgba(29,86,52,0.04));
  border: 1px solid rgba(63,166,111,0.32);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.qc-tally-summary__head {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.qc-tally-summary__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--brand-500);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.qc-tally-summary__badge [data-icon] { font-size: 0.8rem; }
.qc-tally-summary__title { font-weight: 700; font-size: 0.92rem; }
.qc-tally-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 16px;
  margin-bottom: 12px;
}
.qc-tally-summary__grid > div { display: flex; flex-direction: column; gap: 2px; }
.qc-tally-summary__grid span { font-size: 0.66rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.qc-tally-summary__grid strong { font-size: 0.88rem; }
.qc-tally-summary__hourly { margin-top: 6px; }
.qc-tally-summary__hourly-head { font-size: 0.74rem; font-weight: 800; color: var(--brand-700); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.qc-tally-summary__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  background: var(--bg-elevated);
  border-radius: 8px;
  overflow: hidden;
}
.qc-tally-summary__table th, .qc-tally-summary__table td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--border-subtle);
}
.qc-tally-summary__table th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-tertiary); background: rgba(63,166,111,0.06); text-align: left; }
.qc-tally-summary__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qc-tally-summary__table tr:last-child td { border-bottom: none; }
.qc-tally-summary__notes {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--brand-500);
  border-radius: 6px;
  font-style: italic;
  color: var(--fg-secondary);
}
@media (max-width: 720px) {
  .qc-tally-summary__grid { grid-template-columns: repeat(2, 1fr); }
}
.qc-queue-tile__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 0.78rem;
}
.qc-queue-tile__meta > div { display: flex; flex-direction: column; }
.qc-queue-tile__meta span { font-size: 0.66rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.qc-queue-tile__meta strong { font-size: 0.86rem; }
.qc-queue-tile__cta {
  min-height: 48px;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.qc-queue-tile__cta:hover { filter: brightness(1.08); }
@keyframes qcTileIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.qc-queue-empty { padding: 36px 24px; text-align: center; }
.qc-queue-empty .empty__icon { width: 64px; height: 64px; margin: 0 auto 12px; background: rgba(63,166,111,0.12); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-500); font-size: 1.6rem; }
.qc-queue-empty .empty__title { font-size: 1.1rem; font-weight: 800; color: var(--brand-700); margin-bottom: 6px; }

/* Hand-off card */
.qc-handoff { background: linear-gradient(135deg, rgba(63,166,111,0.06), rgba(63,166,111,0)); border-color: rgba(63,166,111,0.28); }
.qc-handoff__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

/* ===== QC Modal · large checklist UI ===== */
.qc-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9100;
  padding: 24px;
  animation: pgFadeUp 0.2s ease both;
}
.qc-modal {
  background: var(--bg-elevated);
  border-radius: 18px;
  width: min(960px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  border: 1px solid var(--border-subtle);
  animation: pgFadeUp 0.26s ease both;
  overflow: hidden;
}
.qc-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(135deg, rgba(63,166,111,0.08), rgba(63,166,111,0));
}
.qc-modal__title { font-weight: 800; font-size: 1.04rem; }
.qc-modal__sub   { font-size: 0.82rem; color: var(--fg-tertiary); margin-top: 2px; }
.qc-modal__body  { padding: 18px 22px; overflow: auto; flex: 1; }
.qc-modal__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.qc-modal__hdr-row {
  display: grid;
  grid-template-columns: 1fr 1fr 160px;
  gap: 12px;
  margin-bottom: 18px;
}
.qc-field { display: flex; flex-direction: column; gap: 4px; }
.qc-field--full { grid-column: 1 / -1; margin-top: 12px; }
.qc-field label { font-size: 0.72rem; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }

/* Checklist sections */
.qc-checklist { display: flex; flex-direction: column; gap: 14px; }
.qc-section {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 14px;
}
.qc-section__head {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-700);
  margin-bottom: 8px;
}
.qc-check-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.qc-check-row:last-child { border-bottom: none; }
.qc-check-row.is-pass { background: rgba(63,166,111,0.07); border-radius: 8px; }
.qc-check-row.is-fail { background: rgba(255,59,48,0.07); border-radius: 8px; }
.qc-check-row.is-na   { background: rgba(148,163,184,0.07); border-radius: 8px; }
.qc-check-row__label { font-size: 0.92rem; }
.qc-check-row__btns { display: inline-flex; gap: 4px; }
.qc-check-btn {
  min-height: 40px;
  min-width: 78px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid var(--border-subtle);
  background: var(--bg-elevated);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.qc-check-btn--pass { color: var(--brand-700); }
.qc-check-btn--fail { color: #C72A20; }
.qc-check-btn--na   { color: var(--fg-tertiary); }
.qc-check-btn:hover { border-color: var(--fg-tertiary); transform: translateY(-1px); }
.qc-check-btn.is-active.qc-check-btn--pass { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.qc-check-btn.is-active.qc-check-btn--fail { background: #FF3B30; color: #fff; border-color: #FF3B30; }
.qc-check-btn.is-active.qc-check-btn--na   { background: #94A3B8; color: #fff; border-color: #94A3B8; }

/* Outcome buttons in modal footer */
.qc-outcome { min-height: 44px; padding: 10px 18px; font-weight: 800; border-radius: 10px; }
.qc-outcome--fail   { background: rgba(255,59,48,0.12); color: #C72A20; border: 1px solid rgba(255,59,48,0.32); }
.qc-outcome--fail:hover   { background: rgba(255,59,48,0.22); }
.qc-outcome--rework { background: rgba(245,158,11,0.12); color: #B7660A; border: 1px solid rgba(245,158,11,0.32); }
.qc-outcome--rework:hover { background: rgba(245,158,11,0.22); }
.qc-outcome--pass   { box-shadow: 0 8px 18px rgba(29,86,52,0.32); }

@media (max-width: 720px) {
  .qc-modal__hdr-row { grid-template-columns: 1fr; }
  .qc-check-row { grid-template-columns: 1fr; }
  .qc-check-row__btns { width: 100%; }
  .qc-check-btn { flex: 1; }
  .qc-queue-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .qc-start-cta__pulse, .qc-priority--high, .qc-queue-tile { animation: none !important; }
}

/* =====================================================================
   Draft Tally Sheet · quick button (top-right) on Tally / QC / Batches
   BRIGHTENED · mint-green core, luminous halo, inner light line
   ===================================================================== */
.draft-ts-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 34px;
  /* Brighter 3-stop gradient · mint top → brand mid → darker base */
  background: linear-gradient(135deg, #6FD9A8 0%, #3FA66F 55%, #2E8D5C 100%);
  color: #fff;
  border: none;
  font-weight: 800;
  border-radius: 12px;
  cursor: pointer;
  /* Luminous halo · inner highlight + mint outer glow + lift shadow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2) inset,
    0 0 16px rgba(95,217,168,0.42),
    0 10px 24px rgba(29,86,52,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.draft-ts-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.32) inset,
    0 0 26px rgba(95,217,168,0.62),
    0 16px 32px rgba(29,86,52,0.46);
}
.draft-ts-cta--small {
  padding: 8px 14px 8px 30px;
  font-size: 0.84rem;
  /* Brighter ghost · stronger green tint, vivid brand-500 text, mint border */
  background: linear-gradient(135deg, rgba(111,217,168,0.18), rgba(63,166,111,0.16));
  color: var(--brand-500);
  border: 1.5px solid rgba(63,166,111,0.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.4) inset,
    0 0 12px rgba(95,217,168,0.25),
    0 4px 10px rgba(29,86,52,0.1);
  text-shadow: none;
}
.draft-ts-cta--small:hover {
  background: linear-gradient(135deg, rgba(111,217,168,0.32), rgba(63,166,111,0.28));
  border-color: var(--brand-500);
  color: var(--brand-700);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5) inset,
    0 0 20px rgba(95,217,168,0.4),
    0 8px 18px rgba(29,86,52,0.18);
}
.draft-ts-cta__pulse {
  position: absolute;
  top: 50%; left: 13px;
  width: 9px; height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: draftTsPulse 1.7s ease-out infinite;
}
.draft-ts-cta--small .draft-ts-cta__pulse {
  background: var(--brand-500);
  box-shadow: 0 0 0 0 rgba(63,166,111,0.7);
  width: 7px; height: 7px; left: 11px;
  animation-name: draftTsPulseGreen;
}
@keyframes draftTsPulse {
  0%   { box-shadow: 0 0 0 0  rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0  rgba(255,255,255,0); }
}
@keyframes draftTsPulseGreen {
  0%   { box-shadow: 0 0 0 0  rgba(63,166,111,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(63,166,111,0); }
  100% { box-shadow: 0 0 0 0  rgba(63,166,111,0); }
}
.draft-ts-cta__arrow { font-size: 1.15rem; transition: transform 0.15s ease; }
.draft-ts-cta:hover .draft-ts-cta__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .draft-ts-cta__pulse { animation: none !important; }
}

/* =====================================================================
   Documents · All Records · type filter chips + colour-coded type pills
   ===================================================================== */
.doc-kind-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  margin-bottom: 6px;
}
.doc-kind-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-subtle);
  color: var(--fg-secondary);
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.doc-kind-chip:hover { transform: translateY(-1px); border-color: var(--chip-color, var(--brand-500)); }
.doc-kind-chip.is-active {
  background: var(--chip-color, var(--brand-500));
  border-color: var(--chip-color, var(--brand-500));
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--chip-color, var(--brand-500)) 30%, transparent);
}
.doc-kind-chip__short {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--chip-color, var(--brand-500)) 18%, transparent);
  color: var(--chip-color, var(--brand-500));
  letter-spacing: 0.04em;
}
.doc-kind-chip.is-active .doc-kind-chip__short {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.doc-kind-chip__count {
  margin-left: 2px;
  font-weight: 800;
  font-size: 0.78rem;
  background: var(--bg-active);
  color: var(--fg-primary);
  padding: 1px 8px;
  border-radius: 999px;
}
.doc-kind-chip.is-active .doc-kind-chip__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Type pill inside the table */
.doc-kind-pill {
  display: inline-block;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--chip-color, var(--brand-500)) 16%, transparent);
  color: var(--chip-color, var(--brand-500));
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* =============================================================
 * QR / barcode scanner modal (qr-scanner.js)
 * QA-MED-11 fix · moved out of injectCss() so the styles always
 * win against the components.css load order. The JS still calls
 * injectCss() as a no-op fallback for environments that strip the
 * stylesheet (e.g. embedded webviews).
 * ============================================================= */
.qrs-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(8, 16, 22, 0.78);
  backdrop-filter: blur(6px) saturate(160%);
  display: grid; place-items: center;
  animation: qrsFade .25s ease-out;
}
@keyframes qrsFade { from { opacity: 0; } to { opacity: 1; } }
.qrs-modal {
  width: min(640px, 94vw);
  background: var(--bg-card, #fff);
  color: var(--fg-primary, #111);
  border-radius: 18px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.qrs-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,.08));
}
.qrs-head__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 0 10px rgba(255,59,48,.7);
  animation: qrsPulse 1.4s ease-in-out infinite;
}
.qrs-head__dot.is-on { background: #34C759; box-shadow: 0 0 10px rgba(52,199,89,.7); }
@keyframes qrsPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.25);opacity:.6;} }
.qrs-head__title { font-weight: 800; font-size: 1.02rem; flex: 1; }
.qrs-head__sub { font-size: .78rem; color: var(--fg-tertiary, #888); margin-top: 2px; }
.qrs-head__close {
  background: transparent; border: none; color: var(--fg-primary, #111);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; font-size: 22px;
}
.qrs-head__close:hover { background: rgba(0,0,0,.06); }
[data-theme="dark"] .qrs-head__close:hover { background: rgba(255,255,255,.08); }
.qrs-stage {
  position: relative;
  background: #000;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
}
.qrs-stage video, .qrs-stage #qrs-html5 {
  width: 100%; height: 100%; object-fit: cover;
}
.qrs-frame {
  position: absolute; inset: 14% 12%;
  border: 2px solid rgba(63, 166, 111, .9);
  border-radius: 18px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.35),
    inset 0 0 40px rgba(63, 166, 111, .35);
  pointer-events: none;
}
.qrs-frame::before, .qrs-frame::after,
.qrs-frame > i, .qrs-frame > i + i {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 4px solid #5FBE87;
}
.qrs-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 16px; }
.qrs-frame::after  { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 16px; }
.qrs-frame > i:nth-child(1) { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 16px; }
.qrs-frame > i:nth-child(2) { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 16px; }
.qrs-scanline {
  position: absolute; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, #5FBE87, transparent);
  box-shadow: 0 0 18px #5FBE87;
  top: 14%;
  animation: qrsScan 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qrsScan {
  0%, 100% { top: 16%; opacity: 0; }
  10% { opacity: 1; }
  50% { top: 82%; opacity: 1; }
  90% { opacity: 0; }
}
.qrs-status {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: .78rem; letter-spacing: .04em;
}
.qrs-status.is-error { background: rgba(255, 59, 48, .85); }
.qrs-status.is-ok    { background: rgba(52, 199, 89, .85); }
.qrs-tools {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,.08));
  background: var(--bg-card, #fff);
}
.qrs-tools select {
  flex: 1;
  background: var(--bg-input, #f7f7f7);
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit; color: inherit;
  min-width: 180px;
}
.qrs-recent {
  padding: 0 18px 16px;
  background: var(--bg-card, #fff);
  font-size: .85rem;
}
.qrs-recent__title { font-size: .74rem; color: var(--fg-tertiary, #888); text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 6px; }
.qrs-recent__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px;
  background: var(--bg-input, #f7f7f7);
  margin-bottom: 5px;
  font-family: 'Roboto Mono','JetBrains Mono',Consolas,monospace;
  font-size: .82rem;
}
.qrs-recent__row b { font-weight: 700; }
.qrs-recent__row span { color: var(--fg-tertiary, #888); font-size: .72rem; }
.qrs-recent__empty { color: var(--fg-tertiary, #888); font-style: italic; font-size: .82rem; padding: 4px 0; }
.qrs-perm {
  padding: 22px 22px 18px;
  text-align: center;
}
.qrs-perm h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; }
.qrs-perm p  { margin: 4px 0; font-size: .9rem; color: var(--fg-secondary, #444); }
.qrs-perm code { background: var(--bg-input, #f3f3f3); padding: 1px 6px; border-radius: 4px; font-size: .82rem; }
@media (max-width: 540px) {
  .qrs-stage { aspect-ratio: 3 / 4; }
  .qrs-frame { inset: 18% 8%; }
}



/* =====================================================================
   PalmStat ERP · v1.2.0 "LogistiQ-parity" CSS addendum
   Marker: PALMSTAT_LOGISTIQ_GAPS_V1
   Closes Kuda's gap analysis (2026-06-03):
     Gap 1 · horizontal quicknav strip below the topbar
     Gap 2 · vibrant hero gradient on page-header + brand accent variants
     Gap 3 · page fade-in on route change + scroll-anchor smoothness
     Gap 5 · tinted status pills + connected-pulse + hover-lift on cards
     Gap 6 · "How it works" modal styling
   Appended idempotently by apply-logistiq-gaps.sh on staging.
   ===================================================================== */

/* ---------------------------------------------------------------------- */
/* Gap 1 · Horizontal quicknav strip                                       */
/* ---------------------------------------------------------------------- */
.quicknav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  overflow-x: auto;
  scrollbar-width: thin;
  position: sticky;
  top: 56px;
  z-index: 40;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.quicknav::-webkit-scrollbar { height: 6px; }
.quicknav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.quicknav__label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
  padding-right: 12px;
  border-right: 1px solid var(--border-subtle);
  margin-right: 6px;
  flex-shrink: 0;
}

.quicknav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--fg-secondary);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 160ms var(--ease-out);
  border: 1px solid transparent;
}
.quicknav__item:hover {
  background: var(--bg-hover);
  color: var(--fg-primary);
  border-color: var(--border-subtle);
}
.quicknav__item.is-active {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 2px 8px rgba(63,166,111,0.32);
}
.quicknav__item.is-active [data-icon] svg { stroke: #fff; }

.quicknav__item [data-icon] svg {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------------- */
/* Gap 2 · Vibrant hero on page-header                                     */
/* ---------------------------------------------------------------------- */
.page-header--hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(63,166,111,0.18) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 0%, rgba(90,200,250,0.16) 0%, transparent 55%),
    linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 4px 24px -8px rgba(0,0,0,0.08);
}
.page-header--hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(63,166,111,0.22), transparent 70%);
  pointer-events: none;
}
.page-header--hero .page-header__title {
  background: linear-gradient(120deg, var(--brand-700), var(--brand-500), var(--info));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------- */
/* Gap 3 · Smooth page fade-in on route change                             */
/* ---------------------------------------------------------------------- */
@keyframes palmstat-page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main > *:not(.empty) {
  animation: palmstat-page-fade-in 320ms var(--ease-out) both;
}
/* Smooth scroll anchor for skip-link + tab clicks */
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------- */
/* Gap 5 · Tinted status pills + connected pulse + card hover-lift        */
/* ---------------------------------------------------------------------- */
.int-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  white-space: nowrap;
}
.int-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  z-index: 2;
}
.int-pill__pulse {
  position: absolute;
  left: 4px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-1px, -50%);
  animation: palmstat-int-pulse 1.8s ease-out infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes palmstat-int-pulse {
  0%   { transform: translate(-1px, -50%) scale(1);   opacity: 0.55; }
  70%  { transform: translate(-1px, -50%) scale(2.6); opacity: 0;    }
  100% { transform: translate(-1px, -50%) scale(2.6); opacity: 0;    }
}

.int-pill--connected { background: rgba(52,199,89,0.14);  color: #1A7F3D; border: 1px solid rgba(52,199,89,0.34); }
.int-pill--available { background: rgba(90,200,250,0.14); color: #0A6A8C; border: 1px solid rgba(90,200,250,0.34); }
.int-pill--configure { background: rgba(255,159,10,0.14); color: #A0590A; border: 1px solid rgba(255,159,10,0.34); }
.int-pill--error     { background: rgba(255,59,48,0.14);  color: #A8001D; border: 1px solid rgba(255,59,48,0.34); }

[data-theme="dark"] .int-pill--connected { color: #5FE08F; background: rgba(52,199,89,0.18); }
[data-theme="dark"] .int-pill--available { color: #8AD6F5; background: rgba(90,200,250,0.18); }
[data-theme="dark"] .int-pill--configure { color: #FFC871; background: rgba(255,159,10,0.18); }
[data-theme="dark"] .int-pill--error     { color: #FF7E76; background: rgba(255,59,48,0.18); }

/* v2 card layout polish */
.int-card--v2 {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
  border: 1px solid var(--border-subtle);
}
.int-card--v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.18);
  border-color: var(--brand-300);
}
.int-card--v2.int-card--connected {
  border-color: rgba(52,199,89,0.32);
  background: linear-gradient(160deg, var(--bg-card), rgba(52,199,89,0.04));
}
.int-card__lastsync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--fg-tertiary);
  padding: 4px 0 6px;
  border-top: 1px dashed var(--border-subtle);
  margin-top: 8px;
}
.int-card__lastsync [data-icon] svg { width: 12px; height: 12px; stroke: var(--fg-tertiary); }

.int-card__actions--v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.int-card__actions--v2 .btn--sm {
  padding: 5px 10px;
  font-size: 0.78rem;
  border-radius: 8px;
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-secondary);
}
.btn--ghost:hover {
  background: rgba(255,59,48,0.08);
  color: #A8001D;
  border-color: rgba(255,59,48,0.4);
}

.int-card__howfoot {
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
  padding-top: 10px;
}
.int-card__how {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 0.78rem;
  color: var(--brand-700);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.int-card__how:hover {
  color: var(--brand-500);
  text-decoration: underline;
}
.int-card__how [data-icon] svg { width: 14px; height: 14px; stroke: currentColor; }

/* ---------------------------------------------------------------------- */
/* Gap 6 · "How it works" modal body styling                               */
/* ---------------------------------------------------------------------- */
.int-how {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.int-how__logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  align-self: flex-start;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.int-how__lede {
  font-size: 0.92rem;
  color: var(--fg-secondary);
  margin: 0;
  line-height: 1.45;
}
.int-how__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .int-how__grid { grid-template-columns: 1fr; }
}
.int-how__col {
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.int-how__col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-700);
  margin-bottom: 8px;
}
.int-how__col-title [data-icon] svg { width: 14px; height: 14px; stroke: var(--brand-500); }
.int-how__col ul {
  margin: 0;
  padding-left: 18px;
}
.int-how__col li {
  font-size: 0.84rem;
  color: var(--fg-primary);
  padding: 2px 0;
}

.int-how__meta {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6px 14px;
  background: var(--bg-base);
  border-radius: var(--r-md);
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}
.int-how__meta > div {
  display: contents;
}
.int-how__meta strong {
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 600;
  align-self: center;
}
.int-how__meta span {
  color: var(--fg-primary);
  word-break: break-word;
}

.int-how__help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(63,166,111,0.08);
  border: 1px solid rgba(63,166,111,0.22);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--brand-800);
}
.int-how__help [data-icon] svg {
  width: 16px; height: 16px;
  stroke: var(--brand-700);
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme="dark"] .int-how__help { color: var(--brand-200); }

/* End PALMSTAT_LOGISTIQ_GAPS_V1 */


/* PALMSTAT_QUICKNAV_POSITION_FIX_V1
   Hot-fix on top of LOGISTIQ_GAPS_V1: the .app-shell uses a fixed
   grid-template-areas layout, so an inline <nav class="quicknav">
   inserted as a sibling falls into the implicit track at the bottom.
   Position it as a fixed overlay pinned under the topbar over the
   main column only, and reserve scroll space at the top of #main.
*/
.quicknav {
  position: fixed !important;
  top: 56px !important;          /* topbar height */
  left: 264px !important;        /* sidebar width */
  right: 0 !important;
  z-index: 50 !important;
  /* Inherit the rest of the look from LOGISTIQ_GAPS_V1 */
}
@media (max-width: 980px) {
  /* On mobile the sidebar collapses to a slide-over, so quicknav goes full width */
  .quicknav { left: 0 !important; }
}
.main { padding-top: 50px; }     /* reserve room for the fixed quicknav */
/* End PALMSTAT_QUICKNAV_POSITION_FIX_V1 */


/* =====================================================================
   PalmStat ERP · v1.2.0 · "Speak to a Technician" Tru-We panel styling
   Marker: PALMSTAT_TRUWE_TECH_V1
   ===================================================================== */

/* Pill in the truwe head */
.truwe-tech-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, #3FA66F, #297548);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 6px;
  box-shadow: 0 2px 8px rgba(63,166,111,0.32);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.truwe-tech-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(63,166,111,0.42);
}
.truwe-tech-btn svg { stroke: #fff; }

/* In-panel form */
.truwe-tech {
  padding: 4px 2px 12px;
}
.truwe-tech__head {
  margin-bottom: 10px;
}
.truwe-tech__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.truwe-tech__sub {
  font-size: 0.78rem;
  color: var(--fg-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
.truwe-tech__form {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.truwe-tech__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.truwe-tech__row > span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.truwe-tech__row > span em {
  text-transform: none;
  font-style: normal;
  font-weight: 500;
  color: var(--fg-tertiary);
  margin-left: 4px;
}
.truwe-tech__input {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--fg-primary);
  outline: none;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.truwe-tech__input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(63,166,111,0.18);
}
textarea.truwe-tech__input {
  resize: vertical;
  min-height: 90px;
  line-height: 1.45;
}

.truwe-tech__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.truwe-tech__back {
  background: transparent;
  border: none;
  color: var(--fg-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 6px 4px;
}
.truwe-tech__back:hover { color: var(--brand-500); }
.truwe-tech__submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #3FA66F, #297548);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(63,166,111,0.32);
  transition: transform 140ms var(--ease-out);
}
.truwe-tech__submit svg { stroke: #fff; }
.truwe-tech__submit:hover { transform: translateY(-1px); }
.truwe-tech__submit[disabled] { opacity: 0.65; cursor: progress; transform: none; }
.truwe-tech__again {
  background: var(--bg-base);
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--fg-primary);
  cursor: pointer;
}

.truwe-tech__status { min-height: 18px; font-size: 0.78rem; margin-top: 4px; }
.truwe-tech__err { color: #A8001D; font-weight: 500; }

.truwe-tech__spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  animation: truwe-tech-spin 700ms linear infinite;
}
@keyframes truwe-tech-spin { to { transform: rotate(360deg); } }

/* Success card */
.truwe-tech__ok {
  text-align: center;
  padding: 12px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.truwe-tech__ok-tick {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(52,199,89,0.16);
  color: #1A7F3D;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  animation: truwe-tech-pop 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.truwe-tech__ok-tick svg { stroke: #1A7F3D; }
@keyframes truwe-tech-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.truwe-tech__ok-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--fg-primary);
  max-width: 280px;
  line-height: 1.4;
}
.truwe-tech__ok-ref {
  font-size: 0.82rem;
  color: var(--fg-secondary);
}
.truwe-tech__ok-ref strong {
  font-family: var(--font-mono);
  background: rgba(63,166,111,0.12);
  color: var(--brand-800);
  padding: 2px 8px;
  border-radius: 6px;
}
.truwe-tech__ok-note {
  font-size: 0.74rem;
  color: var(--warning);
  background: rgba(255,159,10,0.12);
  border: 1px solid rgba(255,159,10,0.28);
  border-radius: 6px;
  padding: 5px 10px;
  max-width: 280px;
}
.truwe-tech__ok-meta {
  font-size: 0.74rem;
  color: var(--fg-tertiary);
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: 4px;
}

[data-theme="dark"] .truwe-tech__ok-tick { background: rgba(52,199,89,0.22); color: #5FE08F; }
[data-theme="dark"] .truwe-tech__ok-tick svg { stroke: #5FE08F; }
[data-theme="dark"] .truwe-tech__ok-ref strong { color: #A8E2BF; background: rgba(63,166,111,0.22); }

/* End PALMSTAT_TRUWE_TECH_V1 */


/* =====================================================================
   PalmStat ERP · v1.2.0 · Devs's client-thread key points
   Marker: PALMSTAT_DEVS_KEYPOINTS_V1
   Styles for:
     · WIP-by-Stage flow strip (live-floor.js)        — Factory Floor Visibility
     · Per-machine "Now running" row (live-floor.js)  — Factory Floor Visibility
     · Reel-detail repeating-row panel (rm-intake.js) — Reel Barcode Structure
     · AccuTrack integration card (integrations.js)   — AccuTrack scaffold
   ===================================================================== */

/* ---------- WIP by Stage ------------------------------------------- */
.lf-stages-card { background: linear-gradient(160deg, var(--bg-card) 0%, rgba(63,166,111,0.04) 100%); }
.lf-stages {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 18px 18px;
  position: relative;
}
@media (max-width: 1100px) { .lf-stages { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .lf-stages { grid-template-columns: repeat(2, 1fr); } }
.lf-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 16px;
  border-radius: 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--fg-primary);
  overflow: hidden;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  animation: lf-stage-fade 320ms var(--ease-out) both;
  animation-delay: calc(var(--idx) * 40ms);
}
@keyframes lf-stage-fade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
.lf-stage::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.85;
}
.lf-stage:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,0.18);
}
.lf-stage__step {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
}
.lf-stage__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lf-stage__icon { color: var(--accent); }
.lf-stage__icon svg { width: 14px; height: 14px; stroke: var(--accent); }
.lf-stage__label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--fg-primary);
}
.lf-stage__count {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 2px;
}
.lf-stage__bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-active);
  overflow: hidden;
  margin-top: 4px;
}
.lf-stage__bar-fill {
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #fff));
  border-radius: 999px;
  transition: width 360ms var(--ease-out);
}
.lf-stage--bottleneck { background: linear-gradient(180deg, var(--bg-base) 0%, rgba(255,107,107,0.08) 100%); border-color: rgba(255,107,107,0.4); }
.lf-stage--bottleneck .lf-stage__count { color: #C0392B; }
.lf-stage--idle { opacity: 0.78; }
.lf-stage__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,107,107,0.15);
  color: #C0392B;
  font-size: 0.66rem;
  font-weight: 600;
}
.lf-stage__flag--idle { background: rgba(110,110,115,0.18); color: var(--fg-secondary); }
.lf-stage__flag [data-icon] svg { width: 10px; height: 10px; stroke: currentColor; }
.lf-stage__arrow {
  position: absolute;
  right: -6px; top: 50%;
  transform: translateY(-50%);
  color: var(--fg-tertiary);
  font-size: 1rem;
  font-weight: 700;
  pointer-events: none;
}
@media (max-width: 1100px) { .lf-stage__arrow { display: none; } }

/* ---------- Now running (per-machine) ------------------------------ */
.lf-now-card { background: linear-gradient(160deg, var(--bg-card) 0%, rgba(90,200,250,0.05) 100%); }
.lf-now {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px 14px;
}
.lf-now__row {
  display: grid;
  grid-template-columns: 90px 1.6fr 1.2fr 1.4fr 1fr 0.8fr 0.9fr;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-base);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  animation: lf-stage-fade 280ms var(--ease-out) both;
  animation-delay: calc(var(--idx) * 30ms);
}
.lf-now__machine { font-family: var(--font-mono); font-size: 0.88rem; color: var(--brand-700); }
.lf-now__product { font-size: 0.84rem; color: var(--fg-primary); }
.lf-now__op { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--fg-secondary); }
.lf-now__op [data-icon] svg { width: 12px; height: 12px; stroke: var(--fg-tertiary); }
.lf-now__progress { display: flex; align-items: center; gap: 8px; }
.lf-now__bar { flex: 1; height: 8px; background: var(--bg-active); border-radius: 999px; overflow: hidden; position: relative; }
.lf-now__bar-fill {
  position: absolute; inset: 0; width: var(--w, 0%);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  border-radius: 999px;
  transition: width 400ms var(--ease-out);
}
.lf-now__pct { font-size: 0.78rem; font-weight: 700; color: var(--fg-primary); min-width: 34px; text-align: right; }
.lf-now__qty { font-size: 0.78rem; color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.lf-now__eta { font-size: 0.78rem; color: var(--fg-secondary); font-style: italic; }
.lf-now__status .lf-status { font-size: 0.66rem; }
@media (max-width: 980px) {
  .lf-now__row { grid-template-columns: 1fr 1fr; }
  .lf-now__progress, .lf-now__qty, .lf-now__eta { grid-column: span 2; }
}

/* ---------- Reel-detail repeating-row panel (rm-intake) ------------ */
.rm-reels {
  background: linear-gradient(160deg, var(--bg-card) 0%, rgba(90,200,250,0.04) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 16px 20px 18px;
  margin-top: 18px;
}
.rm-reels__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.rm-reels__title { font-size: 1rem; font-weight: 700; color: var(--fg-primary); }
.rm-reels__sub { font-size: 0.78rem; color: var(--fg-secondary); margin-top: 3px; }
.rm-reels__add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; border: none; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(63,166,111,0.32);
  transition: transform 140ms var(--ease-out);
}
.rm-reels__add:hover { transform: translateY(-1px); }
.rm-reels__list { display: flex; flex-direction: column; gap: 6px; }
.rm-reels__row {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 1.1fr 1.3fr 1.6fr 36px;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  align-items: center;
}
.rm-reels__row > input, .rm-reels__row > select {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--fg-primary);
  outline: none;
}
.rm-reels__row > input:focus, .rm-reels__row > select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(63,166,111,0.18); }
.rm-reels__row label.col {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.rm-reels__rm {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-tertiary);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.95rem;
}
.rm-reels__rm:hover { background: rgba(255,59,48,0.08); color: #A8001D; }
.rm-reels__total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(63,166,111,0.08);
  border-radius: 8px;
  font-size: 0.84rem;
}
.rm-reels__total strong { color: var(--brand-700); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .rm-reels__row { grid-template-columns: 1fr 1fr 36px; }
}

/* ---------- AccuTrack card uses existing int-card-v2 styles -------- */

/* End PALMSTAT_DEVS_KEYPOINTS_V1 */


/* PALMSTAT_REELS_INLINE_V1
   r2 of the Reel-detail capture: moved INSIDE the Manual intake modal
   and conditionally shown only for reel-type items per Brent's
   2026-06-03 clarification.
*/
.rm-reels--inline {
  margin-top: 14px;
  margin-bottom: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(63,166,111,0.05) 0%, rgba(90,200,250,0.04) 100%);
  border: 1px dashed rgba(63,166,111,0.36);
  animation: rm-reels-fade 240ms cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes rm-reels-fade { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: none; } }

.rm-reels__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rm-reels__title [data-icon] svg { width: 14px; height: 14px; stroke: var(--brand-700); }

.rm-reels__pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(63,166,111,0.14);
  color: var(--brand-800);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme="dark"] .rm-reels__pill { color: var(--brand-200); background: rgba(63,166,111,0.22); }

/* Tighten the row inside the modal (less horizontal real estate) */
.rm-reels--inline .rm-reels__row {
  grid-template-columns: 0.7fr 1fr 1fr 1.2fr 1.4fr 32px;
  padding: 6px 8px;
}
@media (max-width: 720px) {
  .rm-reels--inline .rm-reels__row { grid-template-columns: 1fr 1fr 32px; }
}

/* End PALMSTAT_REELS_INLINE_V1 */


/* PALMSTAT_REELS_SUP_V1
   Supplier column inherits from the main intake form's Supplier field —
   one delivery = one supplier, no per-row override. Style the read-only
   supplier input as a chip + add the "inherits from form" hint pill on
   the column label.
*/
.rm-reels__inh {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(63,166,111,0.14);
  color: var(--brand-800);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
  vertical-align: middle;
}
[data-theme="dark"] .rm-reels__inh { color: var(--brand-200); background: rgba(63,166,111,0.22); }

.rm-reels__sup {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-700);
  background: rgba(63,166,111,0.06);
  border: 1px dashed rgba(63,166,111,0.36) !important;
  cursor: not-allowed;
  border-radius: 6px;
  padding: 6px 10px;
}
.rm-reels__sup:focus { outline: none; }
.rm-reels__sup:empty::before,
.rm-reels__sup[value=""] {
  color: var(--fg-tertiary);
  font-style: italic;
}
/* End PALMSTAT_REELS_SUP_V1 */


/* PALMSTAT_DEVS_FAILS_V1
   Reel Search view styling + small surfaces for production-trend backend.
*/
.reel-search__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
  margin-bottom: 4px;
}
.reel-search__input {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 12px 16px;
}
.reel-search__stats {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.reel-search__stat {
  text-align: center;
  background: rgba(63,166,111,0.06);
  border: 1px solid rgba(63,166,111,0.18);
  border-radius: 10px;
  padding: 6px 14px;
  min-width: 64px;
}
.reel-search__stat-v {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-700);
  line-height: 1;
}
.reel-search__stat-l {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-top: 2px;
}
[data-theme="dark"] .reel-search__stat-v { color: var(--brand-200); }

.reel-search__suppliers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 18px 14px;
}
.reel-search__chip {
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.reel-search__chip:hover {
  transform: translateY(-1px);
}
.reel-search__table th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* End PALMSTAT_DEVS_FAILS_V1 */


/* PALMSTAT_SPRINT2_PHASE2_V1
   Styling for Scheduled Reports + Custom Report Builder MVPs.
   Closes Devs Requirements Test FAILs #8, #11, #12.
*/

/* ---------- Scheduled Reports ------------------------------------- */
.sched-card {
  background: linear-gradient(160deg, var(--bg-card) 0%, rgba(63,166,111,0.04) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  overflow: hidden;
}
.sched-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 22px;
}
@media (max-width: 980px) { .sched-form { grid-template-columns: repeat(2, 1fr); } }
.sched-form__field { display: flex; flex-direction: column; gap: 4px; }
.sched-form__field label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
}
.sched-form__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.sched-table th {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sched-freq-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(63,166,111,0.14);
  color: var(--brand-800);
}
[data-theme="dark"] .sched-freq-pill { color: var(--brand-200); background: rgba(63,166,111,0.22); }
.sched-actions { display: flex; gap: 4px; }
.sched-actions .btn { padding: 4px 8px; font-size: 0.74rem; }

/* ---------- Report Builder ---------------------------------------- */
.rb-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 980px) { .rb-grid { grid-template-columns: 1fr; } }
.rb-side {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 110px;
}
.rb-side__section { margin-bottom: 18px; }
.rb-side__section-title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-subtle);
}
.rb-cols { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.rb-cols label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}
.rb-cols label:hover { background: rgba(63,166,111,0.06); }
.rb-cols label input { margin: 0; }
.rb-cols__type {
  margin-left: auto;
  font-size: 0.62rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rb-filter-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 28px;
  gap: 4px;
  margin-bottom: 4px;
}
.rb-filter-row select, .rb-filter-row input {
  padding: 5px 8px;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-input);
}
.rb-side__btn {
  width: 100%;
  margin-top: 6px;
}
.rb-main {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rb-main__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
}
.rb-main__title { font-weight: 700; font-size: 1rem; }
.rb-main__actions { display: flex; gap: 6px; }
.rb-result {
  max-height: 540px;
  overflow: auto;
}
.rb-empty {
  text-align: center;
  padding: 60px 30px;
  color: var(--fg-tertiary);
}
.rb-saved {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.rb-saved__item {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
}
.rb-saved__item:hover { border-color: var(--brand-300); }
.rb-saved__item strong { font-weight: 600; }
.rb-saved__item-meta { color: var(--fg-tertiary); font-size: 0.7rem; }

/* End PALMSTAT_SPRINT2_PHASE2_V1 */


/* PALMSTAT_SPRINT3_V1
   Admin Import view styles.
*/
.admin-import-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 720px) { .admin-import-tabs { grid-template-columns: 1fr; } }
.admin-import__tab {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: all 160ms var(--ease-out);
}
.admin-import__tab:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.admin-import__tab.is-active {
  background: linear-gradient(135deg, rgba(63,166,111,0.10), rgba(63,166,111,0.04));
  border-color: var(--brand-500);
  box-shadow: 0 4px 14px -4px rgba(63,166,111,0.32);
}
.admin-import__tab-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(63,166,111,0.12);
  display: grid; place-items: center;
}
.admin-import__tab-icon svg { stroke: var(--brand-700); width: 18px; height: 18px; }

.admin-import-card { background: linear-gradient(160deg, var(--bg-card) 0%, rgba(63,166,111,0.03) 100%); }

.admin-import__upload {
  padding: 18px 22px;
}
.admin-import__drop {
  display: flex; gap: 14px; align-items: center;
  padding: 18px 20px;
  border: 2px dashed rgba(63,166,111,0.34);
  border-radius: 12px;
  background: rgba(63,166,111,0.04);
  cursor: pointer;
  transition: all 160ms var(--ease-out);
}
.admin-import__drop:hover, .admin-import__drop.is-drag {
  background: rgba(63,166,111,0.10);
  border-color: var(--brand-500);
}
.admin-import__drop-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--brand-500);
  display: grid; place-items: center;
}
.admin-import__drop-icon svg { stroke: #fff; width: 20px; height: 20px; }

.admin-import__preview {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  font-family: var(--font-mono);
  white-space: pre;
  overflow-x: auto;
  max-height: 140px;
  overflow-y: auto;
}

.admin-import__actions {
  display: flex;
  gap: 8px;
  padding: 0 22px 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-import__results { padding: 18px 22px; }
.admin-import__results:empty { display: none; }

.admin-import__summary {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-import__stat {
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  text-align: center;
  min-width: 100px;
}
.admin-import__stat-v {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}
.admin-import__stat-l {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.admin-import__stat--ok { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.3); }
.admin-import__stat--ok .admin-import__stat-v { color: #1A7F3D; }
.admin-import__stat--warn { background: rgba(255,159,10,0.08); border-color: rgba(255,159,10,0.3); }
.admin-import__stat--warn .admin-import__stat-v { color: #A0590A; }
[data-theme="dark"] .admin-import__stat--ok .admin-import__stat-v { color: #5FE08F; }
[data-theme="dark"] .admin-import__stat--warn .admin-import__stat-v { color: #FFC871; }

.admin-import__h {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--fg-primary);
}

.admin-sync-table th {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* End PALMSTAT_SPRINT3_V1 */


/* PALMSTAT_MODAL_BACK_V1
   Back button for all modal popups — keeps users oriented and gives
   them a clear way back to the module they were on.
*/
.modal-back-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-right: 12px;
  margin-bottom: 6px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  color: var(--fg-secondary);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.modal-back-btn:hover {
  background: linear-gradient(135deg, rgba(63,166,111,0.10), rgba(63,166,111,0.05));
  color: var(--brand-700);
  border-color: var(--brand-300);
  transform: translateX(-1px);
}
.modal-back-btn:active { transform: translateX(-2px); }
.modal-back-btn svg { stroke: currentColor; }

/* When injected into a header, push it to the top-left and let title sit beside it */
.modal__header,
.ts-modal__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal__header .modal-back-btn,
.ts-modal__head .modal-back-btn {
  align-self: flex-start;
}

/* Synth header for overlays that didn't have one — give it some breathing room */
.modal__header--synth {
  padding: 8px 8px 0;
}

[data-theme="dark"] .modal-back-btn {
  background: rgba(255,255,255,0.04);
  color: var(--fg-secondary);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .modal-back-btn:hover {
  color: var(--brand-200);
  border-color: var(--brand-500);
}
/* End PALMSTAT_MODAL_BACK_V1 */


/* PALMSTAT_PRODUCTION_FLOW_V1
   Interactive Plan → Batches → WIP → Output flow visualisation for the
   daily + weekly production plan views.
*/
.pflow-card {
  background: linear-gradient(160deg, var(--bg-card) 0%, rgba(63,166,111,0.04) 60%, rgba(90,200,250,0.04) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  overflow: hidden;
}
.pflow-card .card__header { border-bottom: 1px solid var(--border-subtle); }
.pflow-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3FA66F;
  margin-right: 4px;
  animation: pflow-pulse 1.6s ease-in-out infinite;
}
@keyframes pflow-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.pflow-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  padding: 18px 22px;
}
@media (max-width: 980px) { .pflow-body { grid-template-columns: 1fr; } }

.pflow-flow { min-height: 200px; }
.pflow-svg { width: 100%; height: auto; max-height: 220px; }
.pflow-block { transition: transform 200ms var(--ease-out); }
.pflow-block:hover { transform: translateY(-2px); }
.pflow-block:hover rect { fill-opacity: 0.28; }

.pflow-insights {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pflow-insights__title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 700;
}
.pflow-insights__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pflow-insight {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 140ms var(--ease-out);
}
.pflow-insight:hover { transform: translateX(2px); border-color: var(--accent); }
.pflow-insight__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
}
.pflow-insight__n {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fg-primary);
  line-height: 1;
}
.pflow-insight__l {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.pflow-tip {
  font-size: 0.74rem;
  color: var(--fg-secondary);
  padding: 6px 8px;
  background: rgba(63,166,111,0.06);
  border: 1px solid rgba(63,166,111,0.18);
  border-radius: 6px;
}

/* Per-machine variance strip */
.pflow-machines {
  padding: 14px 22px 18px;
  border-top: 1px dashed var(--border-subtle);
}
.pflow-machines__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fg-primary);
  margin-bottom: 8px;
}
.pflow-mrow {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 50px 110px 90px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  margin-bottom: 4px;
  font-size: 0.82rem;
}
@media (max-width: 980px) { .pflow-mrow { grid-template-columns: 90px 1fr 50px; } .pflow-mrow > *:nth-child(n+4) { display: none; } }
.pflow-mrow__code { font-family: var(--font-mono); font-weight: 700; color: var(--brand-700); }
.pflow-mrow__name { color: var(--fg-primary); }
.pflow-mrow__bar { height: 8px; background: var(--bg-active); border-radius: 999px; overflow: hidden; position: relative; }
.pflow-mrow__bar-fill { position: absolute; inset: 0; width: var(--w, 0%); border-radius: 999px; transition: width 400ms var(--ease-out); }
.pflow-mrow--good .pflow-mrow__bar-fill { background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }
.pflow-mrow--warn .pflow-mrow__bar-fill { background: linear-gradient(90deg, #FFB347, #E0780A); }
.pflow-mrow--bad  .pflow-mrow__bar-fill { background: linear-gradient(90deg, #FF6B6B, #C0392B); }
.pflow-mrow--idle .pflow-mrow__bar-fill { background: var(--fg-tertiary); }
.pflow-mrow__pct { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pflow-mrow__qty { color: var(--fg-secondary); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pflow-mrow__status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 6px;
  border-radius: 999px;
}
.pflow-mrow--good .pflow-mrow__status { background: rgba(52,199,89,0.14); color: #1A7F3D; }
.pflow-mrow--warn .pflow-mrow__status { background: rgba(255,159,10,0.14); color: #A0590A; }
.pflow-mrow--bad  .pflow-mrow__status { background: rgba(255,59,48,0.14); color: #A8001D; }
.pflow-mrow--idle .pflow-mrow__status { background: rgba(110,110,115,0.14); color: var(--fg-tertiary); }

[data-theme="dark"] .pflow-mrow--good .pflow-mrow__status { color: #5FE08F; }
[data-theme="dark"] .pflow-mrow--warn .pflow-mrow__status { color: #FFC871; }
[data-theme="dark"] .pflow-mrow--bad  .pflow-mrow__status { color: #FF7E76; }
/* End PALMSTAT_PRODUCTION_FLOW_V1 */


/* PALMSTAT_CRM_DEMAND_V1
   CRM (light) + Demand Planning + Order-to-Production flow strip.
*/

/* ---------- Order-to-Production flow strip --------------------------- */
.ofs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(63,166,111,0.05), rgba(90,200,250,0.05));
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.ofs__label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
  padding-right: 8px;
  border-right: 1px solid var(--border-subtle);
  margin-right: 4px;
  flex-shrink: 0;
}
.ofs__step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 140ms var(--ease-out);
  text-decoration: none;
  flex-shrink: 0;
}
.ofs__step:hover { color: var(--brand-700); border-color: var(--brand-300); transform: translateY(-1px); }
.ofs__step.is-active {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(63,166,111,0.32);
}
.ofs__step.is-active .ofs__icon svg { stroke: #fff; }
.ofs__icon svg { width: 12px; height: 12px; }
.ofs__arrow { color: var(--fg-tertiary); font-weight: 700; flex-shrink: 0; }

/* ---------- CRM ------------------------------------------------------ */
.crm-summary { padding: 14px 18px; }
.crm-summary__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
@media (max-width: 980px) { .crm-summary__grid { grid-template-columns: repeat(3, 1fr); } }
.crm-summary__tile {
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent, var(--brand-500));
  border-radius: 8px;
  text-align: center;
}
.crm-summary__tile--money { border-left-color: var(--brand-500); background: linear-gradient(160deg, rgba(63,166,111,0.06), transparent); }
.crm-summary__v {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fg-primary);
}
.crm-summary__l {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-top: 2px;
}

.crm-form-card { background: linear-gradient(160deg, var(--bg-card), rgba(63,166,111,0.03)); }
.crm-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 22px 20px;
}
@media (max-width: 980px) { .crm-form { grid-template-columns: 1fr 1fr; } }
.crm-form__field { display: flex; flex-direction: column; gap: 4px; }
.crm-form__field label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
}
.crm-form__field--wide { grid-column: 1 / -1; }
.crm-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

.crm-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.crm-row__actions { display: flex; gap: 4px; align-items: center; }
.crm-row__status {
  font-size: 0.78rem;
  padding: 4px 6px;
  min-width: 90px;
}

/* ---------- Demand Planning ----------------------------------------- */
.dp-horizon { display: flex; gap: 4px; }
.dp-table th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.dp-cov {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 140px;
}
.dp-cov__bar {
  flex: 1;
  height: 8px;
  background: var(--bg-active);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.dp-cov__bar-fill {
  position: absolute;
  inset: 0;
  width: var(--w, 0%);
  border-radius: 999px;
  transition: width 380ms var(--ease-out);
}
.dp-cov__pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.dp-cov--good .dp-cov__bar-fill { background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }
.dp-cov--warn .dp-cov__bar-fill { background: linear-gradient(90deg, #FFB347, #E0780A); }
.dp-cov--bad  .dp-cov__bar-fill { background: linear-gradient(90deg, #FF6B6B, #C0392B); }
.dp-shortfall { color: #C0392B; font-weight: 700; }
[data-theme="dark"] .dp-shortfall { color: #FF7E76; }
/* End PALMSTAT_CRM_DEMAND_V1 */


/* PALMSTAT_SO_STOCK_V1
   Sales Order line stock-availability indicator (4-state):
     AVAILABLE   — green   — sufficient FG stock
     PARTIAL     — amber   — some stock but not enough
     MANUFACTURE — orange  — no stock, but FG has a BOM
     ORDER       — red     — no stock, no BOM (must procure)
*/
.so-stock {
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  min-width: 180px;
  max-width: 260px;
}
.so-stock__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  align-self: center;
}
.so-stock__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.so-stock__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.so-stock__action {
  font-size: 0.66rem;
  color: var(--fg-secondary);
}
.so-stock__action--good { color: var(--brand-700); }
.so-stock__action--warn { color: #A0590A; }
.so-stock__action--bad  { color: #A8001D; }

.so-stock--available   { --accent: #3FA66F; }
.so-stock--partial     { --accent: #FFB347; }
.so-stock--manufacture { --accent: #E0780A; }
.so-stock--order       { --accent: #FF6B6B; }

[data-theme="dark"] .so-stock__action--good { color: #5FE08F; }
[data-theme="dark"] .so-stock__action--warn { color: #FFC871; }
[data-theme="dark"] .so-stock__action--bad  { color: #FF7E76; }

/* Dispatch summary card colour-coding */
#so-dispatch-summary.so-summary--ready { border-left: 4px solid #3FA66F; }
#so-dispatch-summary.so-summary--gaps  { border-left: 4px solid #FFB347; }

/* End PALMSTAT_SO_STOCK_V1 */


/* PALMSTAT_SO_FOLDER_V1
   "Order Folder" tile + print letterhead for the Sales Order detail view.
*/

/* ----------------------------------------------------------------------
   Order Folder tile
   ---------------------------------------------------------------------- */
.so-folder {
  margin-top: 20px;
  padding: 18px 20px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.so-folder__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.so-folder__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: 0.02em;
}
.so-folder__subtitle {
  font-size: 0.78rem;
  color: var(--fg-tertiary);
  margin-top: 2px;
}
.so-folder__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.so-folder__upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.so-folder__status {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
}
.so-folder__status--info    { background: color-mix(in oklab, var(--brand-500) 12%, transparent); color: var(--fg-secondary); }
.so-folder__status--success { background: color-mix(in oklab, #3FA66F 18%, transparent); color: #3FA66F; }
.so-folder__status--error   { background: color-mix(in oklab, #FF6B6B 18%, transparent); color: #FF6B6B; }

.so-folder__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-folder__empty {
  padding: 18px;
  text-align: center;
  color: var(--fg-tertiary);
  font-size: 0.85rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.so-folder__doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-base);
  transition: background 120ms ease;
}
.so-folder__doc:hover {
  background: color-mix(in oklab, var(--brand-500) 6%, var(--bg-base));
}
.so-folder__doc-icon {
  font-size: 1.6rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.so-folder__doc-body { flex: 1; min-width: 0; }
.so-folder__doc-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.so-folder__doc-meta {
  display: flex;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--fg-tertiary);
  margin-top: 2px;
  flex-wrap: wrap;
}
.so-folder__doc-kind {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-500);
  text-transform: uppercase;
}
.so-folder__doc-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.so-folder__doc-actions .btn { padding: 4px 10px; font-size: 0.9rem; }
.so-folder__delete:hover { color: #FF6B6B; }

/* ----------------------------------------------------------------------
   Print letterhead — visible only when printing
   ---------------------------------------------------------------------- */
.print-only { display: none; }

@media print {
  /* Hide chrome */
  .sidebar,
  .topbar,
  #tru-we,
  #truwe-launcher,
  .truwe-launcher,
  #so-print-btn,
  .so-folder__actions,
  .btn,
  button {
    display: none !important;
  }
  /* Reveal print-only blocks */
  .print-only { display: block !important; }

  body { background: #fff !important; color: #000 !important; }
  .view, main { padding: 0 !important; margin: 0 !important; }

  /* Force light-mode colours for printing */
  * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .so-stock--available   { border-color: #3FA66F !important; }
  .so-stock--partial     { border-color: #FFB347 !important; }
  .so-stock--manufacture { border-color: #E0780A !important; }
  .so-stock--order       { border-color: #FF6B6B !important; }

  /* Letterhead block */
  .so-letterhead {
    padding: 16px 24px 12px;
    margin-bottom: 18px;
    border-bottom: 3px solid #000;
  }
  .so-letterhead__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
  .so-letterhead__brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .so-letterhead__mark { display: block !important; }
  .so-letterhead__name {
    font-size: 22pt;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .so-letterhead__sub {
    font-size: 8pt;
    letter-spacing: 0.18em;
    margin-top: 4px;
    color: #444 !important;
  }
  .so-letterhead__company {
    font-size: 8pt;
    text-align: right;
    line-height: 1.4;
  }
  .so-letterhead__rule {
    border-top: 1px solid #000;
    margin-top: 12px;
  }
  .so-letterhead__doctype {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
  }
  .so-letterhead__doctype-label {
    font-size: 9pt;
    letter-spacing: 0.32em;
    color: #555 !important;
  }
  .so-letterhead__doctype-ref {
    font-size: 18pt;
    font-weight: 800;
    margin-top: 2px;
  }
  .so-letterhead__doctype-meta {
    font-size: 9pt;
    line-height: 1.5;
    text-align: right;
  }
  .so-letterhead__doctype-meta span { color: #555 !important; }
  .so-letterhead__footer {
    border-top: 1px solid #000;
    margin-top: 20px;
    padding-top: 6px;
    display: flex;
    justify-content: space-between;
    font-size: 7.5pt;
    color: #444 !important;
  }

  /* Page sizing */
  @page {
    size: A4;
    margin: 14mm 12mm 14mm 12mm;
  }
  .card, section.card { page-break-inside: avoid; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
}
/* End PALMSTAT_SO_FOLDER_V1 */

/* PALMSTAT_BULK_BAR_FIX_V1 ------------------------------------------------
   Three fixes for the floating BulkActions bar on data list views:
   (1) inner .bulk-bar__actions was flex-wrap:wrap → Print-Delivery-Notes
       button dropped to a 2nd row. Force nowrap so all buttons stay inline.
   (2) Fixed-position bar was overlapping the last visible table row. Add a
       buffer at the bottom of any table that wears the .table--bulk class
       so the FAB hovers in empty space.
   (3) Bar's bottom-right anchor was colliding with the Tru-We launcher.
       Reserve right-edge space so they coexist on screen.
   --------------------------------------------------------------------- */
.bulk-bar__actions {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.bulk-bar {
  right: 110px !important;                 /* clear Tru-We launcher (~80px) + breathing room */
  max-width: calc(100vw - 260px) !important; /* sidebar (240) + 20px gutter */
}
@media (max-width: 980px) {
  .bulk-bar { right: 100px !important; }
}
/* Padding-bottom on bulk-tables so the FAB never covers data rows */
.table--bulk { margin-bottom: 80px; }
/* Belt-and-braces · only triggers when bulk-bar is actually visible (browsers
   that support :has() — Chrome 108+, Safari 15.4+, Firefox 121+). */
@supports selector(:has(*)) {
  body:has(.bulk-bar.is-visible) .table--bulk { margin-bottom: 96px; }
}
/* End PALMSTAT_BULK_BAR_FIX_V1 ------------------------------------------ */

/* PALMSTAT_BULK_BAR_FIX_V1B — supplement to V1
   Push body content above the FAB-occupied zone when the bulk-bar is visible,
   so the last data row is never hidden behind the floating action bar. */
@supports selector(:has(*)) {
  /* Pad the MAIN content area (not body — that shifted the fixed sidebar) so
     the table card sits above the FAB. Belt-and-braces with a max-height clamp
     on the inner scroll wrapper. */
  body:has(.bulk-bar.is-visible) main.main,
  body:has(.bulk-bar.is-visible) main,
  body:has(.bulk-bar.is-visible) .view {
    padding-bottom: 110px !important;
  }
  body:has(.bulk-bar.is-visible) .card > div[style*="overflow"] {
    max-height: calc(64vh - 80px) !important;
  }
}
/* End PALMSTAT_BULK_BAR_FIX_V1B */

/* ============================================================
   PALMSTAT_DOC_BUILDER_V1 · Universal print-letterhead styles
   Appended 2026-06-04 · do not edit this block in place — replace
   the entire fence to bump.
   ============================================================ */
/* =====================================================================
   PALMSTAT_DOC_BUILDER_V1
   PalmStat ERP · Universal document builder · print stylesheet · v1.2.0
   Brent's ask: necessary logos on every PalmStat-generated document.
   Pattern proven by PALMSTAT_SO_FOLDER_V1; this block GENERALISES it
   for all 14 doc kinds via the palmstat-doc-builder.js library.
   Append at the END of frontend/css/components.css under the fence so
   later patches can find/replace cleanly.
   ===================================================================== */

/* ----------------------------------------------------------------------
   On-screen Print button styling (kept light — matches .btn--ghost)
   ---------------------------------------------------------------------- */
.palmdoc-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ----------------------------------------------------------------------
   .print-only block — hidden on screen, revealed only by @media print.
   Defined here AND in so-folder.css for backwards compat. Idempotent.
   ---------------------------------------------------------------------- */
.print-only { display: none; }

/* ----------------------------------------------------------------------
   PRINT MEDIA — universal letterhead + body + footer
   ---------------------------------------------------------------------- */
@media print {
  /* Hide all on-screen chrome */
  .sidebar,
  .topbar,
  .quicknav,
  #truwe-launcher,
  .truwe-launcher,
  #tru-we,
  #so-print-btn,
  .palmdoc-print-btn,
  .page-header__actions,
  .bulk-bar,
  .so-folder__actions,
  .btn,
  button {
    display: none !important;
  }

  /* Reveal print-only blocks (root + legacy SO letterhead) */
  .print-only,
  #palmdoc-print-root,
  #palmdoc-print-letterhead,
  #palmdoc-print-body,
  #palmdoc-print-footer {
    display: block !important;
  }

  /* Force light-mode rendering everywhere */
  body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  }
  .view, main {
    padding: 0 !important;
    margin: 0 !important;
  }
  * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* When in print mode AND PalmDoc has injected mounts, hide the live
     view body to avoid double-printing the on-screen content. Each
     per-kind bodyTemplate is expected to render the printable body
     fully — SALES_ORDER passes the on-screen HTML through deliberately. */
  body.palmdoc-printing > *:not(#palmdoc-print-root):not(.print-only) {
    display: none !important;
  }
  body.palmdoc-printing #palmdoc-print-root { display: block !important; }

  /* SALES_ORDER legacy path: when bodyHtml is empty the on-screen view
     IS the body. The view ships with stock badges we want to keep. */
  body.palmdoc-printing[data-palmdoc-kind="SALES_ORDER"] .view,
  body.palmdoc-printing[data-palmdoc-kind="SALES_ORDER"] main {
    display: block !important;
  }

  /* Stock badge colours from PALMSTAT_SO_FOLDER_V1 — preserved */
  .so-stock--available   { border-color: #3FA66F !important; }
  .so-stock--partial     { border-color: #FFB347 !important; }
  .so-stock--manufacture { border-color: #E0780A !important; }
  .so-stock--order       { border-color: #FF6B6B !important; }

  /* ------------------------------------------------------------------ */
  /* LETTERHEAD                                                         */
  /* ------------------------------------------------------------------ */
  .palmdoc-letterhead {
    padding: 16px 24px 12px;
    margin-bottom: 18px;
    border-bottom: 3px solid #000;
    page-break-after: avoid;
  }
  .palmdoc-letterhead__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
  .palmdoc-letterhead__brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .palmdoc-letterhead__mark {
    display: block !important;
    width: 60px;
    height: 60px;
    object-fit: contain;
  }
  .palmdoc-letterhead__words { line-height: 1; }
  .palmdoc-letterhead__name {
    font-size: 22pt;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .palmdoc-letterhead__sub {
    font-size: 8pt;
    letter-spacing: 0.18em;
    margin-top: 4px;
    color: #444 !important;
  }
  .palmdoc-letterhead__company {
    font-size: 8pt;
    text-align: right;
    line-height: 1.4;
    max-width: 50%;
  }
  .palmdoc-letterhead__company strong { font-weight: 700; }

  .palmdoc-letterhead__rule {
    border-top: 1px solid #000;
    margin-top: 12px;
  }

  .palmdoc-letterhead__doctype {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 12px;
  }
  .palmdoc-letterhead__doctype-left { flex: 1; }
  .palmdoc-letterhead__doctype-right {
    text-align: right;
    min-width: 240px;
  }

  /* The headline doc-type chip — e.g. "TAX INVOICE", "PURCHASE ORDER" */
  .palmdoc-doctype-chip {
    display: inline-block;
    font-size: 11pt;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1.5px solid #000;
    border-radius: 4px;
    color: #000 !important;
    background: #fff !important;
  }
  .palmdoc-letterhead__doctype-ref {
    font-size: 18pt;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: 0.02em;
  }

  /* SARS TAX INVOICE pill (top-right, mandatory for tax invoices) */
  .palmdoc-vat-banner {
    display: inline-block;
    font-size: 10pt;
    font-weight: 800;
    letter-spacing: 0.24em;
    padding: 5px 12px;
    margin-bottom: 8px;
    border: 2px solid #000;
    border-radius: 4px;
    background: #000 !important;
    color: #fff !important;
    /* In all-color-forced mode we still want black + a light fill for the
       printer to render — force white text and dark bg explicitly. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Legal banner — pro-forma / credit note / etc. */
  .palmdoc-legal-banner {
    display: inline-block;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.22em;
    padding: 4px 10px;
    margin-bottom: 8px;
    border: 1.5px dashed #000;
    border-radius: 4px;
    color: #000 !important;
    background: #fff !important;
  }

  /* Meta grid (ref/date/customer/doc id rows under the chip) */
  .palmdoc-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 12px;
    font-size: 9pt;
    line-height: 1.5;
    text-align: left;
    margin-left: auto;
    width: max-content;
  }
  .palmdoc-meta__row {
    display: contents;
  }
  .palmdoc-meta__label {
    color: #555 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 7.5pt;
    align-self: end;
  }
  .palmdoc-meta__value {
    font-weight: 700;
    color: #000 !important;
  }

  /* ------------------------------------------------------------------ */
  /* BODY                                                               */
  /* ------------------------------------------------------------------ */
  .palmdoc-body {
    padding: 0 24px;
    font-size: 9.5pt;
    line-height: 1.45;
  }
  .palmdoc-body__section {
    margin-top: 14px;
  }
  .palmdoc-body__section-title {
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #555 !important;
    border-bottom: 1px solid #999;
    padding-bottom: 3px;
    margin-bottom: 8px;
  }

  /* Universal line-items table — used by quotes, invoices, POs, GRNs */
  .palmdoc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 9pt;
  }
  .palmdoc-table thead th {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-bottom: 1.5px solid #000;
    border-top: 1.5px solid #000;
    padding: 6px 8px;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 8pt;
  }
  .palmdoc-table tbody td {
    border-bottom: 1px dotted #aaa;
    padding: 5px 8px;
    vertical-align: top;
  }
  .palmdoc-table tbody tr:nth-child(even) td {
    background: #fafafa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .palmdoc-table .num,
  .palmdoc-table th.num,
  .palmdoc-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .palmdoc-table .center { text-align: center; }

  /* Totals block — subtotal / VAT / total */
  .palmdoc-totals {
    margin-top: 12px;
    margin-left: auto;
    width: 50%;
    font-size: 9.5pt;
  }
  .palmdoc-totals__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted #ccc;
  }
  .palmdoc-totals__row--vat {
    color: #555 !important;
  }
  .palmdoc-totals__row--grand {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    margin-top: 6px;
    padding: 6px 0;
    font-weight: 800;
    font-size: 11pt;
  }
  .palmdoc-totals__label { letter-spacing: 0.04em; }
  .palmdoc-totals__value { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Generic info card — supplier address, banking details, etc. */
  .palmdoc-card {
    border: 1px solid #999;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 8.5pt;
    line-height: 1.5;
  }
  .palmdoc-card__title {
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #555 !important;
    margin-bottom: 4px;
    font-weight: 700;
  }
  .palmdoc-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  /* Status banner — used by GRN variance / 3-way-match etc. */
  .palmdoc-status-banner {
    margin-top: 12px;
    padding: 6px 10px;
    border: 1.5px solid #000;
    border-radius: 4px;
    font-size: 9pt;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .palmdoc-status-banner--ok      { border-color: #3FA66F !important; }
  .palmdoc-status-banner--warn    { border-color: #E0780A !important; }
  .palmdoc-status-banner--fail    { border-color: #FF6B6B !important; }

  /* Free-form notes / T&Cs block — small print under the body */
  .palmdoc-terms {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #999;
    font-size: 7.5pt;
    line-height: 1.5;
    color: #333 !important;
    column-count: 1;
  }
  .palmdoc-terms p { margin: 0 0 4px; }

  /* Error / fallback bodies */
  .palmdoc-body--fallback,
  .palmdoc-body--error {
    border: 1px dashed #999;
    padding: 12px;
    margin: 12px 24px;
  }

  /* ------------------------------------------------------------------ */
  /* FOOTER                                                             */
  /* ------------------------------------------------------------------ */
  .palmdoc-footer {
    margin: 28px 24px 0;
    page-break-inside: avoid;
  }
  .palmdoc-footer__signatures {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
  }
  .palmdoc-footer__sig {
    flex: 1;
    text-align: center;
  }
  .palmdoc-footer__sig-line {
    border-top: 1px solid #000;
    height: 24px;
  }
  .palmdoc-footer__sig-label {
    font-size: 7.5pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #555 !important;
    margin-top: 2px;
  }
  .palmdoc-footer__rule {
    border-top: 1px solid #000;
    margin-top: 8px;
  }
  .palmdoc-footer__tag {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
    font-size: 7.5pt;
    color: #444 !important;
  }
  .palmdoc-footer--custom {
    font-size: 8pt;
    line-height: 1.4;
  }

  /* ------------------------------------------------------------------ */
  /* PAGE                                                               */
  /* ------------------------------------------------------------------ */
  @page {
    size: A4;
    margin: 14mm 14mm 14mm 14mm;
  }
  .card, section.card { page-break-inside: avoid; }
  .palmdoc-table { page-break-inside: auto; }
  .palmdoc-table thead { display: table-header-group; }
  .palmdoc-table tfoot { display: table-footer-group; }
  .palmdoc-table tr { page-break-inside: avoid; page-break-after: auto; }

  /* Repeat the doc-type chip + ref on subsequent pages by using
     position:running -- but Chrome's print engine doesn't yet support
     @page named regions reliably. We rely on the letterhead block at
     the top of the document and per-page footer only. */
}
/* End PALMSTAT_DOC_BUILDER_V1 */

/* end PALMSTAT_DOC_BUILDER_V1 */

/* =====================================================================
   PALMSTAT_POLISH_V1
   ---------------------------------------------------------------------
   Polish layer for the 11 new O2C + P2P module views. Layers ON TOP of
   the existing components.css blocks (SO_FOLDER_V1, BULK_BAR_FIX_V1,
   DOC_BUILDER_V1). Reuses existing PalmStat brand tokens — does NOT
   redefine --brand-* or --bg-* or --fg-*. Adds only semantic --status-*
   tokens for badges + timeline pills.

   Sibling enhancers (/js/polish/<module>.js) consume these classes via
   the window.PalmPolish JS surface.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SEMANTIC STATUS TOKENS
   ---------------------------------------------------------------------
   Each status has a "fg" (bold pill text) and a "bg" (soft tint). They
   are derived from the existing PalmStat semantic + brand tokens, so
   light & dark themes both work without a second declaration.
   ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
  --status-draft-fg:        var(--gray-700);
  --status-draft-bg:        color-mix(in oklab, var(--gray-500) 14%, transparent);
  --status-submitted-fg:    #0A6BC2;
  --status-submitted-bg:    color-mix(in oklab, #5AC8FA 22%, transparent);
  --status-approved-fg:     var(--brand-700);
  --status-approved-bg:     color-mix(in oklab, var(--brand-500) 18%, transparent);
  --status-paid-fg:         var(--brand-700);
  --status-paid-bg:         color-mix(in oklab, var(--brand-500) 22%, transparent);
  --status-in_progress-fg:  #B26A00;
  --status-in_progress-bg:  color-mix(in oklab, #FF9F0A 22%, transparent);
  --status-rejected-fg:     #B71C1C;
  --status-rejected-bg:     color-mix(in oklab, #FF3B30 18%, transparent);
  --status-cancelled-fg:    var(--gray-600);
  --status-cancelled-bg:    color-mix(in oklab, var(--gray-500) 12%, transparent);
  --status-info-fg:         #0A6BC2;
  --status-info-bg:         color-mix(in oklab, #5AC8FA 18%, transparent);
  --status-success-fg:      var(--brand-700);
  --status-success-bg:      color-mix(in oklab, var(--brand-500) 18%, transparent);
  --status-warn-fg:         #B26A00;
  --status-warn-bg:         color-mix(in oklab, #FF9F0A 20%, transparent);
  --status-danger-fg:       #B71C1C;
  --status-danger-bg:       color-mix(in oklab, #FF3B30 18%, transparent);
}

[data-theme="dark"] {
  --status-draft-fg:        var(--gray-300);
  --status-draft-bg:        color-mix(in oklab, var(--gray-500) 22%, transparent);
  --status-submitted-fg:    #7FD7FF;
  --status-submitted-bg:    color-mix(in oklab, #5AC8FA 16%, transparent);
  --status-approved-fg:     var(--brand-300);
  --status-approved-bg:     color-mix(in oklab, var(--brand-500) 22%, transparent);
  --status-paid-fg:         var(--brand-300);
  --status-paid-bg:         color-mix(in oklab, var(--brand-500) 26%, transparent);
  --status-in_progress-fg:  #FFC274;
  --status-in_progress-bg:  color-mix(in oklab, #FF9F0A 18%, transparent);
  --status-rejected-fg:     #FF8079;
  --status-rejected-bg:     color-mix(in oklab, #FF3B30 18%, transparent);
  --status-cancelled-fg:    var(--gray-400);
  --status-cancelled-bg:    color-mix(in oklab, var(--gray-500) 18%, transparent);
  --status-info-fg:         #7FD7FF;
  --status-info-bg:         color-mix(in oklab, #5AC8FA 14%, transparent);
  --status-success-fg:      var(--brand-300);
  --status-success-bg:      color-mix(in oklab, var(--brand-500) 22%, transparent);
  --status-warn-fg:         #FFC274;
  --status-warn-bg:         color-mix(in oklab, #FF9F0A 16%, transparent);
  --status-danger-fg:       #FF8079;
  --status-danger-bg:       color-mix(in oklab, #FF3B30 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --status-draft-fg:        var(--gray-300);
    --status-draft-bg:        color-mix(in oklab, var(--gray-500) 22%, transparent);
    --status-submitted-fg:    #7FD7FF;
    --status-submitted-bg:    color-mix(in oklab, #5AC8FA 16%, transparent);
    --status-approved-fg:     var(--brand-300);
    --status-approved-bg:     color-mix(in oklab, var(--brand-500) 22%, transparent);
    --status-paid-fg:         var(--brand-300);
    --status-paid-bg:         color-mix(in oklab, var(--brand-500) 26%, transparent);
    --status-in_progress-fg:  #FFC274;
    --status-in_progress-bg:  color-mix(in oklab, #FF9F0A 18%, transparent);
    --status-rejected-fg:     #FF8079;
    --status-rejected-bg:     color-mix(in oklab, #FF3B30 18%, transparent);
    --status-cancelled-fg:    var(--gray-400);
    --status-cancelled-bg:    color-mix(in oklab, var(--gray-500) 18%, transparent);
    --status-info-fg:         #7FD7FF;
    --status-info-bg:         color-mix(in oklab, #5AC8FA 14%, transparent);
    --status-success-fg:      var(--brand-300);
    --status-success-bg:      color-mix(in oklab, var(--brand-500) 22%, transparent);
    --status-warn-fg:         #FFC274;
    --status-warn-bg:         color-mix(in oklab, #FF9F0A 16%, transparent);
    --status-danger-fg:       #FF8079;
    --status-danger-bg:       color-mix(in oklab, #FF3B30 18%, transparent);
  }
}

/* ---------------------------------------------------------------------
   2. SKELETON LOADER
   ------------------------------------------------------------------ */
.pp-skeleton {
  display: block;
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
}
.pp-skeleton__row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.pp-skeleton__row:last-child { border-bottom: 0; }
.pp-skeleton__cell {
  flex: 1;
  height: 14px;
  border-radius: 6px;
  background-image: linear-gradient(
    90deg,
    var(--bg-hover) 0%,
    var(--bg-active) 40%,
    var(--bg-hover) 80%
  );
  background-size: 200% 100%;
  background-position: 0% 0;
  animation: pp-shimmer 1.4s ease-in-out infinite;
}
.pp-skeleton__cell--narrow { flex: 0 0 80px; }
.pp-skeleton__cell--wide   { flex: 2; }
@keyframes pp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   3. STATUS BADGE PILL
   ------------------------------------------------------------------ */
.pp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
  transition: transform var(--t-fast) var(--ease-out);
}
.pp-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.pp-status-badge:hover { transform: translateY(-1px); }

.pp-status-badge--draft        { color: var(--status-draft-fg);        background: var(--status-draft-bg); }
.pp-status-badge--submitted    { color: var(--status-submitted-fg);    background: var(--status-submitted-bg); }
.pp-status-badge--approved     { color: var(--status-approved-fg);     background: var(--status-approved-bg); }
.pp-status-badge--paid         { color: var(--status-paid-fg);         background: var(--status-paid-bg); }
.pp-status-badge--in_progress  { color: var(--status-in_progress-fg);  background: var(--status-in_progress-bg); }
.pp-status-badge--rejected     { color: var(--status-rejected-fg);     background: var(--status-rejected-bg); }
.pp-status-badge--cancelled    { color: var(--status-cancelled-fg);    background: var(--status-cancelled-bg); }
.pp-status-badge--info         { color: var(--status-info-fg);         background: var(--status-info-bg); }
.pp-status-badge--success      { color: var(--status-success-fg);      background: var(--status-success-bg); }
.pp-status-badge--warn         { color: var(--status-warn-fg);         background: var(--status-warn-bg); }
.pp-status-badge--danger       { color: var(--status-danger-fg);       background: var(--status-danger-bg); }

/* ---------------------------------------------------------------------
   4. STATUS TIMELINE (horizontal pill bar)
   ------------------------------------------------------------------ */
.pp-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  margin: 14px 0 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
}
.pp-timeline__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-tertiary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.pp-timeline__step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.pp-timeline__step--past {
  color: var(--brand-600);
  background: color-mix(in oklab, var(--brand-500) 14%, transparent);
  border-color: color-mix(in oklab, var(--brand-500) 26%, transparent);
}
.pp-timeline__step--past .pp-timeline__step__dot {
  background: var(--brand-500);
  opacity: 1;
}
.pp-timeline__step--past::after {
  content: "✓";
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-600);
  margin-left: 2px;
}
.pp-timeline__step--current {
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
  animation: pp-pulse 2.2s var(--ease) infinite;
}
.pp-timeline__step--current .pp-timeline__step__dot {
  background: var(--brand-500);
  opacity: 1;
}
.pp-timeline__sep {
  flex: 0 0 14px;
  height: 1px;
  background: var(--border);
  opacity: 0.6;
}
@keyframes pp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 166, 111, 0.0), var(--shadow-glow); }
  50%      { box-shadow: 0 0 0 6px rgba(63, 166, 111, 0.0), 0 0 0 4px rgba(63, 166, 111, 0.30); }
}

/* ---------------------------------------------------------------------
   5. RELATED-RECORD CARD (side panel)
   ------------------------------------------------------------------ */
.pp-related-card {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease-out);
}
.pp-related-card:hover { box-shadow: var(--shadow-sm); }
.pp-related-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.pp-related-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg-primary);
  letter-spacing: 0.01em;
}
.pp-related-card__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fg-secondary);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-hover);
}
.pp-related-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pp-related-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--bg-base);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.pp-related-card__item:hover {
  background: color-mix(in oklab, var(--brand-500) 8%, var(--bg-base));
  transform: translateX(2px);
}
.pp-related-card__item__ref {
  font-weight: 600;
  color: var(--fg-primary);
  font-size: 0.84rem;
}
.pp-related-card__item__meta {
  font-size: 0.72rem;
  color: var(--fg-tertiary);
}
.pp-related-card__empty {
  padding: 14px;
  text-align: center;
  color: var(--fg-tertiary);
  font-size: 0.82rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------------------
   6. ANIMATED KPI TILE (gradient border + hover lift)
   ------------------------------------------------------------------ */
.pp-kpi--animated {
  position: relative;
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.pp-kpi--animated::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--brand-500) 0%,
    color-mix(in oklab, var(--brand-500) 35%, transparent) 50%,
    color-mix(in oklab, var(--brand-300) 25%, transparent) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  z-index: -1;
  transition: opacity var(--t-base) var(--ease-out);
}
.pp-kpi--animated:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pp-kpi--animated:hover::before { opacity: 1; }
.pp-kpi__value--countup {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.pp-kpi__value--countup.is-popping {
  animation: pp-pop-in var(--t-base) var(--ease-out);
}
@keyframes pp-pop-in {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------
   7. TABLE ROW HOVER + ZEBRA
   ------------------------------------------------------------------ */
.pp-row-hover tbody tr {
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.pp-row-hover tbody tr:hover {
  background: color-mix(in oklab, var(--brand-500) 5%, var(--bg-elevated));
  box-shadow: inset 3px 0 0 0 var(--brand-500);
  cursor: pointer;
}
.pp-row-hover tbody tr.is-keyboard-focus {
  background: color-mix(in oklab, var(--brand-500) 10%, var(--bg-elevated));
  box-shadow: inset 3px 0 0 0 var(--brand-500), var(--shadow-glow);
}

/* ---------------------------------------------------------------------
   8. SEARCH BAR (clean rounded input)
   ------------------------------------------------------------------ */
.pp-search-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: min(340px, 100%);
}
.pp-search-bar::before {
  content: "⌕";
  position: absolute;
  left: 12px;
  font-size: 0.95rem;
  color: var(--fg-tertiary);
  pointer-events: none;
}
.pp-search-bar__input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--fg-primary);
  font-size: 0.86rem;
  font-family: var(--font-sans);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.pp-search-bar__input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
}
.pp-search-bar__hint {
  position: absolute;
  right: 12px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--fg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-base);
  pointer-events: none;
  letter-spacing: 0.04em;
}
.pp-search-bar__input:focus ~ .pp-search-bar__hint { opacity: 0; }

/* ---------------------------------------------------------------------
   9. SORTABLE TABLE COLUMN HEADERS
   ------------------------------------------------------------------ */
.pp-sortable-th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px !important;
  transition: color var(--t-fast) var(--ease-out);
}
.pp-sortable-th:hover { color: var(--brand-600); }
.pp-sort-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  opacity: 0.4;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.pp-sort-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 49%, currentColor 49% 51%, transparent 51%) top right / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 49%, currentColor 49% 51%, transparent 51%) top left / 5px 5px no-repeat;
}
.pp-sortable-th--asc  .pp-sort-arrow { opacity: 1; transform: translateY(-50%) rotate(0deg); }
.pp-sortable-th--desc .pp-sort-arrow { opacity: 1; transform: translateY(-50%) rotate(180deg); }

/* ---------------------------------------------------------------------
   10. EMPTY STATE (friendly)
   ------------------------------------------------------------------ */
.pp-empty {
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--bg-elevated) 70%, transparent);
}
.pp-empty__icon {
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.55;
}
.pp-empty__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-secondary);
  margin-bottom: 4px;
}
.pp-empty__msg {
  font-size: 0.8rem;
  color: var(--fg-tertiary);
}

/* ---------------------------------------------------------------------
   11. TOAST FALLBACK (used only when API.toast is unavailable)
   ------------------------------------------------------------------ */
.pp-toast-host {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.pp-toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--fg-primary);
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(20px);
  opacity: 0;
  animation: pp-toast-in var(--t-base) var(--ease-out) forwards;
}
.pp-toast::before {
  content: "";
  width: 4px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--brand-500);
}
.pp-toast--success::before { background: var(--success); }
.pp-toast--warning::before { background: var(--warning); }
.pp-toast--error::before   { background: var(--danger); }
.pp-toast--info::before    { background: var(--info); }
.pp-toast.is-leaving {
  animation: pp-toast-out var(--t-base) var(--ease-in) forwards;
}
@keyframes pp-toast-in {
  to { transform: translateX(0); opacity: 1; }
}
@keyframes pp-toast-out {
  to { transform: translateX(20px); opacity: 0; }
}

/* ---------------------------------------------------------------------
   12. PRINT — strip every polish chrome from printed letterhead
   ------------------------------------------------------------------ */
@media print {
  .pp-timeline,
  .pp-related-card,
  .pp-search-bar,
  .pp-toast-host,
  .pp-skeleton { display: none !important; }
}

/* End PALMSTAT_POLISH_V1 */

/* PALMSTAT_MODAL_BACK_V1_3 · QC/QRS overlay back-pill hook (additive) */
.qc-modal__head, .qrs-modal__head { flex-wrap: wrap; }
.qc-modal__head .modal-back-btn,
.qrs-modal__head .modal-back-btn {
  order: -1;
  flex-basis: 100%;
  align-self: flex-start;
  margin-bottom: 6px;
}
/* End PALMSTAT_MODAL_BACK_V1_3 */

/* PALMSTAT_MODAL_HIT_AREA_V1 ----------------------------------------------
   Tish v1.3.0 verification observation: first manual click on "Create supplier"
   button did not always trigger validation. Root cause: WCAG 2.5.5 touch-target
   minimum (44x44 px) not met on the modal primary button, plus the modal fade-in
   animation can briefly intercept clicks. Fix: ensure modal action buttons have
   at least 40px tap target plus a 6px invisible hit-area extension via ::before
   pseudo-element, and force pointer-events:auto once the modal is mounted.
   --------------------------------------------------------------------- */
.modal__footer .btn,
.ui-modal__footer .btn {
  pointer-events: auto !important;
  position: relative;
}
.modal__footer .btn[data-act="primary"],
.ui-modal__footer .btn[data-act="primary"] {
  min-height: 40px;
  min-width: 132px;
  padding: 8px 18px;
}
/* Invisible hit-area extension (the accessibility trick) — adds 6px around
   the button perimeter for clicks while leaving the visual size unchanged. */
.modal__footer .btn[data-act="primary"]::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 0;
}
.modal__footer .btn[data-act="primary"] > * {
  position: relative;
  z-index: 1;
}
/* Force the modal to be interactive immediately on mount — no fade-in delay
   on click handlers. */
.modal,
.ui-modal {
  pointer-events: auto !important;
}
/* End PALMSTAT_MODAL_HIT_AREA_V1 ---------------------------------------- */

/* PALMSTAT_TOUCH_TARGET_V1 -------------------------------------------------
   Devs Full Site Audit (2026-06-05) flagged 9 buttons/links under the 36px
   touch-target minimum on the 375px mobile viewport. Yesterday's
   PALMSTAT_MODAL_HIT_AREA_V1 already lifted modal primary buttons to
   40-44px with a 6px invisible ::before extension. This block extends the
   same pattern to ALL small buttons across the app, but ONLY at
   <= 768px so desktop density is preserved.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 1) Base .btn (was height:34px) — lift to WCAG 2.5.5 floor on touch. */
  .btn {
    min-height: 36px;
    position: relative;
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 0;
  }
  .btn > * {
    position: relative;
    z-index: 1;
  }
  /* 2) Small / icon-only buttons — guarantee a 36x36 square tap target. */
  .btn--sm,
  .btn--xs,
  .icon-btn,
  .topbar__icon-btn {
    min-height: 36px;
    min-width: 36px;
    position: relative;
  }
  .btn--sm::before,
  .btn--xs::before,
  .icon-btn::before,
  .topbar__icon-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 0;
  }
  .btn--sm > *,
  .btn--xs > *,
  .icon-btn > *,
  .topbar__icon-btn > * {
    position: relative;
    z-index: 1;
  }
  /* 3) Tabs / pill controls — lift the smaller variants too. */
  .tabs__tab {
    min-height: 36px;
  }
  /* 4) Sidebar nav items — Devs noted "Sidebar links not detected" and the
     hit-area is tight. Pad up to a comfortable 40px touch target without
     disturbing the active-state padding-left transition. */
  .nav-item {
    min-height: 40px;
    padding: 8px 14px;
  }
}
/* End PALMSTAT_TOUCH_TARGET_V1 ------------------------------------------ */

/* PALMSTAT_MOBILE_FIX_V1 ----------------------------------------------------
   Devs Full Site Audit (05 Jun 2026 08:06) flagged horizontal overflow at 375px
   viewport plus 9 sub-36px touch targets. Root causes observed:
     - body has no overflow-x guard at small viewports
     - .page-header laid out as inline flex without flex-wrap, push-overflows
     - .quicknav pill scroller can extend past viewport width
     - .modal / .ui-modal default to fixed widths exceeding 100vw - safe gutters
     - assorted internal cards declare explicit widths >= 600px
   Additive, scoped, mobile-only — no impact on >= 481px viewports.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  .page-header,
  .page__header,
  .page-head {
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-start;
  }
  .page-header > *,
  .page__header > *,
  .page-head > * {
    max-width: 100%;
    min-width: 0;
  }
  .quicknav,
  .quick-nav,
  .quicknav__scroller {
    overflow-x: auto !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .modal,
  .ui-modal,
  .modal__dialog,
  .ui-modal__dialog {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }
  /* Any element that declares >= 600px fixed width gets clamped on mobile */
  [style*=width: 600px],
  [style*=width: 640px],
  [style*=width: 680px],
  [style*=width: 720px],
  [style*=width: 760px],
  [style*=width: 800px],
  [style*=width:600px],
  [style*=width:640px],
  [style*=width:680px],
  [style*=width:720px],
  [style*=width:760px],
  [style*=width:800px],
  .card--wide,
  .panel--wide,
  .form--wide,
  .kpi-grid,
  .kpi__grid,
  .grid--cards {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* KPI tile grid forced to single column to kill row overflow */
  .kpi-grid,
  .kpi__grid {
    grid-template-columns: 1fr !important;
  }
  /* Tables should scroll horizontally inside a wrapper, never push body wider */
  .table-wrap,
  .ui-table-wrap,
  .data-table-wrap {
    overflow-x: auto !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Touch target compliance fallback — bring small interactive elements up
     to the WCAG 2.5.5 36px floor without redesigning each component. */
  .btn,
  .ui-btn,
  a.btn,
  button.btn,
  .nav-item,
  .topbar__icon-btn,
  .pill,
  .chip {
    min-height: 36px;
    min-width: 36px;
  }
}
/* End PALMSTAT_MOBILE_FIX_V1 ---------------------------------------------- */

/* =====================================================================
   PALMSTAT_DEMAND_POLISH_V1
   ---------------------------------------------------------------------
   Polish layer for the Demand Planning rebuild (GET /api/demand-planning
   /enriched). Layers ON TOP of components.css (PALMSTAT_POLISH_V1 +
   PALMSTAT_DOC_BUILDER_V1). Reuses existing PalmStat brand tokens
   (--brand-*, --bg-*, --fg-*, --border-*, --shadow-*, --r-*) — does NOT
   redefine them. Adds only four semantic --status-* tokens scoped to
   the demand-planning view + a small set of .dp-* component classes.

   Consumed by frontend/js/views/demand-planning.js. Mirrors the
   .kpi / .lf-kpi / .pb-live-rm / .ts-finalize idioms already in the
   sheet so light + dark themes both inherit for free.

   Append this whole block to frontend/css/components.css.
   Cache-bust: v=20260605f
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SEMANTIC STATUS TOKENS  (4 colours, derived from existing brand
   + semantic tokens — no new hex values invented)
   ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
  /* DISPATCH → green (FG covers demand, ship now) */
  --status-dispatch:        var(--success);
  --status-dispatch-fg:     #1F8F40;
  --status-dispatch-bg:     rgba(52, 199, 89, 0.14);
  --status-dispatch-border: rgba(52, 199, 89, 0.36);

  /* START_PRODUCTION → blue (RM ready, kick off batch) */
  --status-start-prod:        var(--info);
  --status-start-prod-fg:     #0A6BC2;
  --status-start-prod-bg:     rgba(90, 200, 250, 0.18);
  --status-start-prod-border: rgba(90, 200, 250, 0.42);

  /* RAISE_PR → amber (RM short, raise purchase requisition) */
  --status-raise-pr:        var(--warning);
  --status-raise-pr-fg:     #B7660A;
  --status-raise-pr-bg:     rgba(255, 159, 10, 0.16);
  --status-raise-pr-border: rgba(255, 159, 10, 0.42);

  /* MUST_ORDER → red (no BOM, must source FG externally) */
  --status-must-order:        var(--danger);
  --status-must-order-fg:     #C72A20;
  --status-must-order-bg:     rgba(255, 59, 48, 0.14);
  --status-must-order-border: rgba(255, 59, 48, 0.40);
}
[data-theme="dark"] {
  --status-dispatch-fg:     #7FD0A0;
  --status-dispatch-bg:     rgba(127, 208, 160, 0.18);
  --status-dispatch-border: rgba(127, 208, 160, 0.32);

  --status-start-prod-fg:     #7FD0F0;
  --status-start-prod-bg:     rgba(90, 200, 250, 0.20);
  --status-start-prod-border: rgba(90, 200, 250, 0.40);

  --status-raise-pr-fg:     #FFD580;
  --status-raise-pr-bg:     rgba(255, 184, 0, 0.20);
  --status-raise-pr-border: rgba(255, 184, 0, 0.42);

  --status-must-order-fg:     #FFB4A8;
  --status-must-order-bg:     rgba(232, 90, 79, 0.20);
  --status-must-order-border: rgba(232, 90, 79, 0.42);
}

/* ---------------------------------------------------------------------
   2. KPI STRIP  ·  4-column grid, gradient borders, hover lift
   Mirrors .lf-kpi-row + .kpi conventions from the Batches view.
   Each tile sets a --kpi-accent var so the gradient border picks up
   the right semantic colour (demand value = brand, coverage = green,
   readiness = blue, shortages = red).
   ------------------------------------------------------------------ */
.dp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.dp-kpi {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 16px 18px 14px;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  animation: dpKpiPop .55s var(--ease-out) both;
  animation-delay: calc(var(--idx, 0) * 70ms);
}
.dp-kpi::before {
  /* Gradient accent strip on the left edge — picks up --kpi-accent */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--kpi-accent, var(--brand-500)), var(--kpi-accent-2, var(--brand-700)));
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.dp-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(63, 166, 111, 0.22);
}
.dp-kpi--demand    { --kpi-accent: var(--brand-500);       --kpi-accent-2: var(--brand-700); }
.dp-kpi--coverage  { --kpi-accent: var(--status-dispatch); --kpi-accent-2: #1F8F40; }
.dp-kpi--readiness { --kpi-accent: var(--status-start-prod); --kpi-accent-2: #0A6BC2; }
.dp-kpi--shortage  { --kpi-accent: var(--status-must-order); --kpi-accent-2: #C72A20; }

.dp-kpi__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.dp-kpi__value {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--fg-primary);
  margin: 6px 0 4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dp-kpi__value--money { color: var(--brand-fg); }
.dp-kpi__unit  { font-size: .9rem; font-weight: 500; color: var(--fg-secondary); margin-left: 4px; }
.dp-kpi__sub   { font-size: .8125rem; color: var(--fg-secondary); }
.dp-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-top: 8px;
}
.dp-kpi__delta.up   { background: rgba(52,199,89,.14); color: var(--success); }
.dp-kpi__delta.down { background: rgba(255,59,48,.14); color: var(--danger); }
.dp-kpi__delta.flat { background: var(--bg-active); color: var(--fg-secondary); }

@keyframes dpKpiPop {
  0%   { opacity: 0; transform: translateY(8px) scale(.985); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ---------------------------------------------------------------------
   3. STACKED BAR  ·  horizontal coverage breakdown
   Slice widths driven by inline --w on each .dp-stacked-bar__slice.
   Order in the markup: fg → ready → short → noBom (left to right).
   ------------------------------------------------------------------ */
.dp-stacked-bar {
  position: relative;
  width: 100%;
  height: 14px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
  overflow: hidden;
  display: flex;
  isolation: isolate;
}
.dp-stacked-bar__slice {
  height: 100%;
  width: var(--w, 0%);
  flex: 0 0 auto;
  transition: width var(--t-slow) var(--ease-out);
  animation: dpBarFill 1.2s var(--ease-out) both;
}
.dp-stacked-bar__slice--fg       { background: linear-gradient(90deg, var(--status-dispatch),   #1F8F40); }
.dp-stacked-bar__slice--ready    { background: linear-gradient(90deg, var(--status-start-prod), #0A6BC2); }
.dp-stacked-bar__slice--short    { background: linear-gradient(90deg, var(--status-raise-pr),   #B7660A); }
.dp-stacked-bar__slice--no-bom   { background: linear-gradient(90deg, var(--status-must-order), #C72A20); }

.dp-stacked-bar__legend {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  margin-top: 8px;
  font-size: .72rem;
  color: var(--fg-secondary);
}
.dp-stacked-bar__legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.dp-stacked-bar__legend-swatch {
  width: 10px; height: 10px; border-radius: 3px;
}
.dp-stacked-bar__legend-swatch--fg     { background: var(--status-dispatch); }
.dp-stacked-bar__legend-swatch--ready  { background: var(--status-start-prod); }
.dp-stacked-bar__legend-swatch--short  { background: var(--status-raise-pr); }
.dp-stacked-bar__legend-swatch--no-bom { background: var(--status-must-order); }

@keyframes dpBarFill { from { width: 0; } to { width: var(--w, 0%); } }

/* ---------------------------------------------------------------------
   4. STATUS FILTER PILLS  ·  active / inactive states
   ------------------------------------------------------------------ */
.dp-status-pill-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px 0 16px;
}
.dp-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 14px;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--fg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease),
              color      var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform  var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.dp-status-pill:hover {
  background: var(--bg-hover);
  color: var(--fg-primary);
  transform: translateY(-1px);
}
.dp-status-pill__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  font-size: .7rem; font-weight: 700;
  background: var(--bg-active);
  color: var(--fg-secondary);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.dp-status-pill.is-active {
  background: var(--brand-bg-soft);
  color: var(--brand-fg);
  border-color: rgba(63, 166, 111, 0.42);
  box-shadow: var(--shadow-glow);
}
.dp-status-pill.is-active .dp-status-pill__count {
  background: var(--brand-500);
  color: var(--fg-on-brand);
}
/* Per-status variants (when pill represents a single status filter) */
.dp-status-pill--dispatch.is-active   { background: var(--status-dispatch-bg);   color: var(--status-dispatch-fg);   border-color: var(--status-dispatch-border); box-shadow: 0 0 0 4px rgba(52,199,89,.14); }
.dp-status-pill--start-prod.is-active { background: var(--status-start-prod-bg); color: var(--status-start-prod-fg); border-color: var(--status-start-prod-border); box-shadow: 0 0 0 4px rgba(90,200,250,.18); }
.dp-status-pill--raise-pr.is-active   { background: var(--status-raise-pr-bg);   color: var(--status-raise-pr-fg);   border-color: var(--status-raise-pr-border); box-shadow: 0 0 0 4px rgba(255,159,10,.16); }
.dp-status-pill--must-order.is-active { background: var(--status-must-order-bg); color: var(--status-must-order-fg); border-color: var(--status-must-order-border); box-shadow: 0 0 0 4px rgba(255,59,48,.14); }

/* ---------------------------------------------------------------------
   5. PRODUCT CARD  ·  collapsed + expanded with smooth height transition
   Uses the grid-template-rows 0fr → 1fr trick for content-aware
   height without measuring JS-side. The .dp-product-card__body wraps
   the expandable region in a min-height: 0 child.
   ------------------------------------------------------------------ */
.dp-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              box-shadow   var(--t-base) var(--ease),
              transform    var(--t-base) var(--ease);
  animation: dpCardSlide .45s var(--ease-out) both;
  animation-delay: calc(var(--idx, 0) * 35ms);
}
.dp-product-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.dp-product-card.is-expanded {
  box-shadow: var(--shadow-md);
  border-color: rgba(63, 166, 111, 0.32);
}
.dp-product-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease);
}
.dp-product-card__header:hover { background: var(--bg-hover); }
.dp-product-card__title {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.dp-product-card__code {
  font-size: .72rem; font-weight: 700;
  color: var(--fg-tertiary);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dp-product-card__name {
  font-size: .95rem; font-weight: 600;
  color: var(--fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-product-card__demand {
  display: flex; flex-direction: column; gap: 2px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dp-product-card__demand-qty {
  font-size: 1rem; font-weight: 700;
  color: var(--fg-primary);
}
.dp-product-card__demand-value {
  font-size: .75rem; color: var(--brand-fg);
}
.dp-product-card__chevron {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--fg-tertiary);
  transition: transform var(--t-base) var(--ease);
}
.dp-product-card.is-expanded .dp-product-card__chevron { transform: rotate(180deg); color: var(--brand-fg); }

.dp-product-card__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow) var(--ease-out);
}
.dp-product-card.is-expanded .dp-product-card__body { grid-template-rows: 1fr; }
.dp-product-card__body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  border-top: 1px solid var(--border-subtle);
}
.dp-product-card.is-expanded .dp-product-card__body-inner { padding: 14px 16px 16px; }

/* Top coverage bar inside header right cell — mini visual cue */
.dp-product-card__bar { grid-column: 1 / -1; margin-top: 4px; }

/* ---------------------------------------------------------------------
   6. STATUS BADGE  ·  card-header pill (uses semantic tokens above)
   Reuses the .badge body shape from components.css line ~67 but
   re-skins via the --status-* tokens.
   ------------------------------------------------------------------ */
.dp-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dp-status-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 25%, transparent);
}
.dp-status-badge--dispatch   { background: var(--status-dispatch-bg);   color: var(--status-dispatch-fg);   border-color: var(--status-dispatch-border); }
.dp-status-badge--start-prod { background: var(--status-start-prod-bg); color: var(--status-start-prod-fg); border-color: var(--status-start-prod-border); }
.dp-status-badge--raise-pr   { background: var(--status-raise-pr-bg);   color: var(--status-raise-pr-fg);   border-color: var(--status-raise-pr-border); }
.dp-status-badge--must-order { background: var(--status-must-order-bg); color: var(--status-must-order-fg); border-color: var(--status-must-order-border); }

/* ---------------------------------------------------------------------
   7. BOM GAP TABLE  ·  compact rows, mini-bar per RM, RM status pill
   ------------------------------------------------------------------ */
.dp-bom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8125rem;
  margin-top: 6px;
}
.dp-bom-table thead th {
  position: sticky; top: 0;
  background: var(--bg-elevated);
  color: var(--fg-tertiary);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.dp-bom-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-primary);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.dp-bom-table tbody tr:last-child td { border-bottom: none; }
.dp-bom-table tbody tr { transition: background var(--t-fast) var(--ease); }
.dp-bom-table tbody tr:hover { background: var(--bg-hover); }
.dp-bom-table__rm-code { font-weight: 600; color: var(--fg-primary); }
.dp-bom-table__rm-desc { color: var(--fg-secondary); font-size: .76rem; }
.dp-bom-table__numeric { text-align: right; }
.dp-bom-table__numeric--gap-pos { color: var(--danger); font-weight: 700; }
.dp-bom-table__numeric--gap-zero { color: var(--success); font-weight: 700; }

/* RM status badge variants — reuse semantic tokens */
.dp-rm-status {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.dp-rm-status--available   { background: var(--status-dispatch-bg); color: var(--status-dispatch-fg); border-color: var(--status-dispatch-border); }
.dp-rm-status--partial     { background: var(--status-raise-pr-bg); color: var(--status-raise-pr-fg); border-color: var(--status-raise-pr-border); }
.dp-rm-status--must-procure{ background: var(--status-must-order-bg); color: var(--status-must-order-fg); border-color: var(--status-must-order-border); }

/* ---------------------------------------------------------------------
   8. RM MINI-BAR  ·  on-hand vs required per BOM line
   Width driven inline via --on-hand-pct (0–100). Capped at 100 % even
   if coverage exceeds requirement.
   ------------------------------------------------------------------ */
.dp-rm-bar {
  position: relative;
  height: 6px;
  background: var(--bg-active);
  border-radius: var(--r-pill);
  overflow: hidden;
  min-width: 80px;
}
.dp-rm-bar__fill {
  height: 100%;
  width: var(--on-hand-pct, 0%);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  border-radius: var(--r-pill);
  animation: dpBarFill 1s var(--ease-out) both;
}
.dp-rm-bar__fill--short { background: linear-gradient(90deg, var(--status-raise-pr), #B7660A); }
.dp-rm-bar__fill--ok    { background: linear-gradient(90deg, var(--status-dispatch),  #1F8F40); }
.dp-rm-bar__caption {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 4px;
  font-size: .68rem;
  color: var(--fg-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   9. ACTION ROW  ·  buttons inside expanded card body
   Reuses existing .btn baseline, layers semantic accents per action.
   ------------------------------------------------------------------ */
.dp-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
  align-items: center;
  justify-content: flex-end;
}
.dp-action-row__meta {
  margin-right: auto;
  font-size: .75rem;
  color: var(--fg-tertiary);
  display: inline-flex; align-items: center; gap: 6px;
}
.dp-action {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              filter     var(--t-fast) var(--ease);
}
.dp-action:hover:not(:disabled)  { transform: translateY(-1px); filter: brightness(1.04); }
.dp-action:active:not(:disabled) { transform: translateY(0); filter: brightness(.98); }
.dp-action:disabled { opacity: .55; cursor: not-allowed; }
.dp-action__icon { font-size: 1rem; line-height: 1; }

/* Primary CTA per status — gradient that matches the badge colour */
.dp-action--dispatch {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600) 55%, var(--brand-800));
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(29, 86, 52, 0.45),
              0 0 0 1px rgba(255,255,255,.18) inset;
}
.dp-action--start-prod {
  background: linear-gradient(135deg, #7FD0F0, #0A6BC2 60%, #075089);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(10, 107, 194, 0.45),
              0 0 0 1px rgba(255,255,255,.18) inset;
}
.dp-action--raise-pr {
  background: linear-gradient(135deg, #FFC36A, #FF9F0A 60%, #B7660A);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(183, 102, 10, 0.45),
              0 0 0 1px rgba(255,255,255,.18) inset;
}
.dp-action--must-order {
  background: linear-gradient(135deg, #FF7A6E, #FF3B30 60%, #C72A20);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(199, 42, 32, 0.45),
              0 0 0 1px rgba(255,255,255,.18) inset;
}
/* Secondary (ghost) action — view BOM, view SOs, etc. */
.dp-action--ghost {
  background: var(--bg-card);
  color: var(--fg-primary);
  border-color: var(--border);
}
.dp-action--ghost:hover { background: var(--bg-hover); border-color: var(--border-strong); }

/* ---------------------------------------------------------------------
   10. READINESS GAUGE  ·  circular SVG indicator
   The view supplies the SVG ring; CSS handles colour, animation, and
   the centre-label typography. --gauge-pct (0–100) drives stroke
   width via stroke-dasharray (calculated inline in the view).
   ------------------------------------------------------------------ */
.dp-readiness-gauge {
  position: relative;
  width: 140px; height: 140px;
  display: grid; place-items: center;
  flex: none;
}
.dp-readiness-gauge svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.dp-readiness-gauge__track {
  fill: none;
  stroke: var(--bg-active);
  stroke-width: 12;
}
.dp-readiness-gauge__fill {
  fill: none;
  stroke: url(#dpGaugeGradient);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--t-slow) var(--ease-out);
  animation: dpGaugeSweep 1.6s var(--ease-out) forwards;
  filter: drop-shadow(0 0 6px rgba(63, 166, 111, 0.35));
}
.dp-readiness-gauge__center {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
}
.dp-readiness-gauge__pct {
  font-size: 1.75rem; font-weight: 800;
  color: var(--fg-primary);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dp-readiness-gauge__label {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-top: 4px;
}
/* Colour ramp: red < 33 %, amber 33–66 %, green ≥ 66 % */
.dp-readiness-gauge--low    .dp-readiness-gauge__fill { stroke: var(--status-must-order); filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.35)); }
.dp-readiness-gauge--mid    .dp-readiness-gauge__fill { stroke: var(--status-raise-pr);   filter: drop-shadow(0 0 6px rgba(255, 159, 10, 0.35)); }
.dp-readiness-gauge--high   .dp-readiness-gauge__fill { stroke: var(--status-dispatch);   filter: drop-shadow(0 0 6px rgba(52, 199, 89, 0.35)); }

@keyframes dpGaugeSweep {
  from { stroke-dashoffset: var(--dasharray, 440); }
  to   { stroke-dashoffset: var(--gauge-offset, 0); }
}

/* Gauge can live in a wrapped header card with a side caption */
.dp-readiness-wrap {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.dp-readiness-wrap__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-readiness-wrap__title { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-tertiary); }
.dp-readiness-wrap__sub   { font-size: .85rem; color: var(--fg-secondary); }

/* ---------------------------------------------------------------------
   11. EMPTY + ERROR STATES  ·  consistent with .empty pattern
   ------------------------------------------------------------------ */
.dp-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  color: var(--fg-secondary);
}
.dp-empty__title { font-size: 1rem; font-weight: 700; color: var(--fg-primary); margin-bottom: 6px; }
.dp-empty__hint  { font-size: .85rem; color: var(--fg-tertiary); }

/* ---------------------------------------------------------------------
   12. MOTION RESPECT  ·  honour prefers-reduced-motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .dp-kpi,
  .dp-product-card,
  .dp-stacked-bar__slice,
  .dp-rm-bar__fill,
  .dp-readiness-gauge__fill {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   13. MOBILE RESPONSIVE  ·  <=480 px
   Collapses KPI strip to 2-col then 1-col, stacks the card header
   into two visual rows, and inlines the gauge above the copy block.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .dp-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .dp-kpi-strip { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
  .dp-kpi { padding: 14px 14px 12px; }
  .dp-kpi__value { font-size: 1.5rem; }

  .dp-status-pill-row { gap: 6px; padding-bottom: 12px; }
  .dp-status-pill { height: 30px; padding: 0 11px; font-size: .78rem; }

  .dp-product-card__header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title  chevron"
      "demand chevron"
      "bar    bar";
    row-gap: 8px;
  }
  .dp-product-card__title   { grid-area: title; }
  .dp-product-card__demand  { grid-area: demand; text-align: left; flex-direction: row; gap: 10px; align-items: baseline; }
  .dp-product-card__chevron { grid-area: chevron; }
  .dp-product-card__bar     { grid-area: bar; margin-top: 2px; }

  /* Hide the badge column in the header on phones — surface inside the body */
  .dp-product-card__header .dp-status-badge { display: none; }
  .dp-product-card__body-inner > .dp-status-badge { display: inline-flex; margin-bottom: 10px; }

  .dp-bom-table { font-size: .76rem; }
  .dp-bom-table thead th,
  .dp-bom-table tbody td { padding: 7px 8px; }
  .dp-bom-table__rm-desc { display: none; }

  .dp-action-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .dp-action-row__meta { margin-right: 0; order: -1; }
  .dp-action { width: 100%; justify-content: center; height: 42px; }

  .dp-readiness-wrap { flex-direction: column; align-items: stretch; text-align: center; }
  .dp-readiness-gauge { width: 120px; height: 120px; margin: 0 auto; }
}

/* =====================================================================
   END PALMSTAT_DEMAND_POLISH_V1
   ===================================================================== */

/* PALMSTAT_QC_BACK_PILL_V2 · ensure the back pill is visible in QC/QRS/TS overlays
   even before the .modal-back-btn class styles load. The [data-test-id="modal-back-pill"]
   selector matches the v2 crawler contract. Additive only. */
[data-test-id="modal-back-pill"] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-tertiary, #eef0f4);
  color: var(--fg-primary, #111);
  border: 1px solid var(--border-color, #d8dbe0);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
[data-test-id="modal-back-pill"]:hover {
  background: var(--bg-secondary, #e1e4e9);
}
[data-theme="dark"] [data-test-id="modal-back-pill"] {
  background: var(--bg-tertiary, #2a2e36);
  color: var(--fg-primary, #f3f4f6);
  border-color: var(--border-color, #3a3f47);
}
/* End PALMSTAT_QC_BACK_PILL_V2 */


/* ---------------------------------------------------------------------
   PALMSTAT_DP_MOBILE_FIX_V1
   Mobile (<=480px) overflow + wrap fixes for Demand Planning v2.
   Addresses Devashnee 2026-06-08 audit WARN: 8 elements overflowed
   the 375px viewport. Sentinel matches the audit fix manifest.
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .dp-product-card,
  .dp-kpi-strip,
  .dp-stacked-bar,
  .dp-bom-table,
  .dp-action-row {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
  }
  .dp-product-card {
    max-width: calc(100vw - 24px);
  }
  .dp-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .dp-kpi-strip .dp-kpi-tile,
  .dp-kpi-strip > .dp-kpi,
  .dp-kpi-strip > .kpi {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    max-width: 100%;
  }
  .dp-bom-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dp-bom-table > table,
  .dp-bom-table table {
    display: block;
    overflow-x: auto;
    width: max-content;
    max-width: none;
  }
  .dp-stacked-bar {
    flex-wrap: wrap;
  }
  .dp-action-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .dp-action-row > * {
    max-width: 100%;
  }
  /* Tighten the toolbar so filter pills wrap on phones */
  .dp-toolbar {
    flex-wrap: wrap !important;
  }
}
/* End PALMSTAT_DP_MOBILE_FIX_V1 */

/* ==========================================================================
   PALMSTAT_WMS_LITE_V1 · Warehouse Cockpit styling
   ========================================================================== */
.wms-kpi-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.wms-kpi-tile {
  flex: 1 1 280px;
  min-width: 0;
  padding: 24px;
  border-radius: 12px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.03);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  display: block;
}
.wms-kpi-tile:hover,
.wms-kpi-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.05);
  border-color: var(--brand-300, #B7D1F4);
  outline: none;
}
.wms-kpi-tile__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wms-kpi-tile__icon {
  font-size: 18px;
  line-height: 1;
}
.wms-kpi-tile__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
}
.wms-kpi-tile__value {
  font-size: 36px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--text-strong, #111827);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.wms-kpi-tile__unit {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 10px;
}
.wms-kpi-tile__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-top: 1px dashed var(--border, #e5e7eb);
  padding-top: 8px;
}
.wms-kpi-tile__sku {
  color: var(--text-muted, #6b7280);
}
.wms-kpi-tile__delta {
  font-weight: 600;
}

/* Live "as of" badge */
.wms-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(43, 168, 111, 0.10);
  color: #1E5C3D;
  font-size: 12px;
  font-weight: 600;
}
.wms-live-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2BA86F;
  box-shadow: 0 0 0 0 rgba(43, 168, 111, 0.6);
  animation: wms-pulse 2s infinite;
}
@keyframes wms-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 168, 111, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(43, 168, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 168, 111, 0); }
}

/* Location stack panel */
.wms-location-stack {
  min-height: 28px;
}
.wms-location-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wms-location-row {
  display: grid;
  grid-template-columns: 80px 1fr auto 60px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  transition: background 100ms ease;
}
.wms-location-row:hover,
.wms-location-row:focus-visible {
  background: var(--surface-hover, rgba(45, 107, 208, 0.06));
  outline: none;
}
.wms-location-row__code {
  font-weight: 600;
  color: var(--text-strong, #111827);
}
.wms-location-row__name {
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wms-location-row__qty {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.wms-location-row__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #6b7280);
}

/* Movement feed */
.wms-movement-feed {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fafafa);
  padding: 4px;
}
.wms-movement-row {
  display: grid;
  grid-template-columns: 90px 24px 110px 110px 1fr 90px auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  background: #fff;
  transition: background 80ms ease;
}
.wms-movement-row:last-child { border-bottom: none; }
.wms-movement-row:hover { background: rgba(45, 107, 208, 0.04); }
.wms-movement-row--in {
  border-left: 3px solid #2BA86F;
}
.wms-movement-row--out {
  border-left: 3px solid #DC3545;
}
.wms-movement-row__ts {
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.wms-movement-row__icon {
  font-size: 16px;
  text-align: center;
}
.wms-movement-row__kind {
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-strong, #111827);
  font-size: 11px;
  text-transform: uppercase;
}
.wms-movement-row__ref {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--brand-700, #1E4FA1);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wms-movement-row__ref:hover { text-decoration: underline; }
.wms-movement-row__summary {
  color: var(--text, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wms-movement-row__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
.wms-movement-row__status .badge,
.wms-movement-row__status .pp-badge {
  font-size: 11px;
}

/* Task strip */
.wms-task-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.wms-task-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  border-radius: 10px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  text-decoration: none;
  color: inherit;
  transition: transform 100ms ease, box-shadow 100ms ease, border-color 100ms ease;
  cursor: pointer;
  text-align: center;
}
.wms-task-tile:hover,
.wms-task-tile:focus-visible {
  transform: translateY(-1px);
  border-color: var(--brand-300, #B7D1F4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  outline: none;
}
.wms-task-tile__icon {
  font-size: 22px;
  margin-bottom: 6px;
}
.wms-task-tile__count {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-strong, #111827);
  font-variant-numeric: tabular-nums;
}
.wms-task-tile__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Two-column grid for movement feed + task strip */
.wms-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

/* Responsive — phone breakpoint per brief */
@media (max-width: 1024px) {
  .wms-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .wms-movement-row {
    grid-template-columns: 70px 20px 1fr auto;
    grid-template-areas:
      "ts icon kind value"
      "ts icon summary status"
      "ts icon ref ref";
    gap: 6px;
    font-size: 12px;
  }
  .wms-movement-row__ts      { grid-area: ts; }
  .wms-movement-row__icon    { grid-area: icon; }
  .wms-movement-row__kind    { grid-area: kind; }
  .wms-movement-row__summary { grid-area: summary; }
  .wms-movement-row__ref     { grid-area: ref; }
  .wms-movement-row__value   { grid-area: value; }
  .wms-movement-row__status  { grid-area: status; }
  .wms-location-row {
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
  }
  .wms-location-row__pct { display: none; }
}
@media (max-width: 480px) {
  .wms-kpi-tile {
    flex-basis: 100%;
    padding: 18px;
  }
  .wms-kpi-tile__value { font-size: 30px; }
  .wms-movement-feed { max-height: 320px; }
  .wms-task-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .wms-task-tile { padding: 12px 8px; }
  .wms-task-tile__count { font-size: 20px; }
  .wms-live-badge { font-size: 11px; padding: 4px 10px; }
}
/* End PALMSTAT_WMS_LITE_V1 */

/* PALMSTAT_WMS_LITE_MOBILE_FIX_V1 — Devs QA 20260609b mobile + tablet overflow fix */
@media (max-width: 720px) {
  .wms-movement-feed { max-height: 360px; }
  .wms-movement-row  { grid-template-columns: 1fr; gap: 4px; }
  .wms-location-list { overflow-x: auto; }
  .wms-location-row  { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .wms-table-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .wms-kpi-strip { gap: 8px; padding: 8px; }
  .wms-kpi-tile  { flex-basis: 100% !important; padding: 16px; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
  .wms-task-strip { flex-wrap: wrap; }
  .wms-task-tile  { flex: 1 1 calc(50% - 8px); }
  .wms-movement-feed { max-height: 320px; max-width: 100vw; overflow-x: hidden; }
  .wms-movement-row  { font-size: 12px; padding: 8px 10px; }
  .wms-location-stack svg { max-width: 100% !important; }
  .page-header__title { font-size: 18px !important; max-width: 100%; overflow-wrap: anywhere; }
  .wms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------
   PALMSTAT_DP_MOBILE_FIX_V2
   Idempotent guard: targets the 8 elements still overflowing at 375px
   per Devashnee QA on V1. Uses (max-width:375px) so it layers cleanly
   over V1's 480px rules without conflicting on tablets.
   Elements: dp-kpi-strip, dp-kpi-tile, dp-stacked-bar, dp-bom-table,
   dp-product-card, dp-action-row, dp-toolbar, dp-status-pill,
   dp-readiness-gauge, dp-rm-bar.
   ------------------------------------------------------------------ */
@media (max-width: 375px) {
  /* KPI strip + tiles — force single column with hard 100% width clamp */
  .dp-kpi-strip {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .dp-kpi-strip .dp-kpi-tile,
  .dp-kpi-tile {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Stacked bar — wrap segments + clamp width */
  .dp-stacked-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* BOM table — horizontal scroll container, inner table keeps min-width */
  .dp-bom-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }
  .dp-bom-table > table,
  .dp-bom-table table {
    display: table !important;
    min-width: 600px !important;
    width: max-content !important;
    max-width: none !important;
  }

  /* Product card — must not exceed viewport minus gutter */
  .dp-product-card {
    max-width: calc(100vw - 16px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Action row — 2-up button grid with wrap */
  .dp-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }
  .dp-action-row > button,
  .dp-action-row > .btn,
  .dp-action-row > a {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Toolbar — wrap filter pills */
  .dp-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Status pill — never push past row edge */
  .dp-status-pill {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* Readiness gauge — clamp + scale internally */
  .dp-readiness-gauge {
    max-width: calc(100vw - 16px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .dp-readiness-gauge > svg,
  .dp-readiness-gauge svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* RM bar — wrap stacked segments */
  .dp-rm-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}
/* End PALMSTAT_DP_MOBILE_FIX_V2 */

/* PALMSTAT_GLOBAL_MOBILE_V1 */
*, *::before, *::after { box-sizing: border-box; }
.page-content { overflow-wrap: anywhere; word-break: break-word; }

/* Touch targets - WCAG AA minimum */
.btn, button.btn, .btn--icon, .icon-btn, button[aria-label] {
  min-height: 36px;
}
.btn--icon, .icon-btn {
  min-width: 36px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Status pill contrast hardening - WCAG AA */
.pill, .badge, .status-pill, .status-badge {
  font-weight: 600;
}
.pill--warn, .badge--warn, .status-pill.warn, .status-badge.warn,
.pill--warning, .badge--warning, .status-pill.warning {
  background: #fef3c7 !important;
  color: #78350f !important;
  border: 1px solid #d97706;
}
.pill--info, .badge--info, .status-pill.info, .status-badge.info {
  background: #dbeafe !important;
  color: #1e3a8a !important;
  border: 1px solid #1d4ed8;
}
.pill--success, .badge--success, .status-pill.success, .status-badge.success,
.pill--ok, .badge--ok, .status-pill.ok {
  background: #d1fae5 !important;
  color: #064e3b !important;
  border: 1px solid #047857;
}
.pill--danger, .badge--danger, .status-pill.danger, .status-badge.danger,
.pill--error, .badge--error, .status-pill.error {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
  border: 1px solid #b91c1c;
}
.pill--neutral, .badge--neutral, .status-pill.neutral, .status-badge.neutral {
  background: #e5e7eb !important;
  color: #111827 !important;
  border: 1px solid #4b5563;
}

/* Loading state consistency */
.loading-skeleton, .skeleton, .skel {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: palmstat-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes palmstat-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state consistency */
.empty-state, .no-data, .empty {
  text-align: center;
  padding: 32px 16px;
  color: #6b7280;
  font-size: 14px;
}
.empty-state__title, .no-data__title { font-weight: 600; color: #374151; margin-bottom: 8px; }
.empty-state__hint, .no-data__hint { font-size: 12px; color: #9ca3af; margin-top: 4px; }

/* 375px mobile rules */
@media (max-width: 375px) {
  .page-content {
    max-width: 100vw;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
  }
  .btn { min-height: 36px; min-width: 36px; }
  .btn--icon { min-width: 36px; padding: 8px; }
  table {
    display: block;
    overflow-x: auto;
    max-width: 100vw;
  }
  table thead { display: none; }
  table tbody tr {
    display: block;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 0;
  }
  table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 12px;
  }
  table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    flex-basis: 50%;
  }
  .modal, .modal__body { max-width: 100vw; overflow-x: hidden; }
  .card, .panel { max-width: 100vw; }
  h1, h2, h3 { word-break: break-word; }
}
/* End PALMSTAT_GLOBAL_MOBILE_V1 */

/* PALMSTAT_TABLET_768_SAFETY_V1 — ensure tablet 768px renders content cleanly.
   Devs v1.4 QA reported Inventory, Warehouse Cockpit, Demand Planning, and CRM
   modules failing to load at the 768px iPad viewport while every other
   viewport (375/390/430/480/1024/1280/1440) works. Root cause: an open dead
   zone between the (max-width:720px) mobile rules and the (max-width:1024px)
   wms-grid rule leaves WMS/DP/CRM grids in an ambiguous state at exactly
   768px. This block is additive + idempotent — it only forces visibility +
   safe layout in the tablet band, does not override desktop or true mobile.
   ------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 1023px) {
  /* Force visibility of main content areas */
  .page-content,
  .main,
  main,
  [class*="-page"] {
    display: block !important;
    visibility: visible !important;
    min-height: 200px;
  }
  /* Ensure tables/grids render even if a breakpoint hides them */
  .inventory-table,
  .wms-kpi-strip,
  .wms-location-list,
  .wms-movement-feed,
  .dp-kpi-strip,
  .dp-product-card,
  .dp-bom-table,
  .crm-pipeline,
  .crm-card,
  .crm-lead-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Reset any zero-height / hidden container states */
  .view-container,
  .module-container {
    min-height: 400px;
    overflow-y: auto;
  }
  /* Allow tables to stay tabular at tablet width (do not force flex on table) */
  table.inventory-table,
  table.dp-bom-table,
  table.crm-lead-row {
    display: table !important;
    width: 100%;
  }
  /* WMS grid: gracefully collapse to single column in this tablet band */
  .wms-grid {
    grid-template-columns: 1fr !important;
  }
  /* DP / CRM common scaffolding */
  .dp-toolbar,
  .dp-action-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (min-width: 760px) and (max-width: 780px) {
  /* Specific 768px iPad safety - in case any rule has an off-by-one boundary */
  body,
  .app,
  .main,
  .view-container {
    overflow-x: auto;
    min-height: 100vh;
  }
  .page-content {
    overflow-x: hidden;
    box-sizing: border-box;
  }
}
/* End PALMSTAT_TABLET_768_SAFETY_V1 */