/* =============================================================================
   MyMobil — Design Tokens (source de vérité du design system)
   -----------------------------------------------------------------------------
   Ce fichier est LE master des valeurs du design (couleurs, radius, espacements,
   typo, tailles). Tout le reste doit y faire référence via var(--mm-*).

   CASCADE :
     - custom.css         : utilise --mud-palette-* (Mud) + les alias legacy ci-dessous.
     - Radzen (--rz-*)     : remappés ici sur la palette Mud -> suit le dark mode tout seul.
     - MudBlazor (--mud-*) : la palette C# (IHM/MyMobilTheme.cs) LIT ce fichier au démarrage
                             via IHM/DesignTokens.cs (tokens.css est embarqué comme ressource
                             de l'assembly GUI). MudColor reçoit donc les vrais hex --mm-* et
                             calcule correctement -rgb / -hover / -darken / -lighten.
                             => Pour changer une couleur de marque : éditer SEULEMENT la
                                primitive --mm-* ci-dessous, c'est l'unique source de vérité.

   Ordre de chargement (index.html) : APRES material-base.css (Radzen), AVANT custom.css.
   ⚠️ Ne pas renommer une primitive --mm-* sans mettre à jour les clés lues dans MyMobilTheme.cs
      (DesignTokens.Color("...")) : un token manquant lève une exception au démarrage.
   ============================================================================= */

:root {
    /* ----------------------------------------------------------------------
       1. PRIMITIVES — valeurs brutes (ne jamais utiliser en dur ailleurs)
       ---------------------------------------------------------------------- */

    /* Marque */
    --mm-blue:            #276481;            /* bleu pétrole — primary (light)            */
    --mm-blue-2:          #307DA1;            /* secondary (light) = rgb(48,125,161)        */
    --mm-turquoise:       #56BEC6;            /* turquoise — primary (dark)                 */
    --mm-turquoise-2:     #429399;            /* secondary (dark)                           */
    --mm-tertiary:        #1EC8A5;            /* accent tertiaire — ce que l'app rend (défaut MudBlazor Tertiary, non surchargé) */
    --mm-gold:            #F5B301;            /* or — étoile favori du menu (SDD-001)         */

    /* Neutres */
    --mm-white:           #fff;
    --mm-black:           #333;                /* = MudBlazor Black (lu par MyMobilTheme.cs) */
    --mm-text-primary:    #424242;            /* texte courant — ce que l'app rend (défaut MudBlazor TextPrimary, non surchargé) */
    --mm-grey-bg:         #F3F5F7;            /* fond champs/cards (light) = BackgroundGray  */
    --mm-grey-dark:       #333333;
    --mm-grey-text:       #A0A6AC;
    --mm-action-default:  #adadb1;            /* icônes/états inactifs                       */

    /* Surfaces dark */
    --mm-bg-dark:         #27272F;
    --mm-grey-bg-dark:    #424242;
    --mm-surface-dark:    #373740;
    --mm-drawer-dark:     #32333d;

    /* Sémantique (statuts) */
    --mm-success:         #5BBC88;
    --mm-warning:         #FF9800;
    --mm-warning-soft:    #ffb545;
    --mm-danger:          #ff5050;
    --mm-error:           #FF6767;
    --mm-inactive:        #999999;
    --mm-cancel:          #86869c;            /* bouton Annuler (dialog)                     */
    --mm-cancel-hover:    #666677;

    /* Dégradé signature bleu -> turquoise */
    --mm-gradient:        linear-gradient(135deg, var(--mm-blue) 0%, var(--mm-turquoise) 100%);

    /* Variantes « tranche » du dégradé signature : 4 dégradés progressifs (bleu
       profond -> turquoise vif) posés sur une grille 2x2 de tuiles de navigation,
       qui se lisent comme UN seul dégradé balayant le groupe en diagonale.
       Valeurs des tuiles d'accueil .home-tile-1..4 (Index.razor.css / BienFromIndex). */
    --mm-gradient-tile-1: linear-gradient(135deg, rgba(40,102,131,1) 0%, rgba(71,165,178,1) 100%);
    --mm-gradient-tile-2: linear-gradient(135deg, rgba(61,142,161,1) 0%, rgba(70,197,195,1) 100%);
    --mm-gradient-tile-3: linear-gradient(135deg, rgba(56,132,153,1) 0%, rgba(70,187,189,1) 100%);
    --mm-gradient-tile-4: linear-gradient(135deg, rgba(69,158,173,1) 0%, rgba(68,223,209,1) 100%);

    /* ----------------------------------------------------------------------
       2. TYPOGRAPHIE
       ---------------------------------------------------------------------- */
    --mm-font-family:     "Poppins", sans-serif;
    --mm-font-size-base:  14px;
    --mm-fs-10:           10px;
    --mm-fs-11:           11px;
    --mm-fs-12:           12px;
    --mm-fs-13:           13px;
    --mm-fs-14:           14px;
    --mm-fs-16:           16px;
    --mm-fs-18:           18px;
    --mm-fs-20:           20px;               /* titre de page (page-title)                  */
    --mm-fs-24:           24px;

    /* Graisses Poppins */
    --mm-fw-light:        300;
    --mm-fw-regular:      400;
    --mm-fw-medium:       500;
    --mm-fw-semibold:     600;
    --mm-fw-bold:         700;

    /* ----------------------------------------------------------------------
       3. BORDER-RADIUS
       ---------------------------------------------------------------------- */
    --mm-radius-pill:     24px;               /* boutons pleins / pills                      */
    --mm-radius-chip:     16px;               /* chips / petits tags                         */
    --mm-radius-card:     10px;               /* cards / blocs / dialogs / drawers (standard)*/
    --mm-radius-sm:       8px;                /* contrôles/encarts secondaires (segments, alertes, menus)*/
    --mm-radius-dialog:   6px;                /* boutons de dialog                           */
    --mm-radius-input:    5px;                /* inputs                                       */
    --mm-radius-round:    50%;                /* boutons ronds                               */

    /* ----------------------------------------------------------------------
       4. ESPACEMENTS
       ---------------------------------------------------------------------- */
    --mm-space-1:         8px;
    --mm-space-2:         16px;
    --mm-space-3:         32px;
    --mm-gutter:          1.25rem;            /* gouttière latérale container                */
    --mm-menu-offset:     120px;              /* padding bas #app (menu fixe bas)            */
    --mm-sidebar-w:       250px;              /* largeur sidebar PC dépliée                   */
    --mm-sidebar-w-rail:  64px;               /* largeur sidebar PC repliée (rail)            */

    /* ----------------------------------------------------------------------
       5. HAUTEURS / TAILLES STANDARD
       ---------------------------------------------------------------------- */
    --mm-h-button:        48px;               /* bouton plein / input / select / rond        */
    --mm-h-round-sm:      32px;               /* petit bouton rond                            */
    --mm-h-fab-sm:        36px;
    --mm-h-select-lg:     65px;
    --mm-h-tag-sm:        20px;
    --mm-h-tag-md:        35px;

    /* Hauteurs du shell (rapatriées du projet Claude Design : elles y étaient
       en px nus sous les noms --nav-h / --mhead-h / --dhead-h). Elles décrivent les
       barres fixes du portail — cf. DESIGN_RULES.md §Structure du portail MyMobil. */
    --mm-h-nav-mobile:     68px;              /* bottom-nav fixe (mobile)                    */
    --mm-h-header-mobile:  56px;              /* header (mobile)                             */
    --mm-h-header-desktop: 60px;              /* header (desktop)                            */

    /* ----------------------------------------------------------------------
       6. ALIAS LEGACY (rétro-compatibilité custom.css — anciennement dans son :root)
          On garde les noms historiques mais ils pointent désormais sur les primitives.
       ---------------------------------------------------------------------- */
    --lt-primary:         var(--mm-blue);
    --dt-primary:         var(--mm-turquoise);
    --lt-grey:            var(--mm-grey-bg);
    --dt-grey:            var(--mm-grey-dark);
    --dt-grey-txt:        var(--mm-grey-text);
    --valid:              var(--mm-success);
    --error:              var(--mm-error);
    --inactive:           var(--mm-inactive);
    /* Dégradé signature bleu -> turquoise — réservé au bouton de connexion (MM-2168).
       Les boutons d'action courants restent en aplat var(--mud-palette-primary). */
    --mymobil-gradient-signature: linear-gradient(135deg, var(--mm-blue) 0%, var(--mm-turquoise) 100%);

    /* ----------------------------------------------------------------------
       7. EXTENSIONS — familles ajoutées lors de la migration des styles en dur
          (bordures, ombres, overlays, fonds de statut doux, marque externe)
       ---------------------------------------------------------------------- */

    /* Bordures / séparateurs */
    --mm-border:          rgb(189,189,189);   /* bordure de titre de dialog, séparateurs    */

    /* Marque externe */
    --mm-whatsapp:        #25D366;             /* couleur officielle WhatsApp                 */
    --mm-whatsapp-on:     #ffffff;             /* texte/icône posé sur le fond WhatsApp (Claude Design) */

    /* Ombres (box-shadow) — élévations Material */
    --mm-shadow:          rgba(0,0,0,.1);
    --mm-shadow-md:       rgba(0,0,0,.15);
    --mm-shadow-lg:       rgba(0,0,0,.2);

    /* Ombres composées */
    --mm-elevation:       0 4px 24px var(--mm-shadow);
    --mm-elevation-sm:    0 2px 8px var(--mm-shadow);        /* survol de card              */
    /* Ombre discrète et PERMANENTE d'une surface simplement détachée du fond, là où un liseré
       serait de trop : carte non retenue du sélecteur de personnes (HeaderCard.jsx, active=false)
       et barre de relance détachée (TiersPicker.jsx), où Claude Design la porte en littéral.
       Un cran SOUS --mm-elevation-sm, et distincte d'elle : celle-là est l'ombre de SURVOL d'une
       card (0 2px 8px), donc le signe d'une interaction — d'où une autre valeur (R13). */
    --mm-elevation-xs:         0 1px 3px rgba(0,0,0,.08);
    --mm-elevation-round: 0px 10px 15px -3px rgba(0,0,0,.1); /* bouton rond « raised »      */
    /* Tuiles de hub. Seules élévations
       TEINTÉES du DS : l'ombre reprend le bleu pétrole de la tuile (rgb = --mm-blue) au lieu
       du noir, sinon le dégradé signature paraît sali. Claude Design les porte en littéral
       dans Tile.jsx — d'où ces deux tokens (R13). */
    --mm-elevation-tile:       0 6px 18px rgba(39,100,129,.3);
    --mm-elevation-tile-hover: 0 10px 26px rgba(39,100,129,.4);
    /* Élévation du bouton d'action PLEIN (MmButton primary). Tokenisée parce qu'une seconde
       surface la porte : le bouton de pièce jointe de l'éditeur d'email est un <label> — un
       <button> dans un <label> annulerait l'ouverture du sélecteur de fichiers — et il doit
       rester le MÊME bouton que la forme canonique, ombre comprise (R13, R18). */
    --mm-elevation-btn:        0 3px 10px rgba(39,100,129,.25);
    /* Panneau flottant (menu kebab, menu Actions d'une fiche) et bouton rond flottant (FAB,
       retour mobile). Les deux valeurs existaient déjà en littéral dans MmKebabMenu et MmFab :
       tokenisées ici pour que deux panneaux flottants ne puissent plus diverger (R13). */
    --mm-elevation-menu:       0 8px 28px rgba(0,0,0,.16);
    --mm-elevation-fab:        0 8px 24px rgba(39,100,129,.35);
    /* Bulle d'aide. Deux ombres, une par
       variante de bulle : la sombre est posée sur le contenu de la page, la claire est un
       popover blanc sur fond blanc — c'est son ombre SEULE qui le détache, d'où une valeur
       plus étalée et légèrement bleutée. Claude Design les porte en littéral dans
       Tooltip.jsx alors que la seconde vaut pour tout popover clair — d'où ces tokens (R13). */
    --mm-elevation-tooltip:    0 4px 14px rgba(0,0,0,.22);
    --mm-elevation-popover:    0 6px 22px rgba(20,40,55,.16);

    /* Surfaces posées SUR un aplat primaire.
       Sur le bleu d'un en-tête de fiche ou du hero de connexion, une pastille ou un encart ne
       peut pas être « blanc » : il se pose en VERRE, c'est-à-dire en blanc très transparent.
       Claude Design porte ces quatre valeurs en littéral (HeaderCard.jsx, guidelines/brand-login)
       alors qu'elles se répètent — d'où ces tokens (R13). */
    --mm-on-primary-glass:      rgba(255,255,255,.20); /* pastille d'icône, bouton d'action rapide */
    --mm-on-primary-glass-soft: rgba(255,255,255,.16); /* encart d'alerte, bouton du hero login   */
    --mm-on-primary-line:       rgba(255,255,255,.50); /* liseré sur aplat primaire                */
    /* Icône INACTIVE posée sur un aplat primaire (rail du menu replié). Distinct du liseré
       à 50 % : un glyphe doit rester lisible, un filet non — d'où .82. */
    --mm-on-primary-icon:       rgba(255,255,255,.82); /* glyphe inactif sur aplat primaire       */
    --mm-on-primary-danger:     rgba(255,80,80,.85);   /* encart d'alerte bloquante (= --mm-danger à 85 %) */

    /* Filet posé SUR un aplat SOMBRE (bandeau #333, toast). Même valeur que
       --mm-on-primary-glass, mais pas le même rôle : celui-ci sépare deux zones sur du noir,
       l'autre remplit une pastille sur du bleu de marque. Réutiliser le token « on-primary »
       ici le rendrait menteur, et écrire la valeur en littéral serait interdit (R13).
       ⚠️ Aucun composant ne le référence depuis que le journal de commentaires est passé à
       l'en-tête gris de MmDataTable. Le retirer serait destructif (R-DS-2) : il attend une
       validation humaine explicite. */
    --mm-on-dark-line:          rgba(255,255,255,.20); /* filet sur aplat sombre                   */

    /* Overlays / scrims */
    /* Voile des dialogues et drawers.
       Distinct de --mm-overlay, qui est le fond de chargement plein écran : ce dernier est
       plus sombre et ne sert pas à révéler ce qu'il y a derrière. Claude Design employait
       deux valeurs voisines pour ce même rôle (.45 sur le drawer, .5 sur le dialogue) —
       unifiées à .5 côté DS, valeur reprise ici. */
    --mm-scrim:           rgba(0,0,0,.5);      /* voile de dialogue / drawer                 */
    /* Voile LEGER d'un menu flottant (rapatrié de FabMenu.jsx). Distinct de
       --mm-scrim : un FAB déplié ne masque pas la page, il la met en retrait — d'où .28 et
       un flou de 2px, là où un dialogue coupe la page à .5. Claude Design le porte en
       littéral. */
    --mm-scrim-light:     rgba(0,0,0,.28);     /* voile de menu flottant (FAB déplié)         */
    --mm-overlay:         rgba(0,0,0,.6);      /* fond de chargement plein écran             */
    --mm-overlay-hover:   rgba(0,0,0,.08);     /* survol d'item de liste                      */
    --mm-overlay-active:  rgba(0,0,0,.12);     /* item de liste actif                         */

    /* Fonds de statut doux (badge/bandeau) — couple fond + texte */
    --mm-success-bg:      #e8f5e9;            /* statut Validé / succès (Material green 50/800) */
    --mm-success-fg:      #2e7d32;
    --mm-warning-bg:      #fff3e0;
    --mm-warning-fg:      #e65100;
    --mm-danger-bg:       #ffebee;
    --mm-danger-fg:       #c62828;
    --mm-info:            #2196f3;
    --mm-info-bg:         #e3f2fd;
    --mm-info-fg:         #1565c0;
    --mm-neutral-bg:      #eceff1;            /* statut neutre / Annulé (Material blue-grey 50/700) */
    --mm-neutral-fg:      #455a64;

    /* Teintes translucides dérivées (fond hover, badge actif, encarts) — anciennement
       rgba() en dur dans le catalogue de maquettes ; promues tokens via le projet Claude Design. */
    --mm-primary-tint:    rgba(39,100,129,.10);
    --mm-primary-tint-2:  rgba(39,100,129,.18);
    --mm-success-tint:    rgba(91,188,136,.14);
    --mm-warning-tint:    rgba(255,152,0,.12);
    --mm-error-tint:      rgba(255,80,80,.10);
    --mm-info-tint:       rgba(48,125,161,.12);

    /* Surfaces UI utilitaires (gris fonctionnels, sans rôle de marque) */
    /* Champs « filled » (input MudBlazor variant Filled). Dans l'app, le fond réel est
       --mud-palette-background-gray (mode-aware : #F3F5F7 clair / #424242 sombre), appliqué
       par custom.css au repos, au survol ET au focus (règle .mud-input-filled.mud-focused).
       Son miroir --mm-* est --mm-bg-subtle (mêmes valeurs, même bascule dark) : c'est LUI
       la référence, pas les défauts MudBlazor rgba(0,0,0,.09/.13) qui ne sont jamais rendus.
       Token documentaire (l'app utilise --mud-palette-background-gray en direct). */
    --mm-input-fill:       var(--mm-bg-subtle); /* fond d'un champ filled (repos/hover/focus) */
    --mm-input-fill-hover: var(--mm-bg-subtle); /* fond d'un champ filled au survol           */

    --mm-row-hover:       #fafbfc;            /* survol de ligne (table/liste)               */
    --mm-grey-hover:      #e4e6e8;            /* survol d'un bouton/zone gris clair          */
    --mm-skeleton-base:   #ebedef;            /* base du dégradé de squelette de chargement  */
    --mm-skeleton-shine:  #f5f6f7;            /* reflet du dégradé de squelette              */
    --mm-toast-bg:        #2e3035;            /* fond du toast (snackbar sombre)             */
}

/* =============================================================================
   RADZEN — on remappe ses variables sur la palette MudBlazor pour qu'elle suive
   le thème (light/dark) automatiquement. Fallback sur les primitives --mm-* tant
   que MudThemeProvider n'a pas injecté --mud-palette-* (premier paint).
   Chargé après material-base.css => ces déclarations gagnent la cascade.
   ============================================================================= */
:root {
    --rz-primary:                var(--mud-palette-primary, var(--mm-blue));
    --rz-primary-light:          var(--mud-palette-primary-lighten, var(--mm-turquoise));
    --rz-primary-lighter:        var(--mm-turquoise);
    --rz-primary-dark:           var(--mud-palette-primary-darken, var(--mm-blue));
    --rz-primary-darker:         var(--mm-blue);

    --rz-secondary:              var(--mud-palette-secondary, var(--mm-blue-2));
    --rz-secondary-light:        var(--mud-palette-secondary-lighten, var(--mm-blue-2));
    --rz-secondary-lighter:      var(--mm-blue-2);
    --rz-secondary-dark:         var(--mud-palette-secondary-darken, var(--mm-blue-2));
    --rz-secondary-darker:       var(--mm-blue-2);

    --rz-text-color:             var(--mud-palette-text-primary, var(--mm-black));
    --rz-base-background-color:  var(--mud-palette-surface, var(--mm-white));
    --rz-body-background-color:  var(--mud-palette-background, var(--mm-white));
    --rz-content-background-color: var(--mud-palette-surface, var(--mm-white));
}

/* =============================================================================
   TOKENS SÉMANTIQUES — mode-aware (light/dark via la classe .mm-dark sur <html>)
   -----------------------------------------------------------------------------
   Utilisés par les composants (*.razor.css) pour les couleurs qui changent selon
   le thème. Les composants n'utilisent QUE var(--mm-*) — jamais var(--mud-*).
   Le miroir runtime des couleurs de marque reste géré par MyMobilTheme.cs (Mud),
   ces tokens servent la couche CSS scoped/custom.

   ⚠️ Ces noms (mm-primary, mm-surface, mm-on-surface…) ne sont PAS lus par
      MyMobilTheme.cs (qui ne lit que les primitives mm-blue, mm-turquoise…),
      donc « dernière déclaration gagnante » de DesignTokens.cs est sans effet ici.

   La classe .mm-dark est posée sur <html> par MainLayout.OnAfterRenderAsync,
   synchronisée avec MyMobilTheme.IsDarkMode.
   ============================================================================= */
:root {
    /* Couleurs de marque */
    --mm-primary:        var(--mm-blue);
    --mm-secondary:      var(--mm-blue-2);

    /* Surfaces et fonds */
    --mm-bg:             var(--mm-white);        /* fond de page                */
    --mm-surface:        var(--mm-white);        /* fond de carte / dialog      */
    --mm-surface-drawer: var(--mm-white);        /* sidebar / drawer de navigation */
    --mm-bg-subtle:      var(--mm-grey-bg);      /* fond gris (champs, blocs)   */

    /* Texte */
    --mm-on-surface:     var(--mm-text-primary); /* texte principal = ce que l'app rend (#424242) */
    --mm-on-surface-2:   var(--mm-grey-text);    /* texte secondaire            */

    /* Rôle « validation finale » — le bouton Enregistrer d'une fiche ou d'un gabarit.
       Token de RÔLE et non de couleur : il pointe sur la primaire, donc il suit le thème
       (turquoise en sombre). Il existe pour que ce bouton ne retombe jamais sur
       --mm-success : le vert est une couleur de STATUT (badges, toasts, alertes), pas une
       couleur d'action (R08). */
    --mm-action-save:    var(--mm-primary);
    --mm-action-save-on: var(--mm-white);        /* libellé/glyphe posé dessus  */

    /* Séparateurs */
    --mm-divider:        rgba(0, 0, 0, .12);
}

:root.mm-dark {
    --mm-primary:        var(--mm-turquoise);
    --mm-secondary:      var(--mm-turquoise-2);

    /* Trois surfaces sombres, dans l'ordre de superposition — et trois seulement, comme en
       clair. Le distant en employait quatre, à quelques points de
       luminance : rien ne garantissait qu'elles restent ordonnées quand l'une bougeait.
       fond de page (le plus sombre) < sidebar/drawer < carte et menu (le plus clair). */
    --mm-bg:             var(--mm-bg-dark);      /* #27272F */
    --mm-surface-drawer: var(--mm-drawer-dark);  /* #32333d */
    --mm-surface:        var(--mm-surface-dark); /* #373740 */
    --mm-bg-subtle:      var(--mm-grey-bg-dark);

    --mm-on-surface:     var(--mm-white);
    --mm-on-surface-2:   rgba(255, 255, 255, .70);

    --mm-divider:        rgba(255, 255, 255, .12);
}