/* Tampilan ERP kebun — di atas Bootstrap 5.3 */
:root {
  --erp-hijau: #17693a;
  --erp-hijau-muda: #2fa84f;
  --erp-sidebar: #0f3d24;
  --erp-sidebar-teks: #cfe3d6;
  --erp-latar: #f4f6f5;
  --erp-garis: #e3e8e5;
  --bs-primary: #17693a;
  --bs-primary-rgb: 23, 105, 58;
  --bs-link-color: #17693a;
  --bs-link-color-rgb: 23, 105, 58;
  --bs-link-hover-color: #0f4d2a;
  --bs-body-font-size: .925rem;
}
body { background: var(--erp-latar); }

.btn-primary {
  --bs-btn-bg: var(--erp-hijau); --bs-btn-border-color: var(--erp-hijau);
  --bs-btn-hover-bg: #12552f; --bs-btn-hover-border-color: #12552f;
  --bs-btn-active-bg: #0f4d2a; --bs-btn-active-border-color: #0f4d2a;
  --bs-btn-disabled-bg: #6c9a7f; --bs-btn-disabled-border-color: #6c9a7f;
}
.btn-outline-primary {
  --bs-btn-color: var(--erp-hijau); --bs-btn-border-color: var(--erp-hijau);
  --bs-btn-hover-bg: var(--erp-hijau); --bs-btn-hover-border-color: var(--erp-hijau);
  --bs-btn-active-bg: #0f4d2a; --bs-btn-active-border-color: #0f4d2a;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #6fbf8b; box-shadow: 0 0 0 .2rem rgba(47, 168, 79, .2);
}
.form-check-input:checked { background-color: var(--erp-hijau); border-color: var(--erp-hijau); }
.text-bg-primary { background-color: var(--erp-hijau) !important; }

/* --- kerangka --- */
.erp-shell { display: flex; min-height: 100vh; }
.erp-sidebar {
  width: 250px; flex: 0 0 250px; background: var(--erp-sidebar); color: var(--erp-sidebar-teks);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
}
.erp-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .75rem; color: #fff; text-decoration: none; }
.erp-brand img { width: 36px; height: 36px; }
.erp-brand strong { display: block; font-size: 1rem; line-height: 1.1; }
.erp-brand small { color: #9cc5ab; font-size: .72rem; }
.erp-modul { padding: .25rem .5rem; }
.erp-modul-judul {
  display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; color: #fff;
  font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .6rem .6rem .3rem;
}
.erp-modul-judul .bi-chevron-down { margin-left: auto; transition: transform .15s; font-size: .7rem; }
.erp-modul-judul.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.erp-sidebar .nav-link {
  color: var(--erp-sidebar-teks); border-radius: .4rem; padding: .38rem .6rem; font-size: .88rem;
  display: flex; align-items: center; gap: .55rem;
}
.erp-sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.erp-sidebar .nav-link.active { background: var(--erp-hijau-muda); color: #fff; }
.erp-sidebar-kaki { margin-top: auto; padding: .75rem 1rem; font-size: .75rem; color: #86a894; }

.erp-utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.erp-topbar {
  background: #fff; border-bottom: 1px solid var(--erp-garis); padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 1020;
}
.erp-konten { padding: 1.25rem; }
.erp-judul { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.erp-judul h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.erp-judul .aksi { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 991.98px) {
  .erp-sidebar { position: fixed; left: -260px; z-index: 1040; transition: left .2s; }
  .erp-sidebar.buka { left: 0; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .erp-konten { padding: 1rem; }
}

/* --- komponen --- */
.card { border-color: var(--erp-garis); box-shadow: 0 1px 2px rgba(16, 40, 25, .04); }
.card-header { background: #fff; font-weight: 600; }
.kpi .label { color: #5f6f66; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.kpi .nilai { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: .78rem; color: #6c7a72; }

.table { --bs-table-bg: #fff; font-size: .86rem; }
.table thead th { background: #eef3f0; color: #33463b; font-weight: 600; white-space: nowrap; border-bottom-width: 1px; }
.table-sticky thead th { position: sticky; top: 0; z-index: 2; }
.tabel-gulir { max-height: 68vh; overflow: auto; border: 1px solid var(--erp-garis); border-radius: .4rem; background: #fff; }
.tabel-gulir .table { margin: 0; }
td.angka, th.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; background: #f6f9f7 !important; }
.nowrap { white-space: nowrap; }

.bar { background: #e9efeb; border-radius: 3px; height: 10px; min-width: 60px; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #86b6ef, #184f95); }

.modul-kartu { transition: transform .12s, box-shadow .12s; color: inherit; text-decoration: none; }
.modul-kartu:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 40, 25, .1); }
.modul-kartu .ikon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem;
  background: #e5f3ea; color: var(--erp-hijau);
}

.login-latar {
  min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(circle at 20% 10%, #2fa84f33, transparent 40%), linear-gradient(160deg, #0f3d24, #17693a);
}
.login-kartu { width: 100%; max-width: 400px; }

.badge-status { font-weight: 500; }
.form-label { font-weight: 500; margin-bottom: .25rem; font-size: .85rem; }
.help { font-size: .78rem; color: #6c7a72; }
.baris-item td { vertical-align: middle; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

@media print {
  .erp-sidebar, .erp-topbar, .no-print { display: none !important; }
  .erp-konten { padding: 0; }
}

/* baris item dokumen */
.baris-item .kol-barang { min-width: 300px; }
.baris-item .kol-jumlah, .baris-item .kol-harga_satuan, .baris-item .kol-jumlah_disetujui { min-width: 110px; }
.baris-item .kol-keperluan, .baris-item .kol-pekerjaan { min-width: 220px; }
.baris-item .kol-blok { min-width: 140px; }
.baris-item .kol-tahun_tanam { min-width: 80px; }

input[type=number] { text-align: right; }
.tabel-gulir td, .tabel-gulir th { white-space: nowrap; }

/* grafik analisa */
.batang-grafik { display: grid; gap: 6px; }
.baris-batang { display: grid; grid-template-columns: minmax(90px, 220px) minmax(0, 1fr); gap: 10px; align-items: center; font-size: .85rem; }
.baris-batang .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: #33463b; }
.baris-batang .jalur { position: relative; height: 22px; display: flex; align-items: center; }
.baris-batang .isi { height: 18px; border-radius: 0 4px 4px 0; min-width: 2px; flex: none; }
.baris-batang .nilai { margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.baris-batang .garis-rata { position: absolute; top: -3px; bottom: -3px; border-left: 1px dashed #8a8984; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; }
svg.grafik { width: 100%; height: auto; display: block; }
svg.grafik .grid { stroke: #dfe6e1; stroke-width: 1; }
svg.grafik .sumbu { fill: #5f6f66; font-size: 11px; }
svg.grafik .nilai { fill: #1b261e; font-size: 12px; font-weight: 700; }
.tabel-karyawan td { min-width: 90px; }
.tabel-karyawan .kol-divisi, .tabel-karyawan .kol-asisten, .tabel-karyawan .kol-mandor, .tabel-karyawan .kol-jabatan { min-width: 130px; }
.tabel-karyawan .kol-aktif, .tabel-karyawan .kol-bpjs_otomatis, .tabel-karyawan .kol-pph_otomatis, .tabel-karyawan .kol-pph_ditanggung_pt { min-width: 0; text-align: center; }

/* LHK mode tabel */
.baris-item .kol-nik { min-width: 250px; }
.baris-item .kol-kode_premi { min-width: 230px; }
.baris-item .kol-vra { min-width: 90px; }
.baris-item .kol-hk { min-width: 80px; }
.baris-item .kol-jam_lembur { min-width: 90px; }
.baris-item .kol-hasil { min-width: 110px; }
.baris-item .kol-catatan { min-width: 170px; }
.baris-item .kol-batas_atas { min-width: 200px; }
.baris-item .kol-tarif { min-width: 110px; }
.tabel-karyawan .kol-status { min-width: 130px; } .tabel-karyawan .kol-ptkp { min-width: 100px; }

/* menu: judul kelompok di dalam modul */
.erp-subjudul { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: #86a894; padding: .7rem .6rem .2rem; }
.erp-modul .nav + .erp-subjudul { border-top: 1px solid rgba(255, 255, 255, .06); margin-top: .35rem; }

/* beranda: tautan modul per kelompok */
.beranda-grup { display: grid; gap: .6rem; }
.beranda-baris { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: .75rem; align-items: start; }
.beranda-judul { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5f6f66; padding-top: .35rem; }
@media (max-width: 575.98px) { .beranda-baris { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }