/*
 * Tabs Component Styles - Pop Art Edition
 * Standard tabs with border separators and yellow active state
 * Plus pill-style tabs for inline filters
 *
 * TSX Reference:
 * .tab-item { transition: all 0.15s ease; }
 * .tab-item:hover:not(.tab-active) { background: darkMode ? '#374151' : '#FEF3C7'; }
 * .tab-active { background: #FBBF24; margin-bottom: -4px; border-bottom: 4px solid #FBBF24; color: #111827; }
 */

@layer components {
  /* ==========================================================================
     Standard Tabs - Card-style with border separators
     Used for main navigation tabs (e.g., project tabs)
     ========================================================================== */

  .tabs {
    display: flex;
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    border-bottom: none;
  }

  .tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ink);
    background: transparent;
    border: none;
    border-right: var(--border-thick) solid var(--color-comic-border);
    cursor: pointer;
    transition: all 0.15s ease;

    &:last-child {
      border-right: none;
    }

    &:hover:not(.tab-active) {
      background: light-dark(#FEF3C7, #374151);
      text-decoration: none;
    }

    /* Icon styling */
    & svg {
      width: 16px;
      height: 16px;
      opacity: 0.7;
      transition: opacity 0.15s ease;
    }

    &:hover svg {
      opacity: 1;
    }
  }

  .tab-active {
    background: #FBBF24;
    color: #111827;
    /* Extend below the border to cover the content border */
    margin-bottom: -4px;
    border-bottom: 4px solid #FBBF24;

    & svg {
      opacity: 1;
    }
  }

  /* Tabs content panel */
  .tabs-content {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-md);
    padding: var(--space-4);
  }

  /* ==========================================================================
     Navigation Tabs - For page-level navigation (like project tabs)
     Sits within a card/container, tabs don't need outer border
     ========================================================================== */

  .nav-tabs {
    display: flex;
    border-bottom: var(--border-thick) solid var(--color-comic-border);
    background: var(--color-surface);
  }

  .nav-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ink);
    background: transparent;
    border: none;
    border-right: var(--border-thick) solid var(--color-comic-border);
    cursor: pointer;
    transition: all 0.15s ease;

    &:last-child {
      border-right: none;
    }

    &:hover:not(.nav-tab-active) {
      background: light-dark(#FEF3C7, #374151);
      text-decoration: none;
    }

    /* Icon styling */
    & svg {
      width: 16px;
      height: 16px;
      opacity: 0.7;
      transition: opacity 0.15s ease;
    }

    &:hover svg {
      opacity: 1;
    }
  }

  .nav-tab-active {
    background: #FBBF24;
    color: #111827;
    margin-bottom: -4px;
    border-bottom: 4px solid #FBBF24;

    & svg {
      opacity: 1;
    }
  }

  /* ==========================================================================
     Pill Tabs - Inline segmented control style
     Used for filters within a page
     ========================================================================== */

  .pill-tabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: light-dark(#e5e7eb, #374151);
    border: var(--border-thin) solid var(--color-comic-border);
  }

  .pill-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1_5);
    padding: var(--space-1_5) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
    color: var(--color-ink);
    background: transparent;
    border: var(--border-thin) solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;

    &:hover:not(.pill-tab-active) {
      background: light-dark(#fef3c7, #4b5563);
      text-decoration: none;
    }

    /* Icon styling */
    & svg {
      flex-shrink: 0;
      opacity: 0.7;
      transition: opacity 0.15s ease;
    }

    &:hover svg {
      opacity: 1;
    }
  }

  .pill-tab-active {
    background: #EC4899;
    color: white;
    border-color: var(--color-comic-border);
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
    transform: translate(-1px, -1px);

    & svg {
      opacity: 1;
    }
  }

  /* ==========================================================================
     Filter Tabs - Pill-style tabs for type/category filters
     ========================================================================== */

  .filter-tabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    margin-bottom: var(--space-4);
    background: light-dark(#e5e7eb, #374151);
    border: var(--border-thin) solid var(--color-comic-border);
  }

  .filter-tab {
    padding: var(--space-1_5) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
    color: var(--color-ink);
    background: transparent;
    border: var(--border-thin) solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;

    &:hover:not(.filter-tab-active):not(.active) {
      background: light-dark(#fef3c7, #4b5563);
      text-decoration: none;
    }
  }

  .filter-tab-active,
  .filter-tab.active {
    color: #111827;
    background: #FBBF24;
    border-color: var(--color-comic-border);
    box-shadow: 2px 2px 0 var(--comic-shadow-color);
    transform: translate(-1px, -1px);
  }

  /* Status-specific filter tab colors */
  .filter-tab-failed.filter-tab-active,
  .filter-tab-failed.active {
    background: var(--color-pow-red);
    color: white;
    border-bottom-color: var(--color-pow-red);
  }

  .filter-tab-pending.filter-tab-active,
  .filter-tab-pending.active {
    background: var(--color-zap-yellow);
    color: #111827;
    border-bottom-color: var(--color-zap-yellow);
  }

  .filter-tab-processed.filter-tab-active,
  .filter-tab-processed.active {
    background: var(--color-boom-green);
    color: white;
    border-bottom-color: var(--color-boom-green);
  }
}