:root {
  --bs-body-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  background-color: #f8fafc;
  color: #334155;
}

.bg-emerald {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
}

.card-custom {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease-in-out;
}

.hover-lift {
  cursor: pointer;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
  border-color: #a7f3d0 !important;
}

.btn-emerald {
  background-color: #059669;
  color: #ffffff;
  border: none;
}
.btn-emerald:hover {
  background-color: #047857;
  color: #ffffff;
}

.table-index-h {
  background-color: #ecfdf5 !important;
  color: #065f46;
}
.table-index-e {
  background-color: #f0f9ff !important;
  color: #0369a1;
}
.table-index-c {
  background-color: #fffbeb !important;
  color: #b45309;
}

.ts-dropdown {
  z-index: 1065 !important;
  border-radius: 8px !important;
}

.fade-in {
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Perbaikan teks meluber pada TomSelect / Select Dropdown */
.ts-control {
  padding-right: 2.2rem !important; /* Memberi jarak agar teks tidak menabrak panah */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ts-control > .item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
}

/* Mempercantik tampilan dropdown item */
.ts-dropdown .option {
  white-space: normal !important;
  word-break: break-word !important;
}

/* ==========================================================================
   Tabel input tahun: kolom No + Nama Lokal dibekukan di kiri, header di atas
   ========================================================================== */

/* Scroll dipindah ke dalam container supaya position:sticky punya acuan.
   .table-responsive milik Bootstrap hanya menyediakan scroll horizontal;
   tanpa max-height, sticky header tidak akan aktif saat halaman digulir. */
.table-freeze-wrap {
  max-height: calc(100vh - 260px);
  min-height: 320px;
  overflow: auto;
}

/* Lebar kolom beku dikunci: offset kolom Nama Lokal dihitung dari lebar kolom No */
.table-freeze .col-freeze-no {
  width: 45px;
  min-width: 45px;
  left: 0;
}
.table-freeze .col-freeze-lokal {
  width: 220px;
  min-width: 220px;
  left: 45px;
}

.table-freeze .col-freeze {
  position: sticky;
  z-index: 2;
  background-color: #ffffff;
}

/* Baris duplikat: bagian yang dibekukan ikut kuning, jangan belang */
.table-freeze tbody tr.table-warning > .col-freeze {
  background-color: #fff3cd;
}

/* Header menempel di atas; sel pojok (beku kiri + atas) perlu z-index tertinggi */
.table-freeze thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #ffffff;
  box-shadow: inset 0 -1px 0 #dee2e6;
}
.table-freeze thead th.col-freeze {
  z-index: 5;
}

/* Baris indeks H'/E/C menempel di bawah supaya tetap terbaca saat menggulir */
.table-freeze tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
}
/* Warna latar wajib eksplisit: sel yang sticky harus solid, kalau tidak
   isi baris di belakangnya akan tembus terlihat saat digulir */
.table-freeze tfoot tr.table-index-h td { bottom: 76px; background-color: #ecfdf5; }
.table-freeze tfoot tr.table-index-e td { bottom: 38px; background-color: #f0f9ff; }
.table-freeze tfoot tr.table-index-c td { bottom: 0;    background-color: #fffbeb; }
.table-freeze tfoot tr:first-child td { box-shadow: inset 0 1px 0 #dee2e6; }

/* Garis pemisah agar batas area beku terlihat saat digeser ke kanan */
.table-freeze .col-freeze-lokal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #e2e8f0;
}

@media (max-width: 768px) {
  .table-freeze .col-freeze-lokal {
    width: 160px;
    min-width: 160px;
  }
}