/* EVTracker - Custom styles */

/* Glassmorphism app bar */
.appbar-blur {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(128, 128, 128, 0.12) !important;
}

/* Drawer background */
.drawer-bg {
    border-right: 1px solid rgba(128, 128, 128, 0.1) !important;
}

/* Stat card with subtle gradient */
.stat-card {
    border-radius: 16px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}
.stat-card .stat-icon {
    opacity: 0.12;
    position: absolute;
    right: -8px;
    bottom: -8px;
    font-size: 72px !important;
    pointer-events: none;
}

/* Live status card */
.live-card {
    border-radius: 16px !important;
    border-left: 4px solid var(--mud-palette-primary);
}

/* Section card */
.section-card {
    border-radius: 16px !important;
}

/* Chart card */
.chart-card {
    border-radius: 16px !important;
}

/* Page header */
.page-header {
    margin-bottom: 24px;
}

/* DataGrid: allow horizontal scroll instead of fixed layout on small screens */
.mud-data-grid .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive table wrapper for mobile */
@media (max-width: 599.98px) {
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce padding on mobile for stat cards */
    .stat-card {
        padding: 12px !important;
    }
    .stat-card .stat-icon {
        font-size: 48px !important;
    }

    /* Tighter spacing on mobile */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Tablet adjustments */
@media (min-width: 600px) and (max-width: 959.98px) {
    .stat-card .stat-icon {
        font-size: 56px !important;
    }
}

/* Hide columns responsively using MudBlazor-style display classes */
.d-none { display: none !important; }
@media (min-width: 600px) { .d-sm-table-cell { display: table-cell !important; } }
@media (min-width: 960px) { .d-md-table-cell { display: table-cell !important; } }
@media (min-width: 1280px) { .d-lg-table-cell { display: table-cell !important; } }

/* Bold font utility */
.fw-bold {
    font-weight: 700 !important;
}
.fw-medium {
    font-weight: 500 !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Improve MudNavLink active state */
.mud-nav-link.active {
    font-weight: 600 !important;
}