/* ============================================================
   รองรับการเปิดบนจอคอมพิวเตอร์
   ------------------------------------------------------------
   ไฟล์นี้ต้องถูก <link> ไว้ "หลัง" แท็ก <style> ของแต่ละหน้า
   เพื่อให้ทับค่าเดิมของหน้านั้นได้

   บนมือถือหน้าตาไม่เปลี่ยน — กฎในไฟล์นี้มีผลเฉพาะตอนที่
   หน้าต่างเบราว์เซอร์เตี้ยกว่ากรอบ หรือกว้างกว่ามือถือ
   ============================================================ */

/* ---- 1) แก้บั๊กเนื้อหาโดนตัดเมื่อจอเตี้ย ----
   เดิมใช้ body { align-items:center } ซึ่งเมื่อกรอบสูงเกินหน้าต่าง
   ส่วนเกินจะล้นขึ้นไปด้านบนแล้วเลื่อนขึ้นไปดูไม่ได้
   เปลี่ยนมาใช้ margin:auto บนตัวกรอบแทน จัดกึ่งกลางได้เหมือนเดิม
   แต่เมื่อพื้นที่ไม่พอจะดันให้เลื่อนดูได้ตามปกติ */
body { align-items: stretch; }

.screen { margin: auto; }

/* ---- 2) กางเต็มหน้าต่างเสมอ ทุกขนาดจอ ----
   แต่ละหน้าเขียน width:360px; height:844px ไว้เป็นกรอบมือถือจำลอง
   ซึ่งพอดีเฉพาะเครื่องที่กว้าง 360px เป๊ะ

   มือถือสมัยใหม่กว้าง 390-430px แท็บเล็ตยิ่งกว้างกว่านั้น
   ถ้าไม่ทับค่านี้ จะเหลือแถบดำสองข้างตลอดเวลา
   กฎนี้จึงต้องอยู่นอก media query ไม่งั้นเครื่องที่แคบกว่า 700px ไม่โดน */
.screen {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- 2.1) ความสูงเท่าที่มองเห็นจริง ----
   หน้าที่ล็อกความสูงไว้ ให้สูงเท่าหน้าต่างพอดี ไม่ใช่ 844px ตายตัว
   เพราะจอที่สูงกว่านั้นจะเหลือช่องว่างที่ก้น ส่วนจอเตี้ยกว่าจะโดนตัด

   100dvh = ความสูงที่มองเห็นจริง ปรับตามแถบ URL ของมือถือที่ยืด-หดเอง
   ส่วน 100vh นับรวมพื้นที่ที่แถบ URL บังอยู่ด้วย แถบเมนูล่างจะตกใต้ขอบจอ */
.screen.fixed-h { height: 100vh; }

@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .screen.fixed-h { height: 100dvh; }
  /* หน้าที่ยืดตามเนื้อหา (ลงทะเบียน ฯลฯ) ก็ให้อ้างอิงความสูงที่มองเห็นจริงเช่นกัน */
  .screen:not(.fixed-h) { min-height: 100dvh; }
}

/* ---- 3) พื้นหลังนอกกรอบบนจอกว้าง ---- */
@media (min-width: 700px) {
  body { background: #111111; }
}

/* ============================================================
   5) ความสูงและความกว้างของเนื้อหาบนจอกว้าง
   ------------------------------------------------------------
   ทุกหน้ากางเต็มหน้าต่างแล้ว (ข้อ 3) ส่วนนี้คุมว่าเนื้อหาข้างใน
   จะยืดตามไปด้วยแค่ไหน

   คลาส full-pc ของเดิมไม่ต้องใช้แล้ว แต่ปล่อยไว้ในหน้าที่มีอยู่ได้
   ไม่มีผลอะไร ส่วน wide-page ใช้ยกเว้นหน้าที่ต้องการพื้นที่เต็มจริงๆ
   ============================================================ */
@media (min-width: 700px) {
  /* ---- ตัว UI ข้างในไม่ยืดตาม ----
     กรอบกางเต็มจอ แต่การ์ด/ฟอร์มยังคุมความกว้างแล้วจัดกลาง
     เพราะฟอร์มที่กว้างเกิน ~500px สายตาจะกวาดอ่านยาก */
  .screen .content > * {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- ไม่ใส่เพดานความกว้างให้ .scroll แบบเหมารวม ----
     เคยลองแล้วพัง เพราะหลายหน้ามีของที่ตั้งใจให้กินเต็มขอบอยู่ข้างใน
     เช่นแถบชมพูหลังการ์ดโปรไฟล์ พอบีบ .scroll แถบจะลอยไม่ถึงขอบจอ
     หน้าไหนต้องคุมความกว้าง ให้คุมที่กล่องเนื้อหาของหน้านั้นเอง */
}

/* ============================================================
   6) ขยายขนาด UI ตามความกว้างจอ  (คลาส pc-scale)
   ------------------------------------------------------------
   จอยิ่งกว้าง เนื้อหายิ่งใหญ่ขึ้นตามสัดส่วน — ทุกอย่างโตพร้อมกัน
   ทั้งโลโก้ ตัวหนังสือ ช่องกรอก ปุ่ม และระยะห่าง
   การจัดวางจึงเหมือนเดิมเป๊ะ แค่ใหญ่ขึ้นทั้งชุด

   ใช้ zoom แทนการไล่แก้ font-size ทีละอัน เพราะ zoom มีผลกับ
   ทั้ง layout ไม่ใช่แค่หน้าตา ตำแหน่งจึงไม่เพี้ยน
   ============================================================ */
:root { --pc-scale: 1; }

@media (min-width: 700px)  { :root { --pc-scale: 1.1; } }
@media (min-width: 1100px) { :root { --pc-scale: 1.2; } }
@media (min-width: 1500px) { :root { --pc-scale: 1.3; } }

/* เพดานตามความสูงหน้าต่าง — ต้องอยู่ "หลัง" บันไดด้านบนถึงจะทับได้
   โน้ตบุ๊กจอกว้างแต่เตี้ย (เช่น 1536x700) ถ้าขยาย 1.3 เท่า เนื้อหาจะล้นจนต้องเลื่อนตลอด
   ไม่มีผลกับมือถือ เพราะต่ำกว่า 700px ไม่ได้ใช้ zoom อยู่แล้ว */
@media (max-height: 900px) { :root { --pc-scale: 1.15; } }
@media (max-height: 760px) { :root { --pc-scale: 1.05; } }

/* ซูมเฉพาะเนื้อหาข้างใน ส่วนตัวกรอบยังกางเต็มจอเหมือนเดิม

   หมายเหตุ: ห้ามไปหารความกว้างคืนเอง เบราว์เซอร์แปลงขนาดของกล่องแม่
   เข้าสู่ระบบพิกัดของ zoom ให้อยู่แล้ว ความกว้างแบบ auto/100%
   จึงพอดีขอบเสมอ ถ้าไปหารซ้ำจะเหลือที่ว่างทางขวา */
/* ห่อไว้ใน media query ด้วย ไม่ใช่ปล่อยให้เป็น zoom:1 บนมือถือ
   เพราะ zoom ที่ไม่เท่ากับ 1 จะกลายเป็น containing block ของลูกที่ position:absolute/fixed
   ต่ำกว่า 700px จึงไม่ควรมีคุณสมบัตินี้ติดอยู่เลย มือถือจะได้เหมือนเดิมเป๊ะ */
@media (min-width: 700px) {
  .screen.pc-scale > * { zoom: var(--pc-scale); }
}

/* ============================================================
   7) ปรับเฉพาะจอคอม — เส้นหนาขึ้น + ช่องกรอกสั้นลง
   ------------------------------------------------------------
   บนมือถือไม่แตะเลย ทุกกฎอยู่ใน media query ทั้งหมด
   ============================================================ */
@media (min-width: 700px) {

  /* ---- เส้นขอบหนาขึ้น ----
     เส้น 1px บนจอคอมความละเอียดสูงจะดูจางจนแทบมองไม่เห็น */
  .screen.pc-scale .field input,
  .screen.pc-scale .field select { border-width: 2px; }

  .screen.pc-scale .tab      { border-bottom-width: 3px; }
  .screen.pc-scale .btn-back { border-width: 2px; }
  .screen.pc-scale .btn-sub  { border-width: 2px; }

  /* หน้า Sign in — ช่องกรอกขอบชมพู */
  .screen.pc-scale .form input { border-width: 2.5px; }

  /* ---- ช่องที่อยู่ลำพังทั้งแถว ให้สั้นลงเหลือ 40% ----
     บนจอกว้างการ์ดกางเต็มจอ ช่องกรอกจึงยืดยาวจนดูไม่สมส่วน */
  .screen.pc-scale .field input,
  .screen.pc-scale .field select { width: 40%; }

  /* ยกเว้นช่องที่จับคู่กันอยู่แล้ว (เลขนิสิต + ชื่อ-นามสกุล ของสมาชิก)
     พวกนี้แบ่งครึ่งแถวอยู่แล้ว ให้เต็มช่องของตัวเองเหมือนเดิม */
  .screen.pc-scale .row .field input,
  .screen.pc-scale .row .field select { width: 100%; }

  /* ช่องรหัสผ่านมีปุ่มรูปตาซ้อนอยู่ ต้องย่อที่ตัวครอบแทน
     ไม่งั้นปุ่มจะไปเกาะขอบขวาของการ์ด หลุดจากช่องกรอก */
  .screen.pc-scale .pw-wrap { width: 40%; }
  .screen.pc-scale .pw-wrap input { width: 100%; }
}

/* ============================================================
   แถวบนสุดของหน้า — ปุ่ม "กลับ" ซ้าย / ปุ่มเมนู ขวา
   ------------------------------------------------------------
   หน้าที่ไม่มีปุ่มกลับ ให้ใส่ <span></span> ไว้ตำแหน่งซ้ายแทน
   เพื่อให้ปุ่มเมนูถูกดันไปชิดขวาเสมอ
   ============================================================ */
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.top-row .menu-btn { margin-bottom: 0; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  color: #E81876;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.back-link:hover { opacity: .8; }

/* ============================================================
   แถบเมนูล่าง — ตรึงไว้ก้นจอเสมอ ลอยทับเนื้อหา
   ------------------------------------------------------------
   ใช้ absolute เทียบกับ .screen (ไม่ใช่ fixed เทียบหน้าต่าง)
   เพื่อให้ยังอยู่ในกรอบมือถือตอนเปิดบนคอม
   ============================================================ */
.screen .nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

/* เว้นที่ก้นพื้นที่เลื่อน ไม่ให้เนื้อหาบรรทัดสุดท้ายถูกแถบเมนูบัง */
.screen .scroll { padding-bottom: 80px; }

/* ============================================================
   8) จับคู่ช่องให้อยู่แถวเดียวกันเฉพาะบนจอคอม  (คลาส pc-row)
   ------------------------------------------------------------
   บนมือถือ display:contents ทำให้ตัวครอบนี้เหมือนไม่มีอยู่จริง
   ช่องข้างในจึงเรียงลงมาทีละแถวเหมือนเดิมทุกประการ
   ============================================================ */
.pc-row { display: contents; }

@media (min-width: 700px) {
  .pc-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  /* ให้แต่ละช่องกว้าง 40% เท่ากับช่องเดี่ยวช่องอื่น */
  .pc-row > .field { flex: 0 0 40%; }

  .screen.pc-scale .pc-row .field input,
  .screen.pc-scale .pc-row .field select { width: 100%; }
}

/* ============================================================
   9) หน้ารอ (loading overlay)  — ใช้คู่กับ loading.js
   ------------------------------------------------------------
   คลุมทั้งกรอบ .screen ระหว่างรอเซิร์ฟเวอร์ตอบ
   เพื่อไม่ให้ผู้ใช้คิดว่าเครื่องค้างแล้วกดซ้ำ
   ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  background: #111111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.overlay.show { opacity: 1; visibility: visible; }

.overlay .spinner {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(232, 24, 118, .25);
  border-top-color: #E81876;
  border-radius: 50%;
  animation: overlay-spin .8s linear infinite;
}
@keyframes overlay-spin { to { transform: rotate(360deg); } }

.overlay .overlay-text {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  max-width: 260px;
  line-height: 1.5;
  white-space: pre-line;   /* ให้ \n ในข้อความขึ้นบรรทัดใหม่ได้ */
}

/* บอกผู้ใช้เมื่อเน็ตช้าผิดปกติ จะได้ไม่คิดว่าเครื่องค้าง */
.overlay .overlay-hint {
  color: #cfcfcf;
  font-size: 12px;
  text-align: center;
  max-width: 230px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity .3s ease;
}
.overlay .overlay-hint.show { opacity: 1; }

/* ปิดการเคลื่อนไหวให้ผู้ที่ตั้งค่าลดอนิเมชันไว้ */
@media (prefers-reduced-motion: reduce) {
  .overlay .spinner { animation-duration: 2s; }
  .overlay { transition: none; }
}

/* ============================================================
   10) แผนผังบูธบนจอกว้าง  (คลาส .map ของ booking.html / teacher.html)
   ------------------------------------------------------------
   กล่องแผนผังสูง 300-305px ตายตัว ซึ่งพอดีกับมือถือ
   แต่บนคอม/แท็บเล็ตกล่องกว้างขึ้นเป็นเท่าตัวโดยที่ความสูงเท่าเดิม
   สคริปต์ fit() ย่อผังด้วย min(กว้าง/BOARD_W, สูง/BOARD_H) ตัวหารที่ชนะ
   จึงเป็นความสูงเสมอ ผังเลยยังเล็กเท่าเดิมแล้วเหลือที่ว่างซ้าย-ขวาเป็นแถบเทายาว

   แก้ด้วยการเพิ่มความสูงตามความกว้างจอ ผังจะขยายตามเอง
   เพราะ ResizeObserver ในหน้านั้นเรียก applyView() ให้ใหม่ทุกครั้งที่กล่องเปลี่ยนขนาด

   ตัวเลขข้างล่างเป็นหน่วยก่อนคูณ zoom ของ pc-scale (1.1 / 1.2 / 1.3)
   ความสูงที่เห็นจริงจึงเป็น ~440 / ~516 / ~585px ตามลำดับ
   บนมือถือไม่แตะเลย — ทุกกฎอยู่ใน media query ทั้งหมด
   ============================================================ */
@media (min-width: 700px) {
  .screen .map {
    --map-h: 400px;
    height: var(--map-h);
    /* ล็อกสัดส่วนกล่องให้เท่าผังจริง (BOARD_W x BOARD_H ใน booths.js = 2010 x 930)
       ถ้าปล่อยให้กว้างเต็มจอ ผังจะโดนความสูงบีบไว้ แล้วเหลือแถบว่างซ้าย-ขวายาวๆ */
    width: min(100%, calc(var(--map-h) * 2010 / 930));
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1500px) { .screen .map { --map-h: 470px; } }

/* จอเตี้ย (โน้ตบุ๊ก 768px / แท็บเล็ตแนวนอน) — เผื่อที่ให้การ์ดข้างล่างด้วย
   ตัวเลขนี้เป็นหน่วยก่อนคูณ zoom จึงเห็นจริงราว 1.1-1.3 เท่า */
@media (min-width: 700px) and (max-height: 820px) {
  .screen .map { --map-h: 300px; }
}