/* 🎯 Styling dropdown filter wilayah */
#provinceSelect,
#regencySelect,
#districtSelect {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s ease-in-out;
  background-color: #fff;
  padding-left: 10px; /* 🔹 Tambah jarak teks dari kiri */
  font-size: 0.9rem;
}

/* Hover / focus effect */
#provinceSelect:hover,
#regencySelect:hover,
#districtSelect:hover,
#provinceSelect:focus,
#regencySelect:focus,
#districtSelect:focus {
  border-color: #4e73df;
  box-shadow: 0 0 0 3px rgba(78,115,223,0.15);
  outline: none;
}

/* 🔹 Atur jarak antara teks "Pilih Wilayah" dan dropdown */
.row.mb-3 {
  margin-top: -8px;  /* geser ke atas sedikit */
  margin-bottom: 10px; /* biar nggak terlalu nempel sama chart */
}

/* 🔹 Biar tiap dropdown punya jarak rapih antar kolom */
.row.mb-3 .col-md-4 {
  padding-right: 6px;
  padding-left: 6px;
}
/* Styling modal form kader */

/* ==== FORM DI DALAM MODAL ==== */
.modal-content {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* spacing antar field */
.modal-body .mb-3 {
  margin-bottom: 1rem !important;
}

/* label agak bold dan kecil */
.form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #344767;
  margin-bottom: 0.4rem;
}

/* input & select style */
.form-control, .form-select, textarea {
  border: 1px solid #d2d6da !important; /* tipis tapi kelihatan */
  border-radius: 0.6rem;
  padding: 0.6rem 0.9rem; /* biar gak nempel */
  font-size: 0.9rem;
  transition: all 0.2s ease;
  background-color: #fff;
  color: #344767;
}

/* hover dan focus state biar interaktif */
.form-control:hover, .form-select:hover, textarea:hover {
  border-color: #a0a5aa !important;
}

.form-control:focus, .form-select:focus, textarea:focus {
  border-color: #3a416f !important;
  box-shadow: 0 0 0 2px rgba(58,65,111,0.15);
  outline: none;
}

/* tombol bawah modal biar clean */
.modal-footer .btn {
  border-radius: 0.6rem;
  padding: 0.45rem 1rem;
}

/* === Floating Label Style === */
.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select,
.form-floating > textarea {
  border: 1px solid #d2d6da;
  border-radius: 0.6rem;
  padding: 1rem 0.9rem 0.4rem;
  font-size: 0.95rem;
  background-color: #fff;
  transition: all 0.2s ease;
}

.form-floating > label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0 0.25rem;
  color: #6c757d;
  background: #fff;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
}

/* Saat user fokus atau input terisi */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label,
.form-floating > textarea:focus ~ label,
.form-floating > textarea:not(:placeholder-shown) ~ label {
  top: -0.45rem;
  left: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #3a416f;
  background: #fff;
}
.table-wrapper {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}