/* ===========================================================================
   ui.css — ชั้นมาตรฐาน UI ของ Face in Time (โหลดหลังสุด ต่อจาก gov.css)

   หน้าที่ของไฟล์นี้
   • Responsive ทุกขนาดจอ: เดสก์ท็อปกว้าง → แล็ปท็อป → แท็บเล็ต → มือถือ (แนวตั้ง/แนวนอน)
   • เมนูข้าง 3 โหมด: เต็ม (>1180px) · ไอคอน rail (≤1180px) · ลิ้นชักเลื่อน drawer (≤768px)
   • ตารางเลื่อนแนวนอนได้เองบนจอแคบ (ห่อด้วย .gv-tblwrap)
   • โมดัล/ไดอะล็อกกลายเป็น bottom-sheet บนมือถือ · toast เต็มความกว้าง
   • ปุ่ม/ช่องกรอกขนาดแตะสบาย (≥40px) · กัน iOS ซูมตอนโฟกัส (16px)
   • โฟกัสคีย์บอร์ดเห็นชัด · เคารพ prefers-reduced-motion · safe-area ของ iPhone
   • โหมดพิมพ์รายงาน (ซ่อนเมนู/หัวบาร์ พื้นขาว)

   Breakpoints (ใช้ร่วมกับ app.jsx):
     1180  ย่อเมนูเป็นไอคอน + ซ่อนข้อความรองบนหัวบาร์
      900  ตารางเริ่มเลื่อนแนวนอน · กราฟ/ตั้งค่าเป็นคอลัมน์เดียว
      768  เมนูเป็น drawer (เฉพาะคอนโซลบนจอเล็ก เช่น ?view=console)
      640  โมดัลเป็น bottom-sheet · ปุ่มหัวหน้ายืดเต็มแถว
      380  การ์ดสถิติเรียง 1 คอลัมน์
   =========================================================================== */

/* ── 1. พื้นฐาน ─────────────────────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:hidden; min-height:100vh; min-height:100dvh; }
body.nav-lock{ overflow:hidden; }
img, video{ max-width:100%; }
button, [role="button"]{ touch-action:manipulation; }

/* โฟกัสด้วยคีย์บอร์ดเห็นชัด (เมาส์/นิ้วไม่ขึ้นกรอบ) */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:8px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline:none; }

@keyframes gvfade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ── 2. โครงหน้า (shell) ────────────────────────────────────────────────── */
.gv-side{ height:100vh; height:100dvh; }
.gv-body{ width:100%; max-width:1680px; margin:0 auto; }
.gv-top{ gap:12px 18px; }
.gv-top-left{ flex:1 1 240px; min-width:0; }
.gv-hello{ min-width:0; }
.gv-hello b{ font-size:clamp(17px, 1.5vw, 22px); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gv-hello .d{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gv-topright{ flex:none; }

/* ไอคอนบนหัวบาร์ (แทนอีโมจิ) */
.gv-manual svg, .gv-theme svg, .gv-collapse svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.gv-collapse svg{ width:19px; height:19px; }
.gv-manual{ gap:6px; min-height:36px; }
.gv-theme span{ display:inline-flex; align-items:center; gap:6px; }
.gv-theme em{ font-style:normal; }
.gv-me{ min-height:44px; }
.gv-me > div:first-child{ min-width:0; }
.gv-me .n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

/* เมนูข้าง: รายการ active ชัดขึ้นด้วยแถบซ้าย */
.gv-nav{ position:relative; }
.gv-nav.on::before{ content:""; position:absolute; left:-16px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--primary); }
.gv-shell.collapsed .gv-nav.on::before{ left:-12px; }

/* ช่วง 769–820px: gov.css เคยซ่อนเมนูทั้งแถบ → ให้เป็น rail ไอคอนแทน */
@media (min-width: 769px) and (max-width: 820px){
  .gv-side{ display:flex; }
  .gv-shell{ grid-template-columns:248px 1fr; }
  .gv-shell.collapsed{ grid-template-columns:74px 1fr; }
}

/* ≤1180px: ซ่อนข้อความรองบนหัวบาร์ (app.jsx ย่อเมนูเป็นไอคอนอัตโนมัติที่จุดนี้) */
@media (max-width: 1180px){
  .gv-top{ padding:14px 22px; }
  .gv-body{ padding:20px 22px 40px; }
  .gv-clock .z{ display:none; }
  .gv-clock .t{ font-size:19px; }
  .gv-manual span{ display:none; }
  .gv-manual{ width:38px; height:38px; padding:0; justify-content:center; }
  .gv-theme em{ display:none; }
  .gv-theme span{ padding:7px 9px; }
  .gv-me{ padding:3px; gap:0; }
  .gv-me > div:first-child{ display:none; }
}

/* ≤900px */
@media (max-width: 900px){
  .gv-hello .d{ font-size:12px; }
}

/* ≤768px: เมนูเป็นลิ้นชัก (drawer) เลื่อนเข้าจากซ้าย */
@media (max-width: 768px){
  .gv-shell, .gv-shell.collapsed{ grid-template-columns:1fr; }
  .gv-side{
    display:flex !important; position:fixed; top:0; left:0; bottom:0; height:100dvh;
    width:min(300px, 86vw); z-index:120; padding-top:max(22px, env(safe-area-inset-top));
    transform:translateX(-104%); transition:transform .22s ease; box-shadow:0 24px 60px rgba(0,0,0,.35);
  }
  .gv-shell.nav-open .gv-side{ transform:none; }
  .gv-backdrop{ position:fixed; inset:0; z-index:110; background:rgba(2,6,23,.55); animation:gvfade .18s ease; }
  .gv-top{ padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top)); gap:8px; }
  .gv-top-left{ gap:10px !important; }
  .gv-body{ padding:14px 14px 40px; }
  .gv-clock{ display:none; }
  .gv-theme span{ padding:6px 8px; }
  .gv-hello .d{ font-size:11.5px; }
  .gv-grid, .gv-cols{ gap:10px; }
  .gv-stat{ padding:14px 16px; }
  .gv-stat .num{ font-size:28px; }
  .gv-card-h{ padding:12px 16px; }
  .gv-card-b{ padding:14px 16px; }
  .fos-sec{ padding:16px; }
  .page-head h1{ font-size:22px; }
  .gv-sec-title{ margin:18px 0 10px; }
}
@media (max-width: 380px){
  .gv-grid{ grid-template-columns:1fr; }
}

/* จอเตี้ย (มือถือแนวนอน): หัวบาร์ไม่ต้องติดขอบบน จะได้เห็นเนื้อหามากขึ้น */
@media (max-height: 520px) and (orientation: landscape){
  .gv-top{ position:static; }
}

/* ── 3. ตาราง: เลื่อนแนวนอนได้เองบนจอแคบ ────────────────────────────────── */
.gv-tblwrap{ width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.gv-tblwrap > .gv-tbl{ width:100%; }
.gv-tbl th, .gv-tbl td{ vertical-align:middle; }
.scroll-thin{ overflow-x:auto; }
@media (max-width: 900px){
  .gv-tblwrap > .gv-tbl{ min-width:640px; }
  .scroll-thin > .tbl{ min-width:900px; }
  .tbl .chip, .gv-tbl .chip, .gv-tbl .gv-chip{ white-space:nowrap; }
  .tbl td > .row, .gv-tbl td > .row{ flex-wrap:nowrap; }
  .gv-tbl th{ padding:10px 12px; }
  .gv-tbl td{ padding:11px 12px; font-size:13px; }
}

/* รายการเครื่องสแกนจากคลาวด์ (page-device) */
.gv-devrows{ overflow-x:auto !important; }
.gv-devrows > div{ min-width:540px; }

/* ── 4. หัวหน้า / แถวตัวกรอง / ฟอร์ม ───────────────────────────────────── */
.page-head{ flex-wrap:wrap; gap:12px 16px; }
.page-head > .row{ flex-wrap:wrap; }
.row{ min-width:0; }
.topbar-search{ min-width:0; }
@media (max-width: 640px){
  .page-head > .row > .btn, .page-head > .row > .gv-btn{ flex:1 1 auto; justify-content:center; }
  .gv-seg{ max-width:100%; overflow-x:auto; }
  .gv-seg button{ white-space:nowrap; }
}

/* ขนาดแตะสบาย */
.gv-btn, .btn{ min-height:40px; }
.gv-btn.sm, .btn-sm{ min-height:34px; }
.gv-input, .gv-select, .input, select.input{ min-height:42px; }
.tb-icon-btn, .gv-collapse{ min-width:36px; min-height:36px; }

/* select: ลูกศรแบบเดียวกันทุกเบราว์เซอร์ */
:root[data-theme] select.gv-select, :root[data-theme] select.input{
  -webkit-appearance:none; appearance:none; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

/* บนจอสัมผัส: ตัวอักษรในช่องกรอก 16px (กัน iOS ซูม) และปุ่มสูงขึ้นอีกนิด */
@media (pointer: coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ font-size:16px; }
  .gv-btn, .btn{ min-height:44px; }
  .gv-btn.sm, .btn-sm{ min-height:38px; }
  ::-webkit-scrollbar{ width:4px; height:4px; }
}

/* ── 5. โมดัล / ไดอะล็อก / toast ────────────────────────────────────────── */
.gv-modal-card{ max-height:90vh; max-height:90dvh; }
@media (max-width: 640px){
  .gv-modal{ padding:0 !important; place-items:end center !important; }
  .gv-modal-card{ max-width:100% !important; border-radius:22px 22px 0 0 !important; max-height:94dvh !important; padding-bottom:env(safe-area-inset-bottom); }
  .gv-modal-body{ padding:16px !important; }
  .gv-dialog{ padding:10px !important; place-items:end center !important; }
  .gv-dialog-card{ max-width:100% !important; margin-bottom:env(safe-area-inset-bottom); }
  .gv-toasts{ left:12px; right:12px !important; bottom:calc(12px + env(safe-area-inset-bottom)) !important; }
  .gv-toasts > div{ min-width:0 !important; max-width:none !important; }
}

/* ── 6. หน้าเฉพาะ ───────────────────────────────────────────────────────── */
/* ตั้งค่า: เมนูหมวดด้านซ้าย → แถบเลื่อนแนวนอนด้านบนเมื่อจอแคบ · รายงาน: กราฟเรียงคอลัมน์เดียว */
@media (max-width: 900px){
  .gv-settings-grid{ grid-template-columns:1fr !important; }
  .gv-settings-nav{ position:static !important; padding:6px !important; }
  .gv-settings-nav-list{ flex-direction:row !important; overflow-x:auto; gap:4px !important; }
  .gv-settings-nav-list > button{ width:auto !important; white-space:nowrap; flex:none; }
  .gv-charts{ grid-template-columns:1fr !important; }
}

/* ── 7. พิมพ์ (รายงาน/ตาราง) ────────────────────────────────────────────── */
@media print{
  :root[data-theme]{
    color-scheme:light;
    --bg:#fff !important; --surface:#fff !important; --surface-2:#f5f5f5 !important;
    --ink:#111 !important; --ink-2:#222 !important; --ink-3:#333 !important; --ink-4:#555 !important; --ink-5:#777 !important;
    --line:#ddd !important; --line-2:#bbb !important;
  }
  body{ background:#fff !important; color:#111 !important; }
  .gv-side, .gv-top, .gv-backdrop, .gv-toasts, .gv-collapse, .page-head > .row{ display:none !important; }
  .gv-shell, .gv-shell.collapsed{ display:block; }
  .gv-body{ padding:0; max-width:none; }
  .gv-card, .gv-stat, .card{ box-shadow:none !important; break-inside:avoid; }
  .gv-tblwrap{ overflow:visible; }
  .gv-tblwrap > .gv-tbl{ min-width:0; }
}

/* ── หน้าล็อกอินโหมดสว่าง (gov.css ตั้งค่า autofill/placeholder ไว้สำหรับโหมดมืด) ── */
:root[data-theme="light"] .fit-login input::placeholder{ color:#94A3B8; }
:root[data-theme="light"] .fit-login input:-webkit-autofill{ -webkit-text-fill-color:#0F172A; -webkit-box-shadow:0 0 0 1000px #FFFFFF inset; }
:root[data-theme="light"] .fit-btn-ghost:hover{ background:rgba(15,23,42,.04); }
@media (max-width: 420px){ .fit-login-site{ display:none; } }