/* ============================================
   TAB OUTLINE OVERLAP FIX
   Applied October 6, 2025
   Fixes tab outline/border overlapping issues
   ============================================ */

/* ============================================
   1. FIX TAB CONTAINER BORDER
   ============================================ */

/* Ensure tab container has proper border that doesn't overlap */
.community-tabs,
.racing-tabs,
.parts-tabs,
.tab-navigation,
[class*="-tabs"] {
  border-bottom: 2px solid var(--color-border);
  position: relative;
  margin-bottom: var(--space-2xl);
  padding-bottom: 0;
  overflow: visible; /* Allow borders to show */
}

/* ============================================
   2. FIX TAB BUTTON POSITIONING
   ============================================ */

/* Fix all tab buttons to align properly with container border */
.tab-btn,
.community-tab-btn,
.racing-tab-btn,
.parts-tab-btn {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; /* Align with container border */
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  outline: none;
  z-index: 1;
}

/* ============================================
   3. FIX ACTIVE TAB BORDER
   ============================================ */

/* Active tab border should cover container border, not overlap content */
.tab-btn.active,
.community-tab-btn.active,
.racing-tab-btn.active,
.parts-tab-btn.active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  z-index: 2; /* Above other tabs */
}

/* ============================================
   4. FIX HOVER STATE
   ============================================ */

.tab-btn:hover,
.community-tab-btn:hover,
.racing-tab-btn:hover,
.parts-tab-btn:hover {
  color: var(--color-text);
  background-color: var(--color-bg-secondary);
  border-bottom-color: var(--color-text-tertiary);
}

/* Don't change hover on active tab */
.tab-btn.active:hover,
.community-tab-btn.active:hover,
.racing-tab-btn.active:hover,
.parts-tab-btn.active:hover {
  border-bottom-color: var(--color-text);
}

/* ============================================
   5. FIX FOCUS/OUTLINE TO PREVENT OVERLAP
   ============================================ */

/* Remove default outline that causes overlap */
.tab-btn:focus,
.community-tab-btn:focus,
.racing-tab-btn:focus,
.parts-tab-btn:focus {
  outline: none;
}

/* Use inset box-shadow for focus state (doesn't overlap) */
.tab-btn:focus-visible,
.community-tab-btn:focus-visible,
.racing-tab-btn:focus-visible,
.parts-tab-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus, #0066cc);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  z-index: 3; /* Above active tab */
}

/* Alternative: outline inside the button */
.tab-btn:focus-visible::before,
.community-tab-btn:focus-visible::before,
.racing-tab-btn:focus-visible::before,
.parts-tab-btn:focus-visible::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px solid var(--color-focus, #0066cc);
  border-radius: var(--radius-sm);
  pointer-events: none;
  border-bottom: none; /* Don't show bottom border */
}

/* ============================================
   6. FIX TAB CONTENT SEPARATION
   ============================================ */

/* Ensure tab content doesn't overlap with tab buttons */
.tab-content {
  padding-top: var(--space-md);
  position: relative;
  clear: both;
  margin-top: 0;
}

/* Add extra spacing when tab is active */
.tab-content.active {
  padding-top: var(--space-lg);
}

/* ============================================
   7. FIX Z-INDEX STACKING
   ============================================ */

/* Proper stacking order for tabs */
.tab-navigation,
.community-tabs,
.racing-tabs,
.parts-tabs,
[class*="-tabs"] {
  z-index: 10; /* Above content */
  position: relative;
}

.tab-btn,
.community-tab-btn,
.racing-tab-btn,
.parts-tab-btn {
  z-index: 11; /* Above container */
}

.tab-btn.active,
.community-tab-btn.active,
.racing-tab-btn.active,
.parts-tab-btn.active {
  z-index: 12; /* Above inactive tabs */
}

.tab-btn:focus-visible,
.community-tab-btn:focus-visible,
.racing-tab-btn:focus-visible,
.parts-tab-btn:focus-visible {
  z-index: 13; /* Above everything */
}

.tab-content {
  z-index: 9; /* Below tabs */
}

/* ============================================
   8. FIX MOBILE TAB OUTLINE
   ============================================ */

@media (max-width: 768px) {
  /* Smaller focus outline on mobile */
  .tab-btn:focus-visible,
  .community-tab-btn:focus-visible,
  .racing-tab-btn:focus-visible,
  .parts-tab-btn:focus-visible {
    box-shadow: inset 0 0 0 1px var(--color-focus, #0066cc);
  }

  .tab-btn:focus-visible::before,
  .community-tab-btn:focus-visible::before,
  .racing-tab-btn:focus-visible::before,
  .parts-tab-btn:focus-visible::before {
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border-width: 1px;
  }

  /* Reduce tab padding on mobile */
  .tab-btn,
  .community-tab-btn,
  .racing-tab-btn,
  .parts-tab-btn {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ============================================
   9. FIX BORDER ALIGNMENT
   ============================================ */

/* Ensure borders align perfectly */
.tab-navigation,
.community-tabs,
.racing-tabs,
.parts-tabs,
[class*="-tabs"] {
  /* Use flexbox baseline to align borders */
  align-items: flex-end;
  display: flex;
  gap: var(--space-sm);
}

/* Fix button baseline alignment */
.tab-btn,
.community-tab-btn,
.racing-tab-btn,
.parts-tab-btn {
  align-self: flex-end;
  line-height: 1.5;
}

/* ============================================
   10. PREVENT OUTLINE FROM PUSHING CONTENT
   ============================================ */

/* Use box-shadow instead of border/outline to prevent layout shift */
.tab-btn:focus-visible,
.community-tab-btn:focus-visible,
.racing-tab-btn:focus-visible,
.parts-tab-btn:focus-visible {
  /* Don't use outline or border that adds to dimensions */
  outline: none;
  border: none;
  /* Use inset shadow instead */
  box-shadow: inset 0 0 0 2px var(--color-focus, #0066cc);
}

/* Active tab with focus */
.tab-btn.active:focus-visible,
.community-tab-btn.active:focus-visible,
.racing-tab-btn.active:focus-visible,
.parts-tab-btn.active:focus-visible {
  /* Combine active border with focus shadow */
  border-bottom-color: var(--color-text);
  box-shadow: inset 0 0 0 2px var(--color-focus, #0066cc);
}

/* ============================================
   11. FIX DASHBOARD SPECIFIC TABS
   ============================================ */

/* Dashboard has slightly different structure */
.dashboard-main .tab-navigation {
  margin-bottom: var(--space-2xl);
  border-bottom: 2px solid var(--color-border);
}

.dashboard-main .tab-btn {
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}

.dashboard-main .tab-btn.active {
  border-bottom-color: var(--color-text);
}

.dashboard-main .tab-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus, #0066cc);
  outline: none;
}

/* ============================================
   12. ENSURE NO OVERLAP WITH CONTENT BELOW
   ============================================ */

/* Add clearfix to tab containers */
.tab-navigation::after,
.community-tabs::after,
.racing-tabs::after,
.parts-tabs::after,
[class*="-tabs"]::after {
  content: "";
  display: table;
  clear: both;
}

/* Ensure content respects tab space */
.tab-content {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-top: var(--space-lg);
}

/* ============================================
   13. FIX KEYBOARD NAVIGATION VISUAL FEEDBACK
   ============================================ */

/* Make keyboard focus more visible without overlap */
.tab-btn:focus-visible,
.community-tab-btn:focus-visible,
.racing-tab-btn:focus-visible,
.parts-tab-btn:focus-visible {
  /* Use background color change as additional indicator */
  background-color: var(--color-bg-secondary);
  /* Inset shadow for focus ring */
  box-shadow: inset 0 0 0 2px var(--color-focus, #0066cc);
  /* Slight scale for feedback */
  transform: scale(1.02);
}

/* Active + focused state */
.tab-btn.active:focus-visible,
.community-tab-btn.active:focus-visible,
.racing-tab-btn.active:focus-visible,
.parts-tab-btn.active:focus-visible {
  /* Keep active styling visible */
  border-bottom-color: var(--color-text);
  /* Add focus ring */
  box-shadow: inset 0 0 0 2px var(--color-focus, #0066cc);
}

/* ============================================
   14. PRINT STYLES
   ============================================ */

@media print {
  /* Remove focus outlines in print */
  .tab-btn:focus-visible,
  .community-tab-btn:focus-visible,
  .racing-tab-btn:focus-visible,
  .parts-tab-btn:focus-visible {
    box-shadow: none;
    outline: none;
    transform: none;
  }

  /* Show only active tab in print */
  .tab-btn:not(.active),
  .community-tab-btn:not(.active),
  .racing-tab-btn:not(.active),
  .parts-tab-btn:not(.active) {
    display: none;
  }
}