:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --card-bg: #f8f9fa;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #ffffff;
    --card-bg: #1e1e1e;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.card {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: none;
}

.sidebar {
    min-height: 100vh;
    width: 250px;
    background-color: #343a40;
    position: relative;
    transition: left 0.3s ease;
}

.sidebar a {
    color: #fff;
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}

.sidebar a:hover {
    background-color: #495057;
}

.sidebar form button {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        z-index: 1030;
        left: -250px;
        top: 0;
    }

    .sidebar.show {
        left: 0;
    }

    #overlay {
        display: none;
        background: rgba(0,0,0,0.5);
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1020;
    }

    #overlay.active {
        display: block;
    }
}