/* ===================================================
   1. PENGATURAN DASAR
=================================================== */
body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; background: #fff; color: #000; }
body.dark-mode { background: #222; color: #eee; }

/* ===================================================
   2. MENU SAMPING & OVERLAY
=================================================== */
.sidebar {
  position: fixed; top: 0; left: -250px; width: 220px; height: 100%;
  background: #292c36; color: #fff; z-index: 2000;
  transition: left 0.3s ease; padding-top: 20px;
}
.sidebar.open { left: 0; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.sidebar-menu li { padding: 10px; cursor: pointer; font-weight: bold; border-radius: 6px; transition: 0.2s; }
.sidebar-menu li:hover, .sidebar-menu li.active { background: #ff3333; }

.overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.3); opacity: 0; visibility: hidden;
  z-index: 1500; transition: 0.3s;
}
.overlay.show { opacity: 1; visibility: visible; }

/* ===================================================
   3. TOMBOL ATAS
=================================================== */
.sidebar-toggle {
  position: fixed; top: 15px; left: 15px; z-index: 2100;
  background: #f44545; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer;
}
.dark-mode-toggle {
  position: absolute; top: 15px; right: 20px;
  background: #343a40; color: #ffe066; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer;
}

/* ===================================================
   4. KOTAK SENSOR & AMBANG BATAS
=================================================== */
/* Menengahkan layar utama agar tidak mentok kiri kanan */
.container {
  margin: 0 auto; 
  max-width: 1300px; 
  padding: 40px 60px; 
  transition: 0.3s ease;
}

.cards { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; justify-content: center; }

.card {
  background: #292c36; color: #fff; padding: 20px; border-radius: 12px;
  flex: 1 1 200px; /* Minimal lebar kotak */
  text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); }

/* Angka Sensor */
.card .value { font-size: 2rem; font-weight: bold; margin-bottom: 5px; }
.card .value span { font-size: 1rem; vertical-align: super; }

/* Judul (Tegangan AC, dll) */
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 10px; color: #fff; }

/* Keterangan Ambang Batas (N/W/F) */
.threshold-info {
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #bbb;
  line-height: 1.5;
  text-align: left;
  display: inline-block;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Pewarnaan Status */
.sensor-status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.85rem; font-weight: bold; background: #444; color: #fff; }
.sensor-normal { background-color: #38b000; color: #fff; }
.sensor-warning { background-color: #ffcc00; color: #000; }
.sensor-fault { background-color: #ff3333; color: #fff; }

/* ===================================================
   5. GRAFIK & TABEL
=================================================== */
.charts-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.chart-card { background: #292c36; padding: 15px; border-radius: 12px; flex: 1 1 45%; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.chart-card canvas { width: 100% !important; height: 200px !important; }
.chart-label { text-align: center; color: #fff; font-weight: bold; margin-top: 5px; }

.history-section { background: #292c36; padding: 20px; border-radius: 12px; margin-top: 20px; color: #fff; }
.download-btn { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; margin-right: 10px; }
.download-btn.excel { background: #38b000; color: #fff; }
.download-btn.csv { background: #3396ff; color: #fff; }

.history-table { margin-top: 16px; overflow-x: auto; }
.history-table table { width: 100%; border-collapse: collapse; }
.history-table th, .history-table td { text-align: center; padding: 10px; color: #fff; }
.history-table th { font-weight: bold; border-bottom: 1px solid #555; }
.history-table tr:nth-child(even) { background-color: rgba(255,255,255,0.05); }

/* ===================================================
   6. DARK MODE TAMBAHAN
=================================================== */
body.dark-mode .card, body.dark-mode canvas, body.dark-mode .history-table table {
  background: #292c36; color: #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* ===================================================
   7. RESPONSIVE LAYAR KECIL (HP)
=================================================== */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }

@media(max-width:900px) {
  .card { flex: 0 0 48%; max-width: none; } 
  .chart-card { flex: 1 1 100%; }
}
@media(max-width:600px) {
  .container { padding: 15px; padding-top: 80px; width: 100%; }
  h2, h3, h4 { text-align: center; }
  .cards, .charts-grid { display: flex; flex-direction: column; gap: 15px; width: 100%; margin-top: 15px; }
  .card, .chart-card { width: 100%; margin: 0; }
}

/* ===================================================
   8. PERBAIKAN KHUSUS TAMPILAN LAPTOP / MONITOR BESAR
=================================================== */
@media (min-width: 1024px) {
    .container {
        padding-top: 80px; /* Jarak dari layar atas */
    }
    .card {
        padding: 40px 20px; /* Kotak lebih besar di laptop */
    }
    .card .value {
        font-size: 2.5rem; /* Angka lebih besar di laptop */
    }
}