body {
  background: linear-gradient(to bottom right, #e6f7ff, #ffffff);
  /* warna awal: biru muda (#e6f7ff) → putih (#ffffff) */
  min-height: 100vh;
  margin: 0;
  font-family: "Nunito", sans-serif;
}

 /* Peta wajib punya ukuran */
    #map {
      width: 100%;
      height: 400px;
      margin-bottom: 20px;
      border: 2px solid #444;
      border-radius: 8px;
      z-index: 1;
    }

h3 {
  margin: 10px;
  text-align: center;
}
  .legend { background: white; padding: 6px; line-height: 18px; }
    .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

  #tblGiziKab th, #tblGiziKab td {
    padding: 2px 4px !important;
    text-align: center;
    vertical-align: middle;
  }
  
.medium-bg{
  background: #40E0D0;
  --surface-color: #ffffff;
  margin: 0;
  font-family: "Nunito", sans-serif;
}

.light-bg{
  background: linear-gradient(90deg, #ffffff 0%, #f0fdff 40%, #d6faff 100%);
  --surface-color: #ffffff;
  margin: 0;
  font-family: "Nunito", sans-serif;
}

.light-oldbg{
 background: linear-gradient(90deg, #ffffff 0%, #e3f8ff 40%, #bce9f7 100%);
  --surface-color: #ffffff;
  margin: 0;
  font-family: "Nunito", sans-serif;
}
  #tblGiziKab thead th {
    background-color: #f6f8fa;
    border: 1px solid #ddd !important;
  }

  #tblGiziKab td {
    border: 1px solid #ddd !important;
  }

  #tblGiziKab tfoot th {
    background-color: #eef2f7;
    border: 1px solid #ccc !important;
  }

  /* Tabel responsif di layar kecil */
  @media (max-width: 992px) {
    #tblGiziKab { font-size: 9px; }
    #tblGiziKab th, #tblGiziKab td { padding: 1px 2px !important; }
  }
 .table-wrapper-scroll {
    max-height: 420px; /* kamu bisa ubah, misal 350px atau 500px */
    overflow-y: auto;
    border: 1px solid #ddd;
  }

  /* agar header tetap terlihat saat scroll */
  .table-wrapper-scroll thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 2;
  }
  
  
  /* ----------------
  /* 🌊 Tema Biru Elegan */

/* Header tabel */
#tblGiziKab thead {
  background: linear-gradient(90deg, #1976d2, #42a5f5);
  color: white;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 11px;
}

/* Footer tabel */
#tblGiziKab tfoot {
  background-color: #e3f2fd;
  color: #0d47a1;
  font-weight: bold;
  border-top: 2px solid #1565c0;
}

/* Baris data */
#tblGiziKab tbody tr {
  transition: background-color 0.2s ease;
}
#tblGiziKab tbody tr:nth-child(even) {
  background-color: #f1f8ff;
}
#tblGiziKab tbody tr:hover {
  background-color: #e3f2fd;
}

/* Cell */
#tblGiziKab th,
#tblGiziKab td {
  border: 1px solid #bbdefb;
  text-align: center;
  vertical-align: middle;
  padding: 6px;
}

/* Kolom penting */
#tblGiziKab th[style*="color:#e53935;"],
#tblGiziKab td[style*="color:#e53935;"] {
  color: #d32f2f !important;
  font-weight: bold;
}

/* Tombol Export */
.btn.btn-primary {
  background: linear-gradient(90deg, #1565c0, #42a5f5);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, box-shadow 0.2s;
}
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(21, 101, 192, 0.3);
}