/* Root Variables - Material Design Color Palette */
:root {
    /* Material Design Base colors - Professional but friendly */
    --mdb-primary: #2196F3; /* Material Blue 500 */
    --mdb-secondary: #757575; /* Material Grey 600 */
    --mdb-success: #4CAF50; /* Material Green 500 */
    --mdb-danger: #F44336; /* Material Red 500 */
    --mdb-warning: #FF9800; /* Material Orange 500 */
    --mdb-info: #00BCD4; /* Material Cyan 500 */
    
    /* Light theme colors - Clean and modern */
    --light-bg: #FAFAFA; /* Material Grey 50 */
    --light-surface: #FFFFFF;
    --light-text-primary: #212121; /* Material Grey 900 */
    --light-text-secondary: #757575; /* Material Grey 600 */
    --light-text-muted: #9E9E9E; /* Material Grey 500 */
    --light-link: #2196F3; /* Material Blue 500 */
    --light-link-hover: #1976D2; /* Material Blue 700 */
    --light-border: rgba(0, 0, 0, 0.12);
    --light-navbar-link: #424242; /* Material Grey 800 */
    --light-navbar-link-hover: #2196F3; /* Material Blue 500 */
    
    /* Dark theme colors - Material Dark theme */
    --dark-bg: #121212; /* Material Dark background */
    --dark-surface: #1E1E1E; /* Material Dark surface */
    --dark-text-primary: rgba(255, 255, 255, 0.87); /* Material Dark text primary */
    --dark-text-secondary: rgba(255, 255, 255, 0.6); /* Material Dark text secondary */
    --dark-text-muted: rgba(255, 255, 255, 0.38); /* Material Dark text disabled */
    --dark-link: #64B5F6; /* Material Blue 300 */
    --dark-link-hover: #90CAF9; /* Material Blue 200 */
    --dark-border: rgba(255, 255, 255, 0.12);
    --dark-navbar-link: rgba(255, 255, 255, 0.87);
    --dark-navbar-link-hover: #64B5F6; /* Material Blue 300 */
}

/* Theme System - Consolidated and Fixed */
[data-mdb-theme="light"] {
    /* MDB variables */
    --mdb-body-bg: var(--light-bg);
    --mdb-body-color: var(--light-text-primary);
    --mdb-surface-bg: var(--light-surface);
    --mdb-border-color: var(--light-border);
    --mdb-text-primary: var(--light-text-primary);
    --mdb-text-secondary: var(--light-text-secondary);
    --mdb-text-muted: var(--light-text-muted);
    --mdb-link-color: var(--light-link);
    --mdb-link-hover-color: var(--light-link-hover);
    --mdb-surface-rgb: 250, 250, 250;
    --mdb-primary-rgb: 33, 150, 243;
    
    /* Custom variables */
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    --link-color: var(--light-link);
    --link-hover-color: var(--light-link-hover);
    --navbar-link-color: var(--light-navbar-link);
    --navbar-link-hover-color: var(--light-navbar-link-hover);
    --surface-main: var(--light-surface);
    --surface-secondary: var(--light-bg);
    --border-color: var(--light-border);
}

[data-mdb-theme="dark"] {
    /* MDB variables */
    --mdb-body-bg: var(--dark-bg);
    --mdb-body-color: var(--dark-text-primary);
    --mdb-surface-bg: var(--dark-surface);
    --mdb-border-color: var(--dark-border);
    --mdb-text-primary: var(--dark-text-primary);
    --mdb-text-secondary: var(--dark-text-secondary);
    --mdb-text-muted: var(--dark-text-muted);
    --mdb-link-color: var(--dark-link);
    --mdb-link-hover-color: var(--dark-link-hover);
    --mdb-surface-rgb: 30, 30, 30;
    --mdb-primary-rgb: 33, 150, 243;
    
    /* Custom variables */
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --link-color: var(--dark-link);
    --link-hover-color: var(--dark-link-hover);
    --navbar-link-color: var(--dark-navbar-link);
    --navbar-link-hover-color: var(--dark-navbar-link-hover);
    --surface-main: var(--dark-surface);
    --surface-secondary: var(--dark-bg);
    --border-color: var(--dark-border);
}

/* Global Styles */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background-image: none !important;
}

[data-mdb-theme="light"] body {
    background: linear-gradient(135deg, #E3F2FD 0%, #FFFFFF 50%, #F5F5F5 100%) !important;
}

[data-mdb-theme="dark"] body {
    background: linear-gradient(135deg, #1E1E1E 0%, #121212 50%, #1A1A1A 100%) !important;
}

/* Glass Effect Base */
.glass-effect {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    transition: background-color 0.2s ease;
}

/* Enhanced Glass Effect */
.glass-effect-strong {
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

[data-mdb-theme="dark"] .glass-effect-strong {
    background: rgba(26, 31, 37, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Navbar & Dropdown Base Styles */
.navbar {
    border-radius: 0 0 0.75rem 0.75rem; /* Only round bottom corners */
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.6) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: none; /* No top border for seamless top edge */
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.15); /* Stronger shadow for overlooking effect */
}

[data-mdb-theme="dark"] .navbar {
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background: linear-gradient(
        135deg,
        rgba(26, 31, 37, 0.8) 0%,
        rgba(26, 31, 37, 0.6) 50%,
        rgba(26, 31, 37, 0.8) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none; /* No top border for seamless top edge */
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.03),
        0 4px 16px rgba(0, 0, 0, 0.5); /* Stronger shadow for overlooking effect */
}

/* Dropdown menus - Keep rounded corners for floating effect */
/* Note: Don't override transform/opacity/position - let MDB5 handle animations */
.dropdown-menu {
    border-radius: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.6) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Enhanced floating effect - but don't override transform/opacity */
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1) !important;
    /* MDB5 manages: transform, opacity, position for animations */
}

[data-mdb-theme="dark"] .dropdown-menu {
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    background: linear-gradient(
        135deg,
        rgba(26, 31, 37, 0.8) 0%,
        rgba(26, 31, 37, 0.6) 50%,
        rgba(26, 31, 37, 0.8) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Enhanced floating effect - but don't override transform/opacity */
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.2) !important;
    /* MDB5 manages: transform, opacity, position for animations */
}

/* Prevent double/overlapping Font Awesome icons: no extra ::before on containers */
.navbar .nav-link::before,
.navbar .navbar-toggler::before,
.navbar .dropdown-toggle::before,
.channel-header-modern a::before,
.channel-header-modern button::before,
.network-header-modern a::before,
.network-header-modern button::before,
.network-navigation-glassy .nav-link::before,
.network-navigation-glassy .navbar-toggler::before,
.navbar .btn::before,
.navbar .dropdown-item::before {
    content: none !important;
    display: none !important;
}
/* Sharp-duotone only: hide second layer so one icon shows (fixes double icon site-wide) */
i.fa-sharp-duotone::after {
    content: none !important;
    display: none !important;
}

/* Navbar links */
.navbar .nav-link {
    color: var(--navbar-link-color) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--navbar-link-hover-color) !important;
}

/* Dropdown Item Hover Effects */
[data-mdb-theme="light"] .dropdown-item:hover {
    background: rgba(33, 150, 243, 0.1) !important;
    color: var(--mdb-primary) !important;
}

[data-mdb-theme="dark"] .dropdown-item:hover {
    background: rgba(33, 150, 243, 0.2) !important;
    color: #ffffff !important;
}

/* Cards */
.card {
    --mdb-card-bg: var(--surface-main);
    --mdb-card-color: var(--text-primary);
    background-color: var(--mdb-card-bg) !important;  /* Force background color */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    --mdb-card-border-width: 0;
    --mdb-card-border-radius: 1rem;
    --mdb-card-spacer-y: 0.75rem;
    --mdb-card-spacer-x: 1rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-primary) !important;
}

.card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.15);
}

[data-mdb-theme="dark"] .card:hover {
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
}

.card-header {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--mdb-border-color);
    padding: 0.5rem var(--mdb-card-spacer-x);
    display: flex;
    text-align: left;
    gap: 0.5rem;
    align-items: center;
}

.card-header .fa-fw,
.card-header i {
    color: var(--mdb-primary);
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.card-header .fw-bold,
.card-header h5,
.card-header h4,
.card-header h3 {
    margin: 0;
    color: var(--text-primary) !important;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.card-body {
    padding: var(--mdb-card-spacer-y) var(--mdb-card-spacer-x);
}

.card-footer {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    transition: background-color 0.2s ease;
    background: transparent !important;
    border-top: 1px solid var(--mdb-border-color);
    padding: 0.5rem var(--mdb-card-spacer-x);
    font-size: 0.875rem;
    color: var(--text-muted) !important;
}

/* Theme-specific card colors */
[data-mdb-theme="light"] .card {
    --surface-main: rgba(255, 255, 255, 0.7);
    --text-primary: #2c3e50;
    --mdb-border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.7) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.3),
        0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

[data-mdb-theme="dark"] .card {
    --surface-main: rgba(26, 31, 37, 0.6);
    --text-primary: var(--mdb-text-primary);
    --mdb-border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(
        135deg,
        rgba(26, 31, 37, 0.7) 0%,
        rgba(26, 31, 37, 0.5) 50%,
        rgba(26, 31, 37, 0.7) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.05),
        0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: var(--mdb-text-primary);  /* Ensure text color is set */
}

/* List group inside cards */
.card .list-group {
    border-radius: 0;
}

.card .list-group-item {
    padding: 0.75rem var(--mdb-card-spacer-x);
    border: none;
    background: transparent;
    transition: all 0.2s ease;
    color: var(--text-primary) !important;
}

.card .list-group-item:not(:last-child) {
    border-bottom: 1px solid var(--mdb-border-color);
}

.card .list-group-item:hover {
    background: rgba(var(--mdb-primary-rgb), 0.05);
}

.card .list-group-item i,
.card .list-group-item .fa-fw {
    color: var(--mdb-primary);
    width: 1.25rem;
    text-align: center;
    margin-right: 0.75rem;
}

/* Badge styles in cards */
.card .badge {
    padding: 0.35em 0.65em;
    font-weight: 500;
}

.card .badge.rounded-pill {
    padding-right: 0.8em;
    padding-left: 0.8em;
}

/* Card hover effects */
.card.hover-shadow {
    transition: box-shadow .25s ease-in-out, transform .25s ease-in-out;
}

.card.hover-shadow:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
    transform: translateY(-2px);
}

/* Theme-specific styles */
[data-mdb-theme="light"] .gradient-custom {
    background: linear-gradient(45deg, #e8eaf6 0%, #c5cae9 100%);
}

[data-mdb-theme="dark"] .gradient-custom {
    background: linear-gradient(45deg, #1a237e 0%, #311b92 100%);
}

/* Badge consistency for light theme */
[data-mdb-theme="light"] .badge.badge-primary,
[data-mdb-theme="light"] .badge.bg-primary {
    background: var(--light-link) !important;
    color: #fff !important;
}

[data-mdb-theme="light"] .badge.badge-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

[data-mdb-theme="dark"] .badge {
    &.bg-light {
        color: var(--text-primary-dark) !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    &.badge-secondary {
        color: #fff !important;
    }
}

/* Card text visibility in dark mode */
[data-mdb-theme="dark"] .card {
    color: var(--card-color);
}

[data-mdb-theme="dark"] .card-title,
[data-mdb-theme="dark"] .card-header .fw-bold {
    color: var(--text-primary);
}

[data-mdb-theme="dark"] .card-text {
    color: var(--card-color);
}

[data-mdb-theme="dark"] .card-header,
[data-mdb-theme="dark"] .card-footer {
    background: var(--card-cap-bg);
}

/* Footer Theme Styles */
[data-theme-footer] {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

[data-mdb-theme="dark"] [data-theme-footer] {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

[data-mdb-theme="light"] [data-theme-footer] {
    background-color: var(--light-card-bg);
    color: var(--light-text);
}

.footer-copyright {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-mdb-theme="dark"] .footer-copyright {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Chart theme styles */
[data-mdb-theme="light"] .chart-card {
    background-color: var(--surface-main);
    border: 1px solid var(--light-border);
}

[data-mdb-theme="dark"] .chart-card {
    background-color: var(--surface-main);
    border: 1px solid var(--dark-border);
}

/* Network card theme styles */
[data-mdb-theme="light"] .network-header {
    background-color: var(--surface-main);
    border: 1px solid var(--light-border);
}

[data-mdb-theme="dark"] .network-header {
    background-color: var(--surface-main);
    border: 1px solid var(--dark-border);
}

[data-mdb-theme="light"] .stat-card {
    background-color: var(--surface-secondary);
    border: 1px solid var(--light-border);
}

[data-mdb-theme="dark"] .stat-card {
    background-color: var(--surface-secondary);
    border: 1px solid var(--dark-border);
}

/* List group theme styles */
[data-mdb-theme="light"] .list-group-light .list-group-item {
    background-color: var(--surface-main);
    color: var(--text-primary);
    border-color: var(--light-border);
}

[data-mdb-theme="dark"] .list-group-light .list-group-item {
    background-color: var(--surface-main);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* List group item content */
.list-group-light .list-group-item .text-body {
    color: inherit !important;
}

/* Card list group overrides */
.card .list-group-light {
    border-radius: 0;
}

.card .list-group-light .list-group-item {
    padding: 0.75rem var(--mdb-card-spacer-x);
    border-width: 0;
    background: transparent;
    color: inherit;
}

/* Breadcrumb Theme Styles */
.breadcrumb {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 1rem;
    border: 1px solid var(--mdb-border-color);
    box-shadow: 0 4px 20px rgba(31, 38, 135, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(31, 38, 135, 0.12);
}

.breadcrumb-item a {
    color: var(--mdb-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.breadcrumb-item a:hover {
    color: var(--link-hover-color);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

/* Theme-specific breadcrumb divider color */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--text-muted);
}

/* Dark theme specific styles */
[data-mdb-theme="dark"] .breadcrumb {
    background: linear-gradient(
        135deg,
        rgba(26, 31, 37, 0.7) 0%,
        rgba(26, 31, 37, 0.5) 50%,
        rgba(26, 31, 37, 0.7) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.3);
    color: var(--dark-text-primary);
}

[data-mdb-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
}

/* Light theme specific styles */
[data-mdb-theme="light"] .breadcrumb {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.7) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        0 4px 20px rgba(31, 38, 135, 0.08);
}

[data-mdb-theme="light"] .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(0, 0, 0, 0.3);
}

/* Card header specific overrides */
[data-mdb-theme="light"] .card .card-header.bg-primary {
    background: var(--mdb-primary) !important;  /* Force primary color instead of transparent */
    color: #ffffff;
}

[data-mdb-theme="light"] .card .card-header.bg-primary * {
    color: #ffffff !important;  /* Ensure all text in primary headers is white */
}

/* Card header and footer theming */
[data-mdb-theme="light"] .card .card-header {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    transition: background-color 0.2s ease;
    background: linear-gradient(45deg, #e8eaf6 0%, #c5cae9 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-mdb-theme="light"] .card .card-footer {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

[data-mdb-theme="light"] .card .badge.bg-light {
    background-color: #ffffff !important;
    box-shadow: var(--mdb-box-shadow-1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Network card rank badges */
.network-card .badge {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 2.5rem;
    padding: 0.35em 0.65em;
}

/* Rank-based card styling */
[data-mdb-theme="light"] .network-card:nth-child(-n+3) {
    --surface-main: linear-gradient(to bottom right, #ffffff, #f8f9fa);
    box-shadow: var(--mdb-box-shadow-3);
}

[data-mdb-theme="dark"] .network-card:nth-child(-n+3) {
    --surface-main: linear-gradient(to bottom right, #1a1f2d, #242936);
    box-shadow: var(--mdb-box-shadow-3);
}

.network-card:nth-child(-n+3) .card-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.network-card:nth-child(-n+3) h6 {
    font-size: 1.1rem;
}

/* Make cards after rank 24 slightly more compact */
.network-card:nth-child(n+25) {
    font-size: 0.95rem;
}

.network-card:nth-child(n+25) .card-header {
    padding: 0.75rem;
}

.network-card:nth-child(n+25) h6 {
    font-size: 0.9rem;
}

/* Network card specific styling */
.network-card {
    border: 1px solid var(--mdb-border-color);
}

/* Network card enhancements */
.network-card {
    border: 1px solid var(--mdb-border-color);
    box-shadow: var(--mdb-box-shadow-2);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, box-shadow;
}

.network-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--mdb-box-shadow-3);
}

/* Enhanced hover effects */
.network-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Light theme specific enhancements */
[data-mdb-theme="light"] .network-card {
    --mdb-border-color: rgba(0, 0, 0, 0.15);
    background: linear-gradient(to bottom, #ffffff, #fafafa);
}

[data-mdb-theme="light"] .network-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Dark theme specific enhancements */
[data-mdb-theme="dark"] .network-card {
    --mdb-border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(to bottom, var(--surface-main), var(--surface-secondary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-mdb-theme="dark"] .network-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Top ranked networks get extra emphasis */
.network-card:nth-child(-n+3) {
    box-shadow: 0 4px 12px rgba(var(--mdb-primary-rgb), 0.1);
}

[data-mdb-theme="light"] .network-card:nth-child(-n+3):hover {
    box-shadow: 0 16px 32px rgba(var(--mdb-primary-rgb), 0.15);
}

[data-mdb-theme="dark"] .network-card:nth-child(-n+3):hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

/* Enhanced styling for top ranked networks */
[data-mdb-theme="light"] .network-card:nth-child(-n+3) {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
    box-shadow: var(--mdb-box-shadow-3);
}

[data-mdb-theme="dark"] .network-card:nth-child(-n+3) {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(to bottom right, var(--surface-main), var(--surface-secondary));
    box-shadow: var(--mdb-box-shadow-3);
}

/* Network card styling */
.network-card {
    --header-bg: linear-gradient(135deg, var(--surface-secondary), var(--surface-main));
    --footer-bg: var(--surface-secondary);
}

/* Light theme network card */
[data-mdb-theme="light"] .network-card {
    --header-bg: linear-gradient(135deg, #e3e6ed, #f8f9fa);
    --footer-bg: #f8f9fa;
}

[data-mdb-theme="light"] .network-card .card-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-mdb-theme="light"] .network-card .card-footer {
    background: var(--footer-bg) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dark theme network card */
[data-mdb-theme="dark"] .network-card {
    --header-bg: linear-gradient(135deg, #242936, #1a1f2d);
    --footer-bg: #1a1f2d;
}

[data-mdb-theme="dark"] .network-card .card-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-mdb-theme="dark"] .network-card .card-footer {
    background: var(--footer-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Region badge styling */
.region-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-main);
    box-shadow: var(--mdb-box-shadow-1);
    transition: all 0.2s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.region-badge:hover {
    transform: scale(1.1);
    box-shadow: var(--mdb-box-shadow-2);
}

.region-badge .country-flag {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    object-fit: cover;
}

[data-mdb-theme="light"] .region-badge {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-mdb-theme="dark"] .region-badge {
    background: var(--surface-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Networks grid layout */
.networks-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem 0;
    grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
}

/* First row - top 3 networks */
.network-card-large {
    grid-column: span 1; /* Each takes 1/3 of first row */
}

/* Second row - networks 4-6 */
.network-card-medium {
    grid-column: span 1; /* Each takes 1/3 of second row */
}

/* Remaining networks - 3 per row */
.network-card-regular,
.network-card-small {
    grid-column: span 1;
}

/* Force row organization */
.networks-grid > *:nth-child(-n+3) {
    order: 1; /* First row */
}

.networks-grid > *:nth-child(n+4):nth-child(-n+6) {
    order: 2; /* Second row */
}

.networks-grid > *:nth-child(n+7) {
    order: 3; /* Remaining rows */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .networks-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (max-width: 768px) {
    .networks-grid {
        grid-template-columns: 1fr; /* 1 column */
    }
}

/* Card scaling */
.network-card-large {
    --card-scale: 1.05;
}

.network-card-medium {
    --card-scale: 1.02;
}

.network-card-regular,
.network-card-small {
    --card-scale: 1;
}

.network-card {
    transform: scale(var(--card-scale));
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.network-card:hover {
    transform: scale(calc(var(--card-scale) * 1.02));
}

/* Custom styling for each tier */
.network-card-large {
    --card-scale: 1.1;
}

.network-card-medium {
    --card-scale: 1.05;
}

.network-card-regular,
.network-card-small {
    --card-scale: 1;
}

.network-card {
    transform: scale(var(--card-scale));
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.network-card:hover {
    transform: scale(calc(var(--card-scale) * 1.02));
}

/* Rank-based card sizing */
.network-card-large {
    grid-column: span 2;
    grid-row: span 2;
}

.network-card-medium {
    grid-column: span 2;
    grid-row: span 1;
}

.network-card-regular {
    grid-column: span 1;
    grid-row: span 1;
}

.network-card-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .network-card-large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 992px) {
    .network-card-large,
    .network-card-medium {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Card Structure */
.card {
    border: 1px solid var(--mdb-border-color);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Light theme specific card styles */
[data-mdb-theme="light"] .card {
    --mdb-border-color: rgba(0, 0, 0, 0.125);
    border: 1px solid var(--mdb-border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

[data-mdb-theme="light"] .card:hover {
    --mdb-border-color: rgba(0, 0, 0, 0.175);
    border-color: var(--mdb-border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Modal Theme Styles */
.modal-backdrop {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1040; /* MDB5 standard: backdrop below modal (1055) */
}

[data-mdb-theme="light"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

[data-mdb-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.modal {
    z-index: 1055; /* MDB5 standard: modal above backdrop (1040) */
}

/* Consistent modal header and title (all modals site-wide) */
.modal-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mdb-border-color, #dee2e6);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-content {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 1rem;
    border: none;
}

[data-mdb-theme="light"] .modal-content {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.85) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset 0 0 40px rgba(255, 255, 255, 0.3),
        0 20px 60px rgba(31, 38, 135, 0.2);
}

[data-mdb-theme="dark"] .modal-content {
    background: linear-gradient(
        135deg,
        rgba(26, 31, 37, 0.9) 0%,
        rgba(26, 31, 37, 0.8) 50%,
        rgba(26, 31, 37, 0.9) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
        inset 0 0 40px rgba(255, 255, 255, 0.05),
        0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Modal text colors */
[data-mdb-theme="light"] .modal-header,
[data-mdb-theme="light"] .modal-body,
[data-mdb-theme="light"] .modal-footer {
    color: var(--mdb-text-primary);
}

[data-mdb-theme="light"] .modal-header .btn-close {
    color: var(--mdb-text-primary);
}

[data-mdb-theme="dark"] .modal-header,
[data-mdb-theme="dark"] .modal-body,
[data-mdb-theme="dark"] .modal-footer {
    color: var(--mdb-text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-mdb-theme="dark"] .modal-header .btn-close {
    color: var(--mdb-text-primary);
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Modal form controls */
[data-mdb-theme="dark"] .modal-body .form-label {
    color: var(--mdb-text-primary);
}

[data-mdb-theme="dark"] .modal-body .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--mdb-text-primary);
}

[data-mdb-theme="dark"] .modal-body .form-text {
    color: var(--mdb-text-secondary);
}

/* Dropdown Theme Styles - Additional styling (base styles are above) */
/* Note: MDB5 handles transform/opacity for animations - don't override */

[data-mdb-theme="light"] .dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Enhanced floating shadow */
}

[data-mdb-theme="dark"] .dropdown-menu {
    background: rgba(18, 18, 18, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Enhanced floating shadow */
}

/* Dropdown items - simple hover transition, no cascading animation delays */
.dropdown-item {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Removed cascading animation delays - let MDB5 handle dropdown animations */

/* Dropdown Divider */
.dropdown-divider {
    height: 1px;
    margin: 0.25rem 0.75rem;
    border: 0;
    opacity: 0.15;
}

[data-mdb-theme="light"] .dropdown-divider {
    background: rgba(0, 0, 0, 0.1);
}

[data-mdb-theme="dark"] .dropdown-divider {
    background: rgba(255, 255, 255, 0.1);
}

[data-mdb-theme="light"] .dropdown-item:hover {
    background: rgba(33, 150, 243, 0.1) !important;
    color: var(--mdb-primary) !important;
}

[data-mdb-theme="dark"] .dropdown-menu {
    background: rgba(18, 18, 18, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
}

[data-mdb-theme="dark"] .dropdown-item:hover {
    background: rgba(33, 150, 243, 0.2) !important;
    color: #ffffff !important;
}

/* Dropdown item colors */
[data-mdb-theme="light"] .dropdown-item {
    color: var(--light-text-primary) !important;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
}

[data-mdb-theme="dark"] .dropdown-item {
    color: var(--dark-text-primary) !important;
    transition: all 0.2s ease;
    padding: 0.5rem 1rem;
}

/* Dropdown item focus states for accessibility */
[data-mdb-theme="light"] .dropdown-item:focus {
    background: rgba(33, 150, 243, 0.15) !important;
    color: var(--mdb-primary) !important;
    outline: 2px solid rgba(33, 150, 243, 0.3);
    outline-offset: -2px;
}

[data-mdb-theme="dark"] .dropdown-item:focus {
    background: rgba(33, 150, 243, 0.25) !important;
    color: #ffffff !important;
    outline: 2px solid rgba(33, 150, 243, 0.5);
    outline-offset: -2px;
}

/* Dropdown section headers - Enhanced aesthetics */
.dropdown-header h6 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-mdb-theme="light"] .dropdown-header h6 {
    color: rgba(33, 150, 243, 0.9) !important;
}

[data-mdb-theme="dark"] .dropdown-header h6 {
    color: rgba(144, 202, 249, 0.95) !important;
}

.dropdown-header h6 i {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* User Dropdown Header Styling – flush, minimal padding */
.dropdown-menu .dropdown-header {
    padding: 0.5rem 0.75rem;
    padding-bottom: 0.25rem;
    margin: 0;
    border: none;
}

.dropdown-menu .dropdown-header:first-child {
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--mdb-border-color);
    margin: 0;
}

/* Section headers (not first block): minimal top padding for flush layout */
.dropdown-menu .dropdown-header:not(:first-child) {
    padding-top: 0.35rem;
}

[data-mdb-theme="light"] .dropdown-menu .dropdown-header:first-child {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border-bottom-color: rgba(33, 150, 243, 0.2);
}

[data-mdb-theme="dark"] .dropdown-menu .dropdown-header:first-child {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.08) 100%);
    border-bottom-color: rgba(33, 150, 243, 0.3);
}

.dropdown-header h6 {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    font-size: 0.9rem;
}

.dropdown-header small {
    color: var(--text-muted);
    font-size: 0.7rem;
    display: block;
}

.dropdown-header .user-avatar-lg {
    border: 2px solid var(--mdb-primary);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
    width: 48px;
    height: 48px;
}

.dropdown-header .user-info {
    flex: 1;
    min-width: 0;
}

/* User dropdown minimum width and flush content */
#userDropdown + .dropdown-menu {
    min-width: 280px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Navbar dropdowns: glass look (blur content behind), tighter gaps, profile card as rounded header */
.navbar-dropdown-glass {
    /* Frosted glass: force blur so content behind is visibly blurred */
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    padding-top: 0 !important;
    padding-bottom: 0.25rem !important;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

[data-mdb-theme="light"] .navbar-dropdown-glass {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.68) 50%,
        rgba(255, 255, 255, 0.82) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

[data-mdb-theme="dark"] .navbar-dropdown-glass {
    background: linear-gradient(
        135deg,
        rgba(26, 31, 37, 0.9) 0%,
        rgba(26, 31, 37, 0.78) 50%,
        rgba(26, 31, 37, 0.9) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* First header in each navbar dropdown: rounded top as menu header */
#userDropdown + .navbar-dropdown-glass .dropdown-header:first-child,
#notificationsDropdown + .navbar-dropdown-glass .dropdown-header:first-child {
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 0.65rem 0.75rem 0.5rem !important;
    border-bottom: 1px solid var(--mdb-border-color);
}

/* Tighter gaps: dividers and section headers */
.navbar-dropdown-glass .dropdown-divider {
    margin: 0.15rem 0.75rem;
}

.navbar-dropdown-glass .dropdown-menu .dropdown-header:not(:first-child) {
    padding-top: 0.2rem !important;
    padding-bottom: 0.15rem !important;
}

.navbar-dropdown-glass .dropdown-header + li .dropdown-item,
.navbar-dropdown-glass .dropdown-header:not(:first-child) + li .dropdown-item {
    padding-top: 0.35rem;
}

[data-mdb-theme="dark"] .user-header {
    border-bottom: 1px solid var(--dark-border);
}

/* Modal text contrast */
.modal-content {
    color: var(--text-primary);
}

.modal-header,
.modal-body,
.modal-footer {
    color: var(--text-primary) !important;
}

/* Breadcrumb contrast */
.breadcrumb-item {
    color: var(--text-secondary);
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

.breadcrumb-item a {
    color: var(--mdb-primary);
}

.breadcrumb-item a:hover {
    color: var(--link-hover-color);
}

/* Dark theme breadcrumb */
[data-mdb-theme="dark"] .breadcrumb-item {
    color: var(--dark-text-secondary);
}

[data-mdb-theme="dark"] .breadcrumb-item.active {
    color: var(--dark-text-muted);
}

[data-mdb-theme="dark"] .breadcrumb-item a {
    color: var(--dark-link);
}

[data-mdb-theme="dark"] .breadcrumb-item a:hover {
    color: var(--dark-link-hover);
}

/* Card text colors */
.card {
    color: var(--text-primary) !important;
}

.card-header .fw-bold {
    color: var(--text-primary) !important;
}

.card-text {
    color: var(--text-secondary) !important;
}

/* Ensure dark theme text visibility */
[data-mdb-theme="dark"] .card {
    color: var(--dark-text-primary) !important;
}

[data-mdb-theme="dark"] .card-header .fw-bold {
    color: var(--dark-text-primary) !important;
}

[data-mdb-theme="dark"] .card-text {
    color: var(--dark-text-secondary) !important;
}

[data-mdb-theme="dark"] .card-footer {
    color: var(--dark-text-muted) !important;
}

/* Page headers */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary) !important;
}

/* Links */
a:not(.btn):not(.nav-link) {
    color: var(--link-color);
}

a:not(.btn):not(.nav-link):hover {
    color: var(--link-hover-color);
}

/* List items */
.list-group-item {
    color: var(--text-primary) !important;
}

[data-mdb-theme="dark"] .list-group-item {
    color: var(--dark-text-primary) !important;
}

/* Override any Material Design Bootstrap text utilities */
.text-body {
    color: var(--text-primary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* Dark theme text utilities */
[data-mdb-theme="dark"] .text-body {
    color: var(--dark-text-primary) !important;
}

[data-mdb-theme="dark"] .text-muted {
    color: var(--dark-text-muted) !important;
}

[data-mdb-theme="dark"] .text-secondary {
    color: var(--dark-text-secondary) !important;
}

/* Ensure all headings are visible in dark theme */
[data-mdb-theme="dark"] h1, 
[data-mdb-theme="dark"] h2, 
[data-mdb-theme="dark"] h3, 
[data-mdb-theme="dark"] h4, 
[data-mdb-theme="dark"] h5, 
[data-mdb-theme="dark"] h6,
[data-mdb-theme="dark"] .h1, 
[data-mdb-theme="dark"] .h2, 
[data-mdb-theme="dark"] .h3, 
[data-mdb-theme="dark"] .h4, 
[data-mdb-theme="dark"] .h5, 
[data-mdb-theme="dark"] .h6 {
    color: var(--dark-text-primary) !important;
}