/* =========================================================
   KUALITAS_DAYA.CSS - Layout & Styling untuk Dashboard Kualitas Daya (Tanpa Scroll, Kolom Kiri Lebih Sempit, Grafik Lebih Tinggi, Summary 2 Kolom Vertikal)
   ========================================================= */

/* RESET DASAR */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden; /* Mencegah scrollbar utama muncul */
}

/* KONTEN UTAMA */
main.container {
  flex: 1; /* Mengisi ruang vertikal yang tersedia */
  padding: 1.2rem; /* Padding sedikit lebih kecil */
  max-width: 2000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- HEADER STYLES --- */
/* Target elemen <header> dengan kelas .navbar untuk spesifisitas tinggi */
header.navbar {
    background-color: #002D62 !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1000 !important;
    padding: 10px 0 !important;
    
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    border-bottom: none !important;
}

/* Target container di dalam navbar dengan selektor yang SANGAT spesifik */
header.navbar > .nav-container { /* Selektor ini menargetkan anak langsung dari header.navbar */
    max-width: 1850px !important;
    width: 100% !important; /* INI KUNCI UNTUK MEMBUATNYA TERSEBAR */
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Logo kiri, navigasi kanan */
    align-items: center !important;
    flex-wrap: nowrap !important;

    background-color: transparent !important;
    box-sizing: border-box !important;
    /* HAPUS INI: border: 3px dashed blue !important; */ /* Debugging border dihapus */
}

/* Target logo wrapper untuk menghilangkan kotak putih */
.logo-wrapper {
    background-color: white !important; /* Mengubah background menjadi putih */
    padding: 5px 10px !important; /* Menambah padding di sekitar logo */
    border-radius: 6px !important; /* Menambahkan sedikit sudut membulat */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Menambah sedikit bayangan */
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Gaya untuk gambar logo */
.logo-img {
    height: 40px !important;
    width: auto !important;
    margin-right: 0 !important;
}

/* Gaya untuk teks di dalam logo wrapper (span) */
.logo-wrapper span { /* TARGET SPAN SECARA LANGSUNG */
    font-size: 1.5em !important;
    font-weight: bold !important;
    color: #333 !important; /* Mengubah warna teks menjadi hitam/gelap */
    line-height: normal !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Navigasi */
nav {
    display: flex !important;
    flex-direction: row !important;
    flex-grow: 1 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

nav a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
    font-size: 1rem !important;
}

nav a:hover {
    background-color: rgba(255,255,255,0.2) !important;
    color: #007bff !important;
}

nav a.active {
    background-color: #ffffff !important;
    color: #002147 !important;
    font-weight: bold !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
/* --- END HEADER STYLES --- */

/* LAYOUT UTAMA DASHBOARD */
.dashboard-layout {
  display: grid; /* Menggunakan grid untuk kontrol lebih baik */
  gap: 1.2rem; /* Gap antar kolom lebih kecil */
  align-items: stretch;
  flex-grow: 1;
  min-height: 0;
  grid-template-columns: 1fr 4fr; /* Kolom kiri 20%, kolom kanan 80% */
}

/* KOLOM KIRI */
.left-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.left-panel {
  background-color: #fff;
  padding: 1rem; /* Padding lebih kecil lagi */
  border-radius: 10px; /* Radius lebih kecil */
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Mengurangi gap antar panel-section untuk menaikkan "Energy Summary" */
  flex-grow: 1;
  min-height: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.8rem; /* Tambah padding di bawah konten */
  border-bottom: 3px solid #002147; /* Garis tebal di bawah */
  margin-bottom: 1rem; /* Jarak antara garis dan elemen berikutnya */
}

.panel-logo {
  height: 50px; /* Tinggi logo lebih kecil */
  width: auto;
  object-fit: contain;
}

/* Gaya untuk judul "Monitoring Energi" */
.panel-section h2:not(.energy-summary-heading) { /* Target h2 yang bukan energy-summary-heading */
  font-size: 1.5rem; /* Ukuran font diperbesar */
  font-weight: bold;
  color: #002147;
  margin-bottom: 0; /* Hapus margin bawah agar tidak ada jarak berlebih ke border */
}

/* Gaya untuk judul "Energy Summary" */
.energy-summary-heading {
  font-size: 1.3rem; /* Ukuran font diperbesar */
  font-weight: bold;
  color: #002147;
  text-align: center; /* Teks di tengah */
  padding: 0.6rem 0; /* Padding vertikal untuk memberi ruang di atas dan bawah teks */
  border-top: 2px solid #aaa; /* DIUBAH: Warna garis atas menjadi abu-abu */
  border-bottom: 2px solid #aaa; /* DIUBAH: Warna garis bawah menjadi abu-abu */
  margin: 0 0 1rem 0; /* Margin atas 0 untuk membiarkan gap .left-panel mengaturnya, margin bawah 1rem untuk spasi ke kartu */
}


.top-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Gap diperlebar untuk spasi horizontal */
}

.top-bar label {
  font-weight: bold;
  color: #002147;
  white-space: nowrap;
  font-size: 0.85rem; /* Ukuran font lebih kecil */
}

/* PERUBAHAN: Select sudah tidak dipakai untuk project, tapi untuk distribution panel */
.top-bar select {
  padding: 0.2rem; /* Padding lebih kecil */
  border-radius: 5px; /* Radius lebih kecil */
  border: 1px solid #ccc;
  font-size: 0.8rem; /* Ukuran font lebih kecil */
  width: 100%;
  max-width: 150px; /* Lebar maksimum select lebih kecil */
}

/* SUMMARY */
.summary-stack {
  display: grid;
  /* PERUBAHAN UTAMA DI SINI: Dua kolom vertikal */
  grid-template-columns: repeat(2, 1fr); /* Dua kolom, masing-masing mengambil ruang yang sama */
  gap: 0.6rem; /* Gap sedikit lebih besar agar tidak terlalu rapat */
}

.card {
  background: linear-gradient(to bottom right, #ffffff, #f0f4ff);
  padding: 0.8rem 0.4rem; /* Padding diperbesar agar konten tidak terlalu padat */
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  /* font-weight: bold; */ /* Dihapus agar label tidak terlalu tebal */
  color: #555; /* Warna label kartu lebih redup */
  text-align: center;
  font-size: 0.8rem; /* Ukuran font label kartu */
  transition: transform 0.2s ease;
  min-height: 70px; /* Tinggi minimum kartu diperbesar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card:hover {
  transform: scale(1.02);
}

/* Gaya untuk nilai-nilai summary */
.summary-value-display {
  display: block;
  margin-top: 5px; /* Sedikit jarak dari label di atasnya */
  font-size: 1.5em; /* Ukuran font diperbesar */
  color: #007bff;   /* Warna biru terang */
  font-weight: bold; /* Membuat teks lebih tebal */
  line-height: 1.2; /* Mengurangi line-height */
}

/* Hapus gaya span di dalam card yang sekarang ditangani oleh .summary-value-display */
.card span:not(.summary-value-display) {
  /* Ini untuk memastikan span lain di dalam card (jika ada) tidak terpengaruh,
     tapi untuk kasus ini, semua span nilai sudah memiliki .summary-value-display */
}


/* KOLOM KANAN */
.right-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.graph {
  background-color: #fff;
  padding: 1.2rem; /* Padding lebih kecil */
  border-radius: 10px; /* Radius lebih kecil */
  box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  gap: 1.2rem; /* Gap lebih kecil */
}

/* Judul Grafik Parameter */
.graph h2 {
  color: #002147;
  font-size: 1.3rem; /* Ukuran font lebih kecil */
  padding-bottom: 0.5rem; /* Tambahkan padding bawah */
  margin-bottom: 1rem; /* Tambahkan margin bawah */
  border-bottom: 2px solid #e0e0e0; /* Garis abu-abu di bawah judul */
}

/* GRAFIK & STATISTIK */
.chart-section {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 0.6rem; /* Gap lebih kecil */
  background-color: #fff;
  padding: 0.8rem; /* Padding lebih kecil */
  border-radius: 8px; /* Radius lebih kecil */
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); /* Bayangan lebih halus */
  align-items: start;
  flex-shrink: 0;
  position: relative; /* Ditambahkan untuk penempatan elemen absolut yang benar */
}

.chart-area {
  display: flex;
  flex-direction: column;
}

/* --- BARU: Wrapper untuk selector dan tombol zoom agar sejajar --- */
.chart-control-wrapper {
    display: flex;
    justify-content: space-between; /* Menjaga selector di kiri, tombol di kanan */
    align-items: center;
    margin-bottom: 10px; /* Memberi sedikit ruang di bawahnya */
}

/* --- BARU: Styling untuk tombol zoom --- */
.zoom-button {
    background: none;
    border: none;
    font-size: 1.2em; /* Ukuran ikon */
    cursor: pointer;
    color: #6c757d; /* Warna abu-abu */
    padding: 5px;
    transition: color 0.2s ease-in-out; /* Efek hover */
}

.zoom-button:hover {
    color: #007bff; /* Warna biru saat hover */
}
/* --- AKHIR BARU --- */


.chart-control {
  margin-bottom: 0.6rem; /* Margin lebih kecil */
  /* Diubah agar hanya berisi label dan select, tidak perlu display:flex lagi di sini
     karena sudah diatur oleh .chart-control-wrapper */
  display: flex; /* Tetap pakai flex untuk label dan select di dalamnya */
  align-items: center;
  gap: 10px;
}

.chart-control label {
  font-weight: bold;
  margin-right: 0.3rem; /* Margin lebih kecil */
  white-space: nowrap;
  font-size: 0.9rem; /* Ukuran font lebih kecil */
}

.chart-control select {
  padding: 0.3rem; /* Padding lebih kecil */
  border-radius: 5px; /* Radius lebih kecil */
  border: 1px solid #ccc;
  font-size: 0.85rem; /* Ukuran font lebih kecil */
  width: 100%;
  max-width: 150px; /* Lebar maksimum select lebih kecil */
}

.chart-area canvas {
  width: 100% !important;
  height: 250px !important; /* Tinggi canvas diperbesar */
}

.stat-area {
  background-color: #f9fbff;
  padding: 0.6rem; /* Padding lebih kecil */
  border-radius: 8px; /* Radius lebih kecil */
  box-shadow: inset 0 0 2px rgba(0,0,0,0.03); /* Bayangan lebih halus */
  font-size: 0.75rem; /* Ukuran font lebih kecil */
}

.stat-area h4 {
  color: #002147;
  margin-bottom: 0.6rem; /* Margin lebih kecil */
  font-size: 0.9rem; /* Ukuran font lebih kecil */
}

.stat-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4rem; /* Margin lebih kecil */
  font-size: 0.7rem; /* Ukuran font lebih kecil */
}

.stat-table th,
.stat-table td {
  border: 1px solid #ccc;
  padding: 3px 5px; /* Padding lebih kecil */
  text-align: center;
  background-color: #fff;
}

.stat-table th {
  background-color: #e6ecf5;
  font-weight: bold;
  color: #002147;
}

.stat-area p {
  margin-top: 0.6rem; /* Margin lebih kecil */
  font-size: 0.8rem; /* Ukuran font lebih kecil */
  color: #333;
}

.standard-label {
  color: #007f00;
  font-weight: bold;
}

/* FOOTER */
footer {
  background-color: #002147;
  color: white;
  text-align: right;
  padding: 0.4rem 1.2rem; /* Padding lebih kecil */
  font-size: 0.85rem; /* Ukuran font lebih kecil */
  box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.footer-container {
  max-width: 1850px;
  margin: 0 auto;
  text-align: right;
}

/* =========================================================
   MODAL & TREE VIEW STYLES (FINAL EXPLORER STYLE - NO DASH, COMPACT, PROJECT DOT)
   ========================================================= */

/* --- Modal Styles --- */
.modal {
  display: none; /* Modal tersembunyi secara default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #333;
    text-align: center;
}

.close-button {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 20px;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* --- Project Selector Trigger & Display --- */
.project-selector-trigger {
  font-weight: bold;
  color: #002147;
  white-space: nowrap;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(0, 33, 71, 0.3);
  transition: text-decoration-color 0.2s ease;
}

.project-selector-trigger:hover {
  text-decoration-color: rgba(0, 33, 71, 0.7);
}

.selected-project-display {
  font-weight: bold;
  color: #002147;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* --- Tree View Styles --- */
.project-tree-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 5px; /* Padding keseluruhan container sedikit dikurangi */
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.9em;
}

.project-tree-container ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.project-tree-container ul ul {
  padding-left: 20px; /* Indentasi untuk setiap level anak tetap */
}

.project-tree-container li {
  margin: 0; /* Hapus margin vertikal agar lebih rapat */
  border-radius: 3px;
}

/* Hapus dash untuk node anak */
.project-tree-container li ul li::before {
    content: none; /* Menghilangkan dash */
}

/* Gaya untuk pembungkus konten (ikon + teks) di dalam LI */
.project-tree-container .node-content-wrapper {
    display: flex;
    align-items: center;
    padding: 3px 8px; /* Padding vertikal dikurangi agar lebih rapat */
    cursor: pointer;
    position: relative;
    flex-grow: 1;
}

/* Ikon folder untuk semua node secara default */
.project-tree-container .node-content-wrapper::before {
    content: '📁'; /* Ikon folder */
    margin-right: 5px;
    color: #f7d73e; /* Warna kuning untuk ikon folder */
    flex-shrink: 0;
}

/* Override ikon untuk node project menjadi titik hitam */
.project-tree-container li.project .node-content-wrapper::before {
    content: '●'; /* Titik hitam tebal */
    color: #333; /* Warna hitam */
    font-size: 1.1em; /* Sedikit lebih besar agar terlihat jelas */
    line-height: 1; /* Pastikan titik sejajar dengan teks */
}


/* Hover state untuk semua node */
.project-tree-container .node-content-wrapper:hover {
    background-color: #e0e0e0; /* Abu-abu muda untuk hover */
}

/* Selected state untuk node proyek */
.project-tree-container li.project.selected > .node-content-wrapper {
    background-color: #d0d0f0; /* Ungu/biru muda untuk proyek yang dipilih */
    font-weight: bold;
    color: #002147;
}

/* Pastikan teks di dalam node-content-wrapper mengambil sisa ruang */
.project-tree-container .node-content-wrapper span {
    flex-grow: 1;
}

/* Sembunyikan toggle-arrow sepenuhnya jika masih ada */
.project-tree-container .toggle-arrow {
    display: none;
}

/* =========================================================
   Gaya untuk Mode Fullscreen Chart (DIPERBARUI)
   ========================================================= */
.chart-section.is-fullscreen {
    width: 100vw; /* Mengisi 100% lebar viewport */
    height: 100vh; /* Mengisi 100% tinggi viewport */
    position: fixed; /* Memposisikan secara tetap di atas semua elemen */
    top: 0;
    left: 0;
    z-index: 9999; /* Memastikan elemen ini berada di lapisan paling atas */
    background-color: #fff; /* Latar belakang putih saat fullscreen */
    display: flex; /* Menggunakan flexbox untuk mengatur konten di dalamnya */
    flex-direction: column; /* Menumpuk elemen secara vertikal */
    justify-content: center; /* Memusatkan secara vertikal */
    align-items: center; /* Memusatkan secara horizontal */
    margin: 0; /* Menghilangkan margin */
    padding: 0; /* Menghilangkan padding */
    /* Menghapus properti grid saat dalam mode fullscreen */
    grid-template-columns: unset;
    grid-template-rows: unset;
    gap: unset;
}

/* Memastikan chart-area mengisi ruang yang tersedia di mode fullscreen */
.chart-section.is-fullscreen .chart-area {
    flex-grow: 1; /* Memungkinkan chart-area mengambil ruang yang tersedia */
    width: 100%; /* Mengisi lebar penuh kontainer fullscreen */
    height: 100%; /* Mengisi tinggi penuh kontainer fullscreen */
    display: flex; /* Membuat chart-area menjadi kontainer flex untuk kanvasnya */
    justify-content: center;
    align-items: center;
}

/* Aturan CSS untuk elemen <canvas> di dalam chart-section saat dalam mode fullscreen */
.chart-section.is-fullscreen canvas {
    width: 100% !important; /* Mengisi 100% lebar parent fullscreen */
    height: 100% !important; /* Mengisi 100% tinggi parent fullscreen */
    max-width: 100% !important; /* Memastikan tidak melebihi lebar parent */
    max-height: 100% !important; /* Memastikan tidak melebihi tinggi parent */
}

/* Mengadaptasi aturan untuk wrapper kontrol di mode fullscreen */
.chart-section.is-fullscreen .chart-control-wrapper {
    position: absolute; /* Diposisikan relatif terhadap .chart-section.is-fullscreen */
    top: 10px;
    right: 10px;
    z-index: 10000; /* Memastikan di atas overlay fullscreen */
    background-color: rgba(255, 255, 255, 0.8); /* Latar belakang semi-transparan untuk kontrol */
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Menyembunyikan area statistik saat dalam mode fullscreen */
.chart-section.is-fullscreen .stat-area {
    display: none;
}

/* =========================================================
   RESPONSIF (LANJUTAN)
   ========================================================= */
@media (max-width: 768px) {
  .dashboard-layout {
    flex-direction: column;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  main.container {
    padding: 0.8rem;
  }

  .left-panel, .graph {
    padding: 0.8rem;
    gap: 0.8rem;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #002147;
    margin-bottom: 0.8rem;
  }
  /* Gaya untuk judul "Monitoring Energi" di mobile */
  .panel-section h2:not(.energy-summary-heading) {
    margin-bottom: 0;
    font-size: 1.3rem;
  }
  /* Gaya untuk judul "Energy Summary" di mobile */
  .energy-summary-heading {
    font-size: 1.1rem;
    padding: 0.4rem 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 0 0.8rem 0;
  }
  .panel-logo {
    height: 40px;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .top-bar label {
    font-size: 0.8rem;
  }
  /* PERUBAHAN: Select Distribution Panel dan Trigger Project Selector */
  .top-bar select {
    font-size: 0.75rem;
    max-width: 100%;
    margin-left: 0;
  }
  .project-selector-trigger, .selected-project-display {
    font-size: 0.8rem;
    margin-left: 0;
    max-width: 100%;
  }

  /* Modal di mobile */
  .modal-content {
    margin: auto;
    width: 95%;
    padding: 15px;
  }
  .project-tree-container {
    max-height: 300px;
  }

  /* Gaya untuk Mode Fullscreen Chart di Mobile (DIPERBARUI) */
  .chart-section.is-fullscreen .chart-control-wrapper {
      position: fixed; /* Tetap fixed agar tidak terpengaruh scroll */
      top: 10px;
      right: 10px;
      left: auto; /* Pastikan tidak ada left */
      padding: 5px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  .chart-section.is-fullscreen .chart-control-wrapper .chart-control {
      display: none; /* Sembunyikan selector parameter saat fullscreen di mobile */
  }

  .chart-section.is-fullscreen .chart-control-wrapper .zoom-button {
      font-size: 1.5em; /* Perbesar ikon tombol zoom di mobile fullscreen */
  }
}
/* Gaya untuk membungkus tombol zoom dan fullscreen agar berdampingan */
.chart-buttons {
    display: flex; /* Menggunakan flexbox untuk menata tombol */
    gap: 5px; /* Memberi sedikit jarak antar tombol */
    align-items: center; /* Memastikan tombol sejajar secara vertikal */
}
.status-ok {
    color: green;
    font-weight: bold;
}

.status-not-ok {
    color: red;
    font-weight: bold;
}
/* Di file CSS Anda (asset/css/kualitas_daya.css) */
.evaluation-button-container {
    display: flex;
    justify-content: center; /* Pusatkan tombol secara horizontal */
    align-items: center;     /* Pusatkan tombol secara vertikal */
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* Pastikan tinggi dan lebar sesuai dengan kartu summary lainnya jika perlu */
    min-height: 80px; /* Sesuaikan jika kartu summary Anda punya tinggi minimum */
}

.btn-primary {
    background-color: #007bff; /* Warna biru */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
    background-color: #0056b3; /* Warna biru lebih gelap saat hover */
}

.btn-primary:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}