/* AlpoBiz School Uniform ERP login v44 — page-only styling. */
:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body.al-login-body {
  --al-green: var(--theme-sidebar, #176a4b);
  --al-deep: #083e31;
  --al-text: #14372f;
  --al-muted: #627b71;
  position: relative;
  isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  margin: 0; overflow-x: hidden;
  display: flex;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--al-text);
  background: #1b4a3c;
}
.al-photo-layer {
  position: fixed; inset: 0; z-index: -3;
  background: url('../images/uniform-login-bg.jpg') center center / cover no-repeat;
  transform: scale(1.015);
}
.al-green-wash {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(2,39,30,.30) 0%,rgba(5,43,32,.14) 42%,rgba(6,39,30,.29) 100%),
              linear-gradient(0deg, rgba(0,29,19,.49) 0%, transparent 45%);
}
.al-uniform-ribbon {
  position: fixed; left:-8vw; right:-8vw; bottom: -135px; height:210px; z-index: -1;
  border-radius: 54% 46% 0 0 / 45% 50% 0 0;
  background: rgba(245,255,249,.88);
  box-shadow: 0 -12px 42px rgba(255,255,255,.13);
  pointer-events: none;
}
.al-uniform-ribbon::after {
  content: ''; position:absolute; left:-5%; right:-5%; bottom:-55px; height:138px;
  background: color-mix(in srgb, var(--al-green), transparent 85%);
  border-radius: 50% 50% 0 0 / 50% 45% 0 0;
}
.al-login-scene {
  display: grid; align-items:center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 465px);
  gap:clamp(20px,4.5vw,88px); width: min(1320px, 100%);
  min-height:100vh; min-height:100dvh;
  margin:0 auto; padding: 32px clamp(20px,5vw,66px) 60px;
}
.al-intro { max-width: 530px; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.19); align-self:end; padding-bottom:clamp(45px,10vh,110px); }
.al-intro-kicker { display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.22em; font-weight:850; color:#eafdf3; }
.al-kicker-dot {width:9px;height:9px;background:#b7f8c5;border-radius:50%;box-shadow:0 0 0 5px rgba(225,255,235,.2)}
.al-intro h1 { font-size:clamp(40px,4.7vw,68px); line-height:1.07;letter-spacing:-.055em; font-weight:870; color:#fff; margin:19px 0; }
.al-intro h1 em { color:#ccfadd; font-style:normal; }
.al-intro p {max-width:410px; font-size:16px; line-height:1.7; color:#effff4; margin:0; font-weight:550;}
.al-intro-capsules {display:flex; flex-wrap:wrap; gap:9px; margin-top:23px;}
.al-intro-capsules span {background:rgba(4,51,33,.38); border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(8px); border-radius:999px;padding:9px 12px; font-size:11px;font-weight:800;}
.al-login-card {
  justify-self:end; width:100%; max-width:465px; position:relative; overflow:hidden;
  border-radius:92px 92px 28px 28px;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(255,255,255,.75));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 29px 85px rgba(2,37,24,.30),inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(25px) saturate(120%);-webkit-backdrop-filter:blur(25px) saturate(120%);
  padding:clamp(30px,3.2vw,45px) clamp(25px,3.3vw,43px) 24px;
}
.al-card-accent { position:absolute; height:6px; top:0; left:0; right:0;background:linear-gradient(90deg,transparent,var(--al-green),#3cbc86,var(--al-green),transparent); }
.al-brand {text-align:center; margin:0 0 22px;}
.al-brand-symbol {display:grid;place-items:center; width:66px;height:66px;margin:0 auto 11px; border-radius:21px;
 color:#fff;background:linear-gradient(135deg,var(--al-deep),var(--al-green));box-shadow:0 13px 25px rgba(7,77,51,.20)}
.al-brand-symbol svg {width:39px;height:39px}
.al-brand-name {font-size:35px;letter-spacing:-.06em;font-weight:900;line-height:1.18;color:#103f30;}
.al-brand-name span {color:var(--al-green);}
.al-erp-tag {display:flex;justify-content:center;align-items:center;gap:11px;margin-top:3px;font-size:12px;font-weight:900;letter-spacing:.22em;color:var(--al-green)}
.al-erp-tag span {height:2px;width:23px;background:var(--al-green);border-radius:1px}
.al-welcome {text-align:center;margin-bottom:22px;}
.al-welcome h2 {font-size:27px;line-height:1.15;letter-spacing:-.045em;font-weight:850;margin:0 0 6px;color:var(--al-deep)}
.al-welcome p {font-size:13px;line-height:1.5;color:#49675a;margin:0;}
.al-welcome strong {font-weight:850;}
.al-signin-form {display:block;}
.al-form-field {margin-bottom:15px;}
.al-form-field label {display:block;font-size:12px;font-weight:850;color:var(--al-text);margin-bottom:8px;}
.al-input-wrap {position:relative;}
.al-input-wrap input {display:block;width:100%;min-width:0;min-height:50px;border:1px solid #cddfd7;border-radius:12px;
 background:rgba(255,255,255,.87);outline:none;padding:12px 69px 12px 45px;color:#15382d;font-size:14px;
 transition:box-shadow .15s ease,border-color .15s ease;}
.al-input-wrap input::placeholder{color:#84988e;}
.al-input-wrap input:focus{border-color:var(--al-green);box-shadow:0 0 0 4px rgba(25,125,85,.12)}
.al-input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);height:20px;width:20px;display:grid;place-items:center;pointer-events:none;color:#477461;}
.al-input-icon svg{width:20px;height:20px;}
.al-toggle-password {position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;color:var(--al-green);
 padding:10px;font-size:11px;font-weight:850;cursor:pointer;min-width:48px;}
.al-toggle-password:hover,.al-toggle-password:focus-visible{background:#eaf5ee;outline:none;}
.al-caps-notice{color:#8d530d;font-size:11px;font-weight:750;margin:5px 0 0;}
.al-caps-notice[hidden]{display:none;}
.al-login-submit{margin-top:5px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:53px;
 width:100%;border:0;border-radius:12px;cursor:pointer;color:#fff;font-size:15px;font-weight:900;
 background:linear-gradient(112deg,var(--al-green),#167a57);box-shadow:0 12px 23px rgba(11,103,70,.21);transition:transform .15s,box-shadow .15s;}
.al-login-submit:hover{transform:translateY(-1px);box-shadow:0 15px 25px rgba(11,103,70,.24)}
.al-login-submit:disabled{opacity:.75;cursor:wait;transform:none;}
.al-login-submit svg{width:21px;height:21px;}
.al-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:25px;padding-top:20px;
 border-top:1px solid rgba(89,123,105,.24);gap:10px;}
.al-features>div{display:flex;align-items:center;flex-direction:column;gap:6px;min-width:0;text-align:center;}
.al-feature-icon{color:var(--al-green);width:29px;height:29px;display:grid;place-items:center;}
.al-feature-icon svg{width:24px;height:24px;}
.al-features strong{font-size:10px;color:#244d3d;}
.al-card-footer{font-size:10px;color:#597266;text-align:center;margin:22px 0 0;line-height:1.5;}
.al-card-footer strong{color:var(--al-green);}
@media(max-width:820px){
 .al-login-scene{grid-template-columns:1fr;justify-items:center;align-content:center;gap:20px;padding:22px 15px 36px;}
 .al-intro{display:none;}
 .al-login-card{justify-self:center;max-width:455px;}
 .al-green-wash{background:rgba(8,52,40,.32)}
}
@media(max-width:520px){
 .al-login-card{border-radius:54px 54px 24px 24px;padding:28px 23px 22px;}
 .al-brand-symbol{width:57px;height:57px;border-radius:18px}
 .al-brand-symbol svg{width:33px;height:33px}
 .al-brand-name{font-size:30px}
 .al-welcome h2{font-size:24px}
 .al-features{margin-top:20px;padding-top:16px;}
 .al-photo-layer{background-position:40% center;}
}
@media (prefers-reduced-motion:reduce){.al-login-submit,.al-input-wrap input{transition:none}}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){.al-login-card{background:rgba(252,255,253,.96)}}