/**
 * TangoHUB Tab Navigation Components
 * Standardized tab styles using design tokens
 *
 * Provides a reusable horizontal tab bar with an active underline indicator.
 * Use for any dashboard sub-tab navigation (Email compose/history, future tabs, etc.)
 *
 * SPECIFICITY NOTE (ADR-008):
 * BuddyBoss theme.min.css targets bare `button` elements with primary button
 * colors, border-radius: 100px, and padding. To reliably override these,
 * all selectors use compound parent-child classes which beat any element-level
 * BuddyBoss rule. Critical visual resets use !important to guarantee the tab
 * items never inherit BuddyBoss button chrome.
 *
 * TYPOGRAPHY (LOGIC-021):
 * - font-family: inherit on <button> / <input> (non-inheriting elements)
 * - NEVER set font-family on labels or headings
 *
 * @package TangoHUB_Event_Manager
 * @since   1.2.2
 * @see     docs/decisions/ADR-008-buddyboss-styling-integration.md
 * @see     docs/logic/LOGIC-021-buddyboss-styling.md
 */

/* ==========================================================================
   Tab Navigation Container
   ========================================================================== */

.tgh-tab-nav {
    display: flex;
    align-items: stretch;
    gap: var(--tgh-spacing-lg);
    border-bottom: 1px solid var(--tgh-color-border);
    margin-bottom: var(--tgh-spacing-lg);
}

/* ==========================================================================
   Tab Navigation Items — Hard Reset
   Strips ALL BuddyBoss button styling so tabs render as plain text.
   ========================================================================== */

.tgh-tab-nav .tgh-tab-nav__item,
.tgh-tab-nav .tgh-tab-nav__item:hover,
.tgh-tab-nav .tgh-tab-nav__item:focus,
.tgh-tab-nav .tgh-tab-nav__item:active {
    position: relative;
    display: inline-block;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0;
    padding: 12px 4px;
    font-family: inherit; /* LOGIC-021 */
    font-size: var(--tgh-font-size-base);
    font-weight: normal;
    line-height: 1.4;
    color: var(--tgh-color-text-light);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: none;
}

/* ==========================================================================
   Active Underline Bar
   A short, thick teal accent centered under the active tab text.
   ========================================================================== */

.tgh-tab-nav .tgh-tab-nav__item::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-radius: 4px;
    background: var(--tgh-color-primary) !important;
    transition: none;
}

/* ==========================================================================
   Active State — Teal text + teal underline bar
   ========================================================================== */

.tgh-tab-nav .tgh-tab-nav__item.tgh-tab-nav__item--active,
.tgh-tab-nav .tgh-tab-nav__item.tgh-tab-nav__item--active:hover,
.tgh-tab-nav .tgh-tab-nav__item.tgh-tab-nav__item--active:focus {
    color: var(--tgh-color-primary) !important;
    font-weight: var(--tgh-font-weight-medium);
}

.tgh-tab-nav .tgh-tab-nav__item.tgh-tab-nav__item--active::after {
    width: 70%;
}

/* ==========================================================================
   Modifier: Centered Tabs
   Use on container to center-align tabs with wider spacing.
   ========================================================================== */

.tgh-tab-nav--center {
    justify-content: center;
    gap: var(--tgh-spacing-xl, 32px);
}

/* ==========================================================================
   Modifier: Large Tabs
   Increases font size and weight for prominent filter/navigation tabs.
   ========================================================================== */

.tgh-tab-nav--lg .tgh-tab-nav__item,
.tgh-tab-nav--lg .tgh-tab-nav__item:hover,
.tgh-tab-nav--lg .tgh-tab-nav__item:focus,
.tgh-tab-nav--lg .tgh-tab-nav__item:active {
    font-size: var(--tgh-font-size-xl, 1.25rem) !important;
    font-weight: var(--tgh-font-weight-bold, 700) !important;
    padding: var(--tgh-spacing-sm, 8px) var(--tgh-spacing-lg, 24px);
}

/* ==========================================================================
   Modifier: Dark Active Text
   Active tab shows dark text instead of teal — useful for filter-style tabs
   where the underline bar alone provides enough active indication.
   ========================================================================== */

.tgh-tab-nav--dark-active .tgh-tab-nav__item.tgh-tab-nav__item--active,
.tgh-tab-nav--dark-active .tgh-tab-nav__item.tgh-tab-nav__item--active:hover,
.tgh-tab-nav--dark-active .tgh-tab-nav__item.tgh-tab-nav__item--active:focus {
    color: var(--tgh-color-text, #2d3748) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
    .tgh-tab-nav .tgh-tab-nav__item,
    .tgh-tab-nav .tgh-tab-nav__item:hover {
        padding: 10px 2px;
        font-size: 14px;
    }
}

/* ==========================================================================
   Usage Guidelines (Comments for Developers)
   ========================================================================== */

/*
TAB NAVIGATION USAGE:

Basic Tab Bar (email compose/history):
--------------------------------------
<div class="tgh-tab-nav">
    <button type="button" class="tgh-tab-nav__item tgh-tab-nav__item--active" data-view="compose">
        Compose
    </button>
    <button type="button" class="tgh-tab-nav__item" data-view="history">
        History
    </button>
</div>

Large Centered Filter Tabs (registration page):
------------------------------------------------
<div class="tgh-tab-nav tgh-tab-nav--center tgh-tab-nav--lg tgh-tab-nav--dark-active">
    <button type="button" class="tgh-tab-nav__item tgh-tab-nav__item--active" data-tab="all">
        All
    </button>
    <button type="button" class="tgh-tab-nav__item" data-tab="workshops">
        Workshops
    </button>
</div>

JavaScript Switching:
---------------------
// Remove active class from all items
$('.tgh-tab-nav__item').removeClass('tgh-tab-nav__item--active');
// Add to clicked item
$(this).addClass('tgh-tab-nav__item--active');

MODIFIERS:
- .tgh-tab-nav--center    : Center-align tabs with wider spacing
- .tgh-tab-nav--lg        : Larger font (1.25rem) and bold weight
- .tgh-tab-nav--dark-active: Active tab uses dark text instead of teal

NOTES:
- The active underline bar appears automatically via ::after pseudo-element
- No hover effects by design — tabs should feel like navigation, not buttons
- BuddyBoss button styles are fully neutralized via !important resets
- All colors use design tokens — will adapt to BuddyBoss Customizer changes
*/