/* ==========================================================
   auth.css — Login & Register
   ใช้ design tokens เดียวกับ dashboard.css
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

:root {
  --bg:     #f2f0fb;
  --card:   #ffffff;
  --border: #e9e5f7;

  --p1:  #6e62f0;  --p1l: #edeaff;  --p1d: #5750cc;
  --p2:  #f4607a;  --p2l: #fff0f3;
  --p3:  #2ec4a0;  --p3l: #e5faf6;
  --p4:  #f5a623;  --p4l: #fff7ea;

  --txt:  #252240;
  --txt2: #6b6882;
  --txt3: #aaa8c0;

  --rx: 22px;
  --rl: 16px;
  --rm: 12px;
  --rs: 8px;

  --sh:    0 2px 10px rgba(110,98,240,.08);
  --sh-md: 0 6px 28px rgba(110,98,240,.14);

  --t: .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: 'Noto Sans Thai', sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.6;
}

/* ════════════════════════════════════════
   PAGE LAYOUT — split screen
════════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 400px 1fr;
}

/* ── Left: sidebar branding ── */
.auth-side {
  background: linear-gradient(160deg, var(--p1) 0%, #9b91ff 65%, #c4beff 100%);
  display: flex; flex-direction: column;
  padding: 36px 32px 32px;
  position: relative; overflow: hidden;
  min-height: 100vh;
}
.auth-side::before,
.auth-side::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.auth-side::before { width: 400px; height: 400px; top: -130px; right: -150px; }
.auth-side::after  { width: 280px; height: 280px; bottom: -90px; left: -90px; }

.auth-brand {
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 1;
}
.auth-brand-logo {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--rm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff; flex-shrink: 0;
}
.auth-brand-txt h2 {
  font-family: 'Poppins', sans-serif;
  font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.2;
}
.auth-brand-txt span {
  font-size: .66rem; color: rgba(255,255,255,.6);
  letter-spacing: .08em; text-transform: uppercase;
}

.auth-hero {
  margin-top: auto; margin-bottom: auto;
  position: relative; z-index: 1;
}
.auth-hero-icon {
  width: 76px; height: 76px; border-radius: 20px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff; margin-bottom: 22px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.auth-hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.65rem; font-weight: 700; color: #fff;
  line-height: 1.3; margin-bottom: 12px;
}
.auth-hero p {
  font-size: .85rem; color: rgba(255,255,255,.7); line-height: 1.75;
}

.auth-features {
  margin-top: 32px; display: flex; flex-direction: column; gap: 9px;
  position: relative; z-index: 1;
}
.auth-feature {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--rl); padding: 10px 14px;
}
.auth-feature i    { font-size: 1rem; color: rgba(255,255,255,.9); flex-shrink: 0; }
.auth-feature span { font-size: .8rem; color: rgba(255,255,255,.8); font-weight: 500; }

.auth-copy {
  position: relative; z-index: 1;
  font-size: .69rem; color: rgba(255,255,255,.4);
  margin-top: 24px; text-align: center;
}

/* ── Right: form area ── */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
  overflow-y: auto;
}

.auth-box {
  width: 100%; max-width: 440px;
  animation: authIn .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.auth-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--rx);
  padding: 32px;
  box-shadow: var(--sh-md);
}
.auth-card-head { margin-bottom: 24px; }
.auth-card-icon {
  width: 46px; height: 46px; border-radius: var(--rl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: 14px;
}
.auth-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem; font-weight: 700; color: var(--txt);
  line-height: 1.25; margin-bottom: 5px;
}
.auth-card-sub { font-size: .81rem; color: var(--txt3); }

/* ════════════════════════════════════════
   ALERTS
════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; border-radius: var(--rm);
  font-size: .84rem; margin-bottom: 18px;
  border: 1.5px solid transparent;
  animation: fadeDown .25s ease;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.alert i { font-size: .95rem; flex-shrink: 0; margin-top: 2px; }
.alert-error   { background: var(--p2l); border-color: #fac8d0; color: #b83050; }
.alert-success { background: var(--p3l); border-color: #9edfd1; color: #1a7a60; }
.alert-success a { color: inherit; font-weight: 700; }

/* ════════════════════════════════════════
   FORM
════════════════════════════════════════ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }

label {
  display: block;
  font-size: .71rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--txt2); margin-bottom: 6px;
}
label .req { color: var(--p2); margin-left: 1px; }

.input-wrap { position: relative; }
.input-wrap .ico-l {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--txt3); font-size: .95rem; pointer-events: none;
  transition: color var(--t);
}
.input-wrap:focus-within .ico-l { color: var(--p1); }

.input-wrap input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--rm);
  color: var(--txt);
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: .88rem;
  padding: 11px 40px 11px 37px;
  outline: none;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.input-wrap input:focus {
  border-color: var(--p1);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(110,98,240,.1);
}
.input-wrap input::placeholder { color: var(--txt3); }

.toggle-pw {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--txt3); font-size: .95rem; padding: 4px;
  transition: color var(--t); line-height: 1;
}
.toggle-pw:hover { color: var(--p1); }

/* password strength */
.strength-track { display: flex; gap: 4px; margin-top: 7px; }
.strength-track span {
  flex: 1; height: 3px; border-radius: 99px;
  background: var(--border); transition: background .3s;
}
.strength-hint { font-size: .71rem; color: var(--txt3); margin-top: 5px; transition: color .3s; }

/* extras row */
.form-extras {
  display: flex; align-items: center; justify-content: space-between;
  margin: 2px 0 20px;
}
.cb-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.cb-wrap input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--p1); cursor: pointer;
}
.cb-wrap span { font-size: .83rem; color: var(--txt2); }
.link-a {
  font-size: .83rem; font-weight: 600;
  color: var(--p1); text-decoration: none; transition: color var(--t);
}
.link-a:hover { color: var(--p1d); }

/* ════════════════════════════════════════
   SUBMIT BUTTON
════════════════════════════════════════ */
.btn-submit {
  width: 100%; padding: 12.5px;
  background: linear-gradient(110deg, var(--p1) 0%, #9b91ff 100%);
  color: #fff;
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: .92rem; font-weight: 700;
  border: none; border-radius: var(--rm); cursor: pointer;
  box-shadow: 0 4px 18px rgba(110,98,240,.28);
  transition: transform var(--t), box-shadow var(--t), opacity var(--t);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit:hover  { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(110,98,240,.36); }
.btn-submit:active { transform: none; }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.auth-foot {
  text-align: center; margin-top: 18px;
  font-size: .84rem; color: var(--txt3);
}
.auth-foot a {
  color: var(--p1); font-weight: 700;
  text-decoration: none; transition: color var(--t);
}
.auth-foot a:hover { color: var(--p1d); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 860px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-side  { display: none; }
  .auth-main  { padding: 32px 16px; }
}
@media (max-width: 480px) {
  .form-row   { grid-template-columns: 1fr; gap: 0; }
  .auth-card  { padding: 22px 16px; }
}