/* =========================================================
   auth-ui.css — GIAO DIỆN ĐĂNG NHẬP DÙNG CHUNG (thiết kế lại)
   ---------------------------------------------------------
   Thay cho bản cũ vẽ bằng SVG (mấy cái cây tam giác). Bản mới:
     - Nền "aurora": 3 vệt sáng mềm chuyển động rất chậm, thuần CSS.
     - Khung đăng nhập bằng kính mờ, bo 28px, viền sáng mảnh.
     - Ô nhập kiểu "pill" có nền mờ + viền phát sáng khi bấm vào.
     - Nút đăng nhập nền gradient, có hiệu ứng nhấn.
   File này nạp SAU cùng ở mỗi trang nên ghi đè được CSS cũ.
   Áp cho cả 4 trang: index / logbook (cổng học sinh),
   library (cổng học sinh + hộp đăng nhập admin), manage (admin).
   ========================================================= */

:root {
  --auth-ink: #f2f6ff;
  --auth-ink-soft: rgba(233, 240, 255, .72);
  --auth-ink-dim: rgba(233, 240, 255, .48);
  --auth-line: rgba(255, 255, 255, .16);
  --auth-line-strong: rgba(255, 255, 255, .34);
  --auth-accent: #6ea8ff;
  --auth-accent-2: #9b7dff;
  --auth-glass: rgba(18, 26, 48, .52);
}

/* ---------------------------------------------------------
   1) NỀN MÀN HÌNH ĐĂNG NHẬP
--------------------------------------------------------- */
.gate-overlay,
.name-gate-overlay,
.login-screen {
  background:
    radial-gradient(1100px 620px at 12% -12%, #24407a 0%, transparent 62%),
    radial-gradient(900px 560px at 88% 6%, #4b2f7a 0%, transparent 58%),
    radial-gradient(1000px 700px at 50% 118%, #10406b 0%, transparent 60%),
    linear-gradient(170deg, #070b1a 0%, #0c1330 46%, #101a3d 100%) !important;
  /* KHÔNG đổi 'position' ở đây! .gate-overlay và .name-gate-overlay vốn là
     position:fixed phủ kín màn hình; đặt lại thành relative sẽ làm lớp phủ
     tụt xuống theo dòng chảy trang -> nội dung bên dưới lộ ra và vào được web
     khi chưa đăng nhập. Chỉ ép fixed cho chắc, và để .login-screen (vốn nằm
     trong dòng chảy, min-height:100vh) dùng relative riêng ở dưới. */
  overflow: hidden;
}
/* Hai lớp phủ này PHẢI luôn là fixed + phủ kín + nằm trên cùng */
.gate-overlay,
.name-gate-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000;
}
/* Màn đăng nhập của trang quản lý nằm trong dòng chảy trang, cần relative
   để 2 lớp trang trí ::before/::after bám theo */
.login-screen { position: relative; }

.gate-overlay::before,
.name-gate-overlay::before,
.login-screen::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(closest-side, rgba(110, 168, 255, .34), transparent 70%) 18% 26%/42% 42% no-repeat,
    radial-gradient(closest-side, rgba(155, 125, 255, .30), transparent 70%) 82% 22%/38% 38% no-repeat,
    radial-gradient(closest-side, rgba(64, 214, 190, .22), transparent 70%) 52% 88%/46% 40% no-repeat;
  filter: blur(6px);
  animation: authAurora 26s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes authAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}
/* Lưới chấm rất mờ cho có chiều sâu, thay cho hình vẽ SVG cũ */
.gate-overlay::after,
.name-gate-overlay::after,
.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .22;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* Hình vẽ SVG cũ (mấy cái cây) — ẩn hẳn */
.gate-trees,
.name-gate-animals { display: none !important; }

/* ---------------------------------------------------------
   2) KHUNG ĐĂNG NHẬP
--------------------------------------------------------- */
.gate-box,
.name-gate-box,
.login-card,
.login-box {
  position: relative;
  z-index: 2;
  width: min(420px, 100%) !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  padding: 30px 28px 26px !important;
  border-radius: 28px !important;
  background: var(--auth-glass) !important;
  border: 1px solid var(--auth-line) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 30px 70px -22px rgba(0, 0, 0, .68),
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 1px 0 rgba(255, 255, 255, .22) inset !important;
  color: var(--auth-ink) !important;
  text-align: center;
  animation: authCardIn .55s cubic-bezier(.2, .9, .3, 1) both !important;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Viền sáng chạy quanh mép trên khung */
.gate-box::before,
.name-gate-box::before,
.login-card::before,
.login-box::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  border-radius: 1px;
}

/* ---------------------------------------------------------
   3) LOGO / TIÊU ĐỀ
--------------------------------------------------------- */
.name-gate-box .gate-logo,
.login-card .login-logo-img,
.auth-logo {
  width: 74px !important;
  height: 74px !important;
  margin: 0 auto 14px !important;
  display: block !important;
  object-fit: contain;
  border-radius: 22px;
  padding: 9px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .28);
  animation: none !important;
  filter: none !important;
}
.gate-box h2,
.name-gate-box h2,
.login-card h1,
.login-box h2 {
  color: var(--auth-ink) !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  margin: 0 0 6px !important;
}
.gate-box .auth-sub,
.name-gate-box p,
.login-card p.sub,
.login-box p {
  color: var(--auth-ink-soft) !important;
  font-size: 13.5px !important;
  line-height: 1.55;
  margin: 0 0 20px !important;
}
.name-gate-box .gate-emoji,
.login-card .emoji,
.login-box .login-emoji {
  animation: none !important;
  margin-bottom: 8px !important;
}

/* ---------------------------------------------------------
   4) Ô NHẬP LIỆU
--------------------------------------------------------- */
.gate-field { position: relative; margin-bottom: 14px !important; }
.gate-field input,
.name-gate-box input:not([type="checkbox"]),
.login-card input:not([type="checkbox"]),
.login-box input {
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 44px 14px 16px !important;
  border: 1px solid var(--auth-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .07) !important;
  color: var(--auth-ink) !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: normal !important;
  text-align: left !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-box input { padding-right: 16px !important; text-align: center !important; letter-spacing: 5px !important; }
.gate-field input::placeholder,
.name-gate-box input::placeholder,
.login-card input::placeholder,
.login-box input::placeholder { color: var(--auth-ink-dim) !important; font-weight: 500; letter-spacing: normal; }
.gate-field input:focus,
.name-gate-box input:not([type="checkbox"]):focus,
.login-card input:not([type="checkbox"]):focus,
.login-box input:focus {
  border-color: rgba(110, 168, 255, .85) !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 0 0 4px rgba(110, 168, 255, .18) !important;
}
/* Icon nằm bên phải ô nhập */
.gate-field .gate-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .72;
  pointer-events: none;
}
.gate-field .gate-icon[stroke],
.gate-field .gate-icon [stroke] { stroke: rgba(233, 240, 255, .8) !important; }

/* Nhãn của trang quản lý */
.login-card .field { text-align: left; margin-bottom: 14px !important; }
.login-card label {
  color: var(--auth-ink-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  margin-bottom: 7px !important;
}

/* ---------------------------------------------------------
   5) GHI NHỚ ĐĂNG NHẬP
--------------------------------------------------------- */
.gate-remember,
.gate-remember-lib,
.login-card > label {
  color: var(--auth-ink-soft) !important;
  font-size: 13px !important;
  margin: 4px 0 18px !important;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
.gate-remember input[type="checkbox"],
.gate-remember-lib input[type="checkbox"],
.login-card input[type="checkbox"] {
  width: 17px !important;
  height: 17px;
  accent-color: var(--auth-accent);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   6) NÚT ĐĂNG NHẬP
--------------------------------------------------------- */
.gate-btn,
.name-gate-btn,
.login-card .login-btn,
.login-box .login-btn {
  width: 100% !important;
  padding: 14px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--auth-accent) 0%, var(--auth-accent-2) 100%) !important;
  color: #fff !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(110, 168, 255, .78) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.gate-btn:hover,
.name-gate-btn:hover,
.login-card .login-btn:hover,
.login-box .login-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 18px 38px -12px rgba(110, 168, 255, .9) !important;
}
.gate-btn:active,
.name-gate-btn:active,
.login-card .login-btn:active,
.login-box .login-btn:active { transform: translateY(0); }

.login-card .login-btn-secondary {
  background: rgba(255, 255, 255, .09) !important;
  color: var(--auth-ink) !important;
  border: 1px solid var(--auth-line) !important;
  box-shadow: none !important;
}
.login-card .login-btn-secondary:hover { background: rgba(255, 255, 255, .15) !important; }

/* ---------------------------------------------------------
   7) BÁO LỖI / GỢI Ý
--------------------------------------------------------- */
.gate-err,
.name-gate-err,
.login-card .login-error,
.login-box .login-err {
  background: rgba(255, 99, 132, .16) !important;
  border: 1px solid rgba(255, 99, 132, .34);
  color: #ffd2dc !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 13px !important;
  border-radius: 12px !important;
  margin: 0 0 14px !important;
  text-align: center;
}
.login-card .login-error { margin: 14px 0 0 !important; }
.login-box .login-err { margin-top: 10px !important; }
.gate-help,
.login-card .login-hint,
.qr-scan-status,
.qr-upload-sep {
  color: var(--auth-ink-dim) !important;
  font-size: 12px !important;
  line-height: 1.6;
}
.gate-help { margin-top: 16px !important; }
.login-box .login-cancel { color: var(--auth-ink-dim) !important; margin-top: 14px !important; }
.login-box .login-cancel:hover { color: var(--auth-ink) !important; }

/* ---------------------------------------------------------
   8) TAB MẬT KHẨU / QUÉT QR (trang quản lý)
--------------------------------------------------------- */
.login-card .login-tabs {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--auth-line);
  border-radius: 14px !important;
  padding: 5px !important;
  margin-bottom: 20px !important;
}
.login-card .login-tab-btn {
  color: var(--auth-ink-soft) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  transition: all .18s ease;
}
.login-card .login-tab-btn.active {
  background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(110, 168, 255, .9) !important;
}
.login-card .qr-scan-frame {
  border: 1px solid var(--auth-line-strong) !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, .45) !important;
}
.login-card .qr-upload-sep::before,
.login-card .qr-upload-sep::after { background: var(--auth-line) !important; }

/* Lớp phủ sau hộp đăng nhập admin (thư viện) */
.login-overlay {
  background: rgba(6, 10, 24, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------
   9) THANH LOGO TRÊN CÙNG MÀN ĐĂNG NHẬP (index/logbook)
--------------------------------------------------------- */
.gate-overlay .gate-nav { z-index: 3; }
.gate-overlay .gate-nav-logo img {
  border-radius: 11px;
  background: rgba(255, 255, 255, .9);
  padding: 3px;
}
.gate-overlay .gate-nav-logo span { color: var(--auth-ink) !important; }

/* ---------------------------------------------------------
   10) MÀN HÌNH NHỎ
--------------------------------------------------------- */
@media (max-width: 480px) {
  .gate-box,
  .name-gate-box,
  .login-card,
  .login-box { padding: 26px 20px 22px !important; border-radius: 24px !important; }
  .gate-box h2,
  .name-gate-box h2,
  .login-card h1,
  .login-box h2 { font-size: 21px !important; }
  .name-gate-box .gate-logo,
  .login-card .login-logo-img { width: 64px !important; height: 64px !important; }
}
@media (max-height: 640px) {
  .gate-box,
  .name-gate-box,
  .login-card,
  .login-box { max-height: 92vh; overflow-y: auto; }
}

/* Tôn trọng thiết lập "giảm chuyển động" của máy + bản UI mobile */
@media (prefers-reduced-motion: reduce) {
  .gate-overlay::before,
  .name-gate-overlay::before,
  .login-screen::before { animation: none !important; }
}
html.ui-mobile .gate-overlay::before,
html.ui-mobile .name-gate-overlay::before,
html.ui-mobile .login-screen::before { animation: none !important; }
html.ui-mobile .gate-box,
html.ui-mobile .name-gate-box,
html.ui-mobile .login-card,
html.ui-mobile .login-box {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(14, 21, 42, .9) !important;
}