:root {
      --bg-dark: #090d16;
      --bg-card: #0f172a;
      --bg-card-hover: #1e293b;
      --accent: #0284c7;
      --accent-light: #38bdf8;
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --border: #1e293b;
      --border-light: #334155;
      --danger: #ef4444;
      --warning: #f59e0b;
      --success: #22c55e;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--bg-dark);
      color: var(--text);
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* SIDEBAR */
    .sidebar { width: 250px; background-color: var(--bg-card); border-right: 1px solid var(--border-light); padding: 20px; display: flex; flex-direction: column; gap: 24px; }
    .brand { font-size: 16px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
    .brand-icon { background: linear-gradient(135deg, var(--accent), var(--accent-light)); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .menu a { display: block; padding: 10px 14px; color: var(--text-muted); text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
    .menu a:hover, .menu a.active { background-color: var(--bg-card-hover); color: var(--accent-light); }

    /* MAIN CONTENT */
    .main-content { flex: 1; overflow-y: auto; padding: 32px; }
    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .header h1 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
    .header p { color: var(--text-muted); font-size: 14px; }
    
    select { background: #0f172a; border: 1px solid var(--border-light); color: white; padding: 8px 16px; border-radius: 6px; font-size: 14px; outline: none; cursor: pointer; }

    /* WIDGET CARDS */
    .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; }
    .card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 20px; }
    .card-title { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    .card-value { font-size: 32px; font-weight: 700; color: #fff; }
    .trend { font-size: 12px; font-weight: 600; margin-top: 8px; display: inline-block; }
    .trend.up { color: var(--success); }
    .trend.down { color: var(--danger); }

    /* CHARTS LAYOUT */
    .charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 32px; }
    .chart-container { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 20px; height: 350px; }
    .chart-header { font-size: 15px; font-weight: 600; margin-bottom: 16px; border-bottom: 1px solid var(--border-light); padding-bottom: 12px; }

    /* TABEL PELACAKAN ERROR */
    .table-container { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 12px; padding: 20px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 12px 16px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border-light); }
    th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
    tr:last-child td { border-bottom: none; }
    .badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; }
    .badge.err { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
    .badge.warn { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    
    
    
    /* Pastikan card chart memiliki posisi relative */
      .chart-container { 
        background: var(--bg-card); 
        border: 1px solid var(--border-light); 
        border-radius: 12px; 
        padding: 20px; 
        display: flex;
        flex-direction: column;
      }
    
      /* Buat wadah khusus canvas agar ukurannya terkunci di dalam kotak */
      .canvas-wrapper {
        position: relative;
        flex: 1;
        width: 100%;
        height: 260px; /* Atur tinggi tetap agar grafik tidak meluber */
        max-height: 260px;
      }
    
      .chart-header { 
        font-size: 15px; 
        font-weight: 600; 
        margin-bottom: 16px; 
        border-bottom: 1px solid var(--border-light); 
        padding-bottom: 12px; 
        display: flex;
        justify-content: space-between;
        align-items: center;
      }