/* CreFinB user auth & dashboard theme */
:root {
    --crefinb-navy: #1b3568;
    --crefinb-navy-dark: #0f2347;
    --crefinb-navy-light: #2a4a85;
    --crefinb-red: #e02020;
    --crefinb-red-dark: #b81818;
    --crefinb-red-light: #f25555;
    --crefinb-surface: #f4f6f9;
}

body.crefinb-auth,
body.font-sans.bg-gray-50,
body.bg-gray-50 {
    background:
        radial-gradient(circle at top left, rgba(27, 53, 104, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(224, 32, 32, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, var(--crefinb-surface) 100%);
    color: var(--text-color, #1f2937);
}

.auth-surface {
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    border: 1px solid rgba(27, 53, 104, 0.08);
    box-shadow: 0 20px 60px rgba(15, 35, 71, 0.08);
}

.auth-muted-surface {
    background: linear-gradient(180deg, #f8fafc 0%, var(--crefinb-surface) 100%);
    border-bottom: 1px solid rgba(27, 53, 104, 0.08);
}

.auth-brand-panel {
    background: linear-gradient(145deg, var(--crefinb-navy-dark) 0%, var(--crefinb-navy) 55%, var(--crefinb-red-dark) 100%);
}

.dashboard-shell {
    background: transparent;
}

.dashboard-sidebar {
    background: linear-gradient(180deg, var(--crefinb-navy) 0%, var(--crefinb-navy-dark) 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 8px 0 24px rgba(15, 35, 71, 0.25);
}

.dashboard-sidebar .text-gray-900,
.dashboard-sidebar .text-gray-700,
.dashboard-sidebar .text-gray-600 {
    color: rgba(255, 255, 255, 0.92) !important;
}

.dashboard-sidebar .text-gray-500,
.dashboard-sidebar .text-gray-400 {
    color: rgba(255, 255, 255, 0.62) !important;
}

.dashboard-sidebar .bg-gray-50,
.dashboard-sidebar .user-card-surface {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dashboard-sidebar .border-gray-100,
.dashboard-sidebar .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dashboard-sidebar a:not(.btn-primary-nav):hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.dashboard-sidebar .nav-active {
    background: rgba(224, 32, 32, 0.18) !important;
    color: #ffffff !important;
    border-left: 4px solid var(--crefinb-red);
    padding-left: 0.5rem;
}

.dashboard-sidebar .nav-active svg,
.dashboard-sidebar .nav-active [data-lucide] {
    color: #ffffff !important;
}

.dashboard-header {
    background: linear-gradient(90deg, #ffffff 0%, #f7f9fc 100%);
    border-bottom: 1px solid rgba(27, 53, 104, 0.1);
}

.dashboard-footer {
    background: #ffffff;
    border-top: 1px solid rgba(27, 53, 104, 0.08);
}

.dashboard-surface {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-color: rgba(27, 53, 104, 0.08) !important;
}

.dashboard-balance-chip {
    background: rgba(224, 32, 32, 0.08);
    color: var(--crefinb-navy-dark);
}

.loading-animation .core {
    box-shadow: 0 0 15px rgba(224, 32, 32, 0.35);
}

.loader-progress {
    background-color: rgba(224, 32, 32, 0.15) !important;
}

.dashboard-card-visual {
    background: linear-gradient(135deg, var(--crefinb-navy-dark) 0%, var(--crefinb-navy) 50%, var(--crefinb-navy-light) 100%);
}

.notification-default {
    background: rgba(27, 53, 104, 0.12);
    color: var(--crefinb-navy);
}