/**
 * member-portal.css
 * -----------------------------------------------------------------------------
 * หน้า /my-bookings — พอร์ทัลจัดการการจองด้วยตนเองของผู้ลงทะเบียน
 *
 * ★ ใช้ตัวแปรจาก theme.css ทั้งหมด **ไม่มีค่าสีดิบสักค่าเดียว** เพื่อให้หน้านี้เปลี่ยน
 *   ตามสีประจำองค์กรที่แอดมินตั้งใน Sheet เหมือนหน้าอื่นทุกหน้าโดยอัตโนมัติ
 * ★ ปุ่ม ช่องกรอก และกล่องข้อความ ใช้คลาสที่มีอยู่แล้วใน theme.css (`primary-button`
 *   `form-message` `field-label`) — ที่นี่มีเฉพาะของที่หน้านี้เท่านั้นที่มี
 */

/* ---------- โครงหน้า ---------- */

.portal-panel {
  max-width: 460px;
  margin: 0 auto;
}

.portal-panel-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-heading);
  color: var(--text-primary);
}

.portal-panel-intro {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* แถบบนสุดของ Dashboard: อีเมลที่ล็อกอินอยู่ + ปุ่มออกจากระบบ */
.portal-account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.portal-account-email {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  /* อีเมลยาว ๆ ต้องไม่ดันปุ่มออกนอกจอบนมือถือ */
  overflow-wrap: anywhere;
}

/* ---------- ช่องกรอกรหัส 6 หลัก ---------- */

.otp-input-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
}

.otp-cell {
  /* บังคับความกว้างเป็นสัดส่วนของ grid ไม่ใช่ 100% ของช่องกรอกปกติ */
  width: 100%;
  min-height: 56px;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.otp-cell:focus {
  outline: none;
  border-color: var(--accent-ui);
  box-shadow: var(--shadow-focus);
}

/* รหัสไม่ถูกต้อง — กรอบแดงคือสารตัวจริง ส่วนการสั่นเป็นตัวช่วยเรียกสายตา */
.otp-input-group.is-rejected .otp-cell {
  border-color: var(--danger-fill);
}

.otp-input-group.is-rejected {
  animation: otp-shake var(--duration-slow) var(--ease-out);
}

@keyframes otp-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(3px);
  }
}

/* ★ ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหวได้กรอบแดงอย่างเดียว ซึ่งสื่อความหมายครบเท่ากัน */
@media (prefers-reduced-motion: reduce) {
  .otp-input-group.is-rejected {
    animation: none;
  }
}

.otp-expiry {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.otp-expiry.is-urgent {
  color: var(--warning-text);
  font-weight: var(--weight-semibold);
}

.otp-expiry.is-expired {
  color: var(--danger-text);
  font-weight: var(--weight-semibold);
}

.otp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ---------- รายการจอง ---------- */

.portal-section {
  margin-bottom: var(--space-6);
}

.portal-section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  color: var(--text-primary);
}

.booking-list {
  display: grid;
  gap: var(--space-3);
}

.booking-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-4);
  padding: var(--space-card-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

/* รายการที่จบไปแล้วต้องอยู่ในสายตาได้โดยไม่แย่งความสนใจจากรายการที่ยังต้องทำอะไร */
.booking-card.is-past {
  background: var(--surface-sunken);
  box-shadow: none;
}

.booking-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--accent-surface);
  text-align: center;
}

.booking-date-block.is-dateless {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.booking-date-day {
  font-size: 30px;
  line-height: 1.05;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.booking-date-month {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
}

.booking-body {
  min-width: 0; /* ให้ข้อความยาว ๆ ตัดบรรทัดแทนที่จะดันการ์ดกว้างเกินจอ */
}

.booking-title {
  margin: 0 0 2px;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.booking-meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.booking-code-line {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---------- ป้ายสถานะ ---------- */

.booking-pill {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.booking-pill.is-success {
  background: var(--success-surface);
  border-color: var(--success-border);
  color: var(--success-text);
}

.booking-pill.is-warning {
  background: var(--warning-surface);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.booking-pill.is-info {
  background: var(--info-surface);
  border-color: var(--info-border);
  color: var(--info-text);
}

.booking-pill.is-muted {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--text-muted);
}

/* ---------- ปุ่มและคำอธิบายใต้การ์ด ---------- */

.booking-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.ghost-button {
  min-height: 40px; /* ยังผ่านเกณฑ์เป้าแตะเมื่อรวม gap ของแถว */
  padding: 0 var(--space-4);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.ghost-button:hover:not([disabled]) {
  border-color: var(--accent-ui);
  background: var(--accent-surface);
}

.ghost-button.is-danger {
  color: var(--danger-text);
  border-color: var(--danger-border);
}

.ghost-button.is-danger:hover:not([disabled]) {
  background: var(--danger-surface);
  border-color: var(--danger-fill);
}

.ghost-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* เส้นบอกเส้นตาย — กินทั้งแถวเสมอเพื่อไม่ให้ไปเบียดปุ่มบนจอแคบ */
.booking-deadline-note {
  flex-basis: 100%;
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ข้อความแทนปุ่มเมื่อจัดการเองไม่ได้แล้ว — ต้องอ่านออกว่าเป็น "คำอธิบาย" ไม่ใช่ error */
.booking-blocked-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.booking-empty-line {
  margin: 0;
  padding: var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--text-muted);
}

/* ---------- รายละเอียดที่กรอกไว้ ---------- */

.booking-details {
  margin-top: var(--space-3);
}

.booking-details > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-text);
}

.booking-details > summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

.booking-detail-content {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

/* ★ วางป้ายชื่อไว้ "เหนือ" ค่าเสมอ ไม่แบ่งซ้าย-ขวา
   🔴 เดิมเป็นตารางสองคอลัมน์ ซึ่งพังกับข้อมูลจริงทันที: ป้ายชื่อภาษาไทยยาว ๆ
      (เช่นข้อความยินยอม PDPA ที่ยาวเป็นบรรทัด) กินความกว้างไปเกือบหมด เหลือคอลัมน์ขวา
      แคบจนค่าอย่าง "SAKDINON YAMSUKSAWAD" หรือรหัสนักศึกษาถูกตัดคำกลางคำ
      อ่านไม่ออกและดูเหมือนหน้าเสีย · การวางซ้อนกันทำให้ทั้งป้ายและค่าได้ความกว้างเต็ม */
.detail-list {
  margin: 0;
}

.detail-list dt {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* เส้นคั่นบาง ๆ ระหว่างรายการ ช่วยให้กวาดตาอ่านเป็นคู่ ๆ ได้โดยไม่ต้องมีกรอบ */
.detail-list dt + dd {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--text-primary);
  /* ค่าที่เป็นสตริงยาวไม่มีช่องว่าง (อีเมล/รหัส) ต้องตัดได้ ไม่งั้นดันกล่องกว้างเกินจอ */
  overflow-wrap: anywhere;
}

/* รายการสุดท้ายไม่ต้องมีเส้นคั่นและช่องว่างท้าย */
.detail-list dd:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ---------- ปฏิทินในกล่องเลือกวันใหม่ ---------- */

.move-calendar-host {
  margin-top: var(--space-3);
  text-align: left;
}

/* ---------- จอแคบ ---------- */

@media (max-width: 480px) {
  .booking-card {
    /* แผ่นวันที่เตี้ยลงและกินเต็มแถวบน เพื่อให้เนื้อหาได้ความกว้างเต็มจอ */
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .booking-date-block {
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .booking-date-day {
    font-size: var(--text-xl);
  }

  .booking-actions .ghost-button {
    flex: 1 1 100%;
  }

  .otp-input-group {
    gap: 6px;
  }

  .otp-cell {
    min-height: 52px;
    font-size: var(--text-lg);
  }
}