/* Force side-by-side layout for Insights tab columns */

/* Use very specific selectors to override any conflicts */
#active-highlightsTab .highlights-subtab-content.active .side-by-side-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    width: 100% !important;
    height: 100% !important;
    padding: 1rem !important;
    overflow: hidden !important;
    align-items: stretch !important;
    background-color: transparent !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

/* Force columns to be side by side */
#active-highlightsTab .highlights-subtab-content.active .side-by-side-container > .column-section {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(50% - 0.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: transparent !important;
    border: 1px solid rgba(51, 65, 85, 0.3) !important;
    border-radius: 0.5rem !important;
    padding: 0 !important; /* Remove padding around lists */
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    float: none !important;
    width: auto !important;
}

/* Remove any possible flex overrides on parent containers */
#active-highlightsTab .highlights-subtab-content.active {
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure no conflicting styles from other stylesheets */
#highlights-suggestions.highlights-subtab-content.active {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

/* Debug styles - add colored borders to verify layout */
.debug-layout .side-by-side-container {
    border: 2px solid red !important;
}

.debug-layout .column-section:first-child {
    border: 2px solid green !important;
}

.debug-layout .column-section:last-child {
    border: 2px solid blue !important;
}