/*
 * STK Completion — carte de checklist de complétion de configuration.
 *
 * Composant réutilisable (entreprise, fiscalité, modules…). Theme-aware
 * via les variables stk-badge-* (cf. stk-badges.css).
 *
 * Structure HTML attendue :
 *   <div class="stk-completion" data-controller="completion-card">
 *     <div class="stk-completion__header">
 *       <div class="stk-completion__title">…</div>
 *       <div class="stk-completion__score">…</div>
 *       <button class="stk-completion__dismiss" data-action="…">×</button>
 *     </div>
 *     <div class="stk-completion__progress">…</div>
 *     <div class="stk-completion__group stk-completion__group--blocking">
 *       <div class="stk-completion__group-title">…</div>
 *       <ul class="stk-completion__list">
 *         <li class="stk-completion__item stk-completion__item--done">…</li>
 *       </ul>
 *     </div>
 *   </div>
 */

.stk-completion {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--stk-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme=dark] .stk-completion {
    background: var(--stk-card-bg, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Header : titre + score + dismiss ──────────────────────────── */
.stk-completion__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stk-completion__title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stk-completion__title i {
    font-size: 1.25rem;
    color: var(--bs-primary, #3b82f6);
}

.stk-completion__score {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--stk-badge-info-bg);
    color: var(--stk-badge-info-fg);
}

.stk-completion--ready .stk-completion__score {
    background: var(--stk-badge-success-bg);
    color: var(--stk-badge-success-fg);
}

.stk-completion__dismiss {
    background: none;
    border: none;
    color: var(--bs-secondary, #64748b);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.stk-completion__dismiss:hover {
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.05));
}

/* ─── Barre de progression ──────────────────────────────────────── */
.stk-completion__progress {
    height: 8px;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f1f5f9);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

[data-theme=dark] .stk-completion__progress {
    background: rgba(255, 255, 255, 0.06);
}

.stk-completion__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary, #3b82f6), var(--bs-info, #06b6d4));
    border-radius: 999px;
    transition: width 0.5s ease-out;
}

.stk-completion--ready .stk-completion__progress-bar {
    background: linear-gradient(90deg, var(--bs-success, #10b981), #34d399);
}

/* ─── Groupes (Bloquant / Recommandé / Bonus) ───────────────────── */
.stk-completion__group + .stk-completion__group {
    margin-top: 1rem;
}

.stk-completion__group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stk-completion__group--blocking .stk-completion__group-title {
    color: var(--stk-badge-danger-fg);
}
.stk-completion__group--recommended .stk-completion__group-title {
    color: var(--stk-badge-warning-fg);
}
.stk-completion__group--optional .stk-completion__group-title {
    color: var(--stk-badge-info-fg);
}

/* ─── Liste d'items ─────────────────────────────────────────────── */
.stk-completion__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stk-completion__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--bs-tertiary-bg, #f8fafc);
    font-size: 0.88rem;
    color: var(--bs-body-color);
    transition: background 0.15s;
}

[data-theme=dark] .stk-completion__item {
    background: rgba(255, 255, 255, 0.03);
}

.stk-completion__item:hover {
    background: var(--bs-secondary-bg, #f1f5f9);
}

.stk-completion__item-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.stk-completion__item--done .stk-completion__item-icon {
    background: var(--stk-badge-success-bg);
    color: var(--stk-badge-success-fg);
}

.stk-completion__item--missing .stk-completion__item-icon {
    background: var(--bs-tertiary-bg, #f1f5f9);
    color: var(--bs-secondary, #64748b);
    border: 1px dashed var(--bs-border-color, #cbd5e1);
}

.stk-completion__item-label {
    flex: 1;
    font-weight: 500;
}

.stk-completion__item--done .stk-completion__item-label {
    text-decoration: line-through;
    opacity: 0.7;
}

.stk-completion__item-description {
    font-size: 0.75rem;
    color: var(--bs-secondary, #64748b);
    font-weight: 400;
    margin-top: 0.15rem;
    display: block;
}

.stk-completion__item-action,
.stk-completion__item-action:hover,
.stk-completion__item-action:focus,
.stk-completion__item-action:active {
    text-decoration: none;
    color: var(--bs-primary, #3b82f6);
}

.stk-completion__item-action {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.stk-completion__item-action:hover {
    background: var(--stk-badge-info-bg);
}

/* ─── Bandeau slim (mode "alerte critique" du dashboard) ─────────────
 *
 * Affiché UNIQUEMENT quand des items BLOCKING sont manquants — l'utilisateur
 * ne peut pas émettre de factures conformes. Hauteur ~40-48px, bordure
 * gauche colorée, dismiss intégré.
 *
 * Pas affiché si production-ready (BLOCKING tous OK même si Recommandé/
 * Bonus manquent) — pour ces cas, le badge sidebar suffit.
 */
.stk-completion-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    background: var(--stk-badge-danger-bg);
    color: var(--stk-badge-danger-fg);
    border-left: 4px solid currentColor;
    font-size: 0.88rem;
    line-height: 1.4;
}

.stk-completion-banner__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

.stk-completion-banner__body {
    flex: 1;
    min-width: 0;
}

.stk-completion-banner__title {
    font-weight: 600;
}

.stk-completion-banner__detail {
    color: inherit;
    opacity: 0.85;
    font-size: 0.82rem;
}

.stk-completion-banner__progress {
    display: inline-block;
    width: 80px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 0 0.4rem;
    vertical-align: middle;
}

.stk-completion-banner__progress-bar {
    height: 100%;
    background: currentColor;
    opacity: 0.8;
    border-radius: 999px;
    transition: width 0.4s ease-out;
}

.stk-completion-banner__cta,
.stk-completion-banner__cta:hover,
.stk-completion-banner__cta:focus,
.stk-completion-banner__cta:active {
    text-decoration: none;
    color: inherit;
}

.stk-completion-banner__cta {
    flex-shrink: 0;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    border: 1px solid currentColor;
    font-size: 0.82rem;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.stk-completion-banner__cta:hover {
    background: rgba(0, 0, 0, 0.05);
}

.stk-completion-banner__dismiss {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.45rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.stk-completion-banner__dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

/* ─── Toast de confirmation après dismiss ────────────────────────── */
.stk-completion-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color);
    border-left: 4px solid var(--bs-primary, #3b82f6);
    border-radius: 8px;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.25);
    max-width: 380px;
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s, transform 0.25s;
}

[data-theme=dark] .stk-completion-toast {
    background: #1e293b;
    color: #e2e8f0;
    border-left-color: var(--bs-primary, #3b82f6);
}

.stk-completion-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.stk-completion-toast > i:first-child {
    flex-shrink: 0;
    color: var(--bs-primary, #3b82f6);
    font-size: 1.2rem;
    margin-top: 1px;
}

.stk-completion-toast > div {
    flex: 1;
    min-width: 0;
}

.stk-completion-toast small {
    color: var(--bs-secondary, #64748b);
    font-size: 0.75rem;
}

.stk-completion-toast > button {
    background: none;
    border: none;
    color: var(--bs-secondary, #64748b);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.7;
}

.stk-completion-toast > button:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

/* ─── Lien "Réafficher le bandeau dashboard" ──────────────────────── */
.stk-completion-restore {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--stk-badge-info-bg);
    color: var(--stk-badge-info-fg);
    font-size: 0.82rem;
    border: 1px dashed var(--stk-badge-info-border, currentColor);
}

.stk-completion-restore form {
    display: inline;
}

.stk-completion-restore button {
    background: none;
    border: none;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.stk-completion-restore button:hover {
    text-decoration: none;
}

/* ─── Mini-badge "Configuration complète" à 100% ─────────────────── */
.stk-completion-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--stk-badge-success-bg);
    color: var(--stk-badge-success-fg);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ─── Action bar — barre d'action sticky pour formulaires longs ─────
 *
 * Composant production-ready inspiré de Stripe / Linear / Notion :
 *   - sticky bottom : reste collé au bas de la viewport quand on scrolle
 *   - 3 états visuels selon dirty-tracking :
 *       --idle    : aucune modification, bouton secondaire
 *       --dirty   : modifications en cours, bouton primary brillant
 *       --saving  : pendant le submit (loader)
 *   - bouton secondaire "Annuler" pour restaurer l'état initial
 *   - badge compteur "N champs modifiés"
 *   - texte contextuel à gauche (ex: "Vos modifications seront appliquées immédiatement")
 *
 * Structure HTML attendue :
 *   <div class="stk-action-bar" data-controller="dirty-form" ...>
 *     <div class="stk-action-bar__inner">
 *       <div class="stk-action-bar__status">
 *         <span class="stk-action-bar__hint">Vos modifications…</span>
 *         <span class="stk-action-bar__counter" data-dirty-form-target="counter" hidden>
 *           N champs modifiés
 *         </span>
 *       </div>
 *       <div class="stk-action-bar__actions">
 *         <button type="button" data-dirty-form-target="reset"…>Annuler</button>
 *         <button type="submit" data-dirty-form-target="primary"…>Enregistrer</button>
 *       </div>
 *     </div>
 *   </div>
 */

.stk-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin: 1.5rem -0.75rem 0;
    border-radius: 12px 12px 0 0;
    background: var(--bs-body-bg, #ffffff);
    border-top: 1px solid var(--bs-border-color, #e2e8f0);
    border-left: 1px solid var(--bs-border-color, #e2e8f0);
    border-right: 1px solid var(--bs-border-color, #e2e8f0);
    box-shadow: 0 -8px 24px -8px rgba(15, 23, 42, 0.08), 0 -1px 0 rgba(15, 23, 42, 0.02);
    backdrop-filter: blur(8px);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.25s;
}

[data-theme=dark] .stk-action-bar {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
    border-left-color: rgba(255, 255, 255, 0.05);
    border-right-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 -10px 30px -8px rgba(0, 0, 0, 0.4);
}

.stk-action-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
}

/* ─── Zone status (gauche) ──────────────────────────────────────── */
.stk-action-bar__status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.stk-action-bar__hint {
    color: var(--bs-secondary, #64748b);
    font-size: 0.85rem;
    line-height: 1.35;
}

.stk-action-bar__counter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--stk-badge-warning-bg);
    color: var(--stk-badge-warning-fg);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    animation: stk-action-pulse 1.8s ease-in-out infinite;
}

.stk-action-bar__counter i {
    font-size: 0.95rem;
}

@keyframes stk-action-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .stk-action-bar__counter { animation: none; }
}

/* ─── Zone actions (droite) ─────────────────────────────────────── */
.stk-action-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* ─── États visuels ─────────────────────────────────────────────── */

/* État IDLE — rien de modifié, bouton primary désactivé visuellement */
.stk-action-bar--idle .stk-action-bar__primary {
    opacity: 0.55;
    cursor: not-allowed;
}

.stk-action-bar--idle .stk-action-bar__reset {
    display: none;
}

/* État DIRTY — modifications en cours, bouton primary mis en avant */
.stk-action-bar--dirty {
    border-top-color: var(--bs-primary, #3b82f6);
    box-shadow: 0 -8px 24px -8px rgba(59, 130, 246, 0.2), 0 -1px 0 var(--bs-primary, #3b82f6);
}

.stk-action-bar--dirty .stk-action-bar__primary {
    box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4);
    transform: translateY(0);
}

/* État SAVING — pendant le submit */
.stk-action-bar--saving .stk-action-bar__primary {
    pointer-events: none;
    opacity: 0.85;
}

.stk-action-bar--saving .stk-action-bar__reset {
    pointer-events: none;
    opacity: 0.5;
}

/* ─── Mobile : empile status + actions ──────────────────────────── */
@media (max-width: 575.98px) {
    .stk-action-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.75rem 1rem;
    }
    .stk-action-bar__actions {
        justify-content: flex-end;
    }
    .stk-action-bar__hint {
        display: none;
    }
}

/* ─── Section divider entre form principal et "Réglages avancés" ──── */
.stk-section-divider {
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--bs-border-color, #e2e8f0);
}

.stk-section-divider__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.stk-section-divider__title i {
    color: var(--bs-secondary, #64748b);
}

.stk-section-divider__description {
    color: var(--bs-secondary, #64748b);
    font-size: 0.85rem;
    margin: 0;
}