/* สไตล์เฉพาะของระบบติดตามการบ้าน — ต่อท้ายธีมกลาง template.css
   🔴 ห้ามแก้ template.css · ห้ามใส่เลขสีตรง ๆ ใช้ตัวแปรจากธีมเท่านั้น
   🔴 ห้ามเขียนทับของที่ธีมมีอยู่แล้ว (.state-box .spinner .stripe .table-wrap
      table.data .kpi .card .pill .flash .field) — เคยเขียนซ้ำแล้วต้องมาตามลบทีหลัง
   🔴 ใช้งานหลักบนมือถือ ทุกอย่างต้องอ่านออกและกดถูกบนจอ 360px

   ในไฟล์นี้มีเฉพาะของที่ธีมกลางไม่มี:
     1. ตัวเลขงานค้างอันใหญ่บนสุด
     2. รายละเอียดแถวงานในตาราง
     3. ปฏิทินรายเดือน
     4. กราฟแท่งและหลอดวัด
     5. การพับตารางเป็นการ์ดบนจอเล็ก
*/

/* ---------- 1. ตัวเลขงานค้าง: สิ่งแรกที่ต้องเห็น ---------- */
.hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: var(--s4);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.hero .big { font-size: 46px; font-weight: 700; line-height: 1; }
.hero .big.zero { color: var(--ok); }
.hero .big.some { color: var(--brand); }
.hero .big.bad { color: var(--danger); }
.hero .label { font-size: 13px; color: var(--ink-soft); }
.hero .sub { font-size: 14px; }

/* ---------- 2. แถวงานในตาราง ---------- */
.hw-title { font-weight: 600; font-size: 13px; }
.hw-title a { color: var(--ink); text-decoration: none; }
.hw-title a:hover { color: var(--brand); text-decoration: underline; }
.hw-left { white-space: nowrap; font-weight: 700; }
.hw-left.late { color: var(--danger); }
.hw-left.today { color: var(--warn); }
.hw-due { color: var(--ink-soft); white-space: nowrap; }
tr.is-late td { background: var(--danger-soft); }
tr.is-today td { background: var(--warn-soft); }
tr.is-snoozed td { opacity: .55; }
/* ช่องแถบสีความรุนแรง — ตัว .stripe เป็นของธีม ที่นี่แค่จัดที่ให้มัน */
table.data td.sev { width: 6px; padding: 0 0 0 2px; }
table.data td.sev .stripe { min-height: 30px; }

/* ---------- 3. ปฏิทิน ---------- */
.cal-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.cal-head .month { font-weight: 700; font-size: 16px; min-width: 150px; text-align: center; }
.cal-grid {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  /* 🔴 ต้องเป็น minmax(0,1fr) ไม่ใช่ 1fr — ไม่งั้นชื่องานยาว ๆ ดันตารางจนทั้งหน้าเลื่อนข้างได้บนมือถือ */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-dow { background: var(--tint); text-align: center; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); padding: var(--s1) 0; }
.cal-day { background: var(--card); min-height: 62px; padding: 3px 4px;
  display: flex; flex-direction: column; gap: 2px; }
.cal-day.blank { background: var(--tint); }
.cal-day.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-day .d { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.cal-day.has { cursor: pointer; }
.cal-dot { font-size: 10px; line-height: 1.25; padding: 1px 3px; border-radius: 3px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--brand-soft); color: var(--brand-dark); }
.cal-dot.done { background: var(--ok-soft); color: var(--ok); }
.cal-dot.late { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 560px) { .cal-day { min-height: 48px; } .cal-dot { font-size: 9px; } }

/* ---------- 4. กราฟแท่งและหลอดวัด (วาดเอง ไม่ใช้ไลบรารีตามกฎโปรเจกต์) ---------- */
.bars { display: flex; align-items: flex-end; gap: var(--s2); height: 150px; padding-top: var(--s3); }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 100%; justify-content: flex-end; }
.bars .stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars .seg-late { background: var(--danger); border-radius: 3px 3px 0 0; }
.bars .seg-ok { background: var(--brand); }
.bars .cap { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.bars .val { font-size: 11px; font-weight: 700; }

.meter { height: 8px; background: var(--tint); border-radius: 99px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--brand); }
.meter.good > i { background: var(--ok); }
.meter.bad > i { background: var(--danger); }

.trend { font-weight: 700; }
.trend.better { color: var(--ok); }
.trend.worse { color: var(--danger); }

/* ---------- ตัวช่วยจัดวางเล็ก ๆ ---------- */
.stack-list { display: flex; flex-direction: column; gap: var(--s2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }
.muted { color: var(--ink-soft); font-size: 13px; }
.right { margin-left: auto; }

/* ---------- 5. จอเล็ก: ตารางงานพับเป็นการ์ด ----------
   🔴 ตารางแนวนอนบนมือถือใช้ไม่ได้จริง ปุ่ม "เตือนแล้ว" หลุดออกนอกจอจนกดไม่ถึง
      (เห็นตอนถ่ายหน้าจอจริงที่ 390px) จึงต้องพับเป็นการ์ด ไม่ใช่ปล่อยให้เลื่อนข้าง */
@media (max-width: 640px) {
  table.data.hwTbl { min-width: 0; }
  .hwTbl thead { display: none; }
  .hwTbl, .hwTbl tbody, .hwTbl tr, .hwTbl td { display: block; width: 100%; }
  .hwTbl tr { border: 1px solid var(--line); border-radius: 10px; padding: var(--s2) var(--s3);
    margin-bottom: var(--s2); background: var(--card); }
  .hwTbl td { border: 0; padding: 2px 0; }
  .hwTbl tr.is-late { background: var(--danger-soft); border-left: 4px solid var(--danger); }
  .hwTbl tr.is-today { background: var(--warn-soft); border-left: 4px solid var(--warn); }
  .hwTbl tr.is-late td, .hwTbl tr.is-today td { background: transparent; }
  .hwTbl td.sev { display: none; }        /* บนการ์ดใช้ขอบซ้ายแทนแถบสี */
  table.data.hwTbl td.num { text-align: left; }   /* ต้องเจาะจงกว่ากฎของธีม ไม่งั้นยังชิดขวาอยู่ */
  .hwTbl td[data-l]::before { content: attr(data-l) ' '; color: var(--ink-soft); font-size: 12px; }
  .hwTbl td:empty { display: none; }
  .hwTbl .btn { width: 100%; margin-top: var(--s2); }
  .table-wrap { overflow-x: visible; }
}