:root {
    --background: #ffffff;
    /* Light background */
    --text-color: #000000;
    /* Light text color */
    --light-gray: #f8f9fa;
    /* Light gray */
    --medium-gray: #e9ecef;
    /* Medium gray */
    --border-color: #ddd;
    /* Light gray border */
    --primary-color: #007BFF;
    /* Button color */
    --primary-hover: #0056b3;
    /* Darker blue on hover */
}

[data-theme='dark'] {
    --background: #212529;
    /* Dark background */
    --text-color: #ffffff;
    /* Light text color */
    --light-gray: #343a40;
    /* Dark gray for containers */
    --border-color: #495056;
    /* Darker border color */
}

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

.list-group-item {
    cursor: pointer;
    background-color: var(--light-gray);
    /* Default for light mode */
    border-color: var(--border-color);
    /* Light border */
}

.list-group-item.disabled {
    background-color: transparent;
    /* Keep disabled items transparent */
    color: inherit;
    /* Inherit text color */
}

.full-width-button {
    width: 100%;
    /* Full width button */
}

.modal-content {
    background-color: var(--background);
    /* Light background */
    color: var(--text-color);
    /* Dark text color */
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background);
        /* Dark background */
        color: var(--text-color);
        /* Light text */
    }

    .list-group-item {
        background-color: var(--light-gray);
        /* Darker item background */
    }

    body .list-group-item:hover {
        background-color: #6c757d;
        /* Dark mode hover effect */
    }

    .modal-content {
        background-color: #343a40;
        /* Dark background for modal */
        color: #ffffff;
        /* Light text color */
    }

    .modal-header .close {
        color: #ffffff;
        /* Close button in dark mode */
    }

    .modal-footer .btn-secondary {
        background-color: #495057;
        /* Dark secondary button */
        color: #ffffff;
        /* White text on dark button */
    }

    .modal-footer .btn-danger {
        color: #ffffff;
        /* White text on danger button */
    }
}

/* Responsive Styles */
@media (max-width: 600px) {

    .list-group-item,
    .modal-content {
        width: 90%;
    }
}