/* GrameenU — brand tokens. Load after theme-common.css. */

:root {
    --iums-bronze: #4CC4D1;
    --iums-gold: #F3C108;
    --iums-amber: #FFD54F;
    --iums-copper: #FFC107;
    --iums-brown-light: #5B8CBE;
    --iums-brown: #32649E;
    --iums-brown-dark: #264a7a;
    --iums-chocolate: #1a1a1a;
    --iums-tan: #C89F06;
    --iums-beige: #E8F4F6;
    --primary-color: var(--iums-brown);
    --primary-dark: var(--iums-brown-dark);
    --primary-light: #E8F4F6;
    --secondary-color: var(--iums-brown);
    --secondary-light: #B8D4E8;
    --accent-color: var(--iums-bronze);
    --text-primary: var(--iums-chocolate);
    --text-secondary: #333333;
    --background: #F5F5F5;
    --surface: #FFFFFF;
    --border: #BEBEBE;
    --nav-background: linear-gradient(180deg, var(--iums-brown) 0%, var(--iums-brown-dark) 100%);
    --nav-text: #FFFFFF;
    --nav-text-secondary: rgba(255, 255, 255, 0.9);
    --h1-color: #32649E;
    --h2-color: var(--iums-brown);
    --h3-color: #3d7a9e;
    --h4-color: #4CC4D1;
    --h5-color: #32649E;
    --h6-color: var(--iums-brown);
    --sub-heading-color: var(--h6-color);
    --nav-hover: rgba(50, 100, 158, 0.15);
    --nav-active: #4CC4D1;
    --success: #3DB873;
    --success-rgb: 61, 184, 115;
    --warning: #F3C108;
    --error: #F47955;
    --info: #4CC4D1;
    --mud-palette-primary-rgb: 50, 100, 158;

    --nav-link-inactive-text: #000000;
    --nav-link-inactive-icon: #000000;
    --nav-link-hover-bg: rgba(50, 100, 158, 0.1);
    --nav-link-active-bg: #32649E;
    --nav-link-active-text: #FFFFFF;
    --gradient-header-end: #2a5690;
    --dashboard-card-hover-shadow: 0 4px 20px rgba(50, 100, 158, 0.15);

    --ulab-blue: #32649E;
    --ulab-blue-dark: #264a7a;
    --ulab-blue-light: #4CC4D1;
    --ulab-blue-pale: #E8F4F6;
    --ulab-gold: #D4A20C;
    --ulab-gold-light: #F0D77A;
    --ulab-white: #FFFFFF;
    --ulab-gray-50: #F8FAFC;
    --ulab-gray-100: #F1F5F9;
    --ulab-gray-200: #E2E8F0;
    --ulab-gray-300: #CBD5E1;
    --ulab-gray-400: #94A3B8;
    --ulab-gray-500: #64748B;
    --ulab-gray-600: #475569;
    --ulab-gray-700: #334155;
    --ulab-gray-800: #1E293B;
    --ulab-gray-900: #0F172A;

    --swp-auth-orb-1-gradient: radial-gradient(circle, rgba(243, 193, 8, 0.9) 0%, rgba(243, 193, 8, 0) 70%);
    --swp-auth-orb-2-gradient: radial-gradient(circle, rgba(50, 100, 158, 1) 0%, rgba(50, 100, 158, 0) 70%);
    --swp-auth-orb-3-gradient: radial-gradient(circle, rgba(76, 196, 209, 0.85) 0%, rgba(76, 196, 209, 0) 70%);
    --swp-auth-footer-powered-accent: #4CC4D1;
    --swp-login-btn-gradient: linear-gradient(82.87deg, #264a7a 2.36%, #32649E 99.64%);
    --swp-login-link: #32649E;
}

html:root,
.mud-theme-provider {
    --mud-palette-success: var(--success) !important;
    --mud-palette-success-rgb: var(--success-rgb) !important;
    --mud-palette-success-text: #ffffff !important;
    --mud-palette-success-darken: color-mix(in srgb, var(--success) 82%, #0a0a0a) !important;
    --mud-palette-success-lighten: color-mix(in srgb, var(--success) 72%, #ffffff) !important;
    --mud-palette-success-hover: color-mix(in srgb, var(--success) 88%, #0a0a0a) !important;
}

.mud-theme-provider {
    --heading-color: var(--mud-palette-dark) !important;
}

.metric-card {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
}

.metric-primary {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.metric-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.metric-info {
    background: linear-gradient(135deg, #fff9f9 0% 0%, #fedbdb 100%);
}

.metric-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.metric-label {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
}

.metric-value {
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.2;
}

.metric-sublabel {
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.metric-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 50px;
    border-width: 2px;
    border-color: rgba(var(--mud-palette-primary-rgb), 1);
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.metric-icon-wrapper path {
    color: var(--h3-color);
}

.metric-icon-primary {
    color: var(--ulab-blue);
}

.metric-icon-success {
    color: #10B981;
}

.metric-icon-info {
    color: #3B82F6;
}

.metric-icon-warning {
    color: var(--ulab-gold);
}