/* ===================================================================
   planner.css — PL-1 (S23 เฟส 1 · มติ D41): สไตล์เฉพาะหน้า planner
   ใช้โทเคนสี/ฟอนต์จาก styles.css ตัวจริง (สัญญา D27) ผ่าน var() เท่านั้น
   — ไม่ประกาศสีแบรนด์ใหม่ · มี fallback กันตัวแปรหาย
   =================================================================== */

/* ป้ายเครื่องมือวางแผน — โทนเหลืองเตือนแบบเดียวกับป้าย 🧪 ผลจำลอง */
.plbanner {
  border: 1px solid var(--amber, #b58a1b);
  background: rgba(240, 180, 41, .12);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: .92rem;
}

/* กล่องตัวเลขใหญ่ (แบบแผน .sbig ของ dashboard แต่ประกาศแยก ไม่พึ่ง class เดิม) */
.plgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 8px 0;
}
.plbox {
  border: 1px solid rgba(128, 128, 128, .22);
  border-left: 4px solid var(--gray, #8a8f98);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.plnum { font-family: 'Prompt', sans-serif; font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.pllb { font-size: .82rem; color: var(--mut, #6b7280); }

/* ช่องกรอกแผนรายเดือน — grid ยืดหยุ่น 3 ช่องจนถึง 12 ช่องไม่ล้นมือถือ */
.plinputs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.plmon label { display: block; font-size: .85rem; margin-bottom: 4px; font-weight: 600; }
.plmon input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid rgba(128, 128, 128, .45);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  color: inherit;
}
.plmon input:focus { outline: 2px solid var(--green, #1e7a46); border-color: var(--green, #1e7a46); }

.plbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* ตารางเส้นทางสะสม */
.pltable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pltable th, .pltable td { padding: 6px 8px; border-bottom: 1px solid rgba(128, 128, 128, .22); white-space: nowrap; }
.pltable th { text-align: left; font-family: 'Prompt', sans-serif; font-weight: 600; }
.plrow-plan { background: rgba(240, 180, 41, .08); }
/* D43: แถว "เดือนนี้" (เดือนปฏิทินปัจจุบันที่ยังไม่จบ) เด่นกว่าแถวแผนปกติเล็กน้อย */
.plrow-now { background: rgba(240, 180, 41, .2); }
.plrow-now td:first-child { font-weight: 700; }

/* D43 (3.4): บรรทัดอธิบายฐาน (เมื่อ dashboard นับเดือนที่ยังไม่จบ) — โทนเตือนเดียวกับ plbanner */
.plbasenote {
  border-left: 3px solid var(--amber, #b58a1b);
  background: rgba(240, 180, 41, .1);
  border-radius: 6px;
  padding: 6px 10px;
}

.plchart { position: relative; height: 260px; margin-bottom: 12px; }
.plchart canvas { max-width: 100%; }

/* overlay โหลด (id/คลาสของ planner เอง — ไม่พึ่ง overlay ของ dashboard) */
.plload {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .72);
}
[data-theme="dark"] .plload { background: rgba(10, 14, 12, .6); }
.plload-in {
  font-family: 'Prompt', sans-serif;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid rgba(128, 128, 128, .3);
  background: var(--card, #fff);
}
[data-theme="dark"] .plload-in { background: #16211b; }

/* หัวเอกสารตอนพิมพ์ — ซ่อนบนจอ */
.printhead { display: none; }

@media print {
  .noprint, .plchart, .topbar { display: none !important; }
  body { background: #fff !important; }
  .printhead { display: block; margin: 0 0 12px; }
  .printhead h2 { font-family: 'Prompt', sans-serif; margin: 0 0 4px; font-size: 1.2rem; }
  .printhead p { margin: 0; font-size: .85rem; color: #444; }
  .card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc; }
  .plmon input { border: none; border-bottom: 1px dotted #999; border-radius: 0; font-weight: 700; }
  .plbanner { border-color: #999; background: #f5f5f5; }
}

/* มือถือแคบ: กล่องตัวเลข/ช่องกรอกเรียงคอลัมน์เดียว กันเบียด */
@media (max-width: 420px) {
  .plgrid { grid-template-columns: 1fr; }
  .plinputs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .plnum { font-size: 1.25rem; }
}