/* ============================================================
   DS Mobile EVO-063 SL 1.2 — COMPOSANTS
   ------------------------------------------------------------
   Atoms réutilisables sur les écrans responsive mobile : button,
   card, banner, chip, badge, list-item, day-picker, progress,
   form fields, cra-entry, filter-chips, tabs, form-section,
   year-pick, block-cta, kpi-chip, icon-type.

   Chargement conditionnel via `<link media="(max-width: 767px)">`
   dans base.html.twig — pas de @media wrapping ici (les classes
   .m-* sont sémantiquement mobile-only par convention).

   Promotions audit EVO-063 (consolidation 4 atoms) :
   - .m-tabs / .m-tab (Liste / Calendrier)
   - .m-filter-chips / .m-filter-chip (barre filtres)
   - .m-form-section (head + body card formulaire)
   - .m-icon-type--* (mapping unique icône par type d'absence)
   ============================================================ */

/* ============================================================
   Buttons — touch target 44 px par défaut
   ============================================================ */
.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-sp-1);
    height: var(--m-touch);
    padding: 0 var(--m-sp-4);
    border-radius: var(--m-r-md);
    border: 1px solid transparent;
    font-size: var(--m-fs-md);
    font-weight: var(--m-fw-semibold);
    background: var(--m-surface);
    color: var(--m-text);
    line-height: 1;
    text-decoration: none;       /* CLAUDE.md : pas de soulignement sur les <a class="m-btn"> */
}
.m-btn-block { width: 100%; }
.m-btn-sm    { height: 36px; padding: 0 var(--m-sp-3); font-size: var(--m-fs-base); }
.m-btn-primary { background: var(--m-brand); color: var(--m-text-onbrand); border-color: var(--m-brand); }
.m-btn-primary:active { background: var(--m-brand-strong); }
.m-btn-success { background: var(--m-success); color: var(--m-text-onbrand); border-color: var(--m-success); }
.m-btn-outline { background: var(--m-surface); color: var(--m-text); border-color: var(--m-border); }
.m-btn-ghost   { background: transparent; color: var(--m-text); border-color: transparent; }
.m-btn-danger  { background: var(--m-danger); color: var(--m-text-onbrand); border-color: var(--m-danger); }

/* ============================================================
   Icon button (.m-icon-btn) — BUG-035
   Bouton carré 36 px (touch target compact, en deçà du 44 px du
   .m-btn standard) utilisé en bandeau d'actions secondaires
   accolées à une card (cf. liste CRA mobile). Fond neutre,
   icône Bootstrap centrée. Variants : --danger pour suppression.
   Wrapper `.m-icon-btn-form` permet d'embarquer le bouton dans
   un <form> POST (CSRF) sans casser le flux flex du bandeau.
   ============================================================ */
.m-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--m-r-md);
    border: 0;
    padding: 0;
    background: var(--m-bg);
    color: var(--m-text-muted);
    font-size: var(--m-fs-lg);
    line-height: 1;
    text-decoration: none;       /* CLAUDE.md : pas de soulignement */
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 80ms linear, color 80ms linear;
}
.m-icon-btn:hover,
.m-icon-btn:active {
    background: var(--m-border);
    color: var(--m-text);
    text-decoration: none;
}
.m-icon-btn--danger { color: var(--m-danger); }
.m-icon-btn--danger:hover,
.m-icon-btn--danger:active {
    background: var(--m-danger-soft);
    color: var(--m-danger);
}
.m-icon-btn-form { display: inline-flex; margin: 0; }

/* ============================================================
   Cards
   ============================================================ */
.m-card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    padding: var(--m-sp-3) var(--m-sp-4);
    margin-bottom: var(--m-sp-2);
}
.m-card-tight { padding: var(--m-sp-2) var(--m-sp-3); }
.m-card-header {
    font-size: var(--m-fs-base);
    font-weight: var(--m-fw-semibold);
    color: var(--m-text);
    margin-bottom: var(--m-sp-2);
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
}
.m-card-header .bi { color: var(--m-text-muted); }

/* ============================================================
   Banners — bandeaux contextuels (équiv .cta-banner desktop).
   Variantes : success / info / warning / danger + variante
   compact 1-ligne.
   ============================================================ */
.m-banner {
    display: flex;
    gap: var(--m-sp-2);
    padding: var(--m-sp-3) var(--m-sp-3);
    border-radius: var(--m-r-lg);
    margin-bottom: var(--m-sp-2);
    border: 1px solid;
    align-items: flex-start;
}
.m-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.3;
}
.m-banner-content { flex: 1; min-width: 0; }
.m-banner-title {
    font-weight: var(--m-fw-semibold);
    font-size: var(--m-fs-base);
    line-height: var(--m-lh-tight);
}
.m-banner-desc {
    font-size: var(--m-fs-sm);
    line-height: var(--m-lh-base);
    opacity: 0.85;
    margin-top: 2px;
}
.m-banner-compact {
    padding: var(--m-sp-2) var(--m-sp-3);
    align-items: center;
}
.m-banner-compact .m-banner-title {
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-medium);
}
.m-banner-actions {
    display: flex;
    gap: var(--m-sp-2);
    margin-top: var(--m-sp-2);
    flex-wrap: wrap;
}
.m-banner-success { background: var(--m-success-soft); border-color: var(--m-success-line); color: var(--m-success-strong); }
.m-banner-info    { background: var(--m-info-soft);    border-color: var(--m-info-line);    color: var(--m-info); }
.m-banner-warning { background: var(--m-warning-soft); border-color: var(--m-warning-line); color: var(--m-warning-strong); }
.m-banner-danger  { background: var(--m-danger-soft);  border-color: var(--m-danger-line);  color: var(--m-danger); }
.m-banner[hidden] { display: none !important; }

/* ============================================================
   Chips — pastilles compactes (filtre, méta secondaire)
   ============================================================ */
.m-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--m-r-pill);
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-medium);
    background: var(--m-bg);
    color: var(--m-text);
    border: 1px solid var(--m-border);
    white-space: nowrap;
}
.m-chip-brand   { background: var(--m-brand-soft);   color: var(--m-warning-strong); border-color: var(--m-brand-line); }
.m-chip-info    { background: var(--m-info-soft);    color: var(--m-info);           border-color: var(--m-info-line); }
.m-chip-success { background: var(--m-success-soft); color: var(--m-success-strong); border-color: var(--m-success-line); }
.m-chip-warning { background: var(--m-warning-soft); color: var(--m-warning-strong); border-color: var(--m-warning-line); }
.m-chip-danger  { background: var(--m-danger-soft);  color: var(--m-danger);         border-color: var(--m-danger-line); }
.m-chip-muted   { background: var(--m-bg);           color: var(--m-text-muted);     border-color: var(--m-border); }
.m-chip[hidden] { display: none !important; }

/* ============================================================
   Badges — statut métier (CRA brouillon / soumis / validé…)
   ============================================================ */
.m-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--m-r-pill);
    font-size: 11px;
    font-weight: var(--m-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.m-badge-draft     { background: #f1f3f6;               color: #555f72; }
.m-badge-submitted { background: var(--m-warning-soft); color: var(--m-warning-strong); }
.m-badge-validated { background: var(--m-success-soft); color: var(--m-success-strong); }
.m-badge-client    { background: var(--m-info-soft);    color: var(--m-info); }

/* ============================================================
   List items — card list mobile (remplace les tableaux denses)
   ============================================================ */
.m-list { display: flex; flex-direction: column; gap: var(--m-sp-2); }
.m-list-item {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    padding: var(--m-sp-3) var(--m-sp-4);
    display: flex;
    align-items: center;
    gap: var(--m-sp-3);
    text-decoration: none;
    color: var(--m-text);
    min-height: var(--m-touch);
}
.m-list-item-body { flex: 1; min-width: 0; }
.m-list-item-title {
    font-weight: var(--m-fw-semibold);
    font-size: var(--m-fs-md);
    line-height: var(--m-lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-list-item-sub {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-list-item-meta {
    display: flex;
    gap: var(--m-sp-1);
    flex-wrap: wrap;
    margin-top: var(--m-sp-1);
}
.m-list-item-chevron {
    color: var(--m-text-muted);
    font-size: 18px;
    flex-shrink: 0;
}
.m-list-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--m-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-brand-soft);
    color: var(--m-brand-strong);
    font-size: var(--m-fs-lg);
    flex-shrink: 0;
}

/* ============================================================
   Day picker — vue semaine glissante (innovation mobile).
   Cells compactes 38×56 → 7 jours visibles d'un coup sur 380 px.
   ============================================================ */
.m-day-picker {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--m-sp-1) var(--m-sp-3) var(--m-sp-2);
    margin: 0 calc(-1 * var(--m-sp-3));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.m-day-picker::-webkit-scrollbar { display: none; }
.m-day {
    flex: 0 0 38px;
    height: 56px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    text-decoration: none;
    color: var(--m-text);
    position: relative;
    gap: 1px;
}
.m-day-dow {
    font-size: 9px;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
}
.m-day-num {
    font-size: 14px;
    font-weight: var(--m-fw-bold);
    line-height: 1;
}
.m-day-dot {
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--m-brand);
}
.m-day.is-weekend { color: var(--m-text-muted); }
.m-day.is-weekend .m-day-num { font-weight: var(--m-fw-medium); }
.m-day.is-holiday {
    background: var(--m-brand-soft);
    border-color: var(--m-brand-line);
}
.m-day.is-full {
    background: var(--m-success-soft);
    border-color: var(--m-success-line);
}
.m-day.is-empty .m-day-num { color: var(--m-danger); }
.m-day.is-current {
    background: var(--m-brand-soft);
    border-color: var(--m-brand);
    border-width: 2px;
    color: var(--m-brand-strong);
}
.m-day.is-current .m-day-num { color: var(--m-brand-strong); }

/* ============================================================
   Quota progress bar (équiv .cra-quota-progress desktop).
   P1-2 audit : variante --overflow ajoute un liseré au seuil
   100 % quand la valeur dépasse, pour lire visuellement le
   dépassement (même autorisé).
   ============================================================ */
.m-progress {
    width: 100%;
    height: 6px;
    background: var(--m-border);
    border-radius: var(--m-r-sm);
    overflow: hidden;
    position: relative;
}
.m-progress-sm { height: 4px; }
.m-progress-bar {
    height: 100%;
    border-radius: var(--m-r-sm);
    transition: width var(--m-dur-base) var(--m-easing);
}
.m-progress-bar.info    { background: var(--m-info); }
.m-progress-bar.success { background: var(--m-success); }
.m-progress-bar.warning { background: var(--m-warning); }
.m-progress-bar.danger  { background: var(--m-danger); }
/* Liseré seuil 100 % (utilisé quand la valeur dépasse, width:100% sur
   la bar) — petit trait vertical foncé au passage du seuil. Position
   du liseré = 100 % / valeur_max. Ex. valeur 105 % → 100/105 ≈ 95.2 %.
   Calculable côté Twig en variable CSS --m-overflow-line. */
.m-progress--overflow::after {
    content: '';
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: var(--m-overflow-line, 95%);
    width: 2px;
    background: var(--m-text);
    opacity: 0.6;
}

/* ============================================================
   Form fields
   ============================================================ */
.m-field { margin-bottom: var(--m-sp-3); }
.m-label {
    display: block;
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-semibold);
    color: var(--m-text-muted);
    margin-bottom: var(--m-sp-1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.m-input, .m-select, .m-textarea {
    width: 100%;
    padding: 0 var(--m-sp-3);
    height: var(--m-touch);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    background: var(--m-surface);
    font-family: inherit;
    font-size: var(--m-fs-md);
    color: var(--m-text);
}
.m-textarea {
    height: auto;
    padding: var(--m-sp-2) var(--m-sp-3);
    min-height: 88px;
    resize: vertical;
}
.m-input:focus, .m-select:focus, .m-textarea:focus {
    outline: 2px solid var(--m-brand);
    outline-offset: -1px;
    border-color: var(--m-brand);
}
.m-input-stepper {
    width: 72px;
    height: 36px;
    text-align: right;
    font-size: var(--m-fs-lg);
    font-weight: var(--m-fw-bold);
    padding: 0 var(--m-sp-2);
}

/* ============================================================
   Type d'absence — mapping icône + couleur unique (P0-A audit).
   Helper conceptuel à mapper côté Twig en `absence_type_icon()`
   / `absence_type_color()` lors des SL 1.4 / 1.5 / 1.6.

   Type         Icône               Couleur
   ----         -----               -------
   Travaillés   bi-briefcase-fill   --m-brand
   Congés       bi-sun-fill         --m-info
   RTT          bi-cup-hot-fill     --m-success
   Maladie      bi-capsule          --m-danger
   Formation    bi-mortarboard-fill --m-brand
   Férié        bi-calendar-event   --m-text-muted
   ============================================================ */
.m-icon-type--travaille { background: var(--m-brand-soft);   color: var(--m-brand-strong); }
.m-icon-type--conges    { background: var(--m-info-soft);    color: var(--m-info); }
.m-icon-type--rtt       { background: var(--m-success-soft); color: var(--m-success-strong); }
.m-icon-type--maladie   { background: var(--m-danger-soft);  color: var(--m-danger); }
.m-icon-type--formation { background: var(--m-brand-soft);   color: var(--m-brand-strong); }
.m-icon-type--ferie     { background: #f1f3f6;               color: var(--m-text-muted); }

/* ============================================================
   CRA entry — 1 ligne par engagement.label (cf. _line_template).
   ============================================================ */
.m-cra-entries {
    display: flex;
    flex-direction: column;
    gap: var(--m-sp-2);
}
.m-cra-entry {
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    padding: var(--m-sp-2) var(--m-sp-3);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
}
.m-cra-entry-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--m-r-md);
    background: var(--m-brand-soft);
    color: var(--m-brand-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--m-fs-md);
}
.m-cra-entry-icon.off {
    background: #f1f3f6;
    color: var(--m-text-muted);
}
.m-cra-entry-icon.injected {
    background: var(--m-info-soft);
    color: var(--m-info);
}
.m-cra-entry-label {
    flex: 1;
    font-size: var(--m-fs-base);
    font-weight: var(--m-fw-medium);
}
/* État erreur de validation — synchronisé avec .invalid posée par
   cra-grid#showValidationErrors() sur les cellules desktop. Bordure
   rouge + fond rosé + stepper rouge. */
.m-cra-entry.is-invalid {
    border-color: var(--m-danger);
    background: var(--m-danger-soft);
}
.m-input-stepper.is-invalid {
    border-color: var(--m-danger);
    color: var(--m-danger);
    background: #fff;
}

/* ============================================================
   Filter chips — barre de filtres pill (CRA list, absences list).
   Touch target 44 px (P2-4 audit). Variante is-active = pill noir.
   Variantes scroll-x (overflow long) ou spread (justify-content).
   ============================================================ */
.m-filter-chips {
    /* CLAUDE.md « pas de scroll horizontal jamais » : wrap par défaut.
       Les chips passent sur N lignes si elles ne tiennent pas en largeur. */
    display: flex;
    gap: 6px;
    padding: 4px 0 8px;
    flex-wrap: wrap;
    overflow: visible;
}
/* Variante --scroll : réservée à cas exceptionnels (pickers tabulaires).
   À NE PAS utiliser pour des filtres ou navigation contextuelle. */
.m-filter-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.m-filter-chips--scroll::-webkit-scrollbar { display: none; }
/* Variante --spread : chips à largeur égale (flex:1) pour forme pill uniforme
   sur tous les libellés, du plus court (« Tous ») au plus long. Évite l'effet
   « rond » sur les libellés courts vs « ellipse » sur les longs. */
.m-filter-chips--spread { justify-content: space-between; }
.m-filter-chips--spread .m-filter-chip {
    flex: 1;
    justify-content: center;
}
.m-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--m-r-pill);
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-semibold);
    background: var(--m-surface);
    color: var(--m-text);
    border: 1px solid var(--m-border);
    scroll-snap-align: start;
    white-space: nowrap;
    text-decoration: none;
    min-height: var(--m-touch);
    flex-shrink: 0;
}
.m-filter-chip.is-active {
    background: var(--m-text);
    color: var(--m-text-onbrand);
    border-color: var(--m-text);
}
.m-filter-chip .count {
    background: rgba(0, 0, 0, 0.08);
    padding: 0 5px;
    border-radius: var(--m-r-pill);
    font-size: 10px;
    font-weight: var(--m-fw-bold);
}
.m-filter-chip.is-active .count { background: rgba(255, 255, 255, 0.20); }

/* ============================================================
   Variante --small : chips compactes pour filtres denses (CRA list,
   Absences list, etc.). Hauteur réduite (36px), tones sémantiques en
   état actif (info/warning/success/danger), count en pill grise
   distincte. Pattern type « smart filter pill » : 4+ chips compactes
   tiennent sur 1 ligne en 380 px sans déborder.

   À utiliser avec .m-filter-chips--spread pour égalité de largeur :
     <div class="m-filter-chips m-filter-chips--spread m-filter-chips--small">
       <a class="m-filter-chip m-filter-chip--tone-info is-active">Tous <span class="count">12</span></a>
       <a class="m-filter-chip m-filter-chip--tone-warning">Brouillon <span class="count">2</span></a>
       ...
     </div>
   ============================================================ */
.m-filter-chips--small { gap: 6px; }
.m-filter-chips--small .m-filter-chip {
    min-height: 36px;
    padding: 4px 10px;
    font-size: 11.5px;
    gap: 6px;
    background: var(--m-surface);
    color: var(--m-text);
    border-color: var(--m-border);
}
/* Tones sémantiques — appliqués uniquement en état actif. En inactif,
   la chip reste neutre (surface + border gris). En actif, bordure + texte
   colorés selon tone, fond très léger (soft) pour rester subtil. */
.m-filter-chips--small .m-filter-chip--tone-info.is-active {
    background: var(--m-info-soft);
    color: var(--m-info);
    border-color: var(--m-info);
}
.m-filter-chips--small .m-filter-chip--tone-warning.is-active {
    background: var(--m-warning-soft);
    color: var(--m-warning-strong);
    border-color: var(--m-warning);
}
.m-filter-chips--small .m-filter-chip--tone-success.is-active {
    background: var(--m-success-soft);
    color: var(--m-success-strong);
    border-color: var(--m-success);
}
.m-filter-chips--small .m-filter-chip--tone-danger.is-active {
    background: var(--m-danger-soft);
    color: var(--m-danger);
    border-color: var(--m-danger);
}
/* Count en pill grise plus distincte (DS standard pour --small).
   En actif sur fond soft tonal, le count reste neutre pour ne pas se mélanger. */
.m-filter-chips--small .m-filter-chip .count {
    background: var(--m-bg);
    color: var(--m-text-muted);
    border: 1px solid var(--m-border);
    font-size: 10.5px;
    padding: 0 6px;
    border-radius: var(--m-r-pill);
    font-weight: var(--m-fw-semibold);
    min-width: 18px;
    text-align: center;
    line-height: 1.5;
}
.m-filter-chips--small .m-filter-chip.is-active .count {
    background: var(--m-surface);
    color: var(--m-text);
}

/* ============================================================
   Segmented control « m-filter-segments » — alternative aux chips
   pour filtres N-états (N ≥ 4) qui doivent tenir sur 1 SEULE LIGNE
   en mobile (380 px). Chaque segment = icône + count en haut +
   légende texte en bas. Largeurs égales (flex:1), container avec
   fond gris + ombre sélection sur l'actif (style iOS segmented).

   Garantit ZÉRO scroll horizontal et ZÉRO wrap, quel que soit le
   nombre de chiffres dans les counts, en sacrifiant l'espace label
   au profit d'une icône + d'une légende courte.

   Usage :
     <div class="m-filter-segments">
       <a class="m-filter-segment m-filter-segment--tone-info is-active" href="...">
         <span class="m-filter-segment-top">
           <i class="bi bi-list"></i>
           <span class="m-filter-segment-count">12</span>
         </span>
         <span class="m-filter-segment-label">Tous</span>
       </a>
       ...
     </div>
   ============================================================ */
.m-filter-segments {
    display: flex;
    gap: 4px;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    padding: 4px;
    margin-bottom: var(--m-sp-3);
}
.m-filter-segment {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    border-radius: var(--m-r-sm);
    text-decoration: none;
    color: var(--m-text-muted);
    min-height: 48px;
    background: transparent;
    border: 0;
    min-width: 0;
    overflow: hidden;
}
.m-filter-segment-top {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}
.m-filter-segment-top .bi { font-size: 14px; }
.m-filter-segment-count {
    font-size: 13px;
    font-weight: var(--m-fw-bold);
    font-variant-numeric: tabular-nums;
}
.m-filter-segment-label {
    font-size: 9.5px;
    font-weight: var(--m-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.m-filter-segment.is-active {
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Tones sémantiques — colorent icône + count en état actif. Label reste
   neutre (--m-text) pour lisibilité. Inactif : tout gris muted. */
.m-filter-segment--tone-info.is-active    { color: var(--m-info); }
.m-filter-segment--tone-warning.is-active { color: var(--m-warning-strong); }
.m-filter-segment--tone-success.is-active { color: var(--m-success-strong); }
.m-filter-segment--tone-danger.is-active  { color: var(--m-danger); }
.m-filter-segment.is-active .m-filter-segment-label { color: var(--m-text); }

/* ============================================================
   Tabs — segmented control compact (Liste / Calendrier).
   Touch target 36 px (≥ 44 garanti par l'étirement flex:1 sur 380 px).
   ============================================================ */
.m-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--m-bg);
    border-radius: var(--m-r-pill);
    margin-bottom: var(--m-sp-3);
    border: 1px solid var(--m-border);
}
.m-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--m-r-pill);
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-semibold);
    color: var(--m-text-muted);
    text-decoration: none;
    min-height: 36px;
}
.m-tab.is-active {
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Form section — card encapsulant un bloc de formulaire avec
   head (icône + titre + sub) + body (champs). Pattern réutilisé
   sur absence-new, client-dashboard, cra-new, etc.
   ============================================================ */
.m-form-section {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    margin-bottom: var(--m-sp-2);
    overflow: hidden;
}
.m-form-section-head {
    padding: var(--m-sp-3) var(--m-sp-4);
    border-bottom: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
}
.m-form-section-head .title {
    font-size: var(--m-fs-base);
    font-weight: var(--m-fw-semibold);
    flex: 1;
    min-width: 0;
}
.m-form-section-head .bi {
    color: var(--m-text-muted);
    flex-shrink: 0;
}
.m-form-section-head .sub {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: var(--m-lh-base);
}
.m-form-section-body {
    padding: var(--m-sp-3) var(--m-sp-4);
}

/* ============================================================
   Year picker — sélecteur d'année compact (équivalent .year-select
   desktop). <select> natif stylé en pill, ouvre le picker iOS/Android.
   Zéro JS à maintenir. Réutilisé sur dashboard / cra-list / etc.
   ============================================================ */
.m-year-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 8px 0 12px;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-pill);
    font-family: inherit;
    font-size: var(--m-fs-base);
    font-weight: var(--m-fw-semibold);
    color: var(--m-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b8191'%3e%3cpath d='M8 10.5l-4-4h8z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
    padding-right: 24px;
}

/* ============================================================
   Block CTA — bouton plein-bas de card (équivalent .abs-cta
   desktop). Réutilisable : « + Déclarer une absence » dans
   bloc absences, « + Nouveau CRA » dans bloc engagements, etc.
   ============================================================ */
.m-block-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--m-sp-3) var(--m-sp-4);
    background: var(--m-bg);
    color: var(--m-brand);
    font-weight: var(--m-fw-semibold);
    text-decoration: none;
    font-size: var(--m-fs-base);
    border-top: 1px solid var(--m-border);
    min-height: var(--m-touch);
}
.m-block-cta:active { background: var(--m-brand-soft); }

/* ============================================================
   KPI chip — chips compactes hero dashboard (et autres contextes
   mêlant label uppercase + valeur). Variantes tonales pour
   véhiculer un niveau de gravité métier (override actif info,
   warning, danger). Cohérence avec .kpi-chip--* desktop EVO-064.
   ============================================================ */
.m-kpi-chip {
    display: inline-flex;
    flex-direction: column;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    padding: 4px 8px;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}
.m-kpi-chip em {
    font-style: normal;
    font-size: 9.5px;
    font-weight: var(--m-fw-semibold);
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-kpi-chip b {
    font-size: var(--m-fs-base);
    font-weight: var(--m-fw-bold);
    color: var(--m-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-kpi-chip--accent  { background: var(--m-brand-soft);   border-color: var(--m-brand-line); }
.m-kpi-chip--accent em, .m-kpi-chip--accent b { color: var(--m-brand-strong); }
.m-kpi-chip--info    { background: var(--m-info-soft);    border-color: var(--m-info-line); }
.m-kpi-chip--info em, .m-kpi-chip--info b { color: var(--m-info); }
.m-kpi-chip--warning { background: var(--m-warning-soft); border-color: var(--m-warning-line); }
.m-kpi-chip--warning em, .m-kpi-chip--warning b { color: var(--m-warning-strong); }
.m-kpi-chip--danger  { background: var(--m-danger-soft);  border-color: var(--m-danger-line); }
.m-kpi-chip--danger em, .m-kpi-chip--danger b { color: var(--m-danger); }

/* ============================================================
   Year tabs — sélecteur d'année en tabs segmenté (alternative
   au .m-year-pick quand on veut exposer toutes les options en
   un coup d'œil). Réutilisable : cra-new, futur cra-edit.
   ============================================================ */
/* Alignement DS avec .m-filter-segments (segmented control square) :
   border-radius medium sur le container, small sur les segments. */
.m-year-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--m-bg);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    margin-bottom: var(--m-sp-3);
    overflow: hidden;
}
.m-year-tab {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: var(--m-r-sm);
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-semibold);
    color: var(--m-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    min-height: 36px;
}
.m-year-tab.is-active {
    background: var(--m-surface);
    color: var(--m-brand-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.m-year-tab:not(.is-active):active {
    background: var(--m-bg);
}
.m-year-tab[hidden] { display: none !important; }

/* ============================================================
   Month grid — grille 4 colonnes des mois, états :
   - default : saisissable (cliquable)
   - .is-selected : choix courant
   - .is-saisi : CRA déjà saisi (info, non cliquable)
   - .is-disabled : hors période / trop futur (non cliquable)
   Pilotée par cra-frise-switch Stimulus controller (cra-new).
   ============================================================ */
.m-month-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: var(--m-sp-3);
}
.m-month-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 4px;
    min-height: 56px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-md);
    font-family: inherit;
    color: var(--m-text);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.m-month-cell-name {
    font-size: 11px;
    font-weight: var(--m-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1;
}
.m-month-cell-year {
    font-size: 10px;
    color: var(--m-text-muted);
    line-height: 1;
}
.m-month-cell:not(:disabled):active {
    background: var(--m-brand-soft);
    border-color: var(--m-brand-line);
}
.m-month-cell.is-selected {
    background: var(--m-brand);
    border-color: var(--m-brand);
    color: var(--m-text-onbrand, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.m-month-cell.is-selected .m-month-cell-year {
    color: rgba(255, 255, 255, 0.85);
}
.m-month-cell.is-saisi {
    background: var(--m-success-soft);
    border-color: var(--m-success-line);
    color: var(--m-success-strong);
    text-decoration: none;
}
.m-month-cell.is-saisi .m-month-cell-year {
    color: var(--m-success-strong);
    opacity: 0.7;
}
.m-month-cell.is-disabled {
    background: var(--m-bg);
    color: var(--m-text-faint);
    cursor: not-allowed;
    opacity: 0.4;
}
.m-month-cell.is-disabled .m-month-cell-name {
    text-decoration: line-through;
}
.m-month-cell[hidden] { display: none !important; }

/* Légende grille mois — 3 états explicites */
.m-month-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--m-text-muted);
    line-height: 1.6;
    margin-bottom: var(--m-sp-3);
}
.m-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}
.m-legend-dot--avail { background: var(--m-brand); }
.m-legend-dot--saisi { background: var(--m-success-soft); border: 1px solid var(--m-success-line); }
.m-legend-dot--out   { background: var(--m-bg); border: 1px solid var(--m-border); opacity: 0.5; }

/* ============================================================
   Récap période cra-new — banner info, marge top à zéro (placé
   AVANT les tabs/grille pour donner le contexte au user). Le
   bouton d'action prend la largeur dispo (variante mobile :
   évite le débordement vu sur callout standard). EVO-063 SL 1.9.
   ============================================================ */
.m-cra-period-summary {
    margin-top: 0;
}
.m-cra-period-summary-action {
    margin-top: 8px;
}
.m-cra-period-summary-action .btn {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   Engagement card lisible — utilisée mobile cra-new pour montrer
   le label complet de l'engagement sélectionné (le <select> natif
   tronque à 30-40 caractères selon device). Variante neutre (fond
   surface, sans accent) car le contexte est déjà donné par le head
   de la section. EVO-063 SL 1.9.
   ============================================================ */
.m-eng-card {
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    padding: var(--m-sp-3);
    background: var(--m-brand-soft);
    border: 1px solid var(--m-brand-line);
    border-radius: var(--m-r-lg);
    margin-bottom: var(--m-sp-2);
}
.m-eng-card--neutral {
    background: var(--m-bg);
    border-color: var(--m-border);
}
.m-eng-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--m-r-md);
    background: var(--m-brand);
    color: var(--m-text-onbrand, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--m-fs-lg);
    flex-shrink: 0;
}
.m-eng-card--neutral .m-eng-card-icon {
    background: var(--m-surface);
    color: var(--m-text-muted);
    border: 1px solid var(--m-border);
}
.m-eng-card-body {
    flex: 1;
    min-width: 0;
}
.m-eng-card-label {
    font-weight: var(--m-fw-semibold);
    font-size: var(--m-fs-sm);
    color: var(--m-text);
    line-height: 1.35;
    word-break: break-word; /* code long sans espace : SOST09-INFRA-2026 */
}

/* ============================================================
   EVO-063 SL 1.10 — Cra edit mobile : boutons nav inter-CRA,
   meta engagement repliable, card jour, empty msg, stepper compact,
   sticky bottom dédié. Cf. mockup cra-edit.html.
   ============================================================ */

/* Boutons chevrons mois précédent / suivant — pattern .m-topbar-icon
   mais en touch target 36px (placement inline à droite du H1). */
.m-month-switch-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--m-r-md);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--m-fs-base);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}
.m-month-switch-btn:active { background: var(--m-bg); }
.m-month-switch-btn:disabled,
.m-month-switch-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Header page cra-edit mobile */
.m-cra-edit-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 4px;
}
.m-cra-edit-head .m-page-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.m-cra-edit-sub {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    margin-bottom: var(--m-sp-3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.m-cra-edit-kpi { font-variant-numeric: tabular-nums; }

/* Quota banner mobile — variante avec mini-gauge % à gauche.
   Reproduit l'esprit du _quota_banner desktop (petite pastille bleue avec
   le %) en version compacte mobile. La pastille hérite de la couleur du
   banner parent (info/warning/danger). */
.m-quota-banner {
    align-items: center;
}
.m-quota-gauge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--m-surface);
    color: inherit;
    font-size: 11px;
    font-weight: var(--m-fw-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    font-variant-numeric: tabular-nums;
}

/* Lien inline dans un banner mobile — souligné discret pour distinguer
   du texte courant. Couleur héritée du banner (info/warning/etc.). */
.m-banner-link {
    color: inherit;
    text-decoration: underline;
    font-weight: var(--m-fw-semibold);
    margin-left: 4px;
    white-space: nowrap;
}

/* Mirror mobile du bandeau #cra-errors — même style visuel (rouge), placé
   entre le sub-stat et la card jour. Le titre <strong> du contenu est
   masqué (redondant avec le pill « Règle non respectée » du sub-stat). */
.m-cra-errors-mobile {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fde8e8;
    color: #9c2030;
    border: 1px solid #f5c2c7;
    font-size: 13px;
}
/* En mobile, le titre <strong> est redondant avec le pill « Règle non respectée »
   du sub-stat juste au-dessus. On masque uniquement dans le mirror mobile. */
.m-cra-errors-mobile strong {
    display: none;
}
.m-cra-errors-mobile ul {
    margin: 0;
    padding-left: 18px;
}

/* Banner repliable via <details> natif : summary = icône + titre + chevron.
   Body en m-banner-desc, masqué par défaut, toggle CSS via [open]. */
.m-banner-collapsible {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}
.m-banner-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    padding: var(--m-sp-2) var(--m-sp-3);
}
.m-banner-summary::-webkit-details-marker { display: none; }
.m-banner-summary .m-banner-title { flex: 1; min-width: 0; }
.m-banner-collapsible-chevron {
    color: inherit;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.m-banner-collapsible[open] .m-banner-collapsible-chevron {
    transform: rotate(180deg);
}
.m-banner-collapsible-body {
    padding: 0 var(--m-sp-3) var(--m-sp-2) calc(var(--m-sp-3) + 24px);
    border-top: 1px solid currentColor;
    border-top-color: rgba(0, 0, 0, 0.08);
    padding-top: var(--m-sp-2);
    margin-top: 0;
}

/* Card meta engagement repliable */
.m-cra-eng-meta { padding: 0; }
.m-cra-eng-meta-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: var(--m-touch);
}
.m-cra-eng-meta-head::-webkit-details-marker { display: none; }
.m-cra-eng-meta-avatar { margin: 0; flex-shrink: 0; }
.m-cra-eng-meta-text { flex: 1; min-width: 0; }
.m-cra-eng-meta-title {
    font-weight: var(--m-fw-semibold);
    font-size: var(--m-fs-base);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-cra-eng-meta-sub {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-cra-eng-meta-chevron {
    color: var(--m-text-muted);
    transition: transform 0.2s ease;
}
details[open] > .m-cra-eng-meta-head .m-cra-eng-meta-chevron {
    transform: rotate(180deg);
}
.m-cra-eng-meta-body {
    padding: 0 12px 10px 12px;
    border-top: 1px solid var(--m-border);
    margin-top: 4px;
    padding-top: 8px;
    font-size: var(--m-fs-sm);
    line-height: 1.6;
    color: var(--m-text-muted);
}
.m-cra-eng-meta-body > div { display: flex; align-items: center; gap: 6px; }

/* Section title du day picker — titre à gauche + hint « glisser » à droite.
   Aide à comprendre l'UX swipe horizontal du picker (sinon le user peut
   penser que les jours sont coupés au-delà de la viewport). */
.m-day-picker-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--m-sp-2);
}
.m-day-picker-hint {
    font-size: var(--m-fs-xs, 10px);
    font-weight: var(--m-fw-medium);
    color: var(--m-text-muted);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.m-day-picker-hint .bi {
    font-size: 11px;
    margin-right: 2px;
}

/* Card du jour sélectionné */
.m-cra-day-card {
    margin-top: var(--m-sp-3);
}
.m-cra-day-card-header {
    align-items: center;
    gap: 6px;
}
.m-cra-day-card-chip {
    margin-left: auto;
}
.m-cra-day-card[hidden] { display: none !important; }

/* État (a) — jour non ouvré */
.m-cra-day-empty-msg {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    line-height: var(--m-lh-base);
    text-align: center;
    padding: var(--m-sp-3) 0;
}
.m-cra-day-empty-msg .bi {
    font-size: 18px;
    color: var(--m-text-muted);
    display: block;
    margin-bottom: 6px;
}
.m-cra-day-empty-msg[hidden] { display: none !important; }

/* État (b) — jour ouvré : entries + add line */
.m-cra-entries[hidden] { display: none !important; }
.m-cra-day-add[hidden] { display: none !important; }

.m-cra-day-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--m-border);
    font-size: var(--m-fs-sm);
}
.m-cra-day-total span { color: var(--m-text-muted); }
.m-cra-day-total[hidden] { display: none !important; }

/* Item liste avec déploiement natif <details> : .m-list-item-collapsible.
   Le <summary> rend l'apparence d'un item liste (.m-list-item), le chevron
   tourne via [open] sélecteur, le détail contient le contenu déployé. */
.m-list-item-collapsible {
    display: block;
}
.m-list-item-collapsible > summary {
    list-style: none;
    cursor: pointer;
}
.m-list-item-collapsible > summary::-webkit-details-marker {
    display: none;
}
.m-list-item--collapsible-summary .m-list-item-chevron {
    transition: transform 0.2s ease;
}
.m-list-item-collapsible[open] > .m-list-item--collapsible-summary .m-list-item-chevron {
    transform: rotate(180deg);
}
.m-list-item-detail {
    margin-top: var(--m-sp-2);
    /* Le contenu déployé reste dans la mise en page mobile : on neutralise
       les marges/paddings du _timeline.html.twig desktop trop large. */
    overflow-x: auto;
}

/* Card commentaire mobile */
.m-cra-comment-card { margin-top: var(--m-sp-3); }

/* ============================================================
   EVO-063 SL 1.11 — Client dashboard mobile
   ------------------------------------------------------------
   Pattern lecture seule : 2 KPI grands + liste CRA à valider +
   historique repliable. Pas de sticky bottom (action = tap item).
   ============================================================ */

/* Lead sous le H1 du dashboard client */
.m-client-dashboard-title { margin: 4px 0 4px; }
.m-client-dashboard-lead {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    margin-bottom: var(--m-sp-3);
    line-height: var(--m-lh-base);
}

/* KPI grand — 2 boxes critiques pour la mise en avant des chiffres clés */
.m-kpi-big {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-sp-2);
    margin-bottom: var(--m-sp-3);
}
.m-kpi-big-box {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-left: 4px solid var(--m-border-strong);
    border-radius: var(--m-r-lg);
    padding: var(--m-sp-3);
}
.m-kpi-big-box--accent {
    border-left-color: var(--m-brand);
    background: var(--m-brand-soft);
}
.m-kpi-big-box--success {
    border-left-color: var(--m-success);
}
.m-kpi-big-box .icon {
    font-size: 18px;
    color: var(--m-text-muted);
    margin-bottom: 4px;
}
.m-kpi-big-box--accent .icon { color: var(--m-brand-strong); }
.m-kpi-big-box--success .icon { color: var(--m-success-strong); }
.m-kpi-big-box .lbl {
    font-size: var(--m-fs-xs);
    font-weight: var(--m-fw-semibold);
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}
.m-kpi-big-box .val {
    font-size: var(--m-fs-display);
    font-weight: var(--m-fw-black);
    color: var(--m-text);
    line-height: 1.1;
    margin: 2px 0;
    font-variant-numeric: tabular-nums;
}
.m-kpi-big-box--accent .val { color: var(--m-brand-strong); }
.m-kpi-big-box .sub {
    font-size: 11px;
    color: var(--m-text-muted);
    line-height: 1.3;
}

/* Sections section spécifiques du dashboard client */
.m-client-dashboard-section {
    margin-bottom: var(--m-sp-3);
}
.m-client-dashboard-icon-accent {
    color: var(--m-brand);
}
.m-client-dashboard-head-body {
    flex: 1;
    min-width: 0;
}
.m-client-dashboard-head-title {
    display: flex;
    align-items: center;
    gap: 6px;
}
.m-client-dashboard-count {
    padding: 1px 7px;
    font-size: 11px;
}

/* Liste plate (items collés bord-à-bord, séparés par border-bottom interne) */
.m-client-dashboard-list { padding: 0; }
.m-list-item--flat {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--m-border);
}
.m-list-item--flat:last-child {
    border-bottom: 0;
}
.m-client-dashboard-item-icon--accent {
    background: var(--m-brand-soft);
    color: var(--m-brand-strong);
}
.m-client-dashboard-item-icon--success {
    background: var(--m-success-soft);
    color: var(--m-success-strong);
}

/* Empty state — aucun CRA à valider */
.m-client-dashboard-empty {
    padding: var(--m-sp-5, 32px) var(--m-sp-3);
    text-align: center;
    color: var(--m-text-muted);
    font-size: var(--m-fs-sm);
}
.m-client-dashboard-empty .bi {
    font-size: 32px;
    color: var(--m-success);
    display: block;
    margin-bottom: var(--m-sp-2);
}

/* Section historique repliable */
.m-client-dashboard-history {
    padding: 0;
    margin-top: var(--m-sp-3);
}
.m-client-dashboard-history-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: var(--m-touch);
}
.m-client-dashboard-history-head::-webkit-details-marker { display: none; }
.m-client-dashboard-history-icon { color: var(--m-text-muted); }
.m-client-dashboard-history-title {
    flex: 1;
    font-weight: var(--m-fw-semibold);
    font-size: var(--m-fs-base);
}
.m-client-dashboard-history-chevron {
    color: var(--m-text-muted);
    transition: transform 0.2s ease;
}
.m-client-dashboard-history[open] .m-client-dashboard-history-chevron {
    transform: rotate(180deg);
}
.m-client-dashboard-history[open] .m-client-dashboard-list .m-list-item-row:first-child {
    border-top: 1px solid var(--m-border);
}

/* ============================================================
   EVO-063 SL 1.12 — Client validation CRA mobile
   ------------------------------------------------------------
   Vue lecture seule pour le client : examen + boutons Valider/
   Retourner en sticky bottom. Composants : .m-summary (3 KPI),
   .m-cra-entry--readonly (lignes lecture seule), .m-client-cra-view-*.
   ============================================================ */

/* Header H1 row : back + nom collab + PDF (pattern identique à
   .m-cra-edit-head mais spécifique au client) */
.m-client-cra-view-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 4px;
}
.m-client-cra-view-head .m-page-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.m-client-cra-view-mission {
    font-size: var(--m-fs-sm);
    color: var(--m-text-muted);
    margin-bottom: var(--m-sp-3);
    line-height: var(--m-lh-base);
}

/* Synthèse 3 KPI : grid 3 cols, icône-led centré, label court sous icône */
.m-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--m-sp-1);
    margin-bottom: var(--m-sp-3);
}
.m-summary-box {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-r-lg);
    padding: var(--m-sp-2) var(--m-sp-1);
    text-align: center;
    min-width: 0;
}
.m-summary-box .icon {
    font-size: 16px;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--m-text-muted);
}
.m-summary-box .val {
    font-size: 20px;
    font-weight: var(--m-fw-bold);
    color: var(--m-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.m-summary-box .val small {
    font-size: var(--m-fs-sm);
    font-weight: var(--m-fw-medium);
    color: var(--m-text-muted);
}
.m-summary-box .lbl {
    font-size: 10px;
    font-weight: var(--m-fw-semibold);
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    margin-top: 3px;
    white-space: nowrap;
}
.m-summary-box--accent {
    background: var(--m-brand-soft);
    border-color: var(--m-brand-line);
}
.m-summary-box--accent .icon { color: var(--m-brand-strong); }
.m-summary-box--accent .val { color: var(--m-brand-strong); }

/* Variante lecture seule de .m-cra-entry (valeur à droite au lieu de stepper) */
.m-cra-entry--readonly .m-cra-entry-value {
    font-size: var(--m-fs-lg);
    font-weight: var(--m-fw-bold);
    color: var(--m-text);
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}

/* Card détail client : marge bottom + total saisi en pied */
.m-client-cra-view-detail {
    margin-bottom: var(--m-sp-3);
}
.m-client-cra-view-total {
    display: flex;
    justify-content: space-between;
    margin-top: var(--m-sp-3);
    padding-top: var(--m-sp-2);
    border-top: 1px dashed var(--m-border);
    font-size: var(--m-fs-sm);
}
.m-client-cra-view-total span { color: var(--m-text-muted); }

/* Commentaire collab — typo lisible */
.m-client-cra-view-comment {
    font-size: var(--m-fs-base);
    color: var(--m-text);
    line-height: var(--m-lh-base);
    white-space: pre-wrap;
}
.m-client-cra-view-log-date {
    font-size: 11px;
    color: var(--m-text-muted);
    margin-top: 4px;
}

/* Sticky bottom client : Retourner (outline danger) + Valider (success).
   Padding-right 40px réservé pour le Symfony web debug toolbar (cf.
   [[feedback-symfony-profiler-mobile]]). */
.m-client-cra-view-bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--m-z-bottombar, 90);
    background: var(--m-surface);
    border-top: 1px solid var(--m-border);
    padding: var(--m-sp-2) calc(var(--m-sp-3) + 40px) calc(var(--m-sp-2) + env(safe-area-inset-bottom, 0px)) var(--m-sp-3);
    display: flex;
    align-items: center;
    gap: var(--m-sp-2);
    box-shadow: var(--m-shadow-bar, 0 -4px 12px rgba(0, 0, 0, 0.05));
    min-height: var(--m-h-bottombar, 64px);
    flex-wrap: nowrap;
}
.m-client-cra-view-bottom-reject {
    flex: 0 0 auto;
    color: var(--m-danger);
    border-color: var(--m-danger-line);
    white-space: nowrap;
}
.m-client-cra-view-bottom-validate {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}
.m-client-cra-view-bottom[hidden] { display: none !important; }

/* Réservation d'espace bas pour le sticky bottom */
.m-client-cra-view {
    padding-bottom: calc(var(--m-h-bottombar, 64px) + var(--m-sp-3, 12px));
}

/* ============================================================
   m-list-item-row : pattern « item link + bouton d'action accolé ».
   Évite le bug HTML5 du <a> imbriqué dans un <a> (parser sort le
   second). Wrapper en row flex, item link prend la largeur dispo,
   action 36px à droite. EVO-063 SL 1.11.
   ============================================================ */
.m-list-item-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--m-border);
}
.m-list-item-row:last-child { border-bottom: 0; }
.m-list-item-row > .m-list-item {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
}
.m-list-item-row-action {
    align-self: center;
    flex-shrink: 0;
    margin-right: var(--m-sp-3);
}
/* Item link en mode « with-action » : retire le chevron (la zone d'action
   à droite remplace l'indication de navigation). */
.m-list-item--with-action .m-list-item-chevron { display: none; }
.m-cra-comment-readonly {
    white-space: pre-wrap;
    font-size: var(--m-fs-sm);
    line-height: 1.5;
    padding: var(--m-sp-2) var(--m-sp-3);
}

/* Sticky bottom dédié cra-edit (KPI gauche + bouton droite, même ligne).
   Pattern strict :
   - container en `justify-content: space-between` (pas de margin-auto)
   - flex-wrap: nowrap + overflow: hidden pour cliper si la viewport est
     trop étroite (Symfony profiler en dev) au lieu de wrap.
   - KPI en `flex: 0 1 auto` (peut shrink avec ellipsis si nécessaire)
   - Bouton en `flex: 0 0 auto; width: max-content` (taille intrinsèque). */
.m-cra-edit-bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--m-z-bottombar, 90);
    background: var(--m-surface);
    border-top: 1px solid var(--m-border);
    /* padding-right augmenté pour ne pas chevaucher le Symfony web debug
       toolbar (40px à droite) en environnement dev local. En prod, ce
       padding supplémentaire reste invisible (juste un peu de marge). */
    padding: var(--m-sp-2) calc(var(--m-sp-3) + 40px) calc(var(--m-sp-2) + env(safe-area-inset-bottom, 0px)) var(--m-sp-3);
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-sp-2);
    box-shadow: var(--m-shadow-bar, 0 -4px 12px rgba(0, 0, 0, 0.05));
    min-height: var(--m-h-bottombar, 64px);
    flex-wrap: nowrap !important;
    overflow: hidden;
}
.m-cra-edit-bottom .m-bottom-bar-kpi {
    flex: 0 1 auto !important;
    min-width: 0;
    overflow: hidden;
    width: auto !important;
}
.m-cra-edit-bottom .m-bottom-bar-kpi .label,
.m-cra-edit-bottom .m-bottom-bar-kpi .value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-cra-edit-bottom-form {
    flex: 0 0 auto !important;
    display: inline-block !important;
    margin: 0;
    width: auto !important;
}
.m-cra-edit-bottom-cta {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    display: inline-flex !important;
}
.m-cra-edit-bottom[hidden] { display: none !important; }

/* Indicateur de sauvegarde mobile — pill compact à droite du KPI dans le
   sticky bottom. Anime au passage de `saving` à `saved`. */
.m-cra-edit-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--m-r-pill);
    font-size: var(--m-fs-xs, 10px);
    font-weight: var(--m-fw-semibold);
    background: var(--m-bg);
    color: var(--m-text-muted);
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.m-cra-edit-save-indicator.is-saving {
    background: var(--m-bg);
    color: var(--m-text-muted);
}
.m-cra-edit-save-indicator.is-saved {
    background: var(--m-success-soft);
    color: var(--m-success-strong);
}
.m-cra-edit-save-indicator.is-error,
.m-cra-edit-save-indicator.is-invalid {
    background: var(--m-danger-soft);
    color: var(--m-danger);
}
.m-cra-edit-save-indicator[hidden] { display: none !important; }