/* assets/css/nhf/guest-sheet.css — R80 แผ่น login ของ guest (new-mgmt docs/front/GUEST-FIRST/01-spec.md §3 ; docs/task/38) — เสิร์ฟผ่าน /_css/<NHF_CSS_VER>/ (utils/nhf-css.ts)
 * โหลดเฉพาะ guest render (components/nhf/GuestLoginSheet.vue useHead) ; หน้าที่ login แล้ว/ธงปิดไม่มีไฟล์นี้เลย
 * - overlay: มือถือ (< 768) = bottom sheet เลื่อนขึ้น · PC = กล่องกลางจอ ; ปิดด้วย X / พื้นหลัง / ESC (guest-gate.js) ; body.nhf-gsheet-open ล็อกการเลื่อนหน้า
 * - การ์ดข้างใน = markup การ์ด login เดิมของธีม: default ใช้สไตล์ .bglogin/.subbglogin/.form-middle ของ style.css ที่ทุกหน้ามีอยู่แล้ว (ที่นี่แค่เรียงคอลัมน์เป็นแนวตั้งเหมือนที่มือถือเห็นบนหน้า /login)
 *   red ใช้สไตล์ .rl-card/.rl-form/.rl-extras ที่หน้า /login ของธีมแดงฝัง inline (components/red/pages/Login.vue STYLE) — คัดลอกมาใต้ .nhf-gsheet ทุกค่าเท่าเดิม (สีเดิมของธีม)
 * - กติกาผู้สูงอายุ (owner UI quality bar): ตัวอักษร ≥ 17 px · ปุ่ม/ช่อง ≥ 48 px — ทับค่า 13 px/btn-sm ของการ์ดเดิมเฉพาะในแผ่นนี้
 */
.nhf-gsheet { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: flex-end; justify-content: center; font-family: inherit; }
.nhf-gsheet[hidden] { display: none !important; }
.nhf-gsheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
.nhf-gsheet__panel { position: relative; width: 100%; max-height: 92vh; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; color: #222;
  border-radius: 18px 18px 0 0; padding: 14px 12px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 36px rgba(0, 0, 0, .4); animation: nhf-gsheet-up .22s ease-out; }
.nhf-gsheet__close { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; border: 0; border-radius: 24px; background: transparent; color: #555; font-size: 32px; line-height: 1; cursor: pointer; }
.nhf-gsheet__close:hover, .nhf-gsheet__close:focus { background: rgba(0, 0, 0, .06); outline: none; }
.nhf-gsheet__close:focus-visible { box-shadow: 0 0 0 3px rgba(121, 0, 0, .35); }
.nhf-gsheet__title { margin: 2px 52px 4px 2px; font-size: 21px; font-weight: 600; line-height: 1.3; color: #222; }
.nhf-gsheet__hint { margin: 0 52px 10px 2px; font-size: 17px; line-height: 1.4; color: #555; }
.nhf-gsheet__panel:focus { outline: none; }
.nhf-gsheet .nhf-gsheet__note { margin: 8px 2px 0; font-size: 17px; line-height: 1.4; color: #970215; }
.nhf-gsheet .nhf-gsheet__note[hidden] { display: none; }
@media (min-width: 768px) {
  .nhf-gsheet { align-items: center; padding: 24px; }
  .nhf-gsheet__panel { width: 100%; max-width: 600px; max-height: 90vh; border-radius: 12px; padding: 18px 20px 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); animation: nhf-gsheet-in .18s ease-out; }
  .nhf-gsheet--red .nhf-gsheet__panel { max-width: 480px; }
}
@keyframes nhf-gsheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes nhf-gsheet-in { from { transform: scale(.97); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nhf-gsheet__panel { animation: none; } }
body.nhf-gsheet-open { overflow: hidden; }

/* ---- ตัวอักษร ≥ 17 px · ปุ่ม/ช่อง ≥ 48 px (ทั้ง 2 ธีม) ---- */
.nhf-gsheet .form-control { font-size: 17px !important; min-height: 48px !important; height: auto; } /* !important: theme-override.css `#loginbox .form-control { min-height: 42px }` (id) ชนะ class ของแผ่น */
.nhf-gsheet .btn { font-size: 17px !important; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.nhf-gsheet .btn-sm { padding: 10px 12px; }
.nhf-gsheet .form-check-label, .nhf-gsheet .form-middle label, .nhf-gsheet .forgot a, .nhf-gsheet .forgot, .nhf-gsheet .rl-extras a, .nhf-gsheet .rl-card .d-flex > a { font-size: 17px !important; line-height: 1.4 !important; } /* red: ลิงก์ลืมรหัสผ่านของการ์ดแดงมี inline 13px */
.nhf-gsheet .form-check-input { width: 22px; height: 22px; margin-top: 2px; }
.nhf-gsheet .form-check { padding-left: 32px; min-height: 48px; display: flex; align-items: center; }
.nhf-gsheet .form-check .form-check-input { margin-left: -32px; }
.nhf-gsheet .form-check-label { margin: 0; vertical-align: middle !important; }
.nhf-gsheet .forgot a, .nhf-gsheet .rl-card .d-flex > a { display: inline-flex; align-items: center; min-height: 48px; }

/* ---- default: การ์ด .bglogin/.subbglogin ของ style.css — เรียงแนวตั้ง (เท่าที่มือถือเห็นบนหน้า /login) ไม่ว่ากล่องจะกว้างแค่ไหน ---- */
.nhf-gsheet #loginbox { margin: 0; }
.nhf-gsheet .bglogin { margin-top: 0; }
.nhf-gsheet .bglogin > .row > [class*="col-"], .nhf-gsheet .form-middle > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.nhf-gsheet .indexlogo { text-align: center; margin: 4px 0 6px; }
.nhf-gsheet .form-middle { line-height: 1.4; font-size: 17px; }
.nhf-gsheet .form-middle .form-group { margin-bottom: 8px !important; }
.nhf-gsheet .form-middle .remember, .nhf-gsheet .form-middle .forgot { flex: 0 0 50%; max-width: 50%; line-height: 1.4; margin: 0; }
.nhf-gsheet .form-middle .remember { text-align: left; }
.nhf-gsheet .form-middle .forgot { text-align: right; margin-top: 0; }
.nhf-gsheet .subbglogin { margin-bottom: 0; }
.nhf-gsheet .subbglogin .submenulogin { text-align: center; }
.nhf-gsheet .subbglogin .btoutline .btn { white-space: normal; }

/* ---- red: themes/red/login.php .rl-card (คัดลอกจาก components/red/pages/Login.vue STYLE — ค่าเดิมทุกตัว ยกเว้นขนาดตัวอักษร/ความสูงตามกติกาข้างบน) ---- */
.nhf-gsheet--red .nhf-gsheet__panel { background: #111; color: #eee; }
.nhf-gsheet--red .nhf-gsheet__close { color: #ccc; }
.nhf-gsheet--red .nhf-gsheet__close:hover, .nhf-gsheet--red .nhf-gsheet__close:focus { background: rgba(255, 255, 255, .1); }
.nhf-gsheet--red .nhf-gsheet__title { color: #fff !important; } /* !important: กฎ h2 ของธีมแดง (red.css) ชนะ class ของแผ่น — หัวเรื่องบนแผงดำต้องขาว */
.nhf-gsheet--red .nhf-gsheet__hint { color: #bbb !important; }
.nhf-gsheet--red .nhf-gsheet__note { color: #FCA5A5; }
.nhf-gsheet .rl-card { width: 100%; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 6px; padding: 32px 24px 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, .4); position: relative; z-index: 1; border-top: 3px solid #DC2626; color: #222; }
.nhf-gsheet .rl-logo { text-align: center; margin-bottom: 20px; }
.nhf-gsheet .rl-logo img { max-width: 180px; max-height: 70px; }
.nhf-gsheet .rl-card .logo-text-fallback { font-size: 28px; font-weight: 700; color: #1a1a1a !important; letter-spacing: 2px; }
.nhf-gsheet .rl-form .form-control { background: #fff !important; border: 1px solid #ddd !important; border-radius: 4px !important; padding: 11px 14px !important; color: #222 !important; }
.nhf-gsheet .rl-form .form-control:focus { border-color: #DC2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, .1) !important; }
.nhf-gsheet .rl-form .btn-danger { background: linear-gradient(135deg, #DC2626, #B91C1C) !important; border: none !important; padding: 12px !important; font-weight: 600 !important; border-radius: 4px !important; letter-spacing: .5px; }
.nhf-gsheet .rl-form .btn-danger:hover { background: linear-gradient(135deg, #B91C1C, #991B1B) !important; }
.nhf-gsheet .rl-extras { display: flex; gap: 8px; margin-top: 16px; }
.nhf-gsheet .rl-extras a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px; background: #f5f5f5; border-radius: 4px; color: #333 !important; text-decoration: none; font-weight: 500; transition: all .15s; border: 1px solid #eee; }
.nhf-gsheet .rl-extras a:hover { background: #FEE2E2; color: #DC2626 !important; border-color: #FECACA; }
.nhf-gsheet .rl-card .form-check-label { color: #555 !important; }
.nhf-gsheet .rl-card .d-flex > a { color: #777 !important; }

/* ---- สถานะกำลังขอ token / ส่งฟอร์ม ---- */
.nhf-gsheet.is-busy [data-guest-sheet-submit] { opacity: .7; pointer-events: none; }