/* Style Dasar */
.btn, .card { 
    transition: all 0.3s ease-in-out; 
}
.btn-primary:hover, .card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

/* --- DASHBOARD LAYOUT --- */
:root { 
    --sidebar-width: 260px;
    --sidebar-bg: #212529; 
}

body { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
}

.d-flex-wrapper { 
    display: flex; 
    width: 100%; 
    align-items: stretch; 
}

/* Sidebar */
#sidebar {
    min-width: var(--sidebar-width); max-width: var(--sidebar-width);
    min-height: 100vh; background: var(--sidebar-bg); color: #fff;
    transition: all 0.3s;
}
#sidebar.active { margin-left: calc(var(--sidebar-width) * -1); }
#sidebar .sidebar-header { padding: 20px; background: rgba(0,0,0,0.2); }
#sidebar ul.components { padding: 15px 0; }
#sidebar ul li a {
    padding: 12px 25px; display: block; color: rgba(255,255,255,0.7);
    text-decoration: none; font-size: 0.95rem; border-left: 3px solid transparent;
}
#sidebar ul li a:hover, #sidebar ul li a.active {
    color: #fff; background: rgba(255,255,255,0.05); border-left-color: #0d6efd;
}

/* Content */
#content { width: 100%; min-height: 100vh; transition: all 0.3s; }
.dashboard-nav { padding: 10px 20px; border-bottom: 1px solid #dee2e6; }

/* Mobile */
@media (max-width: 768px) {
    #sidebar { margin-left: calc(var(--sidebar-width) * -1); }
    #sidebar.active { margin-left: 0; }
}