/**
 * iHandi Portal - Analytics Module Styles
 * Based on ACTUAL PHP output from class-analytics-module.php
 * Version: 1.0.0
 */

.analytics-module { padding: 0; background: #f5f5f5; }

/* Analytics Header */
.analytics-header { background: linear-gradient(135deg, #FFD700, #FFA500); padding: 2rem; border-radius: 12px; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.analytics-title h2 { color: #1a1a1a; margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }
.analytics-title h2 i { color: #1a1a1a; }
.analytics-title p { color: rgba(26, 26, 26, 0.8); margin: 0; }
.analytics-period-selector select { padding: 0.7rem 1.2rem; border: 2px solid #1a1a1a; border-radius: 6px; font-weight: 600; cursor: pointer; }

/* KPI Grid */
.analytics-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.analytics-kpi-card { background: #fff; padding: 1.5rem; border-radius: 10px; display: flex; align-items: center; gap: 1.2rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.kpi-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.kpi-icon.kpi-primary { background: rgba(33, 150, 243, 0.1); color: #2196F3; }
.kpi-icon.kpi-success { background: rgba(76, 175, 80, 0.1); color: #4CAF50; }
.kpi-icon.kpi-info { background: rgba(0, 188, 212, 0.1); color: #00BCD4; }
.kpi-icon.kpi-warning { background: rgba(255, 152, 0, 0.1); color: #FF9800; }
.kpi-content { flex: 1; }
.kpi-value { font-size: 1.8rem; font-weight: 700; color: #1a1a1a; line-height: 1; margin-bottom: 0.3rem; }
.kpi-label { font-size: 0.9rem; color: #666; font-weight: 500; margin-bottom: 0.3rem; }
.kpi-trend { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; }
.kpi-sublabel { font-size: 0.8rem; color: #999; }
.trend-positive { color: #4CAF50; font-weight: 600; }
.trend-negative { color: #F44336; font-weight: 600; }

/* Charts Row */
.analytics-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.analytics-chart-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); overflow: hidden; }
.chart-card-header { padding: 1.5rem; border-bottom: 1px solid #f0f0f0; }
.chart-card-header h3 { margin: 0; color: #1a1a1a; display: flex; align-items: center; gap: 0.6rem; }
.chart-card-header h3 i { color: #FFD700; }
.chart-card-body { padding: 2rem; min-height: 300px; }

/* Analytics Card */
.analytics-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin-bottom: 2rem; }
.analytics-card-header { padding: 1.5rem; border-bottom: 1px solid #f0f0f0; }
.analytics-card-header h3 { margin: 0; color: #1a1a1a; display: flex; align-items: center; gap: 0.6rem; }
.analytics-card-header h3 i { color: #FFD700; }
.analytics-card-body { padding: 2rem; }

/* Simple Charts */
.simple-line-chart, .status-pie-chart { width: 100%; height: 250px; }

/* Responsive */
@media (max-width: 968px) {
    .analytics-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .analytics-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .analytics-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .analytics-kpi-grid { grid-template-columns: 1fr; }
}