/* ═══════════════════════════════════════════════════════════════
   login.css — หน้าเข้าสู่ระบบ (login_sso.php / login.php)
   ปรับเลย์เอาต์ตามขนาดและทิศทางของจอ ไม่ตรวจชนิดอุปกรณ์
     คอมพิวเตอร์   ≥1100px            แบ่งสองฝั่ง ซ้ายโลโก้ ขวาฟอร์ม
     iPad แนวนอน  768–1099px แนวนอน  แบ่งสองฝั่งเหมือนกัน (โลโก้เล็กลง)
     iPad แนวตั้ง  768–1099px แนวตั้ง  การ์ดกลางหน้า โลโก้อยู่บนการ์ด
     มือถือ        <768px หรือจอแนวนอนเตี้ย  เต็มจอ โลโก้ด้านบน
   สีหลักตั้งที่ config.php: define('LOGIN_ACCENT', 'red' | 'blue')
   ═══════════════════════════════════════════════════════════════ */
:root{
  --lg-ac:#D61514; --lg-ac-d:#B91212; --lg-act:#FDEEEE; --lg-pan:#F9F4F3;
  --lg-sys:#4A90D9; --lg-sysd:#2563EB; --lg-sysl:#EBF4FF;
  --lg-fg:#1F2937; --lg-mut:#6B7280; --lg-line:#D9D3D1;
  --lg-h:46px; --lg-fs:15px;
  color-scheme:light;
}
.lg-blue{ --lg-ac:#2563EB; --lg-ac-d:#1D4ED8; --lg-act:#EAF1FF; --lg-pan:#F3F6FB; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.lg{ margin:0; font-family:'Sarabun','Noto Sans Thai','Thonburi',system-ui,sans-serif; color:var(--lg-fg);
  background:#fff; line-height:1.5; }

/* ── โครงหน้า: ค่าเริ่มต้น = แบ่งสองฝั่ง ── */
.lg-page{ position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.lg-card{ flex:1; display:grid; grid-template-columns:46fr 54fr; }
.lg-brand{ position:relative; overflow:hidden; background:var(--lg-pan); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem; }
.lg-wm{ position:absolute; left:-14%; bottom:-12%; width:86%; height:auto; opacity:.05; pointer-events:none; }
.lg-bi{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.9rem; }
.lg-logo{ display:block; width:min(300px,70vw); height:auto; }
.lg-pn{ text-align:center; font-size:1.65rem; font-weight:500; line-height:1.3; }
.lg-pn span{ display:block; font-size:.95rem; font-weight:400; color:var(--lg-mut); }
.lg-caps{ position:absolute; left:0; right:0; bottom:1.7rem; text-align:center; font-size:.82rem; color:#9CA3AF; padding:0 1rem; }
.lg-form{ display:flex; flex-direction:column; align-items:center; padding:1.5rem 1.5rem 4.5rem; background:#fff; }
.lg-inner{ width:min(380px,100%); margin-block:auto; padding-block:1.5rem; }
.lg-ver{ position:absolute; bottom:0; left:46%; right:0; padding-bottom:.9rem; text-align:center; }
.lg-ver > div{ padding:0 !important; color:#9CA3AF !important; opacity:1 !important; font-size:.75rem !important; }

/* ── ข้อความ ── */
.lg-h1{ margin:0; font-size:1.75rem; font-weight:500; line-height:1.25; }
.lg-sub{ margin:.25rem 0 1.5rem; color:var(--lg-mut); font-size:.93rem; }
.lg-lb{ display:block; margin-bottom:.4rem; font-size:.85rem; font-weight:500; color:#4B5563; }
.lg-lb small{ font-weight:400; color:var(--lg-mut); font-size:.8rem; }
.lg-note{ margin:0 0 1rem; font-size:.85rem; color:var(--lg-mut); line-height:1.7; text-align:center; }

/* ── ช่องกรอก / ปุ่ม ── */
.lg-in{ display:block; width:100%; height:var(--lg-h); margin:0 0 1rem; padding:0 14px; font:inherit;
  font-size:max(16px,var(--lg-fs)); color:var(--lg-fg); background:#fff; border:1px solid var(--lg-line);
  border-radius:10px; -webkit-appearance:none; appearance:none; }
.lg-in::placeholder{ color:#9CA3AF; }
.lg-in:focus{ outline:none; border-color:var(--lg-ac); box-shadow:0 0 0 4px var(--lg-act); }
.lg-pw{ position:relative; }
.lg-pw .lg-in{ padding-right:48px; }
.lg-eye{ position:absolute; top:0; right:2px; width:44px; height:var(--lg-h); display:flex; align-items:center;
  justify-content:center; border:0; background:none; color:#9CA3AF; cursor:pointer; border-radius:10px; }
.lg-eye:hover,.lg-eye[aria-pressed="true"]{ color:var(--lg-fg); }
.lg-eye:focus-visible{ outline:3px solid var(--lg-act); }
.lg svg{ width:1.2em; height:1.2em; flex:none; }
.lg-btn{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; height:var(--lg-h); margin:0;
  padding:0 1rem; font:inherit; font-size:var(--lg-fs); font-weight:500; color:#fff; background:var(--lg-ac);
  border:1px solid var(--lg-ac); border-radius:10px; cursor:pointer; text-decoration:none; }
.lg-btn:hover{ background:var(--lg-ac-d); border-color:var(--lg-ac-d); }
.lg-btn:focus-visible{ outline:3px solid var(--lg-act); outline-offset:2px; }
.lg-btn:disabled{ opacity:.6; cursor:wait; }
.lg-btn.s{ color:#374151; background:#fff; border-color:var(--lg-line); font-weight:400; }
.lg-btn.s:hover{ background:#F9FAFB; }
.lg-btn.o{ color:var(--lg-sysd); background:#fff; border-color:var(--lg-sys); }
.lg-btn.o:hover{ background:var(--lg-sysl); }
.lg-two{ display:flex; gap:.6rem; margin-top:.6rem; }
.lg-two > *{ flex:1; margin:0; }

/* ── กล่องข้อความ ── */
.lg-al{ display:flex; gap:.5rem; margin:0 0 1rem; padding:.65rem .8rem; font-size:.88rem; line-height:1.55;
  border-radius:10px; border:1px solid; }
.lg-al.err{ color:#B42318; background:#FEF2F2; border-color:#F8D3D0; }
.lg-al.ok{ color:#166534; background:#F0FDF4; border-color:#BBF7D0; }
.lg-al.warn{ color:#92400E; background:#FFFBEB; border-color:#FDE68A; }

/* ── ผู้ใช้ที่กำลังยืนยัน (ขั้น OTP) ── */
.lg-id{ display:flex; align-items:center; gap:.75rem; margin:0 0 1rem; padding:.7rem .85rem; background:var(--lg-act);
  border-radius:12px; }
.lg-av{ flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--lg-ac); border-radius:50%; font-weight:500; }
.lg-id b{ display:block; font-weight:500; }
.lg-id small{ display:block; color:var(--lg-mut); font-size:.8rem; line-height:1.5; }

/* ── ช่องรหัส OTP: ช่องกรอกจริงช่องเดียว (เติมจาก SMS/วางรหัสได้) + กล่อง 6 ช่องที่ JS วาดทับ ── */
.lg-otp{ position:relative; margin:0 0 1rem; }
.lg-otp .lg-in{ margin:0; text-align:center; font-size:1.5rem; font-weight:700; letter-spacing:.5rem; font-variant-numeric:tabular-nums; }
.lg-otp.js .lg-in{ position:absolute; inset:0; height:100%; opacity:0; z-index:2; padding:0; }
.lg-otp .bx{ display:none; gap:8px; }
.lg-otp.js .bx{ display:flex; }
.lg-otp .bx i{ flex:1; height:calc(var(--lg-h) + 8px); display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:1.5rem; font-weight:500; font-variant-numeric:tabular-nums; background:#fff;
  border:1px solid var(--lg-line); border-radius:10px; }
.lg-otp .bx i.on{ border-color:var(--lg-ac); box-shadow:0 0 0 4px var(--lg-act); }

/* ── ขั้นตอน 1-2-3 (หน้าเข้าด้วยรหัสบุคลากร) ── */
.lg-steps{ display:flex; align-items:center; gap:.4rem; margin:0 0 1.25rem; font-size:.78rem; color:var(--lg-mut); }
.lg-steps .st{ display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.lg-steps .n{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:#F3F0EF; color:var(--lg-mut); font-size:.72rem; font-weight:500; }
.lg-steps .st.on{ color:var(--lg-fg); font-weight:500; }
.lg-steps .st.on .n{ background:var(--lg-ac); color:#fff; }
.lg-steps .st.done .n{ background:var(--lg-act); color:var(--lg-ac); }
.lg-steps .ln{ flex:1; height:1px; background:var(--lg-line); min-width:8px; }

/* ── ส่วนแจ้งปัญหา: บรรทัดที่ 1 ข้อความ · บรรทัดที่ 2 ปุ่มสีน้ำเงินตามระบบ ── */
.lg-rep{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid #EEE9E7; text-align:center; color:var(--lg-mut); }
.lg-rep .t{ margin:0 0 .65rem; font-size:calc(var(--lg-fs) - 3px); line-height:1.4; white-space:nowrap; }
.lg-rep .t b{ font-weight:500; color:#374151; }
.lg-rep .lg-btn{ height:calc(var(--lg-h) - 4px); font-size:calc(var(--lg-fs) - 1px); }
.lg-rep.hot .lg-btn{ background:var(--lg-sysl); border-color:var(--lg-sysd); }

/* ── popup รอ ── */
.lg-ov{ display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center;
  background:rgba(17,24,39,.45); padding:1rem; }
.lg-ov .bx{ min-width:230px; max-width:100%; padding:1.75rem 2.25rem; text-align:center; background:#fff; border-radius:16px; }
.lg-spin{ width:34px; height:34px; margin:0 auto .8rem; border:3px solid var(--lg-act); border-top-color:var(--lg-ac);
  border-radius:50%; animation:lg-sp 1s linear infinite; }
.lg-ov b{ display:block; font-weight:600; font-size:1rem; color:#1A3A5C; }
.lg-ov small{ display:block; margin-top:.3rem; font-size:.82rem; color:#94B8D4; }
@keyframes lg-sp{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .lg-spin{ animation-duration:2.4s; } }

/* ── จอสัมผัส: ช่องกรอกใหญ่ขึ้น และตัวอักษร ≥16px กัน iPhone ซูมหน้าเอง ── */
@media (pointer:coarse){ :root{ --lg-h:52px; --lg-fs:16px; } }

/* ── iPad / จอกลางแนวนอน: แบ่งสองฝั่ง โลโก้เล็กลง ── */
@media (min-width:768px) and (max-width:1099px){
  :root{ --lg-h:52px; --lg-fs:16px; }
  .lg-card{ grid-template-columns:42fr 58fr; }
  .lg-ver{ left:42%; }
  .lg-logo{ width:min(240px,70%); }
  .lg-pn{ font-size:1.5rem; }
}

/* ── iPad แนวตั้ง: การ์ดกลางหน้า โลโก้อยู่บนการ์ด ── */
@media (min-width:768px) and (max-width:1099px) and (orientation:portrait){
  :root{ --lg-h:54px; --lg-fs:17px; }
  body.lg{ background:#FAF8F7; }
  .lg-card{ display:block; flex:none; width:540px; max-width:calc(100% - 48px); margin:clamp(24px,8vh,80px) auto 24px;
    padding:40px 52px; background:#fff; border:1px solid #ECE7E5; border-radius:18px; }
  .lg-brand{ padding:0; margin-bottom:26px; background:none; overflow:visible; }
  .lg-wm,.lg-pn,.lg-caps{ display:none; }
  .lg-bi{ gap:0; }
  .lg-form{ padding:0; }
  .lg-inner{ width:100%; margin:0; padding:0; }
  .lg-ver{ position:static; margin-top:auto; padding:0 0 1rem; }
  .lg-h1{ font-size:1.9rem; }
  .lg-h1,.lg-sub{ text-align:center; }
}

/* ── มือถือ (และจอแนวนอนที่เตี้ยมาก): เต็มจอ โลโก้ด้านบน ── */
@media (max-width:767px), (orientation:landscape) and (max-height:600px){
  :root{ --lg-h:52px; --lg-fs:16px; }
  body.lg{ background:#fff; }
  .lg-card{ display:block; flex:none; width:100%; max-width:520px; margin:0 auto;
    padding:calc(env(safe-area-inset-top,0px) + 20px) 24px 8px; background:none; border:0; border-radius:0; }
  .lg-brand{ padding:0; margin:0 0 18px; background:none; overflow:visible; }
  .lg-wm,.lg-pn,.lg-caps{ display:none; }
  .lg-bi{ gap:0; }
  .lg-logo{ width:min(168px,52vw); }
  .lg-form{ padding:0; }
  .lg-inner{ width:100%; margin:0; padding:0; }
  .lg-ver{ position:static; margin-top:auto; padding:1.2rem 0 calc(env(safe-area-inset-bottom,0px) + .9rem); }
  .lg-h1{ font-size:1.65rem; }
  .lg-h1,.lg-sub{ text-align:center; }
  .lg-sub{ margin-bottom:1.1rem; }
  .lg-rep{ margin-top:1.1rem; }
  .lg-rep .t{ font-size:clamp(11.5px,3.6vw,13px); }
}
@media (max-width:319px){ .lg-rep .t{ white-space:normal; } }