/* ============================================================================
   QC Dashboard — Design System layer
   Built ON TOP of the canonical MKS Jewelry Design System tokens
   (Claude Design project "MKS Jewelry Design System", vendored in css/tokens/).

   The DS base.css is tuned for the marketing website (body 18px, h1 60px); a
   data dashboard needs the same brand language at higher density, so we import
   the TOKENS only and define dashboard-scale base + components here.
   ============================================================================ */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");

:root {
  /* ── Dashboard semantic aliases mapped onto MKS DS tokens ── */
  --brand:        var(--mks-orange);
  --brand-hover:  var(--mks-orange-hover);
  --brand-active: var(--mks-orange-press);
  --brand-soft:   var(--mks-light-orange);
  --brand-tint:   var(--mks-orange-soft);
  --brand-ring:   rgba(223, 111, 39, 0.32);

  --ash:          var(--mks-ash-grey);
  --blue-grey:    var(--mks-blue-grey);
  --light-grey:   var(--mks-light-grey);
  --fade-blue:    var(--mks-fade-blue);
  --light-blue:   var(--mks-light-blue);

  --bg-base:      var(--surface-page);   /* warm paper #F7F6F4 */
  --bg-surface:   var(--surface-card);   /* white */
  --bg-subtle:    var(--mks-mist);       /* #EFEEEC panel fill */
  --bg-hover:     #faf9f7;               /* faint warm row hover */
  --bg-header:    #23262c;               /* cooled graphite (DS surface-dark #30302F reads brown beside orange) */

  --text-primary:      var(--text-strong);
  --text-secondary:    var(--text-body);
  /* --text-muted comes from tokens/colors.css (#78746D) */
  --text-on-brand:     #ffffff;
  --text-on-dark:      rgba(255, 255, 255, 0.92);
  --text-on-dark-dim:  rgba(255, 255, 255, 0.55);

  --border:    var(--border-subtle);     /* #E2E1DE hairline */
  --border-2:  #ECEBE8;

  /* Status (semantic, harmonized with the warm palette) */
  --color-success: #18794e; --color-success-bg: #ecf6f0;
  --color-warning: #b54708; --color-warning-bg: #fdf3e7;
  --color-error:   #d92d20; --color-error-bg:   #fdecea;
  --color-info:    #3b6ea5; --color-info-bg:    #eaf1f8;

  /* Compact px spacing for dense components (DS --space-N rem scale also available) */
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px;

  --shadow-pop: var(--shadow-lg);

  /* Fonts: Calibri body / Segoe UI display per the DS; numerics use display */
  --font-sans: var(--font-body);
  --font-num:  var(--font-display);
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* ── Dashboard type scale (compact; the DS tokens/typography.css scale is website-scale 11→80px).
     The inline font-size sprawl in js/app.js snaps onto these — see frontend-design-system.md §3. ── */
  --fs-micro:   0.66rem;  /* uppercase micro-labels: kpi-label, table th, tab-group, eyebrows */
  --fs-caption: 0.72rem;  /* captions, notes, .kpi-sub, secondary text */
  --fs-sm:      0.78rem;  /* table cells, body small, most labels */
  --fs-base:    0.82rem;  /* default body / emphasised cells */
  --fs-h2:      0.9rem;   /* card titles */
  --fs-num:     1.1rem;   /* sub-KPI numbers (repair-cycle mini-stats) */
  --fs-display: 1.6rem;   /* secondary KPI numbers (casting cards) */
  --fs-kpi:     1.95rem;  /* .kpi-value primary KPI numbers */

  /* Motion (DS durations + easings) */
  --t-fast: var(--dur-fast) var(--ease-standard);
  --t-med:  var(--dur-normal) var(--ease-out);
  --t-slow: var(--dur-slow) var(--ease-out);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body), "Sarabun", sans-serif; /* Sarabun = Thai fallback */
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--text-strong); }

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-3xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-muted);
}

/* ── Selection / scrollbar ── */
::selection { background: var(--mks-light-orange); color: var(--mks-ink-900); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mks-light-grey); border-radius: var(--radius-pill); border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--mks-blue-grey); }

/* ── Focus ── */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

/* ── Buttons (DS variants: solid / outline / ghost / dark) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-display); font-size: 0.82rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.01em; padding: 8px 15px; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-body);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover { border-color: var(--mks-blue-grey); color: var(--text-strong); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--action); border-color: var(--action); color: var(--text-on-orange); }
.btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn-primary:active { background: var(--action-press); }
.btn-dark { background: var(--surface-dark); border-color: var(--surface-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--surface-accent-soft); color: var(--mks-orange-press); }
.btn-sm { padding: 5px 10px; font-size: var(--text-3xs); }

/* ── Inputs (orange focus ring per DS) ── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  font-family: var(--font-body); color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

/* ── Animations ── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.fade-in { animation: fadeIn var(--dur-slow) var(--ease-out) both; }

/* ── Loading: spinner + skeleton ── */
.spinner { width: 36px; height: 36px; border: 4px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-2xl); color: var(--text-muted); font-size: 0.8rem; }
.skeleton { background: linear-gradient(90deg, #efeeec 25%, #f7f6f4 37%, #efeeec 63%); background-size: 800px 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--radius-xs); }
.skel-line { height: 12px; margin: 7px 0; }
.skel-row { height: 28px; margin: 6px 0; }

/* ── Utilities ── */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }

/* Type-scale utility classes for JS-generated markup (alternative to inline font-size) */
.t-micro   { font-size: var(--fs-micro); }
.t-caption { font-size: var(--fs-caption); }
.t-sm      { font-size: var(--fs-sm); }
.t-base    { font-size: var(--fs-base); }
.t-h2      { font-size: var(--fs-h2); }
.t-num     { font-size: var(--fs-num); }
.t-display { font-size: var(--fs-display); }
/* Monospace code cell (recurring pattern: item codes, reason codes) */
.cell-code { font-family: var(--font-mono); font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}