/* Insights Subtabs Styling - Matching Interactive Tabs */

/* Override existing highlights subtab styles to match interactive tabs */
.highlights-subtab-bar {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5); /* slate-700 with transparency */
    background-color: rgba(30, 41, 59, 0.8) !important; /* slate-800 with transparency to match content */
    padding: 0;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: hidden; /* Changed from auto to hidden - no scrollbar */
    gap: 0.25rem;
    height: auto; /* Remove fixed height */
}

.highlights-subtab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    color: var(--tab-text-inactive-dark, #9ca3af);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    white-space: nowrap;
    font-size: 0.875rem;
    margin-right: 0.125rem;
    border-radius: 0; /* Remove rounded corners */
}

.highlights-subtab-button:hover {
    background-color: rgba(51, 65, 85, 0.3); /* slate-700 with low opacity for hover */
    color: var(--tab-text-active-dark, #e5e7eb);
}

.highlights-subtab-button.active {
    color: var(--tab-text-active-dark, #60a5fa);
    background-color: rgba(51, 65, 85, 0.2); /* slate-700 with low opacity for active state */
    border-bottom: none; /* Remove old border style */
}

/* Add the blue underline for active state like interactive tabs */
.highlights-subtab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #60a5fa;
}

.highlights-subtab-button i {
    font-size: 0.875rem;
}

/* Light theme support */
.theme-light .highlights-subtab-bar {
    background-color: var(--tab-section-bg-light, #f9fafb) !important;
    border-bottom-color: var(--tab-border-light, #e5e7eb);
}

.theme-light .highlights-subtab-button {
    color: var(--tab-text-inactive-light, #6b7280);
}

.theme-light .highlights-subtab-button:hover {
    background-color: var(--tab-hover-bg-light, rgba(37, 99, 235, 0.1));
    color: var(--tab-text-active-light, #1f2937);
}

.theme-light .highlights-subtab-button.active {
    color: var(--tab-text-active-light, #2563eb);
    background-color: rgba(37, 99, 235, 0.1);
}

.theme-light .highlights-subtab-button.active::after {
    background-color: #2563eb;
}

/* Ensure proper container spacing without px-4 padding */
.highlights-subtab-container {
    padding: 0;
    height: calc(100% - 41px); /* Account for tab bar height */
    overflow: hidden;
}

/* Adjust content padding if needed */
.highlights-subtab-content {
    padding: 1rem;
}

/* Remove padding from the parent container that was adding px-4 */
#active-highlightsTab .highlights-subtab-bar,
#active-highlightsTab .highlights-subtab-container {
    margin-left: 0;
    margin-right: 0;
}

/* Ensure the highlights tab itself has no padding like the interactive tab */
#active-highlightsTab {
    padding: 0 !important;
}

/* Make subtab bar flush with edges like interactive tabs */
#active-highlightsTab .highlights-subtab-bar {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure subtab container is also flush */
#active-highlightsTab .highlights-subtab-container {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important; /* Ensure no background */
}

/* Match slate blue gradient background from the interface */
#active-highlightsTab {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; /* Slate blue gradient */
}

/* Ensure subtab content areas have consistent background */
.highlights-subtab-content {
    background-color: transparent; /* Let parent background show through */
}

/* Specific rule for the suggestions subtab to ensure side-by-side layout */
#highlights-suggestions {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

#highlights-suggestions.active {
    display: flex !important;
}

/* Side by side container - force flex row layout */
.side-by-side-container {
    background-color: transparent; /* Let parent background show through */
    display: flex !important;
    flex-direction: row !important; /* Force horizontal layout */
    gap: 1rem !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important; /* Remove padding as requested */
    overflow: hidden !important;
    align-items: stretch !important; /* Make columns equal height */
}

/* Column sections - no background to reduce layers */
.column-section {
    background-color: transparent; /* Remove background to reduce layers */
    border-radius: 0.5rem;
    /* padding: 0 !important; */ /* Remove padding around lists - commented out as requested */
    /* Remove bottom margin to prevent stacking */
    /* margin-bottom: 0 !important; */ /* Commented out as requested */
    /* Optional: Add subtle border instead of background */
    border: 1px solid rgba(51, 65, 85, 0.3); /* Subtle slate-700 border */
    flex: 1 1 0 !important; /* Equal width columns */
    min-width: 0 !important; /* Prevent overflow */
    display: flex !important;
    flex-direction: column !important;
}

/* Remove conflicting margins from highlights-tab.html */
.column-section:first-child {
    margin-right: 0 !important;
}

.column-section:last-child {
    margin-left: 0 !important;
}

/* Add padding to headers and content for proper spacing */
.column-section .accordion-header {
    padding: 0.75rem 1rem !important;
}

.column-section .column-content {
    padding: 0 !important; /* No padding on content container */
}

.column-section .accordion-item {
    padding: 0.625rem 1rem !important; /* Keep padding on individual items */
}