/* General Styles */
body {
    font-family: Arial, sans-serif;
}

.card {
    margin-bottom: 0;
}

/* Typography */
.variable-text {
    font-weight: bold;
}

/* Layout */
#filterButtons {
    gap: 0.5rem;
}

#variablesContainer .form-control {
    margin-bottom: 0.5rem;
}

/* Left Panel Styles */
#leftPanel {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
}

/* Options Styling */
.option {
    background-color: yellow;
    cursor: pointer;
    padding: 2px 2px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    white-space: normal;
    word-break: break-word;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.option:hover:not(.option-active) {
    background-color: orange;
}

.option-active {
    background-color: yellow;
    font-weight: bold;
}

.option-inactive {
    color: #6c757d;
    background-color: transparent;
}

.option-group {
    display: inline;
    gap: 0.25rem;
}

/* Ensure active options don't change on hover */
.option.option-active:hover {
    background-color: yellow;
}

/* Button Styles */
.btn-group .btn {
    border-radius: 0.25rem !important;
    margin-right: 0.25rem;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

/* Responsive Styles */
@media (max-width: 991px) {
    #leftPanel {
        margin-bottom: 1rem;
    }

    #filterButtons {
        margin-bottom: 1rem;
    }
}

@media (max-width: 767px) {
    #filterButtons .btn {
        margin-bottom: 0.5rem;
    }
}

/* Additional responsive adjustments */
@media (max-width: 767px) {
    .main-content {
        display: flex;
        flex-direction: column;
    }

    #leftPanel {
        order: -1;
    }

    #clauseContainer {
        order: 1;
    }
}

/* Layout for larger screens */
@media (min-width: 768px) {
    .main-content {
        display: flex;
        flex-wrap: wrap;
    }

    #leftPanel {
        flex: 0 0 100%;
        margin-bottom: 1rem;
    }

    #clauseContainer {
        flex: 1;
    }
}

@media (min-width: 992px) {
    #leftPanel {
        /* position: sticky; */
        top: 20px;
    }
}

/* Scrollbar Styles */
#leftPanel, #filterButtons, #variablesContainer {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

#leftPanel::-webkit-scrollbar, 
#filterButtons::-webkit-scrollbar, 
#variablesContainer::-webkit-scrollbar {
    width: 8px;
}

#leftPanel::-webkit-scrollbar-track, 
#filterButtons::-webkit-scrollbar-track, 
#variablesContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#leftPanel::-webkit-scrollbar-thumb, 
#filterButtons::-webkit-scrollbar-thumb, 
#variablesContainer::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

/* Clause text wrapping */
.clause-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-bottom: 0.5rem;
}

/* Remove bottom margin from clause text paragraphs */
.card .card-body .clause-text {
    margin-bottom: 0;
}