/**
 * Festival Bénévoles Manager — Design system "Blanc sur Blanc"
 *
 * Couche de surcharge chargée après admin-style.css ET après les <style> propres à
 * chaque page (qui sont dans le HTML, donc plus tardifs dans la cascade) : les propriétés
 * les plus disputées (fond, bordure, ombre, police, couleur) sont donc en !important — ce
 * n'est pas un accident, c'est ce qui garantit que cette feuille gagne quels que soient les
 * styles historiques de chaque page, sans avoir à toucher au HTML de chacune.
 *
 * Ne change aucune structure/markup : uniquement l'apparence des classes déjà en place.
 */

/* Les dashicons insérés à côté d'un texte (titres, boutons, messages) ne s'alignent pas tout
   seuls sur la ligne de base du texte — recentrage vertical systématique. */
h1 .dashicons, h2 .dashicons, h3 .dashicons, h4 .dashicons,
p .dashicons, .fbm-btn .dashicons, .fbm-role-tile-title .dashicons {
    vertical-align: middle !important;
    margin-top: -3px;
}

:root {
    --fbm2-paper: #FFFFFF;
    --fbm2-paper-sunken: #F7F6F4;
    --fbm2-ink-900: #111111;
    --fbm2-ink-700: #454340;
    --fbm2-ink-500: #86837D;
    --fbm2-ink-300: #E7E4DE;
    --fbm2-ink-200: #F0EEEA;
    --fbm2-accent: #7A2331;
    --fbm2-accent-tint: #F8EAEA;
    --fbm2-good: #2F6B4F;
    --fbm2-good-tint: #E9F3EC;
    --fbm2-warn: #A9761F;
    --fbm2-warn-tint: #F6EEDD;
    --fbm2-bad: #A33A2A;
    --fbm2-bad-tint: #F7E7E1;
    --fbm2-shadow: 0 1px 2px rgba(17,17,17,0.02), 0 10px 24px -18px rgba(17,17,17,0.10);
    /* Même police pour les titres que pour le reste — plus de serif distincte. */
    --fbm2-font-display: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fbm2-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fbm2-font-mono: "Roboto Mono", ui-monospace, monospace;
}

/* ==========================================================================
   Fond de page — blanc partout, y compris le fond gris par défaut de WP autour
   du contenu (visible dans les marges/coins tant qu'on n'y touche pas).
   ========================================================================== */
body.wp-admin #wpcontent,
body.wp-admin #wpbody-content,
body.wp-admin .wrap,
body.wp-admin .fbm-dashboard,
body.wp-admin .fbm-main {
    background: var(--fbm2-paper) !important;
}

/* ==========================================================================
   Typographie de base
   ========================================================================== */
#wpcontent, #wpcontent input, #wpcontent select, #wpcontent textarea, #wpcontent button {
    font-family: var(--fbm2-font-body) !important;
}
.fbm-dashboard, .fbm-config-wrapper, .fbm-guide-wrapper, .wrap.fbm-benevoles-page,
.fbm-stats-kpi, .fbm-stats-grid, .fbm-config-grid {
    font-family: var(--fbm2-font-body) !important;
    color: var(--fbm2-ink-700) !important;
}

/* Titres de page — même traitement ET même taille partout, quel que soit le conteneur
   historique (certains avaient 28px codés en dur — fbm-config-header, fbm-guide-header —
   d'autres la taille par défaut de WordPress ~23px — fbm-tickets-header, fbm-stats-title-row,
   fbm-page-header — d'où des tailles visiblement différentes d'une page à l'autre). */
.wrap > h1,
.fbm-config-header h1,
.fbm-guide-header h1,
.fbm-page-header h1,
.fbm-stats-title-row h1,
.fbm-tickets-header h1,
.wrap h1.wp-heading-inline {
    font-family: var(--fbm2-font-display) !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    color: var(--fbm2-ink-900) !important;
    letter-spacing: -0.01em !important;
}
/* Le bandeau "Festival Bénévoles Manager" (.fbm-header) reste volontairement plus petit
   (voir plus bas) : c'est un repère secondaire, pas le titre de la page. */
.fbm-header h1 {
    font-family: var(--fbm2-font-display) !important;
    font-weight: 600 !important;
    color: var(--fbm2-ink-900) !important;
    letter-spacing: -0.01em !important;
}
.fbm-header p,
.fbm-config-header p,
.fbm-guide-header p {
    font-family: var(--fbm2-font-body) !important;
    color: var(--fbm2-ink-500) !important;
}

/* Chiffres alignés partout où un total/compteur est affiché */
.fbm-stat-value, .fbm-stat-number, .fbm-kpi-value, .fbm-heures-badge,
td.num, .fbm-stat-table td:not(:first-child) {
    font-family: var(--fbm2-font-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   En-têtes de page (fbm-header / fbm-config-header) — masthead épuré
   ========================================================================== */
.fbm-header {
    background: var(--fbm2-paper) !important;
    border: none !important;
    border-bottom: 1px solid var(--fbm2-ink-300) !important;
    box-shadow: none !important;
    text-align: left !important;
}
/* Bandeau "Festival Bénévoles Manager" — présent en haut de TOUTES les pages du plugin
   (pas seulement le tableau de bord), en version compacte : titre et sous-titre sur une
   seule ligne avec un point de séparation, au lieu de deux lignes empilées avec un gros
   titre à 30px. */
.fbm-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Toutes les pages du plugin ont maintenant EXACTEMENT la même structure imbriquée que le
   Tableau de bord/Missions/Programme/Calendrier/Validation/Plannings :
   <div class="wrap"><div class="fbm-dashboard">...</div></div>
   (le <div class="wrap"> vient de la méthode render_xxx() dans trait-render.php, le
   <div class="fbm-dashboard"> du template lui-même). .fbm-dashboard porte déjà sa marge
   négative dans admin-style.css pour venir se coller en haut de la zone WordPress — comme
   la structure est identique partout, ce mécanisme s'applique désormais uniformément sans
   règle spéciale par page. */
.fbm-dashboard .fbm-header {
    margin: 0 !important;
}
/* Le titre propre à chaque page (Configuration, Guide, Statistiques, Tickets, Liste
   Bénévoles...) vient juste après ce bandeau : il n'a plus besoin de sa propre bordure +
   padding épais (ancien design "un seul gros titre par page") — le bandeau ci-dessus fait
   déjà office de séparateur. Sans cet allègement, les deux s'empilaient et rendaient ces
   pages visiblement plus hautes que le Tableau de bord (qui n'a jamais eu de second titre
   aussi épais — juste un <h2> léger plus bas dans la page). */
.fbm-config-header,
.fbm-guide-header,
.fbm-page-header,
.fbm-stats-title-row,
.fbm-tickets-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 0 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
}
.fbm-header-content {
    padding: 24px 16px !important;
}
.fbm-header-left {
    display: flex !important;
    align-items: baseline !important;
    gap: 0 !important;
}
.fbm-header h1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.fbm-header-left p {
    margin: 0 0 0 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
.fbm-header-left p::before {
    content: '·';
    margin-right: 10px;
    color: var(--fbm2-ink-300);
}

/* Seuls les en-têtes qui associent un titre ET un bouton/action ont besoin d'un layout en
   ligne — les en-têtes "titre seul" (Configuration/Maintenance/Guide) restent en bloc naturel,
   sinon leur titre et sous-titre se retrouvent côte à côte au lieu d'empilés.
   Le tableau de bord (.fbm-header) n'a PAS besoin de ce traitement : son enfant direct
   .fbm-header-content est DÉJÀ en flex nativement (voir admin-style.css) — lui ajouter display:flex
   ici casserait son "margin:0 auto" (qui centrerait alors tout le bloc au lieu de juste limiter sa
   largeur). Ne pas y toucher. */
.fbm-page-header,
.fbm-stats-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}
.fbm-page-header hr.wp-header-end { display: none !important; } /* remplacé par la bordure ci-dessus */

/* ==========================================================================
   Cartes — toutes les variantes existantes, un seul traitement visuel
   ========================================================================== */
.fbm-card,
.fbm-config-card,
.fbm-stat-card,
.fbm-action-card,
.fbm-guide-card,
.fbm-benevole-card,
.fbm-mission-info-card,
.fbm-kpi-card,
.fbm-planning-card-action {
    background: var(--fbm2-paper) !important;
    border: 1px solid var(--fbm2-ink-300) !important;
    border-radius: 14px !important;
    box-shadow: var(--fbm2-shadow) !important;
}

/* Ce conteneur de tableau (généré en JS) est toujours imbriqué dans une carte déjà stylée
   (Configuration/Maintenance → Responsables) : pas de second encadrement "carte dans la carte",
   juste un filet fin pour distinguer le tableau du reste. */
.fbm-responsables-table-wrapper {
    background: transparent !important;
    border: 1px solid var(--fbm2-ink-200) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Idem : ces conteneurs (tableau Missions/Programme, calendrier) sont maintenant toujours
   posés à l'intérieur d'une .fbm-card (voir markup) — on retire leur propre fond/ombre/bordure
   pour ne pas doubler l'encadrement. */
.fbm-data-container,
.fbm-calendar-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.fbm-config-card:hover,
.fbm-stat-card:hover,
.fbm-action-card:hover,
.fbm-guide-card:hover,
.fbm-benevole-card:hover,
.fbm-kpi-card:hover {
    box-shadow: 0 1px 2px rgba(17,17,17,0.03), 0 16px 32px -18px rgba(17,17,17,0.14) !important;
    transform: none !important; /* certaines pages animaient un translateY au survol, trop "carte flottante web" pour cette direction */
}

.fbm-card-header,
.fbm-config-card > h2, .fbm-config-card > h3 {
    border-bottom: 1px solid var(--fbm2-ink-200) !important;
    background: transparent !important;
}
.fbm-card-header h2, .fbm-card-header h3,
.fbm-section-header h2, .fbm-section-header h3,
.fbm-planning-card-action > h3,
.fbm-action-card > h3 {
    font-family: var(--fbm2-font-display) !important;
    font-weight: 600 !important;
    color: var(--fbm2-ink-900) !important;
}
.fbm-card-header p, .fbm-card-description {
    color: var(--fbm2-ink-500) !important;
}

/* Carte générique (nouvelle) — utilisée pour encadrer les blocs de contenu qui n'avaient
   pas de conteneur "carte" dédié (Calendrier, Programme, Missions, Plannings, Validation). */
.fbm-card {
    padding: 22px !important;
    margin-bottom: 18px !important;
}
.fbm-card > .fbm-section-header:first-child {
    margin: -22px -22px 20px !important;
    padding: 17px 22px !important;
    border-bottom: 1px solid var(--fbm2-ink-200) !important;
}
/* Un deuxième bloc de titre à l'intérieur d'une même carte (ex. "Historique" sous "Validation")
   reste un simple sous-titre, sans le traitement plein bord du premier. */
.fbm-card > .fbm-section-header:not(:first-child) {
    margin: 24px 0 14px !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--fbm2-ink-200) !important;
}

/* KPI / stat tiles */
.fbm-kpi-card, .fbm-stat-card {
    background: var(--fbm2-paper) !important;
}
.fbm-kpi-value, .fbm-stat-value, .fbm-stat-number {
    color: var(--fbm2-ink-900) !important;
    font-family: var(--fbm2-font-display) !important;
}
.fbm-kpi-label, .fbm-stat-label {
    color: var(--fbm2-ink-500) !important;
    font-family: var(--fbm2-font-body) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px !important;
}
/* Variantes de couleur (postes vacants / conflits / etc.) gardent un accent, pas un fond plein */
.fbm-kpi-missions .fbm-kpi-value, .fbm-kpi-coverage .fbm-kpi-value {
    color: var(--fbm2-accent) !important;
}
.fbm-kpi-card.fbm-kpi-missions, .fbm-kpi-card.fbm-kpi-coverage {
    background: var(--fbm2-paper) !important;
    border-color: var(--fbm2-ink-300) !important;
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.fbm-btn,
#wpcontent .button {
    font-family: var(--fbm2-font-body) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.fbm-btn-primary,
#wpcontent .button-primary {
    background: var(--fbm2-ink-900) !important;
    border-color: var(--fbm2-ink-900) !important;
    color: var(--fbm2-paper) !important;
}
.fbm-btn-primary:hover,
#wpcontent .button-primary:hover {
    background: var(--fbm2-accent) !important;
    border-color: var(--fbm2-accent) !important;
    color: var(--fbm2-paper) !important;
}
.fbm-btn-secondary,
#wpcontent .button:not(.button-primary):not(.button-link-delete) {
    background: var(--fbm2-paper) !important;
    border-color: var(--fbm2-ink-300) !important;
    color: var(--fbm2-ink-900) !important;
}
.fbm-btn-secondary:hover,
#wpcontent .button:not(.button-primary):not(.button-link-delete):hover {
    border-color: var(--fbm2-ink-500) !important;
    background: var(--fbm2-paper-sunken) !important;
}
.fbm-btn-danger {
    background: var(--fbm2-bad) !important;
    border-color: var(--fbm2-bad) !important;
    color: #fff !important;
}
.fbm-btn-danger:hover {
    background: #8A2E20 !important; /* var(--fbm2-bad) assombri */
    border-color: #8A2E20 !important;
    color: #fff !important;
}
/* Lien de suppression WP natif (texte seul, pas de fond) — reste sur fond transparent */
#wpcontent .button-link-delete {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--fbm2-bad) !important;
}
#wpcontent .button-link-delete:hover {
    color: #8A2E20 !important;
}
.fbm-btn-success { background: var(--fbm2-good) !important; border-color: var(--fbm2-good) !important; color: #fff !important; }
.fbm-btn-warning { background: var(--fbm2-warn) !important; border-color: var(--fbm2-warn) !important; color: #fff !important; }
.fbm-btn-info    { background: var(--fbm2-ink-700) !important; border-color: var(--fbm2-ink-700) !important; color: #fff !important; }

/* ==========================================================================
   Tableaux
   ========================================================================== */
.fbm-responsables-table,
.fbm-stat-table,
#wpcontent table.form-table {
    font-family: var(--fbm2-font-body) !important;
}
.fbm-responsables-table th,
.fbm-stat-table th {
    background: var(--fbm2-paper-sunken) !important;
    color: var(--fbm2-ink-500) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--fbm2-ink-300) !important;
}
.fbm-responsables-table td,
.fbm-stat-table td {
    border-bottom: 1px solid var(--fbm2-ink-200) !important;
    color: var(--fbm2-ink-700) !important;
}
.fbm-responsables-table tr:hover td,
.fbm-stat-table tr:hover td {
    background: var(--fbm2-paper-sunken) !important;
}

/* ==========================================================================
   Badges / pastilles de statut — vocabulaire visuel unifié
   ========================================================================== */
.fbm-badge-admin {
    background: var(--fbm2-bad-tint) !important;
    color: var(--fbm2-bad) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}
.fbm-heures-badge, .fbm-dispo-badge {
    background: var(--fbm2-paper-sunken) !important;
    color: var(--fbm2-ink-700) !important;
    border: 1px solid var(--fbm2-ink-300) !important;
    border-radius: 999px !important;
}

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */
#wpcontent .fbm-input,
#wpcontent input[type="text"].fbm-input,
#wpcontent select.fbm-input,
#wpcontent textarea.fbm-input {
    border-radius: 8px !important;
    border-color: var(--fbm2-ink-300) !important;
    font-family: var(--fbm2-font-body) !important;
}
#wpcontent .fbm-input:focus {
    border-color: var(--fbm2-accent) !important;
    box-shadow: 0 0 0 1px var(--fbm2-accent) !important;
}

/* ==========================================================================
   Tableaux Programme/Missions — colonnes Salle/Titre/Rôle trop étroites
   ========================================================================== */
/* Plutôt qu'élargir le tableau (ça le fait déborder de la page), on garde la largeur de
   colonne telle quelle et on tronque le texte avec "…", le texte complet restant visible
   via une bulle d'info (title=... posé en JS, voir admin-script.js) au survol.
   !important nécessaire : du JS existant (renderMissionsTable/renderProgramTable) remet
   "white-space: normal" en style inline sur toutes les cellules après le rendu, ce qui
   gagnerait sinon sur cette règle externe et annulerait la troncature. */
.fbm-mission-field-input,
.fbm-role-input,
.fbm-truncate-cell {
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

/* Largeurs de colonnes harmonisées entre Programme et Missions (mêmes 11 colonnes, même
   ordre : Date, RDV, Début, Fin, Salle, Titre, Rôle, Besoin, Responsable, Bénévoles Assignés,
   Actions), en POURCENTAGES + table-layout:fixed : contrairement à "auto" (utilisé par le JS
   existant), qui recalcule les largeurs selon le contenu de chaque cellule et redistribue
   l'espace restant de façon imprévisible (Programme, qui garde un <input> dans Rôle, voyait sa
   colonne Titre gonfler de façon disproportionnée), "fixed" applique exactement les proportions
   ci-dessous, sur les deux tableaux, à l'identique — tout en restant proportionnel à la largeur
   réelle de l'écran plutôt que figé en pixels. */
#fbm-actual-program-table-wrapper .fbm-table,
#fbm-actual-mission-table-wrapper .fbm-table {
    table-layout: fixed !important;
}
#fbm-actual-program-table-wrapper .fbm-table th,
#fbm-actual-program-table-wrapper .fbm-table td,
#fbm-actual-mission-table-wrapper .fbm-table th,
#fbm-actual-mission-table-wrapper .fbm-table td {
    box-sizing: border-box;
}
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(1), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(1),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(1), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(1),
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(2), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(2),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(2), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(2),
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(3), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(3),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(3), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(3),
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(4), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(4),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(4), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(4) {
    width: 6%;
}
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(5), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(5),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(5), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(5),
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(6), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(6),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(6), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(6),
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(7), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(7),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(7), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(7) {
    width: 10%;
}
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(8), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(8),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(8), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(8) {
    width: 6%;
}
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(9), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(9),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(9), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(9) {
    width: 15%;
}
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(10), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(10),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(10), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(10) {
    width: 15%;
}
#fbm-actual-program-table-wrapper .fbm-table th:nth-child(11), #fbm-actual-program-table-wrapper .fbm-table td:nth-child(11),
#fbm-actual-mission-table-wrapper .fbm-table th:nth-child(11), #fbm-actual-mission-table-wrapper .fbm-table td:nth-child(11) {
    width: 10%;
}

/* ==========================================================================
   Modale "Assignation manuelle" — cases à cocher en grille plutôt qu'une
   seule colonne (chaque bénévole prenait toute la largeur de la modale).
   ========================================================================== */
#fbm-volunteer-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
#fbm-volunteer-checkboxes .fbm-volunteer-checkbox {
    margin-bottom: 0;
}
/* .fbm-form-group input { width:100%; padding:...; border-radius:...; } (admin-style.css)
   s'applique à TOUT input dans un .fbm-form-group, y compris cette case à cocher qui y est
   imbriquée — d'où la grosse "pilule" pleine largeur au lieu d'une petite case normale. */
#fbm-volunteer-checkboxes input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    flex-shrink: 0;
}
/* Badge des préférences — le .match-badge jaune vif d'origine (admin-style.css) sert ailleurs
   à afficher un score de correspondance (calendrier) ; ici il sert juste à lister les
   préférences du bénévole, donc plus petit et dans une couleur neutre plutôt que criarde. */
#fbm-volunteer-checkboxes .match-badge {
    background: var(--fbm2-ink-200, #F0EEEA);
    color: var(--fbm2-ink-500, #86837D);
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
}