/* =========================================================
   TABS
   assets/css/components/tabs.css
   =========================================================
   Shared tab navigation component used across all tool pages.

   Standard class names:
     .tool-tabs-nav     — tab navigation container
     .tool-tab          — individual tab button
     .tool-tab--active  — active tab state (BEM modifier)

   These names are tool-agnostic — safe to reuse in any
   current or future tool page without prefix conflicts.

   Responsive rules are self-contained here so each tool's
   responsive CSS file carries no tab-specific media blocks.

   Loaded by:
     palette-builder.php
     typography-builder.php
   ========================================================= */


/* =========================================================
   TAB NAV CONTAINER
   ========================================================= */

.tool-tabs-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-primary);
    border-radius: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tool-tabs-nav::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   TAB BUTTON
   ========================================================= */

.tool-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    font-family: var(--font-primary);
}

.tool-tab:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.tool-tab--active,
.tool-tab--active:hover {
    background: var(--color-primary);
    color: var(--text-inverse);
    font-weight: var(--font-semi-bold);
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   RESPONSIVE
   =========================================================
   ≥768px – ≤1024px  Tablet: compress tabs, labels visible.
   ≤768px            Mobile: compact sizing, labels visible.
   ≤767px            Small mobile: inactive tabs icon-only;
                     active tab gets extra horizontal room.
   ========================================================= */

/* ── Tablet — compress tabs, keep labels visible ── */
@media (min-width: 768px) and (max-width: 1024px) {

    .tool-tabs-nav {
        gap: 0.15rem;
    }

    .tool-tab {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }
}

/* ── Mobile — compact tabs, labels still shown ── */
@media (max-width: 768px) {

    .tool-tabs-nav {
        gap: 0.2rem;
        padding: 0.5rem 0.6rem;
    }

    .tool-tab {
        padding: 0.4rem 0.65rem;
        font-size: 0.8rem;
    }
}

/* ── Small mobile — icon-only for inactive tabs ──
   Inactive tabs: hide label, keep icon.
   Active tab: icon + label with extra horizontal room.
   No JS required — pure CSS class toggle on .tool-tab--active.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .tool-tab:not(.tool-tab--active) span {
        display: none;
    }

    .tool-tab--active,
    .tool-tab--active:hover {
        padding: 0.4rem 0.85rem;
    }
}