/* Responsive Entities Tabs - Show/Hide Text Based on Available Space */

/* Base styling for responsive tabs */
.entities-tabs {
    display: flex !important;
    flex-direction: row !important;
    border-bottom: 1px solid var(--tab-border-dark, #374151);
    background-color: var(--tab-section-bg-dark, #1f2937);
    padding: 0;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    position: relative;
    min-height: 40px;
}

/* Remove icon-only class by default - show text when space allows */
.entities-tab {
    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;
    flex-shrink: 0;
}

.entities-tab:hover {
    background-color: var(--tab-hover-bg-dark, rgba(75, 85, 99, 0.2));
    color: var(--tab-text-active-dark, #e5e7eb);
}

.entities-tab.active {
    color: var(--tab-text-active-dark, #60a5fa);
    background-color: rgba(74, 144, 226, 0.1);
}

.entities-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #60a5fa;
}

.entities-tab i {
    font-size: 0.875rem;
    margin-right: 0.5rem;
    transition: margin-right 0.3s ease-in-out;
}

/* Tab text - always visible by default */
.entities-tab .tab-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    max-width: 100px;
}

/* When tab is marked as icon-only (via JavaScript) */
.entities-tab.icon-only {
    padding: 0.5rem 0.75rem;
}

.entities-tab.icon-only i {
    margin-right: 0;
}

.entities-tab.icon-only .tab-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
}

/* On hover, show text even for icon-only tabs */
.entities-tab.icon-only:hover {
    padding-right: 1rem;
}

.entities-tab.icon-only:hover i {
    margin-right: 0.5rem;
}

.entities-tab.icon-only:hover .tab-text {
    max-width: 100px;
    opacity: 1;
}

/* Active tab always shows text if possible */
.entities-tab.icon-only.active {
    padding-right: 1rem;
}

.entities-tab.icon-only.active i {
    margin-right: 0.5rem;
}

.entities-tab.icon-only.active .tab-text {
    max-width: 100px;
    opacity: 1;
}

/* Priority levels for hiding text */
.entities-tab[data-hide-priority="1"] { order: 7; } /* Connections - hide first */
.entities-tab[data-hide-priority="2"] { order: 6; } /* Policies */
.entities-tab[data-hide-priority="3"] { order: 5; } /* Behaviors */
.entities-tab[data-hide-priority="4"] { order: 4; } /* Objects */
.entities-tab[data-hide-priority="5"] { order: 3; } /* Locations */
.entities-tab[data-hide-priority="6"] { order: 2; } /* People */
.entities-tab[data-hide-priority="7"] { order: 1; } /* Caller - hide last */

/* Ensure container sizing works properly */
.entities-subtab-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}

.entities-subtab-content.active {
    display: block;
}

.entities-subtab-content > div {
    height: 100%;
}

/* Smooth scrollbar for overflow */
.entities-tabs::-webkit-scrollbar {
    height: 4px;
}

.entities-tabs::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.entities-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.entities-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Media query fallbacks for very small screens */
@media (max-width: 640px) {
    .entities-tab:not(.active) {
        padding: 0.5rem 0.75rem;
    }
    
    .entities-tab:not(.active) i {
        margin-right: 0;
    }
    
    .entities-tab:not(.active) .tab-text {
        max-width: 0;
        opacity: 0;
    }
}