@import url(font-awesome.min.css);
@import url(ionicons.css);
@import url(shortcode.css);

:root {
 --sidebar-width: 260px;
 --sidebar-collapsed-width: 70px;
}
        body {
            /*background-color: #f8f9fa; */
            background-color: #edf7f5;
            overflow-x: hidden;
        }
        /* Kustomisasi Sidebar */
        #sidebar {
            width: var(--sidebar-width);
            min-height: 100vh;
            background-color: #ffffff;
            border-right: 1px solid #dee2e6;
            transition: all 0.3s ease;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
        }
        #sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }
        #sidebar.collapsed .sidebar-text,
        #sidebar.collapsed .brand-name {
            display: none;
        }
        #sidebar .nav-link {
            color: #495057;
            padding: 0.75rem 1.25rem;
            display: flex;
            align-items: center;
            border-radius: 0.375rem;
            margin: 0.25rem 0.75rem;
        }
        #sidebar .nav-link:hover, #sidebar .nav-link.active {
            background-color: #e9ecef;
            color: #0d6efd;
        }
        #sidebar .nav-link i {
            font-size: 1.25rem;
            margin-right: 0.75rem;
        }
        #sidebar.collapsed .nav-link i {
            margin-right: 0;
        }
        #sidebar.collapsed .nav-link {
            justify-content: center;
            padding: 0.75rem 0;
        }
        /* Kustomisasi Konten Utama */
       #main-content {
            margin-left: var(--sidebar-width);
            transition: all 0.3s ease;
    
            /* PERBAIKAN: Naikkan padding-top menjadi 100px agar kontainer turun melewati batas bawah topbar */
            padding-top: 70px !important; 
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-bottom: 1.5rem;
        }

        #main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}
        /* Topbar/Navbar */
        .topbar {
            height: 70px;
            background-color: #ffffff;
            border-bottom: 1px solid #dee2e6;
            position: fixed;
            top: 0;
            right: 0;
            left: var(--sidebar-width);
            z-index: 99;
            transition: all 0.3s ease;
        }
        .topbar.expanded {
            left: var(--sidebar-collapsed-width);
        }
        /* Card untuk Wrapper Chart */
        .chart-card {
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            
            /* PERBAIKAN: Otomatis memberi jarak antar card atas bawah */
            margin-bottom: 24px;
        }
        
/* Kustomisasi Footer */
.main-footer {
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    padding: 1rem 0;
    margin-top: auto; /* Membantu mendorong footer ke bawah jika konten vertikal sedikit */
    
    
}


/* --- FITUR HOVER TO EXPAND UNTUK SIDEBAR --- */

/* Pastikan transisi lebar sidebar berjalan mulus */
#sidebar {
    transition: width 0.3s ease-in-out;
}

/* KETIKA SIDEBAR COLLAPSED, TAPI DI-HOVER OLEH MOUSE */
#sidebar.collapsed:hover {
    width: 260px; /* Sesuaikan dengan lebar asli/default sidebar Anda saat terbuka */
    box-shadow: 5px 0 15px rgba(0,0,0,0.1); /* Beri sedikit bayangan estetik saat melayang */
    z-index: 1050; /* Memastikan sidebar melayang di atas konten saat melebar sementara */
}

/* Tampilkan kembali teks menu ketika sidebar collapsed sedang di-hover */
#sidebar.collapsed:hover .sidebar-text,
#sidebar.collapsed:hover .brand-name {
    display: inline-block !important;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* Pastikan area konten utama dan topbar tidak ikut tergeser atau goyang saat sidebar di-hover */
#main-content.expanded, 
#topbar.expanded {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* --- PERBAIKAN FOOTER DASHBOARD LARAS --- */
#main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0 !important; /* Pastikan tidak ada padding bawah yang mengganjal footer */
}

.main-footer {
    margin-top: auto !important;
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    
    /* Netralkan padding bawaan dari container pembungkus utama */
    margin-left: -24px;  
    margin-right: -24px; 
    margin-bottom: -24px; 
}

/* --- GRADIENT THEME BERDASARKAN LOGO LARAS-028 --- */

/* --- SOFT LIGHT GRADIENT THEME (PALET LOGO LARAS-028) --- */

/* --- 8 VARIASI GRADIENT TERANG (LIGHT THEME) --- */

/* --- 15 VARIASI GRADIENT TERANG (LIGHT THEME) --- */

/* 1. Light Luxurious Gold (Emas muda berkilau) */
.bg-light-gold {
    background: linear-gradient(135deg, #fff3d1 0%, #f1d18a 100%) !important;
    border: 1px solid #e7c375 !important;
}

/* 2. Soft Mint Teal (Teal muda yang segar) */
.bg-light-teal {
    background: linear-gradient(135deg, #e6f7f6 0%, #a2dedb 100%) !important;
    border: 1px solid #8bc9c6 !important;
}

/* 3. Bright Turquoise (Turquoise cerah transparan) */
.bg-light-turquoise {
    background: linear-gradient(135deg, #e1fafd 0%, #9be4eb 100%) !important;
    border: 1px solid #82d3dc !important;
}

/* 4. Sky Royal Blue (Biru muda khas langit cerah) */
.bg-light-sky {
    background: linear-gradient(135deg, #e8f1f5 0%, #b3cedc 100%) !important;
    border: 1px solid #9bbbc3 !important;
}

/* 5. Champagne Gold (Perpaduan emas sangat lembut dan putih cream) */
.bg-light-champagne {
    background: linear-gradient(135deg, #faf6ee 0%, #e6d3b3 100%) !important;
    border: 1px solid #d2be9d !important;
}

/* 6. Ocean Breeze (Transisi dari biru air laut ke teal sangat muda) */
.bg-light-ocean {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    border: 1px solid #7dd3fc !important;
}

/* 7. Soft Emerald Mint (Nuansa hijau mint batik sutra kuno) */
.bg-light-mint {
    background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%) !important;
    border: 1px solid #86efac !important;
}

/* 8. Elegant Platinum (Gradasi abu-abu silver mewah yang sangat bersih) */
.bg-light-platinum {
    background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%) !important;
    border: 1px solid #94a3b8 !important;
}

/* --- TAMBAHAN 7 WARNA BARU BARU (9 s.d 15) --- */

/* 9. Soft Lavender Rose (Ungu anggun sangat muda & kalem) */
.bg-light-lavender {
    background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%) !important;
    border: 1px solid #d8b4fe !important;
}

/* 10. Sakura Blossom (Pink pastel lembut kelopak bunga) */
.bg-light-sakura {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%) !important;
    border: 1px solid #fbcfe8 !important;
}

/* 11. Fresh Apricot (Gradasi orange peachy yang hangat dan ceria) */
.bg-light-apricot {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
    border: 1px solid #fed7aa !important;
}

/* 12. Soft Olive Moss (Hijau zaitun muda kekuningan yang tenang) */
.bg-light-moss {
    background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%) !important;
    border: 1px solid #fde047 !important;
}

/* 13. Deep Ocean Mist (Transisi biru navy sangat tipis ke putih abu) */
.bg-light-mist {
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%) !important;
    border: 1px solid #bcccdc !important;
}

/* 14. Sweet Coral (Warna salem cerah yang segar untuk pembeda indikator) */
.bg-light-coral {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 100%) !important;
    border: 1px solid #fecdd3 !important;
}

/* 15. Pale Copper (Sentuhan tembaga rose-gold yang berwibawa) */
.bg-light-copper {
    background: linear-gradient(135deg, #fffaf0 0%, #f3e5d8 100%) !important;
    border: 1px solid #e4d0ba !important;
}


/* --- KELAS PENDUKUNG KONTRAST UTAN & HOVER EFFECT (WAJIB DISERTAKAN) --- */
.bg-light-gold, .bg-light-teal, .bg-light-turquoise, .bg-light-sky, 
.bg-light-champagne, .bg-light-ocean, .bg-light-mint, .bg-light-platinum,
.bg-light-lavender, .bg-light-sakura, .bg-light-apricot, .bg-light-moss,
.bg-light-mist, .bg-light-coral, .bg-light-copper {
    color: #212529 !important; /* Memastikan teks judul card tetap gelap agar kontras */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efek interaktif hover melayang saat didekati mouse */
.bg-light-gold:hover, .bg-light-teal:hover, .bg-light-turquoise:hover, .bg-light-sky:hover, 
.bg-light-champagne:hover, .bg-light-ocean:hover, .bg-light-mint:hover, .bg-light-platinum:hover,
.bg-light-lavender:hover, .bg-light-sakura:hover, .bg-light-apricot:hover, .bg-light-moss:hover,
.bg-light-mist:hover, .bg-light-coral:hover, .bg-light-copper:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07) !important;
}


/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* KELAS TAMBAHAN UNTUK ESTETIKA CARD */
.bg-light-gold, .bg-light-teal, .bg-light-turquoise, .bg-light-sky, 
.bg-light-champagne, .bg-light-ocean, .bg-light-mint, .bg-light-platinum {
    color: #212529 !important; /* Menggunakan teks gelap agar kontras sempurna */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efek hover melayang yang halus */
.bg-light-gold:hover, .bg-light-teal:hover, .bg-light-turquoise:hover, .bg-light-sky:hover, 
.bg-light-champagne:hover, .bg-light-ocean:hover, .bg-light-mint:hover, .bg-light-platinum:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

/* --- STYLE UNTUK MENU SIDEBAR YANG AKTIF --- */
#sidebar .nav-link.active {
    background-color: rgba(34, 139, 135, 0.15) !important; /* Sentuhan warna Teal semi-transparan dari grafik logo */
    color: #228b87 !important; /* Warna teks Teal tegas */
    font-weight: 600 !important;
    border-left: 4px solid #b88728; /* Aksen garis vertikal emas mewah di sebelah kiri menu */
    border-radius: 0 4px 4px 0; /* Membuat sudut membulat halus di sisi kanan saja */
}

/* Sedikit tweak untuk memastikan efek hover menu biasa tidak bentrok */
#sidebar .nav-link:hover:not(.active) {
    background-color: #f8fafc;
    color: #212529;
}

/* 0000000000000  MAPS 000000000000 */
        .map-container {
            position: relative;
            background: white;
            padding: 20px;
            border-radius: 12px;
            /* box-shadow: 0 4px 15px rgba(0,0,0,0.05); */
        }

        .wilayah {
            cursor: pointer;
        }

        /* Mewarnai semua path di dalam grup wilayah */
        .wilayah path {
            stroke: #fff;
            stroke-width: 1.5; 
            transition: fill 0.3s ease;
        }
        
        
        /* Warna default menggunakan !important untuk menimpa fill bawaan SVG asli */
        /* #surakarta path { fill: #ffadad !important; }
        #sukoharjo path { fill: #ffd6a5 !important; }
        #wonogiri path { fill: #caffbf !important; }  <--- diambil alih google sheet */ 

        /* Efek Hover: Berubah menjadi warna biru cerah saat disorot */
        /* 1. Efek warna tetap disuntikkan ke dalam path */
        .wilayah:hover path {
            fill: #4cc9f0 !important;
            /* filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.2)); diganti transform dibawah ini */
        }
        
        /* 1. Efek warna tetap disuntikkan ke dalam path */
        .wilayah:hover path {
            fill: #4cc9f0 !important;
        }

        /* 2. Efek transform diterapkan ke grup <g> (Kombinasi transisi dipindahkan ke sini) */
        .wilayah {
            transition: transform 0.2s ease;
        }

        .wilayah:hover {
            transform: translateY(-5px); /* Mengangkat seluruh grup wilayah ke atas secara utuh */
        }
        
        

        /* Style Tooltip */
        .tooltip {
            position: absolute;
            background: rgba(33, 37, 41, 0.95);
            color: #fff;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            pointer-events: none;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.15s ease, visibility 0.15s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 10;
            min-width: 180px;
        }

        .tooltip h4 {
            margin: 0 0 6px 0;
            color: #4cc9f0;
            border-bottom: 1px solid #444;
            padding-bottom: 4px;
        }

        .tooltip p { margin: 4px 0; color: #ddd; font-size: 13px; }
        
        
/* APEX CHART LEGEND STYLE */
/* === FORCE APEXCHARTS LEGEND TO BE IN A ROW === */
.apexcharts-legend {
    display: flex !important;
    flex-direction: row !important; /* Paksa wajib berjejer horizontal (in a row) */
    flex-wrap: nowrap !important;   /* Haramkan teks untuk patah baris ke bawah */
    justify-content: center !important; /* Rata tengah */
    align-items: center !important;
    overflow: visible !important;   /* Biarkan meluber rapi jika space pas-pasan */
    height: auto !important;
    max-height: none !important;
}

.apexcharts-legend-series {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-right: 20px !important;  /* Berikan jarak horizontal aman antar item legend (Pagu - Realisasi - Pct) */
    margin-bottom: 0 !important;    /* Nol-kan margin bawah agar tidak membuat tumpukan */
}

/* Jika teksnya masih terasa terlalu mepet dengan lingkaran warna */
.apexcharts-legend-marker {
    margin-right: 6px !important;
}