/*
 * admin.login.css
 * Premium Login Page — Glassmorphism + Mesh Gradient
 * Depends on: Bootstrap Icons
 */

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BODY / BACKGROUND ───────────────────────────────── */
body.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #021a3a;
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 20%,  rgba(2, 114, 205, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 80%,  rgba(0, 60, 160, 0.60) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 60% 10%,  rgba(21,101,192, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 40% 60% at 20% 90%,  rgba(66,165,245, 0.35) 0%, transparent 55%);
    position: relative;
}

body.admin-login-page::before {
    content: '';
    position: fixed;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2,114,205,0.35) 0%, transparent 65%);
    top: -200px; left: -200px;
    animation: orbDrift 14s ease-in-out infinite;
    pointer-events: none;
}

body.admin-login-page::after {
    content: '';
    position: fixed;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66,165,245,0.28) 0%, transparent 65%);
    bottom: -150px; right: -100px;
    animation: orbDrift 18s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes orbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(40px, -30px) scale(1.04); }
    66%       { transform: translate(-20px, 20px) scale(.97); }
}

.login-bg-grid {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* ── CARD ────────────────────────────────────────────── */
.login-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 980px;
    min-height: 560px;
    display: flex;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        0 40px 100px rgba(0,20,80,0.60),
        0 0 120px rgba(2,114,205,0.30);
    margin: 1.5rem;
}

/* ── LEFT PANEL ──────────────────────────────────────── */
.login-panel-left {
    flex: 1;
    background: linear-gradient(145deg, rgba(2,114,205,0.35) 0%, rgba(0,40,130,0.50) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255,255,255,0.10);
    padding: 3rem 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.login-panel-left::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2,114,205,0.20) 0%, transparent 70%);
    top: -100px; right: -100px;
    pointer-events: none;
}

.login-panel-left::after {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66,165,245,0.12) 0%, transparent 70%);
    bottom: -60px; left: -60px;
    pointer-events: none;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 3rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.lp-brand img { height: 34px; filter: brightness(0) invert(1); }

.lp-brand-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.20); }

.lp-brand span {
    color: rgba(255,255,255,0.70);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.lp-content { position: relative; z-index: 1; max-width: 420px; }

.lp-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(66,165,245,0.15);
    border: 1px solid rgba(66,165,245,0.25);
    color: #90CAF9;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    margin-bottom: 1.25rem;
}

.lp-headline {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    letter-spacing: -.5px;
    margin-bottom: 1rem;
}

.lp-headline span {
    background: linear-gradient(90deg, #42A5F5, #90CAF9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-sub {
    color: rgba(255,255,255,0.45);
    font-size: .875rem;
    line-height: 1.75;
    max-width: 320px;
    margin-bottom: 2rem;
}

.lp-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.lp-stat-num { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 3px; }
.lp-stat-num span { color: #42A5F5; }
.lp-stat-label { font-size: .72rem; color: rgba(255,255,255,0.40); font-weight: 500; }

.lp-features { display: flex; flex-direction: column; gap: .9rem; }

.lp-feature {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: rgba(255,255,255,0.60);
    font-size: .83rem;
    transition: color .2s;
}

.lp-feat-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #64B5F6;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}

.lp-feature:hover .lp-feat-icon { background: rgba(2,114,205,0.20); border-color: rgba(2,114,205,0.35); color: #90CAF9; }
.lp-feature:hover { color: rgba(255,255,255,0.85); }

.lp-footer {
    position: absolute;
    bottom: 1.75rem; left: 3rem;
    font-size: .72rem;
    color: rgba(255,255,255,0.18);
    z-index: 1;
}

/* ── RIGHT PANEL ─────────────────────────────────────── */
.login-panel-right {
    width: 420px;
    flex-shrink: 0;
    background: rgba(1, 30, 80, 0.45);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.75rem;
}

.login-form-wrap { width: 100%; }

.lf-header { margin-bottom: 2rem; }

.lf-avatar {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(2,114,205,0.30), rgba(0,33,113,0.40));
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #90CAF9;
    margin-bottom: 1.25rem;
}

.lf-header h4 { font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: .3rem; letter-spacing: -.3px; }
.lf-header p  { font-size: .83rem; color: rgba(255,255,255,0.38); }

.lf-field { margin-bottom: 1.1rem; }

.lf-field label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: .45rem;
}

.lf-input-wrap { position: relative; }

.lf-input-wrap i.field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.25);
    font-size: .95rem;
    pointer-events: none;
    transition: color .2s;
}

.lf-input-wrap input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.10);
    border-radius: 11px;
    padding: .75rem .9rem .75rem 2.7rem;
    font-size: .9rem;
    color: #fff;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.lf-input-wrap input::placeholder { color: rgba(255,255,255,0.20); }

.lf-input-wrap input:focus {
    background: rgba(255,255,255,0.09);
    border-color: rgba(2,114,205,0.70);
    box-shadow: 0 0 0 3px rgba(2,114,205,0.15);
}

.lf-input-wrap input:focus ~ i.field-icon { color: #64B5F6; }

.pw-toggle {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.25);
    cursor: pointer;
    font-size: .95rem;
    padding: 0;
    transition: color .2s;
}

.pw-toggle:hover { color: #64B5F6; }

.btn-login {
    width: 100%;
    background: linear-gradient(135deg, #0272CD 0%, #002171 100%);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: .85rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 8px 28px rgba(2,114,205,0.40), inset 0 1px 0 rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent);
    opacity: 0;
    transition: opacity .2s;
}

.btn-login:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(2,114,205,0.50); }
.btn-login:hover::before { opacity: 1; }
.btn-login:active { transform: translateY(0); }

.login-error {
    background: rgba(198,40,40,0.15);
    color: #EF9A9A;
    border: 1px solid rgba(198,40,40,0.30);
    border-radius: 10px;
    padding: .65rem 1rem;
    font-size: .82rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lf-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 0;
}

.lf-divider span { font-size: .72rem; color: rgba(255,255,255,0.20); white-space: nowrap; }
.lf-divider::before, .lf-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }

.lf-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .72rem;
    color: rgba(255,255,255,0.20);
    margin-top: 1.25rem;
}

.lf-secure i { font-size: .8rem; color: rgba(100,181,246,0.50); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 860px) {
    .login-card { flex-direction: column; max-width: 440px; min-height: auto; }
    .login-panel-left { display: none; }
    .login-panel-right { width: 100%; padding: 2.5rem 2rem; }
}