/* Dialogs « collaborateur » V2 — socle commun à la création et à l'édition (#2786).

   Il vit ici, en global, pour deux raisons. La classe `cc-dialog` est posée sur la racine du
   MudDialog, qui appartient au markup de MudBlazor : le CSS isolé n'y appose pas son attribut de
   portée et ne peut donc pas l'atteindre. Et surtout, deux feuilles isolées porteraient les mêmes
   règles de grille, de densité et de boutons, qui divergeraient au premier correctif — le handoff
   partage d'ailleurs explicitement son `cc-styles.css` entre les deux écrans.

   Chaque dialog garde son CSS isolé pour ce qui lui est propre : stepper, photo et tuiles pour la
   création, sections pour l'édition.

   Palette FC_COLORS, reprise des handoffs. */

.cc-dialog {
    --cc-noir: #171717;
    --cc-ocre: #D19B50;
    --cc-ocre-ink: #7A4F1F;
    --cc-ocre-soft: #FFF1DC;
    --cc-ocre-border: #EADFC9;
    --cc-sable: #F5EFE6;
    --cc-bg-warm: #F6F7F8;
    --cc-border: #E2E4E6;
    --cc-border-soft: #f0f0ee;
    --cc-ink50: #9ca3af;
    --cc-ink70: #6b7280;
    --cc-ink90: #374151;
    --cc-danger: #b02a37;
    --cc-info-bg: #F2F7F9;
    --cc-info-border: #CFDDE3;
    --cc-info-ink: #33555F;

    max-width: calc(100vw - 32px);
    border-radius: 12px;
    overflow: hidden;
}

/* Largeurs propres à chaque écran (860 pour le wizard, 720 pour l'édition). */
.cc-dialog.cc-dialog--create { width: 860px; }
.cc-dialog.cc-dialog--edit { width: 720px; }

.cc-dialog .mud-dialog-title {
    padding: 15px 22px;
    border-bottom: 1px solid var(--cc-border);
}

/* Le corps gère sa propre gouttière : pas de padding MudBlazor. */
.cc-dialog .mud-dialog-content {
    padding: 0;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.cc-dialog .mud-dialog-actions {
    padding: 12px 22px;
    border-top: 1px solid var(--cc-border);
    margin: 0;
}

/* ── Entête ─────────────────────────────────────────────────────────────── */

.cc-dialog .cc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.cc-dialog .cc-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--cc-noir); }
.cc-dialog .cc-spacer { flex: 1; }
.cc-dialog .cc-count { font-size: 11.5px; font-weight: 700; color: var(--cc-ink70); letter-spacing: .3px; }

/* Ce sont des <button> : les styles de bouton de l'application leur imposent un centrage et une
   hauteur — neutralisés, comme pour TokenMultiSelect. */
.cc-dialog .cc-x,
.cc-dialog .cc-return {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 3px;
    border-radius: 6px;
    height: auto;
    min-width: 0;
    font-family: inherit;
    color: var(--cc-ink70);
}

.cc-dialog .cc-x:hover,
.cc-dialog .cc-return:hover { background: var(--cc-sable); color: var(--cc-noir); }
.cc-dialog .cc-x .mud-icon-root { font-size: 20px; }
.cc-dialog .cc-return { font-size: 11.5px; font-weight: 600; padding: 4px 8px; }
.cc-dialog .cc-return .mud-icon-root { font-size: 15px; }

/* ── Grille de champs ───────────────────────────────────────────────────── */

.cc-dialog .cc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* MudForm pose la classe utilitaire `gap-0`, déclarée `gap: 0 !important` par MudBlazor : aucune
   spécificité ne la bat, d'où le !important (même correctif que le formulaire médical V2). */
.cc-dialog form.mud-form { display: block; gap: 0 !important; }

.cc-dialog .cc-fields .cc-span2 { grid-column: 1 / -1; }
.cc-dialog .cc-fields .cc-f { display: block; min-width: 0; }

.cc-dialog .cc-fields .cc-l {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--cc-noir);
    margin-bottom: 5px;
}

.cc-dialog .cc-fields .cc-l i { color: var(--cc-danger); font-style: normal; margin-left: 2px; }

/* Un champ et son bouton d'appoint sur une ligne (matricule + « Générer »). */
.cc-dialog .cc-fields .cc-inline { display: flex; align-items: flex-start; gap: 8px; }
.cc-dialog .cc-fields .cc-inline > .mud-input-control { flex: 1; min-width: 0; }

/* Mention discrète sous un champ (« Identifiant du collaborateur dans le compte. »). */
.cc-dialog .cc-fields .cc-note-field {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 11px;
    color: var(--cc-ink50);
}

.cc-dialog .cc-fields .cc-note-field .mud-icon-root { font-size: 14px; }

.cc-dialog .cc-fields .cc-err {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--cc-danger);
}

.cc-dialog .cc-fields .cc-err .mud-icon-root { font-size: 14px; }

/* Information, pas erreur : le choix reste valide. Teinte info du design system. */
.cc-dialog .cc-fields .cc-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--cc-info-ink);
}

.cc-dialog .cc-fields .cc-warn .mud-icon-root { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* Les champs MudBlazor portent leur marge propre ; la grille s'en charge. Hauteur ramenée aux
   34px des handoffs, comme la densification du formulaire médical V2. */
.cc-dialog .cc-fields .cc-f .mud-input-control { margin-top: 0; }

.cc-dialog .cc-fields .cc-f .mud-input.mud-input-outlined > input,
.cc-dialog .cc-fields .cc-f .mud-input.mud-input-outlined > div.mud-input-slot {
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}

/* La valeur d'un MudSelect vit dans un <div>, pas dans un <input> : lui imposer une hauteur sans
   rien d'autre la colle en haut du champ. */
.cc-dialog .cc-fields .cc-f .mud-input.mud-input-outlined > div.mud-input-slot {
    display: flex;
    align-items: center;
}

/* Bouton discret d'appoint (« Générer », « Ajouter une photo »). */
.cc-dialog .cc-btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border: 1px solid var(--cc-border);
    background: #fff;
    border-radius: 7px;
    padding: 0 10px;
    height: 34px;
    min-width: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: none;
    color: var(--cc-ocre-ink);
    white-space: nowrap;
}

.cc-dialog .cc-btn-mini:hover:not(:disabled) { background: var(--cc-ocre-soft); border-color: var(--cc-ocre-border); }
.cc-dialog .cc-btn-mini:disabled { opacity: .5; cursor: default; }

/* ── Titre de section (édition) ─────────────────────────────────────────── */

.cc-dialog .cc-grp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--cc-noir);
}

.cc-dialog .cc-grp .mud-icon-root { font-size: 16px; color: var(--cc-ocre); }
.cc-dialog .cc-grp::after { content: ''; flex: 1; height: 1px; background: var(--cc-border); }

/* ── Pied ───────────────────────────────────────────────────────────────── */

.cc-dialog .cc-foot { display: flex; align-items: center; gap: 12px; width: 100%; }

.cc-dialog .cc-foot .cc-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cc-ocre-ink);
}

.cc-dialog .cc-foot .cc-note .mud-icon-root { font-size: 15px; color: var(--cc-ocre); }

/* Rappel des champs obligatoires, affiché quand rien ne bloque. */
.cc-dialog .cc-foot .cc-hint { font-size: 11.5px; color: var(--cc-ink50); }
.cc-dialog .cc-foot .cc-hint i { color: var(--cc-danger); font-style: normal; }

/* Les boutons du pied sont de deux natures : des <button> natifs et un SubmitButton, qui rend un
   MudButton. Ces règles passent devant celles de MudBlazor (0,3,0 contre 0,2,0) ; et les styles
   globaux de l'application imposant hauteur, casse et centrage à tout bouton, tout est repris. */
.cc-dialog .cc-foot .cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-width: 0;
    min-height: 0;
    border-radius: 7px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    transition: .14s;
}

.cc-dialog .cc-foot .cc-btn .mud-icon-root { font-size: 16px; }
.cc-dialog .cc-foot .cc-btn .mud-button-label { gap: 6px; }

.cc-dialog .cc-foot .cc-btn-primary { background-color: var(--cc-noir); color: #fff; }
.cc-dialog .cc-foot .cc-btn-primary:hover:not(:disabled) { background-color: #2b2b2b; box-shadow: none; }
.cc-dialog .cc-foot .cc-btn-primary:disabled { background-color: #c9ccce; color: #fff; cursor: default; }
.cc-dialog .cc-foot .cc-btn-secondary { background-color: #fff; color: var(--cc-noir); border-color: var(--cc-border); }
.cc-dialog .cc-foot .cc-btn-secondary:hover:not(:disabled) { background-color: var(--cc-sable); border-color: #D8C7AE; }

/* Le loader de SubmitButton hérite de la couleur du texte plutôt que de la palette MudBlazor. */
.cc-dialog .cc-foot .cc-btn .mud-progress-circular { color: currentColor; width: 16px; height: 16px; }