/* ============================================================
   DPA for School — หน้าเข้าสู่ระบบ
   · ใช้โทเคนสีชุดเดียวกับ mvc.css (60-30-10) เปลี่ยนธีมที่เดียวขยับตามทั้งระบบ
   · รองรับโหมดมืดผ่าน [data-theme] บน <html> (ตั้งจากปุ่ม + prefers-color-scheme)
   · ทุกเอฟเฟกต์เป็น progressive enhancement — ปิดเองเมื่อ prefers-reduced-motion
   ============================================================ */

/* โทเคนโหมดมืดอยู่ใน mvc.css แล้ว — ใช้ร่วมกับทุกหน้าในระบบ */

html,body{height:100%}
body{
  min-height:100vh; min-height:100dvh;          /* dvh กัน address bar มือถือกินพื้นที่ */
  background:var(--c60); color:var(--ink);
}

/* ── ข้ามไปฟอร์มทันที (คีย์บอร์ด/สกรีนรีดเดอร์) ─────────────── */
.skip{
  position:absolute; left:.75rem; top:-3rem; z-index:100;
  background:var(--c30); color:#fff; padding:.55rem 1rem; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .18s var(--ease);
}
.skip:focus{top:0; text-decoration:none}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── โครงสองฝั่ง ─────────────────────────────────────────── */
.stage{
  display:grid;
  /* ★ ต้องเป็น minmax(0,…) ไม่ใช่ 1fr เปล่า — แทร็ก 1fr มีความกว้างต่ำสุดเป็น min-content
     ข้อความไทยยาว ๆ ที่เบราว์เซอร์ตัดคำไม่ได้จะดันแทร็กให้กว้างเกินจอ แล้วฟอร์มล้นออกขวา */
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:100vh; min-height:100dvh;
}

/* ── ฝั่งแบรนด์ ──────────────────────────────────────────── */
.stage-brand{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg,var(--brand-900),var(--brand-700) 55%,var(--brand-600));
  color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3.5vw,3rem);
  padding-left:max(clamp(1.5rem,3.5vw,3rem), env(safe-area-inset-left));
}
/* แสงกวาดเฉียง — ชั้นตกแต่ง ไม่รับคลิก */
.stage-brand::after{
  content:""; position:absolute; inset:-30% -20% auto auto; width:70%; height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:rotate(20deg); pointer-events:none; z-index:-1;
}
/* กลุ่มแสงนวลเคลื่อนช้า ๆ */
.aura{position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:-2}
.aura-1{width:26rem; height:26rem; left:-8rem; top:-6rem; background:rgba(59,111,224,.55); animation:float1 22s var(--ease) infinite alternate}
.aura-2{width:20rem; height:20rem; right:-5rem; bottom:-4rem; background:rgba(240,180,41,.28); animation:float2 28s var(--ease) infinite alternate}
@keyframes float1{to{transform:translate3d(3rem,2rem,0) scale(1.12)}}
@keyframes float2{to{transform:translate3d(-2.5rem,-2rem,0) scale(1.08)}}

.brand-mark{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:1.8rem;
  background:linear-gradient(135deg,var(--c10),var(--c10-deep)); color:#2a1c00;
  margin-bottom:1.4rem; box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.stage-brand h1{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.4rem; letter-spacing:-.01em}
.brand-tag{color:#cfdcfa; max-width:36ch; margin:0 0 2rem; font-size:.95rem}

.feat-list{display:flex; flex-direction:column; gap:1rem; margin:0 0 2rem}
.feat{display:flex; gap:.85rem; align-items:flex-start}
.feat i{
  flex:0 0 36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:.95rem;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.14);
}
.feat b{display:block; font-family:Kanit,sans-serif; font-weight:500; font-size:.93rem}
.feat span{font-size:.81rem; color:#bcd0f7; line-height:1.5}

.brand-foot{
  margin-top:auto; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center;
  font-size:.79rem; color:#b9cbf3;
}
.brand-foot a{color:#dbe6ff; display:inline-flex; align-items:center; gap:.35rem}
.brand-foot a:hover{color:#fff}

/* ── ฝั่งฟอร์ม ───────────────────────────────────────────── */
.stage-form{
  display:flex; align-items:center; justify-content:center; position:relative;
  min-width:0;                                   /* ยอมให้หดตามแทร็ก ไม่ดันจนล้น */
  background:var(--c60);
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem);
  padding-right:max(clamp(1rem,3vw,2rem), env(safe-area-inset-right));
  padding-bottom:max(clamp(1.5rem,4vw,3rem), env(safe-area-inset-bottom));
}
/* บนจอกว้าง ยกฟอร์มขึ้นเป็น "การ์ด" จริง — อ่านง่ายกว่าลอยอยู่บนพื้นเปล่า */
.login-card{
  width:100%; max-width:420px; min-width:0;
  background:var(--c60-raise); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.5vw,2.25rem); box-shadow:var(--sh-2);
}

.login-head{margin-bottom:1.5rem}
.login-head h2{font-size:1.45rem; margin-bottom:.3rem}
.meta-row{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  color:var(--ink-soft); font-size:.83rem;
}
.meta-row .dot{width:4px; height:4px; border-radius:50%; background:var(--ink-faint)}
#clock{font-variant-numeric:tabular-nums}

/* ── ปุ่มสลับธีม ─────────────────────────────────────────── */
.theme-btn{
  position:absolute; top:1rem; right:1rem;
  top:max(1rem, env(safe-area-inset-top));
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--c60-raise); color:var(--ink-soft); cursor:pointer;
  display:grid; place-items:center; font-size:1rem;
  transition:color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.theme-btn:hover{color:var(--c30); border-color:var(--c30-soft); transform:rotate(-15deg)}

/* ── ฟอร์ม ───────────────────────────────────────────────── */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:2.9rem}
.pw-toggle{
  position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  width:2.5rem; height:2.5rem; border:0; background:transparent;   /* ≥40px กดง่ายด้วยนิ้ว */
  color:var(--ink-faint); cursor:pointer; border-radius:8px;
  display:grid; place-items:center;
}
.pw-toggle:hover{color:var(--c30); background:var(--c30-wash)}

.field-note{display:flex; align-items:center; gap:.35rem; font-size:.76rem; margin-top:.35rem; min-height:1.1rem}
.field-note.warn{color:var(--warn)}
.field-note.bad{color:var(--danger)}
.field-note.good{color:var(--ok)}
.field-note:empty{display:none}

.row-between{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.25rem 0 1.25rem}
.check{display:inline-flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--ink-soft); cursor:pointer}
.check input{width:16px; height:16px; accent-color:var(--c30); cursor:pointer}
.link-sm{font-size:.82rem}

.btn-lg{width:100%; min-height:48px; font-size:.95rem}

/* แถบสถานะระบบ */
.status{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem;
  color:var(--ink-faint); margin-top:1.25rem;
}
.status .led{width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex:0 0 7px}
.status.up .led{background:var(--ok); box-shadow:0 0 0 3px var(--ok-wash)}
.status.down .led{background:var(--danger); box-shadow:0 0 0 3px var(--danger-wash)}
.status.up{color:var(--ok)}
.status.down{color:var(--danger)}

.login-foot{
  text-align:center; color:var(--ink-faint); font-size:.75rem; margin-top:1.5rem; line-height:1.7;
}
.login-foot a{color:var(--ink-soft)}

/* ── ส่วนที่ใช้เฉพาะจอแคบ ─────────────────────────────────── */
.brand-compact{display:none}
.feat-compact{display:none}

/* ── จอกลาง ──────────────────────────────────────────────── */
@media (max-width:1080px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .brand-tag{margin-bottom:1.5rem}
  .feat-list{gap:.8rem; margin-bottom:1.5rem}
}

/* ── จอแคบ: ยุบเหลือคอลัมน์เดียว ─────────────────────────── */
@media (max-width:860px){
  .stage{grid-template-columns:minmax(0,1fr); min-height:0}
  .stage-brand{display:none}                 /* แทนด้วยหัวย่อในฝั่งฟอร์ม */
  .stage-form{
    min-height:100vh; min-height:100dvh;
    align-items:flex-start; padding-top:clamp(1.75rem,7vw,3rem);
  }
  /* จอแคบ: เต็มความกว้าง ไม่ต้องมีกรอบซ้อนอีกชั้น */
  .login-card{max-width:460px; background:transparent; border:0; box-shadow:none; padding:0}
  .brand-compact{
    display:flex; align-items:center; gap:.85rem; margin-bottom:1.75rem;
  }
  .brand-compact .brand-mark{width:48px; height:48px; border-radius:14px; font-size:1.3rem; margin:0; flex:0 0 48px}
  .brand-compact > div{min-width:0}
  .brand-compact b{display:block; font-family:Kanit,sans-serif; font-size:1.05rem; color:var(--ink); line-height:1.3; overflow-wrap:anywhere}
  .brand-compact span{font-size:.78rem; color:var(--ink-soft); overflow-wrap:anywhere}
  .theme-btn{top:max(.85rem, env(safe-area-inset-top)); right:.85rem}

  /* จุดเด่น 3 ข้อ — เติมพื้นที่ว่างใต้ฟอร์มแทนฝั่งแบรนด์ที่ถูกซ่อน
     บนมือถือวางเป็นรายการแถวเดียว (ไอคอนซ้าย) จะได้ไม่กินความสูงมาก */
  .feat-compact{display:grid; gap:.55rem; margin-top:1.75rem; grid-template-columns:minmax(0,1fr)}
  .fc{
    background:var(--c60-raise); border:1px solid var(--line); border-radius:var(--r);
    padding:.75rem .85rem; min-width:0;
    display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:.7rem; align-items:start;
  }
  .fc i{
    grid-row:1 / span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
    background:var(--c30-wash); color:var(--c30); font-size:.9rem;
  }
  .fc b{font-family:Kanit,sans-serif; font-weight:500; font-size:.87rem; line-height:1.35}
  .fc span{font-size:.76rem; color:var(--ink-soft); line-height:1.5}
}

/* แท็บเล็ตแนวตั้ง: มีที่พอให้วางเป็นการ์ด 3 ใบเรียงกัน */
@media (min-width:620px) and (max-width:860px){
  .feat-compact{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem}
  .fc{grid-template-columns:minmax(0,1fr); row-gap:.45rem}
  .fc i{grid-row:auto}
}

/* ── มือถือเล็ก ──────────────────────────────────────────── */
@media (max-width:400px){
  body{font-size:14.5px}
  .login-head h2{font-size:1.28rem}
  .row-between{flex-direction:column; align-items:flex-start; gap:.5rem}
}

/* ── มือถือแนวนอน / จอเตี้ย ──────────────────────────────── */
@media (max-height:560px) and (orientation:landscape){
  .stage-form{align-items:flex-start; padding-top:.9rem; padding-bottom:.9rem}
  .feat-list,.brand-foot,.feat-compact,.status,.login-foot{display:none}
  .brand-compact{margin-bottom:.75rem}
  /* ★ เจาะจงเฉพาะข้อความสรุป — .brand-mark ก็เป็น <span> ถ้าเขียนกว้างไปโลโก้จะหายด้วย */
  .brand-compact > div > span{display:none}
  .login-head{margin-bottom:.75rem}
  .field{margin-bottom:.7rem}
  .row-between{margin:.15rem 0 .8rem}
  /* จอเตี้ยแต่กว้าง: วางสองช่องกรอกเคียงกัน ปุ่มจึงยังอยู่ในจอ */
  @media (min-width:700px){
    .login-card{max-width:640px}
    #loginForm .field{display:inline-block; width:calc(50% - .5rem); vertical-align:top}
    #loginForm .field + .field{margin-left:.9rem}
  }
}

/* ── จอใหญ่มาก: ไม่ให้การ์ดลอยกลางทะเล ───────────────────── */
@media (min-width:1600px){
  .login-card{max-width:430px}
  .stage-brand{padding-left:clamp(3rem,10vw,9rem)}
}

/* ── เครื่องที่ใช้นิ้วสัมผัส: ขยายพื้นที่กดให้ถึงเกณฑ์ 44px ── */
@media (pointer:coarse){
  .input,.select,.textarea{min-height:46px; font-size:1rem}   /* 16px กัน iOS ซูมเองตอนโฟกัส */
  .btn{min-height:44px}
  .pw-toggle{width:2.75rem; height:2.75rem}
  .check input{width:20px; height:20px}
  .theme-btn{width:44px; height:44px}
}

/* ── เคารพการตั้งค่าลดการเคลื่อนไหว ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .theme-btn:hover{transform:none}
}

/* ── โฟกัสต้องเห็นชัดเสมอ (คีย์บอร์ด) ────────────────────── */
:focus-visible{outline:3px solid var(--c10); outline-offset:2px; border-radius:4px}

/* ── โหมดคอนทราสต์สูง ────────────────────────────────────── */
@media (prefers-contrast:more){
  .input,.btn{border-width:2px}
  .feat span,.brand-tag{color:#e8eefc}
}