/* =====================================================================
   รอบ 90: KPI — หน้า /kpi + แถว KPI ที่ปักหน้าแรก (prefix kpi-)
   สีใช้ตัวแปร :root (app.css / dark.css) → โหมดมืดได้เอง · มือถือ ≤ 760px: การ์ด 2 คอลัมน์ (≤ 400px = 1 คอลัมน์) ไม่เลื่อนแนวนอน
   ===================================================================== */
@media screen {
  .kpi-page { --kpi-warn-ink: var(--warn-text, #7a5300); }
  .kpi-pinned { --kpi-warn-ink: var(--warn-text, #7a5300); }

  /* ---------- ตัวกรอง ---------- */
  .kpi-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
  .kpi-seg {
    display: inline-flex; align-items: stretch; gap: 2px; padding: 3px; min-height: 42px; max-width: 100%;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  }
  .kpi-seg button {
    display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 4px 12px;
    border: 0; border-radius: 9px; background: none; color: var(--muted);
    font: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  .kpi-seg button:hover { color: var(--ink); background: var(--chip); }
  .kpi-seg button.on { background: var(--brand); color: var(--brand-ink); }
  .kpi-dates { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .kpi-dates input { min-height: 42px; max-width: 160px; }
  .kpi-branch {
    min-height: 42px; max-width: 220px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem;
  }
  .kpi-range { margin: -6px 0 0; }

  /* ---------- กลุ่ม + ตาราง ---------- */
  .kpi-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .kpi-group-title { margin: 4px 0 0; font-size: .95rem; color: var(--muted); font-weight: 700; letter-spacing: .01em; }
  /* รอบ 98: การ์ดกว้างขึ้นเล็กน้อย (จอกว้างไม่เป็นการ์ดแคบเรียง 7 ใบ) · แถวที่ปัก = ยืดเต็มแถว (auto-fit) ไม่เหลือที่ว่างขวา */
  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; min-width: 0; }
  .kpi-grid.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
  .kpi-grid.is-compact:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .kpi-foot { margin: 4px 0 0; }

  /* ---------- การ์ด ---------- */
  .kpi-card {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    border-top: 3px solid var(--line);
  }
  .kpi-card.st-good { border-top-color: var(--ok); }
  .kpi-card.st-warn { border-top-color: #E0A526; }
  .kpi-card.st-bad { border-top-color: var(--danger); }
  .kpi-card.is-locked { background: var(--chip); border-style: dashed; border-top-width: 1px; }
  .kpi-card-head { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
  .kpi-name {
    flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: .86rem; font-weight: 600; line-height: 1.3;
    text-decoration: none; overflow-wrap: anywhere;
  }
  a.kpi-name:hover { color: var(--brand-strong); text-decoration: underline; }
  .kpi-info {
    flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -3px -4px 0 0; padding: 0;
    border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
  }
  .kpi-info:hover, .kpi-info.on { background: var(--chip); color: var(--ink); }
  .kpi-hint { margin: 0; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--chip); color: var(--ink); font-size: .8rem; line-height: 1.4; }

  .kpi-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; color: var(--ink); text-decoration: none; }
  a.kpi-main:hover .kpi-value { color: var(--brand-strong); }
  .kpi-value { font-size: 1.45rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; min-width: 0; }
  .kpi-card.is-compact .kpi-value { font-size: 1.2rem; }
  /* รอบ 98: ไม่มีค่า = "—" สีจาง + คำอธิบายสั้น (เดิม "-" ตัวดำโดด ๆ) */
  .kpi-value.is-none { color: var(--muted); font-weight: 600; opacity: .8; }
  .kpi-change { font-size: .8rem; font-weight: 700; white-space: nowrap; padding: 1px 6px; border-radius: 999px; background: var(--chip); color: var(--muted); }
  .kpi-change.good { background: var(--ok-soft); color: var(--ok); }
  .kpi-change.bad { background: var(--danger-soft); color: var(--danger); }
  .kpi-change.flat { background: none; padding: 1px 0; font-weight: 600; }
  .kpi-prev { margin: 0; color: var(--muted); font-size: .78rem; }

  .kpi-spark { display: block; width: 100%; height: 30px; overflow: visible; }
  .kpi-spark path { stroke: var(--muted); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .kpi-spark circle { fill: var(--muted); }
  .kpi-spark.good path { stroke: var(--ok); }
  .kpi-spark.good circle { fill: var(--ok); }
  .kpi-spark.bad path { stroke: var(--danger); }
  .kpi-spark.bad circle { fill: var(--danger); }
  /* รอบ 98: ค่าเท่ากันทุกจุด (เช่น 0 ทั้งช่วง) = เส้นฐานจาง ๆ เส้นเดียว ไม่มีจุดปลาย */
  .kpi-spark.is-flat path { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }

  .kpi-target { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .kpi-target-bar { height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; }
  .kpi-target-bar span { display: block; height: 100%; border-radius: inherit; background: var(--muted); }
  .kpi-card.st-good .kpi-target-bar span { background: var(--ok); }
  .kpi-card.st-warn .kpi-target-bar span { background: #E0A526; }
  .kpi-card.st-bad .kpi-target-bar span { background: var(--danger); }
  .kpi-target small { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }

  .kpi-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: .84rem; }
  .kpi-locked svg { flex: none; }
  .kpi-locked a { font-weight: 600; }

  /* ---------- โหมดแก้ ---------- */
  .kpi-edit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
  .kpi-pin { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; cursor: pointer; }
  .kpi-editbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-tint); border: 1px solid var(--brand-soft); font-size: .88rem;
  }
  .kpi-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

  /* ---------- แถว KPI หน้าแรก ---------- */
  .kpi-pinned {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; margin-bottom: 14px;
  }
  .kpi-pinned-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
  .kpi-pinned-head small { font-size: .8rem; }
  .kpi-pinned-all { margin-left: auto; font-size: .86rem; font-weight: 600; white-space: nowrap; }
}

@media screen and (max-width: 760px) {
  .kpi-filters { gap: 8px; }
  .kpi-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .kpi-seg::-webkit-scrollbar { display: none; }
  .kpi-seg button { flex: 1 0 auto; padding: 4px 10px; }
  .kpi-dates { width: 100%; }
  .kpi-dates input { flex: 1 1 0; max-width: none; min-width: 0; }
  .kpi-branch { width: 100%; max-width: none; }
  .kpi-grid, .kpi-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-card { padding: 10px 11px; }
  .kpi-value { font-size: 1.2rem; }
  .kpi-card.is-compact .kpi-value { font-size: 1.08rem; }
}

@media screen and (max-width: 360px) {
  .kpi-grid, .kpi-grid.is-compact { grid-template-columns: minmax(0, 1fr); }
}