/* ═══════════════════════════════════════════════════════════════════════════
   Cali&Co — Système de boutons unifié (chantier #2)
   ───────────────────────────────────────────────────────────────────────────
   Source unique de vérité pour TOUS les boutons de l'app. Si tu ajoutes un
   bouton qui ne ressemble à aucun de ceux ci-dessous, ouvre une issue : c'est
   probablement le signe qu'il manque un variant/tone à ce système, pas qu'il
   faut créer une classe ad-hoc.

   Architecture :
     - .app-btn                       (base)
     - .app-btn--{primary|secondary|ghost|danger|success|warning}   (variants)
     - .app-btn--{xs|sm|md|lg}        (tailles, md par défaut)
     - .app-btn--{soft|outline|solid} (tones)
     - .app-btn--pill                 (shape)
     - .app-btn--icon-only            (carré, label visuellement masqué)
     - .app-btn--block                (full-width)
     - .is-loading                    (spinner, désactivé)

   Génération conseillée : App\Ui\Button::render([...]) (cf. src/Ui/Button.php).

   COMPAT LEGACY : les anciennes classes .btn / .btn-primary / .btn-pill-* /
   .icon-btn / .btn-delete-soft / etc. sont définies en fin de fichier comme
   ALIAS visuels du nouveau système. Elles peuvent être migrées au fil de
   l'eau vers App\Ui\Button::render() sans urgence ni big-bang.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. BASE — .app-btn
   ───────────────────────────────────────────────────────────────────────── */
.app-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;       /* hauteur ~36px (taille md par défaut) */
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--gray-800, #1e293b);
    background: var(--color-bg-surface, #fff);
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.app-btn:hover,
.btn:hover { background: var(--gray-50, #f8fafc); border-color: var(--gray-300, #cbd5e1); }
.app-btn:focus-visible,
.btn:focus-visible { outline: 2px solid var(--brand-blue, #006EB9); outline-offset: 1px; }
.app-btn:disabled,
.app-btn[aria-disabled="true"],
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.app-btn > svg, .btn > svg { flex-shrink: 0; }
.app-btn__label { display: inline-block; }
.app-btn__sr-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. VARIANTS — couleur + intention sémantique
   ───────────────────────────────────────────────────────────────────────── */
.app-btn--primary,
.btn-primary {
    color: #fff;
    background: var(--brand-blue, #006EB9);
    border-color: var(--brand-blue, #006EB9);
}
.app-btn--primary:hover,
.btn-primary:hover {
    background: var(--brand-blue-hover, #005a9e);
    border-color: var(--brand-blue-hover, #005a9e);
}

.app-btn--secondary,
.btn-secondary { color: var(--gray-700, #334155); background: #fff; border-color: var(--gray-200, #e2e8f0); }
.app-btn--secondary:hover,
.btn-secondary:hover { background: var(--gray-50, #f8fafc); border-color: var(--gray-300, #cbd5e1); color: var(--gray-900, #0f172a); }

.app-btn--success,
.btn-success,
.btn-confirm {
    color: #fff;
    background: var(--color-success, #16a34a);
    border-color: var(--color-success, #16a34a);
}
.app-btn--success:hover,
.btn-success:hover,
.btn-confirm:hover { background: var(--color-success-hover, #15803d); border-color: var(--color-success-hover, #15803d); }

.app-btn--warning,
.btn-warning {
    color: #fff;
    background: var(--color-warning, #d97706);
    border-color: var(--color-warning, #d97706);
}
.app-btn--warning:hover,
.btn-warning:hover { background: var(--color-warning-hover, #b45309); border-color: var(--color-warning-hover, #b45309); }

/* Danger : par défaut "ghost rouge" (Pennylane n'utilise jamais un bouton
   rouge plein sauf confirmation d'action destructive). */
.app-btn--danger,
.btn-danger {
    color: var(--color-danger, #dc2626);
    background: #fff;
    border-color: var(--gray-200, #e2e8f0);
}
.app-btn--danger:hover,
.btn-danger:hover {
    background: var(--color-danger-bg, #fee2e2);
    border-color: var(--color-danger, #dc2626);
    color: var(--color-danger-hover, #b91c1c);
}
/* Danger fort (rare : confirmation de suppression irréversible). */
.app-btn--danger.app-btn--solid,
.btn-danger.btn--solid,
.btn-confirm.danger {
    color: #fff;
    background: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
}
.app-btn--danger.app-btn--solid:hover,
.btn-danger.btn--solid:hover,
.btn-confirm.danger:hover { background: var(--color-danger-hover, #b91c1c); border-color: var(--color-danger-hover, #b91c1c); }

.app-btn--ghost,
.btn-ghost {
    color: var(--gray-700, #475569);
    background: transparent;
    border-color: transparent;
}
.app-btn--ghost:hover,
.btn-ghost:hover { background: var(--gray-100, #f1f5f9); color: var(--gray-900, #0f172a); }


/* ─────────────────────────────────────────────────────────────────────────
   3. TAILLES — alignées sur 28/32/36/40px
   ───────────────────────────────────────────────────────────────────────── */
.app-btn--xs                                  { padding: 3px 8px;  font-size: 0.7rem;   gap: 4px; }     /* ~28px */
.app-btn--sm, .btn-small, .btn-sm             { padding: 5px 10px; font-size: 0.75rem;  gap: 5px; }     /* ~32px */
.app-btn--md                                  { padding: 7px 14px; font-size: 0.875rem; gap: 6px; }     /* ~36px */
.app-btn--lg                                  { padding: 9px 18px; font-size: 0.9375rem; gap: 8px; }    /* ~40px */


/* ─────────────────────────────────────────────────────────────────────────
   4. TONES — surface alternative (soft pastel, outline)
   ───────────────────────────────────────────────────────────────────────── */
.app-btn--soft.app-btn--primary { background: #e0f2fe; color: #0369a1; border-color: transparent; }
.app-btn--soft.app-btn--primary:hover { background: #bae6fd; color: #075985; }
.app-btn--soft.app-btn--success { background: #dcfce7; color: #166534; border-color: transparent; }
.app-btn--soft.app-btn--success:hover { background: #bbf7d0; color: #14532d; }
.app-btn--soft.app-btn--warning { background: #fef3c7; color: #92400e; border-color: transparent; }
.app-btn--soft.app-btn--warning:hover { background: #fde68a; color: #78350f; }
.app-btn--soft.app-btn--danger  { background: #fee2e2; color: #b91c1c; border-color: transparent; }
.app-btn--soft.app-btn--danger:hover { background: #fecaca; color: #991b1b; }
.app-btn--soft.app-btn--secondary { background: var(--gray-100, #f1f5f9); color: var(--gray-700, #475569); border-color: transparent; }
.app-btn--soft.app-btn--secondary:hover { background: var(--gray-200, #e2e8f0); color: var(--gray-900, #0f172a); }

.app-btn--outline { background: transparent; }
.app-btn--outline.app-btn--primary { color: var(--brand-blue, #006EB9); background: transparent; border-color: var(--brand-blue, #006EB9); }
.app-btn--outline.app-btn--primary:hover { background: var(--brand-blue-light, #f0f9ff); }
.app-btn--outline.app-btn--warning { color: var(--color-warning, #d97706); background: transparent; border-color: var(--color-warning, #d97706); }
.app-btn--outline.app-btn--warning:hover { background: #fffbeb; }


/* ─────────────────────────────────────────────────────────────────────────
   5. SHAPE & MODIFIERS
   ───────────────────────────────────────────────────────────────────────── */
.app-btn--pill { border-radius: 999px; }
.app-btn--block { width: 100%; }
.app-btn--icon-only { padding: 0; width: 32px; height: 32px; flex-shrink: 0; }
.app-btn--icon-only.app-btn--xs { width: 24px; height: 24px; }
.app-btn--icon-only.app-btn--sm { width: 28px; height: 28px; }
.app-btn--icon-only.app-btn--lg { width: 40px; height: 40px; }


/* ─────────────────────────────────────────────────────────────────────────
   6. LOADING — Spinner inline (activé via .is-loading par js/button-loader.js)
   ───────────────────────────────────────────────────────────────────────── */
.app-btn.is-loading,
.btn.is-loading,
button.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
    cursor: progress;
}
.app-btn.is-loading::before,
.btn.is-loading::before,
button.is-loading::before {
    content: '';
    display: inline-block;
    width: 13px; height: 13px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: appBtnSpin 0.7s linear infinite;
    opacity: 0.85;
}
@keyframes appBtnSpin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════════════
   7. ALIAS LEGACY — absorbent les classes pre-chantier #2 sans casser le HTML
   ───────────────────────────────────────────────────────────────────────────
   Toutes ces classes existaient avant l'unification. Plutôt que de réécrire
   tous les fichiers PHP en une seule passe (risque de régression visuelle),
   on les redéfinit ici en termes du nouveau système.

   Migration recommandée : remplacer progressivement chaque usage par un
   appel à App\Ui\Button::render([...]) avec le bon variant/tone/size.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pills colorées du monitoring admin (status, actions discrètes) */
.btn-pill-success      { background: #dcfce7; color: #166534; border-color: transparent; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; font-weight: 600; }
.btn-pill-success:hover{ background: #bbf7d0; color: #14532d; }
.btn-pill-warn,
.btn-pill-warn-bordered{ background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; font-weight: 600; }
.btn-pill-warn:hover,
.btn-pill-warn-bordered:hover { background: #fde68a; color: #78350f; }
.btn-pill-blue         { background: #e0f2fe; color: #0369a1; border-color: transparent; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; }
.btn-pill-red          { background: #fee2e2; color: #b91c1c; border-color: transparent; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; }
.btn-pill-gray         { background: #e2e8f0; color: #475569; border-color: transparent; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; }
.btn-pill-gray-sm      { background: #e2e8f0; color: #475569; border-color: transparent; border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; }
.btn-pill-soft         { background: #f1f5f9; color: #64748b; border-color: transparent; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; }
.btn-pill-dark-danger  { background: #dc2626; color: #fff; border-color: #dc2626; border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; font-weight: 700; }
.btn-pill-dark-trace   { background: #334155; color: #94a3b8; border-color: #334155; border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; }

/* Bouton "icône seule" discret (tables admin, suppliers) — alias de --ghost.--icon-only.--sm */
.icon-btn {
    background: transparent; color: var(--gray-500, #64748b); border: 1px solid transparent;
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.icon-btn:hover { background: var(--gray-100, #f1f5f9); color: var(--brand-blue, #006EB9); border-color: var(--gray-200, #e5e7eb); }
.icon-btn.danger:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* Bouton "supprimer" 2-step (double-clic confirmant, cf. js/dashboard-delete.js) */
.btn-delete-soft {
    color: var(--color-danger, #dc2626); background: #fff; border: 1px solid var(--gray-200, #e2e8f0);
    padding: 5px 10px; font-size: 0.75rem; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s ease;
}
.btn-delete-soft:hover     { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.btn-delete-soft.confirming{ background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 600; }

/* Bouton fermeture inline (admin modales) */
.btn-close-inline {
    background: transparent; border: 0; cursor: pointer; padding: 4px 8px; line-height: 1;
    color: var(--gray-500, #64748b); border-radius: 4px;
}
.btn-close-inline:hover { background: var(--gray-100, #f1f5f9); color: var(--gray-900, #0f172a); }