/* =====================================================================
   MODALE « NOUVEAU DOSSIER » — ce qui lui est propre, et rien de plus
   ---------------------------------------------------------------------
   Gabarit : inc/modal_dossier.php     Script : js/modal-dossier.js

   Presque tout son aspect vient de css/modal-machine.css : la fenêtre,
   l'en-tête, les cartes, les champs, les segments, le pied. Cette
   feuille-ci ne contient que ce que l'autre n'a aucune raison de
   connaître — le champ téléphone hérité de la fiche client, les repères
   d'obligation, et la grille des types de dossier.

   Feuille CHARGÉE POUR TOUTES LES PAGES depuis inc/template_start.php,
   après modal-machine.css. Aucune couleur en dur : les jetons --mm-*
   sont déjà posés sur .mm-modal, donc le thème et le mode sombre suivent.
   ===================================================================== */

/* ── Le champ téléphone ─────────────────────────────────────────────
   champ_telephone() (inc/ui_components.php) est écrit pour un formulaire
   Bootstrap horizontal : libellé sur 3 colonnes, champ sur 9. Dans une
   carte de 2 colonnes, il faut le remettre à plat — libellé au-dessus,
   champ pleine largeur — comme les autres champs de la fenêtre.
   On remet en forme, on ne recopie pas : le composant reste unique, et
   un pays ajouté demain profite aux deux écrans. */
#modal-dossier .grp-tel {
    margin: 0;
}

/* Meme dessin que .mm-label, a la lettre : deux libelles cote a cote qui
   ne se ressemblent pas, ca se voit tout de suite. */
#modal-dossier .grp-tel > .control-label {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 0 6px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    color: var(--mm-texte-2);
}

#modal-dossier .grp-tel > div[class^="col-"],
#modal-dossier .grp-tel > div[class*=" col-"] {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* L'indicatif : assez large pour « FR +33 », pas plus. */
#modal-dossier .tel-indicatif {
    width: 92px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#modal-dossier .grp-tel .tel-numero {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Le message sous le champ (format invalide) : discret mais lisible. */
#modal-dossier .tel-message {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--mm-alerte);
}

#modal-dossier .grp-tel.has-error .form-control {
    border-color: var(--mm-alerte);
}

/* ── Deux grilles qui ne sont pas a colonnes egales ─────────────────
   mm-grille-2 / -3 partagent la largeur en parts identiques. Ici deux
   lignes demandent autre chose : un segment de deux boutons n'a pas
   besoin de la moitie de la fenetre, et un code postal n'a pas besoin
   d'autant de place qu'une adresse. */
/* Nature du client | Raison sociale | SIRET. Le segment fait sa largeur,
   le nom prend la place qui reste, le SIRET n'a besoin que de 14 chiffres. */
#modal-dossier .md-grille-societe {
    grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
}

/* Civilité | Prénom | Nom | Fonction : une civilité tient en trois lettres. */
#modal-dossier .md-grille-identite {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Les deux téléphones et l'e-mail sur une ligne : c'est tout « comment le
   joindre », et ça évite une ligne de plus dans une fenêtre déjà dense. */
#modal-dossier .md-grille-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
}

#modal-dossier .md-grille-adresse {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
}

/* Réf. client | Num. client | l'explication, qui occupe la place restante
   au lieu de laisser un blanc. */
#modal-dossier .md-grille-refs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    align-items: end;
}

#modal-dossier .md-aide-rum {
    margin: 0 0 6px;
}

@media (max-width: 991px) {
    #modal-dossier .md-grille-identite {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    #modal-dossier .md-grille-identite > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    #modal-dossier .md-grille-societe,
    #modal-dossier .md-grille-identite,
    #modal-dossier .md-grille-contact,
    #modal-dossier .md-grille-adresse,
    #modal-dossier .md-grille-refs {
        grid-template-columns: minmax(0, 1fr);
    }
    #modal-dossier .md-grille-identite > :last-child { grid-column: auto; }
}


/* ── Repères de saisie ──────────────────────────────────────────── */

#modal-dossier .md-obl {
    color: var(--mm-alerte);
    font-weight: 700;
}

/* Une seule société : elle s'affiche, elle ne se choisit pas. */
#modal-dossier .md-societe-fixe {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 12px;
    border-radius: var(--mm-rayon-champ);
    background: var(--mm-verre-lo);
    border: 1px solid var(--mm-trait);
    font-weight: 600;
    color: var(--mm-texte);
}

/* Rien à proposer (ni société, ni type) : on le dit franchement. */
#modal-dossier .md-vide {
    margin: 8px 0 14px;
    padding: 14px 16px;
    border-radius: var(--mm-rayon-carte);
    background: color-mix(in srgb, var(--mm-alerte) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mm-alerte) 28%, transparent);
    color: var(--mm-texte);
    line-height: 1.5;
}

#modal-dossier .md-vide i {
    margin-right: 6px;
    color: var(--mm-alerte);
}

/* ── Les types de dossier ───────────────────────────────────────────
   Les vignettes viennent de la modale « nouveau contrat »
   (.newproj-item, css/ui-fiche.css) : même dessin, donc un type se
   reconnaît d'un écran à l'autre. Ici elles sont un peu plus serrées —
   la fenêtre en montre une dizaine sous un formulaire, pas seules au
   milieu d'une boîte. */
#modal-dossier .md-types {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
}

#modal-dossier .md-types .newproj-item {
    padding: 11px 8px;
    gap: 6px;
    font-size: 11.5px;
}

#modal-dossier .md-types .newproj-pastille {
    width: 32px;
    height: 32px;
    font-size: 15px;
}

/* ── La liste des sociétés proposées ────────────────────────────────
   js/autocomplete-societe.js la remplit. Le conteneur est posé en absolu
   sous le champ : il doit donc flotter au-dessus des cartes suivantes,
   d'où le z-index, et le champ doit lui servir de repère, d'où le
   position: relative du parent. */
#modal-dossier .md-champ-auto {
    position: relative;
}

#modal-dossier .md-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 3px 0 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--mm-trait);
    border-radius: var(--mm-rayon-champ);
    background: var(--mm-fond);
    box-shadow: 0 12px 28px -14px rgba(19, 26, 46, .45);
}

#modal-dossier .md-suggestions .list-group-item {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--mm-trait);
    border-radius: 0;
    background: transparent;
    color: var(--mm-texte-2);
    line-height: 1.35;
}

#modal-dossier .md-suggestions .list-group-item:last-child {
    border-bottom: 0;
}

#modal-dossier .md-suggestions .list-group-item strong {
    color: var(--mm-texte);
}

#modal-dossier .md-suggestions .list-group-item small {
    color: var(--mm-texte-3);
}

/* Survol ET navigation au clavier : la même apparence, sinon la flèche
   du bas semble ne rien faire. */
#modal-dossier .md-suggestions .list-group-item:hover,
#modal-dossier .md-suggestions .list-group-item:focus,
#modal-dossier .md-suggestions .list-group-item.active {
    background: color-mix(in srgb, var(--mm-accent) 10%, transparent);
    color: var(--mm-texte);
}

/* Le SIRET repris de l'annuaire : il n'a pas de champ, il se montre. */
#modal-dossier .md-siret {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--mm-ok);
}

#modal-dossier .md-siret i {
    margin-right: 4px;
}


/* ── Le bandeau ─────────────────────────────────────────────────────
   Doublon de téléphone, refus du serveur, champ oublié : tout passe par
   là. .mm-bandeau (css/modal-machine.css) donne le cadre, mais il est
   dessiné pour une icône suivie d'un texte, en ligne. Ici le contenu est
   un petit bloc — titre, liste de fiches, boutons — d'où le display. */
#modal-dossier .mm-bandeau {
    display: block;
    margin-bottom: 14px;
    line-height: 1.45;
}

#modal-dossier .mm-bandeau b {
    display: block;
    font-size: 13px;
}

#modal-dossier .mm-bandeau p {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--mm-texte-2);
}

/* Avertissement (« ce numéro est déjà connu », champ oublié) : la teinte
   passe du bleu d'information au rouge, sans changer la forme. */
#modal-dossier .mm-bandeau.is-alerte {
    border-color: color-mix(in srgb, var(--mm-alerte) 34%, transparent);
    background: color-mix(in srgb, var(--mm-alerte) 8%, var(--mm-verre-hi));
}

#modal-dossier .mm-bandeau.is-alerte b i {
    color: var(--mm-alerte);
}

#modal-dossier .md-doublons {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

#modal-dossier .md-doublons li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 0;
    border-top: 1px solid var(--mm-trait);
}

#modal-dossier .md-doublons b {
    color: var(--mm-texte);
}

#modal-dossier .md-doublons small {
    color: var(--mm-texte-3);
}

#modal-dossier .md-bandeau-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Le champ refusé par le serveur, pour qu'on voie tout de suite lequel. */
#modal-dossier .form-control.md-refuse,
#modal-dossier .md-refuse .form-control {
    border-color: var(--mm-alerte);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-alerte) 14%, transparent);
}

/* ── Écrans étroits ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    #modal-dossier .md-types {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }
}