/* lab-ui.css — ชั้นหน้าตากลางของเว็บคุมห้องคอม (ครูสั่ง 22 ต.ค. 2569: ฟอนต์ Sarabun ทั้งหมด + ใช้งานง่ายขึ้น)
   โหลดต่อท้าย <head> ของทุกหน้า (ผ่าน lab-ui.inc.php) จึงทับสไตล์เฉพาะหน้าได้ โดยไม่ต้องแก้ CSS ยาว ๆ ของแต่ละหน้า
   - ฟอนต์ Sarabun (SIL OFL) เก็บในเว็บเอง fonts/ ไม่พึ่ง Google ตอนนักเรียน/ครูใช้งาน · แคช 1 ปี
   - แถบเมนูกลาง .labnav (เหมือนกันทุกหน้า) · ปุ่ม/ช่องกรอกใหญ่พอแตะบนมือถือ · วงโฟกัสชัด · พิมพ์แล้วซ่อนเมนู
   ไม่มีตัวจับเวลา ไม่ยิงเน็ตเอง (ไฟล์เดียว + ฟอนต์ 4 ไฟล์ ~128 KB ครั้งเดียวแล้วแคช) */

@font-face{font-family:"Sarabun";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/sarabun-400.woff2") format("woff2")}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/sarabun-500.woff2") format("woff2")}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/sarabun-600.woff2") format("woff2")}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/sarabun-700.woff2") format("woff2")}

:root{--lab-font:"Sarabun","Segoe UI",Tahoma,"Leelawadee UI",sans-serif;--lab-mono:Consolas,"Cascadia Mono","Courier New",monospace;
  --lab-focus:#60a5fa;--lab-nav-bg:var(--panel,#111c30);--lab-nav-line:var(--line,#1e2a3d);--lab-nav-ink:var(--ink,var(--text,#e2e8f0));--lab-nav-dim:var(--dim,var(--sub,var(--muted,#94a3b8)))}

/* ---------- ฟอนต์: Sarabun ทุกที่ (ยกเว้นข้อความโค้ด/เลขรหัสที่ต้องเว้นระยะเท่ากัน) ---------- */
html,body,button,input,select,textarea,table,th,td,label,a,h1,h2,h3,h4,p,li,summary,dialog,
.btn,.pill,.tag,.box,.card,.sub,.muted{font-family:var(--lab-font)}
code,pre,kbd,samp,.mono,.code,textarea.mono{font-family:var(--lab-mono)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:max(16px,1rem);line-height:1.6;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}

/* ---------- ปุ่ม/ช่องกรอก: แตะง่าย (≥ 42px) · วงโฟกัสชัด ---------- */
.btn,.pill,button.btn,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){min-height:42px}
.btn,.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.3;text-decoration:none}
.btn.sm,.btn.icon{min-height:36px}
.btn.icon{min-width:42px}
select,input,textarea{font-size:1rem}
:focus-visible{outline:3px solid var(--lab-focus);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.pill:focus-visible{outline-offset:3px}
a{text-underline-offset:3px}
label{font-weight:500}
table th{font-weight:600}
tbody tr:hover td{background:rgba(148,163,184,.08)}
::selection{background:rgba(96,165,250,.35)}

/* ---------- แถบเมนูกลาง (แบบปุ่มเรียง เห็นครบในคลิกเดียว · รื้อใหม่ 28 ต.ค. 2569) ---------- */
.labnav{position:sticky;top:0;z-index:60;background:var(--lab-nav-bg);border-bottom:1px solid var(--lab-nav-line);
  box-shadow:0 2px 10px rgba(0,0,0,.25);margin:0 0 12px}
.labnav a,.labnav button{color:var(--lab-nav-ink);text-decoration:none;font-family:inherit}
/* แถวบน: โลโก้ + หน้าปัจจุบัน + ออกจากระบบ */
.labnav-top{max-width:1280px;margin:0 auto;padding:6px 12px;display:flex;align-items:center;gap:10px}
.labnav .ln-brand{display:flex;align-items:center;gap:9px;font-weight:700;padding:4px 6px;border-radius:10px}
.labnav .ln-brand:hover{background:rgba(148,163,184,.12)}
.labnav .ln-logo{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#2563eb)}
.labnav .ln-title{display:block;line-height:1.2}
.labnav .ln-site{font-size:.8rem;font-weight:400;color:var(--lab-nav-dim);display:block;line-height:1.2}
.labnav .ln-here{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-weight:600;
  background:rgba(96,165,250,.16);border:1px solid rgba(96,165,250,.4);color:var(--lab-nav-ink)}
.labnav .ln-here-ic{font-size:1.05em}
.labnav .ln-grow{flex:1}
.labnav .ln-out{border:1px solid var(--lab-nav-line);border-radius:10px;min-height:42px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;font-weight:600;white-space:nowrap}
.labnav .ln-out:hover{background:rgba(248,113,113,.16);border-color:#f87171}
/* แถวล่าง: ปุ่มไอคอนทุกหน้า */
.labnav-tabs{max-width:1280px;margin:0 auto;padding:0 10px 8px;display:flex;flex-wrap:wrap;gap:6px}
.labnav .ln-back{flex:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:52px;padding:0 12px;
  border:1px dashed var(--lab-nav-line);border-radius:12px;background:transparent;font-weight:600;color:var(--lab-nav-dim)}
.labnav .ln-back:hover{background:rgba(148,163,184,.12);color:var(--lab-nav-ink)}
.labnav .ln-tab{flex:1 1 92px;min-width:84px;max-width:150px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 8px;border-radius:12px;border:1px solid var(--lab-nav-line);background:var(--panel2,var(--lab-nav-bg));
  font-weight:600;font-size:.86rem;text-align:center;line-height:1.15}
.labnav .ln-tab .ln-ic{font-size:1.35rem;line-height:1}
.labnav .ln-tab:hover{background:rgba(148,163,184,.16);border-color:var(--lab-nav-dim)}
.labnav .ln-tab.on{background:var(--lab-focus);border-color:var(--lab-focus);color:#06142b}
.labnav .ln-tab.on .ln-lb{font-weight:700}
header .brand .logo{display:none}   /* โลโก้ซ้ำกับแถบเมนูกลาง */

@media (max-width:760px){
  .labnav{position:static}
  .labnav-top{padding:6px 10px;gap:8px}
  .labnav .ln-site{display:none}
  .labnav .ln-here{display:none}
  .labnav .ln-out{min-height:44px;padding:0 10px}
  /* มือถือ: ปุ่มเลื่อนแนวนอนแถวเดียว ปัดนิ้วดูได้ครบ ไม่มีเมนูซ่อน */
  .labnav-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:0 10px 10px;gap:8px}
  .labnav .ln-back{min-height:60px}
  .labnav .ln-tab{flex:0 0 auto;width:78px;max-width:none;min-height:60px;scroll-snap-align:start}
  .btn,.pill,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){min-height:44px}
  table{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media print{.labnav{display:none!important}}