/*easyrecrute-admin.css*/
select.easyrecrute-change-status {
    border: solid 1px #d7d7d7;
    background: #e6eeff;
    padding: 5px;
    color: #2563eb;
}


/* Modal */
#easyrecrute-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:99999; }
#easyrecrute-modal::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.45); }
#easyrecrute-modal .er-modal-inner { position:relative; z-index:2; width:90%; max-width:920px; background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,0.25); padding:18px; }
#easyrecrute-modal .er-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    background: red;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 50%;
    width: 40px; 
    height: 40px; 
    display: flex; 
    align-items: center;
    justify-content: center; 
}#easyrecrute-modal .er-modal-body { max-height:75vh; overflow:auto; }

/* Responsive tweaks */
@media (max-width: 800px) {
#easyrecrute-modal .er-modal-inner { padding:12px; }
}

/* small helper */
.er-internal-preview { font-size:13px; color:#444; }



/* Indicateur de tri plus visible */
.sort-indicator {
    margin-left: 4px;
    color: #2196f3;
    font-weight: bold;
}



/* Transitions pour les lignes filtrées */
/* Amélioration de la recherche */
#easyrecrute-search {
    transition: border-color 0.2s;
}

#easyrecrute-search:focus {
    border-color: #2196f3;
    outline: none;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}



/* =========================
   EasyRecrute — Modern table
   ========================= */

:root{
  --er-bg: #fdfdfd;
  --er-surface: #f8fafc;
  --er-text: #111827;
  --er-subtext: #6b7280;
  --er-muted: #f3f4f6;
  --er-radius: 10px;
  --er-shadow: 0 4px 18px rgba(16,24,40,0.06);
}

/* Container */
/* Override inline borders */
/* Header style */
/* Rows — each row looks like a card (no dividing border) */
/* Hover effect */
/* Cells */
/* Rounded ends for the "card" row */
/* Column alignment helpers */
/* Candidate cell (avatar + name) */
.candidate-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.candidate-cell .avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--er-muted);
  flex: 0 0 44px;
}

/* Status badge styles */
.easyrecrute-candidates-wrap .status-pending { background:#f59e0b; color:#111827; }
.easyrecrute-candidates-wrap .status-selected { background:#10b981; color:#ffffff; }
.easyrecrute-candidates-wrap .status-rejected { background:#ef4444; color:#ffffff; }
.easyrecrute-candidates-wrap .status-interview { background:#6366f1; color:#ffffff; }
.easyrecrute-candidates-wrap .status-hiring { background:#06b6d4; color:#042a2b; }

/* Actions */
/* Sort indicator */
.sort-indicator {
  font-size: 12px;
  margin-left: 6px;
  opacity: 0.75;
}

/* Empty state */
/* Responsive: cache la colonne email sur petits écrans et réduit padding */
@media (max-width: 860px) {
#easyrecrute-candidates-table td,
.candidate-cell .avatar { width:40px; height:40px; }
}



















/* ---------- Responsive table -> cards (mobile) ---------- */
@media (max-width: 860px) {
  /* masquer l'entête table sur mobile */
/* afficher les lignes comme des "cartes" */
#easyrecrute-candidates-table tbody tr {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--er-bg);
    box-shadow: 0 2px 10px rgba(16,24,40,0.04);
    border-radius: 10px;
    overflow: hidden;
    height: auto;
  }

  /* Chaque cellule devient une ligne flexible : label (avant) + valeur (après) */
/* étiquette générée depuis data-label */
/* valeur (le contenu réel) */
/* actions doivent rester visibles et bien alignées */
/* réduire padding et avatar */
  .candidate-cell .avatar { width:36px; height:36px; }

  /* cacher la colonne email si tu préfères (optionnel) */
  /* ajuster recherche / header */
.easyrecrute-job-header > div:last-child { width:100%; min-width:0; }
}

/* Small tweaks for very small screens */
@media (max-width: 420px) {
#easyrecrute-candidates-table td { padding: 8px; }
}



/* ============================================
   PAGINATION
   ============================================ */
.pagination-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-info strong {
    color: #2196f3;
}

/* ============================================
   MODAL AMÉLIORÉ
   ============================================ */
#easyrecrute-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#easyrecrute-modal.open {
    display: flex;
    opacity: 1;
}

#easyrecrute-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

#easyrecrute-modal .er-modal-inner {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 920px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#easyrecrute-modal .er-modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 8px;
}

#easyrecrute-modal .er-modal-close {
    position: static;
    background: #ef4444;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

#easyrecrute-modal .er-modal-close:hover {
    background: #dc2626;
    transform: scale(1.1);
}

#easyrecrute-modal .er-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ============================================
   BOUTONS D'ACTION
   ============================================ */
#easyrecrute-export-table,
#easyrecrute-print-table,
.easyrecrute-print-cv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

#easyrecrute-export-table:hover,
#easyrecrute-print-table:hover,
.easyrecrute-print-cv:hover {
    background: #2196f3;
    color: white;
    border-color: #2196f3;
    transform: translateY(-1px);
}

/* ============================================
   LOADER AMÉLIORÉ
   ============================================ */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   CONTRÔLES RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
.easyrecrute-controls > div {
        width: 100%;
    }
    
.easyrecrute-controls button {
        flex: 1;
        min-width: 0;
    }
    
#easyrecrute-modal .er-modal-inner {
        width: 95%;
        max-height: 95vh;
    }
    
    #easyrecrute-modal .er-modal-body {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .pagination-info {
        font-size: 13px;
    }
    
#easyrecrute-export-table span,
    #easyrecrute-print-table span {
        display: none;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   IMPRESSION
   ============================================ */
@media print {
    body * {
        visibility: hidden;
    }
    
#easyrecrute-candidates-table {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    
}

/* ============================================
   ÉTATS DE CHARGEMENT
   ============================================ */
.easyrecrute-candidates-wrap {
    position: relative;
}

.easyrecrute-candidates-wrap.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 5;
}

/* ============================================
   SÉLECTEUR PAR PAGE
   ============================================ */
/* ============================================
   AMÉLIORATION VISUELLE DES BADGES DE STATUT
   ============================================ */
/* ============================================
   ÉTAT VIDE
   ============================================ */
/* ==================== STATS CARDS ==================== */
/* ==================== MATCH BADGES ==================== */
/* Couleurs spécifiques par catégorie */
.easyrecrute-candidates-wrap .match-fort {
    background: #10b981;
    color: #fff;
}

.easyrecrute-candidates-wrap .match-moyen {
    background: #f59e0b;
    color: #fff;
}

.easyrecrute-candidates-wrap .match-faible {
    background: #94a3b8;
    color: #fff;
}

.easyrecrute-candidates-wrap .match-rejete {
    background: #ef4444;
    color: #fff;
}

/* ==================== VERSION BADGE ==================== */
/* ==================== SCORE AMÉLIORÉ ==================== */
.er-score-wrapper {
    text-align: center;
}

.er-score-wrapper .er-score {
    font-weight: 700;
    font-size: 18px;
    color: #1a202c;
    line-height: 1.2;
    margin-bottom: 4px;
}

.er-score-wrapper small {
    color: #999;
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

/* ==================== FILTRE PAR CATÉGORIE ==================== */
#easyrecrute-filter-match {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#easyrecrute-filter-match:hover,
#easyrecrute-filter-match:focus {
    border-color: #2196f3;
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

/* ==================== RESPONSIVE STATS ==================== */
@media (max-width: 860px) {
}

@media (max-width: 420px) {
}

/* ==================== PRINT - CATÉGORIES ==================== */
@media print {
.er-match-badge,
}

/* ============================================================
   LISTE DES CANDIDATURES EN FICHES
   ============================================================
   Le tableau reste un <table> dans le document, et il est presente en fiches
   par la mise en page.

   Ce choix n'est pas cosmetique : easyrecrute-admin.js remplace le contenu du
   <tbody> a chaque filtrage, trie sur les <th data-sort>, et reconstruit
   l'export CSV comme l'impression en relisant les <td> un par un. Remplacer
   les lignes par des <article> aurait impose de reecrire ces quatre
   mecanismes ; les habiller en grille donne le meme resultat visuel sans
   toucher a une seule ligne de comportement.
   ------------------------------------------------------------ */

#easyrecrute-candidates-table {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* --- L'ancien en-tete devient une barre de tri --- */

#easyrecrute-candidates-table thead { display: block; margin-bottom: 8px; }

#easyrecrute-candidates-table thead tr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Seules les deux colonnes triables gardent un sens ici : les autres
   n'etaient que des titres de colonne, et la fiche porte deja ses libelles. */
#easyrecrute-candidates-table thead th { display: none; }

#easyrecrute-candidates-table thead th[data-sort] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 10px;
    background: var(--zu-surface, #fff);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zu-texte, #54595F);
    text-align: left;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
#easyrecrute-candidates-table thead th[data-sort]:hover {
    border-color: var(--zu-primaire, #2563EB);
    color: var(--zu-primaire, #2563EB);
    background: var(--zu-primaire-clair, #EFF6FF);
}
#easyrecrute-candidates-table thead th.sorted-asc,
#easyrecrute-candidates-table thead th.sorted-desc {
    border-color: var(--zu-primaire, #2563EB);
    background: var(--zu-primaire, #2563EB);
    color: #fff;
}

/* --- Mise en page des fiches --- */

#easyrecrute-candidates-table tbody { display: flex; flex-direction: column; gap: 8px; }

#easyrecrute-candidates-table tbody tr {
    display: grid;
    /*
     * Deux rangees plutot qu'une.
     *
     * L'email et le telephone appartiennent a l'identite du candidat : les
     * mettre dans une colonne separee obligeait a balayer l'ecran de gauche a
     * droite pour reconstituer une seule information. Ils passent donc juste
     * sous le nom. La date rejoint le statut, sous lequel elle a un sens
     * (« Rejeté — reçue le 12 août »).
     *
     * Score, statut et actions restent alignes sur toute la hauteur.
     */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 150px) auto;
    grid-template-areas:
        "candidat score statut actions"
        "contact  score date   actions";
    align-items: center;
    gap: 2px 18px;
    margin: 0;
    padding: 12px 16px;
    background: var(--zu-surface, #fff);
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: var(--zu-rayon, 14px);
    box-shadow: var(--zu-ombre, 0 1px 2px rgba(16,24,40,.04));
    transition: border-color .18s ease, box-shadow .22s ease;
}
#easyrecrute-candidates-table tbody tr:hover {
    border-color: var(--zu-primaire-bordure, #DBEAFE);
    box-shadow: var(--zu-ombre-md, 0 4px 16px rgba(16,24,40,.07));
    background: var(--zu-surface, #fff);
}

#easyrecrute-candidates-table tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
}

#easyrecrute-candidates-table td[data-label="Candidat"] { grid-area: candidat; }
#easyrecrute-candidates-table td[data-label="Email"]    { grid-area: contact; }
#easyrecrute-candidates-table td[data-label="Score"]    { grid-area: score; text-align: center; }
#easyrecrute-candidates-table td[data-label="Statut"]   { grid-area: statut; }
#easyrecrute-candidates-table td[data-label="Date"] {
    grid-area: date;
    font-size: 11.5px;
    color: var(--zu-texte-doux, #7A7A7A);
    white-space: nowrap;
}

/* Nom, poste, email et telephone se coupent plutot que de pousser les actions
   hors de la fiche. */
#easyrecrute-candidates-table td[data-label="Candidat"] > strong,
#easyrecrute-candidates-table td[data-label="Candidat"] .zu-meta,
#easyrecrute-candidates-table td[data-label="Email"] a,
#easyrecrute-candidates-table td[data-label="Email"] .zu-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Telephone a la suite de l'email, sur la meme ligne : deux moyens de
   contacter, une seule ligne de lecture. */
#easyrecrute-candidates-table td[data-label="Email"] > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
#easyrecrute-candidates-table td[data-label="Email"] .zu-meta { font-size: 12.5px; }

#easyrecrute-candidates-table td[data-label="Statut"] .zu-meta { font-size: 11.5px; }

/* ============================================================
   ACTIONS : COMPACTES, TROIS PAR LIGNE
   ============================================================
   Les boutons ET le selecteur de statut partagent UNE SEULE grille.

   Ils vivaient dans deux conteneurs distincts, ce qui obligeait a donner au
   selecteur une largeur de 100 % pour qu'il occupe sa ligne — d'ou un controle
   deux fois plus large que les boutons voisins, sans rapport avec eux.

   « display: contents » efface les deux conteneurs de la mise en page sans
   toucher au balisage : tous les controles deviennent des cases de la meme
   grille, et le selecteur n'occupe que les deux colonnes dont il a besoin.
   ------------------------------------------------------------ */

#easyrecrute-candidates-table td[data-label="Actions"] {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    align-content: center;
    width: 268px;
}

.er-actions-groupe,
.er-statut-groupe { display: contents; }

/* Une seule regle de taille, quelle que soit la variante de couleur. */
#easyrecrute-candidates-table td[data-label="Actions"] .zu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 0;
    padding: 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

#easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-change-status {
    grid-column: span 2;
    width: 100%;
    height: 28px;
    padding: 0 26px 0 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 28px;
    box-sizing: border-box;
}

/* ============================================================
   SEPARATION DES FICHES
   ============================================================
   La liste etait enfermee dans une .zu-carte — une carte blanche a bordure —
   qui contenait elle-meme des fiches blanches a bordure. Cette carte dans la
   carte donnait le fond continu visible derriere chaque candidature, et
   noyait la limite entre deux fiches.

   Chaque fiche etant deja une carte, celle qui les entoure n'a plus d'objet :
   on l'efface, et on renforce la bordure des fiches pour que la separation se
   voie sans hesitation.
   ------------------------------------------------------------ */

.easyrecrute-candidates-wrap > .zu-carte:has(#easyrecrute-candidates-table),
.zu-carte:has(> #easyrecrute-candidates-table) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

#easyrecrute-candidates-table tbody tr {
    border: 1px solid var(--zu-bordure-forte, #CBD5E1);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
#easyrecrute-candidates-table tbody tr:hover {
    border-color: var(--zu-primaire, #2563EB);
    box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .35);
}

/* Ecart plus franc entre deux fiches : la separation se lit aussi par le vide. */
#easyrecrute-candidates-table tbody { gap: 10px; }

/* ============================================================
   FOND DES FICHES : NEUTRALISER LE ZEBRAGE DU THEME
   ============================================================
   reset.css du theme, chargee APRES la notre, applique :

       table tbody > tr:nth-child(odd) > td { background: hsla(0,0%,50%,.071); }
       table tbody tr:hover > td            { background: hsla(0,0%,50%,.102); }

   Un zebrage classique — mais il peint les CELLULES, alors que nos regles
   posaient le fond sur la LIGNE. Aucune ne l'emportait sur l'autre : elles ne
   visaient pas le meme element. D'ou un fond gris une fiche sur deux (les
   impaires, ce qui donnait l'impression que seules les candidatures rejetees
   y echappaient), et sur TOUTES au survol.

   On neutralise donc au niveau de la cellule. Le selecteur d'identifiant
   (1,0,2) passe devant celui du theme (0,1,3).
   ------------------------------------------------------------ */

#easyrecrute-candidates-table tbody > tr > td,
#easyrecrute-candidates-table tbody > tr:nth-child(odd) > td,
#easyrecrute-candidates-table tbody > tr:nth-child(even) > td,
#easyrecrute-candidates-table tbody > tr:hover > td {
    background: transparent;
}

/* Le fond de la fiche, lui, est porte par la ligne — y compris au survol, que
   la reecriture precedente avait laisse tomber. */
#easyrecrute-candidates-table tbody tr,
#easyrecrute-candidates-table tbody tr:hover {
    background: var(--zu-surface, #fff);
}

/* « Voir la décision » ne tient pas dans un tiers de la grille : c'est aussi
   l'action principale, celle qui explique le classement. Elle prend donc deux
   colonnes, les secondaires se partagent le reste :

       [ Voir la décision      ][ Voir le CV ]
       [ Lettre ][ Note ][ CV original ]
       [ Changer le statut…    ]                                            */
#easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-view-decision {
    grid-column: span 2;
}

/* ============================================================
   MOBILE
   ============================================================
   Regle qui gouverne tout le reste : un element de grille refuse de se
   retrecir en dessous de son contenu tant qu'on ne lui donne pas
   min-width: 0. Sans cela, un email long ou un nom compose elargit sa colonne
   et pousse la page au-dela de l'ecran — le defilement horizontal apparait, et
   la moitie de chaque fiche devient invisible.
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    /* La barre d'outils passe en colonne : recherche, filtres, puis actions. */
    .easyrecrute-controls { flex-direction: column; align-items: stretch; }
    .easyrecrute-controls #easyrecrute-search { width: 100%; }
    .easyrecrute-controls .zu-outils__droite { justify-content: flex-start; flex-wrap: wrap; }

    /* L'entete de l'offre ne doit pas imposer sa largeur. */
    .easyrecrute-job-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .easyrecrute-job-header > div { width: 100%; min-width: 0; }

    /* Barre de tri : les deux boutons prennent chacun la moitie. */
    #easyrecrute-candidates-table thead tr { flex-wrap: wrap; }
    #easyrecrute-candidates-table thead th[data-sort] { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

@media (max-width: 700px) {
    #easyrecrute-candidates-table tbody tr {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "candidat score"
            "contact  score"
            "statut   date"
            "actions  actions";
        gap: 6px 12px;
        padding: 14px;
    }

    #easyrecrute-candidates-table td[data-label="Date"] { text-align: right; align-self: center; }
    #easyrecrute-candidates-table td[data-label="Score"] { align-self: start; }

    /* Deux boutons par ligne : trois deviennent illisibles sous 380 px. */
    #easyrecrute-candidates-table td[data-label="Actions"] {
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--zu-bordure, #E6EEFC);
    }
    #easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-view-decision,
    #easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-change-status {
        grid-column: span 2;
    }

    /* Boutons plus hauts : on vise au doigt, pas a la souris. */
    #easyrecrute-candidates-table td[data-label="Actions"] .zu-btn,
    #easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-change-status {
        height: 36px;
        font-size: 12.5px;
    }
    #easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-change-status { line-height: 36px; }

    /* L'email et le telephone s'empilent plutot que de deborder. */
    #easyrecrute-candidates-table td[data-label="Email"] > div { gap: 2px 10px; }

    .easyrecrute-controls .er-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    #easyrecrute-candidates-table tbody tr {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "candidat" "contact" "score" "statut" "date" "actions";
        gap: 4px;
    }
    #easyrecrute-candidates-table td[data-label="Score"],
    #easyrecrute-candidates-table td[data-label="Date"] { text-align: left; }
    #easyrecrute-candidates-table td[data-label="Score"] { margin: 4px 0; }

    /* Un seul bouton par ligne : le pouce ne vise pas plus fin. */
    #easyrecrute-candidates-table td[data-label="Actions"] { grid-template-columns: 1fr; }
    #easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-view-decision,
    #easyrecrute-candidates-table td[data-label="Actions"] .easyrecrute-change-status { grid-column: span 1; }

    .easyrecrute-controls .er-filtres { grid-template-columns: 1fr; }
}

/* Garde-fou general : rien ne doit provoquer de defilement horizontal.
   Les elements de grille ne se retrecissent pas sous leur contenu par defaut ;
   min-width: 0 leve cette regle et rend l'ellipse possible. */
.easyrecrute-candidates-wrap,
#easyrecrute-candidates-table,
#easyrecrute-candidates-table tbody,
#easyrecrute-candidates-table tbody tr,
#easyrecrute-candidates-table tbody td { max-width: 100%; min-width: 0; }

/* ============================================================
   IDENTITE ET SCORE
   ============================================================
   Ces valeurs vivaient dans des attributs style="…" du balisage, qui
   l'emportent sur toute feuille : aucune harmonisation n'etait possible tant
   qu'ils etaient la. Ils ont ete retires ; les valeurs sont ici.
   ------------------------------------------------------------ */

#easyrecrute-candidates-table .er-nom {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--zu-noir, #272727);
}
#easyrecrute-candidates-table .er-lien-mail {
    color: var(--zu-primaire, #2563EB);
    text-decoration: none;
    font-size: 13px;
}
#easyrecrute-candidates-table .er-lien-mail:hover { text-decoration: underline; }

#easyrecrute-candidates-table .er-score {
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    color: var(--zu-noir, #272727);
    white-space: nowrap;
}
#easyrecrute-candidates-table .er-score-total {
    font-size: 12px;
    font-weight: 600;
    color: var(--zu-texte-doux, #7A7A7A);
}
#easyrecrute-candidates-table .er-categorie { margin-top: 4px; }

/* Etat vide et message de chargement : une cellule sur toute la largeur. */
#easyrecrute-candidates-table tbody tr:has(td[colspan]) { display: block; padding: 0; }
#easyrecrute-candidates-table tbody td[colspan] { display: block; width: 100%; }

/* Les etiquettes generees par .zu-tableau en dessous de 900px (« Candidat : »,
   « Score : »...) faisaient sens pour un tableau replie en liste. La fiche
   porte deja ses propres reperes : elles feraient doublon. */
#easyrecrute-candidates-table tbody td::before { content: none !important; }
#easyrecrute-candidates-table tbody td > * { text-align: left !important; margin-left: 0 !important; }
#easyrecrute-candidates-table td[data-label="Score"] > * { text-align: center !important; }

/* ============================================================
   BARRE DE FILTRES
   ============================================================
   Quatre listes par ligne sur ecran, deux sur mobile. En flex, chacune
   prenait la largeur de son option la plus longue puis passait a la ligne
   des qu'il manquait quelques pixels ; les quatre finissaient empilees.
   ------------------------------------------------------------ */

.easyrecrute-controls .er-filtres {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 480px;
    min-width: 0;
}
.easyrecrute-controls .er-filtres .zu-select {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
}
.easyrecrute-controls #easyrecrute-search { flex: 1 1 260px; min-width: 0; }

@media (max-width: 780px) {
    .easyrecrute-controls .er-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Contenu d'une fenetre.
   .er-modal-body assure deja le defilement ; ce conteneur ne fait que poser la
   marge interieure. Lui redonner overflow:auto ajouterait une seconde barre de
   defilement a l'interieur de la premiere. */
.er-modal-contenu { padding: 20px; }
.er-modal-contenu--texte { line-height: 1.6; }

/* ============================================================
   CLASSEMENT PAR REGION
   ============================================================ */

/* Le bloc part masqué et n'est révélé qu'au clic sur « Par région ».
   L'attribut hidden ne vaut qu'un display:none de la feuille du navigateur :
   poser un display ci-dessous l'annulerait et le bloc s'afficherait d'office,
   exactement comme cela s'est produit sur le message de réévaluation.
   Cette règle le protège par avance. */
.zr-regions[hidden] {
    display: none;
}

.zr-regions {
    margin: 14px 0;
    padding: 18px;
    border: 1px solid var(--zu-primaire-bordure, #DBEAFE);
    border-radius: var(--zu-rayon, 14px);
    background: linear-gradient(120deg, #F8FBFF 0%, #FFFFFF 60%);
}
.zr-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.zr-titre { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--zu-noir, #272727); }
.zr-aide { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--zu-texte-doux, #7A7A7A); max-width: 620px; }

.zr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.zr-carte {
    padding: 14px; border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 12px; background: #fff;
}
.zr-carte--indeterminee { background: #FBFCFE; border-style: dashed; }
.zr-carte__entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.zr-carte__nom { font-size: 14px; font-weight: 700; color: var(--zu-noir, #272727); }
.zr-carte__total {
    font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 100px;
    background: var(--zu-primaire-clair, #EFF6FF); color: var(--zu-primaire, #2563EB);
}
.zr-carte__note { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--zu-texte-doux, #7A7A7A); }

.zr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zr-candidat { display: flex; align-items: center; gap: 9px; }
.zr-rang {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--zu-fond, #F8F8F8); color: var(--zu-texte-doux, #7A7A7A);
    font-size: 10.5px; font-weight: 700;
}
.zr-candidat:first-child .zr-rang { background: var(--zu-primaire, #2563EB); color: #fff; }
.zr-candidat__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zr-candidat__nom { font-size: 13px; font-weight: 600; color: var(--zu-noir, #272727); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zr-candidat__meta { font-size: 11px; color: var(--zu-texte-doux, #7A7A7A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zr-score { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--zu-noir, #272727); }

@media (max-width: 700px) {
    .zr-grille { grid-template-columns: 1fr; }
    .zr-entete { flex-direction: column; }
}

/* ============================================================
   FILTRES PAR CRITÈRE PERSONNALISÉ
   ============================================================
   Ces critères sont écrits en langage libre et font parfois dix
   lignes : on n'en montre que le début, le texte complet est en
   infobulle. Les cases restent sur leur propre ligne, sous la
   grille des listes déroulantes, pour ne pas la déséquilibrer. */

.er-filtres-criteres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--zu-primaire-fond, #EFF6FF);
    border: 1px solid var(--zu-primaire-bordure, #DBEAFE);
    border-radius: var(--zu-rayon-sm, 8px);
}

.er-filtres-criteres__titre {
    font-weight: 600;
    font-size: 13px;
    color: var(--zu-texte, #1a202c);
}

.er-critere-case {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    /* Un critère long ne doit pas pousser la barre au-delà de l'écran. */
    max-width: 340px;
}

.er-critere-case span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.er-critere-case input {
    flex: none;
    margin: 0;
}

.er-filtres-criteres__aide {
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--zu-texte-doux, #64748b);
}

@media (max-width: 640px) {
    .er-critere-case { max-width: 100%; flex: 1 1 100%; }
}

/* « Candidature originale » sur deux colonnes.
   La cellule d'actions est une grille de trois colonnes sur 268 px, soit
   environ 86 px par bouton. Ce libellé en demande le double : avec
   white-space:nowrap il débordait de sa case et se retrouvait coupé. Deux
   colonnes lui donnent ~177 px, ce qui suffit. Les autres boutons sont
   courts et gardent leur colonne unique. */
#easyrecrute-candidates-table td[data-label="Actions"] .er-btn-dossier {
    grid-column: span 2;
    width: 100%;
}

@media (max-width: 640px) {
    /* Sur mobile la grille passe à deux colonnes : le bouton prend la ligne. */
    #easyrecrute-candidates-table td[data-label="Actions"] .er-btn-dossier {
        grid-column: 1 / -1;
    }
}

/* Blocage du defilement de l'arriere-plan pendant l'ouverture de la modale
   « Comment cette decision a ete prise ». La modale a une hauteur figee ;
   sans ce blocage, la molette continue de faire defiler la page derriere le
   voile, invisible, ce qui deroute au retour a la fermeture. */
body.easyrecrute-modal-ouverte {
    overflow: hidden;
}

/* ============================================================
   ACTIONS GROUPEES
   ============================================================ */
.zu-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    background: var(--zu-primaire-fond, #EFF6FF);
    border: 1px solid var(--zu-primaire-bordure, #DBEAFE);
    border-radius: var(--zu-rayon, 10px);
    padding: 12px 16px;
    margin: 0 0 14px;
}
.zu-bulk-bar[hidden] { display: none; }

.zu-bulk-bar__compte { font-size: 13px; color: var(--zu-texte, #1a202c); white-space: nowrap; }

.zu-bulk-bar__champ {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--zu-texte-doux, #64748b);
    white-space: nowrap;
}

.zu-bulk-bar__separateur {
    width: 1px;
    align-self: stretch;
    background: var(--zu-primaire-bordure, #DBEAFE);
    margin: 0 2px;
}

/* ------------------------------------------------------------
   FILTRES A SELECTION MULTIPLE

   Un bouton qui reprend l'apparence d'une liste deroulante (.zu-select), et
   un panneau de cases a cocher qui s'ouvre par-dessus le reste de la page.
   ------------------------------------------------------------ */

.er-multi {
    position: relative;
}

.er-multi__bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.er-multi__libelle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.er-multi__fleche {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: .65;
}

/* Un filtre actif doit se distinguer au premier coup d'oeil : sinon on croit
   consulter la liste entiere alors qu'elle est restreinte. */
.er-multi--actif .er-multi__bouton {
    border-color: var(--zu-primaire, #2563EB);
    color: var(--zu-primaire, #2563EB);
    font-weight: 600;
}

.er-multi__panneau {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 10px;
    background: var(--zu-surface, #fff);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .13);
}

.er-multi__panneau[hidden] { display: none; }

.er-multi__ligne {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 13.5px;
    white-space: nowrap;
    cursor: pointer;
}

.er-multi__ligne:hover { background: var(--zu-primaire-clair, #EFF6FF); }

.er-multi__ligne input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.er-multi__vider {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 7px 9px;
    border: 0;
    border-top: 1px solid var(--zu-bordure, #E6EEFC);
    background: transparent;
    font-size: 12.5px;
    color: var(--zu-texte-doux, #6B7280);
    text-align: left;
    cursor: pointer;
}

.er-multi__vider:hover { color: var(--zu-primaire, #2563EB); }

/* ------------------------------------------------------------
   CHOIX DES COLONNES A IMPRIMER
   ------------------------------------------------------------ */

.er-colonnes {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .5);
}

.er-colonnes[hidden] { display: none; }

.er-colonnes__boite {
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 22px;
    border-radius: 14px;
    background: var(--zu-surface, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}

.er-colonnes__titre {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--zu-titre, #1F2937);
}

.er-colonnes__aide {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--zu-texte-doux, #6B7280);
}

/* Deux colonnes : la liste compte une quinzaine d'entrees, empilees elle
   obligerait a faire defiler pour voir ce qui est coche. */
.er-colonnes__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
}

.er-colonnes__ligne {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 13.5px;
    cursor: pointer;
}

.er-colonnes__ligne:hover { background: var(--zu-primaire-clair, #EFF6FF); }

.er-colonnes__ligne input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.er-colonnes__pied {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--zu-bordure, #E6EEFC);
}

.er-colonnes__espace { flex: 1 1 auto; }

@media (max-width: 560px) {
    .er-colonnes__liste { grid-template-columns: 1fr; }
    .er-colonnes__pied .zu-btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------
   PROGRESSION DE L'ARCHIVE ZIP
   ------------------------------------------------------------ */

.er-zip {
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 10px;
    background: var(--zu-primaire-clair, #EFF6FF);
}

.er-zip[hidden] { display: none; }

.er-zip__ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 9px;
}

.er-zip__titre {
    font-size: 13.5px;
    color: var(--zu-titre, #1F2937);
}

.er-zip__compte {
    flex: 1 1 auto;
    font-size: 12.5px;
    color: var(--zu-texte-doux, #6B7280);
    font-variant-numeric: tabular-nums;
}

.er-zip__barre {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(37, 99, 235, .18);
}

.er-zip__barre-remplie {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--zu-primaire, #2563EB);
    transition: width .25s ease;
}

/* Liens de telechargement, un par partie quand la selection a du etre
   repartie sur plusieurs archives. */
.er-zip__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.er-zip__liens[hidden] { display: none; }

.er-zip__aide {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--zu-texte-doux, #6B7280);
}

/* ------------------------------------------------------------
   BARRE DE SELECTION

   Porte la case « tout selectionner », qui se trouvait auparavant dans le
   <th> d'entete du tableau ou elle n'etait jamais visible : la regle
   « #easyrecrute-candidates-table thead th { display: none; } » s'applique a
   toutes les largeurs d'ecran, l'entete ayant ete transforme en simple barre
   de tri. Cette barre-ci ne depend d'aucune regle d'entete.
   ------------------------------------------------------------ */

.zu-selection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 10px;
    padding: 9px 13px;
    border: 1px solid var(--zu-bordure, #E6EEFC);
    border-radius: 10px;
    background: var(--zu-surface, #fff);
}

.zu-selection__tout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--zu-titre, #1F2937);
    cursor: pointer;
    white-space: nowrap;
}

.zu-selection__tout input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.zu-selection__aide {
    font-size: 12.5px;
    color: var(--zu-texte-doux, #6B7280);
}

@media (max-width: 700px) {
    /* Sur un ecran etroit, l'aide passerait a la ligne et repousserait le
       tableau : la case seule suffit, son libelle est explicite. */
    .zu-selection__aide { display: none; }
}

/* Colonne de case a cocher : juste assez large pour la case, jamais pour un
   libelle qui n'existe pas. */
.zu-th-case {
    width: 34px;
    text-align: center;
    padding-left: 12px !important;
    padding-right: 4px !important;
}
.zu-th-case input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

@media (max-width: 860px) {
    .zu-bulk-bar { flex-direction: column; align-items: stretch; }
    .zu-bulk-bar__champ,
    .zu-bulk-bar__champ select { width: 100%; }
    .zu-bulk-bar__separateur { display: none; }

    /* Les lignes deviennent des cartes empilees (voir plus haut dans ce
       fichier) : la case rejoint le coin de la carte plutot que de garder
       une colonne dediee, qui n'a plus de sens hors tableau. */
    #easyrecrute-candidates-table tbody tr { position: relative; }
    #easyrecrute-candidates-table td.zu-th-case {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0 !important;
    }
}