/* ══════════════════════════════════════════════════════════════════
   แดชบอร์ด + ตัวอ่านบันทึกการตรวจสอบ — P10
   (app.css มาก่อนเสมอ ไฟล์นี้ทับของมันได้)

   ── กติกาสามข้อที่ไฟล์นี้ยึด ──────────────────────────────────────

   1. ความกว้างของแท่งทุกแท่งมาจาก data-w → applyWidths() ใน app.js
      ไฟล์นี้จึงกำหนดได้แค่ "ราง" กับ "สีของแท่ง" ห้ามมีความกว้างตายตัวของแท่งที่นี่
      CSP เป็น style-src 'self' — style= ในสตริง HTML ถูกบล็อกเงียบ ๆ บนโปรดักชัน

   2. ตัวเลขทุกตัวที่เรียงกันเป็นคอลัมน์ ใช้ตัวเลขความกว้างเท่ากัน (.num ใน app.css)
      กราฟที่ป้ายเลื่อนไปมาระหว่างแถวคือกราฟที่อ่านเทียบกันไม่ได้

   3. ไทยไม่ letter-spacing และบรรทัดไม่ต่ำกว่า 1.75 — มาจากตัวแปร --lh / --track
      ที่ :root[lang="th"] ตั้งไว้แล้ว ห้ามเขียนทับด้วยค่าตายตัวที่นี่
   ══════════════════════════════════════════════════════════════════ */

.db { padding-bottom: 8px; }

/* ───────────────────────── ไทล์ตัวเลข ───────────────────────── */

/*
 * auto-fit ที่ 104px: ที่ 390px ได้สามคอลัมน์ · ที่ 768px ได้หกถึงเจ็ด
 * ไม่ล็อกจำนวนคอลัมน์ไว้ เพราะจำนวนไทล์เปลี่ยนตามสิ่งที่มีข้อมูลจริง
 */
.db-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
}

.db-tile {
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  justify-content: center;
}

/* จาง = "ตัวเลขนี้ยังไม่มีความหมาย" ไม่ใช่ "ตัวเลขนี้แย่"
   ตัวเลขที่ไม่มีตัวส่วนถูกวาดเป็น '—' อยู่แล้ว ความจางคือชั้นที่สองของสารเดียวกัน */
.db-tile.is-dim { opacity: .55; }

.db-tile-v {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
/* หน่วยเล็กท้ายตัวเลข ('วัน') — ต้องไม่ดึงสายตาไปจากตัวเลข */
.db-tile-v i { font-size: 13px; font-weight: 400; font-style: normal; color: var(--ink-mute); }

.db-tile-k { font-size: 12px; color: var(--ink-dim); line-height: var(--lh); }
.db-tile-n { font-size: 11px; color: var(--ink-mute); min-height: 14px; }

/* ───────────────────────── แผงแท่งนอน ───────────────────────── */

.db-panel { margin-bottom: 22px; }

/* ค่าสูงสุดของแกน เขียนไว้บนหัวแผงเสมอ — แท่งที่ไม่มีแกนกำกับคือแท่งที่เทียบอะไรไม่ได้ */
.db-axis {
  font-size: 11px;
  color: var(--ink-mute);
  margin: -4px 0 8px;
  letter-spacing: var(--track);
}

.db-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

/*
 * สามคอลัมน์: ป้าย · ราง · ค่า
 * ป้ายกับค่ากว้างตายตัว เพื่อให้รางของทุกแถวเริ่มและจบที่ตำแหน่งเดียวกันเป๊ะ ๆ
 * ถ้าปล่อยให้ยืดตามเนื้อหา คืนที่มีเลขสามหลักจะทำให้รางของทั้งคอลัมน์สั้นลง
 * แล้วการเทียบด้วยสายตาจะผิด ทั้งที่ตัวเลขถูกทุกตัว
 */
.db-bar {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.db-bar-lab {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-bar-track {
  position: relative;
  height: 14px;
  border-radius: 3px;
  background: var(--track-bg);
  overflow: hidden;
}

/* ความกว้างมาจาก data-w เท่านั้น — ค่าเริ่มต้นเป็น 0 เพื่อให้ "ลืมเรียก applyWidths()"
   เป็นแท่งที่หายไป ไม่ใช่แท่งที่เต็มราง ซึ่งจะอ่านเหมือนข้อมูลจริง */
.db-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--bronze);
}

.db-bar-val {
  font-size: 12px;
  color: var(--ink);
  text-align: right;
}

/* ───────────────────────── สามตัวเลขเรียงกัน ───────────────────────── */

.db-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.db-trio > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; }
.db-trio b { font-size: 20px; font-weight: 600; color: var(--ink); }
.db-trio span span { font-size: 11.5px; color: var(--ink-mute); line-height: var(--lh); }

/* ───────────────────────── รายการสั้น (การยกเว้นส่วนต่าง) ───────────────────────── */

.db-list { list-style: none; margin: 0; padding: 0; }
.db-li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;          /* ไม่ใช่เป้าสัมผัส แต่ต้องอ่านได้ที่ระยะแขนในที่มืด */
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.db-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-li-main b { font-size: 14px; }
.db-li-date { font-size: 12px; color: var(--ink-mute); flex: none; }

/* ───────────────────────── ยอดที่พิมพ์เข้ามาเอง ─────────────────────────
   จางกว่าทุกอย่างบนหน้า โดยตั้งใจ และอยู่ล่างสุดเสมอ
   มันคือบันทึกช่วยจำ ไม่ใช่ยอดขาย — เหตุผลเต็มอยู่ที่หัวไฟล์ ui/dashboard/index.js */

.db-spend {
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 24px;
}
.db-spend-v { font-size: 20px; font-weight: 600; color: var(--ink-dim); margin: 0 0 4px; }

/* ───────────────────────── ตัวอ่านบันทึกการตรวจสอบ ───────────────────────── */

.au { padding-top: 12px; }

/* แถวบันทึกใช้ .row ของ app.css แต่สูงได้ตามเนื้อหาเมื่อถูกกางออก */
.au-row { align-items: flex-start; height: auto; }
/* แต่ละบรรทัดย่อยของแถวบันทึก (ใคร · คืนไหน / เหตุผล) ต้องขึ้นบรรทัดของตัวเอง
   .row-main ปกติเป็นแถวเดียวของรายการจอง เหตุผลเลยไปต่อท้ายชื่อในบรรทัดเดียวกัน (13 ต.ค.) */
.au-row .row-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.au-row .row-sub { display: block; }
.au-row.is-open { background: var(--surface); }

.au-detail { display: block; margin-top: 8px; }

.au-diff { margin: 6px 0 0; padding: 0; }
.au-pair { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.au-pair dt {
  font-size: 11px;
  color: var(--ink-mute);
  min-width: 96px;
  flex: none;
  font-family: var(--font-latin);
}
.au-pair dd {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
  word-break: break-word;
  line-height: var(--lh);
}
/* ค่าเดิมถูกขีดฆ่า ค่าใหม่หนา — อ่านออกโดยไม่ต้องมีสีเข้ามาช่วย
   (คนที่ตาบอดสีอ่านบันทึกการตรวจสอบเหมือนกัน) */
.au-pair s { color: var(--ink-mute); }
.au-pair b { color: var(--ink); }

/* ───────────────────────── จอกว้าง ───────────────────────── */

@media (min-width: 640px) {
  .db-bar { grid-template-columns: 96px 1fr 64px; }
  .db-tile-v { font-size: 28px; }
}