/* ============================================================
   Modern Login page — responsive + animated
   Fully theme-aware (works with dark/light toggle)
   ============================================================ */

/* ---- Local theme variables for the login page ----
   These define good contrast for both light & dark modes.
   The page reads `data-theme` (set by theme.js on <html>).  */
.login-body{
    --lg-bg: var(--bg);
    --lg-surface: var(--surface);
    --lg-text: var(--text);
    --lg-text-secondary: var(--text-secondary);
    --lg-text-muted: var(--text-muted);
    --lg-border: var(--border);
    --lg-border-strong: var(--border-strong);
    --lg-surface-hover: var(--surface-hover);
    --lg-primary: var(--primary);

    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--lg-bg);
    color:var(--lg-text);
    background-image:
        radial-gradient(circle at 15% 20%, var(--bg-g1), transparent 40%),
        radial-gradient(circle at 85% 10%, var(--bg-g2), transparent 40%),
        radial-gradient(circle at 75% 90%, rgba(14,165,233,.10), transparent 45%);
    background-attachment:fixed;
}

/* ---- Animated background blobs ---- */
.bg-blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.blob-1{width:520px;height:520px;background:var(--primary);opacity:.18;top:-160px;left:-120px;animation:float1 22s ease-in-out infinite}
.blob-2{width:440px;height:440px;background:var(--accent);opacity:.16;bottom:-140px;right:-100px;animation:float2 26s ease-in-out infinite}
.blob-3{width:360px;height:360px;background:var(--info);opacity:.12;top:40%;left:60%;animation:float3 30s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.15)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,-40px) scale(1.1)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,60px)}}

/* ---- Layout ---- */
.login-shell-modern{
    position:relative;z-index:1;
    min-height:100vh;
    display:grid;place-items:center;
    padding:24px;
}
.login-wrap{
    width:min(960px,100%);
    display:grid;
    grid-template-columns:1.1fr 1.4fr;
    gap:0;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.25);
    border:1px solid var(--lg-border);
    background:var(--lg-surface);
    animation:fade-in .7s ease both;
}

/* ---- Brand panel (keeps strong gradient in both modes) ---- */
.login-brand{
    position:relative;
    background:linear-gradient(160deg,var(--primary) 0%,var(--accent) 100%);
    color:#fff;
    padding:2.4rem 2rem;
    display:flex;align-items:center;
    overflow:hidden;
}
.login-brand::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.22),transparent 50%);
}
.brand-inner{position:relative;z-index:1;width:100%}
.brand-logo img{
    width:160px;height:auto;display:block;margin-bottom:1.2rem;
    border-radius:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.3);
    animation:float-logo 5s ease-in-out infinite;
}
@keyframes float-logo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.brand-title{
    font-size:clamp(1.4rem,2.4vw,1.9rem);
    font-weight:800;line-height:1.2;margin-bottom:.6rem;color:#fff;
}
.brand-title span{display:block;color:rgba(255,255,255,.92)}
.brand-tagline{color:#fff;font-size:.98rem;line-height:1.7;margin-bottom:1.6rem;font-weight:500;opacity:.92}
.brand-features{list-style:none;display:grid;gap:.85rem;padding:0;margin:0}
.brand-features li{
    display:flex;align-items:center;gap:.7rem;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.3);
    padding:.7rem .9rem;border-radius:12px;
    backdrop-filter:blur(4px);
    font-size:.9rem;font-weight:600;color:#fff;
    animation:slide-in .6s ease both;
}
.brand-features li:nth-child(1){animation-delay:.15s}
.brand-features li:nth-child(2){animation-delay:.3s}
.brand-features li:nth-child(3){animation-delay:.45s}
.brand-features li:nth-child(4){animation-delay:.6s}
.feat-ic{font-size:1.1rem;flex-shrink:0}
@keyframes slide-in{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

/* ---- Form panel (theme-aware contrast) ---- */
.login-panel{
    background:var(--lg-surface);
    padding:2.2rem 2rem;
    display:flex;flex-direction:column;
    color:var(--lg-text);
}
.panel-head{display:flex;justify-content:flex-end;margin-bottom:.4rem}
.panel-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.welcome-title{
    font-size:clamp(1.5rem,2.2vw,1.8rem);margin-bottom:.3rem;
    background:linear-gradient(135deg,var(--lg-primary),var(--accent));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.welcome-sub{color:var(--lg-text-secondary);margin-bottom:1.6rem;font-size:.95rem}

/* Inputs (theme-aware) */
.form-group{display:grid;gap:.5rem;margin-bottom:1.15rem}
.field-label{color:var(--lg-text-secondary);font-weight:600}
.field-with-icon{position:relative}
.input-ic{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);font-size:1rem;opacity:.6;pointer-events:none}
.field-with-icon .field-input{padding-left:2.6rem}
.login-panel .field-input{
    background:var(--lg-surface);
    border:1px solid var(--lg-border-strong);
    color:var(--lg-text);
}
.login-panel .field-input::placeholder{color:var(--lg-text-muted)}
.login-panel .field-input:focus{border-color:var(--lg-primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--lg-surface)}
.pwd-toggle{
    position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
    width:32px;height:32px;border:none;background:transparent;
    color:var(--lg-text-muted);font-size:1rem;cursor:pointer;border-radius:8px;
    transition:background .2s,color .2s;
}
.pwd-toggle:hover{background:var(--lg-surface-hover);color:var(--lg-text)}

/* Submit button */
.submit-btn{
    width:100%;margin-top:.3rem;
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    padding:.85rem 1.2rem;border:none;border-radius:12px;
    background:linear-gradient(135deg,var(--lg-primary),var(--accent));
    color:#fff;font-weight:700;font-size:1rem;cursor:pointer;
    box-shadow:0 10px 24px var(--primary-soft-border);
    transition:transform .18s,box-shadow .18s,filter .2s;
    position:relative;overflow:hidden;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px var(--primary-soft-border)}
.submit-btn:active{transform:translateY(0)}
.submit-btn.loading{cursor:progress;opacity:.88}
.submit-btn .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-arrow{transition:transform .2s}
.submit-btn:hover .btn-arrow{transform:translateX(4px)}

/* Animations */
.anim-fade-up{animation:fade-up .8s ease both}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.anim-shake{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* Footer */
.login-footer{margin-top:1.8rem;text-align:center;color:var(--lg-text-muted);font-size:.82rem}

/* Alert override (theme-aware) */
.login-panel .alert.error{
    background:var(--danger-soft);
    border:1px solid var(--danger);
    color:var(--danger);
    border-radius:10px;padding:.9rem 1rem;font-size:.9rem;margin-bottom:1.2rem;
}

/* ---- Responsive ---- */
@media (max-width:780px){
    .login-wrap{grid-template-columns:1fr;max-width:460px}
    .login-brand{padding:1.6rem 1.5rem}
    .brand-logo img{width:120px;margin-bottom:.8rem}
    .brand-tagline{margin-bottom:1.1rem}
    .brand-features{grid-template-columns:1fr 1fr;gap:.6rem}
    .brand-features li{font-size:.82rem;padding:.55rem .7rem}
    .login-panel{padding:1.8rem 1.5rem}
}
@media (max-width:480px){
    .login-shell-modern{padding:12px}
    .login-brand{padding:1.4rem 1.2rem}
    .brand-features{grid-template-columns:1fr}
    .login-panel{padding:1.5rem 1.2rem}
}