/* ============================================================================
 * suite-theme.css — Structure Suite Design System v1.0
 * สำนักงานออกแบบวิศวกรรมโยธา "ทีมก้าวกล้าโฮม" — แผนก DEV
 *
 * วิธีใช้:  <link rel="stylesheet" href="_design/suite-theme.css">
 *           (หรือคัดลอกไปวางข้างไฟล์ HTML แล้ว link ตรงๆ)
 * สไตล์:   macOS Light — สะอาด แบน เงาเบา มุมโค้งนุ่ม เหมาะงานวิศวกรรม
 * อ้างอิง:  _design/design-system.md (สเปคเต็ม + ตัวอย่าง markup)
 * หมายเหตุ: ไฟล์นี้เป็น "ธีมเดียว" แทน fut-theme.css / macos-theme.css เดิม
 *           ห้าม link ธีมเก่าซ้อนกับไฟล์นี้
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */
:root{
  /* ---- Surface / พื้นหลัง ---- */
  --ss-bg:            #f5f5f7;   /* พื้นหลังหน้า */
  --ss-bg-sidebar:    #eef0f4;   /* พื้นหลังแถบ input ซ้าย */
  --ss-surface:       #ffffff;   /* การ์ด / panel */
  --ss-surface-2:     #f7f8fa;   /* แถบหัวตาราง, แถวสลับ, กล่องรอง */
  --ss-surface-3:     #eef2f7;   /* hover, chip, metric */

  /* ---- เส้นขอบ ---- */
  --ss-line:          #dfe3ea;
  --ss-line-strong:   #c9cfd9;

  /* ---- ตัวอักษร ---- */
  --ss-ink:           #1d2433;   /* ข้อความหลัก */
  --ss-ink-2:         #44506a;   /* ข้อความรอง / label */
  --ss-muted:         #6b7382;   /* คำอธิบาย, หน่วย */
  --ss-faint:         #9aa3b2;   /* จางสุด (placeholder, เส้นแบ่ง) */

  /* ---- สีแบรนด์ (วิศวกรรม) ---- */
  --ss-brand:         #0C447C;   /* น้ำเงินหลัก: ปุ่มหลัก, ลิงก์, tab active */
  --ss-brand-hover:   #0a3866;
  --ss-brand-soft:    rgba(12, 68, 124, .08);
  --ss-brand-ring:    rgba(12, 68, 124, .25);  /* วงแหวนโฟกัส */
  --ss-accent:        #0F6E56;   /* ทีล: ค่าผลลัพธ์เด่น, ไฮไลต์รอง */
  --ss-accent-soft:   rgba(15, 110, 86, .10);

  /* ---- สีสถานะ (ผ่าน / เตือน / ไม่ผ่าน) ---- */
  --ss-pass:          #1d8a44;   /* ตัวอักษรเขียว (contrast ≥ 4.5:1 บนขาว) */
  --ss-pass-fill:     #34c759;   /* แท่ง/จุดสถานะเขียว */
  --ss-pass-bg:       #e8f7ee;
  --ss-warn:          #BA7517;   /* ตัวอักษรส้ม-เตือน */
  --ss-warn-fill:     #f0a32f;
  --ss-warn-bg:       #fdf4e3;
  --ss-fail:          #c5221f;   /* ตัวอักษรแดง */
  --ss-fail-fill:     #ff3b30;   /* แท่ง/จุดสถานะแดง */
  --ss-fail-bg:       #fdeceb;
  --ss-info-bg:       #eef5ff;
  --ss-info-line:     #b8d4ff;

  /* ---- ตัวอักษร ---- */
  --ss-font-body: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --ss-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- ขนาดตัวอักษร ---- */
  --ss-fs-h1:   19px;
  --ss-fs-h2:   16px;
  --ss-fs-h3:   14px;
  --ss-fs-body: 14px;
  --ss-fs-sm:   12.5px;
  --ss-fs-xs:   11.5px;

  /* ---- Spacing scale (ฐาน 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- มุมโค้ง / เงา ---- */
  --ss-radius-sm:  6px;    /* input, ปุ่ม, badge */
  --ss-radius:     10px;   /* การ์ด, กล่อง */
  --ss-radius-lg:  14px;   /* การ์ดใหญ่, modal */
  --ss-shadow-card: 0 1px 3px rgba(0,0,0,.06);
  --ss-shadow-pop:  0 4px 16px rgba(0,0,0,.10);

  /* ---- Layout ---- */
  --ss-header-h:   52px;
  --ss-sidebar-w:  340px;
  --ss-content-max: 1480px;
}

/* ============================================================
 * 2. BASE
 * ============================================================ */
*{ box-sizing:border-box; }
html{ color-scheme:light; }
body{
  margin:0;
  font-family:var(--ss-font-body);
  font-size:var(--ss-fs-body);
  line-height:1.5;
  color:var(--ss-ink);
  background:var(--ss-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0 0 var(--sp-2); line-height:1.3; color:var(--ss-ink); }
h1{ font-size:var(--ss-fs-h1); font-weight:700; }
h2{ font-size:var(--ss-fs-h2); font-weight:700; }
h3{ font-size:var(--ss-fs-h3); font-weight:600; }
p{ margin:0 0 var(--sp-3); }
a{ color:var(--ss-brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
small, .small{ font-size:var(--ss-fs-xs); color:var(--ss-muted); }
code, .mono{ font-family:var(--ss-font-mono); font-size:.92em; }
hr{ border:0; border-top:1px solid var(--ss-line); margin:var(--sp-4) 0; }

:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ss-brand-ring);
  border-radius:var(--ss-radius-sm);
}

/* ============================================================
 * 3. APP HEADER + กลับหน้าหลัก (ทุกหน้าต้องมี)
 * ============================================================ */
.app-header{
  position:sticky; top:0; z-index:50;
  height:var(--ss-header-h);
  display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-4);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ss-line);
}
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  font-size:var(--ss-fs-sm); font-weight:600;
  color:var(--ss-brand);
  background:var(--ss-brand-soft);
  border-radius:var(--ss-radius-sm);
  white-space:nowrap;
}
.back-link:hover{ background:rgba(12,68,124,.14); text-decoration:none; }
.app-title{ font-size:15px; font-weight:700; line-height:1.2; }
.app-title .app-sub{
  display:block; font-size:var(--ss-fs-xs); font-weight:400;
  color:var(--ss-muted); margin-top:1px;
}
.header-spacer{ flex:1; }
.header-actions{ display:flex; align-items:center; gap:var(--sp-2); }

/* ============================================================
 * 4. LAYOUT หน้าเครื่องคำนวณ — input ซ้าย / ผลลัพธ์ขวา
 * ============================================================ */
.app-layout{
  display:grid;
  grid-template-columns:var(--ss-sidebar-w) minmax(0,1fr);
  min-height:calc(100vh - var(--ss-header-h));
}
.sidebar{
  background:var(--ss-bg-sidebar);
  border-right:1px solid var(--ss-line);
  padding:var(--sp-4);
  overflow-y:auto;
  max-height:calc(100vh - var(--ss-header-h));
  position:sticky; top:var(--ss-header-h);
}
.content{
  padding:var(--sp-4) var(--sp-5) var(--sp-6);
  overflow-y:auto;
  max-height:calc(100vh - var(--ss-header-h));
  max-width:var(--ss-content-max);
}

/* ---- กลุ่ม input ใน sidebar ---- */
.input-group{
  background:var(--ss-surface);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-radius);
  padding:var(--sp-3);
  margin-bottom:var(--sp-3);
  box-shadow:var(--ss-shadow-card);
}
.group-title{
  font-size:var(--ss-fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--ss-brand);
  margin:0 0 var(--sp-2);
  display:flex; align-items:center; gap:6px;
}

/* ---- field: label ซ้าย + input ขวา (แบบ PEB เดิม) ---- */
.field{
  display:grid; grid-template-columns:minmax(0,1fr) 104px;
  gap:var(--sp-2); align-items:center;
  margin:var(--sp-1) 0;
}
.field label{ font-size:var(--ss-fs-sm); color:var(--ss-ink-2); }
.field .unit{ font-size:var(--ss-fs-xs); color:var(--ss-muted); margin-left:4px; }
/* field แบบเต็มแถว (label บน input ล่าง) ใช้ class เพิ่ม */
.field.stack{ grid-template-columns:1fr; gap:4px; }
/* input คู่ในช่องเดียว เช่น b×t */
.field .pair{ display:flex; gap:4px; }

.row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-2); }

/* ============================================================
 * 5. FORM CONTROLS
 * ============================================================ */
input[type="text"], input[type="number"], input[type="date"],
input[type="search"], input:not([type]), select, textarea{
  width:100%;
  min-height:36px;
  padding:6px 10px;
  font-family:inherit; font-size:13px;
  color:var(--ss-ink);
  background:var(--ss-surface);
  border:1px solid var(--ss-line-strong);
  border-radius:var(--ss-radius-sm);
  transition:border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--ss-brand);
  box-shadow:0 0 0 3px var(--ss-brand-ring);
}
input[type="number"]{ font-family:var(--ss-font-mono); font-variant-numeric:tabular-nums; }
input:disabled, select:disabled{ background:var(--ss-surface-2); color:var(--ss-faint); cursor:not-allowed; }
input[aria-invalid="true"], input.invalid{
  border-color:var(--ss-fail);
  box-shadow:0 0 0 3px rgba(197,34,31,.15);
}
.field-error{ font-size:var(--ss-fs-xs); color:var(--ss-fail); margin-top:2px; }

input[type="checkbox"], input[type="radio"]{
  width:16px; height:16px; min-height:0;
  accent-color:var(--ss-brand);
  cursor:pointer;
}

/* ============================================================
 * 6. BUTTONS
 * ============================================================ */
.btn, button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:36px;
  padding:7px 16px;
  font-family:inherit; font-size:13px; font-weight:600;
  border-radius:var(--ss-radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .12s, box-shadow .12s, transform .06s;
  white-space:nowrap;
}
.btn:active, button:active{ transform:translateY(1px); }

/* primary — การกระทำหลัก (คำนวณ, Export PDF) มีได้ปุ่มเดียวต่อบริเวณ */
.btn-primary, button:not([class]){
  background:var(--ss-brand); color:#fff;
}
.btn-primary:hover, button:not([class]):hover{ background:var(--ss-brand-hover); }

/* secondary — การกระทำรอง (Preview, Reset) */
.btn-secondary{
  background:var(--ss-surface); color:var(--ss-ink);
  border-color:var(--ss-line-strong);
  box-shadow:var(--ss-shadow-card);
}
.btn-secondary:hover{ background:var(--ss-surface-2); }

/* ghost — การกระทำเบา (toggle มุมมอง) */
.btn-ghost{ background:transparent; color:var(--ss-brand); }
.btn-ghost:hover{ background:var(--ss-brand-soft); }
.btn-ghost.active{ background:var(--ss-brand); color:#fff; }

/* danger — ลบ/ล้างข้อมูล */
.btn-danger{ background:var(--ss-fail-bg); color:var(--ss-fail); border-color:rgba(197,34,31,.3); }
.btn-danger:hover{ background:#fbd9d7; }

.btn-sm{ min-height:28px; padding:3px 10px; font-size:var(--ss-fs-sm); }
.btn-block{ width:100%; }
.btn:disabled, button:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ============================================================
 * 7. TABS (แถบผลลัพธ์)
 * ============================================================ */
.tabs{
  display:flex; gap:var(--sp-1); flex-wrap:wrap;
  padding:4px;
  background:var(--ss-surface-3);
  border-radius:var(--ss-radius);
  margin-bottom:var(--sp-4);
  position:sticky; top:0; z-index:10;
}
.tab{
  appearance:none; border:0; cursor:pointer;
  padding:7px 16px; min-height:32px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--ss-ink-2);
  background:transparent;
  border-radius:var(--ss-radius-sm);
  transition:background .12s, color .12s;
}
.tab:hover{ color:var(--ss-ink); background:rgba(255,255,255,.6); }
.tab.active{
  background:var(--ss-surface); color:var(--ss-brand);
  box-shadow:var(--ss-shadow-card);
}
.panel{ display:none; }
.panel.active{ display:block; }

/* ============================================================
 * 8. CARD
 * ============================================================ */
.card{
  background:var(--ss-surface);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-radius);
  box-shadow:var(--ss-shadow-card);
  padding:var(--sp-4);
  margin-bottom:var(--sp-4);
}
.card-title{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  font-size:var(--ss-fs-h3); font-weight:700;
  margin:0 0 var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--ss-line);
}
.card-grid{
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}

/* ============================================================
 * 9. TABLES (ตารางผลคำนวณ)
 * ============================================================ */
table{
  border-collapse:collapse; width:100%;
  font-size:var(--ss-fs-sm);
  margin:var(--sp-2) 0;
  background:var(--ss-surface);
}
th, td{
  border:1px solid var(--ss-line);
  padding:5px 10px;
  text-align:left;
  vertical-align:top;
}
th{
  background:var(--ss-surface-2);
  font-weight:600; font-size:12px;
  color:var(--ss-ink-2);
  white-space:nowrap;
}
td.num, th.num{
  text-align:right;
  font-family:var(--ss-font-mono);
  font-variant-numeric:tabular-nums;
  font-size:12px;
}
tbody tr:hover{ background:var(--ss-surface-2); }
/* แถวที่คุมการออกแบบ (governing case) */
tr.is-governing td{ background:var(--ss-brand-soft); font-weight:600; }
/* สีสถานะในเซลล์ */
.ok   { color:var(--ss-pass); font-weight:600; }
.bad  { color:var(--ss-fail); font-weight:600; }
.warn { color:var(--ss-warn); font-weight:600; }
/* ตารางแบบ scroll แนวนอนบนจอแคบ */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ============================================================
 * 10. BADGE สถานะ ผ่าน/ไม่ผ่าน
 * ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 10px; min-height:22px;
  font-size:var(--ss-fs-xs); font-weight:700;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.badge::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:currentColor;
}
.badge-pass{ background:var(--ss-pass-bg); color:var(--ss-pass); border-color:rgba(29,138,68,.25); }
.badge-fail{ background:var(--ss-fail-bg); color:var(--ss-fail); border-color:rgba(197,34,31,.25); }
.badge-warn{ background:var(--ss-warn-bg); color:var(--ss-warn); border-color:rgba(186,117,23,.3); }
.badge-info{ background:var(--ss-brand-soft); color:var(--ss-brand); border-color:rgba(12,68,124,.25); }
.badge-info::before, .badge-neutral::before{ display:none; }
.badge-neutral{ background:var(--ss-surface-3); color:var(--ss-muted); }

/* ============================================================
 * 11. UTILIZATION BAR (อัตราส่วนการใช้กำลัง)
 *  เกณฑ์สี:  ≤0.90 เขียว | 0.90–1.00 ส้ม | >1.00 แดง
 *  width ของ .util-fill = min(util, 1.0) × 100%
 * ============================================================ */
.util{ margin:var(--sp-2) 0; }
.util-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--ss-fs-sm); margin-bottom:3px;
}
.util-head .util-val{
  font-family:var(--ss-font-mono); font-weight:600; font-size:13px;
}
.util-bar{
  height:10px;
  background:var(--ss-surface-3);
  border:1px solid var(--ss-line);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
/* ขีดอ้างอิงที่ 100% — วางในกรณีแกนยาวกว่า 1.0 ไม่บังคับ */
.util-bar .limit-mark{
  position:absolute; top:-2px; bottom:-2px; width:2px;
  background:var(--ss-ink-2); opacity:.5;
}
.util-fill{
  height:100%; border-radius:999px;
  background:var(--ss-pass-fill);
  transition:width .3s ease;
  min-width:2px;
}
.util-fill.is-pass{ background:var(--ss-pass-fill); }
.util-fill.is-warn{ background:var(--ss-warn-fill); }
.util-fill.is-fail{ background:var(--ss-fail-fill); }
.util.is-fail .util-val{ color:var(--ss-fail); }
.util.is-warn .util-val{ color:var(--ss-warn); }
.util.is-pass .util-val{ color:var(--ss-pass); }

/* ============================================================
 * 12. FORMULA BOX (กล่องสูตร / การแทนค่า)
 * ============================================================ */
.formula{
  font-family:var(--ss-font-mono);
  font-size:12.5px; line-height:1.7;
  background:var(--ss-surface-2);
  border:1px solid var(--ss-line);
  border-left:3px solid var(--ss-brand);
  border-radius:var(--ss-radius-sm);
  padding:var(--sp-2) var(--sp-3);
  margin:var(--sp-2) 0;
  overflow-x:auto;
  color:var(--ss-ink);
}
.formula b, .formula strong{ color:var(--ss-brand); }
.formula .f-result{ color:var(--ss-accent); font-weight:600; }
/* ป้ายชื่อสูตร/อ้างอิงมาตรฐาน เหนือกล่อง */
.formula-ref{
  font-size:var(--ss-fs-xs); color:var(--ss-muted);
  margin-bottom:2px; display:block;
}

/* ============================================================
 * 13. METRIC (ค่าผลลัพธ์เด่น)
 * ============================================================ */
.metric{
  display:inline-block;
  min-width:128px;
  padding:var(--sp-2) var(--sp-3);
  background:var(--ss-surface-2);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-radius-sm);
  margin:0 var(--sp-2) var(--sp-2) 0;
}
.metric .v{
  display:block;
  font-family:var(--ss-font-mono);
  font-size:18px; font-weight:600;
  color:var(--ss-brand);
  font-variant-numeric:tabular-nums;
}
.metric .v.ok{ color:var(--ss-pass); }
.metric .v.bad{ color:var(--ss-fail); }
.metric .l{ font-size:var(--ss-fs-xs); color:var(--ss-muted); }

/* ============================================================
 * 14. NOTE / CALLOUT
 * ============================================================ */
.note{
  font-size:var(--ss-fs-sm);
  border-radius:var(--ss-radius-sm);
  padding:var(--sp-2) var(--sp-3);
  margin:var(--sp-2) 0;
  border:1px solid var(--ss-line);
  border-left-width:3px;
}
.note-warn{ background:var(--ss-warn-bg); border-color:rgba(186,117,23,.35); border-left-color:var(--ss-warn); color:#6b4a10; }
.note-info{ background:var(--ss-info-bg); border-color:var(--ss-info-line); border-left-color:var(--ss-brand); color:#1c3d5c; }
.note-fail{ background:var(--ss-fail-bg); border-color:rgba(197,34,31,.3); border-left-color:var(--ss-fail); color:#7c1d1b; }

/* ============================================================
 * 15. PORTAL (index.html ใหม่) — หมวด + การ์ดเครื่องมือ
 * ============================================================ */
.portal-wrap{ max-width:1080px; margin:0 auto; padding:var(--sp-6) var(--sp-4) var(--sp-7); }
.portal-hero{ margin-bottom:var(--sp-6); }
.portal-hero h1{ font-size:24px; }
.portal-hero .sub{ color:var(--ss-muted); font-size:var(--ss-fs-sm); }
.cat{ margin-bottom:var(--sp-6); }
.cat-title{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--ss-fs-h2); font-weight:700;
  margin-bottom:var(--sp-3);
  padding-left:var(--sp-2);
  border-left:4px solid var(--ss-brand);
}
.cat-title .count{ font-size:var(--ss-fs-xs); font-weight:600; color:var(--ss-muted); }
.tool-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
}
.tool-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--ss-surface);
  border:1px solid var(--ss-line);
  border-radius:var(--ss-radius-lg);
  box-shadow:var(--ss-shadow-card);
  padding:var(--sp-4);
  color:var(--ss-ink);
  transition:box-shadow .15s, transform .15s, border-color .15s;
}
a.tool-card:hover{
  text-decoration:none;
  border-color:var(--ss-brand);
  box-shadow:var(--ss-shadow-pop);
  transform:translateY(-2px);
}
.tool-card .tool-icon{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800;
  color:#fff; background:var(--ss-brand);
  border-radius:var(--ss-radius-sm);
  letter-spacing:.02em;
}
.tool-card .tool-name{ font-size:15px; font-weight:700; }
.tool-card .tool-desc{ font-size:var(--ss-fs-sm); color:var(--ss-muted); flex:1; }
.tool-card .tool-meta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  font-size:var(--ss-fs-xs); color:var(--ss-faint);
}
.tool-card.is-disabled{ opacity:.55; pointer-events:none; }

/* ============================================================
 * 16. PRINT — รายงาน A4
 *  ใช้คู่กับ class:  .no-print (ซ่อนตอนพิมพ์) / .print-only (โชว์เฉพาะพิมพ์)
 * ============================================================ */
.print-only{ display:none; }

/* แผ่นรายงานพรีวิวบนจอ (จำลอง A4) */
.report-sheet{
  width:210mm; max-width:100%;
  min-height:297mm;
  margin:0 auto var(--sp-4);
  background:#fff;
  border:1px solid var(--ss-line);
  box-shadow:var(--ss-shadow-pop);
  padding:18mm 15mm;
}

@media print{
  @page{ size:A4; margin:16mm 14mm; }
  html, body{ background:#fff !important; font-size:11pt; color:#000; }
  .app-header, .sidebar, .tabs, .header-actions,
  .btn, button, .no-print{ display:none !important; }
  .print-only{ display:block; }
  .app-layout{ display:block; }
  .content{ max-height:none; overflow:visible; padding:0; max-width:none; }
  .panel{ display:block !important; }            /* พิมพ์ทุก panel ที่ DEV ไม่ได้ใส่ .no-print */
  .card, .report-sheet{
    box-shadow:none; border:0; padding:0; margin:0 0 8mm;
    break-inside:avoid;
  }
  .report-sheet{ width:auto; min-height:0; }
  table, .formula, .metric, .util{ break-inside:avoid; }
  th{ background:#f0f0f0 !important; }
  th, td{ border-color:#999; }
  a{ color:#000; text-decoration:none; }
  /* คงสีสถานะตอนพิมพ์ */
  .util-fill, .badge, th, tr.is-governing td{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .page-break{ break-before:page; }
}

/* ============================================================
 * 17. RESPONSIVE
 *  ≥1280px : sidebar 340px (ค่าตั้งต้น)
 *  1024–1279px : sidebar 300px
 *  ≤1023px : ซ้อนเป็นคอลัมน์เดียว (input บน, ผลลัพธ์ล่าง)
 * ============================================================ */
@media (max-width:1279px){
  :root{ --ss-sidebar-w:300px; }
}
@media (max-width:1023px){
  .app-layout{ grid-template-columns:1fr; }
  .sidebar{
    position:static;
    max-height:none;
    border-right:0;
    border-bottom:1px solid var(--ss-line);
  }
  .content{ max-height:none; padding:var(--sp-4); }
  /* แตะง่ายขึ้นบนมือถือ */
  input, select, .btn, button{ min-height:40px; }
  .tab{ min-height:38px; }
  .field{ grid-template-columns:minmax(0,1fr) 120px; }
}
@media (max-width:560px){
  .app-title .app-sub{ display:none; }
  .row3{ grid-template-columns:1fr 1fr; }
  .metric{ min-width:calc(50% - var(--sp-2)); }
  .content{ padding:var(--sp-3); }
}

/* ============================================================
 * 18. UTILITIES
 * ============================================================ */
.flex{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.grow{ flex:1; }
.text-muted{ color:var(--ss-muted); }
.text-right{ text-align:right; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-2{ margin-top:var(--sp-2); } .mt-4{ margin-top:var(--sp-4); }
.mb-2{ margin-bottom:var(--sp-2); } .mb-4{ margin-bottom:var(--sp-4); }