@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* Font utama aplikasi */
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    --bs-font-sans-serif: 'Plus Jakarta Sans', sans-serif;
}

/* Base Body Styling */
body {
    font-family: var(--bs-body-font-family);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth Scrolling untuk Landing Page */
html {
    scroll-behavior: smooth;
}

/* Base Layout & Responsive Sidebar Styling */
.sidebar, .app-sidebar {
    min-height: 100vh;
    width: 260px;
    transition: all 0.25s ease-in-out;
}

.main-content {
    transition: all 0.25s ease-in-out;
    width: 100%;
}

/* Responsive Mobile Sidebar (Drawer Mode) */
@media (max-width: 767.98px) {
    .app-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        background-color: var(--bs-body-bg) !important;
        transform: translateX(-100%);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    }
    
    .app-sidebar.show-mobile {
        transform: translateX(0) !important;
    }
}

/* Kustomisasi Scrollbar Rapi */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.4);
}

/* AlpineJS Cloak (Mencegah elemen berkedip sebelum Alpine loaded) */
[x-cloak] { 
    display: none !important; 
}