/* truk.css */
:root { 
    --sidebar-width: 280px; 
}

body { 
    background-color: #f4f7f6; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

.sidebar { 
    width: var(--sidebar-width); 
    height: 100vh; 
    position: fixed; 
    background: #1e293b; 
    color: white; 
    transition: all 0.3s; 
    z-index: 1000; 
}

.main-content { 
    margin-left: var(--sidebar-width); 
    padding: 2rem; 
    transition: all 0.3s; 
}

.nav-link { 
    color: #cbd5e1; 
    border-radius: 8px; 
    margin-bottom: 5px; 
    transition: 0.2s; 
}

.nav-link:hover, .nav-link.active { 
    background: #334155; 
    color: white; 
}

.card-stat { 
    border: none; 
    border-radius: 15px; 
    transition: transform 0.3s; 
    cursor: pointer; 
}

.card-stat:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

.content-section { 
    display: none; 
    animation: fadeIn 0.4s ease-in-out; 
}

.content-section.active { 
    display: block; 
}

@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

@media (max-width: 768px) {
    .sidebar { margin-left: calc(-1 * var(--sidebar-width)); }
    .main-content { margin-left: 0; }
    .sidebar.show { margin-left: 0; }
}