/* ----------------------------------------------------------
   Modern Minimal Dashboard (AdminLTE-inspired)
   ---------------------------------------------------------- */

/* Global */
.dashboard-container {
    padding: 18px 12px;
    max-width: 1300px;
    margin: 0 auto;
    font-family: "Inter", "Roboto", sans-serif;
}

.filter-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(20, 24, 40, 0.05);
    margin-bottom: 18px;
}

/* ----------------------------------------------------------
   KPI SMALL-BOX MODERN (Improved AdminLTE v3 style)
   ---------------------------------------------------------- */

.kpi-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}

.kpi-box {
    flex: 1 1 240px;
    position: relative;
    border-radius: 8px;
    padding: 18px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover */
.kpi-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Colors matching AdminLTE */
.kpi-primary { background: linear-gradient(135deg, #007bff, #0069d9); }
.kpi-success { background: linear-gradient(135deg, #28a745, #208a38); }
.kpi-warning { background: linear-gradient(135deg, #ffc107, #d69e00); }
.kpi-danger { background: linear-gradient(135deg, #dc3545, #b92c38); }

/* Title */
.kpi-title {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.95;
}

/* Value */
.kpi-value {
    font-size: 32px;
    font-weight: 700;
    margin-top: 4px;
}

/* Icon */
.kpi-icon {
    position: absolute;
    right: 12px;
    bottom: 12px;
    opacity: 0.25;
    font-size: 55px;
}

/* Charts */
.chart-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(20,24,40,0.05);
    margin-bottom: 16px;
}

.table-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(20,24,40,0.05);
}

/* Titles */
.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 800px) {
    .kpi-box {
        flex: 1 1 48%;
    }
}