/* =========================================================
 * Bobok Admin – Premium Auth UI  (v3)
 * Palette derived from Bobok logo:
 *   Deep Navy #0A2540 · Cobalt #1E5BD8/#2E73F0 · Sky #60A5FA
 *   School-Bus Yellow #F5B400/#FBBF24 · Star White #FFFFFF
 * ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root{
    --auth-bg-1:#061635; --auth-bg-2:#0A2540; --auth-bg-3:#102A56;
    --auth-primary:#1E5BD8; --auth-primary-2:#2E73F0; --auth-primary-3:#60A5FA;
    --auth-accent:#F5B400; --auth-accent-2:#FBBF24;
    --auth-card-bg:rgba(255,255,255,.06);
    --auth-card-border:rgba(96,165,250,.22);
    --auth-text:#F8FAFC; --auth-text-dim:#C7D2E8; --auth-text-muted:#8FA3C7;
    --auth-input-bg:rgba(255,255,255,.06);
    --auth-input-bdr:rgba(96,165,250,.22);
    --auth-input-focus:rgba(96,165,250,.55);
    --auth-danger:#F87171; --auth-success:#34D399; --auth-warning:#FBBF24;
    --auth-radius-lg:22px; --auth-radius-md:14px; --auth-radius-sm:10px;
    --auth-shadow-card:0 30px 80px -20px rgba(2,8,28,.7),0 10px 30px -10px rgba(30,91,216,.35),inset 0 1px 0 rgba(255,255,255,.08);
    --auth-shadow-btn:0 12px 28px -8px rgba(30,91,216,.65),inset 0 1px 0 rgba(255,255,255,.25);
    --auth-font-display:'Plus Jakarta Sans',system-ui,sans-serif;
    --auth-font-body:'Manrope',system-ui,sans-serif;
}

/* ===== BACKGROUND ===== */
body{
    font-family:var(--auth-font-body); color:var(--auth-text);
    background:
        radial-gradient(1200px 800px at 12% 8%, rgba(30,91,216,.35), transparent 60%),
        radial-gradient(900px 700px at 90% 18%, rgba(245,180,0,.14), transparent 60%),
        radial-gradient(1000px 800px at 60% 95%, rgba(96,165,250,.22), transparent 65%),
        linear-gradient(135deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 50%, var(--auth-bg-3) 100%);
    background-attachment:fixed; min-height:100vh;
    position:relative; overflow-x:hidden;
}
body::before, body::after{
    content:''; position:fixed; border-radius:50%; pointer-events:none;
    filter:blur(80px); opacity:.55; z-index:0;
}
body::before{width:520px;height:520px;top:-180px;left:-160px;background:radial-gradient(circle,#2E73F0 0%,transparent 70%);animation:authFloatA 18s ease-in-out infinite;}
body::after{width:460px;height:460px;bottom:-180px;right:-140px;background:radial-gradient(circle,#F5B400 0%,transparent 70%);animation:authFloatB 22s ease-in-out infinite;}
@keyframes authFloatA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(80px,60px) scale(1.1);}}
@keyframes authFloatB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,-50px) scale(1.15);}}

body > .container{position:relative;z-index:2;}
.authentication.authentication-basic{position:relative;}
.authentication.authentication-basic::before{
    content:''; position:fixed; inset:0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,.4), transparent);
    background-size:600px 600px;
    opacity:.35; pointer-events:none; z-index:1;
}

/* ===== LOGO ===== */
.logo-box{
    background:linear-gradient(135deg,#fff 0%,#EFF4FB 100%);
    padding:10px 26px; border-radius:18px;
    box-shadow:0 18px 40px -12px rgba(2,8,28,.6),0 4px 14px -4px rgba(30,91,216,.35),inset 0 1px 0 rgba(255,255,255,.9);
    text-align:center; margin:6px 0 14px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.logo-box:hover{transform:translateY(-2px);}
.desktop-logo{height:50px !important; width:auto; display:block;}

/* ===== CARD (glass) ===== */
.card.custom-card{
    background:var(--auth-card-bg) !important;
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid var(--auth-card-border) !important;
    border-radius:var(--auth-radius-lg) !important;
    box-shadow:var(--auth-shadow-card) !important;
    position:relative; overflow:hidden;
    animation:authCardIn .9s cubic-bezier(.2,.8,.2,1) both;
}
.card.custom-card::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(140deg,rgba(255,255,255,.40) 0%,rgba(96,165,250,.20) 25%,rgba(255,255,255,0) 55%,rgba(245,180,0,.30) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.card.custom-card .card-body{position:relative;z-index:1;}
@keyframes authCardIn{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ===== TYPOGRAPHY ===== */
.card.custom-card .h4,
.card.custom-card .h5{
    font-family:var(--auth-font-display); font-weight:700; letter-spacing:-.02em;
    background:linear-gradient(180deg,#fff 0%,#DBE7FF 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.card.custom-card p{font-family:var(--auth-font-body); color:var(--auth-text-dim) !important;}
.form-label{
    font-family:var(--auth-font-body); font-weight:500; font-size:.8rem;
    letter-spacing:.05em; text-transform:uppercase;
    color:var(--auth-text-dim) !important; margin-bottom:.4rem;
}

/* ===== INPUTS ===== */
.card.custom-card .form-control,
.card.custom-card .form-control-lg{
    background:var(--auth-input-bg) !important;
    border:1px solid var(--auth-input-bdr) !important;
    border-radius:var(--auth-radius-md) !important;
    color:var(--auth-text) !important;
    font-family:var(--auth-font-body); font-weight:500;
    padding:.85rem 1rem;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    backdrop-filter:blur(4px);
}
.card.custom-card .form-control::placeholder{color:var(--auth-text-muted) !important; font-weight:400;}
.card.custom-card .form-control:focus{
    background:rgba(255,255,255,.10) !important;
    border-color:var(--auth-input-focus) !important;
    box-shadow:0 0 0 4px rgba(96,165,250,.18),0 6px 18px -8px rgba(46,115,240,.6) !important;
    outline:none;
}
.card.custom-card .form-control:-webkit-autofill,
.card.custom-card .form-control:-webkit-autofill:hover,
.card.custom-card .form-control:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--auth-text);
    -webkit-box-shadow:0 0 0 1000px rgba(10,37,64,.7) inset;
    transition:background-color 5000s ease-in-out 0s;
    caret-color:var(--auth-text);
}

/* ===== PASSWORD FIELD — eye icon INSIDE input ===== */
.password-field{position:relative;}
.password-field .form-control{padding-right:48px !important;}  /* space for the eye */
.password-field .pwd-toggle{
    position:absolute; top:50%; right:6px;
    transform:translateY(-50%);
    width:36px; height:36px;
    background:transparent; border:0;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--auth-text-muted);
    border-radius:10px;
    cursor:pointer;
    transition:color .15s ease, background .15s ease;
    padding:0;
}
.password-field .pwd-toggle:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}
.password-field .pwd-toggle:focus-visible{
    outline:2px solid var(--auth-primary-3); outline-offset:2px;
}
.password-field .pwd-toggle i{font-size:18px; line-height:1;}

/* Remember-me checkbox */
.card.custom-card .form-check-input{
    background-color:var(--auth-input-bg);
    border:1px solid var(--auth-input-bdr);
    width:1.05em; height:1.05em; cursor:pointer;
}
.card.custom-card .form-check-input:checked{
    background-color:var(--auth-primary); border-color:var(--auth-primary);
    box-shadow:0 0 0 3px rgba(30,91,216,.25);
}
.card.custom-card .form-check-label{color:var(--auth-text-dim) !important; font-size:.9rem; cursor:pointer;}

/* ===== PRIMARY BUTTON ===== */
.btn-auth-primary{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#1E5BD8 0%,#2E73F0 50%,#4F90F7 100%) !important;
    color:#fff !important;
    font-family:var(--auth-font-display); font-weight:600; font-size:1rem;
    letter-spacing:.02em; padding:.9rem 1.25rem;
    border:0 !important; border-radius:var(--auth-radius-md) !important;
    box-shadow:var(--auth-shadow-btn);
    transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .2s ease;
    isolation:isolate;
}
.btn-auth-primary::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
    transform:translateX(-110%);
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
    z-index:-1;
}
.btn-auth-primary:hover:not(:disabled){
    transform:translateY(-2px);
    box-shadow:0 20px 38px -10px rgba(30,91,216,.7), inset 0 1px 0 rgba(255,255,255,.3);
    filter:brightness(1.05);
}
.btn-auth-primary:hover:not(:disabled)::before{transform:translateX(110%);}
.btn-auth-primary:active:not(:disabled){transform:translateY(0);}
.btn-auth-primary:disabled{opacity:.75; cursor:not-allowed;}

/* ===== LINKS ===== */
.auth-link{
    color:var(--auth-text-dim) !important;
    text-decoration:none; font-weight:500; font-size:.9rem;
    position:relative; transition:color .2s ease;
}
.auth-link:hover{color:var(--auth-accent) !important;}
.auth-link::after{
    content:''; position:absolute; left:0; bottom:-2px;
    width:100%; height:1px; background:currentColor;
    transform:scaleX(0); transform-origin:right;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.auth-link:hover::after{transform:scaleX(1); transform-origin:left;}

/* ===== TOAST ALERTS ===== */
.auth-toast-stack{
    position:fixed; top:24px; right:24px; z-index:1080;
    display:flex; flex-direction:column; gap:12px;
    max-width:calc(100vw - 48px); width:380px; pointer-events:none;
}
.auth-toast{
    pointer-events:auto;
    display:flex; align-items:flex-start; gap:12px;
    padding:14px 16px; border-radius:var(--auth-radius-md);
    background:rgba(15,30,60,.85);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,.10);
    color:var(--auth-text); font-family:var(--auth-font-body);
    font-size:.9rem; line-height:1.45;
    box-shadow:0 22px 50px -16px rgba(0,0,0,.6),0 6px 18px -6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
    transform:translateX(120%); opacity:0;
    animation:toastIn .45s cubic-bezier(.2,.8,.2,1) forwards;
    position:relative; overflow:hidden;
}
.auth-toast.is-leaving{animation:toastOut .35s cubic-bezier(.4,0,.6,1) forwards;}
@keyframes toastIn{0%{transform:translateX(120%);opacity:0;}60%{transform:translateX(-8px);opacity:1;}100%{transform:translateX(0);opacity:1;}}
@keyframes toastOut{to{transform:translateX(120%);opacity:0;}}

.auth-toast::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--auth-stripe, var(--auth-primary-3));
}
.auth-toast .auth-toast-icon{
    flex:0 0 32px; width:32px; height:32px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:18px;
    background:var(--auth-icon-bg, rgba(96,165,250,.18));
    color:var(--auth-stripe, var(--auth-primary-3));
}
.auth-toast .auth-toast-body{flex:1 1 auto; min-width:0;}
.auth-toast .auth-toast-title{
    font-family:var(--auth-font-display); font-weight:600;
    font-size:.92rem; margin:0 0 2px; color:#fff;
}
.auth-toast .auth-toast-message{color:var(--auth-text-dim); font-size:.85rem; margin:0;}
.auth-toast .auth-toast-close{
    flex:0 0 auto; background:transparent; border:0;
    color:var(--auth-text-muted); font-size:18px; line-height:1;
    padding:2px 4px; cursor:pointer;
    transition:color .15s ease, transform .15s ease;
}
.auth-toast .auth-toast-close:hover{color:#fff; transform:scale(1.1);}
.auth-toast.t-danger { --auth-stripe:#F87171; --auth-icon-bg:rgba(248,113,113,.18); }
.auth-toast.t-success{ --auth-stripe:#34D399; --auth-icon-bg:rgba(52,211,153,.18); }
.auth-toast.t-warning{ --auth-stripe:#FBBF24; --auth-icon-bg:rgba(251,191,36,.18); }
.auth-toast.t-info   { --auth-stripe:#60A5FA; --auth-icon-bg:rgba(96,165,250,.18); }
.auth-toast .auth-toast-progress{
    position:absolute; left:4px; right:0; bottom:0; height:2px;
    background:var(--auth-stripe); opacity:.55;
    transform-origin:left center;
    animation:toastProgress var(--auth-toast-life, 5s) linear forwards;
}
@keyframes toastProgress{from{transform:scaleX(1);}to{transform:scaleX(0);}}

/* Hide legacy inline targets — toasts handle messaging */
.output, .resend-output{display:none !important;}

@media (max-width:575.98px){
    .auth-toast-stack{top:12px; right:12px; left:12px; width:auto; max-width:none;}
}

/* ===== OTP INPUTS (6 digits) ===== */
.otp-wrapper{animation:authFadeUp .6s .3s cubic-bezier(.2,.8,.2,1) both;}
@keyframes authFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.otp-input{
    font-family:var(--auth-font-display) !important;
    font-size:1.5rem !important; font-weight:700 !important;
    text-align:center; height:60px;
    padding:0 !important;
    background:var(--auth-input-bg) !important;
    border:1px solid var(--auth-input-bdr) !important;
    border-radius:var(--auth-radius-md) !important;
    color:#fff !important;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .15s cubic-bezier(.2,.8,.2,1);
    caret-color:var(--auth-primary-3);
}
.otp-input:focus{
    background:rgba(255,255,255,.10) !important;
    border-color:var(--auth-input-focus) !important;
    box-shadow:0 0 0 4px rgba(96,165,250,.22),0 8px 22px -10px rgba(46,115,240,.6) !important;
    outline:none; transform:translateY(-2px);
}
.otp-input.is-filled{
    background:linear-gradient(135deg,rgba(30,91,216,.30),rgba(96,165,250,.22)) !important;
    border-color:rgba(96,165,250,.6) !important;
    color:#fff !important;
}
.otp-input.is-invalid{
    border-color:var(--auth-danger) !important;
    box-shadow:0 0 0 4px rgba(248,113,113,.22) !important;
    animation:otpShake .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes otpShake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-4px);}
    40%,60%{transform:translateX(4px);}
}

/* Tighter OTP boxes on mobile so all 6 fit */
@media (max-width:575.98px){
    .otp-input{height:52px; font-size:1.2rem !important;}
}

/* Resend link */
#resend_otp{color:var(--auth-accent) !important; font-weight:600;}
#resend_otp:hover{color:var(--auth-accent-2) !important;}
#resend_otp.disabled,
#resend_otp[aria-disabled="true"]{
    pointer-events:none; opacity:.55;
    color:var(--auth-text-muted) !important; text-decoration:none;
}

/* Verify badge */
.verify-badge{
    width:64px; height:64px; border-radius:18px;
    background:linear-gradient(135deg, rgba(30,91,216,.45), rgba(96,165,250,.20));
    border:1px solid rgba(96,165,250,.45);
    display:inline-flex; align-items:center; justify-content:center;
    color:#DBE7FF; font-size:30px;
    box-shadow:0 18px 38px -14px rgba(30,91,216,.7), inset 0 1px 0 rgba(255,255,255,.18);
    margin:6px auto 16px; position:relative;
    animation:verifyPulse 2.6s ease-in-out infinite;
}
.verify-badge::after{
    content:''; position:absolute; inset:-8px; border-radius:22px;
    border:1px solid rgba(96,165,250,.25);
    opacity:0; animation:verifyRing 2.6s ease-in-out infinite;
}
@keyframes verifyPulse{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@keyframes verifyRing{0%{transform:scale(.85);opacity:.6;}100%{transform:scale(1.15);opacity:0;}}

/* ===== ROLE BUTTONS (legacy) ===== */
.roleBtn{
    background-color:#fff !important; color:var(--auth-primary) !important;
    border:1px solid var(--auth-primary); border-radius:20px !important;
    font-weight:600; width:100%;
}
.roleBtn.active{background-color:var(--auth-accent) !important; color:#fff !important;}

/* ===== ROLE SELECT MODAL ===== */
#roleSelectModal .modal-content{
    border-radius:20px; border:1px solid var(--auth-card-border);
    background:linear-gradient(160deg,#0A2540 0%,#102A56 100%);
    box-shadow:var(--auth-shadow-card); overflow:hidden; color:var(--auth-text);
}
#roleSelectModal .modal-header{
    background:linear-gradient(135deg, rgba(30,91,216,.5), rgba(46,115,240,.3));
    border-bottom:1px solid var(--auth-card-border); padding:18px 24px;
}
#roleSelectModal .modal-title{
    font-family:var(--auth-font-display); font-weight:700; color:#fff;
}
#roleSelectModal .modal-body{padding:26px;}
#roleSelectModal .modal-body p.text-muted{color:var(--auth-text-dim) !important; font-family:var(--auth-font-body);}

/* Premium role card: accent bar + icon + title/subtitle + chevron.
   Layout reusable across panels - sirf brand vars use karta hai. */
.role-card{
    position:relative; display:flex; align-items:center; gap:14px;
    border:1px solid var(--auth-card-border);
    border-radius:var(--auth-radius-md); padding:15px 18px 15px 20px;
    cursor:pointer; overflow:hidden;
    background:rgba(255,255,255,.04); color:var(--auth-text);
    transition:transform .25s cubic-bezier(.2,.8,.2,1),
               box-shadow .25s cubic-bezier(.2,.8,.2,1),
               border-color .25s, background .25s;
}
/* left accent bar (brand yellow) - hover/active pe glow */
.role-card::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--auth-accent); transform:scaleY(0); transform-origin:center;
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.role-card:hover::before,
.role-card.active::before{transform:scaleY(1);}

.role-card .role-icon{
    flex:0 0 auto; width:42px; height:42px; border-radius:11px;
    display:flex; align-items:center; justify-content:center; font-size:1.15rem;
    color:var(--auth-primary-3);
    background:rgba(96,165,250,.12); border:1px solid var(--auth-card-border);
    transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.role-card .role-text{flex:1 1 auto; min-width:0; text-align:left;}
.role-card .role-title{
    display:block; font-family:var(--auth-font-display); font-weight:600;
    font-size:.98rem; color:#fff; text-transform:capitalize; line-height:1.2;
}
.role-card .role-sub{
    display:block; font-family:var(--auth-font-body); font-weight:400;
    font-size:.76rem; color:var(--auth-text-muted); margin-top:2px;
}
.role-card .role-chevron{
    flex:0 0 auto; color:var(--auth-text-muted); font-size:1.1rem;
    transition:transform .25s, color .25s; opacity:.7;
}
/* inline spinner (BS5 .spinner-border reuse, brand colored) - hidden by default */
.role-card .role-spinner{display:none; flex:0 0 auto; color:var(--auth-primary-3);}

.role-card:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, rgba(30,91,216,.18), rgba(245,180,0,.08));
    border-color:var(--auth-primary-3);
    box-shadow:0 12px 28px -10px rgba(30,91,216,.55);
}
.role-card:hover .role-icon{
    color:#fff; background:var(--auth-primary); border-color:var(--auth-primary-3);
}
.role-card:hover .role-chevron{transform:translateX(3px); color:var(--auth-accent); opacity:1;}

.role-card.active{
    background:linear-gradient(135deg, var(--auth-primary), var(--auth-primary-2));
    border-color:var(--auth-primary-3);
    box-shadow:0 16px 30px -10px rgba(30,91,216,.7);
}
.role-card.active .role-icon{color:#fff; background:rgba(255,255,255,.18); border-color:transparent;}
.role-card.active .role-sub{color:rgba(255,255,255,.7);}

/* busy state: chevron hide, spinner show */
.role-card.is-busy{cursor:default;}
.role-card.is-busy .role-chevron{display:none;}
.role-card.is-busy .role-spinner{display:inline-flex;}
.role-card.is-busy:not(.active){opacity:.55;}

/* ===== RESPONSIVE ===== */
@media (max-width:575.98px){
    .card.custom-card{border-radius:18px !important;}
    .logo-box{padding:8px 22px;}
    .desktop-logo{height:40px !important;}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
    body::before, body::after{animation:none;}
}