/* ============================================================
   STOCK CRAFT — เช็คสต็อก (ported sub-tab in fn1)
   ⚠️ ทุก rule scope ใต้ .sc-root + class/id เป็น sc-* เพื่อ "ไม่รั่ว"
   ไปชนกับ design system ของ dashboard (button/table/.card/.pill ฯลฯ)
   สี: ใช้ตัวแปร dashboard (--s1/--line/--ink...) + status (ok/warn/bad)
   ============================================================ */
.sc-root {
  --sc-ok:#2dd4a4; --sc-warn:#f5b549; --sc-bad:#ef4d6a;
  font: 14px/1.5 var(--sans, "IBM Plex Sans Thai", sans-serif);
  color: var(--ink);
}
.sc-root .sc-h2 { font-size:15px; margin:16px 0 8px; color:var(--amber); letter-spacing:.3px; font-weight:600; }
.sc-root .sc-h3 { font-size:13px; margin:10px 0 6px; color:var(--ink-mute); font-weight:600; }
.sc-root .sc-sub { color:var(--ink-mute); margin:0 0 14px; font-size:12px; }

.sc-root .sc-grid { display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:720px) { .sc-root .sc-grid { grid-template-columns:1fr; } }

.sc-root .sc-card {
  background:var(--s1, #201c18); border:1px solid var(--line);
  border-radius:10px; padding:12px;
}
.sc-root label { display:block; font-size:12px; color:var(--ink-mute); margin-bottom:5px; font-weight:600; }
.sc-root input[type=text], .sc-root textarea {
  width:100%; box-sizing:border-box; background:var(--bg, #12100e);
  border:1px solid var(--line); color:var(--ink);
  padding:9px 10px; border-radius:7px;
  font:13px/1.45 var(--mono, ui-monospace, Menlo, Consolas, monospace); resize:vertical;
}
.sc-root textarea { min-height:140px; }
.sc-root input[type=text]:focus, .sc-root textarea:focus {
  outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-glow);
}

.sc-root .sc-row { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.sc-root button {
  background:var(--amber); color:#1a1200; border:0; padding:12px 18px; border-radius:8px;
  font-weight:700; cursor:pointer; font-size:15px; min-height:44px; -webkit-tap-highlight-color:transparent;
}
.sc-root button:hover { background:var(--amber-hi, #fdd76a); }
.sc-root button.sc-ghost { background:transparent; color:var(--ink-mute); border:1px solid var(--line); font-weight:500; }
.sc-root button.sc-ghost:hover { color:var(--ink); border-color:var(--amber); }
.sc-root button.sc-pillbtn { padding:8px 12px; font-size:13px; min-height:36px; }
.sc-root button:disabled { opacity:.5; cursor:not-allowed; }

.sc-root .sc-pill { display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:600; background:var(--s2, #2a2520); color:var(--ink-mute); }
.sc-root .sc-pill.sc-ok   { background:rgba(45,212,164,.16); color:var(--sc-ok); }
.sc-root .sc-pill.sc-warn { background:rgba(245,181,73,.16); color:var(--sc-warn); }
.sc-root .sc-pill.sc-bad  { background:rgba(239,77,106,.16); color:var(--sc-bad); }

.sc-root .sc-table { width:100%; border-collapse:collapse; font-size:13px; }
.sc-root .sc-table th, .sc-root .sc-table td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.sc-root .sc-table th { color:var(--ink-mute); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.sc-root .sc-table td.sc-num { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
.sc-root .sc-table tr.sc-lo td.sc-num { color:var(--sc-bad); }
.sc-root .sc-table tr.sc-zero { opacity:.7; }
.sc-root .sc-table tr.sc-zero td.sc-num { color:var(--sc-bad); }
.sc-root .sc-table tr.sc-unmatched td.sc-match { color:var(--sc-warn); font-style:italic; }

.sc-root .sc-tierbar { display:flex; gap:8px; flex-wrap:wrap; }
.sc-root .sc-tierbox { background:var(--bg, #12100e); border:1px solid var(--line); border-radius:8px; padding:8px 12px; min-width:140px; flex:1; }
.sc-root .sc-tierbox b { display:block; font-size:20px; color:var(--amber); font-variant-numeric:tabular-nums; }
.sc-root .sc-tierbox span { font-size:11px; color:var(--ink-mute); }

.sc-root .sc-err { color:var(--sc-bad); padding:8px 10px; background:rgba(239,77,106,.1); border:1px solid rgba(239,77,106,.3); border-radius:7px; margin-top:8px; font-size:13px; }
.sc-root .sc-okmsg { color:var(--sc-ok); padding:8px 10px; background:rgba(45,212,164,.1); border:1px solid rgba(45,212,164,.3); border-radius:7px; margin-top:8px; font-size:13px; }
.sc-root .sc-muted { color:var(--ink-mute); }
.sc-root .sc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.sc-root .sc-head-meta { font-size:12px; color:var(--ink-mute); }
.sc-root .sc-legend { font-size:11px; color:var(--ink-mute); margin-top:4px; }

/* sub-tab toggle (สั่งของ / เช็คสต็อก) ในแท็บ fn1 */
.fn1-subtabs { display:flex; gap:8px; margin-bottom:14px; }
.fn1-subtab {
  display:flex; align-items:center; gap:6px; padding:8px 16px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; background:transparent;
  color:var(--ink-mute); font:600 13px/1 var(--sans, "IBM Plex Sans Thai", sans-serif);
  transition:color .15s, border-color .15s, background .15s;
}
.fn1-subtab:hover { color:var(--ink); }
.fn1-subtab.active { color:#1a1200; background:var(--amber); border-color:var(--amber); }