/* Shared login presentation only; no dashboard or global template overrides. */
.auth-login {
    --brand-navy: #101426;
    --brand-dark-purple: #191832;
    --brand-purple: #8b5cf6;
    --brand-lavender: #a78bfa;
    --brand-gold: #d6b453;
    --brand-text: #171b33;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: #f8f9fe;
    color: var(--brand-text);
    font-family: 'Tajawal', 'Public Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-login *, .auth-login *::before, .auth-login *::after { box-sizing: border-box; }
.auth-login .login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
    padding: clamp(32px, 4vw, 64px);
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 10% 5%, rgba(139, 92, 246, .2), transparent 50%),
        radial-gradient(ellipse at 95% 80%, rgba(139, 92, 246, .16), transparent 55%),
        linear-gradient(160deg, #191832, #101426 70%);
    color: #e9eaf4;
}

.auth-login .login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .2;
    background-image: linear-gradient(rgba(167, 139, 250, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167, 139, 250, .14) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(transparent, #000);
    pointer-events: none;
}

.auth-login .login-brand-top { display: flex; align-items: center; gap: 22px; }
.auth-login .login-logo { display: block; width: 108px; height: 108px; object-fit: contain; }
.auth-login .login-brand-wordmark { padding-inline-start: 22px; border-inline-start: 1px solid rgba(167, 139, 250, .22); font-family: 'Public Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 3px; direction: ltr; }
.auth-login .login-brand-wordmark > span { display: block; margin-top: 8px; font-size: 8px; font-weight: 500; letter-spacing: 2.5px; color: #b1a7cc; }
.auth-login .login-brand-copy { max-width: 440px; }
.auth-login .login-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #c3b1f3; font-size: 13px; font-weight: 500; }
.auth-login .login-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold); box-shadow: 0 0 0 5px rgba(214, 180, 83, .07); }
.auth-login .login-brand h1 { max-width: 450px; margin: 0 0 18px; color: #f6f2ff; font-size: clamp(32px, 3.2vw, 48px); font-weight: 800; line-height: 1.3; letter-spacing: -.8px; }
.auth-login .login-brand-copy > p { max-width: 360px; margin: 0; color: #b0b3cc; font-size: 17px; line-height: 1.9; }
.auth-login .login-orbit { position: relative; align-self: center; width: min(100%, 300px); aspect-ratio: 1; flex-shrink: 0; margin-block: -16px; }
.auth-login .login-orbit-ring { position: absolute; border: 1px solid rgba(167, 139, 250, .18); border-radius: 50%; }
.auth-login .login-orbit-ring-outer { inset: 0; border-style: dashed; border-color: rgba(167, 139, 250, .17); }
.auth-login .login-orbit-ring-inner { inset: 15%; background: radial-gradient(circle, rgba(139, 92, 246, .12), transparent 72%); }
.auth-login .login-orbit-core { position: absolute; inset: 32%; display: grid; place-items: center; border: 1px solid rgba(167, 139, 250, .3); border-radius: 28px; background: linear-gradient(145deg, #393057, #221e39); box-shadow: 0 18px 60px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .07); }
.auth-login .login-orbit-core i { font-size: 44px; color: #cbb6ff; }
.auth-login .login-orbit-node { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(167, 139, 250, .22); border-radius: 15px; background: #24213b; color: #bda5f5; font-size: 24px; }
.auth-login .login-orbit-node-school { top: 5%; inset-inline-start: 13%; transform: rotate(-8deg); }
.auth-login .login-orbit-node-star { bottom: 10%; inset-inline-end: 7%; color: var(--brand-gold); transform: rotate(9deg); }
.auth-login .login-orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); top: 35%; inset-inline-end: 0; box-shadow: 0 0 0 6px rgba(214, 180, 83, .06); }
.auth-login .login-brand-footer { display: flex; align-items: center; gap: 14px; color: #9b9eb7; font-size: 12px; }
.auth-login .login-brand-rule { height: 1px; width: 36px; background: var(--brand-gold); opacity: .6; }

.auth-login .login-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-width: 0; padding: 48px clamp(24px, 5vw, 80px) 26px; background: radial-gradient(ellipse at 85% 0, rgba(167, 139, 250, .075), transparent 45%), #f8f9fe; }
.auth-login .login-form-shell { width: 100%; max-width: 410px; margin-block: auto; }
.auth-login .login-form-heading { margin-bottom: 30px; }
.auth-login .login-form-emblem { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border: 1px solid #e5ddf8; border-radius: 15px; background: #eee8fa; color: #7950c7; font-size: 25px; box-shadow: inset 0 1px #fff; }
.auth-login .login-kicker { margin: 0 0 8px; color: #7950c7; font-size: 12px; font-weight: 700; }
.auth-login .login-form-heading h2 { margin: 0 0 10px; color: var(--brand-text); font-size: 34px; font-weight: 800; line-height: 1.3; letter-spacing: -.6px; }
.auth-login .login-intro { margin: 0; color: #777f98; font-size: 15px; line-height: 1.6; }
.auth-login .login-roles { padding: 0; margin: 0 0 24px; border: 0; min-width: 0; }
.auth-login .login-roles legend, .auth-login .login-field > label { display: block; float: none; width: auto; padding: 0; margin: 0 0 10px; color: #383b53; font-size: 13px; font-weight: 700; }
.auth-login .login-role-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; border: 1px solid #e7e6f0; border-radius: 13px; background: #efeff7; }
.auth-login .login-role-options > label { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin: 0; padding: 8px 4px; border: 1px solid transparent; border-radius: 9px; color: #6c7289; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .18s, color .18s, box-shadow .18s; }
.auth-login .login-role-options > label i { font-size: 19px; }
.auth-login .login-role-options > label:hover { background: #e7e1f5; color: #6741b1; }
.auth-login .btn-check:checked + label { border-color: #e0d3f9; background: #fff; color: #7548c7; box-shadow: 0 2px 8px rgba(41, 28, 73, .07); }
.auth-login .btn-check:focus-visible + label { outline: 2px solid #a78bfa; outline-offset: 2px; }
.auth-login .login-field { margin-bottom: 21px; }
.auth-login .login-input-wrap { position: relative; }
.auth-login .login-input-icon { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: #9295ad; font-size: 20px; pointer-events: none; }
.auth-login .form-control { width: 100%; min-height: 52px; padding: 13px 16px; padding-inline-start: 46px; border: 1px solid #e0e2ed; border-radius: 12px; background: #fff; color: var(--brand-text); font-family: inherit; font-size: 14px; text-align: start; transition: border-color .18s, box-shadow .18s; }
.auth-login .form-control::placeholder { color: #999db1; opacity: 1; }
.auth-login .form-control:focus { border-color: #a78bfa; background: #fff; box-shadow: 0 0 0 4px rgba(139, 92, 246, .09); outline: none; }
.auth-login .login-password-wrap .form-control { padding-inline-end: 52px; }
.auth-login .login-password-wrap .toggle-password { display: grid; place-items: center; width: 40px; height: 40px; inset-inline-start: auto !important; inset-inline-end: 6px !important; border-radius: 9px; color: #858aa2; font-size: 16px !important; }
.auth-login .toggle-password:hover { background: #f0eaff; color: #7950c7; }
.auth-login .toggle-password:focus-visible { outline: 2px solid #a78bfa; outline-offset: 1px; }
.auth-login .login-errors { padding-inline-start: 18px; margin: 8px 0 0; color: #ba354c; font-size: 12px; line-height: 1.65; }
.auth-login .login-input-wrap:has(+ .login-errors) .form-control { border-color: #d77b89; }
.auth-login .login-status { margin-bottom: 20px; padding: 12px 15px; border: 1px solid #dfd3f8; border-radius: 10px; background: #f0eaff; color: #6741b1; font-size: 14px; }
.auth-login .login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 28px; padding: 12px 20px; border: 1px solid #7950d2; border-radius: 12px; background: linear-gradient(110deg, #7950d2, #8b5cf6); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 6px 16px rgba(121, 80, 210, .18); transition: box-shadow .18s, filter .18s; }
.auth-login .login-submit:hover { border-color: #7950d2; background: linear-gradient(110deg, #7045c8, #8250ee); color: #fff; box-shadow: 0 8px 22px rgba(121, 80, 210, .25); }
.auth-login .login-submit:focus-visible { outline: 3px solid #c8b3f5; outline-offset: 3px; }
.auth-login .login-submit:disabled { opacity: .7; cursor: wait; }
.auth-login[dir="ltr"] .login-submit-arrow { transform: rotate(180deg); }
.auth-login .login-form-footer { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: #9a9eb0; font-family: 'Public Sans', sans-serif; font-size: 9px; letter-spacing: 1.5px; white-space: nowrap; }
.auth-login .login-form-footer > span { flex: 1; height: 1px; background: #e3e3ed; }
.auth-login .login-credit { color: #9397ab; text-align: center; font-size: 11px; direction: ltr; }

@media (min-width: 901px) and (max-height: 760px) {
    .auth-login .login-brand { gap: 20px; padding-block: 30px; }
    .auth-login .login-orbit { width: 200px; }
    .auth-login .login-panel { padding-block: 28px 18px; gap: 20px; }
    .auth-login .login-form-heading { margin-bottom: 22px; }
    .auth-login .login-form-emblem { margin-bottom: 14px; }
    .auth-login .login-form-footer { margin-top: 22px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .auth-login { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .auth-login .login-brand { padding-inline: 30px; }
    .auth-login .login-panel { padding-inline: 32px; }
    .auth-login .login-brand-wordmark { font-size: 15px; letter-spacing: 2px; padding-inline-start: 16px; }
    .auth-login .login-brand-top { gap: 16px; }
}

@media (max-width: 900px) {
    .auth-login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .auth-login .login-brand { flex-direction: row; align-items: center; gap: 20px; padding: 22px 32px; }
    .auth-login .login-brand-top { flex-shrink: 0; }
    .auth-login .login-logo { width: 84px; height: 84px; }
    .auth-login .login-brand-wordmark, .auth-login .login-eyebrow,
    .auth-login .login-orbit, .auth-login .login-brand-footer { display: none; }
    .auth-login .login-brand h1 { margin-bottom: 6px; font-size: 25px; letter-spacing: -.3px; }
    .auth-login .login-brand-copy > p { font-size: 13px; line-height: 1.7; }
    .auth-login .login-panel { padding: 36px 28px 22px; gap: 28px; }
    .auth-login .login-form-emblem { display: none; }
    .auth-login .login-form-heading h2 { font-size: 30px; }
}

@media (max-width: 480px) {
    .auth-login .login-brand { gap: 14px; padding: 16px 22px; }
    .auth-login .login-logo { width: 62px; height: 62px; }
    .auth-login .login-brand h1 { font-size: 20px; line-height: 1.4; }
    .auth-login .login-brand-copy > p { font-size: 11px; line-height: 1.7; }
    .auth-login .login-panel { padding: 28px 22px 18px; }
    .auth-login .login-form-heading { margin-bottom: 24px; }
    .auth-login .login-form-heading h2 { font-size: 28px; }
    .auth-login .login-role-options > label { gap: 4px; font-size: 12px; }
    .auth-login .login-role-options > label i { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-login .login-role-options > label, .auth-login .form-control,
    .auth-login .login-submit { transition: none; }
}