/* SmartSchools student login restyle (CSS only, 14 Oct 2026).
   Every rule is scoped to the login screen via :has(#schoolCode):has(#grNumber), so other pages are unaffected. */
body:has(#schoolCode):has(#grNumber){background:#eef4fb!important}
.min-h-screen:has(#schoolCode):has(#grNumber){
  --ssl-blue:#1c6ba3;--ssl-blue-dk:#155582;--ssl-blue-lt:#e8f1f9;--ssl-err:#c0392b;--ssl-err-bg:#fdecea;
  display:flex!important;flex-wrap:wrap;align-content:center;align-items:stretch;justify-content:center;gap:0;padding:32px 16px;min-height:100vh;
  background:radial-gradient(1200px 600px at 10% -10%,#dbe9f7 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#d6e6f5 0%,transparent 60%),#eef4fb;
  font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif}
/* Card */
.min-h-screen:has(#schoolCode):has(#grNumber)>div{
  flex:0 1 480px!important;background:#fff!important;padding:40px 40px 32px!important;border-radius:20px;
  box-shadow:0 20px 50px -12px rgba(21,85,130,.25),0 2px 6px rgba(21,85,130,.06);position:relative;z-index:1}
.min-h-screen:has(#schoolCode):has(#grNumber) .max-w-xl{max-width:100%!important}
.min-h-screen:has(#schoolCode):has(#grNumber) .max-w-xl>.mb-8:first-child{margin-bottom:24px!important}
.min-h-screen:has(#schoolCode):has(#grNumber) .max-w-xl>.mb-8:first-child img{max-height:56px;width:auto;object-fit:contain;object-position:left center}
.min-h-screen:has(#schoolCode):has(#grNumber) h2{color:#0f2c44!important;font-size:1.65rem!important;letter-spacing:-.01em}
.min-h-screen:has(#schoolCode):has(#grNumber) h2+p{color:#5b6b7b!important;font-size:.95rem!important}
/* Desktop: gradient welcome panel to the left of the card */
@media (min-width:992px){
  .min-h-screen:has(#schoolCode):has(#grNumber)::before{
    content:"Welcome back to SmartSchools \A \A Your classes, homework, exams and school updates, all in one place.";
    white-space:pre-line;flex:0 1 420px;
    display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;padding:48px 40px;
    color:#fff;font-size:1.05rem;line-height:1.6;font-weight:500;border-radius:20px 0 0 20px;
    background:
      radial-gradient(circle at 80% 18%,rgba(255,255,255,.22) 0 70px,transparent 71px),
      radial-gradient(circle at 18% 40%,rgba(255,255,255,.12) 0 110px,transparent 111px),
      radial-gradient(circle at 90% 70%,rgba(255,255,255,.10) 0 46px,transparent 47px),
      linear-gradient(150deg,#2a86c7 0%,#1c6ba3 45%,#123f63 100%);
    box-shadow:0 20px 50px -12px rgba(21,85,130,.35)}
  .min-h-screen:has(#schoolCode):has(#grNumber)>div{border-radius:0 20px 20px 0;display:flex;align-items:center}
}
/* Labels and inputs */
.min-h-screen:has(#schoolCode):has(#grNumber) form label{font-size:.9rem!important;font-weight:600!important;color:#23384d;margin-bottom:6px!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form .space-y-4{--tw-space-y-reverse:0}
.min-h-screen:has(#schoolCode):has(#grNumber) form .space-y-4>:not(:first-child){margin-top:0!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form input{
  height:46px!important;font-size:.95rem!important;padding:10px 14px!important;background:#f7fafd!important;
  border:1.5px solid #d6e2ee!important;border-radius:10px!important;color:#0f2c44;transition:border-color .15s,box-shadow .15s,background .15s}
.min-h-screen:has(#schoolCode):has(#grNumber) form input#password{padding-right:44px!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form input::placeholder{color:#93a3b3}
.min-h-screen:has(#schoolCode):has(#grNumber) form input:hover{border-color:#b9cde0!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form input:focus,
.min-h-screen:has(#schoolCode):has(#grNumber) form input:focus-visible{
  outline:none!important;background:#fff!important;border-color:var(--ssl-blue)!important;box-shadow:0 0 0 4px rgba(28,107,163,.18)!important}
/* Friendly error states (native validity, aria-invalid, and red helper text) */
.min-h-screen:has(#schoolCode):has(#grNumber) form input[aria-invalid="true"],
.min-h-screen:has(#schoolCode):has(#grNumber) form input:user-invalid{border-color:var(--ssl-err)!important;background:#fffafa!important;box-shadow:0 0 0 4px rgba(192,57,43,.12)!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form p.text-red-500,
.min-h-screen:has(#schoolCode):has(#grNumber) form .text-destructive{color:var(--ssl-err)!important;font-size:.85rem;margin-top:6px}
/* Toasts (sonner) shown on this page */
body:has(#schoolCode):has(#grNumber) [data-sonner-toast][data-type="error"]{background:var(--ssl-err-bg,#fdecea)!important;color:#8a1f14!important;border:1px solid #f5c2bc!important;border-radius:12px!important}
/* Links and button */
.min-h-screen:has(#schoolCode):has(#grNumber) form .text-right button{color:var(--ssl-blue)!important;font-size:.9rem!important;font-weight:500!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form button[type="submit"]{
  height:48px!important;border-radius:10px!important;font-size:1.05rem!important;font-weight:600!important;letter-spacing:.01em;
  background:linear-gradient(135deg,#2a86c7,#1c6ba3)!important;border:0!important;
  box-shadow:0 8px 20px -6px rgba(28,107,163,.55);transition:transform .15s,box-shadow .15s,filter .15s}
.min-h-screen:has(#schoolCode):has(#grNumber) form button[type="submit"]:hover{filter:brightness(1.05);box-shadow:0 10px 24px -6px rgba(28,107,163,.6);transform:translateY(-1px)}
.min-h-screen:has(#schoolCode):has(#grNumber) form button[type="submit"]:focus-visible{outline:none!important;box-shadow:0 0 0 4px rgba(28,107,163,.3)!important}
.min-h-screen:has(#schoolCode):has(#grNumber) form button[type="submit"]:disabled{opacity:.7;cursor:progress}
.min-h-screen:has(#schoolCode):has(#grNumber) form>.text-center{font-size:.85rem!important;color:#6b7a89!important}
/* Mobile */
@media (max-width:600px){
  .min-h-screen:has(#schoolCode):has(#grNumber){padding:16px 12px;align-items:flex-start}
  .min-h-screen:has(#schoolCode):has(#grNumber)>div{padding:28px 20px 24px!important;border-radius:16px;margin-top:12px}
  .min-h-screen:has(#schoolCode):has(#grNumber) h2{font-size:1.4rem!important}
}
@media (prefers-reduced-motion:reduce){
  .min-h-screen:has(#schoolCode):has(#grNumber) *{transition:none!important;animation:none!important}
  .min-h-screen:has(#schoolCode):has(#grNumber) form button[type="submit"]:hover{transform:none}
}