/* ==========================================================================
   VILLAGE TOPBAR & SIDEBAR SYSTEM
   Spesifik untuk Navigasi Desktop & Mobile
   ========================================================================== */

/* 1. NAVBAR DESKTOP */
.navbar-custom {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    z-index: 1030;
    border-bottom: 1px solid var(--border);
}

.logo-box {
    width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.main-logo { max-width: 100%; max-height: 100%; object-fit: contain; }

.brand-text .sub-title {
    font-size: 0.65rem; font-weight: 700; color: var(--gray);
    text-transform: uppercase; letter-spacing: 0.5px; display: block;
}

.brand-text .main-title {
    font-size: 1.1rem; font-weight: 900; color: var(--primary);
    text-transform: uppercase; line-height: 1.1;
}

/* 2. NAV LINKS */
.nav-link-custom {
    color: var(--dark) !important;
    font-weight: 600;
    padding: 0.6rem 1rem !important;
    transition: all 0.3s ease;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.nav-link-custom:hover {
    background: rgba(37, 99, 235, 0.05);
    color: var(--primary) !important;
    transform: translateY(-1px);
}

.nav-link-custom.active {
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary) !important;
}

.nav-link-custom i {
    font-size: 1.2rem;
    color: var(--primary);
}

/* 3. SIDEBAR OFFCANVAS (MOBILE) */
.offcanvas {
    border: none !important;
    width: 280px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.offcanvas-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem;
}

.offcanvas-body {
    padding: 0;
}

.mobile-footer-sidebar {
    background: #f8fafc;
    padding: 1.5rem;
    border-top: 1px dashed var(--border);
}

/* 4. RESPONSIVE HEADER */
@media (max-width: 991px) {
    .nav-link-custom {
        border-radius: 0;
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid var(--border);
    }
    .nav-link-custom:last-child { border-bottom: none; }
}