/* ============================================
   auth.css — หน้า login / forgot-password
   Split layout: brand panel ซ้าย + ฟอร์มขวา
   ============================================ */

.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ---------- ฝั่งซ้าย: brand ---------- */
.auth-aside {
  background: var(--accent);
  background-image:
    radial-gradient(600px 300px at 20% 20%, rgba(255,255,255,0.12) 0%, transparent 60%),
    radial-gradient(500px 400px at 90% 90%, rgba(0,0,0,0.12) 0%, transparent 55%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.auth-aside-inner { max-width: 380px; }
.auth-logo {
  width: 60px; height: 60px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.auth-aside h1 { font-size: 1.8rem; margin-bottom: var(--space-3); }
.auth-aside p { opacity: 0.9; line-height: 1.7; margin-bottom: var(--space-6); }
.auth-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.auth-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.92rem;
  opacity: 0.95;
}

/* ---------- ฝั่งขวา: ฟอร์ม ---------- */
.auth-main {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  position: relative;
}
.auth-topbar {
  display: flex;
  justify-content: flex-end;
}
.auth-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}
.auth-card-head { margin-bottom: var(--space-6); }
.auth-card-head h2 { font-size: 1.6rem; margin-bottom: var(--space-2); }
.auth-foot { text-align: center; font-size: 0.8rem; padding-top: var(--space-4); }

/* ---------- login: คอลัมน์เดียว (ตัด brand panel ฝั่งซ้ายออก) ----------
   ใช้ flex แทน grid เพื่อให้ฟอร์มจัดกึ่งกลางจอแนวตั้ง+แนวนอน
   หมายเหตุ: ไม่แตะ .auth-wrap เดิม — forgot-password.php ยังเป็น 2 ฝั่งตามเดิม */
.auth-wrap--single {
  display: flex;
  justify-content: center;   /* จัดกึ่งกลางแนวนอน */
}
.auth-wrap--single .auth-main {
  width: 100%;
  max-width: 460px;          /* คุมความกว้างพื้นที่ฟอร์มไม่ให้กว้างเกินบนจอใหญ่ */
}

/* ---------- responsive: ซ่อน brand บนจอเล็ก ---------- */
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

/* ---------- Cloudflare Turnstile (CAPTCHA) ---------- */
.cf-turnstile,
#turnstileBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.cf-turnstile iframe,
#turnstileBox iframe {
  width: 100% !important;
  max-width: 100%;
}

/* ============================================
   หน้า login แบบคอลัมน์เดียว — โลโก้ + หัวเรื่องจัดกึ่งกลาง
   (เฉพาะ .auth-wrap--single เพื่อไม่ให้กระทบหน้า forgot-password ที่เป็น 2 ฝั่ง)
   ============================================ */
.auth-wrap--single .auth-card-head { text-align: center; }

.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.auth-brand img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}


/* ── บรรทัดรองหน้า login: "<ชื่อระบบ> PORTAL · Administrator / · Member" ──
   🔴 จอแคบ (หรือชื่อระบบยาว) จะตัดบรรทัดตรงกลาง แล้วเหลือ "·" ห้อยท้ายบรรทัดแรก
      ดูเหมือนพิมพ์ค้างไว้ — ต้องให้ตัวคั่นกับคำกลุ่มผู้ใช้เป็นก้อนเดียว ตกบรรทัดพร้อมกัน
   ต่ำกว่า 480px ดันลงบรรทัดใหม่ไปเลย แล้วซ่อนตัวคั่นทิ้ง
   (ขึ้นบรรทัดใหม่ทำหน้าที่คั่นแทนอยู่แล้ว ใส่ "·" ซ้ำกลายเป็นขยะ) */
.auth-sub-role { display: block; white-space: nowrap; }
/* ตัวคั่น "·" ไม่ได้ใช้แล้วเพราะขึ้นบรรทัดใหม่ทำหน้าที่คั่นแทน
   แต่คงไว้ใน markup เผื่อวันหลังอยากกลับไปบรรทัดเดียว — ซ่อนด้วย CSS ที่เดียวจบ */
.auth-sub-sep  { display: none; }