/* =====================================================================
   STATUTS — suivi de dossier, frise d'historique, modification en masse
   ---------------------------------------------------------------------
   Une seule feuille pour les trois ecrans. Elle ne definit AUCUNE couleur
   en dur : tout passe par les jetons --cc-* de main.css, que theme-v3.css
   remappe par thème (azur / espana / menthe) et que body.v2-dark
   redefinit pour le mode sombre. Les trois thèmes et les deux modes sont
   donc couverts sans une seule regle supplementaire.

   L'exception, volontaire : les couleurs de STATUT viennent de la base
   (iso_status_*). Elles sont posees en style inline par le PHP, avec une
   couleur de texte deduite de la luminance du fond (Tool::couleurTexte) —
   sinon un statut sombre devient illisible et un pastel disparait. Le CSS
   ne les redefinit jamais.

   Chargee par inc/template_start.php pour toutes les pages.
   ===================================================================== */

.st-suivi {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-vide {
    margin: 6px 0;
    padding: 18px;
    text-align: center;
    color: var(--cc-text-muted);
    font-style: italic;
    background: var(--cc-glass);
    border: 1px dashed var(--cc-border-subtle);
    border-radius: var(--cc-radius-sm);
}


/* =====================================================================
   UNE LIGNE = UN AXE
   ---------------------------------------------------------------------
   --st-teinte porte la couleur du statut courant, posee en inline par le
   gabarit. Elle ne sert qu'au liseré de gauche : le fond de la carte
   reste celui du thème, sinon six lignes de six couleurs differentes
   font une guirlande et plus rien ne ressort.
   ===================================================================== */

.st-ligne {
    position: relative;
    background: var(--cc-glass);
    border: 1px solid var(--cc-border-subtle);
    border-radius: var(--cc-radius-sm);
    padding: 12px 14px 12px 18px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.st-ligne::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 4px;
    border-radius: 4px;
    background: var(--st-teinte, var(--cc-border-subtle));
}

.st-ligne:hover {
    border-color: var(--cc-accent-border);
    box-shadow: var(--cc-shadow);
}

.st-ligne-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.st-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--cc-accent-soft);
    color: var(--cc-accent);
    font-size: 15px;
}

.st-titre {
    flex: 0 0 auto;
    min-width: 130px;
    font-weight: 600;
    color: var(--cc-text);
}

/* La pastille du statut courant — fond issu de la base. */
.st-pastille {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, .08);
}

/* Sans statut : pas de couleur en base, on retombe sur le thème. La classe
   est posee par le gabarit — tester le style inline serait fragile. */
.st-pastille.is-vide {
    background: var(--cc-glass);
    color: var(--cc-text-muted);
    border-style: dashed;
}

.st-avancement {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--cc-text-secondary);
    font-size: 12px;
}

.st-rang { font-weight: 700; font-size: 14px; color: var(--cc-text); }
.st-sur  { opacity: .6; }

.st-jauge {
    flex: 1 1 60px;
    min-width: 50px;
    max-width: 160px;
    height: 5px;
    border-radius: 5px;
    background: var(--cc-border-subtle);
    overflow: hidden;
}

.st-jauge-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--st-teinte, var(--cc-accent));
    transition: width .35s ease;
}

.st-date {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--cc-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.st-cmds {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 6px;
}

.st-cmd {
    border: 1px solid var(--cc-border-subtle);
    background: transparent;
    color: var(--cc-text-secondary);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.6;
    transition: all .15s ease;
}

.st-cmd:hover {
    background: var(--cc-accent-soft);
    border-color: var(--cc-accent-border);
    color: var(--cc-accent);
}

.st-cmd.is-on {
    background: var(--cc-accent-soft);
    border-color: var(--cc-accent-border);
    color: var(--cc-accent);
}

.st-comment {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cc-bg-alt);
    color: var(--cc-text-secondary);
    font-size: 12.5px;
    line-height: 1.55;
}


/* =====================================================================
   LA LIGNE DE SAISIE
   ===================================================================== */

/* =====================================================================
   MASQUAGE PILOTE PAR LE JS
   ---------------------------------------------------------------------
   Une seule classe pour tout ce que le JS masque (entrees filtrees de la
   frise, separateurs de journee devenus vides, pastilles hors recherche).

   POURQUOI UNE CLASSE ET PAS .hide() / .toggle() : la frise est injectee
   pendant que Bootstrap ouvre encore la fenetre. Poser un display:none en
   ligne pendant ce moment-la, puis relire l'etat rendu pour decider de la
   suite, enferme l'affichage dans un etat dont il ne ressort plus. Le JS
   decide a partir des donnees et pose cette classe ; il ne relit jamais le
   rendu.
   ===================================================================== */
.st-masque { display: none !important; }


/* Le repli passe par l'attribut [hidden]. Sans cette regle, le
   « display: flex » ci-dessous l'emporte sur le display:none de la feuille
   du navigateur (specificite d'une classe contre celle d'un attribut) et la
   ligne de saisie reste ouverte en permanence. */
.st-saisie[hidden],
.st-masse-liste[hidden] { display: none !important; }

.st-saisie {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cc-border-subtle);
}

.st-saisie-champ { display: flex; flex-direction: column; gap: 3px; }
.st-saisie-date    { flex: 0 0 130px; }
.st-saisie-statut  { flex: 0 0 210px; }
.st-saisie-comment { flex: 1 1 220px; min-width: 180px; }

.st-saisie-champ > label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cc-text-muted);
}

.st-saisie .form-control { height: 34px; padding: 5px 10px; font-size: 13px; }
.st-saisie textarea.form-control { height: 34px; min-height: 34px; resize: vertical; }
.st-saisie-actions { flex: 0 0 auto; display: flex; gap: 6px; }


/* =====================================================================
   LA FRISE
   ---------------------------------------------------------------------
   Une entree = une TRANSITION : statut de depart estompe, fleche, statut
   d'arrivee. La pastille de gauche prend la couleur du statut ATTEINT —
   c'est ce que l'oeil suit en descendant.
   ===================================================================== */

.st-frise { padding: 2px; }

.st-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cc-border-subtle);
}

.st-puce {
    border: 1px solid var(--cc-border-subtle);
    background: transparent;
    color: var(--cc-text-secondary);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    transition: all .15s ease;
}

.st-puce:hover { border-color: var(--cc-accent-border); color: var(--cc-accent); }

.st-puce.is-on {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: #fff;
    font-weight: 600;
}

.st-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 22px;
    position: relative;
}

/* Le fil vertical. */
.st-timeline::before {
    content: "";
    position: absolute;
    left: 5px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--cc-border-subtle);
}

.st-jour {
    position: relative;
    margin: 18px 0 10px -22px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cc-text-muted);
}

.st-jour:first-child { margin-top: 0; }

.st-jour > span {
    display: inline-block;
    background: var(--cc-bg);
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--cc-border-subtle);
}

.st-entree {
    position: relative;
    margin-bottom: 10px;
}

.st-puce-temps {
    position: absolute;
    left: -22px; top: 12px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cc-text-muted);
    border: 2px solid var(--cc-bg);
    box-shadow: 0 0 0 1px var(--cc-border-subtle);
}

.st-entree-corps {
    background: var(--cc-glass);
    border: 1px solid var(--cc-border-subtle);
    border-radius: var(--cc-radius-sm);
    padding: 10px 14px;
}

.st-entree-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.st-axe-nom {
    font-size: 12px;
    font-weight: 700;
    color: var(--cc-text);
    min-width: 120px;
}

.st-transition {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.st-etiq {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, .08);
}

.st-etiq-avant { opacity: .55; }
.st-fleche { color: var(--cc-text-muted); font-size: 14px; }

.st-entree-date {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--cc-text-secondary);
    white-space: nowrap;
}

.st-entree-comment {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cc-text-secondary);
}

.st-entree-pied {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed var(--cc-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px;
    color: var(--cc-text-muted);
}

.st-entree-pied > span + span::before {
    content: "·";
    margin-right: 10px;
    opacity: .6;
}

.st-origine { font-style: italic; }

/* Reprise de l'existant : elle constate un etat, elle ne raconte pas un
   changement. Discrete, pour qu'elle ne se confonde pas avec les vraies
   etapes qui s'empilent au-dessus. */
.st-entree-amorce .st-entree-corps {
    background: transparent;
    border-style: dashed;
}

.st-entree-amorce .st-puce-temps { opacity: .5; }


/* =====================================================================
   SECTION CONTRAT — pastille du statut commercial
   ===================================================================== */

/* display:block est necessaire pour que le lien « historique » flotte a
   droite du libelle. Mais Bootstrap aligne a droite TOUT .control-label d'un
   .form-horizontal : tant que le label restait en inline-block il se limitait
   a son texte et la regle ne se voyait pas ; passe en block, il prend toute
   la colonne et le libelle partait a droite. On remet l'alignement a gauche,
   comme les libelles voisins de la meme rangee. */
.st-axe-contrat .control-label {
    display: block;
    text-align: left;
}

.st-hist-lien {
    float: right;
    color: var(--cc-text-muted);
    font-size: 13px;
    opacity: .7;
    transition: opacity .15s ease, color .15s ease;
}

.st-hist-lien:hover { opacity: 1; color: var(--cc-accent); }

.st-axe-contrat .st-pastille {
    display: block;
    height: auto;
    padding: 9px 12px;
    border-radius: var(--cc-radius-sm);
    text-align: center;
    cursor: pointer;
    white-space: normal;
    border: 1px solid var(--cc-border-subtle);
}


/* =====================================================================
   ETAT VIDE — frise sans entree, ou filtre qui ne laisse rien
   ---------------------------------------------------------------------
   Une modale qui s'ouvre sur du blanc passe pour un chargement rate. On
   dit ce qui manque, et d'ou viendront les lignes.
   ===================================================================== */

.st-vide-bloc {
    padding: 44px 24px;
    text-align: center;
    color: var(--cc-text-secondary);
}

.st-vide-bloc > i {
    display: block;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--cc-text-muted);
    opacity: .55;
}

.st-vide-bloc > p {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cc-text);
}

.st-vide-bloc > small {
    display: block;
    max-width: 460px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cc-text-muted);
}


/* =====================================================================
   MODIFICATION EN MASSE
   ---------------------------------------------------------------------
   Les valeurs sont des PASTILLES qui s'enroulent dans une zone defilante.
   Une valeur par ligne pleine largeur donnait, sur les 22 statuts
   commerciaux, une guirlande de 22 bandes colorees qu'on ne parcourt pas :
   la couleur cessait d'etre un reperage pour devenir du bruit.
   ===================================================================== */

.st-masse-compte {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: var(--cc-radius-sm);
    background: var(--cc-accent-soft);
    border: 1px solid var(--cc-accent-border);
    color: var(--cc-text);
    font-size: 12.5px;
}

.st-masse-compte > i { font-size: 18px; color: var(--cc-accent); flex: 0 0 auto; }
.st-masse-compte b   { font-size: 15px; }

.st-masse-champ { margin-bottom: 18px; }

.st-masse-champ > label,
.st-masse-entete > label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cc-text-muted);
}

.st-masse-opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }

/* Le libelle a gauche, la recherche a droite : elle appartient a la liste
   qu'elle filtre, pas au formulaire en general. */
.st-masse-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.st-masse-entete > label { margin: 0; }

.st-masse-entete > input {
    width: 200px;
    height: 30px;
    padding: 4px 10px;
    font-size: 12.5px;
}

.st-masse-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-content: flex-start;
    max-height: 210px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--cc-border-subtle);
    border-radius: var(--cc-radius-sm);
    background: var(--cc-bg-alt);
}

/* Les listes des autres axes restent dans le DOM mais repliees. La liste
   visible ne fait pas boite : ses pastilles s'enroulent dans la zone. */
.st-masse-liste {
    display: contents;
}

.st-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    opacity: .88;
}

/* Un statut sans couleur en base ne doit pas devenir un rectangle blanc
   indistinct du fond de la zone. */
.st-opt.is-sans-couleur {
    background: var(--cc-glass);
    color: var(--cc-text-secondary);
    border-style: dashed;
}

.st-opt:hover  { opacity: 1; transform: translateY(-1px); box-shadow: var(--cc-shadow); }
.st-opt:focus  { outline: 2px solid var(--cc-accent); outline-offset: 2px; }

/* Retenue : anneau net plutot qu'un changement de couleur — le fond porte
   deja la couleur du statut, on ne peut pas s'en servir pour l'etat. */
.st-opt.is-on {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--cc-bg-alt), 0 0 0 4px var(--cc-accent);
}

.st-opt-check { display: none; font-size: 13px; margin-left: -2px; }
.st-opt.is-on .st-opt-check { display: inline; }

.st-opt-rang {
    font-size: 10px;
    font-weight: 700;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

.st-opt.is-on .st-opt-rang { display: none; }

.st-masse-rien {
    width: 100%;
    margin: 6px 0;
    text-align: center;
    font-size: 12.5px;
    font-style: italic;
    color: var(--cc-text-muted);
}

/* Rappel de la selection : la zone defile, la pastille retenue peut se
   retrouver hors champ au moment de valider. */
.st-masse-choix {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--cc-text-muted);
}

.st-masse-choix-fait { color: var(--cc-text-secondary); }
.st-masse-choix .st-pastille { margin-left: 4px; vertical-align: middle; }

.st-masse-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--cc-border-subtle);
}

.st-masse-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }


/* =====================================================================
   ETROIT
   ===================================================================== */

@media (max-width: 900px) {
    .st-jauge  { display: none; }
    .st-date   { margin-left: 0; }
    .st-cmds   { width: 100%; justify-content: flex-end; }
    .st-saisie-date, .st-saisie-statut { flex: 1 1 140px; }
}