/* ──────────────────────────────────────────────────────────────────────────
   s-curve.css — กรอบของบล็อก S-curve (renderSCurveBlock() ใน js/shared/s-curve.js)

   ตัวกราฟเองพก <style> ของมันไปในตัว SVG (คลาส .sc-chart / .sc-*) เพื่อให้ย้ายไปโผล่ที่
   ไหนก็ได้โดยไม่ต้องตามแก้ CSS หลายไฟล์ — ที่นี่เก็บเฉพาะ layout รอบๆ: แถวตัวเลขสรุป,
   กล่องกราฟ, คำอธิบาย และการปรับตัวเมื่ออยู่ใน widget หน้าภาพรวม
   ────────────────────────────────────────────────────────────────────────── */

.sc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ── แถวตัวเลขสรุปเหนือกราฟ ── */
.sc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px 18px;
}

.sc-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.sc-stat__k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-text-secondary, #667085);
  white-space: nowrap;
}

.sc-stat__v {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary, #1d2939);
  font-variant-numeric: tabular-nums;
}
.sc-stat__v--low { color: #B54708; }   /* จ่ายจริงต่ำกว่าแผน */
.sc-stat__v--high { color: #B42318; }  /* จ่ายจริงสูงกว่าแผน */

.sc-stat__s { font-size: 11px; color: #98A2B3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ตัวอย่างเส้นหน้าป้าย — ประ = แผน, ทึบ = จ่ายจริง (ตรงกับกราฟ) */
.sc-swatch { display: inline-block; width: 14px; height: 0; flex: none; }
.sc-swatch--plan { border-top: 2px dashed #7C89A8; }
.sc-swatch--act { border-top: 3px solid #2066DF; border-radius: 2px; }

/* ── กล่องกราฟ ── */
.sc__plot { width: 100%; min-width: 0; }
.sc-chart { display: block; width: 100%; height: auto; overflow: visible; }

.sc-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #98A2B3;
}

.sc-empty {
  margin: 0;
  padding: 10px 0;
  font-size: 12.5px;
  color: #98A2B3;
}

/* ── ในการ์ดของ Planner (มุมมอง Timeline) ── */
.pl-scurve-card .sc-stats { margin-bottom: 2px; }

/* ── ในมุมมองรวม "ภาพรวม 3D + แผน" — เตี้ยกว่า อยู่เต็มความกว้างใต้โมเดล/ไทม์ไลน์ ── */
.plm__scurve {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--color-border-default, #e2e6e9);
  padding-top: 10px;
}
.plm__scurve .sc-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 14px; }
.plm__scurve .sc-stat__v { font-size: 15.5px; }

/* ── ใน widget หน้าภาพรวม ──
   กล่องสูงเท่าที่ผู้ใช้ลากไว้ (grid row) → ให้ SVG ยืดเต็มกล่องแทนการยาวตามความกว้าง
   (preserveAspectRatio="meet" ในตัว SVG กันไม่ให้เส้นยืดผิดสัดส่วน) จะได้ไม่มีสกรอลล์ในการ์ด
   คำอธิบายท้ายกราฟตัดออกที่นี่ที่เดียว — ตัวอย่างเส้นในแถวตัวเลขสรุปบอกอยู่แล้วว่าเส้นไหนคืออะไร */
.ovw-w__body > .sc { height: 100%; }
.ovw-w__body > .sc > .sc__plot { flex: 1; min-height: 90px; }
.ovw-w__body > .sc > .sc__plot > .sc-chart { height: 100%; }
.ovw-w__body > .sc > .sc-note { display: none; }

/* กล่องแคบ (1-2 คอลัมน์) — ตัดตัวเลขสรุปให้เหลือสองแถวและย่อขนาด */
@container (max-width: 340px) {
  .ovw-w__body > .sc .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .ovw-w__body > .sc .sc-stat__v { font-size: 14px; }
}