/* ─── ibv-tabs.css — Bay Tab Tile Grid Layout (Task #19 + #20) ──────────────
   Container: ~500px wide, grows to however many rows of 40px tiles exist
   Each tile: 80–120px wide × 40px tall
   Active tab: 2px orange line at top edge
   Action zone (top 10px → expands to 20px on hover-500ms)
   Drag handle: bottom 30px
   2026-06-23: dropped the old max-height:80px + overflow:hidden cap — that
   was designed around an "…+N" overflow badge that was never actually built,
   so any 3rd+ row of tabs just got silently clipped with no way to reach it.
   No badge to build now either; the container just grows to fit.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Container ──────────────────────────────────────────────────────────── */
.ibv-bay-tabs {
    display: flex;
    flex-wrap: wrap;              /* as many rows as needed, left-to-right */
    align-content: flex-start;
    width: 100%;
    max-width: 560px;
    height: auto;
    gap: 2px;
    position: relative;
    padding: 0;
    margin-bottom: 10px;
}

/* ── Individual tile ─────────────────────────────────────────────────────── */
.ibv-bay-tab {
    /* geometry */
    flex: 0 0 auto;
    width: 80px;
    height: 40px;
    box-sizing: border-box;

    /* reset / base */
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--ibv-border);
    border-radius: 6px;
    background: var(--ibv-card);
    color: var(--ibv-text);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
    user-select: none;
}

.ibv-bay-tab:hover {
    border-color: var(--ibv-accent);
    z-index: 2;
}

/* Viewing tab (.active): warm beige tint, muted top line, buttons on hover only */
.ibv-bay-tab.active {
    border-color: var(--ibv-accent);
    background: var(--ibv-accent-soft);
    color: var(--ibv-text);
}

.ibv-bay-tab.active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: color-mix(in srgb, var(--ibv-accent) 50%, transparent);
    border-radius: 6px 6px 0 0;
}

/* Destination tab (.dest): strong accent — clearly the generation target */
.ibv-bay-tab.dest {
    background: color-mix(in srgb, var(--ibv-accent) 18%, var(--ibv-card));
    border-color: var(--ibv-accent);
    color: var(--ibv-accent);
}

.ibv-bay-tab.dest::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--ibv-accent);
    border-radius: 6px 6px 0 0;
}

/* Dest: expand action zone with only the activate button always visible */
.ibv-bay-tab.dest .ibv-tab-actions {
    flex-basis: 20px;
    height: 20px;
    opacity: 1;
    transition-delay: 0s;
}

.ibv-bay-tab.dest .rename-btn,
.ibv-bay-tab.dest .close-btn {
    display: none;
}

/* Activate button: filled accent to echo the top line */
.ibv-bay-tab.dest .activate-btn {
    background: var(--ibv-accent);
    color: #fff;
    border-radius: 3px;
}

/* ── Action zone (top portion of tile) ──────────────────────────────────── */
.ibv-tab-actions {
    /* Collapsed: 10px tall, icons near-invisible */
    flex: 0 0 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
    overflow: hidden;
    transition: flex-basis 0.15s ease, height 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    position: relative;
    z-index: 1;
}

/* Expand on hover (500ms delay) */
.ibv-bay-tab:hover .ibv-tab-actions {
    flex-basis: 20px;
    height: 20px;
    opacity: 1;
    transition-delay: 0.5s, 0.5s, 0.3s;
}

.ibv-tab-action-btn {
    border: none;
    background: transparent;
    padding: 0 3px;
    font-size: 0.65rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ibv-muted);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    transition: color 0.12s ease, background 0.12s ease;
    font-family: inherit;
}

.ibv-tab-action-btn:hover {
    color: var(--ibv-accent);
    background: color-mix(in srgb, var(--ibv-accent) 12%, transparent);
}

/* Close button specific style */
.ibv-tab-action-btn.close-btn:hover {
    color: var(--ibv-danger);
    background: var(--ibv-danger-soft);
}

/* ── Drag handle zone (bottom 30px of tile) ──────────────────────────────── */
.ibv-tab-handle {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: grab;
    gap: 5px;
    overflow: hidden;
}

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

.ibv-tab-label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1.2;
}

.ibv-tab-count {
    color: var(--ibv-muted);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* ── Drag state ──────────────────────────────────────────────────────────── */
.ibv-bay-tab.drag-source {
    opacity: 0.45;
    border-style: dashed;
}

.ibv-bay-tab.drag-over {
    border-color: var(--ibv-accent);
    background: var(--ibv-accent-soft);
    box-shadow: 0 0 0 2px var(--ibv-accent);
}

/* ── Overflow indicator badge ────────────────────────────────────────────── */
.ibv-tabs-overflow {
    flex: 0 0 auto;
    height: 40px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--ibv-border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--ibv-muted);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0 8px;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
    position: relative;
}

.ibv-tabs-overflow:hover {
    border-color: var(--ibv-accent);
    color: var(--ibv-accent);
}

/* ── Overflow dropdown ───────────────────────────────────────────────────── */
.ibv-tabs-overflow-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    background: var(--ibv-card);
    border: 1px solid var(--ibv-border);
    border-radius: 10px;
    box-shadow: var(--ibv-shadow);
    padding: 6px;
    min-width: 180px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: ibv-pop 0.16s ease;
}

.ibv-tabs-overflow-menu.hidden {
    display: none;
}

.ibv-overflow-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ibv-text);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
    width: 100%;
}

.ibv-overflow-item:hover {
    background: var(--ibv-accent-soft);
    border-color: var(--ibv-accent);
    color: var(--ibv-accent);
}

.ibv-overflow-item-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ibv-overflow-item-count {
    color: var(--ibv-muted);
    font-size: 0.68rem;
    flex-shrink: 0;
}

.ibv-overflow-item-close {
    border: none;
    background: transparent;
    color: var(--ibv-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    border-radius: 4px;
    line-height: 1;
    font-family: inherit;
    transition: color 0.12s ease, background 0.12s ease;
}

.ibv-overflow-item-close:hover {
    color: var(--ibv-danger);
    background: var(--ibv-danger-soft);
}

/* ── Rename inline input ─────────────────────────────────────────────────── */
.ibv-tab-rename-input {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    outline: none;
    padding: 0;
    width: 100%;
}

/* ── Add-tab button (inside the tile grid, last item) ───────────────────── */
.ibv-tab-add-btn {
    flex: 0 0 auto;
    height: 40px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--ibv-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ibv-accent);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0 10px;
    font-family: inherit;
    line-height: 1;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ibv-tab-add-btn:hover {
    border-color: var(--ibv-accent);
    background: var(--ibv-accent-soft);
}

/* ── Result card hover info overlay (D3) ────────────────────────────────── */
.ibv-card-hover-info {
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.ibv-card:hover .ibv-card-hover-info {
    opacity: 1;
}

/* ── Empty state fallback ────────────────────────────────────────────────── */
.ibv-bay-empty-tile {
    flex: 0 0 auto;
    height: 40px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--ibv-border);
    border-radius: 6px;
    color: var(--ibv-muted);
    font-size: 0.75rem;
    padding: 0 12px;
}