/*
 * Boutons — famille officielle .app-btn, copiée de Refactia (design system 835ad17d, section 1).
 *
 * La section 2 de Refactia (classes historiques .btndpm, .submit-btn…) n'est pas reprise :
 * dans Badging, ces classes restent stylées par leurs pages jusqu'à leur migration vers .app-btn.
 * Valeurs : foundation/tokens.css + theme-badging.css. Registre : doc/design-system/README.md
 */

/* ==========================================================================
   1. Famille officielle .app-btn
   Rôle      : --primary | --secondary | --ghost | --danger | --link
   Contexte  : (défaut) pilule de page ou de modale | --toolbar barre d'outils
   Forme     : --icon (carré) | --block (pleine largeur) | --sm (compact)
   États     : :hover, :focus-visible, :active, :disabled / [aria-disabled],
               .is-active / [aria-pressed="true"], .is-loading / [aria-busy]
   ========================================================================== */

.app-btn {
    --app-btn-height: var(--ds-control-lg);
    --app-btn-padding: 10px 18px;
    --app-btn-radius: var(--ds-radius-pill);
    --app-btn-icon-size: 18px;
    --app-btn-bg: var(--ds-surface);
    --app-btn-bg-hover: var(--ds-tint-1);
    --app-btn-fg: var(--ds-ink);
    --app-btn-fg-hover: var(--ds-ink);
    --app-btn-border: var(--ds-line-strong);
    --app-btn-border-hover: var(--ds-line-hover);
    --app-btn-shadow: none;
    --app-btn-shadow-hover: none;
    --app-btn-lift: 0px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-8);
    box-sizing: border-box;
    min-height: var(--app-btn-height);
    margin: 0;
    padding: var(--app-btn-padding);
    border: 1px solid var(--app-btn-border);
    border-radius: var(--app-btn-radius);
    background: var(--app-btn-bg);
    color: var(--app-btn-fg);
    box-shadow: var(--app-btn-shadow);
    font-family: var(--ds-font);
    font-size: var(--ds-text-base);
    font-weight: var(--ds-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition:
        background-color var(--ds-duration) var(--ds-ease),
        border-color var(--ds-duration) var(--ds-ease),
        color var(--ds-duration) var(--ds-ease),
        box-shadow var(--ds-duration) var(--ds-ease),
        transform var(--ds-duration) var(--ds-ease);
}

.app-btn > :is(svg, img) {
    flex: 0 0 auto;
    width: var(--app-btn-icon-size);
    height: var(--app-btn-icon-size);
}

.app-btn:hover {
    background: var(--app-btn-bg-hover);
    border-color: var(--app-btn-border-hover);
    color: var(--app-btn-fg-hover);
    box-shadow: var(--app-btn-shadow-hover);
    text-decoration: none;
    transform: translateY(calc(-1 * var(--app-btn-lift)));
}

.app-btn:active {
    transform: translateY(0);
}

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

/* Rôles */
.app-btn--primary {
    --app-btn-bg: var(--ds-brand);
    --app-btn-bg-hover: var(--ds-brand-hover);
    --app-btn-fg: var(--ds-on-brand);
    --app-btn-fg-hover: var(--ds-on-brand);
    --app-btn-border: var(--ds-brand);
    --app-btn-border-hover: var(--ds-brand-hover);
    --app-btn-shadow: var(--ds-shadow-brand);
    --app-btn-shadow-hover: var(--ds-shadow-brand-hover);
    --app-btn-lift: 1px;
}

.app-btn--secondary {
    --app-btn-bg: var(--ds-surface);
    --app-btn-bg-hover: var(--ds-tint-1);
    --app-btn-fg: var(--ds-ink);
    --app-btn-fg-hover: var(--ds-ink);
    --app-btn-border: var(--ds-line-strong);
    --app-btn-border-hover: var(--ds-line-hover);
}

.app-btn--ghost {
    --app-btn-bg: transparent;
    --app-btn-bg-hover: var(--ds-tint-2);
    --app-btn-fg: var(--ds-ink-subtle);
    --app-btn-fg-hover: var(--ds-accent);
    --app-btn-border: transparent;
    --app-btn-border-hover: transparent;
}

.app-btn--danger {
    --app-btn-bg: var(--ds-danger);
    --app-btn-bg-hover: var(--ds-danger-hover);
    --app-btn-fg: var(--ds-on-brand);
    --app-btn-fg-hover: var(--ds-on-brand);
    --app-btn-border: var(--ds-danger);
    --app-btn-border-hover: var(--ds-danger-hover);
}

.app-btn--link {
    --app-btn-height: auto;
    --app-btn-padding: 4px 2px;
    --app-btn-bg: transparent;
    --app-btn-bg-hover: transparent;
    --app-btn-fg: var(--ds-accent);
    --app-btn-fg-hover: var(--ds-accent-deep);
    --app-btn-border: transparent;
    --app-btn-border-hover: transparent;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-semibold);
}

.app-btn--link:hover {
    text-decoration: underline;
}

/* Contexte barre d'outils et pied de formulaire (référence : éditeur) */
.app-btn--toolbar {
    --app-btn-height: var(--ds-control-md);
    --app-btn-padding: 9px 12px;
    --app-btn-radius: var(--ds-radius-sm);
    --app-btn-shadow: none;
    --app-btn-shadow-hover: none;
    --app-btn-lift: 0px;
    gap: var(--ds-space-6);
    font-size: var(--ds-text-sm);
}

/* Un seul principal dans tout Badging : la marque, y compris en barre d'outils (géométrie --toolbar conservée). */
.app-btn--toolbar.app-btn--primary {
    --app-btn-bg: var(--ds-brand);
    --app-btn-bg-hover: var(--ds-brand-hover);
    --app-btn-fg: var(--ds-on-brand);
    --app-btn-fg-hover: var(--ds-on-brand);
    --app-btn-border: var(--ds-brand);
    --app-btn-border-hover: var(--ds-brand-hover);
}

.app-btn--toolbar.app-btn--ghost {
    --app-btn-padding: 9px 8px;
}

/* Formes */
.app-btn--sm {
    --app-btn-height: var(--ds-control-sm);
    --app-btn-padding: 6px 12px;
    --app-btn-icon-size: 16px;
    font-size: var(--ds-text-md);
}

.app-btn--block {
    display: flex;
    width: 100%;
}

.app-btn--icon {
    --app-btn-padding: 0;
    --app-btn-radius: var(--ds-radius-sm);
    width: var(--app-btn-height);
    min-width: var(--app-btn-height);
    height: var(--app-btn-height);
}

/* États */
.app-btn.is-active,
.app-btn[aria-pressed="true"],
.app-btn[aria-expanded="true"]:is(.app-btn--ghost, .app-btn--icon) {
    --app-btn-bg: var(--ds-tint-2);
    --app-btn-bg-hover: var(--ds-tint-2);
    --app-btn-fg: var(--ds-accent-deep);
    --app-btn-fg-hover: var(--ds-accent-deep);
}

.app-btn:is(:disabled, [aria-disabled="true"], .is-disabled) {
    opacity: 0.55;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    pointer-events: none;
}

.app-btn:is(.is-loading, [aria-busy="true"]) {
    cursor: wait;
}

.app-btn:is(.is-loading, [aria-busy="true"])::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: app-btn-spin 0.8s linear infinite;
}

@keyframes app-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (pointer: coarse) {
    .app-btn:not(.app-btn--link) {
        min-height: max(var(--app-btn-height), var(--ds-control-touch));
    }

    .app-btn--icon {
        width: max(var(--app-btn-height), var(--ds-control-touch));
        min-width: max(var(--app-btn-height), var(--ds-control-touch));
        height: max(var(--app-btn-height), var(--ds-control-touch));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-btn {
        transition: none;
    }

    .app-btn:hover {
        transform: none;
    }

    .app-btn:is(.is-loading, [aria-busy="true"])::after {
        animation-duration: 2.4s;
    }
}