/* ================================================================
   CERIA PATI — Custom Global Overrides
   File ini di-load setelah bundle utama Vite untuk override spesifik
   tanpa menyentuh template SCSS asli.
   ================================================================ */

/* ---------------------------------------------------------------
   1. FONT SIZE GLOBAL — naik dari 13px (0.8125rem) ke 14px
   --------------------------------------------------------------- */
body {
    font-size: 0.875rem !important; /* 14px */
}

/* Kompensasi elemen yang ukurannya di-set eksplisit di SCSS */
.sidebar-left #sidebar-menu ul > li > a {
    font-size: 14px !important;
}

.sidebar-left #sidebar-menu ul > li ul.sub-menu li a {
    font-size: 13.5px !important;
}

/* ---------------------------------------------------------------
   2. SIDEBAR BG & MENU — Hijau #01441f & Teks Kontras Tinggi
   --------------------------------------------------------------- */

/* Sidebar container & slider */
.sidebar-left,
.sidebar-left .sidebar-slide {
    background: #01441f !important;
    background-color: #01441f !important;
}

/* Logo Box / Brand Area agar menyatu dengan sidebar */
.navbar-logo-box {
    background: #01441f !important;
    background-color: #01441f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tombol hamburger menu di navbar logo box agar berwarna putih */
.navbar-logo-box #sidebar-btn,
.navbar-logo-box #sidebar-btn svg,
.navbar-logo-box #sidebar-btn i,
.navbar-logo-box .logo-lg,
.navbar-logo-box .logo-sm {
    color: #ffffff !important;
}

/* Menu item utama (level 1) */
.sidebar-left #sidebar-menu ul > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

/* Hover & Active state menu utama */
.sidebar-left #sidebar-menu ul > li > a:hover,
.sidebar-left #sidebar-menu ul > li.mm-active > a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sub-menu container */
.sidebar-left #sidebar-menu ul > li ul.sub-menu {
    background-color: #013518 !important; /* Hijau lebih gelap */
}

/* Sub-menu item (level 2 & 3) */
.sidebar-left #sidebar-menu ul > li ul.sub-menu li a {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500 !important;
}

/* Sub-menu item aktif */
.sidebar-left #sidebar-menu ul > li ul.sub-menu li a.active,
.sidebar-left #sidebar-menu ul > li ul.sub-menu li.mm-active a {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hover state sub-menu */
.sidebar-left #sidebar-menu ul > li ul.sub-menu li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------------------------------------------------------------
   3. MENU TITLE (section label) — lebih terlihat di background hijau
   --------------------------------------------------------------- */
.sidebar-left #sidebar-menu .menu-title {
    font-size: 11px !important;
    opacity: 0.65 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.06em !important;
}

/* ---------------------------------------------------------------
   4. ICON SIDEBAR — sesuaikan dengan warna teks putih
   --------------------------------------------------------------- */
.sidebar-left #sidebar-menu ul > li > a i,
.sidebar-left #sidebar-menu ul > li > a svg {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 0.9;
}

.sidebar-left #sidebar-menu ul > li > a:hover i,
.sidebar-left #sidebar-menu ul > li > a:hover svg,
.sidebar-left #sidebar-menu .mm-active > a i,
.sidebar-left #sidebar-menu .mm-active > a svg {
    color: #ffffff !important;
    opacity: 1;
}

/* ---------------------------------------------------------------
   5. TEKS UMUM — slightly sharpen teks muted & secondary
   --------------------------------------------------------------- */
.text-muted {
    color: #6b7a8d !important;     /* sedikit lebih gelap dari default #74788d */
}

/* ---------------------------------------------------------------
   6. TABS UNDERLINE — perpanjang garis aktif di tab nav-pills
   --------------------------------------------------------------- */
.nav.custom-tab .nav-link:before {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 0 4px 4px !important;
    margin-right: 0 !important;
}

/* ---------------------------------------------------------------
   7. SUBMENU BULLETS & CONNECTING LINE — Pertegas dan Perkecil
   --------------------------------------------------------------- */

/* Garis penghubung vertikal antarmenu */
.sidebar-left #sidebar-menu ul>li ul.sub-menu:before {
    background-color: rgba(255, 255, 255, 0.25) !important;
    opacity: 1 !important;
    width: 1px !important;
    left: 17px !important;
}

/* Titik bullet menu default (diperkecil, hilangkan outline radio-button) */
.sidebar-left #sidebar-menu ul>li ul.sub-menu li a:before {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    outline: none !important;
    width: 6px !important;
    height: 6px !important;
    left: -11px !important; /* Selaras dengan garis vertikal 17px (25px - 11px + 3px radius) */
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Titik bullet menu hover & aktif */
.sidebar-left #sidebar-menu ul>li ul.sub-menu li a:hover:before,
.sidebar-left #sidebar-menu ul>li ul.sub-menu li a.active:before,
.sidebar-left #sidebar-menu ul>li ul.sub-menu li.mm-active a:before {
    background-color: #ffffff !important;
    border: none !important;
    outline: none !important;
    width: 8px !important;
    height: 8px !important;
    left: -12px !important; /* Tetap berada di tengah garis vertikal (25px - 12px + 4px radius) */
}

/* ---------------------------------------------------------------
   8. TOMBOL HAMBURGER SAAT SIDEBAR COLLAPSED — Ubah ke Hijau Gelap
   --------------------------------------------------------------- */

/* Saat sidebar dilipat/collapsed (desktop), tombol hamburger digeser keluar ke area topbar yang berwarna putih.
   Supaya terlihat jelas, warnanya diubah menjadi hijau gelap #01441f. */
[data-sidebar="small"] .navbar-logo-box #sidebar-btn,
[data-sidebar="small"] .navbar-logo-box #sidebar-btn svg,
[data-sidebar="small"] .navbar-logo-box #sidebar-btn i,
[data-sidebar="medium"] .navbar-logo-box #sidebar-btn,
[data-sidebar="medium"] .navbar-logo-box #sidebar-btn svg,
[data-sidebar="medium"] .navbar-logo-box #sidebar-btn i {
    color: #01441f !important;
}

/* ---------------------------------------------------------------
   9. UKURAN ICON SIDEBAR SAAT TERLIPAT (COLLAPSED)
   --------------------------------------------------------------- */

/* Memperbesar icon (i dan svg) dari bawaan 15px menjadi 20px saat sidebar terlipat */
[data-sidebar="small"] .sidebar-left #sidebar-menu > ul > li > a i,
[data-sidebar="medium"] .sidebar-left #sidebar-menu > ul > li > a i {
    font-size: 20px !important;
}

[data-sidebar="small"] .sidebar-left #sidebar-menu > ul > li > a svg,
[data-sidebar="medium"] .sidebar-left #sidebar-menu > ul > li > a svg {
    width: 20px !important;
    height: 20px !important;
}

/* ---------------------------------------------------------------
   10. MOBILE TOPBAR/HEADER LAYOUT OVERRIDES (max-width: 991.98px)
       - Mengubah background topbar header menjadi hijau penuh (#01441f)
       - Menukar posisi tombol hamburger menu (kiri) dengan logo (kanan)
       - Memastikan warna icon dan border kontras di background hijau
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Background hijau penuh untuk header */
    #page-topbar,
    .navbar-header {
        background-color: #01441f !important;
        background: #01441f !important;
    }

    /* Ubah logo box menjadi flex container agar bisa menukar urutan logo dan hamburger */
    .navbar-logo-box {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        width: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        background: transparent !important;
        background-color: transparent !important;
        border-bottom: none !important;
    }

    /* Hamburger menu diposisikan static & paling kiri */
    .navbar-logo-box #sidebar-btn {
        position: static !important;
        transform: none !important;
        order: 1 !important;
    }

    /* Animasi Hamburger ke Silang (X) saat Sidebar Terbuka */
    .navbar-logo-box #sidebar-btn svg line {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        transform-origin: center !important;
    }

    body.sidebar-enable .navbar-logo-box #sidebar-btn svg line:nth-child(1) {
        transform: translateY(6px) rotate(45deg) !important;
    }

    body.sidebar-enable .navbar-logo-box #sidebar-btn svg line:nth-child(2) {
        opacity: 0 !important;
        transform: scale(0) !important;
    }

    body.sidebar-enable .navbar-logo-box #sidebar-btn svg line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg) !important;
    }

    /* Logo diposisikan sebelah kanan hamburger */
    .navbar-logo-box .logo {
        order: 2 !important;
    }

    .navbar-logo-box .logo-sm, 
    .navbar-logo-box .logo-lg {
        line-height: normal !important;
    }

    /* Area menu di kanan topbar */
    .menu-sm {
        width: auto !important;
        flex-grow: 1 !important;
        padding-left: 10px !important;
        padding-right: 15px !important;
    }

    /* Semua icon topbar di kanan (seperti notifikasi) agar berwarna putih kontras */
    .top-icon i,
    .top-icon svg {
        color: #ffffff !important;
    }

    /* Garis pembatas profil user agar semi-transparan putih */
    .admin-user-info {
        border-color: rgba(255, 255, 255, 0.15) !important;
    }
}