/*
 * Steel variant — include AFTER login.css to override the dark theme.
 * Built around #3F72AF (steel blue) as the dominant accent.
 * Usage: <link rel="stylesheet" href="/css/login-steel.css">
 */

:root {
    --navy:          #3f72af;
    --navy-deep:     #2a4d7a;
    --navy-hover:    #4d82c0;
    --azure:         #3f72af;
    --azure-glow:    rgba(63, 114, 175, 0.35);
    --card-bg:       rgba(255, 255, 255, 0.045);
    --card-border:   rgba(63, 114, 175, 0.14);
    --input-bg:      rgba(255, 255, 255, 0.05);
    --input-border:  rgba(255, 255, 255, 0.10);
    --input-focus:   rgba(255, 255, 255, 0.40);
    --text-primary:  rgba(255, 255, 255, 0.92);
    --text-muted:    rgba(255, 255, 255, 0.38);
    --text-subtle:   rgba(255, 255, 255, 0.22);
    --error-bg:      rgba(255, 80, 80, 0.08);
    --error-border:  rgba(255, 80, 80, 0.25);
    --error-text:    #ff8f8f;
}

/* ── Body & background ─────────────────────────────────────────── */

body {
    background: #07090e;
}

.bg-canvas {
    background:
        radial-gradient(ellipse 80% 60% at 15% 45%, rgba(15, 26, 45, 0.60) 0%, transparent 65%),
        radial-gradient(ellipse 60% 80% at 85% 60%, rgba(7,  14, 28, 0.70) 0%, transparent 60%),
        linear-gradient(160deg, #07090e 0%, #0b1020 50%, #070810 100%);
}

/* ── Orbs ──────────────────────────────────────────────────────── */

.orb-1 {
    background: radial-gradient(circle, rgba(63, 114, 175, 0.55) 0%, transparent 70%);
}

.orb-2 {
    background: radial-gradient(circle, rgba(30, 70, 130, 0.28) 0%, transparent 70%);
}

.orb-3 {
    background: radial-gradient(circle, rgba(63, 114, 175, 0.30) 0%, transparent 70%);
}

/* ── Signal wave ───────────────────────────────────────────────── */

.wave-track {
    stroke: rgba(63, 114, 175, 0.12);
}

.wave-pulse {
    stroke: rgba(100, 165, 230, 0.88);
}

/* ── Card ──────────────────────────────────────────────────────── */

.login-card {
    border-color: rgba(63, 114, 175, 0.18);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.50),
        0 0 0 0.5px rgba(63, 114, 175, 0.10) inset,
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

/* ── Autofill ──────────────────────────────────────────────────── */

.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0f1e35 inset;
    -webkit-text-fill-color: var(--text-primary);
}

/* ── Submit button ─────────────────────────────────────────────── */

.btn-signin {
    background: #3f72af;
}

.btn-signin:hover {
    background: #4d82c0;
    box-shadow: 0 10px 30px rgba(63, 114, 175, 0.50);
}

.btn-signin:active {
    box-shadow: 0 4px 12px rgba(63, 114, 175, 0.35);
}

/* ── SAML / SSO button ─────────────────────────────────────────── */

.btn-saml {
    border-color: rgba(63, 114, 175, 0.30);
}

.btn-saml:hover {
    background: rgba(63, 114, 175, 0.10);
    border-color: rgba(63, 114, 175, 0.70);
    box-shadow: 0 6px 20px rgba(63, 114, 175, 0.20);
}

/* ── Divider lines ─────────────────────────────────────────────── */

.or-divider::before,
.or-divider::after {
    background: rgba(63, 114, 175, 0.16);
}

/* ── Select option bg ──────────────────────────────────────────── */

.field-select select option {
    background: #0f1e35;
    color: #fff;
}