/* --- Styles for data_umum.php Layout --- */
.main-content-wrapper {
    display: flex;
    margin: 20px; /* Margin dari tepi utama browser */
    background-color: #fff; /* Latar belakang utama untuk seluruh area konten */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-height: calc(100vh - 200px); /* Sesuaikan tinggi agar mengisi viewport, mempertimbangkan header/footer */
    padding: 0; /* Hapus padding default agar sidebar/konten mengisi penuh */
    overflow: hidden; /* Pastikan konten tidak meluber dari border-radius */
}

/* Memberikan jarak (sela) antara sidebar dan konten */
.main-content-wrapper > .sidebar-container {
    margin-right: 15px; /* Sesuaikan nilai ini untuk jarak yang diinginkan */
}

.sidebar-container {
    width: 280px; /* Lebar sidebar */
    flex-shrink: 0; /* Pastikan sidebar tidak menyusut */
    background-color: #f8f9fa; /* Latar belakang sidebar, sedikit abu-abu */
    border-radius: 8px 0 0 8px; /* Sudut membulat hanya di sisi kiri */
    overflow-y: auto; /* Aktifkan scroll jika konten sidebar terlalu panjang */
    display: flex; /* Untuk menumpuk elemen secara vertikal */
    flex-direction: column;
    transition: width 0.3s ease, background-color 0.3s ease; /* Animasi lebar & warna latar sidebar */
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #fff; /* Latar belakang untuk header sidebar */
    border-radius: 8px 0 0 0; /* Sudut membulat kiri atas */
    position: sticky; /* Jaga header tetap terlihat saat konten sidebar di-scroll */
    top: 0;
    z-index: 10;
    transition: all 0.3s ease;
}

.sidebar-title {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

.sidebar-title i {
    margin-right: 10px;
    color: #007bff; /* Warna ikon */
}

.collapse-sidebar-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1em;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.collapse-sidebar-btn:hover {
    background-color: #e9ecef;
}

.sidebar-nav {
    padding-top: 10px;
    flex-grow: 1; /* Biarkan navigasi mengisi ruang yang tersedia */
}

.sidebar-section {
    margin-bottom: 5px; /* Jarak antar bagian */
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sidebar-section-header:hover {
    background-color: #e9ecef;
}

.sidebar-section-title {
    font-size: 0.95em;
    font-weight: bold;
    color: #333;
    flex-grow: 1;
    display: flex; /* Untuk menyelaraskan ikon jika ada */
    align-items: center;
}

.sidebar-section-title i {
    margin-left: 5px;
    font-size: 0.8em;
    color: #888;
    transition: transform 0.2s;
}

/* Rotate caret when section is open */
.sidebar-section.open .sidebar-section-title i {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Untuk efek collapsible, awalnya sembunyikan */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Tampilkan submenu saat section terbuka */
.sidebar-section.open .sidebar-submenu {
    max-height: 500px; /* Nilai arbitrer besar untuk menampilkan konten */
}

.sidebar-submenu li {
    position: relative; /* Untuk bar kuning */
}

.sidebar-submenu li a {
    display: block;
    padding: 8px 20px; /* Padding default */
    color: #555;
    font-size: 0.9em;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-submenu li a:hover {
    background-color: #f0f2f5;
    color: #007bff;
}

/* Item aktif di sidebar */
.sidebar-submenu li.active a {
    background-color: #e0e4eb; /* Latar belakang untuk item aktif */
    color: #007bff; /* Warna teks untuk item aktif */
    font-weight: 600;
}

/* Bar kuning untuk item aktif */
.sidebar-submenu li.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px; /* Lebar bar kuning */
    background-color: #FFD700; /* Warna kuning */
    border-radius: 0 3px 3px 0; /* Sudut membulat kanan */
}

/* Styling untuk item bersarang (seperti "Identitas Wajib Pajak" di gambar) */
.sidebar-submenu li.sidebar-sub-item a {
    padding-left: 40px; /* Indentasi untuk sub-item */
    position: relative;
}

.sidebar-submenu li.sidebar-sub-item a::before {
    content: '\2022'; /* Unicode untuk bullet point */
    color: #888; /* Warna abu-abu untuk bullet */
    font-size: 0.8em;
    position: absolute;
    left: 25px; /* Posisi bullet */
    top: 50%;
    transform: translateY(-50%);
}

.sidebar-submenu li.sidebar-sub-item.active a {
    color: #007bff; /* Warna teks aktif untuk sub-item */
}

.sidebar-submenu li.sidebar-sub-item.active::before {
    content: '\2022'; /* Tetap bullet */
    color: #007bff; /* Warna bullet aktif */
    background: none; /* Pastikan bar kuning tidak muncul di sub-item */
}


/* --- Collapsed Sidebar Styles --- */
.sidebar-container.collapsed {
    width: 80px; /* Lebar sidebar saat diciutkan, diperpanjang */
    background-color: #FFD700; /* Seluruh sidebar menjadi kuning */
    overflow: hidden; /* Sembunyikan konten yang melampaui lebar */
    padding-bottom: 0; /* Hapus padding bawah */
    justify-content: flex-start; /* Konten dimulai dari atas */
    align-items: center; /* Pusatkan secara horizontal */
}

.sidebar-container.collapsed .sidebar-header {
    background-color: #FFD700; /* Latar belakang kuning */
    height: 100px; /* Tinggi tetap untuk area header */
    padding: 0;
    border-bottom: none;
    position: relative; /* Crucial for absolute positioning of children */
    width: 100%; /* Ambil lebar penuh sidebar yang diciutkan */
    /* Menghapus flex properties dari sini karena elemen anak akan diposisikan absolut */
}

.sidebar-container.collapsed .sidebar-title {
    position: absolute; /* Posisikan blok title secara absolut */
    top: 5px; /* Sejajar dengan top tombol panah */
    left: 40px; /* Di sebelah kanan tombol panah (lebar tombol ~30px + 5px margin) */
    right: 5px; /* Beri batas kanan agar bisa di-align center */

    display: flex;
    flex-direction: column; /* Ikon di atas teks */
    align-items: center; /* Pusatkan ikon dan teks secara horizontal di dalam blok ini */
    justify-content: flex-start; /* Mulai dari atas blok ini */
    
    background-color: transparent; /* Hapus latar belakang biru */
    height: auto;
    width: auto;
}

.sidebar-container.collapsed .sidebar-title i {
    display: block; /* Tampilkan ikon user */
    margin-right: 0;
    color: #333; /* Warna ikon gelap agar kontras di kuning */
    font-size: 1.2em;
    margin-bottom: 5px; /* Jarak antara ikon dan teks */
}

.sidebar-container.collapsed .sidebar-title .sidebar-title-text {
    writing-mode: vertical-rl; /* Teks vertikal, kanan ke kiri */
    text-orientation: mixed; /* Orientasi karakter campuran */
    font-size: 0.8em; /* Ukuran font lebih kecil */
    font-weight: bold;
    color: #333; /* Warna teks gelap agar kontras di kuning */
    white-space: nowrap;
    position: static; /* Biarkan flexbox menanganinya */
    transform: none; /* Hapus transform individu pada teks */
}

.sidebar-container.collapsed .collapse-sidebar-btn {
    display: block; /* Pastikan tombol terlihat */
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: transparent; /* Transparan agar latar kuning terlihat */
    color: #333; /* Warna ikon gelap */
    box-shadow: none;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
}

.sidebar-container.collapsed .sidebar-nav {
    flex-grow: 1;
    width: 100%;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-container.collapsed .sidebar-section {
    margin-bottom: 0; /* Hapus margin antar section */
}

.sidebar-container.collapsed .sidebar-section-header {
    background-color: #fff; /* Latar belakang putih untuk section header */
    height: 100px; /* Tinggi tetap untuk setiap section header */
    padding: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #eee; /* Garis pemisah antar section */
    width: 100%;
}
/* Hapus border-bottom dari section header terakhir jika diinginkan */
.sidebar-container.collapsed .sidebar-section:last-of-type .sidebar-section-header {
    border-bottom: none;
}

.sidebar-container.collapsed .sidebar-section-title {
    display: none; /* Sembunyikan sepenuhnya teks dan ikon panah untuk section title saat collapsed */
}

.sidebar-container.collapsed .sidebar-submenu {
    display: none; /* Sembunyikan semua submenu saat sidebar diciutkan */
}


/* Content container styling */
.content-container {
    flex-grow: 1; /* Kontainer konten mengisi sisa ruang */
    padding: 20px;
    background-color: #fff; /* Pastikan konten container memiliki latar belakang putih */
    border-radius: 0 8px 8px 0; /* Sudut membulat hanya di sisi kanan */
}

.content-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.breadcrumb {
    font-size: 0.85em;
    color: #888;
}

.breadcrumb a {
    color: #007bff;
}

.breadcrumb span {
    font-weight: 600;
    color: #555;
}

.content-body {
    color: #555;
}

/* Responsive adjustments for the new layout */
@media (max-width: 992px) {
    .main-content-wrapper {
        flex-direction: column; /* Tumpuk sidebar dan konten di layar kecil */
        margin: 10px; /* Kurangi margin keseluruhan */
    }
    .main-content-wrapper > .sidebar-container {
        margin-right: 0; /* Hapus jarak saat ditumpuk */
        margin-bottom: 15px; /* Tambahkan jarak di bawah sidebar */
    }

    .sidebar-container {
        width: 100%; /* Sidebar mengambil lebar penuh */
        border-right: none;
        border-bottom: 1px solid #eee; /* Pemisah di bawah sidebar */
        border-radius: 8px; /* Sudut membulat penuh untuk sidebar yang ditumpuk */
        background-color: #f8f9fa; /* Kembali ke warna default */
    }
    .sidebar-header {
        border-radius: 8px 8px 0 0;
        flex-direction: row; /* Kembali ke tata letak horizontal di header */
        height: auto; /* Tinggi otomatis */
        background-color: #fff; /* Latar belakang putih */
    }
    .sidebar-title {
        background-color: transparent; /* Hapus background biru */
        height: auto;
        width: auto;
        position: static; /* Kembali ke posisi normal */
        transform: none;
        flex-direction: row; /* Kembali ke row */
        padding-left: 0;
    }
    .sidebar-title .sidebar-title-text {
        position: static; /* Hapus positioning absolut */
        transform: none; /* Hapus rotasi */
        white-space: normal; /* Kembali ke normal */
        font-size: 1.1em; /* Ukuran font normal */
        color: #333;
        writing-mode: horizontal-tb; /* Kembali ke horizontal */
        text-orientation: mixed;
        margin-left: 0; /* Hapus margin */
    }
    .sidebar-title i {
        position: static;
        margin-right: 10px;
        display: block; /* Tampilkan kembali ikon user */
        color: #007bff;
        margin-bottom: 0;
    }
    .collapse-sidebar-btn {
        display: block; /* Tampilkan kembali tombol collapse */
        position: static; /* Kembali ke posisi normal */
        background: none;
        box-shadow: none;
        width: auto;
        height: auto;
        color: #888;
    }
    .sidebar-nav {
        padding-top: 0;
    }
    .sidebar-section-header {
        padding: 8px 15px;
        height: auto;
        background-color: transparent; /* Hapus background putih */
        border-bottom: none; /* Hapus border */
    }
    .sidebar-section-title {
        display: flex; /* Tampilkan kembali flex untuk section title */
    }
    .sidebar-section-title .section-title-text {
        position: static;
        transform: none;
        white-space: normal;
        font-size: 0.95em;
        color: #333;
        writing-mode: horizontal-tb; /* Kembali ke horizontal */
        text-orientation: mixed;
    }
    .sidebar-section-title i.fa-chevron-down {
        display: block; /* Tampilkan kembali panah dropdown */
    }
    .sidebar-submenu li a {
        padding: 6px 15px;
    }
    .sidebar-submenu li.sidebar-sub-item a {
        padding-left: 30px; /* Sesuaikan indentasi untuk sub-item */
    }
    .sidebar-submenu li.sidebar-sub-item a::before {
        left: 15px; /* Sesuaikan posisi bullet */
    }
    .sidebar-submenu li.active::before {
        height: 80%; /* Sesuaikan tinggi bar kuning untuk item yang lebih kecil */
        top: 10%;
    }

    .content-container {
        border-radius: 8px; /* Sudut membulat penuh untuk konten yang ditumpuk */
    }

    .content-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .breadcrumb {
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .main-content-wrapper {
        margin: 5px;
    }
    .content-container {
        padding: 10px;
    }
    .sidebar-header {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .sidebar-title i {
        margin-right: 5px;
    }
    .sidebar-section-header {
        padding: 6px 10px;
    }
    .sidebar-section-title {
        font-size: 0.85em;
    }
    .sidebar-submenu li a {
        padding: 5px 10px;
        font-size: 0.8em;
    }
    .sidebar-submenu li.sidebar-sub-item a {
        padding-left: 25px;
    }
    .sidebar-submenu li.sidebar-sub-item a::before {
        left: 10px;
    }
}