/* ============================================================
   Shared Tab Component
   - .tr-pill-nav + .tr-pill   → dark pill (page-level nav)
   - .tr-underline-nav + .tr-underline-tab → underline (sub-nav)
   - .tr-tab-panel              → shared panel visibility
   ============================================================ */

/* ------------------------------------------------------------
   Variant 1: Pill Nav (dark pill, page-level navigation)
   ------------------------------------------------------------ */

.tr-pill-nav {
    display: flex;
    gap: var(--tr-space-1);
    flex-wrap: wrap;
}

/* Use .tr-pill-nav > to beat WP admin button resets */
.tr-pill-nav > .tr-pill,
.tr-pill {
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-500);
    background: var(--tr-color-surface);
    border: none;
    border-radius: var(--tr-radius-full);
    padding: var(--tr-space-2) var(--tr-space-4);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--tr-transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    white-space: nowrap;
    line-height: 1.4;
    box-sizing: border-box;
}

.tr-pill-nav > .tr-pill:hover,
.tr-pill:hover {
    background: var(--tr-color-slate-200);
    color: var(--tr-color-slate-700);
    text-decoration: none;
}

.tr-pill-nav > .tr-pill.is-active,
.tr-pill.is-active {
    background: var(--tr-color-slate-800);
    color: var(--tr-color-white);
}

.tr-pill-nav > .tr-pill.is-active:hover,
.tr-pill.is-active:hover {
    background: var(--tr-color-slate-800);
    color: var(--tr-color-white);
}

/* ------------------------------------------------------------
   Variant 2: Underline Nav (sub-navigation in panel/card)
   ------------------------------------------------------------ */

.tr-underline-nav {
    display: flex;
    gap: var(--tr-space-6);
    border-bottom: 2px solid var(--tr-color-slate-200);
}

.tr-underline-nav > .tr-underline-tab,
.tr-underline-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-2);
    padding: var(--tr-space-3) 0;
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-400);
    text-decoration: none;
    transition: color var(--tr-transition-base);
    cursor: pointer;
    border: none;
    background: transparent;
    position: relative;
    margin-bottom: -2px;
    box-sizing: border-box;
}

.tr-underline-tab:hover {
    color: var(--tr-color-slate-700);
    text-decoration: none;
}

.tr-underline-tab.is-active {
    color: var(--tr-color-slate-800);
}

.tr-underline-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tr-color-primary);
    border-radius: var(--tr-radius-full) var(--tr-radius-full) 0 0;
}

/* ------------------------------------------------------------
   Shared Tab Panel
   ------------------------------------------------------------ */

.tr-tab-panel {
    display: none;
}

.tr-tab-panel.is-active {
    display: block;
}