/* ================= Login =================
   Computer: colour blocks like the dashboard on the light-grey page — site photos cross-fading in
   the big block top-left, a navy block (headline, the logo's stripes) and a sky block (what the
   system does) under it, and the sign-in form in a white block on the right.
   Phone: the photo is a band across the top, the navy and sky blocks merge into one navy band
   (features become chips), and the form rises over its lower edge as a sheet.
   Toasts come from /css/toast.css. */

/* ซ่อนแถบเลื่อน (Scrollbar) ทุกหน้าจอ */
* {
    box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'IBM Plex Sans Thai', 'Segoe UI', Tahoma, sans-serif;
    -ms-overflow-style: none; scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; }

:root {
    --primary: #1d4d75; --secondary: #187ec9; --navy-deep: #123a5c; --sky-hi: #3c9ee6; --steel: #8f9498;
    --ink: #10273b; --muted: #6a7988; --line: #dde4ec;
    --display: 'Anuphan', 'IBM Plex Sans Thai', sans-serif;
    --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mesh-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55.43' height='96' viewBox='0 0 55.43 96'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1' d='M27.71 0L55.43 16v32L27.71 64 0 48V16zM27.71 32v32M27.71 32L0 16M27.71 32l27.72-16M27.71 64v32M0 80l27.71-16M55.43 80L27.71 64M0 80v16M55.43 80v16M0 0v16M55.43 0v16'/%3E%3C/svg%3E");
}
/* The page is exactly one screen tall (dvh = the part a phone browser really shows, under its address bar),
   so there is nothing to scroll; shorter screens drop secondary text instead (see the height queries below). */
html, body { overscroll-behavior: none; }
body { background: #edf2f7; color: var(--ink); }

.lg {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr); grid-template-rows: minmax(160px, 1fr) auto;
    gap: 16px; min-height: 100vh; min-height: 100dvh; padding: 16px;
}

/* ---------- Photo block ---------- */
.lg-photo { position: relative; isolation: isolate; overflow: hidden; grid-column: 1; grid-row: 1; border-radius: 22px; background: var(--primary); animation: lgUp 0.6s var(--ease-out) backwards; }
.slideshow-container { position: absolute; inset: 0; z-index: -2; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease-in-out; }
/* The visible photo drifts in slowly (a gentle Ken Burns zoom) for the 10 s it is on screen. */
.slide.active { opacity: 1; animation: lgZoom 11s ease-out both; }
.bg-login1 { background-image: url('/images/login1.jpg'); }
.bg-login2 { background-image: url('/images/login2.jpg'); }
.bg-login3 { background-image: url('/images/login3.jpg'); }
.bg-login4 { background-image: url('/images/login4.jpg'); }
.bg-login5 { background-image: url('/images/login5.jpg'); }
.lg-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(18, 58, 92, 0.62), rgba(18, 58, 92, 0) 34%, rgba(18, 58, 92, 0) 72%, rgba(18, 58, 92, 0.55)); }
.lg-photo .lg-brand { display: none; position: absolute; top: 20px; left: 20px; }
.lg-dots { position: absolute; left: 24px; bottom: 20px; display: flex; gap: 6px; }
.lg-dots i { width: 8px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.45); transition: width 0.5s var(--ease-out), background-color 0.5s ease; }
.lg-dots i.active { width: 28px; background: #ffffff; }

/* ---------- Brand ---------- */
.lg-brand { display: flex; align-items: center; gap: 12px; }
.lg-mark { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); }
.lg-mark img { width: 34px; height: 34px; object-fit: contain; }
.lg-brand-text b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.25; color: #ffffff; }
.lg-brand-text small { display: block; font-size: 12.5px; color: #c4d9ec; }
.lg-brand-dark .lg-mark { box-shadow: 0 0 0 1px #e1e7ee; }
.lg-brand-dark .lg-brand-text b { color: var(--ink); }
.lg-brand-dark .lg-brand-text small { color: var(--muted); }

/* ---------- Navy + sky blocks ---------- */
.lg-info { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.lg-tile { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; padding: 24px 26px; animation: lgUp 0.6s var(--ease-out) 0.1s backwards; }
.lg-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--mesh-w); pointer-events: none; }
.lg-navy { display: flex; flex-direction: column; justify-content: center; background: var(--navy-deep); }
.lg-navy::before { opacity: 0.08; }
.lg-sky { display: flex; align-items: center; background: var(--secondary); animation-delay: 0.18s; }
.lg-sky::before { opacity: 0.12; }

.lg-stripes { position: absolute; z-index: -1; top: 0; bottom: 0; right: -150px; display: flex; gap: 14px; transform: skewX(-30deg); pointer-events: none; }
.lg-stripes i { display: block; height: 100%; animation: lgStripe 1.1s var(--ease-out) backwards; }
.lg-stripes i:nth-child(1) { width: 10px; background: var(--steel); }
.lg-stripes i:nth-child(2) { width: 34px; background: var(--sky-hi); animation-delay: 0.1s; }
.lg-stripes i:nth-child(3) { width: 200px; background: var(--secondary); animation-delay: 0.2s; }

.lg-kick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #9fd3f7; }
.lg-kick::before { content: ''; width: 9px; height: 10px; background: var(--secondary); clip-path: var(--hex); }
/* Each line stays whole; the size follows the screen width so both fit beside the stripes. */
.lg-navy h1 { position: relative; margin-top: 8px; font-family: var(--display); font-size: clamp(22px, 2.1vw, 32px); font-weight: 600; line-height: 1.3; color: #ffffff; }
.lg-navy h1 span, .lg-navy h1 em { white-space: nowrap; }
.lg-navy h1 em { font-style: normal; color: #9fd3f7; }

.lg-feats { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; width: 100%; }
.lg-feats li { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lg-hex { flex-shrink: 0; width: 34px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; clip-path: var(--hex); }
.lg-hex i { font-size: 14px; color: var(--secondary); }
.lg-feats b { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: #ffffff; }
.lg-feats small { display: block; font-size: 12px; line-height: 1.4; color: #dcedfa; }

/* ---------- Form block ---------- */
.lg-panel { position: relative; overflow: hidden; grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; padding: 40px 34px; border-radius: 22px; background: #ffffff; box-shadow: 0 1px 2px rgba(16, 39, 59, 0.05); animation: lgUp 0.6s var(--ease-out) 0.05s backwards; }
/* Top edge in the logo's colours, cut on the slant. */
.lg-panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(100deg, var(--primary) 0 58%, #ffffff 58% 59.5%, var(--secondary) 59.5% 82%, #ffffff 82% 83.5%, var(--sky-hi) 83.5% 93%, #ffffff 93% 94.5%, var(--steel) 94.5%); }
.lg-box { width: 100%; max-width: 380px; }
.lg-title { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.lg-title::before { content: ''; flex-shrink: 0; width: 13px; height: 15px; background: var(--secondary); clip-path: var(--hex); }
.lg-lead { margin: 6px 0 24px; font-size: 14px; line-height: 1.6; color: var(--muted); }

.lg-field { margin-bottom: 16px; }
.lg-field label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; color: var(--primary); }
.lg-input { position: relative; display: flex; align-items: center; }
.lg-input > i { position: absolute; left: 16px; font-size: 15px; color: #97a5b3; transition: color 0.2s ease; pointer-events: none; }
.lg-input input {
    width: 100%; height: 50px; padding: 0 46px 0 44px; border: 1.5px solid var(--line); border-radius: 12px; outline: none;
    background: #f5f8fb; font-size: 15px; color: var(--ink);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.lg-input input::placeholder { color: #a6b2be; }
.lg-input input:focus { border-color: var(--secondary); background: #ffffff; box-shadow: 0 0 0 4px rgba(24, 126, 201, 0.14); }
.lg-input:focus-within > i { color: var(--secondary); }
.uppercase-input { text-transform: uppercase; }
.lg-eye { position: absolute; right: 6px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lg-eye i { font-size: 15px; color: #97a5b3; }
.lg-eye:hover { background: #eaf1f7; }
.lg-eye.on i { color: var(--secondary); }

.remember-me { display: flex; align-items: center; gap: 10px; margin: 4px 0 22px; font-size: 13.5px; color: #3c4b5a; cursor: pointer; user-select: none; }
.remember-me input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.remember-me span { line-height: 1.4; color: #3c4b5a; }

/* Navy button with the logo's stripes on its right end; they slide in a little on hover. */
.lg-submit {
    position: relative; overflow: hidden; isolation: isolate; width: 100%; height: 52px; border: 0; border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--primary); color: #ffffff; font-size: 16px; font-weight: 600;
    box-shadow: 0 14px 26px -14px rgba(29, 77, 117, 0.9);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.lg-submit::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; right: -40px; width: 120px; background: linear-gradient(90deg, var(--steel) 0 6px, transparent 6px 15px, var(--sky-hi) 15px 33px, transparent 33px 42px, var(--secondary) 42px); transform: skewX(-30deg); transition: right 0.45s var(--ease-out); }
.lg-submit span, .lg-submit i { color: #ffffff; }
.lg-submit i { transition: transform 0.35s var(--ease-spring); }
.lg-submit:hover { background: var(--navy-deep); box-shadow: 0 18px 30px -14px rgba(18, 58, 92, 1); }
.lg-submit:hover::after { right: -20px; }
.lg-submit:hover i { transform: translateX(4px); }
.lg-submit:active { transform: scale(0.98); }
.lg-submit:disabled { cursor: wait; filter: saturate(0.7) brightness(1.1); transform: none; }

.lg-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid #e8edf2; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.lg-foot i { margin-right: 4px; color: #97a5b3; }
.lg-foot span { display: block; color: #9aa7b4; }

@media (max-width: 1280px) {
    .lg-navy .lg-stripes { right: -180px; }
}

/* Short computer screens (a laptop with the browser bars): tighter form spacing so it still fits. */
@media (min-width: 901px) and (max-height: 700px) {
    .lg-panel { padding: 24px 34px; }
    .lg-title { margin-top: 18px; }
    .lg-lead { margin-bottom: 16px; }
    .lg-field { margin-bottom: 12px; }
    .remember-me { margin-bottom: 16px; }
    .lg-foot { margin-top: 16px; padding-top: 12px; }
    .lg-tile { padding: 18px 24px; }
    .lg-feats { gap: 10px 18px; }
}
@media (min-width: 901px) and (max-height: 580px) {
    .lg-lead, .lg-foot span { display: none; }
    .lg-title { margin-bottom: 14px; }
}

/* ---------- Phone / small tablet ---------- */
@media (max-width: 900px) {
    /* The photo takes whatever height is left after the navy band and the form. */
    .lg { display: flex; flex-direction: column; gap: 0; padding: 0; background: #ffffff; }
    .lg-photo { flex: 1 1 0; min-height: 110px; border-radius: 0; animation: none; }
    .lg-photo .lg-brand { display: flex; }
    .lg-photo::after { background: linear-gradient(180deg, rgba(18, 58, 92, 0.78), rgba(18, 58, 92, 0) 46%, rgba(18, 58, 92, 0) 72%, rgba(18, 58, 92, 0.55)); }
    .lg-photo .lg-brand-text b, .lg-photo .lg-brand-text small { text-shadow: 0 1px 6px rgba(10, 32, 52, 0.7); }
    .lg-photo .lg-brand-text small { color: #e3eef8; }
    .lg-dots { left: 20px; bottom: 14px; }

    /* Navy and sky blocks become one navy band; the stripes run its full height. */
    .lg-info { flex: none; position: relative; isolation: isolate; overflow: hidden; display: block; padding: 18px 20px 44px; background: var(--navy-deep); }
    .lg-info::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--mesh-w); opacity: 0.08; }
    .lg-tile { position: static; overflow: visible; padding: 0; border-radius: 0; background: transparent; animation: none; }
    .lg-tile::before { display: none; }
    .lg-navy .lg-stripes { right: -230px; }
    .lg-navy h1 { margin: 4px 0 12px; font-size: clamp(20px, 6vw, 26px); }
    .lg-navy h1 span, .lg-navy h1 em { white-space: normal; }
    .lg-navy h1 br { display: none; }
    .lg-navy h1 em { color: #ffffff; }
    .lg-navy h1 em::before { content: ' '; }
    .lg-feats { display: flex; flex-wrap: wrap; gap: 8px; }
    .lg-feats li { gap: 7px; padding: 4px 11px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
    .lg-hex { width: auto; height: auto; background: none; clip-path: none; }
    .lg-hex i { font-size: 12px; color: #9fd3f7; }
    .lg-feats b { font-size: 12.5px; font-weight: 500; color: #dbe9f5; }
    .lg-feats small { display: none; }

    .lg-panel { flex: none; z-index: 1; margin-top: -26px; padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; align-items: flex-start; box-shadow: 0 -12px 30px -14px rgba(18, 58, 92, 0.5); animation: none; }
    .lg-panel::before { display: none; }
    .lg-box { max-width: 460px; margin: 0 auto; }
    .lg-box .lg-brand { display: none; }
    .lg-title { margin-top: 0; font-size: 24px; }
    .lg-lead { margin-bottom: 20px; }
    .lg-input input { font-size: 16px; } /* 16px stops iOS zooming into the field */
    .lg-foot { margin-top: 18px; padding-top: 12px; }
}

/* Shorter phones (or a browser with its bars showing): drop secondary text, tallest first. */
@media (max-width: 900px) and (max-height: 820px) {
    .lg-lead, .lg-foot span { display: none; }
    .lg-title { margin-bottom: 16px; }
}
@media (max-width: 900px) and (max-height: 700px) {
    .lg-feats, .lg-foot { display: none; }
    .lg-navy h1 { margin-bottom: 0; }
    .lg-info { padding-bottom: 40px; }
}
@media (max-width: 900px) and (max-height: 580px) {
    .lg-photo { min-height: 84px; }
    .lg-photo .lg-brand { top: 14px; }
    .lg-info { padding-top: 14px; padding-bottom: 38px; }
    .lg-field { margin-bottom: 12px; }
    .lg-input input { height: 46px; }
    .remember-me { margin: 2px 0 16px; }
    .lg-submit { height: 48px; }
}
@media (max-width: 900px) and (max-height: 520px) {
    .lg-kick { display: none; }
    .lg-info { padding-top: 12px; }
}
/* A phone on its side: only the form, with the logo above it. */
@media (max-width: 900px) and (max-height: 480px) {
    .lg-photo, .lg-info { display: none; }
    .lg-panel { flex: 1 1 auto; align-items: center; margin-top: 0; padding-top: 12px; padding-bottom: 10px; border-radius: 0; box-shadow: none; }
    .lg-box .lg-brand { display: flex; }
    .lg-title { margin-top: 8px; margin-bottom: 10px; }
    /* Labels stay for screen readers; the icons and placeholders say what each box is. */
    .lg-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .lg-field { margin-bottom: 10px; }
    .lg-input input { height: 42px; }
    .remember-me { margin: 0 0 12px; }
    .lg-submit { height: 44px; }
}
@media (max-width: 900px) and (max-height: 400px) {
    .lg-box .lg-brand { display: none; }
    .lg-title { margin-top: 0; }
}

/* ---------- Keyframes ---------- */
@keyframes lgUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes lgZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes lgStripe { from { transform: translateX(160%); opacity: 0; } }