/**
 * PM UI Framework
 * Component: Tabs
 * Version: 0.1.0
 *
 * Tabs component styles
 */


/* =========================================
   TABS BASE
========================================= */

.pm-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* Tabs navigation */

.pm-tabs-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--pm-border, #e0e0e0);
    overflow-x: auto;
    scrollbar-width: none;
}

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


/* Tab button */

.pm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.75rem 1.25rem;

    background: transparent;
    border: none;

    color: var(--pm-text-muted, #666);

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}


.pm-tab:hover {
    color: var(--pm-primary, #2E7D32);
}


/* Active tab */

.pm-tab.is-active {
    color: var(--pm-primary, #2E7D32);
}


/* Active indicator */

.pm-tab.is-active::after {

    content: "";

    position: absolute;

    bottom: -1px;
    left: 0;
    right: 0;

    height: 3px;

    background: var(--pm-primary, #2E7D32);

    border-radius: 3px 3px 0 0;
}

 
/* =========================================
   TAB PANELS
========================================= */

.pm-tabs-content {
    width: 100%;
    padding-top: 1.5rem;
}


/* Individual panel */

.pm-tab-panel {

    display: none;

    width: 100%;

    animation: pmTabFade 0.25s ease;
}


/* Active panel */

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


/* Fade animation */

@keyframes pmTabFade {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}



/* =========================================
   TABS CARD STYLE
========================================= */

.pm-tabs-card {

    background: var(--pm-surface, #ffffff);

    border: 1px solid var(--pm-border, #e0e0e0);

    border-radius: var(--pm-radius-lg, 12px);

    box-shadow: var(--pm-shadow-sm, 0 2px 8px rgba(0,0,0,.08));

    overflow: hidden;
}


/* Card navigation */

.pm-tabs-card .pm-tabs-nav {

    padding: 0.5rem 0.75rem;

    background: var(--pm-bg-soft, #fafafa);

}


/* Card content */

.pm-tabs-card .pm-tabs-content {

    padding: 1.5rem;

}

/* =========================================
   TABS PILLS VARIANT
========================================= */

.pm-tabs-pills .pm-tabs-nav {

    border-bottom: none;

    gap: 0.5rem;

    padding: 0.25rem;

    background: var(--pm-bg-soft, #f5f5f5);

    border-radius: var(--pm-radius-md, 8px);

}


/* Pill item */

.pm-tabs-pills .pm-tab {

    border-radius: var(--pm-radius-md, 8px);

    padding: 0.65rem 1.15rem;

}


/* Remove underline */

.pm-tabs-pills .pm-tab::after {

    display: none;

}


/* Active pill */

.pm-tabs-pills .pm-tab.is-active {

    background: var(--pm-primary, #2E7D32);

    color: #ffffff;

}



/* =========================================
   TAB SIZES
========================================= */


/* Small */

.pm-tabs-sm .pm-tab {

    padding: 0.45rem 0.85rem;

    font-size: 0.875rem;

}


/* Large */

.pm-tabs-lg .pm-tab {

    padding: 0.9rem 1.5rem;

    font-size: 1.05rem;

}



/* =========================================
   TAB STATES
========================================= */

.pm-tab:focus-visible {

    outline: 3px solid rgba(25,118,210,.35);

    outline-offset: 2px;

}


/* Disabled */

.pm-tab.is-disabled {

    opacity: .45;

    cursor: not-allowed;

    pointer-events: none;

}


/* =========================================
   RESPONSIVE TABS
========================================= */

@media (max-width: 768px) {


    .pm-tabs-nav {

        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        justify-content: flex-start;

    }


    .pm-tab {

        flex: 0 0 auto;

        white-space: nowrap;

        padding: 0.65rem 1rem;

    }


    .pm-tabs-content {

        padding-top: 1rem;

    }


    .pm-tabs-card .pm-tabs-content {

        padding: 1rem;

    }


}



/* =========================================
   COLOR VARIANTS
========================================= */


/* Secondary */

.pm-tabs-secondary .pm-tab.is-active {

    color: var(--pm-secondary, #1976D2);

}


.pm-tabs-secondary .pm-tab.is-active::after {

    background: var(--pm-secondary, #1976D2);

}



/* Accent */

.pm-tabs-accent .pm-tab.is-active {

    color: var(--pm-accent, #FFC107);

}


.pm-tabs-accent .pm-tab.is-active::after {

    background: var(--pm-accent, #FFC107);

}




/* =========================================
   FILLED TABS
========================================= */

.pm-tabs-filled .pm-tabs-nav {

    background: var(--pm-bg-soft, #f5f5f5);

    padding: .35rem;

    border-radius: var(--pm-radius-md, 8px);

    border-bottom: none;

}


.pm-tabs-filled .pm-tab {

    border-radius: var(--pm-radius-md, 8px);

}


.pm-tabs-filled .pm-tab.is-active {

    background: var(--pm-primary, #2E7D32);

    color: #ffffff;

}


.pm-tabs-filled .pm-tab.is-active::after {

    display: none;

}


/* =========================================
   ACCESSIBILITY & UTILITIES
========================================= */


/* Hidden tab panel */

.pm-tab-panel[hidden] {

    display: none !important;

}



/* Tab with icon */

.pm-tab-icon {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

}


.pm-tab-icon svg,
.pm-tab-icon img {

    width: 1.1rem;

    height: 1.1rem;

    flex-shrink: 0;

}



/* =========================================
   WORDPRESS CONTENT SUPPORT
========================================= */

.pm-tab-panel > *:first-child {

    margin-top: 0;

}


.pm-tab-panel > *:last-child {

    margin-bottom: 0;

}


/* Images inside tabs */

.pm-tab-panel img {

    max-width: 100%;

    height: auto;

    border-radius: var(--pm-radius-md, 8px);

}



/* =========================================
   TAB ALIGNMENT
========================================= */

.pm-tabs-center .pm-tabs-nav {

    justify-content: center;

}


.pm-tabs-right .pm-tabs-nav {

    justify-content: flex-end;

}



/* =========================================
   VERSION
========================================= */


/**
 * PM UI Framework
 * Tabs Component
 * Version: 0.1.0
 */