* { box-sizing: border-box; }
html { color-scheme: light; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: #182420;
  background: #e7ebe8;
}
#root { min-height: 100vh; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c2cdc7; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
a { color: #14603f; }
a:hover { color: #0e3325; }
input, select, textarea, button { font-family: inherit; }
button { cursor: pointer; }

/* UI.toast() (ui.jsx) — small slide-up-and-settle on entry (toasts anchor
   bottom-right, so new ones rise into place from below) */
@keyframes ui-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Mobile layout ----
   Everything else in this app is styled with inline `style` objects (no
   className system), so the mobile overrides below rely on a CSS rule with
   `!important` beating a plain inline style — the one case where an
   external stylesheet is allowed to win over `style=`. Components opt in
   by adding the matching className alongside their normal inline style. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* CSS grid/flex items default to min-width:auto, which means a wide table
   inside (even one wrapped in .table-scroll) forces its whole column wider
   instead of scrolling — the classic "overflow:auto did nothing" trap. This
   lets every grid-collapse column actually shrink so the table's own
   scroll takes over instead of blowing out the page width. */
.grid-collapse > * { min-width: 0; }

.csapr-menu-btn { display: none; }
.csapr-sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  .csapr-menu-btn { display: flex !important; }

  .csapr-sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 1000;
    height: 100vh !important;
  }
  .csapr-sidebar.open { transform: translateX(0); }

  .csapr-sidebar-backdrop.open {
    display: block;
    position: fixed; inset: 0;
    background: rgba(14, 51, 37, 0.45);
    z-index: 999;
  }

  .csapr-main { padding: 14px !important; }
  .csapr-topbar { padding: 0 14px !important; gap: 10px !important; }
  .csapr-topbar-title { font-size: 14px !important; }
  .csapr-topbar-btn-label { display: none; }

  /* Any multi-column CSS grid opts into stacking on mobile with this class —
     used for create/edit forms, stat rows, and the PR detail 2-col layout. */
  .grid-collapse { grid-template-columns: 1fr !important; }
  .grid-collapse > *:last-child { position: static !important; }
}

/* PR report print/PDF preview (pr-report.jsx) — browser's own "Print >
   Save as PDF" is the export path, so this just hides the app chrome and
   lets the sheet fill the page instead of trying to render a full PDF
   engine client-side. */
@media print {
  @page { size: A4; margin: 15mm 18mm; }
  .csapr-sidebar, .csapr-sidebar-backdrop, .csapr-topbar, .no-print { display: none !important; }
  body, .csapr-main { background: #fff !important; padding: 0 !important; }
  /* zoom (used on-screen for the admin's report_font_size setting, see
     pr-report.jsx) combined with a flexbox layout is a known Chrome print
     bug — flex children's widths get computed against the pre-zoom box
     while the paint is post-zoom, which collapses the flexible
     "รายละเอียด" column down to almost nothing, wraps its text onto many
     lines, and pushes the sheet onto a 2nd page. Forcing zoom back to 1
     for print sidesteps it — printed output always renders at the sheet's
     base scale regardless of that on-screen font-size setting. */
  /* max-width:100% เดิมพึ่งพาความกว้างของ parent ที่ถูกต้อง — พบจากเครื่อง
     ผู้ใช้จริงว่าบางสภาพแวดล้อมคำนวณออกมาได้ 820px (ค่าเดียวกับ maxWidth บนจอ
     ปกติ ไม่ใช่ความกว้างพิมพ์จริง) ทำให้เนื้อหากว้างเกินไป ล้นขวา/ไม่พอดี — ลอง
     บังคับเป็นหน่วยจริง 174mm (ความกว้าง A4 ลบ margin ซ้ายขวา 18mm ตาม @page)
     ตรงๆ ไปรอบหนึ่งแล้ว แต่กลับล้นขวาจริง (ตัดข้อความ) แทน — แปลว่า mm→px ที่
     เบราว์เซอร์/เครื่องพิมพ์ของผู้ใช้ใช้จริงไม่ตรงกับสมมติฐาน 96dpi (3.7795px/mm)
     ของเราเป๊ะๆ เผื่อเหลือเผื่อขาดตรงนี้ไม่ได้ด้วยการเดาเลขที่ถูกต้องอีกต่อไป —
     กันชนไว้ 5mm ทั้งซ้ายขวา (169mm แทน 174mm) ให้มีที่ว่างเผื่อรับความคลาด
     เคลื่อนของการแปลงหน่วยข้ามสภาพแวดล้อม จะได้ไม่ล้นอีกไม่ว่า mm→px จริงจะ
     ต่างจากที่คำนวณไว้แค่ไหนก็ตาม (ยอมเสียพื้นที่ขอบนิดหน่อยแลกกับไม่มีวันตัด
     ข้อความหายอีก) */
  .pr-print-sheet { border: none !important; box-shadow: none !important; width: 169mm !important; max-width: 169mm !important; margin: 0 auto !important; padding: 0 !important; min-height: 267mm !important; zoom: 1 !important; }
}