:root {
    /* Color Palette - Modern Green Theme */
    --primary-green: #2E7D32;       /* Hijau Daun Tua (Header/Active) */
    --soft-green: #E8F5E9;          /* Hijau Sangat Muda (Background/Active Item) */
    --accent-green: #66BB6A;        /* Hijau Cerah (Hover/Header Card) */
    --text-dark: #1B5E20;           /* Teks Hijau Gelap */
    --text-main: #374151;           /* Teks Abu Gelap (Body) */
    
    /* Layout Variables */
    --sidebar-width: 270px;
    --header-height: 64px;
    --font-main: 'Inter', 'Segoe UI', sans-serif;
}

body {
    background-color: #f3f4f6; /* Light Gray Background */
    font-family: var(--font-main);
    color: var(--text-main);
    overflow-x: hidden;
}

/* --- 1. NAVBAR STYLING --- */
.navbar-custom {
    background-color: var(--primary-green) !important;
    height: var(--header-height);
    z-index: 1030;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.navbar-brand { font-weight: 700; letter-spacing: 0.5px; font-size: 1.25rem;}

/* --- 2. SIDEBAR STYLING (Modern) --- */
#modern-sidebar-wrapper {
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    position: fixed;
    top: var(--header-height);
    left: 0;
    background: #ffffff;
    border-right: 1px solid rgba(0,0,0,0.05);
    overflow-y: auto;
    transition: margin-left 0.3s ease-in-out;
    z-index: 1020;
    padding-bottom: 1rem;
}

/* Sidebar Scrollbar */
#modern-sidebar-wrapper::-webkit-scrollbar { width: 5px; }
#modern-sidebar-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
#modern-sidebar-wrapper::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }
#modern-sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* Sidebar Toggle State */
body.sidebar-toggled #modern-sidebar-wrapper { margin-left: calc(var(--sidebar-width) * -1);}

/* Sidebar Items */
.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #9ca3af;
    margin: 1.5rem 1rem 0.5rem;
}

#modern-sidebar-wrapper .list-group-item {
    border: none;
    padding: 0.6rem 0.75rem;
    font-weight: 500;
    color: #4b5563;
    border-radius: 0.375rem; /* Rounded-md */
    margin: 0.15rem 0.75rem;
    transition: all 0.2s;
    font-size: 0.9rem;
    background-color: transparent;
}

/* Hover Effect */
#modern-sidebar-wrapper .list-group-item:hover {
    background-color: #f9fafb; color: var(--primary-green); transform: translateX(3px);}

#modern-sidebar-wrapper .list-group-item.active-menu,
#modern-sidebar-wrapper .list-group-item.active-submenu {
    background-color: var(--soft-green) !important;
    color: var(--primary-green) !important;
    font-weight: 600;
}

#modern-sidebar-wrapper .list-group-item.active-menu i,
#modern-sidebar-wrapper .list-group-item.active-submenu i {
    color: var(--primary-green);
}

/* Submenu Indentation */
#modern-sidebar-wrapper .collapse .list-group-item {
    padding-left: 2.5rem;
    font-size: 0.85rem;
}

.rotate-180 { transform: rotate(180deg);transition: transform 0.3s; }
.transition-icon { transition: transform 0.3s;}

/* --- 3. PAGE CONTENT WRAPPER --- */
#modern-page-content-wrapper {
    width: 100%;
    margin-top: var(--header-height);
    padding-left: var(--sidebar-width);
    transition: padding-left 0.3s ease-in-out;
    min-height: 100vh;
}

body.sidebar-toggled #modern-page-content-wrapper { padding-left: 0;}

/* Cards */
.card-login {
    border: none;
    border-radius: 15px; /* Radius sedikit dikurangi agar tidak terlalu bulat */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 800px; /* DIKURANGI dari 900px agar tidak terlalu lebar */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
}
.card { 
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px 1px rgba(0, 0, 0, 0.33) !important;
    margin-bottom: 1.5rem;
    overflow-x: hidden;
    background-color: #fff;
}
.row.g-4 {display: flex; flex-wrap: wrap;}
.card-body { overflow: hidden; }
.btn-xs { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
.card-header {  background-color: #ffffff; border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.25rem; font-weight: 700; color: var(--text-main); }
.card-filter {
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  border: 0.5px solid rgba(0,0,0,0.03) !important;
    position: relative; z-index: 1;  background-color: #fff; }
.card-filter:hover {transform: translateY(-8px);  box-shadow: 0 15px 30px rgba(46, 125, 50, 0.1) !important; /* Shadow hijau lembut */
   border-color: rgba(46, 125, 50, 0.2) !important; z-index: 2; }
.card-filter .icon-shape { transition: all 0.3s ease;  }
.card-filter:hover .icon-shape { transform: scale(1.1) rotate(5deg);  background-opacity: 0.2;  }
.card-filter.active { background-color: #f0fdf4; /* Hijau sangat muda */  border: 1px solid var(--primary-green) !important;}
.card-filter.active .active-indicator {opacity: 1;  height: 5px; /* Lebih tebal saat aktif */}
.card-modern { border-radius: 8px; transition: all 0.3s ease; }
.card-modern:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important; }
.card-hover { transition: all .35s ease; }
.card-hover:hover { transform: translateY(-4px);  box-shadow: 0 3rem 2rem rgba(0, 0, 0, 0.15);}
.active-indicator { position: absolute; bottom: 0; left: 0; width: 100%;
    height: 3px; opacity: 0; transition: all 0.3s ease; border-radius: 0 0 12px 12px; }
.icon-shape.bg-primary { background-color: rgba(13, 110, 253, 0.1) !important; }
.icon-shape.bg-success { background-color: rgba(25, 135, 84, 0.1) !important; }
.icon-shape.bg-warning { background-color: rgba(255, 193, 7, 0.1) !important; }
.icon-shape.bg-danger  { background-color: rgba(220, 53, 69, 0.1) !important; }
.card-filter:hover h3 { color: var(--primary-green) !important;}

.btn-desa { background-color: var(--primary-green); color: white; border-radius: 8px;
    padding: 10px 20px; font-weight: 600; transition: all 0.3s; border: none;}
.btn-desa:hover { background-color: var(--accent-green); color: white;
    transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.form-control, .form-select { border-radius: 8px; border: 1px solid #d1d5db;
    padding: 0.6rem 1rem; transition: all 0.2s;}
.form-control:focus, .form-select:focus { border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);background-color: #fff;}
.form-label { font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.4rem;}
.form-label-modern { font-size: 0.7rem; font-weight: 700;text-transform: uppercase;
    color: #6c757d; margin-bottom: 4px; letter-spacing: 0.5px; }
.form-control-sm, .form-select-sm {border-radius: 6px;  border: 1px solid #dee2e6; padding: 8px 10px; font-size: 0.9rem;}
.form-control-sm:focus, .form-select-sm:focus { border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1);}

.ls-1 { letter-spacing: 1px; }
.cursor-pointer { cursor: pointer; }
.border-dashed { border-style: dashed !important; }

/* Select2 Fixes */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single { height: 38px !important; border: 1px solid #d1d5db; border-radius: 8px; }
.select2-container--bootstrap-5 .select2-selection { border-radius: 8px; }

/* Dashboard Density (Compact View) */
.dashboard-dense { font-size: 0.9rem; }
.dashboard-dense h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
.dashboard-dense .table-sm > :not(caption) > * > * { padding: 0.4rem 0.5rem; vertical-align: middle; }

/* Tables */
table.dataTable thead th { background-color: #f9fafb; border-bottom: 2px solid #e5e7eb !important;
    color: #374151; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;}

/* Login Page Specific */
.login-page {
    background-image: url('../images/bg-desa.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    overflow: hidden; /* Mencegah scrollbar muncul jika tidak perlu */
}
.login-container { min-height: 100vh; display: flex; align-items: center;
    justify-content: center; padding: 20px;}
.login-form-side { padding: 40px 35px; /* Padding dikurangi agar lebih rapat */}
.login-info-side { background: linear-gradient(135deg, var(--primary-green), #1b5e20); 
    color: white; display: flex; flex-direction: column; justify-content: center;
    align-items: center; padding: 30px; text-align: center; }
.login-form-side .form-control { border-radius: 6px; padding: 8px 12px;  font-size: 0.9rem;  height: auto;}
.login-form-side .input-group-text { border-radius: 6px 0 0 6px; padding: 8px 12px; font-size: 0.9rem;}
.login-form-side .btn-desa { padding: 8px 16px; font-size: 0.95rem; border-radius: 6px; }
.login-title {font-size: 1.5rem;  margin-bottom: 5px;}
.login-subtitle { font-size: 0.85rem; margin-bottom: 20px;}
.login-form-side .form-label { font-size: 0.75rem; margin-bottom: 4px; font-weight: 600;}

.select2-container--open { z-index: 9999 !important;}
.select2-container--bootstrap-5 .select2-dropdown { border-color: #198754; box-shadow: 0 10px 25px rgba(0,0,0,0.1);}
.select2-container--bootstrap-5 .select2-selection--single { height: 38px !important; display: flex; align-items: center;}

.org-chart {  position: relative; width: 100%; }
.node .official-card { width: 220px; transition: all 0.3s ease; border-radius: 15px !important; }
.node .official-card:hover { transform: translateY(-10px);box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;}
.connector-horizontal { width: 60px; height: 2px; background-color: #dee2e6; position: relative;}
.level-1::after { content: ""; position: absolute;top: 100px;
    left: 50%; width: 2px; height: 400px; background-color: #dee2e6; z-index: -1;}
.official-card .photo-frame { width: 60px; height: 75px; overflow: hidden; border-radius: 8px;}
.official-card .position-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px;}
.official-card .name-label { font-size: 0.85rem; font-weight: 700; }

.connector-horizontal { width: 50px; height: 2px; background: #ccc; align-self: center; margin-top: 40px; }
.line-ver-top { position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; background: #ccc; }
.line-ver-bottom { position: absolute; bottom: -30px; left: 50%; width: 2px; height: 30px; background: #ccc; }
.line-hor-bridge { position: absolute; top: -30px; left: 10%; right: 10%; height: 2px; background: #ccc; }
.line-ver-stub { position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; background: #ccc; }
.official-card { width: 220px; transition: 0.3s; border-radius: 12px !important; }
.official-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.btn-xs { padding: .15rem .4rem; font-size: .75rem; }
.filter-btn.active { border-left: 4px solid #0d6efd; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.05);}
.filter-btn { transition: all 0.2s ease; border: 1px solid transparent; }
.filter-btn:hover { background-color: #f8f9fa; border-color: #dee2e6; transform: translateX(3px); }
.filter-btn.active { border-color: transparent; transform: none; }
.filter-btn.active i.bi-chevron-right { color: white !important; }
.table.dataTable tbody tr:hover { background-color: #f8f9fa !important; }
.table-hover > tbody > tr > td { padding-top: 1rem; padding-bottom: 1rem; }
.dataTables_wrapper .row:first-child, 
.dataTables_wrapper .row:last-child {padding-left: 1.5rem;  padding-right: 1.5rem;margin-top: 10px; margin-bottom: 10px;}
.dataTables_length select { padding: 0.25rem 0.5rem !important; border-radius: 5px !important; margin: 0 5px;}
.sdgs-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(0,0,0,0.05) !important;}
.sdgs-card:hover {transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(25, 135, 84, 0.1) !important;
        border-color: rgba(25, 135, 84, 0.3) !important;}
.icon-circle { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.25rem; }
.ls-1 { letter-spacing: 1px; }
.progress-thin { height: 4px; border-radius: 10px; }
#parameterTab { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #dee2e6;}
#parameterTab .nav-item { flex: 0 0 auto; /* Mencegah tab mengecil */}
#parameterTab::-webkit-scrollbar { height: 4px; }
#parameterTab::-webkit-scrollbar-thumb {  background: #e9ecef; border-radius: 10px; }

.icon-box { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;}
	
#mapDesaPicker {width: 100%; height: 300px; border-radius: 8px; z-index: 1; }
#desa_lat, #desa_lng { background-color: #f8f9fa !important; border: 1px solid #ced4da; font-weight: bold; color: #198754;}
#v-pills-tab .nav-link { color: #495057; border-radius: 8px; padding: 10px 15px;font-weight: 500; transition: 0.3s;}
#v-pills-tab .nav-link:hover { background-color: rgba(25, 135, 84, 0.05); color: #198754;}
#v-pills-tab .nav-link.active { background-color: #198754;color: white; box-shadow: 0 4px 10px rgba(25, 135, 84, 0.2);}
.modal-body { max-height: 70vh; overflow-x: hidden;}
.dataTables_filter { float: right; margin-bottom: 15px; }
.dataTables_filter input { border-radius: 20px; padding: 5px 15px;border: 1px solid #dee2e6; width: 250px; }
#table-pelaksanaan tbody td:first-child { font-weight: bold; color: #6c757d;}

/* --- 5. RESPONSIVE MEDIA QUERIES (At Bottom) --- */
@media (max-width: 768px) {
    #modern-sidebar-wrapper {
        margin-left: calc(var(--sidebar-width) * -1); /* Hidden by default mobile */
        box-shadow: none;
    }
    
    #modern-page-content-wrapper { padding-left: 0;} 
    body.sidebar-toggled #modern-sidebar-wrapper {  margin-left: 0; box-shadow: 10px 0 25px rgba(0,0,0,0.1);}
    
    body.sidebar-toggled::before {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1015;
        animation: fadeIn 0.3s;
    }
	
	/*
    #pane-categories,
    #pane-main { width: 100%; max-width: 100%; }
	#pane-categories { position: absolute; z-index: 10;  background: #fff;}
	#thread-items-container .card { border-radius: 14px;}

    .post-card { max-width: 95%;}
	.sticky-top { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	#formSend textarea { font-size: .85rem;} */
}


@keyframes fadeIn {  from { opacity: 0; }  to { opacity: 1; } }

.modal { z-index: 1060 !important; }
    .modal-backdrop { z-index: 1050 !important; }
    .nav-pills .nav-link.active {
        background-color: #0d6efd !important;
        color: white !important;
    }
/*
.forum-container { height: calc(100vh - 70px); overflow: hidden; background: #f8fafc; padding-left: 0 !important;}
.forum-container .d-flex { white-space: normal !important; }
.forum-container .card { overflow-x: visible;}
.bg-image-pattern {
    background: linear-gradient(180deg, #e9efe9, #e5ddd5);
}


#pane-categories { max-height: 100%; background: #ffffff;}

#pane-categories .list-group-item {transition: all 0.2s ease; border-radius: 10px; }
#pane-categories .list-group-item:hover { background-color: #f1fdf6; }

.pane { display: none;}

.pane.active {display: flex; width: 100%;}
.cat-item { transition: all .2s ease;cursor: pointer;}
.cat-item:hover { background: #f1fdf6;}
.cat-item.active { background: linear-gradient(90deg, #e9f9f0, #ffffff) !important; border-left: 4px solid #198754 !important;}
.hover-shadow {transition: all 0.2s ease;}
.hover-shadow:hover {transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.06);}
#thread-items-container .card {transition: all .2s ease;}
#thread-items-container .card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;}
.post-card { max-width: 78%; padding: 10px 12px; border-radius: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06); position: relative; word-break: break-word; }

.post-card { max-width: 85%; padding: .6rem .8rem;
    border-radius: 14px; font-size: .9rem; line-height: 1.4; word-wrap: break-word;}
.my-message { align-self: flex-end; background: #198754; color: #fff; border-bottom-right-radius: 4px; }
.other-message { align-self: flex-start; background: #ffffff; border: 1px solid #e5e7eb;border-bottom-left-radius: 4px; }.post-content { font-size: 0.95rem; line-height: 1.45; color: #111827; white-space: pre-wrap;}
.sender-name { font-size: 0.75rem; font-weight: 600; color: #198754;}
.post-card .dropdown { z-index: 20;}
.post-card .dropdown-toggle { opacity: 0; transition: opacity 0.2s ease; }
.post-card:hover .dropdown-toggle { opacity: 1;}
.post-time { font-size: .65rem; opacity: .7; margin-top: 4px; display: block; text-align: right; }
*/
#input_msg { font-size: 0.9rem;}
#input_msg::placeholder {color: #9ca3af;}
/*
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
*/
.chartjs-legend ul { display: flex; flex-wrap: wrap; justify-content: center;}
.chartjs-legend li { max-width: 140px; white-space: normal; word-break: break-word;}