/*
 * wpof-suivi.css
 * Styles de la fonction « Suivi RNQ » (grille d'audit + tableau de suivi).
 * Styles volontairement autonomes (pas de dépendance à Tailwind).
 */

/* ---- Badge de complétude ------------------------------------------- */
.suivi-completude {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-variant-numeric: tabular-nums;
}
.suivi-completude-chiffre { font-weight: 700; }
.suivi-completude-barre {
    display: inline-block;
    width: 90px;
    height: 8px;
    border-radius: 6px;
    background: #e2e2e2;
    overflow: hidden;
    vertical-align: middle;
}
.suivi-completude-jauge {
    display: block;
    height: 100%;
    background: #d19a12;
    transition: width .3s ease;
}
.suivi-completude.complet .suivi-completude-jauge { background: #2e8b45; }
.suivi-completude.vide   .suivi-completude-jauge { background: #c0392b; }
.suivi-completude-pct { font-size: .85em; color: #555; }

/* ---- Entête du suivi ----------------------------------------------- */
.suivi-entete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.suivi-entete-infos h3 { margin: 0 0 .3em; }
.suivi-entete-infos p { margin: .1em 0; }
.suivi-entete-completude {
    text-align: right;
    min-width: 220px;
}
.suivi-completude-label {
    display: block;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #777;
    margin-bottom: .2em;
}
.suivi-lecture-seule {
    font-style: italic;
    color: #a15c00;
    margin: .5rem 0;
}

/* ---- Critères ------------------------------------------------------- */
.suivi-critere { margin-bottom: 1.2rem; }
.suivi-critere-titre {
    display: flex;
    align-items: baseline;
    gap: .6em;
    border-bottom: 2px solid #d0d0d0;
    padding-bottom: .4em;
    margin-top: 0;
}
.suivi-critere-num {
    background: #2c3e50;
    color: #fff;
    padding: .15em .6em;
    border-radius: 4px;
    font-size: .8em;
    white-space: nowrap;
}

/* ---- Indicateur ----------------------------------------------------- */
.suivi-indicateur {
    border: 1px solid #e0e0e0;
    border-left: 5px solid #ccc;
    border-radius: 6px;
    padding: .8rem 1rem;
    margin: .8rem 0;
    background: #fafafa;
}
.suivi-indicateur.reponse-oui          { border-left-color: #2e8b45; }
.suivi-indicateur.reponse-non          { border-left-color: #c0392b; }
.suivi-indicateur.reponse-attente      { border-left-color: #d19a12; }
.suivi-indicateur.reponse-non_concerne { border-left-color: #7f8c8d; }
.suivi-indicateur.reponse-vide         { border-left-color: #ccc; }

.suivi-indicateur-tete {
    display: flex;
    align-items: flex-start;
    gap: .7em;
}
.suivi-indicateur-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #2c3e50;
    color: #fff;
    font-weight: 700;
}
.suivi-indicateur-libelle { line-height: 1.4; }

.suivi-niveau {
    display: inline-block;
    margin-left: .4em;
    padding: .05em .5em;
    border-radius: 3px;
    font-size: .72em;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
.suivi-niveau-majeur { background: #f8d7da; color: #842029; }
.suivi-niveau-mineur { background: #fff3cd; color: #664d03; }

/* ---- Aide (questions / preuves) ------------------------------------ */
.suivi-indicateur-aide { margin: .6rem 0 .4rem; }
.suivi-indicateur-aide > summary {
    cursor: pointer;
    color: #2c3e50;
    font-size: .9em;
    font-weight: 600;
}
.suivi-indicateur-aide-contenu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: .5rem;
    padding: .6rem .8rem;
    background: #fff;
    border: 1px dashed #ddd;
    border-radius: 4px;
}
.suivi-aide-bloc { flex: 1 1 260px; }
.suivi-aide-bloc h4 { margin: 0 0 .3em; font-size: .85em; text-transform: uppercase; color: #666; }
.suivi-aide-bloc ul { margin: 0; padding-left: 1.2em; }
.suivi-aide-bloc li { margin: .15em 0; font-size: .9em; }

/* ---- Saisie --------------------------------------------------------- */
.suivi-indicateur-saisie {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-top: .7rem;
}
.suivi-champ { display: flex; flex-direction: column; }
.suivi-champ-reponse    { flex: 0 0 200px; }
.suivi-champ-commentaire { flex: 1 1 320px; }
.suivi-champ-label {
    font-size: .8em;
    font-weight: 600;
    color: #555;
    margin-bottom: .25em;
}
.suivi-reponse,
.suivi-commentaire {
    width: 100%;
    padding: .4em .5em;
    border: 1px solid #bbb;
    border-radius: 4px;
    font: inherit;
    box-sizing: border-box;
}
.suivi-commentaire { resize: vertical; }

.suivi-etat-sauvegarde { font-size: .8em; align-self: flex-end; min-height: 1.2em; }
.suivi-etat-sauvegarde.ok      { color: #2e8b45; }
.suivi-etat-sauvegarde.erreur  { color: #c0392b; }
.suivi-etat-sauvegarde.en-cours { color: #888; }

/* ---- Tableau de suivi ---------------------------------------------- */
.suivi-tableau td, .suivi-tableau th { vertical-align: middle; }
.suivi-tableau .hidden { display: none; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 640px) {
    .suivi-entete { flex-direction: column; align-items: flex-start; }
    .suivi-entete-completude { text-align: left; }
    .suivi-indicateur-saisie { flex-direction: column; }
    .suivi-champ-reponse, .suivi-champ-commentaire { flex: 1 1 100%; }
}

/* Éditeur TinyMCE sur le champ commentaire : occupe toute la largeur de la colonne */
.suivi-champ-commentaire .wp-editor-wrap,
.suivi-champ-commentaire .wp-editor-container { width: 100%; box-sizing: border-box; }
.suivi-champ-commentaire .wp-editor-wrap { margin-top: .1em; }

/* Bouton « Mon Drive » sous le champ commentaire */
.suivi-commentaire-outils { display: block; margin-top: .3em; }
.suivi-commentaire-outils .suivi-drive-btn { font-size: 12px; cursor: pointer; }