/* ============================================================
   Kiloa login overlay
   ------------------------------------------------------------
   Recolor-only skin for the portal login pages (admin, merchant,
   affiliate, manager). Loaded AFTER each page's inline <style> so it
   wins on source order, and only when dashboard_template === 'kiloa'.
   It never changes the markup or layout — just the palette, so every
   login screen matches the Kiloa dashboard identity.
   ============================================================ */
:root {
    --k-ink: #0A0E17;
    --k-ink-2: #0F1626;
    --k-surface: #121A2A;
    --k-surface-2: #16203400;
    --k-line: rgba(255, 255, 255, .08);
    --k-line-strong: rgba(255, 255, 255, .14);
    --k-text: #E8EEF9;
    --k-muted: #AEBAD0;
    --k-muted-2: #7C89A2;
    --k-cyan: #22D3EE;
    --k-azure: #3B82F6;
    --k-gold: #E8C37E;
}

body {
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(59, 130, 246, .18), transparent 60%),
        radial-gradient(900px 560px at 108% 8%, rgba(34, 211, 238, .14), transparent 58%),
        var(--k-ink) !important;
    color: var(--k-text) !important;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* card shell -------------------------------------------------- */
.login-card,
.card.login-card {
    background: linear-gradient(180deg, rgba(18, 26, 42, .92), rgba(12, 18, 30, .92)) !important;
    border: 1px solid var(--k-line-strong) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    backdrop-filter: blur(6px);
    overflow: hidden;
}

.login-card .card-header {
    background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(59, 130, 246, .16)) !important;
    color: var(--k-text) !important;
    border-bottom: 1px solid var(--k-line) !important;
    border-radius: 0 !important;
}
.login-card .card-header h3,
.login-card .card-header h4 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--k-text) !important;
}
.login-card .card-header i { color: var(--k-cyan) !important; }
.login-card .card-header p,
.login-card .card-header .small { color: var(--k-muted) !important; }

.login-card .card-body { background: transparent !important; }

/* form controls ---------------------------------------------- */
.login-card .form-label { color: var(--k-muted) !important; font-weight: 600; }
.login-card .form-label i { color: var(--k-cyan) !important; }
.login-card .form-control {
    background: var(--k-ink-2) !important;
    border: 1px solid var(--k-line-strong) !important;
    color: var(--k-text) !important;
    border-radius: 10px !important;
}
.login-card .form-control::placeholder { color: var(--k-muted-2) !important; }
.login-card .form-control:focus {
    background: var(--k-ink-2) !important;
    border-color: var(--k-cyan) !important;
    box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .18) !important;
    color: var(--k-text) !important;
}

/* buttons ----------------------------------------------------- */
.login-card .btn-primary {
    background: linear-gradient(135deg, var(--k-cyan), var(--k-azure)) !important;
    border: none !important;
    color: #04121f !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}
.login-card .btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(34, 211, 238, .28) !important;
}
.login-card .btn-outline-info,
.login-card .btn-outline-primary,
.login-card .btn-outline-secondary {
    color: var(--k-cyan) !important;
    border-color: var(--k-line-strong) !important;
}
.login-card .btn-outline-info:hover,
.login-card .btn-outline-primary:hover,
.login-card .btn-outline-secondary:hover {
    background: rgba(34, 211, 238, .12) !important;
    color: var(--k-text) !important;
    border-color: var(--k-cyan) !important;
}

/* misc -------------------------------------------------------- */
.login-card a { color: var(--k-cyan) !important; }
.login-card a:hover { color: var(--k-gold) !important; }
.login-card hr { border-color: var(--k-line) !important; opacity: 1; }
.login-card .text-muted,
.login-card small.text-muted { color: var(--k-muted-2) !important; }

.login-card .alert-danger {
    background: rgba(239, 68, 68, .12) !important;
    border: 1px solid rgba(239, 68, 68, .35) !important;
    color: #fecaca !important;
}
.login-card .alert-success {
    background: rgba(34, 211, 238, .10) !important;
    border: 1px solid rgba(34, 211, 238, .32) !important;
    color: #bff3fb !important;
}