/* ============================================================================
   Idiome UI du module Projet — partagé par le Registre Projet et le Portfolio.

   Extrait du <style> inline de RegistreProjetPage.razor (SC-1500, approche A).
   Un <style> inline n'est dans le DOM que si SA page est rendue : ces règles
   étaient donc invisibles depuis /project/portfolio.

   Préfixe `proj-` et non `rp-` : « rp » voulait dire Registre Projet, or ces
   règles servent désormais les deux pages — le préfixe aurait menti.

   Valeurs mesurées, à ne pas retoucher sans re-mesurer. Référence :
   docs/changes/sc-1496-registre-projet-refonte-ui-vue-liste-et-en-tete/ux/
   ============================================================================ */

/* ---- Étiquettes de filtre ---- */

/* Le libellé était 12 px/400 mais en quasi-noir, face à des options 13 px/600 en gris : plus
   petit et plus léger donc en retrait, plus sombre donc en avant — deux signaux contraires, on
   ne savait plus si c'était un titre ou une option. Même traitement que les sections du menu
   « Nouveau rapport » : une seule convention dans la page pour « ceci n'est pas cliquable ». */
.proj-filter-label {
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* La proximité mentait : 11 px entre les deux groupes contre 8 px entre un libellé et son
   propre groupe. « Type » se lisait comme une 4e option du groupe Statut. */
.proj-filter-group-spaced {
    padding-left: 20px;
}

/* ---- Menus : sections et items sur une ligne ---- */

/* Le menu s'étirait à 730 px sur ses descriptions multilignes. Titre et explication tiennent
   désormais sur une seule ligne : la largeur suit le contenu, ~475 px, sans avoir à la brider. */
.proj-menu-group {
    padding: 8px 14px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.proj-menu-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.proj-menu-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
    white-space: nowrap;
}

/* ---- Barre de détail : rangée unique ---- */

.proj-doc-number {
    font-family: var(--mud-typography-caption-family, monospace);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.proj-menu-danger {
    color: var(--mud-palette-error);
}

/* Seul contrôle qui peut rétrécir sans rien perdre : il absorbe toute la variation de
   largeur au-dessus du seuil de dédoublement. Base 160 px et non 300 : avec `flex-basis:auto`
   le conteneur wrappait avant de laisser le champ se compresser. */
.proj-detail-search {
    flex: 1 1 160px;
    min-width: 160px;
    max-width: 300px;
}

/* Le groupe de gauche ne wrappe jamais sur lui-même : il comprime la recherche. Sans ça il se
   repliait en interne et l'état dédoublé montait à 158 px au lieu de ~121.
   min-width:0 est indispensable — un conteneur flex refuse sinon de descendre sous la taille
   de son contenu, et la compression n'a jamais lieu. */
/* MudStack rend des classes utilitaires `d-flex`, pas `.mud-stack` — cibler ce dernier ne
   matchait rien. */
.proj-detail-bar .flex-wrap > .flex-wrap {
    min-width: 0;
    flex-wrap: nowrap !important;
}

/* Au-dessus du seuil, la rangée entière ne wrappe pas non plus : elle force la compression.
   Sans ça MudBlazor (.flex-wrap sur la pile) renvoie les actions à la ligne dès 1366. */
@media (min-width: 1280px) {
    .proj-detail-bar .flex-wrap {
        flex-wrap: nowrap !important;
    }
}

/* Sous 1280 px la rangée se dédouble VOLONTAIREMENT plutôt que de subir un wrap : on paie
   ~57 px de hauteur et on ne retire aucune information. Plancher mesuré : 1215 px utiles. */
@media (max-width: 1279.98px) {
    .proj-detail-bar .flex-wrap {
        row-gap: 8px;
    }
}

/* ---- Filtres segmentés ---- */

/* ---- Filtres segmentés — aligné sur /acces-site/registre ----
   Reproduit le rendu réel de cette page : segment actif bleu plein, inactif transparent.
   La « piste grise » de sa feuille de style ne s'affiche pas (elle demande
   --mud-palette-background-grey, qui n'existe pas ; la vraie variable est ...-gray). */
.proj-filter-toggle {
    border: 0;
    border-radius: 9px;
    padding: 3px;
    gap: 0;
}

.proj-filter-toggle .mud-toggle-item {
    border: 0 !important;
    border-radius: 6px;
    padding: 7px 15px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    /* « Fin de mois » passait sur deux lignes et déformait la rangée. */
    white-space: nowrap;
}

.proj-filter-toggle .mud-toggle-item-selected {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 1px 2px rgba(20, 30, 50, .12);
}