/*
 * Menus Refactia.
 *
 * 1. .app-menu         menu déroulant (actions, choix, menu contextuel)
 * 2. .app-action-list  liste d'actions d'un panneau latéral
 *                      (référence : panneau d'une facture dans la liste)
 * L'ouverture, la fermeture et le positionnement restent gérés par le JS
 * du module ; ce fichier ne porte que l'apparence et les états.
 * Valeurs : foundation/tokens.css. Registre : doc/design-system/README.md
 */

/* ==========================================================================
   1. Menu déroulant
   ========================================================================== */

.app-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
    min-width: 200px;
    max-width: min(360px, calc(100vw - 24px));
    margin: 0;
    padding: var(--ds-space-6);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: var(--ds-shadow-menu);
    font-family: var(--ds-font);
    list-style: none;
}

.app-menu[hidden] {
    display: none;
}

.app-menu__label {
    margin: 0;
    padding: var(--ds-space-8) var(--ds-space-10) var(--ds-space-4);
    color: var(--ds-ink-muted);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-weight-bold);
    letter-spacing: var(--ds-tracking-caps);
    text-transform: uppercase;
}

.app-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-10);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ds-control-md);
    margin: 0;
    padding: var(--ds-space-8) var(--ds-space-10);
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    color: var(--ds-ink);
    font: inherit;
    font-size: var(--ds-text-base);
    font-weight: var(--ds-weight-semibold);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ds-duration-fast) var(--ds-ease), color var(--ds-duration-fast) var(--ds-ease);
}

.app-menu__item > :is(svg, img) {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.app-menu__item:hover {
    background: var(--ds-tint-2);
    color: var(--ds-accent-deep);
    text-decoration: none;
}

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

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

.app-menu__item--danger {
    color: var(--ds-danger-fg);
}

.app-menu__item--danger:hover {
    background: var(--ds-danger-bg);
    color: var(--ds-danger-fg);
}

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

.app-menu__divider {
    height: 1px;
    margin: var(--ds-space-4) var(--ds-space-6);
    border: 0;
    background: var(--ds-line);
}

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

/* ==========================================================================
   2. Liste d'actions de panneau
   ========================================================================== */

.app-action-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-action {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ds-space-10);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ds-control-touch);
    margin: 0;
    padding: 11px var(--ds-space-12);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-family: var(--ds-font);
    font-size: var(--ds-text-md);
    font-weight: var(--ds-weight-semibold);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ds-duration-fast) var(--ds-ease), border-color var(--ds-duration-fast) var(--ds-ease), color var(--ds-duration-fast) var(--ds-ease);
}

.app-action > :is(svg, img) {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.app-action:hover {
    background: var(--ds-tint-1);
    border-color: var(--ds-line-hover);
    color: var(--ds-ink);
    text-decoration: none;
}

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

.app-action--positive {
    border-color: var(--ds-brand);
    background: var(--ds-brand);
    color: var(--ds-on-brand);
}

.app-action--positive:hover {
    border-color: var(--ds-brand-hover);
    background: var(--ds-brand-hover);
    color: var(--ds-on-brand);
}

.app-action--danger {
    border-color: var(--ds-danger);
    background: var(--ds-danger);
    color: var(--ds-on-brand);
}

.app-action--danger:hover {
    border-color: var(--ds-danger-hover);
    background: var(--ds-danger-hover);
    color: var(--ds-on-brand);
}

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

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

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