/* ============================================================
   IT-WMS — Base reset + typography helpers
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- Typography helpers ---------- */
.page-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.page-head .sub { color: var(--c-text-2); font-size: var(--fs-md); margin-top: 2px; }
.page-head .spacer { flex: 1; }
/* กลุ่มปุ่มมุมขวาบน — อยู่ด้วยกันเสมอ ไม่แตกคนละบรรทัดเวลาจอแคบลง */
.page-head .head-actions {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; justify-content: flex-end;
}

.muted { color: var(--c-text-2); }
.dim   { color: var(--c-text-3); }
.xs    { font-size: var(--fs-xs); }
.sm    { font-size: var(--fs-sm); }
.md    { font-size: var(--fs-md); }
.mono  { font-family: var(--font-mono); font-size: var(--fs-sm); }
.nowrap{ white-space: nowrap; }
.right { text-align: right; }
.center{ text-align: center; }
.bold  { font-weight: var(--fw-semibold); }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.flex { display: flex; align-items: center; gap: var(--sp-2); }
.flex-wrap { flex-wrap: wrap; }
.grow { flex: 1; }
/* CSP `style-src 'self'` = ห้าม attribute `style="..."` → ค่าที่เคยเขียน inline ต้องมาเป็นคลาส */
.shrink { min-width: 0; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* อ่านออกด้วย screen reader แต่ไม่กินพื้นที่บนจอ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Print (สำหรับหน้ารายงานในเฟสถัดไป) ---------- */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main { margin: 0; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}