/* ═══════════════════════════════════════════════════════════════
   DWR Statistics Manager — Frontend
   ทุกสี/ระยะ = CSS var · ลำดับค่า: token กลาง dwr-shared (--dwr-fe-*)
   > theme.json preset > design hex  → แก้สีกลางที่ dwr-shared/theme.json ที่เดียว
   depend `dwr-frontend-theme` แต่ทุก var มี fallback ในตัว กัน dwr-shared stale
   ไม่กำหนดความกว้างเอง — ผู้ดูแลเว็บครอบด้วย group/template ใน Page editor
   ─────────────────────────────────────────────────────────────── */

.dwr-stat {
  --_p:     var(--dwr-fe-primary, var(--wp--preset--color--contrast, #0152A2));
  --_ink:   var(--dwr-fe-primary-strong, var(--wp--preset--color--accent, #183354));
  --_tint:  var(--dwr-fe-primary-tint, var(--wp--preset--color--background-alt, #ECF4FD));
  --_meta:  var(--dwr-fe-text-meta, #5A6169);
  --_r:     var(--dwr-fe-radius, 16px);
  --_bd:    var(--dwr-fe-border, rgba(1, 82, 162, .10));
  --_sh:    var(--dwr-fe-shadow, 0 6px 20px rgba(1, 82, 162, .08));
  --_g:     20px;
  /* จำนวนคอลัมน์ที่ใช้จริงของแต่ละกริด — media/container query เปลี่ยนที่ตัวแปรพวกนี้ที่เดียว
     (--_c / --_c3 / --_c2 / --_c1 มาจาก inline style ที่ PHP คำนวณให้) */
  --_gc:    var(--_c, 4);   /* การ์ดสถิติ */
  --_rc:    var(--_c, 3);   /* ตัวเลขแบบแถว */

  /* ให้ query ตาม "ความกว้างกล่องที่ตัวเองได้รับ" ไม่ใช่ความกว้างจอ —
     section นี้ถูกวางในคอลัมน์แคบ ๆ ได้ (กล่องพรีวิวในหน้าแอดมิน / sidebar / group 2 คอลัมน์)
     ถ้าดูแต่ @media จอกว้างแต่กล่องแคบจะยังวาง 2 คอลัมน์จนตัวอักษรเรียงลงมาทีละตัว */
  container-type: inline-size;

  box-sizing: border-box;
  font-family: var(--dwr-fe-font, "Prompt", "Noto Sans Thai", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma, sans-serif);
  color: var(--_ink);
  line-height: 1.5;
}

.dwr-stat *,
.dwr-stat *::before,
.dwr-stat *::after { box-sizing: border-box; }

.dwr-stat__inner { width: 100%; }

/* ─── Header ─────────────────────────────────────────────── */
.dwr-stat__head { margin: 0 0 22px; }
.dwr-stat__title { margin: 0 0 6px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--_p); }
.dwr-stat__desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--_meta); }

/* ═══ 1) การ์ดสถิติ (cards) ═══════════════════════════════ */
/* ไม่มีกรอบ/พื้นหลัง/ระยะขอบของตัวเอง — เหมือนสไตล์กราฟ
   design มีพื้นฟ้าอ่อนรองอยู่ก็จริง แต่ให้ group ใน Page editor เป็นคนใส่
   ไม่งั้นซ้อนกับพื้นหลังที่ผู้ดูแลเว็บตั้งไว้เอง กลายเป็นกล่องซ้อนกล่อง */
.dwr-stat--cards {
  padding: 0;
}

.dwr-stat__grid {
  display: grid;
  gap: var(--_g);
  grid-template-columns: repeat(var(--_gc), minmax(0, 1fr));
  align-items: stretch;
}

.dwr-stat__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--_bd);
  border-radius: var(--_r);
  box-shadow: var(--_sh);
  padding: 18px 18px 16px;
}

/* ชิดบน ไม่ใช่กึ่งกลาง — ชื่อรายการยาวไม่เท่ากัน ถ้ากึ่งกลางไอคอนจะลอยคนละระดับกันทั้งแถว */
.dwr-stat__card-head { display: flex; align-items: flex-start; gap: 12px; }
.dwr-stat__card-text { min-width: 0; }

/* ไอคอน — pointer-events:none กัน lightbox ของ dwr-news (ผูกกับ <img> ทุกตัวทั้งเว็บ) เด้งขึ้นมา */
.dwr-stat__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}
/* ไม่บังคับให้เต็มกรอบ — ไฟล์เล็กกว่ากรอบจะได้ไม่ถูกขยายจนแตก
   (SVG ที่มีแต่ viewBox ก็วาดได้ปกติ เบราว์เซอร์ให้ขนาดตั้งต้นมาแล้ว max-width จึงหดลงมาพอดีกรอบ) */
.dwr-stat__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.dwr-stat__label {
  margin: 0;
  font-size: var(--_fs-title, 14px);
  line-height: 1.45;
  font-weight: 600;
  color: var(--_c-title, var(--_ink));
  word-break: break-word;
}

.dwr-stat__value { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dwr-stat__num { font-size: var(--_fs-num, 28px); line-height: 1.15; font-weight: 700; color: var(--_c-num, var(--_p)); }
.dwr-stat__unit { font-size: var(--_fs-unit, 13px); font-weight: 500; color: var(--_c-unit, var(--_meta)); }
.dwr-stat__sub { margin: 2px 0 0; font-size: var(--_fs-desc, 12.5px); line-height: 1.45; color: var(--_c-desc, var(--_meta)); }

.dwr-stat__date {
  margin: auto 0 0;
  padding-top: 10px;
  font-size: var(--_fs-date, 12px);
  line-height: 1.4;
  color: var(--_c-date, var(--_meta));
}

/* ═══ 1b) การ์ดพร้อมปุ่ม (link_cards) ═══════════════════════
   สีของแต่ละใบมาจาก --_a ที่ PHP ใส่เป็น inline style ตามช่อง "สี" ของรายการนั้น
   คุมไอคอน/หัวข้อ/ตัวเลข/หน่วย/ปุ่ม พร้อมกัน · ไม่ได้ตั้งสี = ใช้สีแบรนด์กลางของเว็บ
   ─────────────────────────────────────────────────────────── */
.dwr-stat__lcard {
  --_a: var(--_p);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--_bd);
  border-radius: var(--_r);
  box-shadow: var(--_sh);
  padding: 22px;
}

.dwr-stat__lcard-head { display: flex; align-items: flex-start; gap: 14px; }
.dwr-stat__lcard-text { min-width: 0; }

/* ไม่ใส่พื้นหลังให้ไอคอน — ไฟล์ไอคอนที่อัปโหลดมีพื้นหลังของตัวเองอยู่แล้ว
   ถ้าใส่ให้อีกจะกลายเป็นกล่องซ้อนกล่อง · สีประจำการ์ด (--_a) คุมหัวข้อ/ตัวเลข/หน่วย/ปุ่ม เท่านั้น */
.dwr-stat__lcard-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.dwr-stat__lcard-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.dwr-stat__lcard-title {
  margin: 0 0 6px;
  font-size: var(--_fs-title, 19px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--_c-title, var(--_a));
  word-break: break-word;
}
.dwr-stat__lcard-desc {
  margin: 0;
  font-size: var(--_fs-desc, 15px);
  line-height: 1.55;
  color: var(--_c-desc, var(--_ink));
}

/* แถวตัวเลข — ดันชิดล่างเสมอ ปุ่มของทุกใบจะได้อยู่ระดับเดียวกันเวลาการ์ดสูงเท่ากัน */
.dwr-stat__lcard-figure {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 52px;
  padding-right: 72px;
}
.dwr-stat__lcard-figure .dwr-stat__num { font-size: var(--_fs-num, 40px); line-height: 1.1; font-weight: 700; color: var(--_c-num, var(--_a)); }
.dwr-stat__lcard-figure .dwr-stat__unit { font-size: var(--_fs-unit, 15px); font-weight: 500; color: var(--_c-unit, var(--_a)); }

/* ภาพประกอบจาง ๆ มุมขวา — ตกแต่งล้วน ๆ กันคลิกโดน lightbox ของ dwr-news */
.dwr-stat__lcard-wm {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  opacity: .16;
  pointer-events: none;
}
.dwr-stat__lcard-wm img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dwr-stat__lcard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--_c-btnbg, var(--_a));
  color: var(--_c-btntx, #fff);
  font-size: var(--_fs-btn, 16px);
  font-weight: 600;
  text-decoration: none;
  transition: filter .18s;
}
.dwr-stat__lcard-btn:hover,
.dwr-stat__lcard-btn:focus { color: var(--_c-btntx, #fff); filter: brightness(.92); }
.dwr-stat__lcard-chev { font-size: 20px; line-height: 1; }

/* ═══ 2) กราฟ (chart) — กล่องเดียว หัวข้อ + แถบเปอร์เซ็นต์ ═══ */
/* ไม่มีกรอบ/พื้นหลัง/ระยะขอบของตัวเอง — เห็นเป็น "กล่องซ้อนกล่อง" กับ group ที่ครอบอยู่
   พื้นหลังกับระยะขอบให้ผู้ดูแลเว็บกำหนดจาก Page editor เอง (แนวเดียวกับที่ไม่กำหนดความกว้าง)
   กล่องขาวที่เห็นคือ .dwr-stat__panel ซึ่งเป็นตัว design เอง */
.dwr-stat--chart {
  padding: 0;
}
.dwr-stat--chart .dwr-stat__head { text-align: center; margin-bottom: 28px; }
.dwr-stat--chart .dwr-stat__title { font-size: 26px; }

.dwr-stat__panel {
  background: #fff;
  border: 1px solid var(--_bd);
  border-radius: var(--_r);
  box-shadow: var(--_sh);
  padding: 22px 24px 24px;
}
.dwr-stat__panel-title { margin: 0 0 18px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--_ink); }

/* ไม่มีช่องไฟระหว่างแถบ — ระยะห่างมาจาก margin ของชื่อรายการแต่ละแถบเท่านั้น */
.dwr-stat__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dwr-stat__bar-label { margin: 0 0 7px; font-size: var(--_fs-title, 14px); line-height: 1.45; color: var(--_c-title, var(--_meta)); }
.dwr-stat__bar-row { display: flex; align-items: center; gap: 12px; }
.dwr-stat__track {
  flex: 1 1 auto;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  background: #E7EAEE;
  overflow: hidden;
}
.dwr-stat__fill { display: block; height: 100%; border-radius: 999px; }
.dwr-stat__pct { flex: 0 0 auto; font-size: var(--_fs-num, 14px); font-weight: 700; color: var(--_c-num, var(--_ink)); }

/* ═══ 3) ตัวเลขแบบแถว (inline) ═════════════════════════════
   ตัวเลข → ชื่อรายการ → คำอธิบายย่อย · คั่นด้วยเส้นตั้ง
   พื้นหลังโปร่ง ไม่มีกรอบการ์ด — ให้สี/ภาพของ section ที่ครอบอยู่ทะลุขึ้นมาตาม design
   ─────────────────────────────────────────────────────────── */
.dwr-stat--inline { padding: 24px 16px; }

.dwr-stat__row {
  display: grid;
  grid-template-columns: repeat(var(--_rc), minmax(0, 1fr));
  align-items: start;
}

.dwr-stat__cell { padding: 6px 22px; text-align: center; }
.dwr-stat__cell + .dwr-stat__cell { border-left: 1px solid var(--_bd); }
.dwr-stat__cell .dwr-stat__icon { margin: 0 auto 8px; display: flex; }

.dwr-stat__cell .dwr-stat__num {
  display: block;
  margin: 0 0 6px;
  font-size: var(--_fs-num, 34px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--_c-num, var(--_ink));
}
.dwr-stat__cell .dwr-stat__label { font-size: var(--_fs-title, 15px); font-weight: 500; }
.dwr-stat__cell .dwr-stat__sub { margin-top: 4px; font-size: var(--_fs-desc, 13px); }

/* ═══ ยืดเต็มความสูงของกล่อง (ตั้งได้ต่อชุด) ════════════════
   วาง 2 ชุดคู่กันแล้วอยากให้สูงเท่ากัน — ตัว <section> ถูก group ของ Page editor
   ยืดให้อยู่แล้ว (grid/flex ยืดลูกเป็นค่าเริ่มต้น) แต่กล่องขาวข้างในสูงตามเนื้อหาตัวเอง
   คลาสนี้ส่งความสูงนั้นต่อลงไปให้ถึงกล่องข้างใน
   ─────────────────────────────────────────────────────────── */
.dwr-stat--fill { height: 100%; }
.dwr-stat--fill .dwr-stat__inner { display: flex; flex-direction: column; height: 100%; }

/* กราฟ: กล่องขาวยืดเต็ม แล้วกระจายแถบให้ห่างเท่า ๆ กันตามความสูงที่ได้ */
.dwr-stat--fill .dwr-stat__panel { flex: 1 1 auto; display: flex; flex-direction: column; }
.dwr-stat--fill .dwr-stat__bars { flex: 1 1 auto; align-content: space-between; }

/* การ์ดสถิติ: แถวในกริดแบ่งความสูงเท่ากัน การ์ดจึงสูงเท่ากันทั้งหมด */
.dwr-stat--fill .dwr-stat__grid { flex: 1 1 auto; grid-auto-rows: 1fr; }

/* ตัวเลขแบบแถว */
.dwr-stat--fill .dwr-stat__row { flex: 1 1 auto; }

/* ─── ข้อความเตือนสำหรับผู้ดูแล (ผู้เข้าชมทั่วไปไม่เห็น) ─── */
.dwr-sc-notice {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px dashed #d9a800;
  border-radius: 8px;
  background: #fffaf0;
  color: #6b5200;
  font-size: 14px;
}

/* ═══ Responsive ═══════════════════════════════════════════
   จำนวนคอลัมน์ต่อ breakpoint ถูกคำนวณมาจาก PHP (--_c3/--_c2/--_c1)
   ด้วย min(ค่าที่ตั้งไว้, เพดานของ breakpoint) → จอแคบลงคอลัมน์ไม่มีทางเพิ่ม
   และชุดที่ตั้งไว้ 2 คอลัมน์ก็ไม่ถูกดันเป็น 4 ตอนจอกลาง

   มีสองชุด ทำหน้าที่ต่างกัน — **แก้ชุดไหนต้องแก้อีกชุดด้วย**:
     @media     = ตามความกว้างจอ · เป็นตัวสำรองให้เบราว์เซอร์เก่าที่ยังไม่รู้จัก @container
     @container = ตามความกว้าง "กล่องที่ section ได้รับ" · ตัวจริงที่ใช้ตัดสิน
   กล่องแคบเสมอ ≤ จอ ดังนั้น @container จะเข้มกว่าหรือเท่ากับ @media เสมอ ไม่ตีกัน
   ─────────────────────────────────────────────────────────── */

/* ── ตามความกว้างจอ (สำรอง) ── */
@media (max-width: 1180px) {
  .dwr-stat { --_gc: var(--_c3, 3); --_rc: var(--_c3, 3); }
}

@media (max-width: 767px) {
  .dwr-stat { --_g: 14px; --_gc: var(--_c2, 2); --_rc: var(--_c2, 2); }
  .dwr-stat--chart .dwr-stat__title { font-size: 22px; }
  .dwr-stat__cell .dwr-stat__num { font-size: var(--_fs-num, 30px); }
  .dwr-stat__lcard-icon { width: 54px; height: 54px; }
  .dwr-stat__lcard-title { font-size: var(--_fs-title, 17px); }
  .dwr-stat__lcard-figure .dwr-stat__num { font-size: var(--_fs-num, 34px); }
  /* เส้นคั่นแนวตั้งใช้ไม่ได้เมื่อขึ้นบรรทัดใหม่ — คั่นด้วยเส้นบนแทน */
  .dwr-stat__cell { padding: 12px 14px; }
  .dwr-stat__cell + .dwr-stat__cell { border-left: 0; }
  .dwr-stat__row > .dwr-stat__cell:nth-child(n + 3) { border-top: 1px solid var(--_bd); }
}

@media (max-width: 520px) {
  .dwr-stat { --_gc: var(--_c1, 1); --_rc: var(--_c1, 1); }
  .dwr-stat__num { font-size: var(--_fs-num, 26px); }
  .dwr-stat__row > .dwr-stat__cell + .dwr-stat__cell { border-top: 1px solid var(--_bd); }
}

/* ── ตามความกว้างกล่องที่ได้รับจริง (ตัวจริง) ──
   เลขต่างจากชุด @media เพราะวัดคนละอย่าง: @media วัดความกว้าง "จอ" ส่วน @container
   วัดความกว้าง "พื้นที่ในกล่อง" ซึ่งหักขอบ/ระยะห่างของ container ที่ครอบอยู่ออกไปแล้ว
   เลขชุดนี้ตั้งจากความกว้างการ์ดที่ยังอ่านออก (~200px/ใบ + ช่องไฟ)
     จอคอมพิวเตอร์ > 1080 · แท็บเล็ต 640–1080 · มือถือ < 640 · มือถือจอเล็ก < 420
   ตรงกับ 3 ช่องที่แอดมินตั้งได้ในหน้าแก้ไข ไม่มี breakpoint ลับที่ตั้งไม่ได้ */
@container (max-width: 1080px) {
  .dwr-stat__inner { --_gc: var(--_c3, 3); --_rc: var(--_c3, 3); }
}

@container (max-width: 640px) {
  .dwr-stat__inner { --_g: 14px; --_gc: var(--_c2, 2); --_rc: var(--_c2, 2); }
  .dwr-stat__inner .dwr-stat__title { font-size: 22px; }
  .dwr-stat__inner .dwr-stat__lcard-icon { width: 54px; height: 54px; }
  .dwr-stat__inner .dwr-stat__lcard-title { font-size: var(--_fs-title, 17px); }
  .dwr-stat__inner .dwr-stat__lcard-figure .dwr-stat__num { font-size: var(--_fs-num, 34px); }
  /* เส้นคั่นแนวตั้งของ "ตัวเลขแบบแถว" ใช้ไม่ได้เมื่อขึ้นบรรทัดใหม่ — คั่นด้วยเส้นบนแทน */
  .dwr-stat__inner .dwr-stat__cell { padding: 12px 14px; }
  .dwr-stat__inner .dwr-stat__cell + .dwr-stat__cell { border-left: 0; }
  .dwr-stat__inner .dwr-stat__row > .dwr-stat__cell:nth-child(n + 3) { border-top: 1px solid var(--_bd); }
}

@container (max-width: 420px) {
  .dwr-stat__inner { --_gc: var(--_c1, 1); --_rc: var(--_c1, 1); }
  .dwr-stat__inner .dwr-stat__num { font-size: var(--_fs-num, 26px); }
  .dwr-stat__inner .dwr-stat__row > .dwr-stat__cell + .dwr-stat__cell { border-top: 1px solid var(--_bd); }
}