/* DBF UP — repair-stats.css : สถิติการแจ้งซ่อม (พื้นหลังเข้ม) */

/* โทนเขียวไล่ระดับโทนเดียว — ผ่านการตรวจ ordinal ramp (light→dark, ΔL ≥ .06, พื้นเข้ม #13251B) */
.rs-card{
  --rs-surface:#13251B;
  --rs-s1:#A8F5CE;   /* ประปา — เบาสุด อยู่ชั้นบนของกราฟ */
  --rs-s2:#62E5A1;   /* เครื่องปรับอากาศ */
  --rs-s3:#2BB77A;   /* ไฟฟ้า */
  --rs-s4:#147A55;   /* โยธา — เข้มสุด อยู่ชั้นล่าง */
  --rs-cap:#D6FCE9;  /* เส้นยอดรวม */
  --rs-ink:#FAFDF9;
  --rs-ink-2:rgba(250,253,249,.62);
  --rs-ink-3:rgba(250,253,249,.4);
  --rs-hair:rgba(250,253,249,.1);

  max-width:1180px;margin:0 auto;border-radius:30px;overflow:hidden;
  border:1px solid var(--line-inv);
  background:linear-gradient(140deg,rgba(21,48,31,.7),rgba(10,20,13,.85));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 44px 100px -40px rgba(0,0,0,.7);
}
.rs-inner{display:grid;grid-template-columns:1.62fr 1fr}


/* ---------- ฝั่งกราฟ ---------- */
.rs-chart-pane{padding:44px 40px 34px;border-right:1px solid var(--line-inv);min-width:0}
.rs-pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.rs-pane-head h3{font-weight:400;font-size:19px;color:var(--rs-ink);letter-spacing:-.01em}
.rs-pane-head p{font-size:12.5px;color:var(--rs-ink-3);margin-top:5px}

.rs-legend{display:flex;flex-wrap:wrap;gap:7px}
.rs-leg{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid var(--line-inv);background:rgba(255,255,255,.03);
  font-size:12.5px;color:var(--rs-ink-2);line-height:1;
  transition:.28s var(--ease);
}
.rs-leg:hover{background:rgba(98,229,161,.1);color:var(--rs-ink)}
.rs-leg i{width:11px;height:11px;border-radius:3px;flex:none;display:block}
.rs-leg b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--rs-ink)}

.rs-figure{margin:0}
.rs-plot{position:relative;width:100%}
.rs-plot svg{display:block;width:100%;height:auto;overflow:visible}

.rs-grid line{stroke:var(--rs-hair);stroke-width:1;shape-rendering:crispEdges}
.rs-axis text{fill:var(--rs-ink-3);font-size:11.5px;font-family:inherit;font-variant-numeric:tabular-nums}
.rs-xaxis text{fill:var(--rs-ink-2);font-size:12px;font-family:inherit}
.rs-xaxis text.is-peak{fill:var(--rs-ink)}

.rs-band{transition:opacity .3s var(--ease)}
.rs-cap{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rs-plot.dim .rs-band:not(.on){opacity:.22}
.rs-plot.dim .rs-cap:not(.on){opacity:.3}

.rs-cross{stroke:rgba(250,253,249,.42);stroke-width:1;shape-rendering:crispEdges}
.rs-dot{stroke:var(--rs-surface);stroke-width:2}
.rs-lab{fill:var(--rs-ink);font-size:12.5px;font-family:inherit;font-variant-numeric:tabular-nums}
/* ป้ายจุดสูงสุดหลบให้ tooltip ตอนชี้กราฟ */
.rs-peak{transition:opacity .2s linear}
.rs-plot.hot .rs-peak{opacity:0}
.rs-lab-sub{fill:var(--rs-ink-3);font-size:11px;font-family:inherit}

/* tooltip */
.rs-tip{
  position:absolute;top:0;left:0;z-index:3;pointer-events:none;
  min-width:212px;padding:13px 15px;border-radius:15px;
  border:1px solid var(--line-inv);
  background:rgba(8,16,11,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.85);
  transform:translate(-50%,-100%);
}
.rs-tip h5{font-weight:400;font-size:13px;color:var(--rs-ink);margin-bottom:9px}
.rs-tip ul{display:grid;gap:6px}
.rs-tip li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--rs-ink-2);line-height:1;white-space:nowrap}
.rs-tip li i{width:14px;height:2px;border-radius:2px;flex:none;display:block}
.rs-tip li b{margin-left:auto;font-weight:400;font-size:13.5px;color:var(--rs-ink);font-variant-numeric:tabular-nums}
.rs-tip li.tot{margin-top:4px;padding-top:8px;border-top:1px solid var(--rs-hair);color:var(--rs-ink-3)}

.rs-note{font-size:11.5px;color:var(--rs-ink-3);margin-top:16px}


/* ---------- ฝั่งสรุปสถิติ ---------- */
.rs-sum-pane{padding:44px 40px 34px;display:flex;flex-direction:column;min-width:0}

.rs-hero{margin-bottom:30px}
.rs-hero-label{display:block;font-size:12px;letter-spacing:.14em;color:var(--rs-ink-3);margin-bottom:8px}
.rs-hero-num{display:inline-block;font-weight:300;font-size:64px;line-height:1;color:var(--rs-ink);letter-spacing:-.02em}
.rs-hero-unit{font-size:15px;color:var(--green-leaf);margin-left:8px}

.rs-breakdown{display:grid;gap:15px;padding-bottom:28px;border-bottom:1px solid var(--rs-hair)}
.rs-bd{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline}
.rs-bd-name{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--rs-ink-2)}
.rs-bd-name i{width:11px;height:11px;border-radius:3px;flex:none;display:block}
.rs-bd-val{font-size:15.5px;color:var(--rs-ink);font-variant-numeric:tabular-nums}
.rs-bd-val em{font-style:normal;font-size:12.5px;color:var(--rs-ink-3);margin-left:7px}
.rs-meter{grid-column:1/-1;height:5px;border-radius:99px;background:rgba(250,253,249,.08);overflow:hidden}
.rs-meter i{display:block;height:100%;border-radius:99px;width:0;transition:width 1s var(--ease)}

.rs-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.rs-fact{border:1px solid var(--line-inv);border-radius:16px;padding:13px 16px;background:rgba(98,229,161,.05)}
.rs-fact span{display:block;font-size:11.5px;color:var(--rs-ink-3);margin-bottom:4px}
.rs-fact b{font-weight:400;font-size:16px;color:var(--rs-ink)}
.rs-fact b small{font-size:12px;color:var(--rs-ink-3);margin-left:5px;font-weight:300}


/* ---------- แถบตาราง ---------- */
.rs-table-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 40px;border-top:1px solid var(--line-inv);background:rgba(0,0,0,.18);
}
.rs-table-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:999px;border:1px solid var(--line-inv);
  font-size:13px;color:var(--rs-ink-2);transition:.28s var(--ease);
}
.rs-table-btn:hover{background:rgba(98,229,161,.1);color:var(--rs-ink)}
.rs-table-btn[aria-expanded="true"]{background:rgba(98,229,161,.14);color:var(--rs-ink)}
.rs-src{font-size:11.5px;color:var(--rs-ink-3)}

.rs-table-wrap{padding:6px 40px 34px;overflow-x:auto}
.rs-table{width:100%;border-collapse:collapse;font-size:13px;min-width:620px}
.rs-table caption{text-align:left;font-size:12px;color:var(--rs-ink-3);padding:12px 0 14px}
.rs-table th,.rs-table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--rs-hair);font-variant-numeric:tabular-nums}
.rs-table th:first-child,.rs-table td:first-child{text-align:left;font-variant-numeric:normal}
.rs-table thead th{font-weight:400;color:var(--rs-ink-3);font-size:12px;white-space:nowrap}
.rs-table thead th span{display:inline-flex;align-items:center;gap:7px}
.rs-table thead th i{width:9px;height:9px;border-radius:2px;flex:none;display:block}
.rs-table tbody td{color:var(--rs-ink-2)}
.rs-table tbody tr:hover td{background:rgba(98,229,161,.05);color:var(--rs-ink)}
.rs-table tfoot th,.rs-table tfoot td{color:var(--rs-ink);border-bottom:0;border-top:1px solid var(--rs-hair);padding-top:13px}
.rs-table tfoot tr:first-child th,.rs-table tfoot tr:first-child td{border-top:1px solid var(--line-inv)}


/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .rs-inner{grid-template-columns:1fr}
  .rs-chart-pane{border-right:0;border-bottom:1px solid var(--line-inv)}
  .rs-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .rs-chart-pane,.rs-sum-pane{padding:30px 22px}
  .rs-table-bar{padding:14px 22px}
  .rs-table-wrap{padding:6px 22px 28px}
  .rs-pane-head{gap:16px}
  .rs-hero-num{font-size:52px}
  .rs-facts{grid-template-columns:1fr}
  .rs-legend{gap:6px}
  .rs-leg{padding:5px 10px 5px 9px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .rs-meter i{transition:none}
}