body.login { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        height: 100vh; 
        background-color: var(--bs-body-bg);
    }
.login-card { 
    width: 100%; 
    max-width: 400px; 
}
.card {
    border: 0;
    border-radius: 0.75rem;
    
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 10px 15px -5px rgba(0, 0, 0, 0.07),
        0 4px 6px -2px rgba(0, 0, 0, 0.03);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.07),
        0 15px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -5px rgba(0, 0, 0, 0.05);
}
[data-bs-theme="dark"] .card {
    background-color: #282e34; 
    box-shadow: 
        0 1px 3px rgba(255, 255, 255, 0.02),
        0 10px 15px -5px rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .card:hover {
        box-shadow: 
        0 2px 5px rgba(255, 255, 255, 0.04),
        0 15px 25px -5px rgba(255, 255, 255, 0.05);
}
.dt-length, .dt-search { margin-bottom: 1rem; }
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    transition: 0.35s ease-in-out;
    overflow-y: auto;
}
#main-content {
    margin-left: 280px;
    transition: margin-left 0.35s ease-in-out;
}
body.sidebar-is-hidden #sidebar {
    left: -280px;
}
body.sidebar-is-hidden #main-content {
    margin-left: 0;
}