/* School Master Premium Login v2 — approved 2026-08-31 visual refresh.
   Visual-only layer: authentication behavior remains in Login.razor. */

.sm-login-page{
    min-height:100vh;
    position:relative;
    isolation:isolate;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:24px 32px 46px;
    background:
        radial-gradient(circle at 8% 14%,rgba(112,64,215,.18),transparent 30%),
        radial-gradient(circle at 96% 84%,rgba(255,174,64,.12),transparent 28%),
        linear-gradient(135deg,#f4f0ff 0%,#fbfbff 44%,#f7f8fc 100%);
}

.sm-login-page>.sm-login-glow{pointer-events:none;opacity:.45;filter:blur(4px)}
.sm-login-page>.glow-one{width:320px;height:320px;left:-120px;top:80px;background:rgba(113,66,224,.24)}
.sm-login-page>.glow-two{width:260px;height:260px;right:-90px;bottom:90px;background:rgba(255,168,50,.14)}

/* Public navigation: clean, premium and aligned with the login surface. */
.sm-public-mini-nav{
    width:min(1320px,calc(100vw - 64px));
    min-height:58px;
    margin:0 auto 12px;
    padding:0 16px 0 42%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    position:relative;
    z-index:5;
    background:transparent;
    border:0;
    box-shadow:none;
}
.sm-public-mini-nav a{
    min-height:38px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:#4f34ba;
    font-size:13px;
    font-weight:800;
    letter-spacing:.01em;
    transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.sm-public-mini-nav a:hover{background:#fff;color:#4f1fc2;transform:translateY(-1px);box-shadow:0 8px 20px rgba(67,36,150,.08)}
.sm-public-mini-nav a:last-child{
    margin-left:8px;
    padding:0 20px;
    color:#fff;
    background:linear-gradient(135deg,#5b25cc,#7b32e2);
    box-shadow:0 8px 18px rgba(91,37,204,.22);
}
.sm-public-mini-nav a:last-child:hover{color:#fff;background:linear-gradient(135deg,#4e1db8,#702bd7);box-shadow:0 12px 24px rgba(91,37,204,.28)}

/* Main two-panel composition. */
.sm-login-shell{
    width:min(1320px,calc(100vw - 64px));
    min-height:700px;
    display:grid;
    grid-template-columns:minmax(430px,40%) minmax(0,60%);
    border:1px solid rgba(99,73,167,.16);
    border-radius:28px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 34px 90px rgba(42,25,92,.18),0 3px 10px rgba(58,38,108,.06);
    position:relative;
    z-index:2;
}

/* Purple brand showcase. */
.sm-login-showcase{
    min-width:0;
    padding:34px 48px 38px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:22px;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 50% 25%,rgba(255,179,57,.18),transparent 19%),
        radial-gradient(circle at 88% 69%,rgba(255,190,74,.14),transparent 17%),
        radial-gradient(circle at 16% 92%,rgba(123,60,228,.32),transparent 26%),
        linear-gradient(145deg,#16073d 0%,#29105d 45%,#35136f 100%);
}
.sm-login-showcase::before{
    content:"";
    position:absolute;
    width:560px;height:560px;
    right:-270px;top:-10px;
    border:1px solid rgba(255,207,102,.25);
    border-radius:50%;
    box-shadow:0 0 0 72px rgba(144,82,237,.065),0 0 0 146px rgba(255,255,255,.025);
    pointer-events:none;
}
.sm-login-showcase::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.72;
    background:
      radial-gradient(circle at 79% 17%,#ffc74a 0 3px,transparent 4px),
      radial-gradient(circle at 91% 56%,#ffbf43 0 4px,transparent 8px),
      radial-gradient(circle at 18% 78%,rgba(255,195,63,.8) 0 2px,transparent 5px),
      radial-gradient(circle at 76% 83%,rgba(167,103,255,.7) 0 2px,transparent 5px);
}

.sm-login-brandline{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:4px 0 0;
    text-align:center;
}
.sm-login-brandline::before{
    content:"";
    position:absolute;
    top:16px;left:50%;
    width:230px;height:150px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(255,178,53,.34) 0%,rgba(141,57,234,.22) 38%,transparent 72%);
    filter:blur(14px);
    animation:smLoginBrandGlow 4s ease-in-out infinite;
    pointer-events:none;
}
.sm-login-brandline img{
    width:190px!important;
    height:150px!important;
    object-fit:contain;
    position:relative;
    z-index:1;
    filter:drop-shadow(0 0 16px rgba(255,186,55,.48)) drop-shadow(0 18px 28px rgba(5,0,25,.32));
    transform:translateZ(0);
}
.sm-login-brand-copy{display:grid!important;place-items:center;gap:2px;position:relative;z-index:1}
.sm-login-brand-copy strong{
    display:block;
    color:#fff;
    font-size:28px;
    line-height:1;
    font-weight:900;
    letter-spacing:.015em;
    text-shadow:0 5px 18px rgba(0,0,0,.28);
}
.sm-login-brand-copy span{
    display:block;
    color:#ffc84a!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.11em!important;
    margin-top:7px;
}
.sm-login-brand-copy small{display:none!important}

.sm-login-hero{position:relative;z-index:2;max-width:470px;margin-top:0}
.sm-login-secure{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(255,204,85,.55);
    border-radius:999px;
    color:#ffd05a;
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}
.sm-login-hero h1{
    margin:17px 0 12px;
    color:#fff;
    font-size:clamp(42px,3.35vw,58px)!important;
    line-height:1.04!important;
    letter-spacing:-.048em!important;
    font-weight:900!important;
    text-shadow:0 10px 26px rgba(0,0,0,.18);
}
.sm-login-hero p{
    max-width:440px;
    margin:0;
    color:#ded4f2!important;
    font-size:14px!important;
    line-height:1.55!important;
}

/* Turn the old feature grid into the approved three trust badges without changing auth markup. */
.sm-login-feature-grid{
    position:relative;
    z-index:2;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
}
.sm-login-feature-grid>div{
    min-height:54px;
    padding:9px 10px!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:8px!important;
    border:1px solid rgba(255,201,74,.38)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.055)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(7,1,31,.12);
    backdrop-filter:blur(10px);
    text-align:left;
}
.sm-login-feature-grid>div:nth-child(4){display:none!important}
.sm-login-feature-grid>div::before{
    width:30px;height:30px;
    flex:0 0 30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#ffd050;
    background:rgba(255,194,65,.1);
    font-size:18px;
    font-weight:900;
}
.sm-login-feature-grid>div:nth-child(1)::before{content:"✓"}
.sm-login-feature-grid>div:nth-child(2)::before{content:"♙"}
.sm-login-feature-grid>div:nth-child(3)::before{content:"▥"}
.sm-login-feature-grid>div strong{font-size:0!important;color:#fff!important;line-height:1.1}
.sm-login-feature-grid>div strong::after{font-size:11px;font-weight:850;white-space:nowrap}
.sm-login-feature-grid>div:nth-child(1) strong::after{content:"Secure Login"}
.sm-login-feature-grid>div:nth-child(2) strong::after{content:"Role-based Access"}
.sm-login-feature-grid>div:nth-child(3) strong::after{content:"School ERP"}
.sm-login-feature-grid>div span{display:none!important}
.sm-login-showcase>small{position:relative;z-index:2;color:rgba(238,231,255,.66)!important;font-size:9px!important;margin-top:-8px}

/* Right login area. */
.sm-login-card.sm-login-dashboard-shell{
    min-width:0;
    width:100%;
    max-width:none;
    padding:42px 56px 48px!important;
    border:0!important;
    border-radius:0!important;
    background:
        radial-gradient(circle at 95% 0%,rgba(112,64,215,.035),transparent 29%),
        linear-gradient(180deg,#fff 0%,#fefeff 100%)!important;
    box-shadow:none!important;
}
.sm-login-home-row{margin-bottom:24px!important}
.sm-login-home-row .sm-outline-btn{
    min-height:42px!important;
    padding:0 15px!important;
    border-radius:12px!important;
    border-color:#ded8ec!important;
    color:#303349!important;
    background:#fff!important;
    box-shadow:0 5px 14px rgba(44,31,80,.035);
}
.sm-login-home-row .sm-outline-btn:hover{border-color:#9d80e3!important;color:#5b25cc!important;box-shadow:0 8px 18px rgba(78,43,159,.08)}
.sm-login-mini-brand{display:none!important}
.sm-login-heading span{color:#6f35d7!important;font-size:10px!important;font-weight:900!important;letter-spacing:.14em!important}
.sm-login-heading h2{
    margin:9px 0 6px!important;
    color:#111936!important;
    font-size:clamp(31px,3vw,44px)!important;
    line-height:1.06!important;
    letter-spacing:-.04em!important;
    font-weight:900!important;
}
.sm-login-heading p{margin:0!important;color:#6d7183!important;font-size:13px!important}

.sm-login-selector-panel{
    margin:28px 0 18px!important;
    padding:18px!important;
    border:1px solid #e3dff0!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,#fff,#fcfbff)!important;
    box-shadow:0 16px 38px rgba(57,39,105,.065)!important;
}
.sm-login-selector-head{margin-bottom:14px!important}
.sm-login-selector-head span{color:#6d39d0!important;font-size:9px!important;letter-spacing:.12em!important}
.sm-login-selector-head strong{font-size:14px!important;color:#171b34!important}
.sm-login-selector-head>small{font-size:9px!important;color:#85889a!important}
.sm-login-choice-grid{gap:16px!important}
.sm-login-choice{
    min-height:176px!important;
    padding:17px 12px 14px!important;
    position:relative;
    overflow:visible;
    gap:5px!important;
    border:1px solid #ded9ea!important;
    border-radius:18px!important;
    background:linear-gradient(155deg,#fff 5%,#fcfbff 100%)!important;
    box-shadow:0 8px 20px rgba(35,26,65,.045),inset 0 1px 0 rgba(255,255,255,.9)!important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease!important;
}
.sm-login-choice:hover{
    transform:translateY(-4px)!important;
    border-color:#bba8ed!important;
    box-shadow:0 15px 30px rgba(75,42,158,.12)!important;
}
.sm-login-choice.active{
    transform:translateY(-3px) scale(1.015)!important;
    border:2px solid #6c28e7!important;
    background:linear-gradient(155deg,#fff 0%,#f7f2ff 100%)!important;
    box-shadow:0 0 0 4px rgba(108,40,231,.07),0 18px 34px rgba(102,41,220,.21),inset 0 0 25px rgba(120,55,231,.035)!important;
}
.sm-login-choice.active::after{
    content:"✓";
    position:absolute;
    top:10px;right:10px;
    width:27px;height:27px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,#641edb,#7a2fea);
    color:#fff;
    border:3px solid #fff;
    box-shadow:0 5px 12px rgba(91,31,211,.24);
    font-size:12px;
    font-weight:950;
}
.sm-login-choice strong{margin-top:4px!important;color:#15182e!important;font-size:14px!important;font-weight:850!important}
.sm-login-choice small{color:#777b8d!important;font-size:10px!important}
.sm-login-choice.active small{color:#6c35cc!important;font-weight:800!important}

/* CSS-rendered glossy pseudo-3D illustrations replacing flat emoji presentation. */
.sm-login-choice-icon{
    width:88px!important;
    height:82px!important;
    position:relative;
    isolation:isolate;
    display:block!important;
    margin-bottom:4px;
    border:0!important;
    border-radius:24px!important;
    background:radial-gradient(circle at 35% 22%,#fff 0 8%,#f6f1ff 42%,#eee7fb 100%)!important;
    box-shadow:inset 0 1px 0 #fff,inset 0 -8px 16px rgba(79,46,135,.06),0 12px 20px rgba(45,29,78,.12)!important;
    color:transparent!important;
    font-size:0!important;
    transform:perspective(420px) rotateX(2deg) rotateY(-2deg);
    transition:transform .22s ease,box-shadow .22s ease;
}
.sm-login-choice:hover .sm-login-choice-icon,.sm-login-choice.active .sm-login-choice-icon{transform:perspective(420px) translateY(-3px) rotateX(0) rotateY(0);box-shadow:inset 0 1px 0 #fff,inset 0 -8px 16px rgba(79,46,135,.06),0 17px 28px rgba(69,34,139,.17)!important}

/* Parent family */
.sm-login-choice:nth-child(1) .sm-login-choice-icon::before{
    content:"";
    position:absolute;
    left:17px;top:13px;
    width:25px;height:25px;
    border-radius:50%;
    background:radial-gradient(circle at 36% 30%,#ffe2c0 0 22%,#efae77 67%,#d98557 100%);
    box-shadow:31px 3px 0 -1px #e9a16f,16px 22px 0 -5px #f3b683,0 3px 7px rgba(51,29,27,.18),31px 6px 8px -2px rgba(51,29,27,.16);
    z-index:3;
}
.sm-login-choice:nth-child(1) .sm-login-choice-icon::after{
    content:"";
    position:absolute;
    left:10px;bottom:10px;
    width:68px;height:34px;
    border-radius:34px 34px 18px 18px;
    background:linear-gradient(125deg,#2f66b5 0 43%,#f07d63 44% 100%);
    box-shadow:inset 0 7px 10px rgba(255,255,255,.18),0 7px 10px rgba(45,29,66,.14);
    z-index:1;
}
/* School */
.sm-login-choice:nth-child(2) .sm-login-choice-icon::before{
    content:"";
    position:absolute;
    left:17px;bottom:12px;
    width:54px;height:43px;
    border-radius:6px 6px 8px 8px;
    background:linear-gradient(90deg,#9b6de9 0 17%,#e9dcff 18% 82%,#8657d8 83% 100%);
    border:1px solid rgba(75,36,139,.16);
    box-shadow:inset 0 5px 10px rgba(255,255,255,.55),0 9px 14px rgba(65,39,102,.18);
    z-index:1;
}
.sm-login-choice:nth-child(2) .sm-login-choice-icon::after{
    content:"";
    position:absolute;
    left:11px;top:12px;
    width:66px;height:29px;
    background:linear-gradient(145deg,#a870ee,#6b31cb);
    clip-path:polygon(50% 0,100% 72%,84% 72%,84% 100%,16% 100%,16% 72%,0 72%);
    filter:drop-shadow(0 5px 4px rgba(55,27,93,.19));
    z-index:2;
}
/* User / staff */
.sm-login-choice:nth-child(3) .sm-login-choice-icon::before{
    content:"";
    position:absolute;
    left:31px;top:12px;
    width:28px;height:30px;
    border-radius:48% 48% 46% 46%;
    background:radial-gradient(circle at 38% 30%,#ffe0bd 0 21%,#e7a46e 68%,#c97a4c 100%);
    box-shadow:0 4px 7px rgba(50,30,25,.16);
    z-index:3;
}
.sm-login-choice:nth-child(3) .sm-login-choice-icon::after{
    content:"";
    position:absolute;
    left:19px;bottom:10px;
    width:52px;height:38px;
    border-radius:28px 28px 11px 11px;
    background:linear-gradient(135deg,#39435c,#111a33 70%);
    box-shadow:inset 0 7px 9px rgba(255,255,255,.08),0 8px 12px rgba(32,28,55,.18);
    z-index:1;
}

.sm-login-active-card{
    padding:20px!important;
    border:1px solid #e1ddeb!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 13px 32px rgba(41,31,74,.07)!important;
}
.sm-login-active-head{grid-template-columns:52px minmax(0,1fr) auto!important;gap:12px!important;margin-bottom:10px!important}
.sm-login-active-icon{
    width:52px!important;height:52px!important;
    border-radius:16px!important;
    background:radial-gradient(circle at 35% 25%,#fff,#f0e9ff 65%,#e4d9fb)!important;
    box-shadow:inset 0 1px 0 #fff,0 8px 16px rgba(70,42,126,.13)!important;
    font-size:25px!important;
    filter:saturate(1.12) drop-shadow(0 3px 4px rgba(44,25,76,.12));
}
.sm-login-active-head small{color:#6c35d0!important;font-size:9px!important;font-weight:900!important}
.sm-login-active-head h3{font-size:21px!important;font-weight:880!important;color:#171a34!important}
.sm-login-state{min-height:28px!important;padding:0 10px!important;font-size:8px!important}
.sm-login-active-copy{font-size:11px!important;line-height:1.55!important;color:#74788b!important}
.sm-login-active-card label{font-size:10px!important}
.sm-login-input-wrap{border-radius:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.sm-login-input-wrap:focus-within{border-color:#8f64e2!important;box-shadow:0 0 0 3px rgba(106,49,207,.09)!important}
.sm-login-submit,.sm-gradient-btn{border-radius:12px!important;min-height:45px!important}
.sm-login-create{margin-top:18px!important}
.sm-login-trust{color:#7b7e90!important}

@keyframes smLoginBrandGlow{
    0%,100%{opacity:.76;transform:translateX(-50%) scale(.96)}
    50%{opacity:1;transform:translateX(-50%) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
    .sm-login-brandline::before{animation:none}
    .sm-login-choice,.sm-login-choice-icon,.sm-public-mini-nav a{transition:none!important}
}

@media(max-width:1120px){
    .sm-login-page{padding:18px 22px 40px}
    .sm-public-mini-nav{width:min(1080px,calc(100vw - 44px));padding-left:35%;gap:3px}
    .sm-public-mini-nav a{padding:0 9px;font-size:12px}
    .sm-login-shell{width:min(1080px,calc(100vw - 44px));grid-template-columns:minmax(360px,38%) minmax(0,62%)}
    .sm-login-showcase{padding:30px 34px}
    .sm-login-brandline img{width:158px!important;height:125px!important}
    .sm-login-brand-copy strong{font-size:24px}
    .sm-login-hero h1{font-size:42px!important}
    .sm-login-card.sm-login-dashboard-shell{padding:38px 36px 44px!important}
    .sm-login-choice-grid{gap:10px!important}
    .sm-login-choice{min-height:165px!important}
}

@media(max-width:900px){
    .sm-login-page{padding:16px 18px 34px}
    .sm-public-mini-nav{width:calc(100vw - 36px);padding:0;justify-content:center;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
    .sm-public-mini-nav::-webkit-scrollbar{display:none}
    .sm-login-shell{width:calc(100vw - 36px);grid-template-columns:1fr;min-height:0}
    .sm-login-showcase{min-height:390px;padding:26px 34px 28px;gap:12px}
    .sm-login-brandline{flex-direction:row;justify-content:flex-start;text-align:left;gap:10px}
    .sm-login-brandline::before{left:52px;top:-10px;width:160px;height:110px;transform:none}
    .sm-login-brandline img{width:92px!important;height:72px!important}
    .sm-login-brand-copy{place-items:start}
    .sm-login-brand-copy strong{font-size:20px}
    .sm-login-brand-copy span{font-size:9px!important;margin-top:4px}
    .sm-login-hero h1{font-size:37px!important;margin:11px 0 8px}
    .sm-login-hero p{font-size:12px!important;max-width:590px}
    .sm-login-feature-grid{max-width:600px}
    .sm-login-showcase>small{display:none}
    .sm-login-card.sm-login-dashboard-shell{padding:34px 40px 42px!important}
}

@media(max-width:600px){
    .sm-login-page{padding:12px 10px 26px}
    .sm-public-mini-nav{width:calc(100vw - 20px);justify-content:flex-start;padding:4px 2px;margin-bottom:7px}
    .sm-public-mini-nav a{min-width:max-content;font-size:11px;padding:0 9px}
    .sm-public-mini-nav a:last-child{margin-left:2px;padding:0 13px}
    .sm-login-shell{width:calc(100vw - 20px);border-radius:20px}
    .sm-login-showcase{min-height:330px;padding:22px 20px}
    .sm-login-brandline img{width:78px!important;height:61px!important}
    .sm-login-brand-copy strong{font-size:18px}
    .sm-login-brand-copy span{font-size:8px!important}
    .sm-login-secure{font-size:8px}
    .sm-login-hero h1{font-size:32px!important}
    .sm-login-hero p{font-size:11px!important;line-height:1.45!important}
    .sm-login-feature-grid{gap:6px!important}
    .sm-login-feature-grid>div{min-height:44px;padding:6px!important;gap:5px!important}
    .sm-login-feature-grid>div::before{width:24px;height:24px;flex-basis:24px;font-size:14px}
    .sm-login-feature-grid>div strong::after{font-size:8px}
    .sm-login-card.sm-login-dashboard-shell{padding:28px 16px 34px!important}
    .sm-login-heading h2{font-size:30px!important}
    .sm-login-selector-panel{padding:12px!important;margin-top:22px!important}
    .sm-login-choice-grid{gap:7px!important}
    .sm-login-choice{min-height:124px!important;padding:12px 5px 10px!important;border-radius:14px!important}
    .sm-login-choice-icon{width:60px!important;height:57px!important;border-radius:17px!important;transform:none}
    .sm-login-choice:nth-child(1) .sm-login-choice-icon::before{left:11px;top:9px;width:17px;height:17px;box-shadow:21px 2px 0 -1px #e9a16f,11px 15px 0 -4px #f3b683,0 2px 5px rgba(51,29,27,.16),21px 4px 5px -2px rgba(51,29,27,.13)}
    .sm-login-choice:nth-child(1) .sm-login-choice-icon::after{left:7px;bottom:7px;width:46px;height:23px}
    .sm-login-choice:nth-child(2) .sm-login-choice-icon::before{left:12px;bottom:8px;width:36px;height:29px}
    .sm-login-choice:nth-child(2) .sm-login-choice-icon::after{left:8px;top:8px;width:44px;height:20px}
    .sm-login-choice:nth-child(3) .sm-login-choice-icon::before{left:21px;top:8px;width:19px;height:20px}
    .sm-login-choice:nth-child(3) .sm-login-choice-icon::after{left:13px;bottom:7px;width:35px;height:26px}
    .sm-login-choice strong{font-size:11px!important}
    .sm-login-choice small{font-size:8px!important}
    .sm-login-choice.active::after{top:6px;right:6px;width:23px;height:23px}
    .sm-login-active-card{padding:14px!important;border-radius:16px!important}
    .sm-login-active-head{grid-template-columns:42px minmax(0,1fr)!important}
    .sm-login-active-icon{width:42px!important;height:42px!important;font-size:20px!important}
    .sm-login-state{grid-column:2;justify-self:start}
}