/* style.css - VERSI CLEAR VIEW */
:root {
    --bg-main: #f8f9fa;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --primary: #4338ca;
    --success: #059669;
    --danger: #dc2626;
    --warning: #f59e0b;
    --info: #0284c7;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-main); color: var(--text-dark); display: flex; }
/* --- Layout Utama --- */
.sidebar { width: 300px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color); padding: 24px; height: 100vh; position: fixed; display: flex; flex-direction: column; }
.main-content { margin-left: 300px; width: calc(100% - 300px); padding: 40px; }
/* --- Sidebar --- */
.sidebar-header { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.sidebar-header i { font-size: 2rem; color: var(--primary); }
.sidebar-header h2 { font-size: 1.5rem; color: var(--text-dark); }
.profile { text-align: center; width: 100%; margin-bottom: 24px; }
.profile .avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; box-shadow: var(--shadow-md); object-fit: cover; margin-bottom: 16px; }
.profile .channel-name { font-size: 1.25rem; font-weight: 600; }
.profile .subscriber-count { font-size: 1rem; color: var(--text-muted); margin-top: 8px; }
.last-updated { margin-top: auto; color: var(--text-muted); font-size: 0.875rem; display: flex; align-items: center; gap: 8px; background-color: var(--bg-main); padding: 8px 12px; border-radius: 8px; }
/* --- Konten Utama --- */
.main-header { margin-bottom: 32px; }
.main-header h1 { font-size: 2.25rem; font-weight: 700; }
.main-header p { color: var(--text-muted); font-size: 1.1rem; margin-top: 4px; }
/* --- Grid & Cards --- */
section { margin-bottom: 32px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bottom-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.kpi-card, .chart-container, .table-container, .geo-chart-container { background: var(--bg-card); padding: 24px; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.chart-header { font-size: 1.125rem; font-weight: 600; margin-bottom: 24px; }
.chart-wrapper { position: relative; height: 300px; }
.kpi-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kpi-card .label { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 8px; display: block; }
.kpi-card .value { font-size: 2rem; font-weight: 700; }
/* --- Tabel --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
thead th { color: var(--text-muted); font-size: 0.875rem; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tbody tr { transition: background-color 0.2s ease; }
tbody tr:hover { background-color: #f8f9fa; }
/* --- Skeleton Loading --- */
.skeleton { opacity: .7; animation: skeleton-loading 1s linear infinite alternate; background-color: #e9ecef; }
.skeleton-text { width: 100%; height: 1rem; border-radius: .25rem; }
.profile .skeleton-text { height: 1rem; width: 80%; margin: 8px auto 0 auto; }
@keyframes skeleton-loading { 0% { background-color: #e9ecef; } 100% { background-color: #f8f9fa; } }
/* --- Media Query for Responsiveness --- */
@media (max-width: 1200px) {
    .chart-grid, .bottom-grid { grid-template-columns: 1fr; }
}