/* compat.css - Older Browser CSS Support Fallbacks */

/* Fallback: if browser doesn't support CSS Grid */
@supports not (display: grid) {
    .app-container {
        display: flex;
    }
    
    .app-sidebar {
        width: 260px;
        flex-shrink: 0;
    }

    .main-wrapper {
        flex-grow: 1;
    }

    .kpi-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .kpi-grid > * {
        flex: 1 1 240px;
    }

    .dashboard-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-grid > :first-child {
        flex: 2 1 600px;
    }
    .dashboard-grid > :last-child {
        flex: 1 1 300px;
    }
}

/* Fallback: if browser doesn't support CSS Variables (custom properties) */
@supports not (--test: 0) {
    body {
        background-color: #121212;
        color: #eeeeee;
    }
    
    .app-sidebar {
        background-color: #1e1e1e;
        border-right: 1px solid #333333;
    }

    .card {
        background-color: #1e1e1e;
        border: 1px solid #333333;
    }

    .btn-primary {
        background-color: #d4a017;
        color: #121212;
    }
}

/* Fallback: if browser doesn't support backdrop-filter: blur */
@supports not (backdrop-filter: blur(1px)) {
    .card-glass {
        background-color: rgba(30, 30, 30, 0.95) !important;
    }
}