/*
 * Contrôles de sélection Refactia.
 *
 * 1. .app-segmented  onglets segmentés à indicateur glissant
 *                    (référence : Brouillon / Devis / Commande / Facture de la liste)
 * 2. .app-tabs       onglets et navigation de section (référence : éditeur)
 * 3. .app-chip       puce de filtre activable (référence : recherche de l'éditeur)
 * L'état actif est porté par .is-active, aria-selected, aria-current ou aria-pressed.
 * Valeurs : foundation/tokens.css. Registre : doc/design-system/README.md
 */

/* ==========================================================================
   1. Onglets segmentés
   La largeur de l'indicateur dépend de --app-segmented-count (2 à 5) ;
   sa position suit --app-segmented-index ou un transform posé par le JS.
   ========================================================================== */

.app-segmented {
    --app-segmented-inset: 6px;
    --app-segmented-count: 1;
    --app-segmented-index: 0;
    --app-segmented-item-width: 120px;
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--app-segmented-inset);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-raised);
    font-family: var(--ds-font);
    overflow: hidden;
}

.app-segmented--2 { --app-segmented-count: 2; }
.app-segmented--3 { --app-segmented-count: 3; }
.app-segmented--4 { --app-segmented-count: 4; }
.app-segmented--5 { --app-segmented-count: 5; }

.app-segmented__indicator {
    position: absolute;
    z-index: 1;
    top: var(--app-segmented-inset);
    bottom: var(--app-segmented-inset);
    left: var(--app-segmented-inset);
    width: calc((100% - 2 * var(--app-segmented-inset)) / var(--app-segmented-count));
    border-radius: var(--ds-radius-pill);
    background: var(--ds-brand);
    box-shadow: var(--ds-shadow-brand);
    transform: translateX(calc(var(--app-segmented-index) * 100%));
    transition: transform var(--ds-duration-slow) var(--ds-ease);
    pointer-events: none;
}

.app-segmented__item {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--app-segmented-item-width);
    margin: 0;
    padding: var(--ds-space-10) 0;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: var(--ds-ink-subtle);
    font: inherit;
    font-size: var(--ds-text-base);
    font-weight: var(--ds-weight-bold);
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--ds-duration) var(--ds-ease);
}

.app-segmented__item:hover {
    color: var(--ds-ink);
}

.app-segmented__item:is(.is-active, .active, [aria-selected="true"], [aria-current="page"], [aria-pressed="true"]) {
    color: var(--ds-on-brand);
}

.app-segmented__item:focus-visible {
    outline: 2px solid var(--ds-focus-color);
    outline-offset: -2px;
}

@media (max-width: 768px) {
    .app-segmented {
        display: flex;
        width: 100%;
    }

    .app-segmented__item {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: var(--ds-space-12) 0;
        font-size: var(--ds-text-md);
    }
}

/* ==========================================================================
   2. Onglets et navigation de section
   ========================================================================== */

.app-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-8);
    box-sizing: border-box;
    margin: 0;
    padding: 9px 13px;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-ink-subtle);
    font-family: var(--ds-font);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-bold);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ds-duration-fast) var(--ds-ease), color var(--ds-duration-fast) var(--ds-ease);
}

.app-tabs__item:hover,
.app-tabs__item:is(.is-active, [aria-selected="true"], [aria-current], [aria-pressed="true"]) {
    background: var(--ds-tint-2);
    color: var(--ds-accent-deep);
    text-decoration: none;
}

.app-tabs__item:focus-visible {
    outline: 2px solid var(--ds-focus-color);
    outline-offset: 2px;
}

/* Sur un fond teinté (volet d'aperçu), l'onglet actif prend la surface. */
.app-tabs--on-tint .app-tabs__item:is(.is-active, [aria-selected="true"], [aria-current], [aria-pressed="true"]) {
    background: var(--ds-surface);
    color: var(--ds-ink);
}

@media (pointer: coarse) {
    .app-tabs__item {
        min-height: var(--ds-control-touch);
    }
}

/* ==========================================================================
   3. Puce de filtre
   ========================================================================== */

.app-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-4);
    box-sizing: border-box;
    min-height: var(--ds-control-sm);
    margin: 0;
    padding: var(--ds-space-6) 9px;
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-ink-subtle);
    font-family: var(--ds-font);
    font-size: var(--ds-text-md);
    font-weight: var(--ds-weight-medium);
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ds-duration-fast) var(--ds-ease), color var(--ds-duration-fast) var(--ds-ease);
}

.app-chip:hover {
    background: var(--ds-tint-2);
    color: var(--ds-accent-deep);
}

.app-chip:is(.is-active, [aria-pressed="true"]) {
    background: var(--ds-tint-3);
    color: var(--ds-accent-deep);
}

.app-chip:focus-visible {
    outline: 2px solid var(--ds-focus-color);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .app-chip {
        min-height: var(--ds-control-touch);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-segmented__indicator,
    .app-segmented__item,
    .app-tabs__item,
    .app-chip {
        transition: none;
    }
}