/* =========================================================
   DATA_PROJECT.CSS - Complete Styling
   FINAL AUDIT, AUTO INDENT FOLDER
   ========================================================= */

* { box-sizing: border-box; }

html, body {
  height: 100%; /* Penting untuk layout full height */
  margin: 0;
  padding: 0;
  overflow-y: auto; /* IZINKAN SCROLL VERTIKAL PADA BODY */
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.6;
  display: flex; /* Menggunakan flexbox untuk layout utama */
  flex-direction: column; /* Susun item secara vertikal */
}

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
  flex-grow: 1; /* Biarkan container mengisi ruang yang tersedia */
  display: flex; /* Menggunakan flexbox di dalam container */
  flex-direction: column; /* Susun item secara vertikal */
  height: 100%; /* PENTING: Pastikan container mengambil tinggi penuh dari body */
}

/* --- HEADER STYLES --- */
/* Target elemen <header> dengan kelas .navbar untuk spesifisitas tinggi */
header.navbar {
    background-color: #002D62 !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1000 !important;
    padding: 10px 0 !important;
    
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    border-bottom: none !important;
}

/* Target container di dalam navbar dengan selektor yang SANGAT spesifik */
header.navbar > .nav-container { /* Selektor ini menargetkan anak langsung dari header.navbar */
    max-width: 1850px !important;
    width: 100% !important; /* INI KUNCI UNTUK MEMBUATNYA TERSEBAR */
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Logo kiri, navigasi kanan */
    align-items: center !important;
    flex-wrap: nowrap !important;

    background-color: transparent !important;
    box-sizing: border-box !important;
    /* HAPUS INI: border: 3px dashed blue !important; */ /* Debugging border dihapus */
}

/* Target logo wrapper untuk menghilangkan kotak putih */
.logo-wrapper {
    background-color: white !important; /* Mengubah background menjadi putih */
    padding: 5px 10px !important; /* Menambah padding di sekitar logo */
    border-radius: 6px !important; /* Menambahkan sedikit sudut membulat */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Menambah sedikit bayangan */
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Gaya untuk gambar logo */
.logo-img {
    height: 40px !important;
    width: auto !important;
    margin-right: 0 !important;
}

/* Gaya untuk teks di dalam logo wrapper (span) */
.logo-wrapper span { /* TARGET SPAN SECARA LANGSUNG */
    font-size: 1.5em !important;
    font-weight: bold !important;
    color: #333 !important; /* Mengubah warna teks menjadi hitam/gelap */
    line-height: normal !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Navigasi */
nav {
    display: flex !important;
    flex-direction: row !important;
    flex-grow: 1 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

nav a {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
    font-size: 1rem !important;
}

nav a:hover {
    background-color: rgba(255,255,255,0.2) !important;
    color: #007bff !important;
}

nav a.active {
    background-color: #ffffff !important;
    color: #002147 !important;
    font-weight: bold !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
/* --- END HEADER STYLES --- */

.main-footer {
  background-color: #002b5c;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  border-top: 3px solid #00cc66;
  flex-shrink: 0; /* Pastikan footer tidak menyusut */
  width: 100%; /* Pastikan footer mengambil lebar penuh */
}
.footer-left, .footer-right { font-weight: bold; }
.footer-bottom { flex-grow: 1; text-align: center; font-size: 12px; color: #ccc; }

section {
    flex-grow: 1; /* Make section grow to fill available space in .container */
    display: flex; /* Make section a flex container */
    flex-direction: column; /* Stack its children vertically */
    height: 100%; /* Ensure it takes full height */
}

.grid-2col {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 20px;
  margin-top: 20px;
  flex-grow: 1; /* Biarkan grid mengisi ruang vertikal yang tersedia di .container */
  height: 100%; /* PENTING: Pastikan grid mengambil tinggi penuh dari container */
}
@media screen and (max-width: 968px) { .grid-2col { grid-template-columns: 1fr; } }

/* tree-wrapper dan preview-wrapper akan mengambil tinggi penuh dari grid cell mereka */
.tree-wrapper, .preview-wrapper, .file-list-wrapper {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-height: 0; /* PENTING: Memungkinkan flex item ini menyusut */
    display: flex; /* Menggunakan flexbox untuk konten internal */
    flex-direction: column; /* Susun item secara vertikal */
    overflow: hidden; /* Biarkan ini tetap ada untuk mengelola scroll internal */
    position: relative;
    width: 100%;
    height: 100%; /* PENTING: Pastikan ini mengambil tinggi penuh dari sel grid */
}

/* Scrollbar styling for tree-wrapper (tetap) */
.tree-wrapper::-webkit-scrollbar, .preview-wrapper::-webkit-scrollbar, .file-list-wrapper::-webkit-scrollbar { width: 8px; }
.tree-wrapper::-webkit-scrollbar-track, .preview-wrapper::-webkit-scrollbar-track, .file-list-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.tree-wrapper::-webkit-scrollbar-thumb, .preview-wrapper::-webkit-scrollbar-thumb, .file-list-wrapper::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
.tree-wrapper::-webkit-scrollbar-thumb:hover, .preview-wrapper::-webkit-scrollbar-thumb:hover, .file-list-wrapper::-webkit-scrollbar-thumb:hover { background: #555; }

/* =================== FOLDER TREE: AUTO INDENT =================== */
.folder-tree {
  list-style: none;
  padding: 0; /* Pastikan tidak ada padding di UL root */
  margin: 0;
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  font-size: 0.9em;
}

.folder-tree ul {
  list-style: none;
  padding: 0; /* Hapus padding di sub-UL, indentasi akan di LI */
  margin: 0;
  transition: all 0.3s ease;
}
.folder-tree ul.hidden { display: none; }

.folder-tree li {
  display: block; /* PENTING: Mengatur LI agar menempati baris penuh secara vertikal */
  padding: 0; /* Padding LI akan diatur oleh .folder-label-clickable atau .file-item */
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  user-select: none;
  line-height: 1.2;
  position: relative; /* Diperlukan untuk pseudo-element garis */
}

/* Indentasi visual untuk setiap level LI */
/* Setiap LI akan memiliki padding-left, kecuali LI paling atas */
.folder-tree li {
    padding-left: 20px; /* Indentasi dasar untuk setiap LI */
}
/* Hilangkan indentasi untuk LI paling atas (Project Document) */
.folder-tree > li {
    padding-left: 0;
}


/* Styling untuk label folder yang bisa diklik (ada di dalam LI) */
.folder-label-clickable {
    cursor: pointer;
    display: flex; /* Menggunakan flexbox untuk ikon dan teks di dalam label */
    align-items: center;
    gap: 5px; /* Jarak antara ikon dan teks */
    padding: 5px 12px; /* Padding di dalam area yang bisa diklik/dipilih */
    /* background-color: #eef; */ /* Background default untuk folder */
    /* color: #333 !important; <-- Ini akan diatur oleh aturan yang lebih spesifik di bawah */
}

/* Styling untuk file item (ini adalah LI itu sendiri, tapi kontennya flex) */
.file-item {
    display: flex; /* Agar ikon dan teks sejajar */
    align-items: center;
    gap: 5px;
    padding: 5px 12px; /* Padding di dalam area yang bisa diklik/dipilih */
    background-color: #fafafa;
    /* color: #333 !important; <-- Ini dihapus, warna akan diatur pada .item-name dan .item-icon */
    font-weight: 400;
}

/* DIUBAH: Garis horizontal di bawah "Project Document" (asumsi itu adalah item li tingkat atas pertama) */
.folder-tree > li:first-child > .folder-label-clickable { /* Targetkan span di dalam LI pertama */
  border-bottom: 2px solid #bbb; /* DIUBAH: Warna lebih gelap dan tebal */
  padding-bottom: 5px; /* Memberi sedikit ruang di bawah garis */
  margin-bottom: 5px; /* Memberi sedikit ruang di bawah garis */
}

/* The existing .folder-tree li[style] might interfere, let's keep it for now */
.folder-tree li[style] { margin-left: 0 !important; }

/* Hover dan Active states */
.folder-toggle:hover > .folder-label-clickable { /* Hover pada LI, efek pada label */
    background-color: #dde;
}
.folder-toggle.active > .folder-label-clickable,
.folder-toggle.active-folder > .folder-label-clickable {
    background-color: #cce5ff;
    box-shadow: inset 0 0 0 2px #3399ff;
    /* color: #003399; <-- Ini akan diatur oleh aturan yang lebih spesifik di bawah */
}

.file-item:hover {
    background-color: #f0f8ff;
    /* color: #0066cc !important; <-- Ini akan diatur oleh aturan yang lebih spesifik di bawah */
}
.file-item.active, .file-item.active-file {
    background-color: #e3f2fd;
    border-left: 3px solid #0066cc;
    font-weight: 600;
    /* color: #0066cc; <-- Ini akan diatur oleh aturan yang lebih spesifik di bawah */
}

/* --- STYLING PILIHAN (BARU) --- */

/* Pastikan elemen LI yang dipilih tidak memiliki latar belakang blok */
.tree-wrapper li.selected {
    background-color: transparent !important; /* Penting: Hapus latar belakang blok abu-abu */
    /* Pastikan tidak ada perubahan padding/margin yang akan membuat blok */
}

/* Tambahan: Pastikan juga elemen label di dalam folder yang terpilih tidak memiliki latar belakang */
.tree-wrapper li.folder-toggle.selected > .folder-label-clickable {
    background-color: transparent !important;
}

/* Tambahan: Pastikan juga elemen file item yang terpilih tidak memiliki latar belakang */
.tree-wrapper li.file-item.selected {
    background-color: transparent !important;
}

/* Terapkan tebal dan biru tua ke konten teks di dalam LI yang dipilih */
/* Untuk folder: target span .folder-label-clickable dan anak-anaknya */
.tree-wrapper li.folder-toggle.selected > .folder-label-clickable,
.tree-wrapper li.folder-toggle.selected > .folder-label-clickable .folder-icon {
    font-weight: bold;
    color: #007bff !important; /* DIUBAH: Warna biru standar */
}

/* Pastikan bahwa bidang input untuk pengeditan inline tidak mewarisi tebal/warna */
.tree-wrapper .inline-edit-input {
    font-weight: normal; /* Reset font-weight */
    color: initial; /* Reset color */
}

/* Pastikan hover tidak menimpa selected jika selected juga memiliki latar belakang.
   Karena kita menginginkan latar belakang transparan untuk selected, ini tidak terlalu masalah,
   tetapi baik untuk eksplisit jika hover juga memiliki perubahan warna teks. */
.tree-wrapper li.selected:hover {
    background-color: transparent; /* Pertahankan latar belakang transparan bahkan saat hover jika dipilih */
}

/* Garis vertikal untuk menunjukkan hierarki */
/* Garis vertikal untuk semua LI kecuali LI paling atas (root) */
.folder-tree li:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 10px; /* Setengah dari padding-left LI */
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #ccc;
    z-index: 0;
}

/* Garis horizontal untuk folder */
.folder-tree li.folder-toggle::after {
    content: '';
    position: absolute;
    left: 10px; /* Sejajar dengan garis vertikal */
    top: 15px; /* Sesuaikan agar sejajar dengan tengah label */
    width: 10px; /* Panjang garis horizontal */
    height: 1px;
    background-color: #ccc;
    z-index: 0;
}

/* Garis horizontal untuk file */
.folder-tree li.file-item::after {
    content: '';
    position: absolute;
    left: 10px; /* Sejajar dengan garis vertikal */
    top: 15px; /* Sesuaikan agar sejajar dengan tengah label */
    width: 10px; /* Panjang garis horizontal */
    height: 1px;
    background-color: #ccc;
    z-index: 0;
}

/* Hilangkan garis untuk root item */
.folder-tree > li::before,
.folder-tree > li::after {
    display: none;
}

/* --- ATURAN KRUSIAL: Memastikan teks nama file dan ikon selalu terlihat --- */

/* Override any conflicting color for the parent LI itself, forcing it to inherit */
/* Ini menargetkan li.file-item dan li.file-item.selected untuk mengatasi beranda.css dan data_project.css:271 */
.tree-wrapper li.file-item,
.tree-wrapper li.file-item.selected {
    color: initial !important; /* Reset warna LI agar anak-anaknya bisa mengatur sendiri */
}


/* Default state: warna abu-abu gelap untuk nama file dan ikon */
.tree-wrapper .folder-tree li.file-item .item-name,
.tree-wrapper .folder-tree li.file-item .item-icon {
    color: #333 !important;
}

/* Hover state: warna biru saat di-hover untuk nama file dan ikon */
.tree-wrapper .folder-tree li.file-item:hover .item-name,
.tree-wrapper .folder-tree li.file-item:hover .item-icon {
    color: #0066cc !important;
}

/* Selected/Active state: warna biru tebal saat dipilih untuk nama file dan ikon */
.tree-wrapper li.file-item.selected .item-name,
.tree-wrapper li.file-item.active .item-name,
.tree-wrapper li.file-item.active-file .item-name,
.tree-wrapper li.file-item.selected .item-icon,
.tree-wrapper li.file-item.active .item-icon,
.tree-wrapper li.file-item.active-file .item-icon {
    font-weight: bold;
    color: #007bff !important; /* DIUBAH: Warna biru standar */
}

/* Default color for folder names and icons */
.tree-wrapper .folder-tree li.folder-toggle .folder-label-clickable,
.tree-wrapper .folder-tree li.folder-toggle .folder-label-clickable .folder-icon {
    color: #333 !important; /* Warna teks default untuk label folder dan ikon */
}

/* Warna teks saat item folder di-hover atau aktif */
.tree-wrapper .folder-tree li.folder-toggle:hover .folder-label-clickable,
.tree-wrapper .folder-tree li.folder-toggle.active .folder-label-clickable,
.tree-wrapper .folder-toggle.active-folder .folder-label-clickable {
    color: #003399 !important;
}
.tree-wrapper .folder-tree li.folder-toggle:hover .folder-label-clickable .folder-icon,
.tree-wrapper .folder-tree li.folder-toggle.active .folder-label-clickable .folder-icon,
.tree-wrapper .folder-toggle.active-folder .folder-label-clickable .folder-icon {
    color: #003399 !important;
}

/* --- END ATURAN KRUSIAL --- */



/* For the inline edit input, ensure it's styled correctly */
.inline-edit-input {
    border: 1px solid #0066cc;
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 0.95em;
    margin-left: 5px; /* Adjust spacing from icon */
    flex-grow: 1; /* Allow input to grow */
    width: auto; /* Allow it to take natural width */
}
/* =================== END FOLDER TREE AUTO INDENT =================== */


/* --- NEW TAB STYLING --- */
.tab-headers-container {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px; /* Space between tab headers and content */
    overflow-x: auto; /* Allow horizontal scrolling if many tabs */
    white-space: nowrap; /* Prevent tab buttons from wrapping */
    padding-bottom: 2px; /* Small space for border-bottom */
    flex-shrink: 0; /* Ensure tab headers don't shrink */
    /* Gaya scrollbar untuk tab-headers-container */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1; /* Firefox */
}

.tab-headers-container::-webkit-scrollbar {
    height: 8px; /* Tinggi scrollbar horizontal */
}

.tab-headers-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna track scrollbar */
    border-radius: 4px;
}

.tab-headers-container::-webkit-scrollbar-thumb {
    background: #888; /* Warna thumb scrollbar */
    border-radius: 4px;
}

.tab-headers-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Warna thumb scrollbar saat hover */
}


.tab-button {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #f0f0f0;
    margin-right: 2px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex; /* For close button alignment */
    align-items: center;
    gap: 5px; /* Space between tab name and close button */
    font-size: 0.9em;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0; /* Pastikan tombol tab tidak menyusut */
}
.tab-button:hover {
    background-color: #e9e9e9;
    color: #333;
}
.tab-button.active {
    background-color: #fff;
    border-color: #ccc;
    border-bottom-color: #fff; /* "Connect" to the content area */
    font-weight: bold;
    color: #0066cc;
}

.tab-close-button {
    background: none;
    border: none;
    color: #888;
    font-weight: bold;
    cursor: pointer;
    padding: 0 5px;
    font-size: 1em;
    line-height: 1; /* Ensure consistent height */
    transition: color 0.2s;
}
.tab-close-button:hover {
    color: #333;
}

.tab-contents-container {
    flex-grow: 1; /* Take up remaining vertical space in preview-wrapper */
    position: relative;
    /* padding-top: 5px; */ /* Dihapus, padding akan ditangani oleh .tab-content */

    /* PENTING: Jadikan ini flex container untuk mengelola tinggi anak-anaknya */
    display: flex;
    flex-direction: column;
    min-height: 0; /* PENTING: Memungkinkan flex item ini menyusut jika diperlukan */
    overflow: hidden; /* Anak-anaknya yang akan menangani scroll */
    height: 100%; /* RE-ADDED: Pastikan ini mengambil tinggi penuh dari preview-wrapper */
}

.tab-content {
    display: none; /* Hidden by default */
    font-size: 14px;
    /* Removed original background, padding, border, border-radius */

    /* PENTING: Ini akan membuat tab-content mengisi sisa ruang vertikal */
    flex-grow: 1;
    flex-shrink: 1;
    max-height: 550px; /* Adjusted as per user request */

    /* PENTING: Ini akan membuat scrollbar internal untuk tabel */
    overflow-y: auto; /* Scroll vertikal untuk baris tabel */
    overflow-x: auto; /* Scroll horizontal untuk tabel lebar */
    position: relative; /* Diperlukan untuk sticky header */

    min-width: 0; /* PENTING: Memungkinkan flex item ini menyusut jika kontennya terlalu lebar */
    min-height: 0; /* PENTING: Memungkinkan flex item ini menyusut jika kontennya terlalu tinggi */

    /* NEW: Styles for the scroll container appearance (Moved from .excel-preview-scroll-container) */
    border: 1px solid #dee2e6; /* Border di sekitar area scrollable */
    border-radius: 5px; /* Sudut membulat */
    background-color: #fff; /* Pastikan ada background agar konten tidak tembus */
    padding: 10px; /* Tambahkan padding di dalam container scroll */
    box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar/tinggi */
}
.tab-content.active {
    display: block; /* Show active tab content */
}

/* Styling for the initial message within tab-contents-container */
#initialExcelMessage {
    position: absolute; /* Position it correctly within the container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-style: italic;
    width: 80%; /* Prevent it from being too wide */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Memastikan teks panjang tidak meluber */
    text-overflow: clip; /* Tidak perlu elipsis jika word-wrap */
}
#initialExcelMessage.active {
    display: block;
}


/* --- END NEW TAB STYLING --- */


/* --- AUDITED: Styling untuk Tabel Excel (Menggunakan kelas baru: .preview-excel-table) --- */
.preview-excel-table {
    width: max-content; /* PENTING: Ini memaksa tabel untuk melebar sesuai kontennya */
    border-collapse: collapse;
    background: white; /* Ini akan menjadi background tabel itu sendiri */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */ /* Box shadow lebih baik di container luarnya */
    /* border-radius: 6px; */ /* Border radius lebih baik di container luarnya */
    margin-top: 0;
    font-size: 0.8em; /* Ukuran font dasar sedikit lebih kecil untuk tabel */
    position: static; /* Pastikan tidak ada positioning yang mengganggu sticky */
    transform: none;
    filter: none;
    perspective: none;
    will-change: auto;
}

/* --- PERUBAHAN PENTING DI SINI: position: sticky pada THEAD dan warna biru --- */
.preview-excel-table thead {
    position: sticky; /* Membuat seluruh thead tetap di atas */
    top: 0; /* Menempel ke bagian atas scroll container terdekat (yaitu .tab-content) */
    z-index: 10; /* Ditingkatkan untuk memastikan berada di atas konten lain */
    background: #007bff; /* Tambahkan background biru di thead agar tidak transparan saat sticky */
    transform: none;
    filter: none;
    perspective: none;
    will-change: auto;
}

.preview-excel-table thead th {
    padding: 8px 10px; /* Disesuaikan agar lebih ringkas */
    text-align: center; /* Pusatkan teks header */
    vertical-align: middle; /* Pusatkan secara vertikal */
    border: 1px solid #0056b3; /* Warna border yang lebih gelap untuk header */
    font-size: 12px; /* Ukuran font lebih kecil */
    color: white; /* Teks putih untuk kontras */
    font-weight: 600;
    white-space: nowrap; /* Pertahankan ini agar header tidak wrap */
    background-color: #007bff; /* Tambahkan background juga ke th untuk memastikan coverage penuh */
}

.preview-excel-table tbody td {
    padding: 6px 8px; /* Disesuaikan agar lebih ringkas */
    text-align: center; /* Pusatkan teks data */
    vertical-align: middle; /* Pusatkan secara vertikal */
    border: 1px solid #dee2e6; /* Warna border default Bootstrap */
    font-size: 12px; /* Ukuran font lebih kecil */
    white-space: nowrap; /* Pertahankan ini agar sel data tidak wrap */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* Batasi lebar maksimum sel (sedikit lebih kecil) */
    z-index: auto;
    position: static;
}

.preview-excel-table tr:nth-child(even) { background: #f9f9f9; }
.preview-excel-table tr:hover { background: #f0f8ff; }


/* =================== Elegant Notification Styles (Toast) =================== */
#elegantNotification {
    position: fixed;
    top: 80px; /* Posisi di atas, bukan di tengah */
    left: 50%;
    transform: translateX(-50%); /* Hanya geser horizontal untuk centering */
    z-index: 9999; /* Pastikan di atas elemen lain */
    padding: 12px 25px;
    border-radius: 8px; /* Konsisten dengan modal */
    background-color: #2ab2aa; /* Warna teal/turquoise default */
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Konsisten dengan modal */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
    font-family: inherit; /* Konsisten dengan body */
    font-size: 0.95em;
    max-width: 450px;
    text-align: center;
    white-space: normal; /* Izinkan teks melipat */
    word-wrap: break-word; /* Memastikan teks panjang tidak meluber */
    text-overflow: clip; /* Tidak perlu elipsis jika word-wrap */
}

#elegantNotification.show {
    opacity: 1;
    visibility: visible;
}

/* Gaya khusus untuk jenis notifikasi */
#elegantNotification.success { background-color: #28a745; }
#elegantNotification.error { background-color: #dc3545; }
#elegantNotification.warning { background-color: #ffc107; color: #333; } /* Teks gelap untuk kontras */
#elegantNotification.info { background-color: #17a2b8; } /* Biru muda untuk info */


/* =================== Confirmation Dialog Styles (Modal) =================== */
.confirmation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001; /* Higher than loadingOverlay to be on top */
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Fully transparent by default */
    transition: visibility 0.3s, opacity 0.3s; /* Smooth transition for showing/hiding */
}

.confirmation-overlay.show {
    visibility: visible;
    opacity: 1;
}

.confirmation-modal {
    background: white;
    border-radius: 10px; /* Rounded corners as in image */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Shadow as in image */
    padding: 30px;
    width: 90%;
    max-width: 450px; /* Max width to resemble image */
    text-align: center;
    font-family: inherit; /* Konsisten dengan body */
}

.confirmation-title {
    font-size: 1.5em;
    font-weight: bold;
    color: #002b5c; /* Dark blue from navbar */
    margin-top: 0;
    margin-bottom: 20px;
}

.confirmation-message {
    font-size: 1em;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.5;
}

.confirmation-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
}

.confirmation-buttons button {
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-weight: bold;
}

.confirmation-buttons .btn-primary {
    background-color: #007bff; /* Blue for OK */
    color: white;
}

.confirmation-buttons .btn-primary:hover {
    background-color: #0056b3;
}

.confirmation-buttons .btn-secondary {
    background-color: #6c757d; /* Grey for Batal */
    color: white;
}

.confirmation-buttons .btn-secondary:hover {
    background-color: #5a6268;
}
/* =================== END Confirmation Dialog Styles =================== */


/* =================== Loading Overlay Styles =================== */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Background gelap transparan */
    display: none; /* <--- INI SUDAH DIUBAH DARI 'flex' MENJADI 'none' */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Di bawah confirmationOverlay */
    font-family: inherit; /* Konsisten dengan body */
}

.loading-content {
    background: white; /* Latar belakang putih untuk kotak loading */
    border-radius: 10px; /* Konsisten dengan modal */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Konsisten dengan modal */
    padding: 30px 40px;
    text-align: center;
    color: #333; /* Warna teks di dalam kotak loading */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 300px;
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); /* Warna border spinner yang lebih halus */
    border-top: 4px solid #007bff; /* Warna spinner biru */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadingMessage {
    font-size: 1.1em;
    margin: 0;
}
/* =================== END Loading Overlay Styles =================== */


.loading { text-align: center; padding: 40px; font-size: 1.2rem; color: #666; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:0.5;} }

/* =================== Context Menu Styling (UPDATED FOR DYNAMIC MENU) =================== */
.context-menu-list {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    list-style: none;
    padding: 5px 0;
    margin: 0;
    z-index: 1000;
    min-width: 180px;
    font-family: inherit; /* Konsisten dengan body */
    font-size: 14px;
    display: none;
}

.context-menu-list li {
    padding: 10px 20px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s, color 0.2s;
}

.context-menu-list li:hover {
    background-color: #f0f8ff;
    color: #0066cc;
}

.context-menu-list li:active {
    background-color: #e3f2fd;
    color: #003399;
}
/* =================== END Context Menu Styling =================== */


/* =================== Modal Import Styling (DIHAPUS KARENA TIDAK DIGUNAKAN) =================== */
/* Bagian ini telah dihapus untuk menjaga kebersihan dan fokus CSS */


@media screen and (max-width: 768px) {
  .navbar-container, .main-footer { flex-direction: column; align-items: flex-start;}
  nav ul { flex-direction: column; gap: 10px; margin-top: 10px;}
  .logo-main { font-size: 20px;}
  .logo-desc { font-size: 12px;}
  .container { padding: 10px;}
  .folder-input { width: 100%;}
  .grid-2col { grid-template-columns: 1fr;}
  /* Di layar kecil, kita mungkin ingin preview-wrapper bisa discroll secara keseluruhan */
  .tree-wrapper, .preview-wrapper, .file-list-wrapper {
      max-height: none; /* Hapus batasan tinggi */
      overflow-y: visible; /* Biarkan konten mengalir */
      min-height: 0; /* Tetap pertahankan */
  }
  /* Untuk tab-content di layar kecil, berikan tinggi maksimal agar scrollbar muncul */
  .tab-content {
      max-height: 400px; /* Batasi tinggi agar scrollbar muncul */
      overflow: auto; /* Aktifkan scroll */
  }
}
/* Untuk kontainer explorer uploads */
.uploads-tree-container {
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    max-height: 400px; /* Batasi tinggi */
    overflow-y: auto; /* Tambahkan scroll jika konten lebih panjang */
    background-color: #fcfcfc;
}

.uploads-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.uploads-tree ul {
    list-style: none;
    padding-left: 20px; /* Indentasi untuk subfolder */
    margin: 0;
}

.uploads-tree li {
    line-height: 1.8;
    white-space: nowrap; /* Mencegah teks melompat ke baris baru */
    overflow: hidden;
    text-overflow: ellipsis; /* Tambahkan elipsis jika terlalu panjang */
}

.uploads-folder-toggle {
    cursor: pointer;
    font-weight: bold;
    color: #333;
    display: block; /* Agar seluruh area span bisa diklik */
    padding: 2px 0;
}

.uploads-folder-toggle:hover {
    background-color: #e9e9e9;
}

/* Gaya panah untuk folder toggle */
.uploads-folder-toggle::before {
    content: '▶'; /* Panah ke kanan */
    display: inline-block;
    margin-right: 5px;
    transition: transform 0.2s ease-in-out;
}

.uploads-folder-toggle + ul.hidden .uploads-folder-toggle::before {
    transform: rotate(0deg); /* Pastikan panah ke kanan saat folder tertutup */
}

.uploads-folder-toggle:not(.hidden)::before { /* Panah ke bawah saat folder terbuka */
    transform: rotate(90deg);
}

/* Gaya untuk item file yang bisa diimpor */
.uploads-tree li .import-item {
    display: flex;
    align-items: center;
    padding: 2px 0;
    cursor: pointer;
}

.uploads-tree li .import-item:hover {
    background-color: #e9e9e9;
}

.uploads-tree li .import-item input[type="checkbox"] {
    margin-right: 8px;
    margin-left: 2px; /* Sedikit indentasi untuk checkbox */
}

.uploads-tree li .import-item .item-icon {
    margin-right: 5px;
    font-size: 1em;
}

.uploads-tree li .import-item .item-name {
    flex-grow: 1;
    font-weight: normal;
}

.uploads-tree li .import-item .file-size {
    font-size: 0.8em;
    color: #777;
    margin-left: 10px;
}

/* Gaya untuk item file yang tidak bisa diimpor (misal: bukan Excel) */
.uploads-tree li .disabled-file {
    color: #aaa;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.uploads-tree li .disabled-file .item-icon {
    margin-right: 5px;
    font-size: 1em;
}

.uploads-tree li .disabled-file .item-name {
    flex-grow: 1;
    font-weight: normal;
}

.uploads-tree li .disabled-file .file-size {
    font-size: 0.8em;
    color: #bbb;
    margin-left: 10px;
}
/* --- FOOTER STYLES --- */
footer { /* Asumsi footer Anda menggunakan tag <footer> */
    background-color: #002D62; /* Biru gelap, cocok dengan header */
    color: white;
    text-align: right;
    padding: 3px 0; /* Padding vertikal untuk teks di dalam footer */
    margin-top: 20; /* Jarak antara konten dan footer */
    width: 100%; /* Memastikan footer membentang lebar penuh */
    flex-shrink: 0; /* Mencegah footer menyusut */
}
/* --- END FOOTER STYLES --- */