/**
 * Tableau de bord EasyOffer : [easyoffer_candidatures].
 *
 * Le balisage reprend les classes du systeme de design (zonemploi-ui.css) et
 * d'EasyRecrute (easyrecrute-admin.css). Une partie des regles EasyRecrute
 * est toutefois reservee a ses propres conteneurs (.easyrecrute-candidates-wrap,
 * .easyrecrute-controls, #easyrecrute-candidates-table) : on les transpose ici
 * pour .easyoffer-dashboard, sans reprendre ces noms — easyrecrute-admin.js
 * s'y accroche et piloterait ce tableau avec ses propres requetes.
 *
 * Chargee apres zonemploi-ui.css et easyrecrute-admin.css (voir la
 * declaration des dependances dans easyoffer.php).
 */

/* ============================================================
   CONTENEUR
   ============================================================
   Sept colonnes (soumissionnaire, contact, montant, score, statut, date,
   actions) : on sort du gabarit etroit d'Elementor, comme le fait le tableau
   EasyRecrute, sans jamais deborder de l'ecran. */

.zu-app.easyoffer-dashboard {
    position: relative;
    max-width: min(1720px, calc(100vw - 48px));
    width: min(1720px, calc(100vw - 48px));
    margin-left: 50%;
    transform: translateX(-50%);
    min-width: 0;
}

@media (max-width: 1024px) {
    .zu-app.easyoffer-dashboard {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        transform: none;
    }
}

.easyoffer-dashboard.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    z-index: 5;
}

/* ============================================================
   BARRE D'OUTILS
   ============================================================
   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. */

.easyoffer-controls #easyoffer-search { flex: 1 1 260px; min-width: 0; }

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

/* Les criteres occupent leur propre ligne, avant les boutons d'action. */
.easyoffer-controls .er-filtres-criteres { flex: 1 1 100%; }

/* Deux rangees d'actions (export… puis action groupee) : la seconde ne
   doit pas se coller a la premiere. */
.easyoffer-controls .zu-outils__droite + .zu-outils__droite {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 0;
}
/* reset.css du theme donne width:100% a tout <select> : celui-ci prendrait
   toute la rangee et rejetterait « Appliquer » a la ligne. */
.easyoffer-controls #easyoffer-bulk-status { width: auto; flex: 0 1 260px; min-width: 0; }

@media (max-width: 900px) {
    /* En colonne, la base flex posee plus haut (260px, 480px) deviendrait une
       HAUTEUR : on la remet a auto. */
    .easyoffer-controls { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .easyoffer-controls #easyoffer-search { width: 100%; flex: 0 0 auto; }
    .easyoffer-controls .er-filtres { flex: 0 0 auto; }
    .easyoffer-controls .zu-outils__droite,
    .easyoffer-controls .zu-outils__droite + .zu-outils__droite { justify-content: flex-start; flex-wrap: wrap; }
    .easyoffer-controls #easyoffer-bulk-status { flex: 1 1 auto; }
}

@media (max-width: 860px) {
    .easyoffer-controls .zu-outils__droite { justify-content: flex-start; }
    .easyoffer-controls #easyoffer-bulk-status { flex: 1 1 100%; }
}

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

@media (max-width: 420px) {
    .easyoffer-controls .er-filtres { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLEAU
   ============================================================ */

.easyoffer-dashboard .zu-carte { overflow: hidden; }

/* reset.css du theme, chargee APRES la notre, encadre chaque cellule
   (table td, table th : bordure sur les quatre cotes) et zebre les lignes en
   peignant les CELLULES (tbody > tr:nth-child(odd) > td, 0,1,3) — alors que le
   systeme de design ne pose que la bordure basse et met le fond de survol sur
   la LIGNE. Aucune regle ne l'emportait sur l'autre, elles ne visaient pas le
   meme element : d'ou la grille grise du theme par-dessus notre tableau. On
   neutralise au niveau de la cellule, avec une specificite superieure (0,2,3). */
.easyoffer-dashboard .easyoffer-table thead > tr > th,
.easyoffer-dashboard .easyoffer-table tbody > tr > td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background-color: transparent;
}
.easyoffer-dashboard .easyoffer-table tbody > tr:nth-child(odd) > td,
.easyoffer-dashboard .easyoffer-table tbody > tr:nth-child(even) > td,
.easyoffer-dashboard .easyoffer-table tbody > tr:hover > td {
    background-color: transparent;
}
.easyoffer-dashboard .easyoffer-table thead > tr > th { background-color: var(--zu-fond); }
.easyoffer-dashboard .easyoffer-table { margin-block-end: 0; font-size: 14px; }

.easyoffer-table thead th[data-sort] { cursor: pointer; user-select: none; }
.easyoffer-table thead th[data-sort]:hover { color: var(--zu-primaire); }

.easyoffer-table tbody td { vertical-align: top; }
.easyoffer-table tbody td[data-label="Score"],
.easyoffer-table tbody td[data-label="Date"] { white-space: nowrap; }

.easyoffer-table .er-score {
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    color: var(--zu-noir);
    white-space: nowrap;
}
.easyoffer-table .er-score-total {
    font-size: 12px;
    font-weight: 600;
    color: var(--zu-texte-doux);
}
.easyoffer-table .er-categorie { margin-top: 6px; }

/* Les liens de contact prennent la couleur du systeme, sans le soulignement
   du theme. La colonne garde assez de place pour un email entier : coupe au
   milieu d'une adresse, elle devenait illisible et impossible a copier. */
.easyoffer-table td[data-label="Contact"] { min-width: 210px; }
.easyoffer-table td[data-label="Contact"] a {
    color: var(--zu-primaire);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.easyoffer-table td[data-label="Contact"] a:hover { text-decoration: underline; }

/* Actions : les boutons puis les deux listes (statut, categorie), empiles. */
.easyoffer-table td[data-label="Actions"] { min-width: 190px; }
.easyoffer-table .er-actions-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.easyoffer-table .er-actions-groupe > div { flex: 1 1 100%; }
.easyoffer-table .er-statut-groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.easyoffer-table .er-statut-groupe .zu-select {
    width: 100%;
    min-width: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
}

/* Etat vide et message de chargement : une cellule sur toute la largeur. */
.easyoffer-table tbody td[colspan] {
    text-align: center;
    color: var(--zu-texte-doux);
    padding: 28px 16px;
}

/* En dessous de 860px, zonemploi-ui.css empile chaque ligne en fiche et
   affiche data-libelle devant chaque cellule : la carte qui entoure le
   tableau n'a plus d'objet (chaque fiche en est une), et la colonne de case
   a cocher n'a plus de sens, la case rejoint le coin de la fiche. */
@media (max-width: 860px) {
    .easyoffer-dashboard .zu-carte:has(> .easyoffer-table) {
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }
    .easyoffer-dashboard .easyoffer-table tbody > tr,
    .easyoffer-dashboard .easyoffer-table tbody > tr:hover { background: var(--zu-surface); }
    .easyoffer-table tbody tr { position: relative; }
    .easyoffer-table tbody td.zu-th-case {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0 !important;
    }
    .easyoffer-table tbody td.zu-th-case::before { display: none; }
    .easyoffer-table tbody td[data-label="Score"],
    .easyoffer-table tbody td[data-label="Date"] { white-space: normal; }
    .easyoffer-table td[data-label="Actions"] { min-width: 0; }
    .easyoffer-table .er-statut-groupe { width: 100%; }
}

/* ============================================================
   BLOCS ANNEXES (import, notifications)
   ============================================================ */

.easyoffer-dashboard .easyoffer-bloc { padding: 16px 18px; margin-top: 14px; }
.easyoffer-dashboard .easyoffer-bloc__titre {
    font-size: 16px;
    font-weight: 600;
    color: var(--zu-noir);
    margin: 0 0 6px;
}
.easyoffer-dashboard .easyoffer-bloc .zu-meta { margin: 0 0 10px; font-size: 13.5px; }
.easyoffer-dashboard .easyoffer-bloc__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
.easyoffer-dashboard .easyoffer-bloc__etat { font-weight: 600; }
.easyoffer-dashboard .easyoffer-note { margin: 10px 0 0; }

/* ============================================================
   MODALE « VOIR LE DOSSIER »
   ============================================================ */

.easyoffer-modale {
    position: fixed;
    inset: 0;
    z-index: 100050;
    background: rgba(15, 23, 42, .55);
    padding: 24px;
    overflow: auto;
}
/* La boite porte zu-app (variables, boutons) : on neutralise ce que .zu-app
   pose en tant que conteneur de page (largeur, marges, marges internes). */
.easyoffer-modale__boite,
.easyoffer-modale__boite.zu-app {
    position: relative;
    width: auto;
    max-width: 760px;
    margin: 4vh auto;
    background: var(--zu-surface, #fff);
    border-radius: var(--zu-rayon, 14px);
    padding: 22px;
    box-shadow: var(--zu-ombre-lg, 0 18px 50px rgba(16, 24, 40, .16));
    transform: none;
}
.easyoffer-modale__fermer {
    position: absolute;
    top: 12px;
    right: 12px;
}
.easyoffer-dossier h3 { margin: 0 40px 10px 0; font-size: 18px; }
.easyoffer-dossier h4 { margin: 16px 0 6px; font-size: 14.5px; }
.easyoffer-dossier ul { margin: 0 0 0 18px; padding: 0; }

@media (max-width: 600px) {
    .easyoffer-modale { padding: 10px; }
    .easyoffer-modale__boite.zu-app { padding: 18px 14px; margin: 2vh auto; }
}