/* ==========================================================================
   Nexus Terminal — Tab Bar & Tabs
   Compact session tabs with status indicators, protocol badges, and
   close / pin controls.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Individual tab
   ----------------------------------------------------------------------- */
.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--tab-bar-height);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    flex-shrink: 0;
    border-right: 1px solid var(--border-subtle);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
    user-select: none;
    max-width: 200px;
}

.tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Active tab */
.tab.active {
    background: var(--bg-base);
    color: var(--text-primary);
}

/* Active indicator — accent bar at the bottom */
.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
}

/* -----------------------------------------------------------------------
   Tab icon (small terminal/protocol icon)
   ----------------------------------------------------------------------- */
.tab-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.tab.active .tab-icon {
    color: var(--text-secondary);
}

/* -----------------------------------------------------------------------
   Tab label
   ----------------------------------------------------------------------- */
.tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* -----------------------------------------------------------------------
   Protocol mini-badge inside tab
   ----------------------------------------------------------------------- */
.tab-badge {
    display: inline-flex;
    align-items: center;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 2px;
    flex-shrink: 0;
    line-height: 1;
}

.tab-badge.badge-ssh {
    background: rgba(78, 205, 196, 0.15);
    color: var(--protocol-ssh);
}
.tab-badge.badge-telnet {
    background: rgba(255, 167, 38, 0.15);
    color: var(--protocol-telnet);
}
.tab-badge.badge-raw {
    background: rgba(171, 71, 188, 0.15);
    color: var(--protocol-raw);
}
.tab-badge.badge-github {
    background: rgba(124, 138, 255, 0.15);
    color: var(--protocol-github);
}

/* -----------------------------------------------------------------------
   Status dot (connection state)
   ----------------------------------------------------------------------- */
.tab-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-tertiary);
}

.tab-status.is-connected    { background: var(--success); }
.tab-status.is-connecting   { background: var(--warning); animation: pulse-dot 1.2s ease infinite; }
.tab-status.is-error        { background: var(--error); }
.tab-status.is-disconnected { background: var(--text-tertiary); }

/* -----------------------------------------------------------------------
   Close button — revealed on hover
   ----------------------------------------------------------------------- */
.tab-close {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    opacity: 0;
    transition:
        opacity var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
    cursor: pointer;
    margin-left: auto;
}

.tab:hover .tab-close,
.tab.active .tab-close {
    opacity: 1;
}

.tab-close:hover {
    background: var(--bg-active);
    color: var(--text-primary);
}

/* -----------------------------------------------------------------------
   Pin indicator
   ----------------------------------------------------------------------- */
.tab-pin {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--text-disabled);
    flex-shrink: 0;
}

.tab.is-pinned .tab-pin {
    color: var(--accent);
}

/* Pinned tabs are always narrow */
.tab.is-pinned {
    max-width: 100px;
    padding: 0 var(--space-2);
}

.tab.is-pinned .tab-label {
    /* Hide label on pinned tabs to save space */
    display: none;
}

.tab.is-pinned .tab-close {
    /* Pinned tabs don't show close by default */
    display: none;
}

/* -----------------------------------------------------------------------
   Drag handle area (for tab reordering)
   ----------------------------------------------------------------------- */
.tab-drag-handle {
    cursor: grab;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    height: 100%;
}

.tab-drag-handle:active {
    cursor: grabbing;
}

/* Drag ghost styling */
.tab.is-dragging {
    opacity: 0.5;
}

.tab.is-drag-over-left::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--accent);
    border-radius: var(--radius-full);
}

.tab.is-drag-over-right::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--accent);
    border-radius: var(--radius-full);
    /* Note: this re-uses ::after — active tab indicator is overridden while dragging */
}

/* -----------------------------------------------------------------------
   New-tab button (+)
   ----------------------------------------------------------------------- */
.tab-new {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tab-bar-height);
    height: var(--tab-bar-height);
    font-size: var(--text-lg);
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
    border: none;
    background: none;
}

.tab-new:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.tab-new:active {
    background: var(--bg-active);
}

/* -----------------------------------------------------------------------
   Tab overflow indicators (chevrons at edges)
   ----------------------------------------------------------------------- */
.tab-bar-overflow-left,
.tab-bar-overflow-right {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    background: linear-gradient(90deg, var(--bg-surface), transparent);
}

.tab-bar-overflow-right {
    background: linear-gradient(-90deg, var(--bg-surface), transparent);
}

.tab-bar.has-overflow-left .tab-bar-overflow-left,
.tab-bar.has-overflow-right .tab-bar-overflow-right {
    display: flex;
}

/* -----------------------------------------------------------------------
   Tab context menu trigger (on right-click)
   ----------------------------------------------------------------------- */
.tab-context-area {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Transparent hit area for right-click context menu */
}

/* -----------------------------------------------------------------------
   Modified indicator (unsaved changes)
   ----------------------------------------------------------------------- */
.tab.is-modified .tab-close::before {
    content: '●';
    font-size: 8px;
    color: var(--accent);
}