/* RESET STANDAR: Memastikan semua elemen dihitung ukurannya termasuk border dan padding */
* {
  box-sizing: border-box;
}

/* Menyembunyikan elemen Vue sebelum proses render selesai untuk mencegah kedipan */
[v-cloak] {
  display: none;
}

/* Mengatur dasar tampilan halaman: warna latar, font, dan mematikan scroll body utama */
body {
  background-color: #f1f5f9;
  color: #1e293b;
  font-family: "Inter", sans-serif;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

/* GRID LAYOUT UTAMA: Membagi layar menjadi Sidebar (kiri), Header (atas), Content (tengah), Footer (bawah) */
.erp-grid {
  display: grid;
  grid-template-columns: 240px 1fr; /* Lebar sidebar tetap 240px */
  grid-template-rows: 48px 1fr 28px; /* Tinggi Header 48px, Footer 28px, sisanya konten */
  height: 100vh;
}

/* SIDEBAR: Posisi di kolom pertama dan mencakup semua baris */
.erp-sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background: #0f172a;
  display: flex;
  flex-direction: column;
}

/* HEADER: Bagian atas di sebelah kanan sidebar */
.erp-header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

/* CONTENT: Area kerja utama tempat tabel dan form muncul */
.erp-content {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  overflow: auto; /* Memungkinkan scroll jika konten panjang */
  background: white;
}

/* FOOTER: Bagian paling bawah untuk informasi status atau copyright */
.erp-footer {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  background: white;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 10px;
  color: #94a3b8;
}

/* TITAN GRID: Styling tabel utama agar rapat dan profesional */
.tabel-titan {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed; /* Menstabilkan lebar kolom saat data dimuat */
  width: max-content;
  min-width: 100%;
}

/* Mengatur agar teks di dalam tabel tidak turun ke bawah dan dipotong dengan titik-titik jika kepanjangan */
.tabel-titan th,
.tabel-titan td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header Tabel: Tetap terlihat saat di-scroll (Sticky) */
.tabel-titan thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f5f7f8;
  border-bottom: 2px solid #e2e8f0;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  text-align: left;
}

/* Sel Tabel: Padding rapat untuk kepadatan data tinggi */
.tabel-titan tbody td {
  padding: 4px 10px !important;
  font-size: 12px;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.2;
}

/* Efek Zebra (Belang-belang) untuk baris genap agar mudah dibaca */
.tabel-titan tbody tr:nth-child(even) {
  background-color: #f2f4f6; /* Warna Slate-50 yang sangat lembut */
}

/* Efek highlight saat baris tabel dilewati mouse (Ditingkatkan) */
.tabel-titan tbody tr:hover {
  background-color: #e0e4ea !important; /* Warna Slate-200 agar kontras dengan zebra */
}

/* Efek saat baris di-centang (Selected Row) - Menang mutlak melawan Zebra! */
.tabel-titan tbody tr.bg-blue-50,
.tabel-titan tbody tr.bg-blue-100,
.tabel-titan tbody tr.bg-indigo-50,
.tabel-titan tbody tr.selected-row {
  background-color: #dbeafe !important; /* Biru terang khas Tailwind (blue-50) */
}

/* Efek hover khusus untuk baris yang sedang di-centang (Agar tetap interaktif) */
.tabel-titan tbody tr.bg-blue-50:hover,
.tabel-titan tbody tr.bg-blue-100:hover,
.tabel-titan tbody tr.bg-indigo-50:hover,
.tabel-titan tbody tr.selected-row:hover {
  background-color: #c0dafb !important; /* Biru yang sedikit lebih gelap (blue-100) saat mouse lewat */
}

/* RESIZER: Area sensitif di pinggir kolom untuk menarik/mengubah lebar kolom */
.resizer-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  z-index: 30;
}

/* Highlight resizer saat disentuh mouse */
.resizer-handle:hover {
  background-color: #3b82f6;
}

/* Garis pembatas visual antar kolom saat fitur resize aktif */
.cursor-col-resize {
  border-right: 2px solid transparent;
  transition: border-color 0.2s;
}

/* Menampilkan pembatas saat header tabel di-hover */
th:hover .cursor-col-resize {
  border-right: 2px solid #e2e8f0;
}

/* Warna biru terang saat proses penarikan kolom sedang berlangsung */
.cursor-col-resize:hover {
  border-right: 2px solid #3b82f6 !important;
}

/* TOOLBAR: Wadah tombol aksi (Add, Export, Search) di atas grid */
.toolbar-grid {
  background: #fff;
  padding: 8px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Input pencarian global di area grid */
.search-input-grid {
  width: 100%;
  font-size: 10px;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-top: 4px;
}

/* Styling tombol-tombol ikonik di atas grid */
.btn-icon-grid {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  background: white;
  cursor: pointer;
}

/* Efek hover tombol ikon grid */
.btn-icon-grid:hover {
  background: #f1f5f9;
}

/* INPUT TABLE: Digunakan untuk inputan dinamis yang muncul langsung di sel tabel */
.input-table {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  outline: none;
  width: 100%;
}

/* CUSTOM SCROLLBAR: Mempercantik tampilan scroll agar serasi dengan tema sistem */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Container Label: Mengatur jarak antara label teks dengan divider atau elemen di atasnya */
.titan-label-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

/* Label Input: Teks kecil, tebal, dan kapital untuk identitas inputan */
.titan-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 0px !important; /* Memaksa jarak bawah hilang agar nempel ke input */
}

/* Divider: Menciptakan pemisah visual berupa dua garis putus-putus antar kategori data */
.titan-divider {
  width: 100%;
  height: 3px;
  border-top: 1px dashed #cbd5e1;
  border-bottom: 1px dashed #cbd5e1;
  margin-bottom: 6px;
  opacity: 0.7;
}

/* FORM INPUT CUSTOM: Gaya dasar kotak input (TEXT, DATE, dll) agar ramping dan pro */
.form-input-custom {
  padding: 0.25rem 0.5rem;
  height: 26px; /* Tinggi sangat ringkas untuk kepadatan data */
  font-size: 11px;
  border-radius: 2px;
  border: 1px solid #d1d5db;
  width: 100%;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.1s;
}

/* Override Tailwind: Menghapus style besar yang mungkin menempel lewat @apply */
.form-input-custom {
  @apply w-full bg-white border border-slate-300 py-1 px-2 rounded-[2px] text-[11px] font-semibold text-slate-700 outline-none transition-all shadow-none;
}

/* Efek saat input mendapatkan fokus */
.form-input-custom:focus {
  border-color: #3b82f6;
  background-color: #f0f7ff;
}

/* Scrollbar khusus untuk area form */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

/* GRID FORM: Memperkecil celah antar grid di dalam form */
.grid-cols-4 {
  gap: 0.5rem 0.75rem !important; /* Jarak antar kolom dipersempit */
}

/* Menyesuaikan padding area konten utama form */
.p-6 {
  padding: 1rem 1.5rem !important;
}

/* CONTAINER FORM: Latar belakang seluruh area pembuatan data baru */
.form-titan-container {
  background-color: #f1f5f9;
  min-height: 100vh;
  padding: 1rem !important;
  display: flex;
  flex-direction: column;
}

/* CARD FORM: Kotak utama pembungkus seluruh inputan form */
.form-titan-card {
  max-width: 72rem;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid #989ea7;
}

/* HEADER FORM: Judul form dengan skema warna gelap */
.form-titan-header {
  padding: 0.75rem 1.5rem;
  background-color: #0f172a;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Tipografi judul form */
.form-titan-header h2 {
  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

/* Kerapatan scrollbar form */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}

/* POPUP WRAPPER: Menampung input ID dan tombol pencarian (Kaca Pembesar) */
.titan-popup-wrapper {
  display: flex;
  gap: 0px; /* Menghilangkan celah agar tombol dan input terlihat menyatu */
  align-items: center;
  width: 100%;
  height: 26px;
}

/* Tombol Kaca Pembesar Popup */
.titan-popup-wrapper button {
  height: 26px;
  width: 28px;
  border-radius: 0 2px 2px 0;
  font-size: 10px;
  background-color: #2563eb;
  color: white;
  border: none;
}

/* Area tampilan ID yang terpilih dari popup */
.titan-popup-display {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 2px 0 0 2px;
  background-color: #ffffff;
  height: 26px;
  padding: 0 0.5rem;
}

/* FILE UPLOAD: Styling container untuk inputan file */
.titan-file-upload {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2px 6px;
  background-color: #ffffff;
  border-radius: 2px;
  border: 1px solid #cbd5e1;
  height: 26px;
}

/* FOOTER FORM: Area tombol Save dan Discard */
.form-titan-footer {
  padding: 0.75rem 1.5rem;
  background-color: #f8fafc;
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Tombol aksi utama (Save) */
.btn-titan-primary {
  padding: 0.5rem 1.5rem;
  background-color: #2563eb;
  color: white;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  border: none;
  cursor: pointer;
}

/* Tombol aksi batal (Discard) */
.btn-titan-secondary {
  padding: 0.5rem 1.5rem;
  color: #64748b;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  background: none;
  border: none;
  cursor: pointer;
}

/* ============================================================
   KEMBALIKAN EFEK INTERAKTIF BUTTON (HOVER & ACTIVE)
   ============================================================ */

/* 1. Tombol Save (Primary) */
.btn-titan-primary {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.btn-titan-primary:hover {
  background-color: #1d4ed8 !important; /* Biru lebih gelap saat hover */
  transform: translateY(-1px) !important; /* Sedikit naik ke atas */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.btn-titan-primary:active {
  transform: translateY(0px) !important; /* Turun kembali saat diklik */
  filter: brightness(0.9) !important;
}

/* 2. Tombol Discard (Secondary) */
.btn-titan-secondary {
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  background: transparent !important;
}

.btn-titan-secondary:hover {
  color: #ef4444 !important; /* Berubah merah saat hover */
  background-color: #fef2f2 !important; /* Background merah sangat muda */
}

.btn-titan-secondary:active {
  background-color: #fee2e2 !important;
}

/* 3. Tombol BACK di Header */
button[\@click="goBack()"],
.form-titan-header button {
  transition: all 0.2s ease !important;
}

.form-titan-header button:hover {
  background-color: #ef4444 !important; /* Header back jadi merah */
  transform: scale(1.05) !important;
}

/* Styling toolbar Editor (Textarea Plus) */
.ql-toolbar.ql-snow {
  border: none !important;
  background-color: #f8fafc !important;
  padding: 2px !important;
}

/* Editor (Teks di dalam Textarea Plus) */
.ql-editor {
  min-height: 120px !important;
  padding: 8px !important;
  font-size: 11px !important;
}

/* SECTION HEADER: Pengelompokan data berdasarkan kategori dari database */
.form-section-header {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Judul kelompok data */
.form-section-header h3 {
  font-size: 13px;
  font-weight: 900;
  color: #1e40af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Garis pembatas antar kelompok data */
.section-divider {
  width: 100%;
  height: 3px;
  border-top: 1px dashed #717b86;
  border-bottom: 1px dashed #717b86;
  opacity: 0.8;
}

/* 1. MENGHILANGKAN JARAK LABEL (FORCE STICKY) */
/* Menargetkan container kolom agar label dan input tidak punya jarak sama sekali */
.flex.flex-col.space-y-1\.5 {
  gap: 0px !important;
}

.flex.flex-col.space-y-1\.5 > label {
  margin-bottom: 0px !important;
  padding-bottom: 1px !important; /* Jarak mikro agar tidak overlap */
  line-height: 1 !important;
}

/* Kita hapus paksaan .flex-col global agar tidak merusak halaman Login */
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0px !important; /* Menghapus margin-top otomatis dari Tailwind HANYA di form ERP */
}

/* Container khusus untuk Radio, Checkbox, dan Color agar tinggi seragam 26px */
.titan-input-container-compact {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  padding: 0px 6px;
  height: 26px;
}

/* Container Editor Teks */
.titan-editor-container {
  margin-bottom: 0.5rem !important;
}

/* Perataan kanan untuk angka mata uang agar mudah dibaca */
.form-input-currency {
  text-align: right;
  font-family: "Inter", monospace;
}

/* SPESIFIK: Mengatur container elemen yang kamu tanyakan agar ramping dan putih */
div.flex.items-center.gap-3.p-3.bg-slate-50,
div.flex.flex-wrap.gap-4.p-3.bg-slate-50 {
  padding: 0px 8px !important;
  height: 26px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 2px !important;
  min-height: 26px !important;
  gap: 10px !important; /* Jarak antar item di dalam (misal antar radio button) */
}

/* Menyesuaikan label di dalam container kompak tersebut */
div.flex.items-center.gap-3.p-3.bg-slate-50 .uppercase,
div.flex.flex-wrap.gap-4.p-3.bg-slate-50 label {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* 2. STYLE KOTAK PER GRUP (SECTION CARD) */
/* Pastikan di dalam flex-col (label & input) tidak ada jarak sama sekali (Dibatasi hanya di area form!) */
.group-wrapper .flex.flex-col {
  gap: 0px !important;
}

/* Kotak Pembungkus Grup */
.group-wrapper {
  border: 2px solid #666b70 !important;
  background-color: #ffffff !important;
  padding: 15px !important;
  gap: 0.5rem 0.75rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Judul Grup yang nempel di garis atas kotak (Fieldset Style) */
.group-title {
  position: absolute;
  top: -10px;
  left: 12px;
  background: white;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 900;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Memastikan Input tidak punya margin atas */
.form-input-custom {
  margin-top: 0px !important;
}

/* ============================================================
   FORCE LABEL STICKY (MEMAKSA LABEL NEMPEL)
   ============================================================ */

/* Menghilangkan semua jarak antar elemen di dalam container input */
.flex.flex-col.col-span-1,
.flex.flex-col.col-span-2,
.flex.flex-col.col-span-3,
.flex.flex-col.col-span-4 {
  gap: 0px !important;
}

/* Mematikan margin otomatis Tailwind pada elemen setelah label */
.titan-label + div,
.titan-label + input,
.titan-label + select,
.titan-label + textarea {
  margin-top: 0px !important;
}

/* Khusus untuk pembungkus ikon (EMAIL, PHONE, WEBSITE) dan POPUP */
.titan-label + .relative,
.titan-label + .titan-popup-wrapper,
.titan-label + .titan-input-container-compact,
.titan-label + .titan-editor-container,
.titan-label + .titan-file-upload {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

/* Merapatkan teks label sedikit lebih bawah agar nempel garis input */
.titan-label {
  margin-bottom: 0px !important;
  padding-bottom: 1px !important;
  line-height: 1.2 !important;
}

/* Koreksi tinggi untuk container yang berisi ikon (PHONE, EMAIL, WEBSITE) */
.relative > span.absolute {
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 14px !important; /* Menyesuaikan tinggi ikon dengan input 26px */
  display: flex;
  align-items: center;
}

/* ============================================================
   TITAN POPUP MODAL (HIGH DENSITY)
   ============================================================ */

/* Animasi muncul (Fade In) */
.animate-in {
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-fill-mode: both;
}

@keyframes zoom-in-95 {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoom-in-95 {
  animation-name: zoom-in-95;
}

/* Memastikan letak popup tetap di atas (items-start + pt-10vh) 
   agar bagian bawah yang bertambah/berkurang saat filter */
.fixed.inset-0.flex.items-start {
  align-items: flex-start !important;
}

/* Merapatkan baris tabel popup */
tbody tr td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1 !important;
}

/* Garis pemisah antar data yang sangat tipis */
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px !important;
  border-color: #f1f5f9 !important;
}

/* Menghilangkan scrollbar horizontal di popup jika tidak perlu */
.overflow-y-auto {
  scrollbar-gutter: stable; /* Mencegah layout bergeser saat scroll muncul */
}

/* Efek Hover baris yang lebih berkelas */
tbody tr:hover td {
  color: #1e40af !important; /* Warna biru saat di-hover */
}

/* Style Action Button yang Rapat */
button.bg-slate-100 {
  border: 1px solid #e2e8f0;
}

/* Untuk Dashboard */
@keyframes waving-hand {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.animate-waving-hand {
  animation: waving-hand 2.5s infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

/* =========================================================
   🌙 THE MAGIC DARK MODE ENGINE (JALAN PINTAS ENTERPRISE)
   Mantra CSS ini akan membajak warna terang Tailwind 
   menjadi mode gelap saat saklar dinyalakan.
   ========================================================= */

/* 🚧 KAPTEN NOTE: BAGIAN 1 - 4 DIBEKUKAN (COMMENTED OUT) 🚧
   Tujuannya agar layar konten utama, kotak putih, teks data, dan garis 
   TIDAK ikut berubah menjadi gelap/putih. Biarkan area konten tetap terang! */

/* --- MULAI AREA YANG DIBEKUKAN ---

/* 1. KANVAS UTAMA & BACKGROUND (Latar Belakang Dasar) */
html.dark body, 
html.dark .erp-content, 
html.dark .grid-container { 
  background-color: #aeb4c4 !important; 
}


/* 2. WARNA KARTU & PANEL (Background Elemen) */
html.dark .bg-white { background-color: #d9dde5 !important; }
html.dark .bg-slate-50 { background-color: #dde0e8 !important; }
html.dark .bg-slate-100 { background-color: #a9b2c1 !important; }
html.dark .bg-slate-200 { background-color: #b4bdc9 !important; }


/* 3. WARNA TEKS (Tipografi)
   (Penting dibekukan agar teks di area konten tidak berubah jadi putih dan hilang di background terang)
html.dark .text-slate-800, 
html.dark .text-slate-700 { color: #f8fafc !important; }
html.dark .text-slate-600, 
html.dark .text-slate-500 { color: #cbd5e1 !important; }
html.dark .text-slate-400 { color: #94a3b8 !important; }*/


/* 4. WARNA GARIS (Borders)
html.dark .border-slate-100, 
html.dark .border-slate-200, 
html.dark .border-slate-300 { border-color: #334155 !important; }*/


/* --- AKHIR AREA YANG DIBEKUKAN --- */


/* =========================================================
   ✅ AREA YANG TETAP AKTIF (HEADER, FOOTER, MENU KIRI)
   ========================================================= */
/* 5. HEADER & FOOTER UTAMA
   Modifikasi spesifik untuk atap dan lantai Dashboard agar menjadi gelap */
html.dark .erp-header { 
  /* Kita ganti 'background-color' menjadi 'background' agar menimpa gradasi inline di HTML */
  background: #1e293b !important; 
  border-bottom-color: #334155 !important; 
}

html.dark .erp-footer { 
  /* SAMA DI SINI: Gunakan 'background' untuk menghapus gradasi perak saat dark mode */
  background: #1e293b !important; 
  border-top-color: #334155 !important; 
}

/* Sidebar (Menu Kiri) */
html.dark .erp-sidebar { 
  /* SAMA DI SINI: Gunakan 'background' agar gradasi menu kiri juga hilang saat dark mode */
  background: #1e293b !important; 
  border-right-color: #334155 !important; 
}

/* =========================================================
   📁 KOSMETIK ICON FOLDER (SIDEBAR MENU)
   Membuat folder terlihat jelas tapi tetap kalem dan elegan
   ========================================================= */

/* 1. Folder Tertutup (Light Mode) - Abu-abu kebiruan kalem */
.erp-sidebar i.fa-folder {
  color: #64748b !important; /* Warna Slate-500 */
  opacity: 0.85 !important;   /* Muncul, tapi tidak terlalu tajam */
}

/* 2. Folder Terbuka (Light Mode) - Sedikit biru/indigo agar user tahu ini sedang aktif */
.erp-sidebar i.fa-folder-open {
  color: #6366f1 !important; /* Warna Soft Indigo-500 */
  opacity: 0.9 !important;
}

/* --- Penyesuaian Otomatis Saat Saklar Bulan 🌙 (Dark Mode) Ditekan --- */

/* Folder Tertutup (Dark Mode) */
html.dark .erp-sidebar i.fa-folder {
  color: #94a3b8 !important; /* Slate-400 (Lebih terang dikit agar kontras) */
  opacity: 0.85 !important;
}

/* Folder Terbuka (Dark Mode) */
html.dark .erp-sidebar i.fa-folder-open {
  color: #818cf8 !important; /* Soft Indigo-400 */
  opacity: 0.95 !important;
}

/* Saat Dark Mode tetap serahkan ke warna indigo yang Kapten suka */
html.dark .erp-sidebar i.fa-folder, html.dark .erp-sidebar i.fa-folder-open {
  color: #818cf8 !important; /* Indigo-400 */
}


/* 🚧 KAPTEN NOTE: BAGIAN 6 - 9 DIBEKUKAN (COMMENTED OUT) 🚧
   Mencegah area input, form, grid/tabel ikut berubah warna saat saklar ditekan */

/*
--- MULAI AREA YANG DIBEKUKAN ---

/* 6. AREA INPUT FORM (TextBox, Dropdown, Textarea)
html.dark input:not([type="color"]):not([type="radio"]):not([type="checkbox"]), 
html.dark select, 
html.dark textarea { 
  background-color: #0f172a !important; 
  color: #f8fafc !important; 
  border-color: #475569 !important; 
}
html.dark input::placeholder, 
html.dark textarea::placeholder { color: #64748b !important; }*/


/* 7. AREA TABEL (Grid Data)
html.dark th { 
  background-color: #334155 !important; 
  color: #f8fafc !important; 
  border-color: #475569 !important; 
}*/
/*html.dark td { 
  border-color: #334155 !important; 
  color: #e2e8f0 !important; 
}*/


/* 8. EFEK HOVER (Sorotan Mouse)
html.dark .hover\:bg-blue-50:hover,
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }*/


/* 9. BAYANGAN (Shadows)
html.dark .shadow-sm, 
html.dark .shadow-md, 
html.dark .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; }*/


/* --- AKHIR AREA YANG DIBEKUKAN --- */