/* ==========================================================================
   SIMPIO — Tokens de design (source unique de vérité)
   Charte "ardoise premium" validée : base neutre claire, couleur de marque
   slate/ardoise, émeraude rare pour le positif, rouge RÉSERVÉ au destructif.
   Réf : docs/design/refonte-ardoise-maquette-reference.html
   ========================================================================== */

:root {
    /* --- Couleur de marque : ardoise / slate --- */
    --sp-slate:        #1e293b;   /* topbar, surfaces structurantes foncées */
    --sp-slate-700:    #334155;   /* accent principal (boutons, actif, en-têtes) */
    --sp-slate-600:    #475569;   /* variante hover / secondaire */
    --sp-slate-pale:   #f1f5f9;   /* fond item actif, zones teintées très douces */

    /* --- Base neutre --- */
    --sp-bg:           #f8f9fa;   /* fond application */
    --sp-surface:      #ffffff;   /* cards, drawers, modals */
    --sp-card-2:       #fbfcfe;   /* en-têtes de table, zones alternées */
    --sp-border:       #e5e7eb;   /* bordures standard */
    --sp-border-soft:  #eef0f4;   /* diviseurs très légers */
    --sp-divider:      #f3f4f6;

    /* --- Texte --- */
    --sp-ink:          #1a1d21;   /* titres, chiffres */
    --sp-text:         #374151;   /* corps */
    --sp-muted:        #6b7076;   /* secondaire */
    --sp-faint:        #94a3b8;   /* labels, hints */

    /* --- Accents sémantiques (parcimonie) --- */
    --sp-success:      #059669;   /* positif rare : +%, statut payé */
    --sp-success-bg:   #ecfdf5;
    --sp-warning:      #d97706;   /* attente */
    --sp-warning-bg:   #fffbeb;
    --sp-danger:       #dc2626;   /* RÉSERVÉ au destructif + erreur de saisie */
    --sp-danger-soft:  #c14b45;
    --sp-danger-bg:    #fef2f2;

    /* --- Accent « Pennylane » : violet (actions, item actif) --- */
    --sp-accent:       #6837ef;   /* violet Pennylane */
    --sp-accent-soft:  #8b5cf6;
    --sp-accent-pale:  #f3efff;   /* fond item actif très pâle */
    --sp-accent-glow:  rgba(104, 55, 239, .14);

    /* --- Sidebar claire (blanche) façon Pennylane --- */
    --sp-nav-bg:       #ffffff;   /* fond sidebar blanc */
    --sp-nav-hover:    #f6f7f9;   /* survol item */
    --sp-nav-line:     #eef0f3;   /* diviseurs sidebar */
    --sp-nav-text:     #3d4351;   /* texte item */
    --sp-nav-dim:      #9aa1ad;   /* icônes/labels atténués */
    --sp-nav-sub:      #a8aebb;   /* sous-titres de section */

    /* --- Rayons --- */
    --sp-radius-card:  14px;
    --sp-radius-ctrl:  10px;
    --sp-radius-pill:  999px;

    /* --- Ombres (quasi invisibles) --- */
    --sp-shadow-card:  0 1px 4px rgba(0, 0, 0, .06);
    --sp-shadow-pop:   0 8px 30px rgba(15, 23, 42, .14);

    /* --- Typographie --- */
    --sp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Boutons d'action partagés (charte ardoise) — définis globalement pour être
   utilisables par tout composant (ButtonGroup, modals…), les <style> Blazor
   étant scopés par composant.
   -------------------------------------------------------------------------- */
.sp-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sp-btn { border-radius: var(--sp-radius-ctrl) !important; font-weight: 600 !important; text-transform: none !important; }
.sp-btn-filled.mud-button-root { background: var(--sp-accent) !important; color: #fff !important; border: none !important; }
.sp-btn-filled.mud-button-root:hover:not(:disabled) { background: #5a2fd6 !important; box-shadow: var(--sp-shadow-card) !important; }
.sp-btn-outline.mud-button-root { background: #fff !important; color: var(--sp-text) !important; border: 1px solid var(--sp-border) !important; }
.sp-btn-outline.mud-button-root:hover:not(:disabled) { border-color: var(--sp-slate-600) !important; background: var(--sp-bg) !important; }
.sp-btn-danger.mud-button-root { background: var(--sp-danger) !important; color: #fff !important; border: none !important; }
.sp-btn-danger.mud-button-root:hover:not(:disabled) { background: #b91c1c !important; box-shadow: var(--sp-shadow-card) !important; }