/* ═══════════════════════════════════════════════════════════
   RND Tami Workflow — Design System (Blue Edition)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Blue brand */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;

  /* Sidebar (dark navy) */
  --sb-w:        256px;
  --sb-bg:       #0f1728;
  --sb-border:   rgba(255,255,255,0.06);
  --sb-text:     rgba(255,255,255,0.55);
  --sb-strong:   rgba(255,255,255,0.90);
  --sb-hover:    rgba(255,255,255,0.07);
  --sb-active:   rgba(96,165,250,0.16);
  --sb-act-txt:  #93c5fd;

  /* Surface */
  --bg:       #f0f4f8;
  --surface:  #ffffff;
  --surface2: #f7f9fc;
  --border:   #e2e8f0;

  /* Text */
  --ink:   #0f172a;
  --ink2:  #334155;
  --muted: #64748b;
  --muted2:#94a3b8;

  /* Primary (Blue) */
  --primary:       var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-light: var(--blue-50);
  --primary-ring:  rgba(59,130,246,0.18);

  /* Status — semantic colors unchanged */
  --ok:      #059669; --ok-bg:      #d1fae5;
  --warn:    #d97706; --warn-bg:    #fef3c7;
  --danger:  #dc2626; --danger-bg:  #fee2e2;
  --info:    var(--blue-600); --info-bg: var(--blue-100);

  /* Ring */
  --rc: 163.363; /* 2π × 26 */

  /* Shadows */
  --sh1: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh2: 0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --sh3: 0 8px 32px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);

  /* Radius */
  --r4: 4px; --r6: 6px; --r8: 8px; --r12: 12px; --r16: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; }
h1,h2,h3 { line-height: 1.2; font-weight: 700; }

/* ══════════════════════════════════════
   SHELL
══════════════════════════════════════ */

.shell {
  display: grid;
  grid-template-columns: var(--sb-w) 1fr;
  min-height: 100vh;
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  overflow: hidden;
  z-index: 10;
  isolation: isolate;
}

/* Brand */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-logo {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: var(--r8);
  color: #fff;
  flex-shrink: 0;
}
.sb-super {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sb-text);
}
.sb-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sb-strong);
  margin-top: 1px;
}

/* Nav */
.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sbn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r6);
  background: transparent;
  color: var(--sb-text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: background 120ms, color 120ms;
  appearance: none;
  -webkit-appearance: none;
  border: none;
}
.sbn:hover  { background: var(--sb-hover); color: var(--sb-strong); }
.sbn.active { background: var(--sb-active); color: var(--sb-act-txt); font-weight: 600; }

/* Workflow section */
.sb-workflow-only {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 8px 0;
}
.sb-workflow-only.hidden { display: none; }

.sb-ps-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 4px;
}
.sb-ps-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sb-text);
}
.sb-plus {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: var(--sb-strong);
  transition: background 120ms;
}
.sb-plus:hover { background: rgba(255,255,255,0.14); }

/* ── Sidebar custom product dropdown ──────────────────────── */
.sb-prod-drop {
  position: relative;
  width: 100%;
}

.sb-prod-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px 7px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r6);
  background: rgba(255,255,255,0.05);
  color: var(--sb-strong);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  gap: 6px;
  transition: background 120ms, border-color 120ms;
}
.sb-prod-trigger:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
}
.sb-prod-trigger-txt {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sb-strong);
}
.sb-prod-trigger svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 200ms;
}
.sb-prod-drop.open .sb-prod-trigger svg {
  transform: rotate(180deg);
}

/* Dropdown panel */
.sb-prod-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: #1a2540;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  overflow: hidden;
}
.sb-prod-panel.open {
  display: flex;
  flex-direction: column;
}

/* Search row */
.sb-prod-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sb-prod-search-wrap svg {
  flex-shrink: 0;
  opacity: 0.45;
}
.sb-prod-search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--sb-strong);
  font-size: 12px;
  padding: 0;
}
.sb-prod-search::placeholder { color: rgba(255,255,255,0.3); }

/* List */
.sb-prod-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.sb-prod-list::-webkit-scrollbar { width: 4px; }
.sb-prod-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Individual item */
.sb-prod-item {
  padding: 8px 10px;
  cursor: pointer;
  transition: background 100ms;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sb-prod-item:last-child { border-bottom: none; }
.sb-prod-item:hover { background: rgba(255,255,255,0.07); }
.sb-prod-item.active { background: rgba(96,165,250,0.15); }

.sb-pi-top {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 4px;
}
.sb-pi-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--sb-act-txt);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.sb-pi-name {
  font-size: 11px;
  color: var(--sb-strong);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-pi-done {
  font-size: 10px;
  flex-shrink: 0;
}
.sb-pi-pct {
  font-size: 10px;
  color: var(--sb-text);
  margin-bottom: 3px;
}
.sb-pi-bar {
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.sb-pi-bar-fill {
  height: 100%;
  background: var(--blue-400);
  border-radius: 99px;
  transition: width 300ms;
}

/* Empty state */
.sb-prod-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-style: italic;
}

/* Legacy select (hidden/unused) */
.sb-product-sel {
  display: none;
}

/* Stages */
.sb-stages-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 12px;
}
.sb-stages-wrap.hidden { display: none; }

.sb-section-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sb-text);
  padding: 0 4px;
  margin-bottom: 6px;
}

.stage-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.stage-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--r6);
  background: transparent;
  color: var(--sb-text);
  font-size: 11.5px;
  text-align: left;
  transition: background 100ms, color 100ms;
}
.stage-tab:hover { background: var(--sb-hover); color: var(--sb-strong); }
.stage-tab.active { background: var(--sb-active); color: var(--sb-act-txt); }
.stage-tab.st-ok   { color: rgba(52,211,153,.8); }
.stage-tab.st-wait { color: rgba(251,191,36,.85); }
.stage-tab.st-rej  { color: rgba(248,113,113,.85); }
.stage-tab.st-rev  { color: rgba(167,139,250,.85); }

.st-n {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 100ms;
}
.stage-tab.active .st-n  { background: var(--primary); color: #fff; }
.stage-tab.st-ok   .st-n { background: rgba(52,211,153,.2); color: #34d399; }
.stage-tab.st-wait .st-n { background: rgba(251,191,36,.2); color: #fbbf24; }
.stage-tab.st-rej  .st-n { background: rgba(248,113,113,.2); color: #f87171; }

.stage-tab-locked { opacity: 0.55; }
.stage-tab-locked:hover { opacity: 0.75; }
.st-lock-icon { font-size: 9px; margin-left: 3px; opacity: .7; }

.st-info { min-width: 0; flex: 1; }
.st-title {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.st-status {
  display: block;
  font-size: 10px;
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar footer */
.sb-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}
.sb-foot-row {
  display: flex;
  gap: 4px;
}
.sbf-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r6);
  background: rgba(255,255,255,0.05);
  color: var(--sb-text);
  font-size: 11px;
  font-weight: 500;
  transition: background 120ms, color 120ms;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sbf-btn input { display: none; }
.sbf-btn:hover { background: rgba(255,255,255,0.1); color: var(--sb-strong); }
.sbf-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed rgba(96,165,250,0.3);
  border-radius: var(--r6);
  background: rgba(96,165,250,0.06);
  color: var(--sb-act-txt);
  font-size: 11px;
  font-weight: 500;
  transition: background 120ms, border-color 120ms;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sbf-sample:hover { background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.5); }

/* ══════════════════════════════════════
   MAIN
══════════════════════════════════════ */

.main { min-width: 0; display: flex; flex-direction: column; }

.view {
  flex: 1;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.view.hidden { display: none; }

/* ── TOPBAR ── */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--sh1);
}
.sp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.sp-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.stat-pill.warn .sp-val { color: var(--warn); }
.stat-pill.ok   .sp-val { color: var(--ok); }

.topbar-spacer { flex: 1; }

.autosave-indicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--ok);
  opacity: 0;
  transition: opacity 200ms;
  white-space: nowrap;
}
.autosave-indicator.show { opacity: 1; }

/* ── HINT CARD (empty state) ── */
.hint-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--r8);
  color: var(--blue-700);
  font-size: 13px;
  flex-shrink: 0;
}
.hint-card svg { flex-shrink: 0; }
.hint-card.hidden { display: none; }

.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 150ms;
}
.link-btn:hover { text-decoration-color: var(--primary); }

/* ── PRODUCT IDENTITY BAR ── */
.prod-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  flex-shrink: 0;
}
.prod-bar-id {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.prod-bar-info { flex: 1; min-width: 0; }
.prod-bar-name {
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-bar-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* SVG Ring (64×64, r=26) */
.prod-bar-ring { position: relative; flex-shrink: 0; }
.ring-track { fill: none; stroke: var(--border); stroke-width: 6; }
.ring-fill  {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--rc);
  stroke-dashoffset: var(--rc);
  transform: rotate(-90deg);
  transform-origin: 32px 32px;
  transition: stroke-dashoffset 500ms cubic-bezier(.4,0,.2,1);
}
.ring-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
}
.ring-txt strong { font-size: 13px; font-weight: 800; }
.ring-txt span   { font-size: 8px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-top: 1px; }

/* ── STAGE SHELL ── */
.stage-shell { display: flex; flex-direction: column; gap: 12px; }

/* Stage header */
.stage-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  flex-wrap: wrap;
}
.stage-hd-left { display: flex; align-items: center; gap: 12px; }
.stage-badge {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.stage-hd-title { font-size: 17px; font-weight: 700; }
.stage-hd-meta  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.stage-hd-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.fill-meter { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.fill-meter-lbl { font-size: 10px; font-weight: 700; color: var(--muted); }
.fill-track { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
.fill-bar   { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--blue-400)); border-radius: 999px; transition: width 280ms ease; }

.status-wrap { display: flex; flex-direction: column; gap: 3px; }
.status-lbl  { font-size: 10px; font-weight: 700; color: var(--muted); }
.status-sel  {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  min-width: 160px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.status-sel:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }

/* Stage body — form lebar penuh (panel ringkasan dihapus) */
.stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  padding: 16px;
}

.panel-head { margin-bottom: 12px; }
.panel-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Stage form */
.stage-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }

.ff { display: flex; flex-direction: column; gap: 4px; }
.ff.wide { grid-column: 1/-1; }

.ff-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink2);
}

.ff-text, .ff-url, .ff-date, .ff-num, .ff-ta {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 120ms, box-shadow 120ms;
}
/* Select fields: strip native OS appearance to prevent white macOS overlay */
.ff-sel {
  width: 100%;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--ink);
  font-size: 13px;
  transition: border-color 120ms, box-shadow 120ms;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.ff-ta { resize: vertical; min-height: 62px; line-height: 1.5; }
.ff-text:focus,.ff-url:focus,.ff-date:focus,.ff-num:focus,.ff-ta:focus,.ff-sel:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  outline: none;
}

.curr-wrap { position: relative; display: flex; align-items: center; }
.curr-pre  { position: absolute; left: 10px; font-size: 12px; font-weight: 600; color: var(--muted); pointer-events: none; }
.curr-wrap .ff-num { padding-left: 28px; }

.form-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.form-actions-right { display: flex; gap: 6px; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 18px;
  border-radius: var(--r8);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background 130ms, transform 80ms;
  white-space: nowrap;
  border: none;
}
.btn-primary:hover  { background: var(--primary-hover); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
  transition: background 120ms;
  white-space: nowrap;
}
.btn-ghost:hover { background: var(--surface2); }

.btn-sm  { padding: 6px 12px; font-size: 12px; border-radius: var(--r6); }
.btn-xs  { padding: 4px 10px; font-size: 11px; border-radius: var(--r4); }
.btn-warn-ghost {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: #fde68a;
}
.btn-warn-ghost:hover { background: #fef3c7; }

/* ══════════════════════════════════════
   VIEW HEADER
══════════════════════════════════════ */

.view-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.view-hd h2 { font-size: 20px; }
.view-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.view-hd-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ══════════════════════════════════════
   PRODUCT LIST (not grid)
══════════════════════════════════════ */

/* Product status filter tabs */
.prod-status-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.prod-status-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
}
.prod-status-tab:hover { border-color: var(--primary); color: var(--primary); }
.prod-status-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.list-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.search-wrap svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.search-input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }

.filter-sel {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.filter-sel:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }

.product-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  overflow: hidden;
  box-shadow: var(--sh1);
}

.prod-row {
  display: grid;
  grid-template-columns: 90px 1fr 160px 120px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface);
  transition: background 120ms;
  cursor: default;
}
.prod-row:hover { background: #fafbff; }
.prod-row.is-active { background: var(--blue-50); border-left: 3px solid var(--primary); }

.prod-row-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-row-info {}
.prod-row-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-row-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.prod-row-prog { display: flex; flex-direction: column; gap: 4px; }
.prod-row-pct  { font-size: 11px; font-weight: 700; color: var(--ink2); }
.prog-bar-wrap { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.prog-bar      { height: 100%; background: linear-gradient(90deg, var(--primary), var(--blue-400)); border-radius: 999px; }

.prod-row-action { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.prod-row-action .del-btn { color: var(--danger); padding-left: 8px; padding-right: 8px; }
.prod-row-action .del-btn:hover { background: var(--danger-bg); }

/* List header row */
.prod-list-hd {
  display: grid;
  grid-template-columns: 90px 1fr 160px 120px;
  gap: 16px;
  padding: 8px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  border-radius: var(--r12) var(--r12) 0 0;
}
.prod-list-hd span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══════════════════════════════════════
   ACCESS VIEW
══════════════════════════════════════ */

.access-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.access-users,.access-modules {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  padding: 16px;
}

.section-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.user-list { display: flex; flex-direction: column; gap: 4px; }

.user-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.user-row:hover { background: var(--surface2); }
.user-row.active { border-color: var(--primary); background: var(--blue-50); }
.user-row-name { font-size: 13px; font-weight: 600; }
.user-row-meta { font-size: 11px; color: var(--muted); }

.accent-text { font-weight: 600; color: var(--ink); }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; }
.mod-group { display: flex; flex-direction: column; gap: 4px; }
.mod-group-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.mod-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--surface2);
  font-size: 12px;
  cursor: pointer;
  transition: background 100ms;
}
.mod-check:hover { background: #f1f5f9; }
.mod-check input { width: 14px; height: 14px; accent-color: var(--primary); flex-shrink: 0; }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */

.modal-bg {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  padding: 20px;
  animation: fi 150ms ease;
}
.modal-bg.hidden { display: none; }

@keyframes fi { from { opacity:0 } to { opacity:1 } }

.modal {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border-radius: var(--r16);
  box-shadow: var(--sh3);
  animation: su 200ms cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.modal.compact { max-width: 440px; }

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

.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-hd h3 { font-size: 16px; }

.modal-x {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r6);
  background: var(--surface2);
  color: var(--muted);
  font-size: 14px;
  transition: background 120ms, color 120ms;
}
.modal-x:hover { background: var(--border); color: var(--ink); }

.modal-bd { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.modal-desc { font-size: 12px; color: var(--muted); }

.compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-grid .full { grid-column: 1/-1; }

.modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}

/* Field */
.f-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.f-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 120ms, box-shadow 120ms;
  width: 100%;
}
.f-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.f-err { font-size: 11px; color: var(--danger); font-weight: 500; min-height: 14px; }
.req { color: var(--danger); }

/* Cat combo */
.cat-combo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Password */
.pw-row { display: flex; gap: 6px; }
.pw-row .f-input { flex: 1; }
.pw-eye {
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--surface2);
  color: var(--muted);
  font-size: 14px;
}
.pw-eye:hover { background: var(--border); }

/* Category import */
.cat-import-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-import-row input[type=file] { display: none; }

.cat-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: var(--surface2);
}

.cat-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.cat-tag button {
  background: none;
  color: var(--primary);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: .7;
}
.cat-tag button:hover { opacity: 1; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */

.toast-stack {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 200; pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r8);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--sh3);
  max-width: 320px;
  pointer-events: auto;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(.4,0,.2,1), opacity 200ms;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.t-ok     { background: #064e3b; }
.toast.t-warn   { background: #78350f; }
.toast.t-danger { background: #7f1d1d; }

/* ══════════════════════════════════════
   WORKSPACE
══════════════════════════════════════ */

.workspace { display: flex; flex-direction: column; gap: 12px; }
.workspace.hidden { display: none; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 1100px) {
  .stage-body { grid-template-columns: 1fr; }
  .access-layout { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  :root { --sb-w: 210px; }
  .view { padding: 14px 16px; }
  .prod-row { grid-template-columns: 80px 1fr 130px 72px; }
  .prod-list-hd { grid-template-columns: 80px 1fr 130px 72px; }
}

@media (max-width: 700px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .stage-hd { flex-direction: column; align-items: flex-start; }
  .compact-grid { grid-template-columns: 1fr; }
  .prod-row { grid-template-columns: 80px 1fr 72px; }
  .prod-list-hd { grid-template-columns: 80px 1fr 72px; }
  .prod-row-prog { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   COSTING FORM — sections, fabric table, summary panel
   ══════════════════════════════════════════════════════════════ */

/* Section wrapper — use page-bg so sections don't create white-on-white blocks */
.costing-section {
  grid-column: 1 / -1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.costing-section .ff,
.costing-section .ff.wide { width: auto; }
.costing-section-hd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--primary, #3b82f6);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

/* Per-pcs notice banner */
.costing-pcs-banner {
  grid-column: 1 / -1;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: #92400e;
  margin-bottom: 4px;
}

/* Fabric unit note */
.costing-unit-note {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}

/* Fabric row (Part 2: nama + konsumsi) */
.fabric-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fabric-row-num {
  min-width: 60px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  padding-top: 28px;
}
.fabric-row-fields {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.fabric-row-fields .ff { flex: 1; min-width: 140px; }

/* Mini Marker Link */
.mini-marker-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-marker-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2, #475569);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-marker-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mini-marker-url {
  flex: 1;
  min-width: 220px;
}
.mini-marker-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--primary-light, #eff6ff);
  color: var(--primary, #2563eb);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.mini-marker-preview:hover { background: #dbeafe; }
.mini-marker-preview.hidden { display: none; }

/* Fabric price table (Part 3) */
.fabric-price-table {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
}
.fpt-head, .fpt-row {
  display: grid;
  grid-template-columns: 36px 1fr 90px 1fr 100px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.fpt-head {
  background: var(--primary-light, #eff6ff);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--primary, #3b82f6);
}
.fpt-row {
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 13px;
}
.fpt-row:nth-child(even) { background: var(--bg, #f8fafc); }
.fpt-num   { font-weight: 700; color: var(--muted, #94a3b8); text-align: center; }
.fpt-nama  { font-weight: 500; color: var(--text, #1e293b); }
.fpt-kons  { color: var(--muted, #64748b); font-size: 12px; }
/* Harga/kg cell inside fabric table — hide label TEXT but keep the input visible */
.fpt-harga-wrap { margin: 0; }
.fpt-harga-wrap .ff { margin: 0; }
.fpt-harga-wrap .ff-lbl { margin-bottom: 0; }
.fpt-harga-wrap .ff-lbl > span { display: none; }   /* hide only text spans, NOT curr-wrap */
.fpt-subtotal { font-weight: 600; color: var(--primary, #3b82f6); text-align: right; font-size: 13px; }

/* Cost Summary Panel */
.cost-summary-panel {
  grid-column: 1 / -1;
  border: 1.5px solid var(--primary, #3b82f6);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #fff);
  font-size: 13px;
}
.cs-title {
  background: var(--primary, #3b82f6);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .4px;
  padding: 8px 16px;
}
.cs-group {
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.cs-group-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted, #94a3b8);
  margin-bottom: 6px;
}
.cs-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  color: var(--text-dim, #475569);
  font-size: 12.5px;
}
.cs-row.cs-empty { color: var(--muted, #94a3b8); font-style: italic; font-size: 11.5px; }
.cs-row.cs-sub {
  font-weight: 600;
  color: var(--text, #1e293b);
  border-top: 1px dashed var(--border, #e2e8f0);
  margin-top: 4px;
  padding-top: 6px;
}
.cs-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--primary-light, #eff6ff);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary, #3b82f6);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.cs-margin {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-dim, #475569);
}
.cs-margin-result {
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
}
.cs-margin-result.margin-ok   { color: #16a34a; background: #f0fdf4; }
.cs-margin-result.margin-warn { color: #d97706; background: #fffbeb; }
.cs-margin-result.margin-bad  { color: #dc2626; background: #fef2f2; }

/* Decimal input styling */
.ff-decimal { text-align: right; font-feature-settings: "tnum"; }

/* ── SMART CURRENCY INPUT ── */
.smart-curr-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #fff);
  transition: border-color .15s, box-shadow .15s;
}
.smart-curr-wrap:focus-within {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.smart-curr-wrap .curr-pre {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  background: var(--bg, #f8fafc);
  border-right: 1px solid var(--border, #e2e8f0);
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  min-height: 36px;
}
.smart-curr-input {
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #1e293b);
  width: 100%;
  text-align: right;
  font-feature-settings: "tnum";
  letter-spacing: .3px;
}
.smart-curr-input::placeholder { color: var(--muted, #cbd5e1); font-weight: 400; }

/* Smart currency inside fabric table cell */
.fpt-harga-wrap { width: 100%; }
.fpt-harga-wrap .smart-curr-wrap { border-radius: 6px; }
.fpt-harga-wrap .smart-curr-input { font-size: 13px; padding: 6px 8px; }

/* Smart currency inside costing fixed grid */
.costing-fixed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.costing-fixed-grid .ff { margin: 0; }

/* ── DYNAMIC OTHER COSTS ── */
.oc-section-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted, #94a3b8);
  margin-top: 4px;
}
.oc-container { display: flex; flex-direction: column; gap: 0; }
.oc-header {
  display: grid;
  grid-template-columns: 1fr 160px 28px;
  gap: 6px;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted, #94a3b8);
}
.oc-row {
  display: grid;
  grid-template-columns: 1fr 160px 28px;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.oc-nama {
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text, #1e293b);
  background: var(--surface, #fff);
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.oc-nama:focus {
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.oc-nilai { width: 100%; }
.oc-nilai .smart-curr-wrap { border-radius: 7px; }
.oc-nilai .smart-curr-input { font-size: 13px; padding: 7px 8px; }
.oc-remove {
  background: none;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 6px;
  width: 28px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  line-height: 1;
}
.oc-remove:hover { border-color: #dc2626; color: #dc2626; }
.oc-add-btn {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #3b82f6);
  border-color: var(--primary-light, #bfdbfe);
}
.oc-add-btn:hover { background: var(--primary-light, #eff6ff); }

/* ── COSTING PART HINT (in stage tab) ── */
.st-part-hint {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--sb-act-txt, #93c5fd);
  opacity: .8;
  letter-spacing: .2px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── OPTIONAL TAG ── */
.optional-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--blue-100, #dbeafe);
  color: var(--blue-600, #2563eb);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3px;
  vertical-align: middle;
}

/* ── LOOKUP BADGE ── */
.lookup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--blue-50, #eff6ff);
  border: 1px solid var(--blue-200, #bfdbfe);
  color: var(--blue-700, #1d4ed8);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.lookup-override {
  background: none;
  border: none;
  color: var(--blue-500, #3b82f6);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.lookup-override:hover { color: var(--blue-700, #1d4ed8); }

/* ── PHOTO UPLOAD FIELD ── */
.photo-upload-wrap {
  margin-top: 4px;
}
.photo-file-input { display: none; }
.photo-preview {
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 2px dashed var(--border, #e2e8f0);
  transition: border-color .2s, background .2s;
}
.photo-preview:hover {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #eff6ff);
}
.photo-preview img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #f8fafc;
}
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  color: var(--muted, #94a3b8);
}
.photo-placeholder span:first-child { font-size: 28px; }
.photo-placeholder span:last-child  { font-size: 12px; }
.photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,.55);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.photo-remove:hover { background: rgba(220,38,38,.85); }

/* ── DISABLED APPROVE BUTTON ── */
.btn-primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════
   FEATURE 1: LOGIN OVERLAY
══════════════════════════════════════ */

.login-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 18% -8%, #1a2a4e 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 105% 108%, #131f3b 0%, transparent 60%),
    #0d1524;
  z-index: 9999;
  padding: 20px;
  overflow: hidden;
}
.login-overlay.hidden { display: none; }

/* Orb ambient — warna diambil dari titik-titik logo TAMI (pink/hijau/kuning/biru).
   Blur besar + drift sangat lambat: hidup tapi tidak mengganggu. */
.login-orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  animation: orbDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.orb-blue   { width: 360px; height: 360px; background: #2b7fd4; top: -110px; left: -90px;  opacity: .38; }
.orb-pink   { width: 280px; height: 280px; background: #f2a0a8; bottom: -80px; right: 4%;  opacity: .26; animation-delay: -5s; }
.orb-green  { width: 210px; height: 210px; background: #4e9349; top: 10%; right: -70px;    opacity: .24; animation-delay: -9s; }
.orb-yellow { width: 180px; height: 180px; background: #f8d354; bottom: 10%; left: 6%;     opacity: .20; animation-delay: -13s; }
@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(34px, -26px, 0) scale(1.08); }
}

.login-card {
  position: relative;
  width: 100%; max-width: 392px;
  background: rgba(22, 32, 58, 0.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 38px 34px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  animation: loginRise 420ms cubic-bezier(.22,.9,.3,1) both;
}
@keyframes loginRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .login-card { animation: none; }
}

/* Logo wordmark transparan langsung di kartu — jadi hero, dengan halo lembut
   di belakangnya supaya biru logo terangkat dari navy gelap */
.login-logo {
  position: relative;
  display: grid; place-items: center;
  padding: 10px 0 2px;
}
.login-logo::before {
  content: '';
  position: absolute;
  width: 260px; height: 130px;
  background: radial-gradient(closest-side, rgba(140,185,255,0.16), transparent 72%);
  filter: blur(12px);
}
.login-logo img {
  position: relative;
  width: 210px; height: auto; display: block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.5));
}

.login-brand { text-align: center; }
.login-title {
  font-family: 'Baloo 2', Inter, sans-serif;   /* rounded — menggemakan bentuk logo */
  font-size: 21px; font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  margin-top: 3px;
  line-height: 1.15;
  white-space: nowrap;
}
@media (max-width: 420px) { .login-title { font-size: 18px; } }
.login-sub { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-top: 5px; }

.login-form { width: 100%; display: flex; flex-direction: column; gap: 13px; }
.login-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); }
.login-input {
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  transition: border-color 130ms, box-shadow 130ms, background 130ms;
}
.login-input:focus {
  outline: none;
  border-color: #4a90e2;
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.28);
}
.login-input::placeholder { color: rgba(255,255,255,0.25); }
.login-error {
  padding: 8px 12px;
  background: rgba(220,38,38,0.15);
  border: 1px solid rgba(220,38,38,0.4);
  border-radius: var(--r6);
  color: #fca5a5;
  font-size: 12px;
  font-weight: 500;
}
.login-error.hidden { display: none; }
.login-btn {
  margin-top: 5px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #3b82f6, #2e6cd8);
  border: none; border-radius: 12px;
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(46,108,216,0.38);
  transition: transform 130ms, box-shadow 130ms, filter 130ms;
}
.login-btn:hover  { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(46,108,216,0.45); }
.login-btn:active { transform: translateY(0); filter: brightness(.98); }
.login-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sidebar logout & hamburger */
.sb-logout {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r6);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--sb-text);
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
}
.sb-logout:hover { background: rgba(220,38,38,0.2); color: #fca5a5; }
.sb-hamburger {
  display: none; /* hidden on desktop, shown on mobile */
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r6);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--sb-text);
  transition: background 120ms;
  flex-shrink: 0;
}
.sb-hamburger:hover { background: rgba(255,255,255,0.14); color: var(--sb-strong); }

/* Topbar hamburger open button */
.topbar-hamburger {
  display: none; /* hidden on desktop, shown on mobile */
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r8);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
  flex-shrink: 0;
  transition: background 120ms;
}
.topbar-hamburger:hover { background: var(--surface2); }

/* Mobile sidebar backdrop */
.sb-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}
.sb-backdrop.visible { display: block; }

/* ══════════════════════════════════════
   FEATURE 2: AUDIT LOG
══════════════════════════════════════ */

.audit-details {
  grid-column: 1/-1;
  margin-top: 8px;
}
.audit-details summary {
  font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; cursor: pointer;
  padding: 6px 0; user-select: none;
}
.audit-details summary:hover { color: var(--ink2); }
.audit-timeline {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  max-height: 260px; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.audit-entry {
  display: flex; gap: 10px;
  font-size: 11px; color: var(--ink2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface2);
}
.audit-entry:last-child { border-bottom: none; }
.audit-time {
  color: var(--muted); white-space: nowrap; min-width: 80px; flex-shrink: 0;
  font-size: 10px; padding-top: 1px;
}
.audit-action-badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: var(--primary-light); color: var(--primary);
  white-space: nowrap; flex-shrink: 0;
}
.audit-action-badge.act-status  { background: var(--warn-bg);   color: var(--warn); }
.audit-action-badge.act-approve { background: var(--ok-bg);     color: var(--ok); }
.audit-action-badge.act-reject  { background: var(--danger-bg); color: var(--danger); }
.audit-action-badge.act-reset   { background: #fee2e2;          color: #dc2626; }
.audit-action-badge.act-save    { background: #eff6ff;          color: #3b82f6; }
.audit-user       { font-weight: 600; color: var(--ink); }
.audit-detail-txt { color: var(--muted); font-size: 10px; margin-top: 2px; }
.audit-empty      { font-size: 11px; color: var(--muted); font-style: italic; padding: 8px 0; }

/* Timestamp chips — submittedAt / approvedAt */
.audit-ts-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 6px;
}
.audit-ts-chip {
  font-size: 10px; padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.audit-ts-chip.submit  { background: #eff6ff; color: #1d4ed8; }
.audit-ts-chip.approve { background: var(--ok-bg); color: var(--ok); }

/* Stage access blocked */
.stage-access-blocked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 24px; text-align: center; color: var(--ink2);
}
.stage-access-blocked .sab-icon { font-size: 40px; }
.stage-access-blocked p { margin: 0; font-size: 14px; }
.stage-access-blocked .sab-hint { font-size: 12px; color: var(--muted); }

/* No-access message in sidebar stage list */
.stage-no-access {
  font-size: 11px; color: var(--muted); font-style: italic;
  padding: 12px 8px; text-align: center;
}

/* ══════════════════════════════════════
   FEATURE 3: VALIDATION MODAL
══════════════════════════════════════ */

.validation-list {
  list-style: none; display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.validation-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--danger-bg);
  border-radius: var(--r6);
  font-size: 12px; font-weight: 500;
  color: var(--danger);
}
.validation-list li::before { content: '✕'; font-weight: 800; }

/* ══════════════════════════════════════
   FEATURE 4: NOTIFICATIONS
══════════════════════════════════════ */

.notif-wrap { position: relative; }
.notif-bell {
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r8);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 16px;
  cursor: pointer;
  transition: background 120ms;
  color: var(--ink);
}
.notif-bell:hover { background: var(--surface2); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 999px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
  pointer-events: none;
}
.notif-badge.hidden { display: none; }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh3);
  z-index: 200;
  overflow: hidden;
  animation: su 150ms cubic-bezier(.4,0,.2,1);
}
.notif-panel.hidden { display: none; }
.notif-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.notif-panel-title { font-size: 13px; font-weight: 700; }
.notif-mark-all {
  font-size: 11px; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.notif-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface2);
  transition: background 100ms;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--blue-50); }
.notif-item-msg { font-size: 12px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.notif-item-meta { font-size: 10px; color: var(--muted); }
.notif-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--muted); }

/* ══════════════════════════════════════
   FEATURE 5: PRINT REPORT
══════════════════════════════════════ */

@media print {
  .sidebar, .topbar, .prod-bar-ring, .form-actions,
  .notif-wrap, #btnPrintReport, .sb-backdrop,
  .modal-bg, .toast-stack, .login-overlay {
    display: none !important;
  }
  .shell { grid-template-columns: 1fr !important; }
  .main { width: 100% !important; }
  .view { padding: 10px !important; }
  .stage-body { grid-template-columns: 1fr !important; }
  .panel { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ══════════════════════════════════════
   FEATURE 6: MOBILE RESPONSIVE
══════════════════════════════════════ */

@media (max-width: 768px) {
  /* Sidebar becomes fixed overlay */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: var(--sb-w);
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(.4,0,.2,1);
    z-index: 100;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  /* Shell: single column */
  .shell {
    grid-template-columns: 1fr;
  }
  /* Main takes full width */
  .main {
    width: 100%;
  }
  /* Show hamburger buttons */
  .sb-hamburger { display: grid; }
  .topbar-hamburger { display: flex; }
  /* Stage body: vertical stack */
  .stage-body { grid-template-columns: 1fr; }
  /* Topbar pills wrap */
  .topbar { flex-wrap: wrap; gap: 6px; }
  .stat-pill { padding: 6px 10px; }
  .sp-val { font-size: 13px; }
  /* Prod bar wraps */
  .prod-bar { flex-wrap: wrap; }
  /* Notification panel: full width on small screens */
  .notif-panel { width: 280px; right: -60px; }
  /* Access layout: single column */
  .access-layout { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   FEATURE 7: DASHBOARD
══════════════════════════════════════ */

.dashboard-content {
  display: flex; flex-direction: column; gap: 18px;
}
.dash-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  padding: 18px 20px;
}
.dash-section-title {
  font-size: 13px; font-weight: 700;
  color: var(--ink2); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.dash-section-title::before {
  content: '';
  display: block;
  width: 3px; height: 16px;
  background: var(--primary);
  border-radius: 2px;
}

/* Status distribution pills */
.dash-status-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.dash-status-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.dash-status-pill .ds-count { font-size: 20px; font-weight: 800; }
.dsp-approved { background: var(--ok-bg); color: var(--ok); }
.dsp-waiting  { background: var(--warn-bg); color: var(--warn); }
.dsp-progress { background: var(--info-bg); color: var(--info); }
.dsp-notstart { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.dsp-rejected { background: var(--danger-bg); color: var(--danger); }

/* Bar charts */
.dash-bar-chart { display: flex; flex-direction: column; gap: 10px; }
.dash-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 50px;
  align-items: center; gap: 10px;
}
.dash-bar-lbl {
  font-size: 11px; font-weight: 600; color: var(--ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-bar-track {
  height: 10px; background: var(--border);
  border-radius: 999px; overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--blue-400));
  border-radius: 999px;
  transition: width 500ms cubic-bezier(.4,0,.2,1);
}
.dash-bar-fill.bottleneck-bar { background: linear-gradient(90deg, var(--warn), #f59e0b); }
.dash-bar-val {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-align: right;
}

/* Recent activity table */
.dash-activity-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.dash-activity-table th {
  text-align: left; padding: 6px 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.dash-activity-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface2);
  color: var(--ink2);
  vertical-align: top;
}
.dash-activity-table tr:last-child td { border-bottom: none; }
.dash-activity-table tr:hover td { background: var(--surface2); }
.dat-action { font-weight: 600; color: var(--primary); }
.dat-time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.dash-empty { text-align: center; padding: 24px; color: var(--muted); font-size: 13px; }

.dash-section-sub { font-weight: 600; color: var(--muted2); font-size: 11px; margin-left: 6px; }

/* ── KPI strip ── */
.dash-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r12); box-shadow: var(--sh1);
  padding: 16px 18px; position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--blue-400);
}
.kpi-card.kpi-warn::before { background: var(--warn); }
.kpi-card.kpi-ok::before   { background: var(--ok); }
.kpi-num { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.kpi-unit { font-size: 14px; font-weight: 700; color: var(--muted); }
.kpi-warn .kpi-num { color: var(--warn); }
.kpi-ok .kpi-num   { color: var(--ok); }
.kpi-lbl { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 6px; }

/* ── Signature: production-line strip ── */
.pipe-strip {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
}
.pipe-station {
  position: relative; text-align: center;
  padding: 12px 4px 10px; border-radius: var(--r10, 10px);
  background: var(--surface2); border: 1px solid var(--border);
}
.pipe-station::after {
  content: ''; position: absolute; right: -6px; top: 28px; width: 6px; height: 2px;
  background: var(--border);
}
.pipe-station:last-child::after { display: none; }
.pipe-num {
  width: 22px; height: 22px; margin: 0 auto 6px; border-radius: 999px;
  background: var(--blue-100); color: var(--blue-700);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.pipe-count { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.pipe-label { font-size: 9.5px; font-weight: 600; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-station.has-at  { background: var(--blue-50); border-color: var(--blue-200); }
.pipe-station.has-at .pipe-num { background: var(--blue-500); color: #fff; }
.pipe-station.has-wait { background: var(--warn-bg); border-color: #fcd34d; }
.pipe-station.has-wait .pipe-num { background: var(--warn); color: #fff; }
.pipe-badge {
  position: absolute; top: -7px; right: -3px;
  background: var(--warn); color: #fff; font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

/* ── Split row: action list + donut ── */
.dash-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r10, 10px);
  background: var(--surface2); border: 1px solid var(--border); cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.action-item:hover { background: var(--warn-bg); border-color: #fcd34d; transform: translateX(2px); }
.action-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--warn); flex: none; }
.action-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.action-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-stage { font-size: 11px; color: var(--muted); }
.action-age { font-size: 11px; font-weight: 700; color: var(--warn); white-space: nowrap; flex: none; }

.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut {
  width: 120px; height: 120px; border-radius: 999px; flex: none; position: relative;
}
.donut-hole {
  position: absolute; inset: 22px; background: var(--surface); border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-pct { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.donut-sub { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink2); }
.donut-legend div { display: flex; align-items: center; gap: 7px; }
.donut-legend b { margin-left: auto; font-weight: 700; }
.lg-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* ── Clickable progress rows ── */
.prow {
  grid-template-columns: 150px 1fr auto 46px;
  background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  font: inherit; text-align: left; transition: background 120ms;
}
.prow:hover { background: var(--surface2); }
.prow-stage { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; text-align: right; }
.dash-bar-fill.pf-done { background: linear-gradient(90deg, var(--ok), #34d399); }

@media (max-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-split { grid-template-columns: 1fr; }
  .pipe-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76px; overflow-x: auto; padding-bottom: 6px; }
  .prow { grid-template-columns: 110px 1fr 40px; }
  .prow-stage { display: none; }
}

/* ── Leadtime Report Section ── */
.dash-leadtime-section { margin-top: 4px; }
.lt-sel-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.lt-product-sel { flex: 1; min-width: 200px; max-width: 380px; }
.lt-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.lt-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
}
.lt-table td {
  padding: 9px 10px; border-bottom: 1px solid var(--surface2);
  color: var(--ink2); vertical-align: middle;
}
.lt-table tr:hover td { background: var(--surface2); }
.lt-num   { text-align: center; font-weight: 700; color: var(--muted); width: 36px; }
.lt-title { font-weight: 600; color: var(--ink); }
.lt-date  { white-space: nowrap; font-size: 11px; }
.lt-dur   { text-align: center; font-weight: 600; color: var(--primary); width: 90px; }
.lt-dur.total { color: var(--ink); font-size: 14px; }
.lt-dur-ongoing { color: var(--muted); font-weight: 500; font-style: italic; }
.lt-total-row td { background: var(--primary-light); font-weight: 700; }
.lt-sts-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.lt-sts-approved { background: var(--ok-bg);      color: var(--ok); }
.lt-sts-waiting  { background: var(--warn-bg);    color: var(--warn); }
.lt-sts-progress { background: #eff6ff;            color: #2563eb; }
.lt-sts-rejected { background: var(--danger-bg);  color: var(--danger); }
.lt-sts-not      { background: var(--surface2);   color: var(--muted); }
.lt-banner {
  margin-top: 14px; padding: 12px 16px;
  background: var(--primary-light); border-radius: 8px;
  font-size: 13px; color: var(--primary);
}
.lt-days { font-size: 18px; font-weight: 800; color: var(--primary); }

/* ══════════════════════════════════════
   FEATURE 8: RESET STEP BUTTON
══════════════════════════════════════ */

.btn-reset-step {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--danger-bg);
  border-radius: var(--r6);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
.btn-reset-step:hover {
  background: #fca5a5;
  border-color: var(--danger);
}

.btn-edit-step {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-edit-step:hover { background: #dbeafe; border-color: #93c5fd; }

/* Field terkunci (read-only setelah submit) — beri kesan non-aktif yang jelas. */
#stageForm input:disabled,
#stageForm select:disabled,
#stageForm textarea:disabled {
  background: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   MODEL SYSTEM — cards, tabs, photos, visual
   ══════════════════════════════════════════════════════════════ */

/* Model Card */
.model-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  overflow: hidden;
  margin-bottom: 4px;
}

/* Model Card Header */
.model-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--primary-light);
  border-bottom: 1px solid var(--blue-200);
}
.model-card-header--view {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.model-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.model-name-input {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border: 1.5px solid var(--blue-200);
  border-radius: var(--r6);
  background: #fff;
  color: var(--ink);
}
.model-name-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  outline: none;
}
.model-delete-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border: 1px solid #fca5a5;
  border-radius: var(--r6);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
.model-delete-btn:hover {
  background: #fca5a5;
  border-color: var(--danger);
}

/* Model fields grid inside card */
.model-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 16px;
}

/* Photo section inside model card */
.model-photo-section {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.model-photo-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

/* Photo upload area */
.model-photo-upload {
  display: inline-block;
}
.model-photo-thumb-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
}
.model-photo-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--r8);
  border: 2px solid var(--border);
  display: block;
  transition: border-color .15s;
}
.model-photo-thumb:hover {
  border-color: var(--primary);
}
.model-photo-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  background: rgba(220,38,38,.85);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.model-photo-remove:hover { background: #dc2626; }
.model-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border);
  border-radius: var(--r8);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.model-photo-placeholder:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.model-photo-placeholder span { font-size: 22px; }
.model-photo-placeholder small { font-size: 10px; text-align: center; line-height: 1.3; }

/* Add model button */
.model-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 2px dashed var(--primary);
  border-radius: var(--r8);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms, border-color 130ms;
  margin-top: 4px;
  margin-bottom: 4px;
  width: 100%;
  justify-content: center;
}
.model-add-btn:hover {
  background: var(--blue-100);
  border-color: var(--primary-hover);
}

/* Empty model message */
.model-empty-msg {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: var(--r8);
}

/* Model badge */
.model-badge-approved {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Decision badge per model in Design Visual */
.model-dec-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  flex-shrink: 0; white-space: nowrap;
}
.model-dec-lanjut  { background: var(--ok-bg);      color: var(--ok); }
.model-dec-stop    { background: var(--danger-bg);  color: var(--danger); }
.model-dec-revisi  { background: var(--warn-bg);    color: var(--warn); }
.model-dec-none    { background: var(--surface2);   color: var(--muted); }

/* Model tabs (for costing selector) */
.model-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.model-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r6);
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.model-tab:hover {
  background: var(--surface2);
  border-color: var(--primary);
  color: var(--primary);
}
.model-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}

/* Model selector section */
.model-selector-section {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

/* Visual card — photos + fields */
.model-visual-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r12);
  box-shadow: var(--sh1);
  overflow: hidden;
  margin-bottom: 4px;
}

/* Photos row: side by side */
.model-photos-row {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.model-photos-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 90px;
}
.model-photos-col-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.model-photo-placeholder-sm {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: var(--r8);
  color: var(--muted2);
  font-size: 10px;
  text-align: center;
  padding: 4px;
}

/* Responsive: model fields grid */
@media (max-width: 700px) {
  .model-fields-grid { grid-template-columns: 1fr; }
  .model-photos-row { flex-direction: column; }
}

/* ═══════════════ FEATURE 9: AUTO-BACKUP (badge + restore points) ═══════════════ */
.backup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.backup-badge.fresh { color: var(--ok);   background: var(--ok-bg);   border-color: transparent; }
.backup-badge.stale { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.backup-badge:hover { filter: brightness(0.97); }
.backup-badge.hidden { display: none; }   /* badge backup hanya untuk superadmin */
.sb-foot-row.hidden  { display: none; }   /* Export/Import juga hanya superadmin */

.sbf-restore { width: 100%; margin-top: 8px; flex: none; }

.restore-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  margin-top: 12px;
}
.restore-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r8, 8px);
  background: var(--surface2);
}
.restore-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.restore-when { font-size: 13px; font-weight: 600; color: var(--text, #0f172a); }
.restore-rel  { font-weight: 500; color: var(--muted2); }
.restore-meta { font-size: 11px; color: var(--muted); }
.restore-btn  { flex: none; }
.restore-empty { font-size: 12px; color: var(--muted); padding: 16px 4px; }
/* Feature 10: connection badge */
.conn-badge { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1; white-space:nowrap; }
.conn-badge.online  { color:var(--ok);   background:var(--ok-bg); }
.conn-badge.offline { color:var(--warn); background:var(--warn-bg); }
.conn-badge.loading { color:var(--info); background:var(--info-bg); }

/* Loading state tombol async: anti double-submit + spinner kecil di kanan label */
.btn-busy { pointer-events: none; opacity: .75; }
.btn-busy::after {
  content: ''; display: inline-block; width: 11px; height: 11px;
  margin-left: 7px; vertical-align: -1px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btnspin .7s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Feature 10: hide connection badge & migrate button when carrying .hidden
   (app uses element-scoped .hidden rules; these two need their own) */
.conn-badge.hidden  { display: none; }
.sbf-migrate.hidden { display: none; }

/* Feature: aksi user (ganti password / hapus) di panel Hak Akses */
.access-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Feature: sembunyikan menu nav yang tak diizinkan (app pakai .hidden per-elemen) */
.sbn.hidden { display: none; }

/* Access gating: footer data actions hidden for non-superadmin (element-scoped .hidden) */
.sb-foot-row.hidden,
.sbf-restore.hidden,
.sbf-sample.hidden,
#emptySampleHint.hidden { display: none; }