/* Bristol Language School — Auth / Login Pages (theme-safe) */
/* Scoped heading font — does NOT touch the global --font used by dashboards. */
.login-wrapper, .login-wrapper *, .qb-glass { --font-heading:'Manrope','Segoe UI',var(--font); }

/* auth.css is only ever linked from the public login/register/reset pages, so it's
   safe to style `body` directly here — dashboards never load this file. This turns
   the old full-bleed split screen into a bolder floating, elevated card on an ambient
   tinted backdrop (still pure navy/gold, just deeper contrast and more depth). */
body{
  display:flex;flex-direction:column;min-height:100vh;
  background:
    radial-gradient(ellipse 80% 55% at 4% -8%, color-mix(in srgb,var(--theme-accent) 22%,transparent) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 105% 110%, color-mix(in srgb,var(--theme-primary) 18%,transparent) 0%, transparent 52%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--theme-primary) 4%,transparent) 0%, transparent 70%),
    var(--bg);
}
.login-wrapper{
  display:grid;grid-template-columns:1fr 1fr;
  flex:1 0 auto;
  width:min(1180px,calc(100% - 40px));
  margin:28px auto;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  box-shadow:
    0 40px 90px -28px color-mix(in srgb,var(--theme-primary) 55%,transparent),
    0 0 0 1px color-mix(in srgb,var(--theme-accent) 18%,transparent),
    0 0 60px -20px color-mix(in srgb,var(--theme-accent) 28%,transparent);
}
.login-left{
  /* Photo fills the left panel exactly; dark scrim keeps white copy readable. */
  background-color:#0F1D45;
  background-image:
    linear-gradient(
      165deg,
      rgba(8,14,32,0.42) 0%,
      rgba(8,14,32,0.38) 40%,
      rgba(8,14,32,0.58) 100%
    ),
    image-set(
      url('../images/login-hero.webp?v=pwa7') type('image/webp'),
      url('../images/login-hero.jpg?v=pwa7') type('image/jpeg')
    );
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  padding:50px 48px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.login-left::before,
.login-left::after{display:none;}
.login-left-mesh{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,transparent 35%,rgba(8,14,32,0.35) 100%);
}
@keyframes bls-gradient-drift{
  0%,100%{background-position:0% 0%;}
  50%{background-position:100% 100%;}
}
@keyframes bls-blob-float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-14px,14px) scale(1.08);}
}
.login-logo{display:flex;align-items:center;gap:14px;position:relative;z-index:2;}
.login-logo-box{
  width:48px;height:48px;background:white;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,0.28),0 0 0 1px color-mix(in srgb,var(--theme-accent) 30%,transparent);
}
.login-logo-box img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;padding:3px;box-sizing:border-box;display:block;}
.login-logo-info h2{
  font-size:22px;font-weight:800;letter-spacing:2.5px;font-family:var(--font-heading);
  color:var(--theme-on-primary);
  background:linear-gradient(90deg,var(--theme-on-primary) 20%,var(--theme-accent) 55%,var(--theme-on-primary) 90%);
  background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:bls-hue-drift 7s linear infinite;
}
.login-logo-info p{color:color-mix(in srgb,var(--theme-on-primary) 50%,transparent);font-size:10px;letter-spacing:3.5px;}
.login-center{position:relative;z-index:2;animation:bls-fade-in-up .7s ease both;}
.login-center::before{
  content:'';position:absolute;top:-40px;left:-50px;width:320px;height:320px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent) 32%,transparent) 0%,transparent 72%);
}
.login-center h3{
  color:var(--theme-on-primary);font-size:calc(var(--text-2xl) + 6px);font-weight:800;line-height:var(--leading-tight);
  margin-bottom:14px;letter-spacing:var(--tracking-tight);font-family:var(--font-heading);
  text-shadow:0 4px 32px color-mix(in srgb,var(--theme-accent) 45%,transparent);
}
.login-center p{color:color-mix(in srgb,var(--theme-on-primary) 62%,transparent);font-size:var(--text-md);line-height:1.75;margin-bottom:30px;}
@keyframes bls-hue-drift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes bls-fade-in-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.login-features{list-style:none;display:flex;flex-direction:column;gap:14px;}
.login-features li{
  display:flex;align-items:center;gap:12px;color:color-mix(in srgb,var(--theme-on-primary) 88%,transparent);font-size:var(--text-base);
  padding:10px 12px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--theme-on-primary) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--theme-on-primary) 8%,transparent);transition:background var(--transition),transform var(--transition),border-color var(--transition);
}
.login-features li:hover{
  background:color-mix(in srgb,var(--theme-on-primary) 11%,transparent);
  border-color:color-mix(in srgb,var(--theme-accent) 30%,transparent);
  transform:translateX(4px);
}
.login-fi{
  width:34px;height:34px;background:color-mix(in srgb,var(--theme-on-primary) 14%,transparent);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
  transition:background var(--transition),transform var(--transition);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-on-primary) 10%,transparent) inset;
}
.login-features li:hover .login-fi{
  background:color-mix(in srgb,var(--theme-accent) 35%,transparent);
  transform:scale(1.1) rotate(-4deg);
}
.login-footer{position:relative;z-index:2;}
.login-footer p{color:color-mix(in srgb,var(--theme-on-primary) 28%,transparent);font-size:var(--text-xs);}
.login-right{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--theme-accent) 4%,var(--surface)) 0%, var(--surface) 18%),
    var(--surface);
  backdrop-filter:saturate(1.15);
  padding:50px 52px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:-12px 0 40px color-mix(in srgb,var(--theme-primary) 10%,transparent);
  position:relative;animation:bls-fade-in-up .6s ease both;
}
.login-right::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;z-index:3;
  background:linear-gradient(90deg,var(--theme-accent),var(--theme-primary),var(--theme-accent),var(--theme-primary));
  background-size:220% 100%;animation:bls-gradient-drift 5s linear infinite;
  box-shadow:0 0 24px color-mix(in srgb,var(--theme-accent) 70%,transparent);
}
.login-right::after{
  content:'';position:absolute;top:5px;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--theme-accent) 50%,transparent),transparent);
}
.tab-switch{
  display:flex;background:var(--bg);border-radius:var(--radius-md);padding:5px;margin-bottom:32px;
  box-shadow:inset 0 1px 3px color-mix(in srgb,var(--theme-primary) 6%,transparent);
}
.tab-btn{
  flex:1;padding:10px;border:none;border-radius:var(--radius-sm);background:transparent;
  font-size:var(--text-base);font-weight:600;cursor:pointer;color:var(--text-muted);transition:all var(--transition);
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
}
.tab-btn.active{
  background:var(--surface);color:var(--theme-primary);
  box-shadow:var(--shadow-sm),0 0 0 1px color-mix(in srgb,var(--theme-accent) 25%,transparent);font-weight:700;
}
.tab-btn:focus-visible{box-shadow:var(--focus-ring);}
.form-header{margin-bottom:28px;}
.form-header h3{
  font-size:calc(var(--text-2xl) + 4px);font-weight:800;color:var(--text);margin-bottom:6px;
  letter-spacing:var(--tracking-tight);font-family:var(--font-heading);
  position:relative;display:inline-block;
}
.form-header h3::after{
  content:'';display:block;width:48px;height:3px;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--theme-accent),var(--theme-primary));
  box-shadow:0 0 12px color-mix(in srgb,var(--theme-accent) 50%,transparent);
}
.form-header p{font-size:var(--text-base);color:var(--text-muted);}
.fg{margin-bottom:18px;}
.fg label{display:block;font-size:var(--text-xs);font-weight:700;color:var(--text-muted);margin-bottom:7px;letter-spacing:var(--tracking-wide);text-transform:uppercase;}
.fg-wrap{position:relative;}
.fg-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--text-light);transition:color var(--transition);}
.fg-wrap input{
  width:100%;padding:13px 14px 13px 44px;border:1.5px solid var(--border);
  border-radius:var(--radius-md);font-size:var(--text-md);color:var(--text);background:var(--bg);
  outline:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);min-height:48px;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text) 5%,transparent);font-family:inherit;
}
/* A bare <select> directly in .fg (no icon, not wrapped in .fg-wrap) — same look, normal left padding. */
.fg > select{
  width:100%;padding:13px 14px;border:1.5px solid var(--border);cursor:pointer;
  border-radius:var(--radius-md);font-size:var(--text-md);color:var(--text);background:var(--bg);
  outline:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);min-height:48px;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text) 5%,transparent);font-family:inherit;
}
.fg-wrap input:focus,.fg-wrap input:focus-visible,.fg > select:focus,.fg > select:focus-visible{
  border-color:var(--theme-primary);background:var(--surface);
  box-shadow:var(--focus-ring),0 4px 14px -6px color-mix(in srgb,var(--theme-primary) 30%,transparent);
}
.fg-wrap:has(input:focus) i{color:var(--theme-primary);}
.login-form-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.remember{display:flex;align-items:center;gap:7px;font-size:var(--text-sm);color:var(--text-muted);cursor:pointer;}
.forgot{font-size:var(--text-sm);color:var(--theme-primary);font-weight:700;text-decoration:none;}
.forgot:hover{text-decoration:underline;}
.login-btn{
  width:100%;padding:16px;
  background:linear-gradient(135deg,var(--theme-primary) 0%,color-mix(in srgb,var(--theme-primary) 50%,var(--theme-accent)) 100%);
  color:var(--theme-on-primary);border:none;border-radius:var(--radius-md);
  font-size:var(--text-lg);font-weight:800;cursor:pointer;letter-spacing:0.03em;margin-bottom:20px;font-family:var(--font-heading);
  transition:transform var(--transition),box-shadow var(--transition),filter var(--transition);min-height:52px;
  box-shadow:
    0 12px 30px -8px color-mix(in srgb,var(--theme-primary) 60%,transparent),
    0 0 0 1px color-mix(in srgb,var(--theme-accent) 20%,transparent) inset;
  position:relative;overflow:hidden;isolation:isolate;
}
.login-btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 25%,color-mix(in srgb,var(--theme-on-primary) 28%,transparent) 50%,transparent 75%);
  transform:translateX(-130%);transition:transform .65s ease;
}
.login-btn:hover::after{transform:translateX(130%);}
.login-btn:hover{
  filter:brightness(1.1);transform:translateY(-3px);
  box-shadow:
    0 18px 40px -10px color-mix(in srgb,var(--theme-primary) 70%,transparent),
    0 0 0 3px color-mix(in srgb,var(--theme-accent) 30%,transparent),
    0 0 28px -4px color-mix(in srgb,var(--theme-accent) 45%,transparent);
}
.login-btn:active{transform:translateY(0);}
.login-btn:focus-visible{box-shadow:var(--focus-ring),0 10px 26px -8px color-mix(in srgb,var(--theme-primary) 55%,transparent);}
.login-hint{
  background:color-mix(in srgb,var(--theme-primary) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--theme-primary) 15%,var(--border));
  border-radius:var(--radius-md);padding:14px 16px;font-size:var(--text-sm);color:var(--theme-primary);
  display:flex;align-items:flex-start;gap:9px;line-height:1.6;
}
.login-hint i{font-size:17px;flex-shrink:0;margin-top:1px;opacity:0.7;}
.login-back{text-align:center;margin-top:22px;font-size:var(--text-sm);color:var(--text-light);}
.login-back a{color:var(--theme-primary);font-weight:700;text-decoration:none;}
.login-back a:hover{text-decoration:underline;}
.login-btn.teacher{background:linear-gradient(135deg,#0F1D45,#1B2E6B);color:#fff;box-shadow:0 10px 26px -8px rgba(15,29,69,0.55);}
.login-btn.teacher:hover{box-shadow:0 14px 32px -8px rgba(15,29,69,0.6),0 0 0 3px rgba(245,197,24,0.28);}
.login-btn.admin{background:linear-gradient(135deg,var(--theme-accent),color-mix(in srgb,var(--theme-accent) 55%,white));color:var(--theme-on-accent);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--theme-accent) 55%,transparent);}
.login-btn.admin:hover{filter:brightness(1.04);box-shadow:0 14px 32px -8px color-mix(in srgb,var(--theme-accent) 60%,transparent),0 0 0 3px color-mix(in srgb,var(--theme-accent) 25%,transparent);}
.login-btn:disabled{opacity:.75;cursor:not-allowed;transform:none!important;}

/* RTL — keep photo/form structure, flip text + input icons only */
html[dir="rtl"] .login-right{text-align:right;}
html[dir="rtl"] .login-center{text-align:right;}
html[dir="rtl"] .fg-wrap i{left:auto;right:14px;}
html[dir="rtl"] .fg-wrap input{padding:13px 44px 13px 14px;}
html[dir="rtl"] .fg label,
html[dir="rtl"] .otp-label,
html[dir="rtl"] .form-header h3,
html[dir="rtl"] .form-header p,
html[dir="rtl"] .login-center h3,
html[dir="rtl"] .login-center p,
html[dir="rtl"] .sec-badge{
  letter-spacing:0;
  text-transform:none;
}
html[dir="rtl"] .form-header h3::after{margin-right:0;margin-left:auto;}
html[dir="rtl"] .login-form-row{flex-wrap:wrap;gap:8px;}
html[dir="rtl"] .login-features li:hover{transform:translateX(-4px);}
@media(min-width:768px){
  html[dir="rtl"] .login-wrapper{direction:ltr;}
  html[dir="rtl"] .login-left,
  html[dir="rtl"] .login-right{direction:rtl;}
}
@media(max-width:767px){
  html[dir="rtl"] .login-wrapper{direction:ltr;overflow-x:hidden;}
  html[dir="rtl"] .login-right{direction:rtl;text-align:right;}
  html[dir="rtl"] .login-left .login-logo{direction:ltr;}
  html[dir="rtl"] body.admin-login,
  html[dir="rtl"] body.auth-page{overflow-x:hidden;}
}

/* ===== Login feedback ===== */
.login-msg{display:none;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:12px 14px;border-radius:var(--radius-md);margin-bottom:16px;line-height:1.5;}
.login-msg.show{display:flex;}
.login-msg i{font-size:16px;flex-shrink:0;}
.login-msg-error{background:var(--danger-bg);border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));color:var(--danger);}
.login-msg-success{background:var(--success-bg);border:1px solid color-mix(in srgb,var(--success) 30%,var(--border));color:var(--success);}
.login-spinner{display:inline-block;width:15px;height:15px;border:2px solid color-mix(in srgb,var(--theme-on-primary) 45%,transparent);border-top-color:var(--theme-on-primary);border-radius:50%;animation:bls-spin .6s linear infinite;vertical-align:-2px;}
.login-btn.admin .login-spinner{border-color:color-mix(in srgb,var(--theme-on-accent) 30%,transparent);border-top-color:var(--theme-on-accent);}
@keyframes bls-spin{to{transform:rotate(360deg);}}

@media(max-width:767px){
  body, body.auth-page, body.admin-login{
    min-height:100dvh;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    background:var(--surface,#fff);
  }
  .login-wrapper{
    display:flex;
    flex-direction:column;
    grid-template-columns:1fr;
    width:100%;
    margin:0;
    border-radius:0;
    min-height:0;
    height:auto;
    max-height:none;
    overflow:visible;
    box-shadow:none;
    background:var(--surface,#fff);
    gap:0;
  }
  .login-left{
    display:flex;
    flex:0 0 auto;
    width:100%;
    aspect-ratio:auto;
    height:clamp(140px, 24vh, 190px);
    min-height:0;
    max-height:none;
    padding:14px 14px 12px;
    justify-content:flex-end;
    overflow:hidden;
    background-size:cover;
    background-position:center center;
  }
  .login-left .login-center,
  .login-left .login-features,
  .login-left .login-footer{display:none!important;}
  .login-left .login-logo{margin-top:auto;z-index:2;}
  .login-left .login-logo-box{width:36px;height:36px;}
  .login-left .login-logo-info h2{font-size:16px;letter-spacing:1.5px;}
  .login-left .login-logo-info p{display:none;}
  .login-right{
    padding:24px 16px max(20px, env(safe-area-inset-bottom));
    box-shadow:none;
    border-radius:22px 22px 0 0;
    margin-top:-28px;
    position:relative;
    z-index:2;
    flex:1 1 auto;
  }
  .form-header h3{font-size:20px;}
  .form-header p{font-size:12px;}
  .login-hint{font-size:11px;padding:10px;}
}
@media(max-width:480px){
  .login-right{padding:18px 14px max(18px, env(safe-area-inset-bottom));}
  .login-left{height:clamp(120px, 22vh, 160px);}
}


@media(min-width:768px){
  body.admin-login{
    height:100dvh;max-height:100dvh;overflow:hidden;min-height:0;
  }
  body.admin-login .login-wrapper{
    flex:1 1 auto;min-height:0;
    height:calc(100dvh - 56px);max-height:calc(100dvh - 56px);
  }
}

/* PWA admin only — taller full-bleed hero, no white logo plate, no dark seam */
@media(max-width:767px){
  html.pwa-app body.admin-login,
  body.pwa-standalone.admin-login{
    background:var(--surface,#fff);
  }
  html.pwa-app body.admin-login .login-wrapper,
  body.pwa-standalone.admin-login .login-wrapper{
    background:var(--surface,#fff);
  }
  html.pwa-app body.admin-login .login-left,
  body.pwa-standalone.admin-login .login-left{
    height:auto;
    aspect-ratio:16 / 10;
    max-height:42vh;
    min-height:180px;
    overflow:hidden;
    background-position:center 38%;
    background-size:cover;
  }
  html.pwa-app body.admin-login .login-left-photo,
  body.pwa-standalone.admin-login .login-left-photo{
    display:block;
  }
  html.pwa-app body.admin-login .login-right,
  body.pwa-standalone.admin-login .login-right{
    margin-top:-36px;
    border-radius:24px 24px 0 0;
  }
  html.pwa-app body.admin-login .login-logo-box,
  body.pwa-standalone.admin-login .login-logo-box{
    background:transparent;box-shadow:none;width:64px;height:64px;
  }
  html.pwa-app body.admin-login .login-logo-mark,
  body.pwa-standalone.admin-login .login-logo-mark{display:none;}
  html.pwa-app body.admin-login .login-logo-pwa,
  body.pwa-standalone.admin-login .login-logo-pwa{
    display:block;width:100%;height:100%;object-fit:contain;padding:0;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  }
}
.login-logo-pwa{display:none;}
.login-left-photo{display:none;position:absolute;inset:0;z-index:0;pointer-events:none;}
.login-left-photo img,.login-left-photo picture{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;
}
@media(prefers-reduced-motion:reduce){
  .login-btn,.login-features li,.login-fi,.tab-btn,.fg input,.fg-wrap i{transition:none;}
  .login-spinner{animation:none;border-top-color:transparent;}
  .login-left,.login-left::before,.login-left::after,.login-right::before,.login-center,.login-right,.login-btn::after,.login-logo-info h2{animation:none;}
}