/* ============================================================
   DESIGN SYSTEM — TABS
   Path: /assets/css/design-system/src/components/tabs.css
   ============================================================ */

/* ── Tab strip ───────────────────────────────────────────────── */
.ds-tabs {
    display: flex;
    border-bottom: 1.5px solid var(--border-color);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

/* ── Individual tab ──────────────────────────────────────────── */
.ds-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s;
}

/* Hard-set SVG size — prevents browser default 300×150 fallback */
.ds-tab svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.ds-tab:hover {
    color: var(--ds-indigo);
    background: var(--ds-indigo-light);
}

.ds-tab.active,
.ds-tab[aria-selected="true"] {
    color: var(--ds-indigo);
    border-bottom-color: var(--ds-indigo);
    background: transparent;
}

/* ── Tab badge (count pill) ──────────────────────────────────── */
.ds-tab__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.5;
    background: var(--surface-subtle);
    color: var(--color-muted);
    border: var(--border);
    transition: background .15s, color .15s, border-color .15s;
}

.ds-tab.active .ds-tab__badge,
.ds-tab[aria-selected="true"] .ds-tab__badge {
    background: var(--ds-indigo);
    color: var(--color-on-accent);
    border-color: var(--ds-indigo);
}

/* ── Tab panel ───────────────────────────────────────────────── */
.ds-tab-panel { display: none; }
.ds-tab-panel.active,
.ds-tab-panel[aria-hidden="false"] { display: block; }

/* ── Size modifier — compact ─────────────────────────────────── */
.ds-tabs--sm .ds-tab {
    padding: 7px 14px;
    font-size: 12.5px;
}
.ds-tabs--sm .ds-tab svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px;
    max-height: 14px;
}

/* ── Variant — pill tabs (no underline, rounded) ─────────────── */
.ds-tabs--pill {
    border-bottom: none;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.ds-tabs--pill .ds-tab {
    border-bottom: none;
    border-radius: var(--radius-md);
    margin-bottom: 0;
    padding: 7px 16px;
}
.ds-tabs--pill .ds-tab.active,
.ds-tabs--pill .ds-tab[aria-selected="true"] {
    background: var(--ds-indigo-light);
    border: 1px solid var(--ds-indigo-border);
}

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] .ds-tab:hover {
    background: var(--ds-indigo-light);
}