/* ─── LOGIN / AUTH ─────────────────────────────────────── */
/* Requires design-tokens.css for --vc-* variables */
:root {
    --login-bg-deep: #04112C;
    --login-bg-navy: #06183E;
    --login-bg-core: #0D3F81;
    --login-bg-tech: #2C93D6;
    --login-bg-light: #7EC5E7;
    --login-highlight: #EEF6FA;
}

html, body {
    min-height: 100%;
    font-family: var(--vc-font, 'Inter', system-ui, sans-serif);
}

body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(126, 197, 231, 0.22), transparent 18%),
        radial-gradient(circle at 82% 14%, rgba(44, 147, 214, 0.18), transparent 16%),
        radial-gradient(circle at 50% 100%, rgba(13, 63, 129, 0.28), transparent 28%),
        linear-gradient(160deg, var(--login-bg-deep) 0%, var(--login-bg-navy) 42%, var(--login-bg-core) 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(4, 17, 44, 0.22) 0%, transparent 35%, rgba(238, 246, 250, 0.05) 50%, transparent 70%),
        radial-gradient(circle at 50% 50%, rgba(44, 147, 214, 0.08), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.login-shell { width: 100%; }
.login-logo {
    text-align: center;
    margin-bottom: 26px;
    padding: 8px 0 20px;
    border-bottom: 1px solid rgba(13, 63, 129, 0.12);
}
.login-logo-primary { display: inline-block; margin-bottom: 0; }
.login-logo-primary img { max-width: 320px; width: 100%; height: auto; }
.login-card {
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    border-radius: 22px;
    box-shadow: 0 28px 60px rgba(2, 8, 23, 0.34);
}
.login-card .card-body { padding: 2rem 2rem 1.75rem; }
.login-title { color: #17315d; font-weight: 700; letter-spacing: -0.02em; }
.login-title-helper {
    color: #6c7d95; font-size: 0.92rem;
    text-align: center; margin-top: -6px; margin-bottom: 24px;
}
.form-label {
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #27406c; margin-bottom: 0.45rem;
}
.form-control {
    min-height: 48px; border-radius: 12px;
    border: 1px solid #cdd7e3; background: #f6f9fc;
    color: #17315d;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:focus {
    border-color: rgba(44, 147, 214, 0.75);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(44, 147, 214, 0.16);
}
.btn-login-primary {
    min-height: 50px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #0D3F81 0%, #2C93D6 100%);
    box-shadow: 0 12px 22px rgba(13, 63, 129, 0.22);
    font-weight: 700; letter-spacing: 0.01em;
}
.btn-login-primary:hover,
.btn-login-primary:focus {
    background: linear-gradient(135deg, #0b376f 0%, #247fbb 100%);
    box-shadow: 0 14px 28px rgba(13, 63, 129, 0.28);
}
.login-alert {
    border: 1px solid rgba(176, 42, 55, 0.15); background: #fff5f6;
    color: #8b1e2d; border-radius: 12px;
    padding: 0.75rem 0.9rem; font-size: 0.92rem;
}
.login-info-box {
    border: 1px solid rgba(44, 147, 214, 0.14);
    background: linear-gradient(180deg, #f4f9fd 0%, #eef6fa 100%);
    color: #4c607d; border-radius: 12px;
    padding: 0.85rem 1rem;
}
.forgot-link { color: #66758a; font-weight: 500; transition: color .2s ease; }
.forgot-link:hover { color: #17315d; }

.login-tabs { gap: 8px; padding: 6px; background: #edf3f8; border-radius: 14px; }
.nav-pills .nav-link {
    cursor: pointer; color: #617086; border-radius: 10px;
    font-weight: 600; padding: 0.8rem 0.9rem;
}
.nav-pills .nav-link.active {
    font-weight: 700;
    background-color: var(--login-bg-core);
    box-shadow: 0 8px 18px rgba(13, 63, 129, 0.24);
}
#video-container {
    position: relative; width: 100%; max-width: 400px;
    margin: 0 auto; border-radius: 14px; overflow: hidden;
    background: #000; display: none;
}
#camera-feed { width: 100%; height: auto; display: block; }
#overlay-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 767.98px) {
    .container { padding-top: 24px; padding-bottom: 24px; align-items: flex-start; }
    .login-card .card-body { padding: 1.5rem 1.2rem; }
    .login-logo-primary img { max-width: 250px; }
}