/* Sewing Factory Monitoring SaaS — global styles
   Aesthetic: Linear/Notion-inspired white SaaS. Cool neutrals.
*/

:root {
  /* Neutrals */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f6f7;
  --surface-3: #eef0f2;
  --border: #e4e6ea;
  --border-strong: #d1d5db;
  --text: #18181b;
  --text-2: #52525b;
  --text-3: #8b8d93;
  --text-4: #b4b6bb;

  /* State accents — low chroma, SaaS feel */
  --ok: oklch(0.72 0.12 155);
  --ok-bg: oklch(0.96 0.03 155);
  --warn: oklch(0.78 0.14 78);
  --warn-bg: oklch(0.97 0.04 88);
  --bad: oklch(0.64 0.18 27);
  --bad-bg: oklch(0.96 0.03 27);
  --info: oklch(0.62 0.15 252);
  --info-bg: oklch(0.96 0.03 252);
  --muted-ind: oklch(0.75 0.02 250);

  /* Operation colors (differentiated, low sat) */
  --op-cut:  oklch(0.72 0.09 260);
  --op-ovl:  oklch(0.74 0.08 210);
  --op-stch: oklch(0.70 0.10 175);
  --op-btn:  oklch(0.76 0.08 140);
  --op-irn:  oklch(0.78 0.10 85);
  --op-qc:   oklch(0.72 0.10 50);
  --op-pack: oklch(0.70 0.08 330);

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 27, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 18, 27, 0.06), 0 1px 2px rgba(16, 18, 27, 0.04);
  --shadow-lg: 0 12px 40px rgba(16, 18, 27, 0.12), 0 2px 6px rgba(16, 18, 27, 0.06);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; }
html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
body { font-size: 13px; line-height: 1.45; }

button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── App shell ─────────────────────────────────────────────────────────── */
.app {
  height: 100vh;
  display: grid;
  grid-template-rows: 48px 1fr;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  background: var(--bg);
}
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.topbar .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  width: 204px;
}
.logo-mark {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, #18181b 0%, #3f3f46 100%);
  display: grid;
  place-items: center;
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.topbar-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12.5px;
}
.topbar-crumb .sep { color: var(--text-4); }
.topbar-crumb strong { color: var(--text); font-weight: 500; }

.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; gap: 6px; align-items: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

/* Global no-wrap for chip-like elements */
.btn, .filter-chip, .segmented button, .tier-badge, .status-badge,
.topbar-crumb, .topbar-crumb span, .chart-legend-item, .skill-bar-lbl,
.kpi-lbl, .kpi-trend, .sug-impact, .bn-sev, .bn-title,
.alert-time, .rail-sect-title, .rail-sect-count, .side-label,
.op-column-header, .line-band-label, .detail-id, .worker-meta,
.detail-title, .detail-sub, .worker-name, .profile-name, .profile-sub,
.d-stat .lbl, .hr-table th, .sug-move .from, .sug-move .to {
  white-space: nowrap;
}
.pill.live::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ok) 20%, transparent);
  animation: livepulse 2s infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 80ms, border-color 80ms;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.primary {
  background: var(--text);
  color: white;
  border-color: var(--text);
}
.btn.primary:hover { background: #3f3f46; border-color: #3f3f46; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 24px; padding: 0 8px; font-size: 12px; }

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 10px 8px;
  position: relative;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
}
.sidebar-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.sidebar-head .side-label {
  flex: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.sidebar-handle {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  box-shadow: none;
  transition: color 80ms, background 80ms, border-color 80ms;
  position: relative;
  z-index: 2;
}
.sidebar-handle:hover,
.sidebar-handle:focus-visible {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.sidebar-handle:focus-visible {
  outline: 3px solid #2f81f7;
  outline-offset: 2px;
}
.sidebar-handle::after {
  content: attr(aria-label) "  ⌘.";
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-lg);
  transition: opacity 80ms, transform 80ms;
  z-index: 100;
}
.sidebar-handle:hover::after,
.sidebar-handle:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar-handle svg {
  display: block;
}
.sb-collapsed .sidebar-head {
  justify-content: center;
}
.sb-collapsed .sidebar-handle {
  margin-left: 0;
  margin-right: 0;
}
/* In collapsed state the only thing visible inside a side-item is the icon,
   so center it instead of leaving the default left padding from the
   expanded layout. Aligns icons with the toggle button above. */
.sb-collapsed .side-item {
  justify-content: center;
  padding: 6px 0;
  gap: 0;
}
.side-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 10px 4px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.side-item:hover { background: var(--surface-2); color: var(--text); }
.side-item.active { background: var(--surface-3); color: var(--text); font-weight: 500; }
.side-item svg { flex-shrink: 0; }
.side-item .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.side-item.active .count { color: var(--text-2); }
.sb-collapsed .side-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-lg);
  transition: opacity 80ms, transform 80ms;
  z-index: 100;
}
.sb-collapsed .side-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.side-divider { height: 1px; background: var(--border); margin: 8px 4px; }

/* Main */
.main {
  grid-area: main;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
}

/* ── Filter bar ─────────────────────────────────────────────────────── */
.filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}
.filter-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.filter-chip.active { background: var(--text); color: white; border-color: var(--text); }
.filter-chip .k { color: var(--text-3); }
.filter-chip.active .k { color: rgba(255,255,255,0.6); }

.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.segmented button {
  appearance: none;
  height: 22px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.segmented button.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

/* ── KPI strip ──────────────────────────────────────────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.kpi {
  background: var(--surface);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi-lbl {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-val {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.kpi-val small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
.kpi-trend {
  font-size: 11px;
  color: var(--text-3);
  display: flex; align-items: center; gap: 4px;
}
.kpi-trend.up { color: var(--ok); }
.kpi-trend.down { color: var(--bad); }

/* ── Floor map ─────────────────────────────────────────────────────── */
.content-grid {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.content-grid > .floor-wrap { flex: 1; min-width: 0; }
.col-resizer {
  width: 5px;
  background: transparent;
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  transition: background 120ms;
}
.col-resizer:hover, .col-resizer.active { background: color-mix(in oklch, var(--info) 20%, transparent); }
.col-resizer::after {
  content: '';
  position: absolute;
  left: 2px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 28px;
  background: var(--border-strong);
  border-radius: 1px;
}
.rail-collapsed {
  width: 36px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  flex-shrink: 0;
}
.rail-collapsed button {
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--text-3); border-radius: 4px;
}
.rail-collapsed button:hover { background: var(--surface-2); color: var(--text); }

/* Detail overlay — floats over the map so map keeps its width */
.detail-overlay {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  max-height: calc(100% - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  display: flex;
  z-index: 6;
  overflow: hidden;
}
.detail-overlay .detail-resizer {
  order: 2;
  border-left: 1px solid var(--border);
  border-right: 0;
  height: auto;
}
.detail-overlay-body {
  order: 1;
  flex: 1;
  overflow-y: auto;
  position: relative;
  min-width: 0;
}
.detail-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border: 0;
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
  cursor: pointer;
}
.detail-close:hover { background: var(--bg-3, #e2e8f0); color: var(--text); }
.floor-wrap { position: relative; }

/* ── Layout Editor ──────────────────────────────────────────── */
.editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(to bottom, #fff6ec, #fdf0df);
  border-bottom: 1.5px solid #f0c97a;
  font-size: 12.5px;
  position: relative;
  z-index: 5;
}
.editor-brand {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.editor-brand > * { white-space: nowrap; }
.editor-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e07a1f;
  box-shadow: 0 0 0 3px rgba(224, 122, 31, 0.18);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.editor-tools {
  display: flex; gap: 2px;
  background: var(--surface);
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.editor-tools .tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.editor-tools .tool:hover { background: var(--surface-2); color: var(--text); }
.editor-tools .tool.on {
  background: var(--text);
  color: var(--surface);
}
.editor-tools .tool.danger.on {
  background: var(--bad);
  color: white;
}
.editor-bulk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid color-mix(in oklch, #e07a1f 30%, var(--border));
}
.editor-bulk-label {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 2px;
}
.bulk-op {
  height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.bulk-op:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.bulk-op.on {
  border-color: var(--text);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(15,23,42,0.08);
}
.bulk-op:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bulk-op:disabled:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}
.btn.danger-text {
  color: var(--bad);
}
.btn.danger-text:hover {
  background: var(--bad-bg);
  border-color: color-mix(in oklch, var(--bad) 40%, var(--border));
}
.editor-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
}

/* Edit-mode floor visuals */
.floor-wrap.edit-mode .floor-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(224, 122, 31, 0.35);
  z-index: 8;
  border-radius: 0;
}
.floor-wrap.edit-mode,
.floor-wrap.edit-mode * {
  user-select: none;
  -webkit-user-select: none;
}
.floor-wrap.edit-mode .floor-viewport.with-grid .floor-scene::before {
  background-image:
    linear-gradient(to right, rgba(224, 122, 31, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(224, 122, 31, 0.12) 1px, transparent 1px);
  background-size: 11px 11px;
}
.floor-wrap.tool-move .table { cursor: grab; }
.floor-wrap.tool-select.edit-mode .floor-viewport { cursor: default; }
.floor-wrap.tool-select.edit-mode .floor-viewport:active { cursor: crosshair; }
.floor-wrap.tool-move .table:active,
.floor-wrap.tool-move .table.dragging { cursor: grabbing; }
.floor-wrap.tool-add { cursor: crosshair; }
.floor-wrap.tool-add .floor-viewport { cursor: crosshair; }
.floor-wrap.tool-delete .table { cursor: not-allowed; }
.floor-wrap.tool-delete .table:hover {
  background: color-mix(in oklch, var(--bad) 30%, white) !important;
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 2px var(--bad), 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}
.table.dragging {
  opacity: 1;
  z-index: 20;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.32), 0 0 0 2px var(--info) !important;
  transition: none !important;
}
.table.ghost-origin {
  position: absolute;
  border: 1.5px dashed var(--text-3);
  background: rgba(148, 163, 184, 0.12) !important;
  opacity: 0.55;
  pointer-events: none;
  z-index: 15;
  box-shadow: none !important;
  border-radius: 2px;
}
.table.ghost-origin > * { display: none; }

/* Alignment guides shown while dragging */
.align-guide {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  background: transparent;
}
.align-guide.v {
  top: 0;
  width: 0;
  border-left: 1px dashed #ef4444;
}
.align-guide.h {
  left: 0;
  height: 0;
  border-top: 1px dashed #ef4444;
}
.selection-box {
  position: absolute;
  border: 1px solid var(--info);
  background: color-mix(in oklch, var(--info) 14%, transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.65) inset;
  pointer-events: none;
  z-index: 10;
}
.t-drag-handle {
  position: absolute;
  top: 2px; right: 3px;
  font-size: 10px;
  color: var(--text-3);
  line-height: 1;
  letter-spacing: -1px;
  pointer-events: none;
}

/* ── Assign Panel (layout editor side panel) ──────────────── */
.assign-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
.assign-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.assign-tag {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.assign-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
.assign-tabs {
  display: flex;
  padding: 8px 12px 0;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.assign-tabs button {
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.assign-tabs button.on {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}
.assign-tabs .tab-ct {
  font-size: 10.5px;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--text-3);
  font-weight: 500;
}
.assign-tabs button.on .tab-ct { background: var(--text); color: var(--surface); }

.assign-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.assign-search svg { color: var(--text-3); flex-shrink: 0; }
.assign-search input {
  flex: 1;
  border: 0;
  font-size: 13px;
  outline: none;
  background: transparent;
  padding: 4px 0;
}
.assign-filter-row {
  display: flex;
  gap: 4px;
  padding: 8px 12px 4px;
}
.assign-filter-row button {
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}
.assign-filter-row button.on {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.assign-current {
  padding: 10px 12px;
  border-bottom: 1px dashed var(--border);
}
.assign-position {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  min-width: 0;
}
.assign-position span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assign-position .mono {
  flex: 0 0 auto;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
}
.cur-worker {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 6px;
}

.assign-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 10px;
}

.worker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.worker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.worker-row:hover { background: var(--surface-2); }
.worker-row.reassign {
  background: color-mix(in oklch, var(--warn) 7%, var(--surface));
}
.worker-row.reassign:hover {
  background: color-mix(in oklch, var(--warn) 12%, var(--surface));
}
.worker-row:disabled, .worker-row.same {
  opacity: 0.5;
  cursor: default;
  background: transparent !important;
}
.skill-mini {
  width: 44px;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.skill-mini-fill {
  height: 100%;
  background: linear-gradient(to right, var(--warn), var(--ok));
}
.worker-action {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: center;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 700;
}
.worker-action.move {
  color: color-mix(in oklch, var(--warn) 70%, black);
  border-color: color-mix(in oklch, var(--warn) 32%, white);
  background: color-mix(in oklch, var(--warn) 12%, white);
}
.tier-chip {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tier-chip[data-tier="master"]  { background: color-mix(in oklch, var(--info) 16%, white); color: color-mix(in oklch, var(--info) 65%, black); }
.tier-chip[data-tier="senior"]  { background: color-mix(in oklch, var(--info) 8%, white);  color: color-mix(in oklch, var(--info) 55%, black); }
.tier-chip[data-tier="mid"]     { background: var(--surface-2); color: var(--text-2); }
.tier-chip[data-tier="junior"]  { background: color-mix(in oklch, var(--warn) 14%, white); color: color-mix(in oklch, var(--warn) 65%, black); }

.avatar[data-tier="master"]  { background: color-mix(in oklch, var(--info) 20%, white); color: color-mix(in oklch, var(--info) 65%, black); }

/* Operation chip grid (assign panel "공정 변경" tab) */
.op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.op-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  font-family: inherit;
  white-space: nowrap;
}
.op-chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.op-chip.on { border-color: var(--text); box-shadow: 0 0 0 2px rgba(15,23,42,0.08); }
.op-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.op-swatch.op-CUT  { background: var(--op-cut); }
.op-swatch.op-OVL  { background: var(--op-ovl); }
.op-swatch.op-STCH { background: var(--op-stch); }
.op-swatch.op-BTN  { background: var(--op-btn); }
.op-swatch.op-IRN  { background: var(--op-irn); }
.op-swatch.op-QC   { background: var(--op-qc); }
.op-swatch.op-PACK { background: var(--op-pack); }

.pill.warn.sm {
  font-size: 10.5px; padding: 2px 8px;
  background: color-mix(in oklch, var(--warn) 15%, white);
  color: color-mix(in oklch, var(--warn) 65%, black);
  border-color: color-mix(in oklch, var(--warn) 30%, white);
}
.btn.primary {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.btn.primary:hover { background: #0a0f1c; }
.floor-wrap {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, #fbfbfc 0%, #f2f3f5 100%);
  min-width: 0;
}
.floor-viewport.with-grid .floor-scene::before {
  content: '';
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* Zones */
.zone {
  position: absolute;
  border-radius: 4px;
  border: 1.5px solid;
  pointer-events: none;
}
.zone-label {
  position: absolute;
  top: 6px; left: 8px;
  display: flex; flex-direction: column;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.zone-title { font-weight: 700; white-space: nowrap; }
.zone-sub { font-size: 10px; font-weight: 500; opacity: 0.65; margin-top: 1px; }

.zone-cut  { background: color-mix(in oklch, var(--op-cut) 4%, white);  border-color: color-mix(in oklch, var(--op-cut) 30%, white);  border-style: dashed; }
.zone-cut  .zone-label { color: color-mix(in oklch, var(--op-cut) 60%, black); }
.zone-prod { background: rgba(255,255,255,0.5); border-color: var(--border-strong); border-style: dashed; }
.zone-prod .zone-label { color: var(--text-2); }
.zone-irn  { background: color-mix(in oklch, var(--op-irn) 6%, white); border-color: color-mix(in oklch, var(--op-irn) 32%, white); border-style: dashed; }
.zone-irn  .zone-label { color: color-mix(in oklch, var(--op-irn) 55%, black); }
.zone-qc   { background: color-mix(in oklch, var(--op-qc) 5%, white); border-color: color-mix(in oklch, var(--op-qc) 32%, white); border-style: dashed; }
.zone-qc   .zone-label { color: color-mix(in oklch, var(--op-qc) 55%, black); }
.zone-pack { background: color-mix(in oklch, var(--op-pack) 5%, white); border-color: color-mix(in oklch, var(--op-pack) 30%, white); border-style: dashed; }
.zone-pack .zone-label { color: color-mix(in oklch, var(--op-pack) 55%, black); }
.zone-short{ background: color-mix(in oklch, var(--op-qc) 4%, white); border-color: color-mix(in oklch, var(--op-qc) 30%, white); border-style: dashed; }
.zone-short .zone-label { color: color-mix(in oklch, var(--op-qc) 50%, black); }
.zone-fin  { background: color-mix(in oklch, var(--op-pack) 5%, white); border-color: color-mix(in oklch, var(--op-pack) 30%, white); border-style: dashed; }
.zone-fin  .zone-label { color: color-mix(in oklch, var(--op-pack) 50%, black); }
.zone-fabric { background: repeating-linear-gradient(45deg, #f3f0ea, #f3f0ea 6px, #ebe7df 6px, #ebe7df 12px); border-color: #d9d3c5; border-style: solid; opacity: 0.6; }
.zone-fabric .zone-label { color: #8a7a5a; }
.zone-fg   { background: repeating-linear-gradient(-45deg, #eef1f5, #eef1f5 6px, #e6eaf0 6px, #e6eaf0 12px); border-color: #c8d0da; border-style: solid; opacity: 0.6; }
.zone-fg   .zone-label { color: #5a6576; }
.zone.decorative { opacity: 0.75; }

/* Row / column rulers */
.ruler {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  display: grid;
  place-items: center;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.ruler.col-label {
  height: 18px;
  border-bottom: 1px solid var(--border);
}
.ruler.row-label {
  width: 32px;
  border-right: 1px solid var(--border);
}
.floor-viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  cursor: grab;
}
.floor-viewport.panning { cursor: grabbing; }
.floor-scene {
  position: absolute;
  transform-origin: 0 0;
  will-change: transform;
}

.line-band {
  position: absolute;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.4);
}
.line-band-label {
  position: absolute;
  top: -18px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg);
  padding: 0 6px;
  letter-spacing: 0.02em;
}
.line-band-label .op {
  color: var(--text-3);
  font-weight: 500;
  margin-left: 6px;
}

.op-column-header {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
}

.table {
  position: absolute;
  border-radius: 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  transition: transform 120ms, box-shadow 120ms;
  border: 1px solid;
  overflow: hidden;
}
.table:hover {
  transform: scale(1.15);
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.table.selected {
  outline: 2px solid var(--info);
  outline-offset: 1px;
  z-index: 6;
}
.table.highlighted {
  outline: 2px solid var(--bad);
  outline-offset: 1px;
  z-index: 5;
}
.table .t-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,0.55);
  pointer-events: none;
  font-size: 8px;
}
.table.s-empty .t-label { color: rgba(0,0,0,0.25); }

/* state colors */
.s-normal     { background: color-mix(in oklch, var(--ok) 18%, white); border-color: color-mix(in oklch, var(--ok) 38%, white); }
.s-high       { background: color-mix(in oklch, var(--ok) 32%, white); border-color: color-mix(in oklch, var(--ok) 55%, white); }
.s-bottleneck { background: color-mix(in oklch, var(--bad) 25%, white); border-color: color-mix(in oklch, var(--bad) 55%, white); }
.s-idle       { background: color-mix(in oklch, var(--warn) 25%, white); border-color: color-mix(in oklch, var(--warn) 50%, white); }
.s-break      { background: var(--surface-3); border-color: var(--border-strong); }
.s-empty      { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 3px, #f0f0f0 3px, #f0f0f0 6px); border-color: var(--border); }

/* ── Right rail ─────────────────────────────────────────────────────── */
.rail {
  border-left: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rail-sect {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.rail-sect-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rail-sect-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rail-sect-count {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 999px;
}

.alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--surface);
  align-items: start;
}
.alert:hover { background: var(--surface-2); }
.alert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;
}
.alert-dot.high { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.alert-dot.med  { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.alert-dot.low  { background: var(--info); box-shadow: 0 0 0 3px var(--info-bg); }
.alert-body { min-width: 0; }
.alert-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-detail {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-time {
  font-size: 11px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Table detail panel ─────────────────────────────────────────────── */
.detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.detail-hd {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.detail-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.detail-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.status-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
}
.status-badge.normal     { background: var(--ok-bg);   color: oklch(0.45 0.12 155); }
.status-badge.normal::before { background: var(--ok); }
.status-badge.high       { background: var(--ok-bg);   color: oklch(0.45 0.12 155); }
.status-badge.high::before { background: var(--ok); }
.status-badge.bottleneck { background: var(--bad-bg);  color: oklch(0.45 0.18 27); }
.status-badge.bottleneck::before { background: var(--bad); }
.status-badge.idle       { background: var(--warn-bg); color: oklch(0.45 0.14 78); }
.status-badge.idle::before { background: var(--warn); }
.status-badge.break      { background: var(--surface-3); color: var(--text-2); }
.status-badge.break::before { background: var(--text-3); }
.status-badge.empty      { background: var(--surface-3); color: var(--text-3); }
.status-badge.empty::before { background: var(--text-4); }

.cam-feed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f0f11;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cam-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(120, 140, 180, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(180, 140, 120, 0.1) 0%, transparent 60%);
}
.cam-grain {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px
  );
  mix-blend-mode: overlay;
}
.cam-rec {
  position: absolute;
  top: 8px; left: 8px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}
.cam-rec::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bad);
  animation: livepulse 1.5s infinite;
}
.cam-ts {
  position: absolute;
  top: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.cam-detect {
  position: absolute;
  border: 1.5px solid oklch(0.9 0.15 150);
  border-radius: 3px;
  padding: 3px 5px 1px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: oklch(0.9 0.15 150);
  background: rgba(0,0,0,0.3);
}
.cam-bbox-label {
  position: absolute;
  top: -15px;
  left: -1px;
  background: oklch(0.9 0.15 150);
  color: #0f0f11;
  padding: 1px 4px;
  font-size: 9px;
  border-radius: 2px 2px 0 0;
}
.cam-counter {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: white;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.cam-counter small {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 500;
  margin-left: 4px;
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.d-stat {
  background: var(--surface);
  padding: 10px 14px;
}
.d-stat .lbl {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 2px;
}
.d-stat .val {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.d-stat .val small {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.d-stat .bar {
  height: 3px;
  border-radius: 2px;
  background: var(--surface-2);
  margin-top: 6px;
  overflow: hidden;
}
.d-stat .bar > span {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: 2px;
}
.d-stat .bar > span.warn { background: var(--warn); }
.d-stat .bar > span.bad { background: var(--bad); }

.worker-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.worker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
  flex-shrink: 0;
}
.avatar.master { background: color-mix(in oklch, var(--info) 15%, white); color: var(--info); border-color: color-mix(in oklch, var(--info) 30%, white); }
.avatar.senior { background: color-mix(in oklch, var(--info) 8%, white); color: var(--info); }
.worker-name { font-weight: 600; font-size: 14px; }
.worker-meta { font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; }
.worker-meta .sep { color: var(--text-4); }
.tier-badge {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tier-badge.master { background: var(--info-bg); color: oklch(0.4 0.15 252); }
.tier-badge.senior { background: var(--info-bg); color: oklch(0.5 0.12 252); }
.tier-badge.mid    { background: var(--warn-bg); color: oklch(0.45 0.14 78); }
.tier-badge.junior { background: var(--surface-3); color: var(--text-2); }

.skill-bar {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-bar-lbl {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
}
.skill-bar-track {
  position: relative;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
}
.skill-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--info);
  border-radius: 2px;
}
.skill-bar-track .tier-tick {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: var(--border-strong);
}

/* ── Hourly chart ───────────────────────────────────────────────────── */
.chart {
  padding: 0 16px 14px;
}
.chart-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 10px;
}
.chart-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.chart-body {
  position: relative;
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.chart-bar {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.chart-bar > span {
  display: block;
  width: 100%;
}
.chart-axis {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
}
.chart-axis > span { flex: 1; text-align: center; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
}
.chart-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--text-2);
}
.chart-legend-item .sw {
  width: 10px; height: 10px; border-radius: 2px;
}

/* ── Bottleneck card ───────────────────────────────────────────────── */
.bn-card {
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bn-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bn-title {
  font-size: 13px;
  font-weight: 600;
}
.bn-sev {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--bad);
  padding: 1px 6px;
  background: var(--bad-bg);
  border-radius: 3px;
}
.bn-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.bn-flow .cell {
  flex: 1;
  background: var(--surface-2);
  padding: 4px 8px;
  border-radius: 4px;
}
.bn-flow .cell .n { font-weight: 600; font-size: 13px; }
.bn-flow .cell .l { font-size: 10px; color: var(--text-3); }
.bn-flow .arrow { color: var(--text-4); }
.bn-flow .cell.down { background: var(--bad-bg); color: oklch(0.45 0.18 27); }
.bn-actions {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

/* ── Drawer ─────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 27, 0.3);
  z-index: 50;
  animation: fade 120ms;
}
@keyframes fade {
  from { opacity: 0; }
}
.drawer {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 520px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 51;
  display: flex;
  flex-direction: column;
  animation: slideIn 180ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes slideIn {
  from { transform: translateX(30px); opacity: 0; }
}
.drawer-hd {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title {
  font-size: 16px;
  font-weight: 600;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.drawer-section {
  margin-bottom: 24px;
}
.drawer-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* Worker profile */
.profile-hd {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
}
.profile-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-2);
}
.profile-name { font-size: 20px; font-weight: 600; }
.profile-sub { color: var(--text-3); font-size: 13px; margin-top: 2px; }

.prof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.prof-grid .d-stat { padding: 12px 14px; }

.prof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.prof-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--surface-2);
}
.prof-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.prof-table tr:hover td { background: var(--surface-2); }

/* ── Reassign modal ──────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 27, 0.35);
  z-index: 60;
  display: grid;
  place-items: center;
  animation: fade 120ms;
}
.modal {
  width: 640px;
  max-height: 82vh;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pop 160ms cubic-bezier(0.2, 0, 0, 1);
}
/* Inline button spinner — appears on the left of the label so the button
   width is stable across loading transitions. */
.btn-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: -1px;
  opacity: 0.7;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

@keyframes pop {
  from { transform: scale(0.96); opacity: 0; }
}
.modal-hd {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}
.modal-ft {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface-2);
}

.suggestion {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  align-items: center;
  cursor: pointer;
}
.suggestion:hover { background: var(--surface-2); }
.suggestion.selected { border-color: var(--info); background: color-mix(in oklch, var(--info) 4%, white); }
.sug-move {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.sug-move .from, .sug-move .to {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 4px;
}
.sug-move .to { background: color-mix(in oklch, var(--info) 10%, white); color: var(--info); }
.sug-reason {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
}
.sug-impact {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ok);
  font-weight: 600;
}

/* ── Tooltip ────────────────────────────────────────────────────── */
.tt {
  position: fixed;
  background: #18181b;
  color: white;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  line-height: 1.5;
}
.tt .t-id { font-family: var(--font-mono); color: rgba(255,255,255,0.55); font-size: 10px; }
.tt .t-name { font-weight: 600; }
.tt .t-row { display: flex; gap: 10px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tt .t-row .k { color: rgba(255,255,255,0.55); }

/* ── Utilities ──────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); }
.pad-16 { padding: 16px; }
.muted { color: var(--text-3); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }

/* HR page */
.hr-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.hr-toolbar {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.hr-search {
  flex: 1;
  max-width: 320px;
  height: 28px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b8d93' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>")
    no-repeat 10px center;
  font-size: 12.5px;
  outline: none;
}
.hr-search:focus { border-color: var(--info); }
.hr-table-wrap {
  flex: 1;
  overflow: auto;
  background: var(--surface);
}
.hr-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;   /* 정렬 시 컬럼 너비가 내용에 따라 흔들리지 않도록 고정 */
}
.hr-table thead {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.hr-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.hr-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 고정폭을 넘는 긴 값은 …으로 잘림(title로 전체 확인) */
}
/* Operations master + audit log tables — keep cell text on a single line.
   Their parent wrappers have overflow:auto so a too-narrow viewport just
   produces a horizontal scroll. */
.ops-master-table td,
.audit-table td {
  white-space: nowrap;
}
.hr-table tbody tr { cursor: pointer; }
.hr-table tbody tr:hover td { background: var(--surface-2); }
.hr-spark {
  display: inline-block;
  width: 60px;
  height: 18px;
  vertical-align: middle;
}

/* HR 표 — 클릭 정렬 헤더 */
.hr-table th.hr-th-sort {
  cursor: pointer;
  user-select: none;
  transition: color .12s;
}
.hr-table th.hr-th-sort:hover { color: var(--text-2); }
.hr-table th.hr-th-sort.active { color: var(--info); }
.hr-table th.hr-th-sort .hr-sort-ar { margin-left: 5px; font-size: 10px; opacity: .3; }
.hr-table th.hr-th-sort:hover .hr-sort-ar { opacity: .6; }
.hr-table th.hr-th-sort.active .hr-sort-ar { opacity: 1; }

/* HR 표 — 퇴사자 행은 흐리게 */
.hr-table tbody tr.inactive td { opacity: .5; }

/* HR 표 — 재직/퇴사 상태 뱃지 */
.hr-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
}
.hr-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hr-status.active { color: var(--ok); }
.hr-status.inactive { color: var(--text-4); }

/* HR 툴바 — 결과 카운트 */
.hr-count {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Login page ─────────────────────────────────────────── */
.login-shell {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #f7f8fa 0%, #eef0f2 100%);
  display: grid;
  place-items: center;
  z-index: 100;
}
.login-bg {
  position: absolute; inset: 0;
  opacity: 0.4;
  pointer-events: none;
}
.login-card {
  position: relative;
  width: 380px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.login-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.login-sub {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 22px;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field {
  display: flex; flex-direction: column; gap: 5px;
}
.login-field span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.login-field input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  background: var(--surface);
  transition: border-color 120ms;
}
.login-field input:focus { border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 12%, transparent); }
.login-err {
  font-size: 12px;
  color: var(--bad);
  background: var(--bad-bg);
  padding: 8px 10px;
  border-radius: 5px;
  border-left: 2px solid var(--bad);
}
.login-submit {
  height: 40px;
  margin-top: 6px;
  font-size: 13.5px;
  justify-content: center;
}
.login-divider {
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.demo-accounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.demo-acct {
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.demo-acct:hover { background: var(--surface-3); }
.demo-acct-name {
  font-size: 12.5px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.demo-acct-meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.login-foot {
  margin-top: 18px;
  text-align: center;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.user-btn:hover { background: var(--surface-2); border-color: var(--border); }
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  z-index: 31;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.user-menu-hd {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.user-menu-item {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item.danger { color: var(--bad); }
.user-menu-item.danger:hover { background: var(--bad-bg); }
.user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

.master-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  background: color-mix(in oklch, var(--info) 12%, white);
  color: color-mix(in oklch, var(--info) 60%, black);
  letter-spacing: 0.02em;
}

/* ── Orders page ──────────────────────────────────────── */
.orders-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.orders-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.okpi {
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.okpi-lbl {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.okpi-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.okpi-val small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
}
.okpi-sub {
  font-size: 11px;
  color: var(--text-3);
}
.okpi-attain {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.okpi-attain-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.okpi-attain-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.okpi-attain-num {
  font-size: 16px;
  font-weight: 600;
}

.orders-toolbar {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.orders-table-wrap {
  flex: 1;
  overflow: auto;
  background: var(--surface);
}
.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.orders-table thead {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}
.orders-table th {
  text-align: left;
  padding: 9px 10px;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.orders-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: middle;
  white-space: nowrap;
}
.orders-table td > div {
  white-space: nowrap;
}
/* 합쳐진 칸(진행·오늘·상태)은 위아래로 쌓이므로 가운데 정렬보다 위가 자연스럽다 */
.orders-table td:nth-child(5),
.orders-table td:nth-child(6),
.orders-table td:nth-child(8) { vertical-align: top; }
.orders-table tbody tr:hover td { background: var(--surface-2); }
.buyer-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}
.progress-bar {
  flex: 1;
  height: 5px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--info);
  border-radius: 3px;
}
.progress-bar > span.warn { background: var(--warn); }
.progress-bar > span.bad { background: var(--bad); }
.progress-bar > span.ok { background: var(--ok); }
.progress-cell .mono { font-size: 11px; min-width: 32px; text-align: right; color: var(--text-2); }
.order-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.order-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px;
}
.order-status.s-active { background: var(--info-bg); color: oklch(0.45 0.15 252); }
.order-status.s-active::before { background: var(--info); }
.order-status.s-pending { background: var(--surface-3); color: var(--text-2); }
.order-status.s-pending::before { background: var(--text-3); }
.order-status.s-done { background: var(--ok-bg); color: oklch(0.45 0.12 155); }
.order-status.s-done::before { background: var(--ok); }
.order-status.s-cancelled { background: var(--bad-bg, #fef2f2); color: var(--bad); }
.order-status.s-cancelled::before { background: var(--bad); }

/* 우선순위 배지 */
.order-priority {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 11px; font-weight: 500;
}
.order-priority.pri-high   { background: #fef2f2; color: #dc2626; }
.order-priority.pri-normal { background: var(--surface-3); color: var(--text-2); }
.order-priority.pri-low    { background: var(--surface-2); color: var(--text-3); }
.order-priority.pri-tbd    { background: #fffbeb; color: #d97706; }

/* 신규 오더 생성 모달 — 넓게 */
.order-create-modal { width: 680px !important; max-width: 95vw; }

/* 섹션 제목 */
.order-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* 신규 바이어 박스 */
.new-buyer-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; margin-bottom: 12px;
}

/* 계층형 제품 선택 */
.product-hierarchy { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.hier-step { display: flex; align-items: flex-start; gap: 10px; }
.hier-label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  min-width: 56px; padding-top: 4px; flex-shrink: 0;
}
.hier-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hier-chip {
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: all .15s;
}
.hier-chip:hover { border-color: var(--info); color: var(--info); }
.hier-chip.on {
  background: var(--info); border-color: var(--info);
  color: #fff; font-weight: 600;
}

/* 제품 선택 요약 바 */
.product-summary {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px; font-size: 12px;
  color: var(--text-2); margin-bottom: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 500;
}
.form-grid input, .form-grid select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--surface);
}
.form-grid input:focus, .form-grid select:focus { border-color: var(--info); }
.form-grid input:disabled { background: var(--surface-2); color: var(--text-3); }

/* ── History page ─────────────────────────────────────── */
.history-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.history-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(to right, color-mix(in oklch, var(--info) 7%, white), color-mix(in oklch, var(--info) 3%, white));
  border-bottom: 1px solid color-mix(in oklch, var(--info) 18%, white);
}
.history-banner-icon {
  font-size: 18px;
}
.history-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.history-toolbar {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.mini-select {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  background: var(--surface);
  outline: none;
  color: var(--text);
}
.history-table-wrap {
  flex: 1;
  overflow: auto;
  background: var(--surface);
}
.history-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}
.history-table thead {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}
.history-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.history-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.history-table tbody tr:hover td { background: var(--surface-2); }
.action-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  background: var(--surface);
  letter-spacing: 0.02em;
}
.history-footer {
  padding: 10px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  text-align: center;
}

.restricted-page {
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--surface);
}
.restricted-icon { font-size: 56px; opacity: 0.3; }
.restricted-title { font-size: 18px; font-weight: 600; margin-top: 16px; text-align: center; }
.restricted-sub { font-size: 13px; color: var(--text-3); margin-top: 6px; text-align: center; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════
   v2 — SAM 기반 + 가로 라인 + 1·2층 탭 (overrides)
   ════════════════════════════════════════════════════════════════════ */

/* Floor controls — top bar above viewport */
.floor-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: oklch(0.985 0.004 250);
  min-width: 0;
  overflow: hidden;
}
.floor-controls {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  z-index: 4;
  box-shadow: none;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
}
.floor-controls .legend {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.floor-controls .floor-stats {
  flex-shrink: 0;
  white-space: nowrap;
}
.floor-controls .segmented {
  flex-shrink: 0;
}
.floor-controls .floor-zoom {
  flex-shrink: 0;
}

.floor-tabs {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.floor-tabs button {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-2);
  width: auto;
  height: auto;
  font-size: 12px;
}
.floor-tabs button.on {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  color: var(--text);
}
.floor-tabs .ft-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}
.floor-tabs .ft-name {
  font-size: 12.5px;
  font-weight: 500;
}
.floor-tabs .ft-meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.floor-tabs button.on .ft-meta { color: var(--text-2); }

.floor-select {
  position: relative;
  flex: 0 0 auto;
  z-index: 20;
}
.floor-select-trigger {
  height: 32px;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.floor-select.open .floor-select-trigger,
.floor-select-trigger:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.floor-select-badge {
  height: 22px;
  min-width: 36px;
  padding: 0 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--surface);
  font-weight: 800;
  font-size: 12px;
}
.floor-select-main,
.floor-option-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.floor-select-main strong,
.floor-option-main strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.floor-select-main small,
.floor-option-main small {
  font-size: 10.5px;
  color: var(--text-3);
  line-height: 1.2;
  white-space: nowrap;
}
.floor-select-caret {
  margin-left: auto;
  color: var(--text-3);
  font-size: 10px;
}
.floor-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: transparent;
}
.floor-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.32), 0 3px 10px rgba(15, 23, 42, 0.08);
  z-index: 21;
}
.floor-menu button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.floor-menu button:hover,
.floor-menu button.on {
  background: var(--surface-2);
}
.floor-menu button svg {
  margin-left: auto;
  width: 15px;
  height: 15px;
  color: var(--ok);
}

.floor-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-2);
  border-left: 1px solid var(--border);
  height: 24px;
}
.floor-zoom {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px;
}
.floor-zoom button {
  background: transparent;
  border: 0;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  width: auto;
  height: auto;
  min-width: 24px;
}
.floor-zoom button:hover { background: var(--surface); }
.floor-zoom button .mono { font-size: 11px; }

.legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  height: 24px;
}
.legend .leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-2);
}
.legend .leg i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}
.legend .heat-grad {
  width: 80px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(to right,
    oklch(0.62 0.20 25),
    oklch(0.78 0.10 90),
    oklch(0.58 0.16 152));
}

.floor-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,0,0,0.015) 39px, rgba(0,0,0,0.015) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0,0,0,0.015) 39px, rgba(0,0,0,0.015) 40px),
    oklch(0.985 0.004 250);
  cursor: grab;
}
.floor-scene {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
}
.floor-grid {
  position: absolute;
  top: 0; left: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  pointer-events: none;
}

/* 같은 오더/공정 흐름을 공유하는 라인 묶음 */
.line-cluster {
  --cluster-accent: oklch(0.55 0.045 245);
  position: absolute;
  border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--cluster-accent) 34%, var(--border));
  border-left: 4px solid var(--cluster-accent);
  background: color-mix(in oklch, var(--cluster-accent) 10%, white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.68), 0 1px 3px rgba(15,23,42,0.05);
  pointer-events: none;
}

/* Line block — a 2D group of lines (e.g. one quadrant of a real factory
   floor). Drawn as a subtle frame behind its member lines so the user can
   see which lines belong together without obscuring the strips themselves. */
.line-block {
  position: absolute;
  border: 1px dashed oklch(0.78 0.02 250);
  border-radius: 10px;
  background: oklch(0.985 0.004 250 / 0.55);
  pointer-events: none;
  z-index: 0;
}
.line-block-label {
  position: absolute;
  top: -10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  pointer-events: auto;
}
.line-block-del {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.line-block-del:hover { color: var(--bad); }
.line-cluster.tone-a { --cluster-accent: oklch(0.52 0.055 235); }
.line-cluster.tone-b { --cluster-accent: oklch(0.54 0.050 152); }
.line-cluster.tone-c { --cluster-accent: oklch(0.56 0.055 80); }
.line-cluster.tone-d { --cluster-accent: oklch(0.55 0.052 305); }
.line-cluster.tone-e { --cluster-accent: oklch(0.55 0.048 25); }
.line-cluster-label {
  position: absolute;
  left: 7px;
  top: 7px;
  display: grid;
  align-items: start;
  gap: 2px;
  width: 78px;
  min-height: 0;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid color-mix(in oklch, var(--cluster-accent) 24%, var(--border));
  background: color-mix(in oklch, var(--surface) 96%, transparent);
  color: var(--text-2);
  box-shadow: 0 2px 8px rgba(15,23,42,0.08);
  transform-origin: left top;
  z-index: 4;
}
.line-cluster-label strong {
  color: var(--text);
  font-size: 11px;
  line-height: 1.15;
  white-space: normal;
}
.line-cluster-label span {
  font-size: 9.5px;
  line-height: 1.12;
  color: var(--text-3);
  white-space: normal;
}
.line-cluster-label .line-cluster-kicker {
  color: var(--cluster-accent);
  font-weight: 700;
}

/* 라인 가로 막대 (line strip) */
/* Placement markers in add mode — subtle dashed outlines on every empty
   slot per line. Hover lights them up; click drops a table there. */
.add-marker {
  position: absolute;
  border: 1.5px dashed color-mix(in oklch, var(--info) 60%, var(--border));
  background: color-mix(in oklch, var(--info) 6%, transparent);
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--info);
  opacity: 0.45;
  transition: opacity 80ms, background 80ms;
  z-index: 2;
}
.add-marker:hover {
  opacity: 1;
  background: color-mix(in oklch, var(--info) 22%, transparent);
}

.line-strip {
  position: absolute;
  background: linear-gradient(to right,
    oklch(0.97 0.005 250) 0%,
    oklch(0.99 0.003 250) 100%);
  border: 1px solid oklch(0.88 0.01 250);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.line-strip-label {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  pointer-events: auto;
  z-index: 2;
}
/* In layout edit mode the line label doubles as a drag handle for the
   whole line. Pointer hint plus a subtle outline while dragging. */
.floor-wrap.edit-mode .line-strip-label {
  cursor: grab;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  border-color: var(--info);
  background: color-mix(in oklch, var(--info) 10%, var(--surface));
}
.floor-wrap.edit-mode .line-strip-label:active { cursor: grabbing; }
.line-strip.line-dragging .line-strip-label {
  outline: 2px solid var(--info);
  outline-offset: 1px;
  cursor: grabbing;
}
/* Selected line — clicked but not currently being dragged. Stronger
   border than baseline so the active row stands out at a glance. */
.line-strip.line-selected {
  border-color: var(--info);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--info) 22%, transparent);
}
.line-strip.line-selected .line-strip-label {
  outline: 2px solid var(--info);
  outline-offset: 1px;
  background: color-mix(in oklch, var(--info) 18%, var(--surface));
}
.line-drag-grip {
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.1em;
  color: var(--info);
  pointer-events: none;
  user-select: none;
}
.line-delete-btn {
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.line-delete-btn:hover {
  background: var(--bad);
  color: white;
}
/* Tooltip is rendered via React portal at <body> so it escapes the line
   strip's stacking context without us having to lift the strip's z-index
   (which had a side-effect of covering nearby tables). */
.line-tooltip-portal {
  position: fixed;
  background: oklch(0.20 0.02 250);
  color: oklch(0.96 0.005 250);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transform: translate(-50%, -100%);
  margin-top: -6px;
}
.line-strip-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.line-strip-sub {
  font-size: 8.5px;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
  line-height: 1.05;
}
/* 공정 그룹 사각형 (process group) */
.proc-group {
  position: absolute;
  border-radius: 5px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.82;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
}
.floor-wrap.mode-role .line-strip {
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  border-color: color-mix(in oklch, var(--border) 78%, transparent);
}
.floor-wrap.mode-role .proc-group {
  opacity: 0.68;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.08);
}
.proc-group-lbl {
  position: absolute;
  top: -6px;
  left: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
}

/* Zone (재단실, 다림질, QC, 포장) */
.zone-rect {
  position: absolute;
  border-radius: 6px;
  border: 1px dashed;
  z-index: 0;
  overflow: hidden;
}
.zone-rect.cut    { background: oklch(0.97 0.025 65); border-color: oklch(0.85 0.05 65); }
.zone-rect.fabric { background: oklch(0.96 0.018 90); border-color: oklch(0.85 0.04 90); }
.zone-rect.iron   { background: oklch(0.97 0.022 305); border-color: oklch(0.85 0.05 305); }
.zone-rect.qc     { background: oklch(0.97 0.022 25); border-color: oklch(0.85 0.05 25); }
.zone-rect.pack   { background: oklch(0.97 0.018 190); border-color: oklch(0.85 0.04 190); }
.zone-rect.line   { background: transparent; border-color: transparent; }
.zone-rect-label {
  position: absolute;
  top: 8px;
  left: 10px;
}
.zone-rect-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.zone-rect-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.06em;
  margin-top: 1px;
}
.zone-station-label {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 78%, transparent);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.zone-stations {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 62px;
  bottom: 9px;
  display: grid;
  gap: 5px;
  grid-auto-rows: 15px;
  align-content: space-between;
  pointer-events: none;
}
.zone-worker {
  position: relative;
  min-width: 0;
  height: 15px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.zone-worker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: color-mix(in oklch, var(--text) 84%, white);
}
.zone-worker::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 11px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 5px 5px 3px 3px;
  background: color-mix(in oklch, var(--ok) 65%, white);
}
.zone-worker.lead::after {
  background: color-mix(in oklch, var(--info) 62%, white);
}

/* Table — 가로 라인용 작은 사각형 */
.table {
  position: absolute;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.12);
  transition: transform 100ms, box-shadow 100ms, outline 100ms;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: rgba(0,0,0,0.65);
  z-index: 3;
  background: var(--surface);
}
.table:hover {
  transform: scale(1.18);
  z-index: 8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.table.sel {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  z-index: 14;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--info) 18%, transparent), 0 5px 14px rgba(15,23,42,0.18);
}
.floor-wrap.edit-mode .table.select-preview {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  z-index: 13;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--info) 16%, transparent), 0 4px 12px rgba(15,23,42,0.14);
}
.table.dragging {
  opacity: 0.7;
  z-index: 9;
}
.table-seq {
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}
.table-seq.as-worker {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  width: 100%;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-seq.as-worker.unassigned {
  color: var(--text-3);
  font-weight: 500;
  opacity: 0.7;
}
/* In edit modes the scale-on-hover from the base rule is jittery, but the
   user still needs to see which table the cursor is on. Use a flat outline
   instead — no transform, no shadow. */
.floor-wrap.edit-mode .table:hover {
  transform: none;
  box-shadow: none;
  outline: 2px solid var(--info);
  outline-offset: 1px;
  z-index: 9;
}

/* Edit modes take over the screen — hide the topbar and sidebar so the
   editor toolbar is the only chrome. The grid template is overridden inline
   on .app so the area collapses to just `main`. */
.app.edit-fullscreen .topbar,
.app.edit-fullscreen .sidebar {
  display: none;
}
.table-op {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-3);
  pointer-events: none;
  background: var(--surface);
  padding: 0 2px;
  border-radius: 2px;
}
.table-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: oklch(0.20 0.02 250);
  color: oklch(0.96 0.005 250);
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  pointer-events: none;
}
.table-tip strong { color: oklch(0.99 0 0); }
.table-tip .mono { font-family: var(--font-mono); }
/* Portal-rendered tooltip on document.body — must override the original
   absolute positioning + nowrap so the box wraps and shows below the cell. */
.table-tip.table-tip-portal {
  position: fixed;
  top: auto;
  left: auto;
  white-space: normal;
  max-width: 260px;
  z-index: 9999;
}

/* state */
/* empty = no worker assigned. Render as a normal table; the absence of a
   worker name (in assign mode) is a strong-enough cue without the dashed
   outline + faded look that made new lines read as "broken". */
.table.empty {}
.table.fault { animation: faultPulse 1.6s ease-in-out infinite; }
@keyframes faultPulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.62 0.20 25 / 0.4); }
  50% { box-shadow: 0 0 0 4px oklch(0.62 0.20 25 / 0); }
}

/* SAM KPI strip: horizontally scrollable, slim */
.kpis.kpis-sam.kpis-sam {
  display: flex !important;
  gap: 10px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  grid-template-columns: none;
}
.kpis.kpis-sam .kpi {
  flex: 1 0 auto;
  min-width: 130px;
  padding: 10px 14px;
}
.kpis.kpis-sam .kpi-val { font-size: 22px; }
.kpis.kpis-sam .kpi-lbl { font-size: 10.5px; }
.kpis.kpis-sam .kpi-trend { font-size: 10.5px; }

/* ── Line Balance page ─────────────────────────────────────────── */
.lb-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-2);
}
.lb-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) 1.6fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.lb-stat {
  background: var(--surface);
  padding: 14px 18px;
}
.lb-stat-lbl {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.lb-stat-val {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lb-stat-val small { font-size: 14px; color: var(--text-3); font-weight: 500; }
.lb-stat-info { display: flex; flex-direction: column; justify-content: center; }
.lb-stat-meta {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
}
.lb-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.lb-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.lb-list {
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.lb-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.lb-row:hover { background: var(--surface-2); }
.lb-row.sel {
  background: oklch(0.97 0.02 240);
  border-left: 3px solid var(--accent, oklch(0.55 0.18 250));
  padding-left: 11px;
}
.lb-row-hd {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: start;
  margin-bottom: 8px;
}
.lb-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.lb-row-name strong { font-weight: 600; }
.lb-row-floor {
  font-size: 10px;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.lb-row-meta {
  grid-column: 1;
  font-size: 11px;
  color: var(--text-3);
}
.lb-row-eff {
  grid-row: 1 / span 2;
  grid-column: 2;
  text-align: right;
}
.lb-mini {
  display: flex;
  gap: 2px;
  height: 36px;
  align-items: flex-end;
}
.lb-mini-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-mini-bar {
  flex: 1;
  background: var(--surface-2);
  border-radius: 2px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 24px;
}
.lb-mini-bar span {
  display: block;
  width: 100%;
  border-radius: 2px;
}
.lb-mini-lbl {
  font-size: 9px;
  color: var(--text-3);
  text-align: center;
  letter-spacing: -0.02em;
}

.lb-detail {
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--surface-2);
}
.lb-detail-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.lb-detail-id {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lb-detail-title {
  font-size: 22px;
  font-weight: 600;
  margin: 4px 0 6px;
}
.lb-detail-sub {
  font-size: 12px;
  color: var(--text-2);
}
.lb-detail-eff {
  text-align: right;
  min-width: 180px;
}

.lb-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.lb-chart-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.lb-balance-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
}
.lb-balance-pill strong { font-size: 13px; margin-right: 4px; }

.lb-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
  align-items: end;
  min-height: 280px;
}
.lb-bar-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 6px;
}
.lb-bar-col.bottleneck {
  background: oklch(0.96 0.04 25);
  outline: 1px dashed oklch(0.62 0.18 25);
}
.lb-bar-stack {
  position: relative;
  height: 200px;
  background: linear-gradient(to top, var(--surface-2) 0%, var(--surface-2) 1px, transparent 1px, transparent 100%);
  background-size: 100% 25%;
  border-bottom: 1px solid var(--border);
}
.lb-bar-actual {
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.lb-bar-val {
  font-size: 11px;
  color: white;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.lb-bar-std {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px dashed oklch(0.55 0.02 240 / 0.5);
  z-index: 2;
}
.lb-bar-std-lbl {
  position: absolute;
  right: -2px;
  top: -14px;
  font-size: 9px;
  color: var(--text-3);
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
}
.lb-bar-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-bar-name { font-size: 12px; }
.lb-bar-sam, .lb-bar-workers, .lb-bar-eff {
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.lb-suggest {
  background: oklch(0.98 0.02 78);
  border: 1px solid oklch(0.85 0.10 78);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.lb-suggest-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: oklch(0.4 0.14 78);
  margin-bottom: 10px;
}
.lb-suggest-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}
.lb-suggest-from, .lb-suggest-to {
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.lb-suggest-pad { color: var(--text-2); margin-left: 4px; }
.lb-suggest-impact {
  font-size: 12px;
  color: var(--text-2);
  margin-left: auto;
}
.lb-suggest-actions {
  display: flex;
  gap: 6px;
}

.process-map {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.process-map-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}
.process-cell {
  min-width: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  color: var(--text);
}
.process-cell:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.process-cell.bottleneck {
  background: oklch(0.98 0.025 25);
  border-color: oklch(0.78 0.12 25);
}
.process-cell-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.process-cell-top .mono {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--text-3);
}
.process-cell-top strong {
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.process-cell-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.process-cell-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to right, var(--warn), var(--ok));
}
.process-cell.bottleneck .process-cell-bar span {
  background: var(--bad);
}
.process-cell-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.process-cell-meta span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.lb-table-hd {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lb-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.lb-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.lb-table tr.bottleneck { background: oklch(0.98 0.02 25); }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table-color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}
.bottleneck-tag {
  font-size: 10px;
  background: oklch(0.62 0.18 25);
  color: white;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  font-weight: 600;
}
.btn.xs {
  padding: 3px 8px;
  font-size: 11px;
  height: 22px;
}

/* ── UI repair pass ───────────────────────────────────────────
   Keeps the imported prototype stable after the older and newer
   floor-map styles are loaded in the same file.
*/
html, body, #root {
  min-width: 0;
  overflow: hidden;
}
.app,
.main,
.content-grid,
.floor-wrap,
.floor-viewport {
  min-width: 0;
  min-height: 0;
}
.topbar {
  gap: 10px;
  min-width: 0;
}
.topbar .logo {
  flex-shrink: 0;
}
.topbar-crumb {
  min-width: 88px;
}
.user-btn {
  max-width: 190px;
}
.user-btn > div:nth-child(2) {
  min-width: 0;
}
.user-btn > div:nth-child(2) > div {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 124px;
}

.filterbar {
  min-height: 45px;
  align-content: center;
}
.filterbar .floor-seg button {
  min-width: 94px;
  height: 26px;
}

.kpis.kpis-sam.kpis-sam {
  padding: 10px 16px;
}
.kpis.kpis-sam .kpi {
  min-width: 148px;
  max-width: 220px;
}
.kpis.kpis-sam .kpi-trend {
  overflow: hidden;
  text-overflow: ellipsis;
}

.floor-wrap {
  flex: 1 1 auto;
}
.floor-controls {
  min-height: 42px;
  overflow: visible;
  align-items: center;
}
.floor-controls .segmented {
  flex: 0 0 auto;
  align-items: center;
}
.floor-controls .segmented button {
  width: auto;
  min-width: 54px;
  height: 24px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
.floor-controls .legend {
  flex: 1 1 auto;
  height: auto;
  min-height: 24px;
  min-width: 168px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 5px;
}
.floor-controls .legend .leg {
  min-width: 0;
}
.floor-controls .legend .heat-grad {
  flex: 0 0 92px;
}
.floor-controls .floor-stats {
  min-width: 148px;
  justify-content: center;
}
.floor-controls .floor-zoom {
  margin-left: auto;
}
.floor-controls .floor-zoom button {
  width: auto;
  height: 24px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.floor-viewport {
  flex: 1 1 auto;
}
.floor-scene {
  will-change: transform;
}
.floor-wrap .line-strip-label {
  left: 4px;
  max-width: 70px;
  padding: 2px 6px;
}
.floor-wrap .line-strip-sub {
  max-width: 60px;
}
.floor-wrap.labels-off .line-strip-label {
  max-width: 64px;
  padding: 2px 5px;
}
.floor-wrap.labels-off .line-strip-sub {
  max-width: 54px;
}
.table-tip {
  font-family: var(--font-ui);
}
.status-badge.active { background: var(--ok-bg); color: oklch(0.45 0.12 155); }
.status-badge.fault  { background: var(--bad-bg); color: oklch(0.45 0.18 27); }

.detail-overlay {
  max-width: min(420px, calc(100% - 56px));
}

.orders-toolbar,
.history-toolbar,
.lb-controls {
  flex-wrap: wrap;
}
.orders-table {
  min-width: 1500px;
}
.lb-grid {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}
.lb-detail-id {
  font-family: var(--font-mono);
}
.lb-bars {
  grid-template-columns: repeat(7, minmax(76px, 1fr));
  overflow-x: auto;
  padding-bottom: 4px;
}
.lb-table-wrap {
  overflow-x: auto;
}
.lb-table {
  min-width: 760px;
}

.login-card {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.modal {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
}
.drawer {
  max-width: min(520px, calc(100vw - 28px));
}

/* ── Operator UI polish ───────────────────────────────────────────────
   Keep the floor map as the primary work surface. KPIs and alerts remain
   available, but no longer steal the first screen from the layout.
*/
.filterbar {
  min-height: 46px;
  padding: 7px 14px;
  gap: 8px;
}
.kpis.kpis-sam.kpis-sam {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(104px, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.kpis.kpis-sam .kpi {
  min-width: 0;
  flex: initial;
  padding: 7px 11px;
  gap: 1px;
}
.kpis.kpis-sam .kpi-val {
  font-size: 19px;
  line-height: 1.12;
}
.kpis.kpis-sam .kpi-lbl,
.kpis.kpis-sam .kpi-trend {
  font-size: 10px;
  line-height: 1.2;
}
.kpis.kpis-sam .kpi-trend {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floor-controls {
  min-height: 38px;
  padding: 6px 10px;
  gap: 8px;
}
.floor-controls .segmented button {
  min-width: 48px;
  height: 23px;
  padding: 0 9px;
}
.floor-controls .floor-stats {
  min-width: 132px;
  font-size: 11.5px;
}
.floor-controls .legend {
  row-gap: 3px;
  gap: 8px;
}
.floor-controls .legend .leg {
  font-size: 10.5px;
}
.floor-viewport {
  background:
    linear-gradient(rgba(255,255,255,0.38), rgba(255,255,255,0.38)),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(0,0,0,0.018) 39px, rgba(0,0,0,0.018) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0,0,0,0.018) 39px, rgba(0,0,0,0.018) 40px),
    oklch(0.982 0.004 250);
}
.rail-collapsed {
  width: 42px;
  background: color-mix(in oklch, var(--surface) 96%, transparent);
}
.rail-collapsed button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.alerts-rail-wrap {
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.rail-sect {
  padding: 11px 12px;
}
.bn-card,
.alert {
  border-radius: 6px;
}
.bn-card {
  padding: 9px;
}
.alert {
  padding: 8px;
}
.alert-title {
  font-size: 12px;
}
.alert-detail {
  font-size: 11px;
}

@media (max-width: 1180px) {
  .topbar {
    padding: 0 10px;
    gap: 8px;
  }
  .topbar .logo {
    width: auto !important;
    max-width: 154px;
  }
  .pill {
    padding: 0 8px;
  }
  .filterbar {
    padding: 8px 12px;
  }
  .floor-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .floor-controls .legend {
    order: 5;
    flex-basis: 100%;
    border-left: 0;
    padding-left: 0;
    min-width: 0;
  }
  .floor-controls .floor-zoom {
    margin-left: 0;
  }
  .lb-stats,
  .orders-kpis,
  .history-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  /* JS auto-collapses on resize and writes .sb-collapsed onto .app, so let
     the existing collapsed styles do the work instead of forcing it with
     !important — that way the user's toggle still wins inside the breakpoint. */
  .app.sb-collapsed .sidebar {
    padding-left: 6px;
    padding-right: 6px;
  }
  .app.sb-collapsed .sidebar .side-label,
  .app.sb-collapsed .sidebar .count,
  .app.sb-collapsed .sidebar .side-item > :not(svg),
  .app.sb-collapsed .sidebar-status {
    display: none;
  }
  .app.sb-collapsed .side-item {
    justify-content: center;
    padding: 8px 0;
    gap: 0;
    font-size: 0;
  }
  .app.sb-collapsed .side-item svg {
    width: 15px;
    height: 15px;
  }
  .topbar .logo span {
    display: none;
  }
  /* keep .topbar-crumb visible — page name is the most important
     orientation cue when other chrome is hidden. */
  .content-grid > .col-resizer,
  .alerts-rail-wrap {
    display: none !important;
  }
  .rail-collapsed {
    display: none;
  }
  .lb-grid {
    grid-template-columns: 1fr;
  }
  .lb-list {
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 720px) {
  .topbar .pill,
  .topbar > button.btn.ghost {
    display: none;
  }
  .filterbar .floor-seg {
    width: 100%;
  }
  .filterbar .floor-seg button {
    flex: 1;
    min-width: 0;
  }
  .floor-controls .floor-stats {
    order: 4;
    min-width: 100%;
    justify-content: flex-start;
    border-left: 0;
    padding-left: 0;
  }
  .kpis.kpis-sam .kpi {
    min-width: 136px;
  }
  .demo-accounts {
    grid-template-columns: 1fr;
  }
}