/* ===========================================================================
   ÉCRAN CUMUL DES HEURES (/app/cumul-heures)
   Maquette « Cumul des heures » (docs/modeles/design_handoff_cumul_heures),
   reprise le 2026-10-01.

   SA PROPRE FEUILLE, SON PROPRE PRÉFIXE (.cu-*) : ecran-rapports-heures.css (.rh-*) est
   partagé avec la feuille de présence et les trois pilotages RH, et rien ici ne doit les
   déplacer. Les menus déroulants (.rh-pop*) restent ceux de la feuille partagée ; la bande
   de contexte est PanneauGenerationHeures en mode EnBande, dessinée ici.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.
   =========================================================================== */

.cu-corps { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* --- Boutons de l'en-tête et de la bande : 44 px partout -------------------- */
.cu-outils { flex-wrap: wrap; }
.cu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 14px;
    background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink); cursor: pointer; white-space: nowrap;
}
.cu-btn:hover { background: var(--et-rang); }
.cu-btn[aria-expanded="true"] { border-color: var(--et-form-blue); }
.cu-btn-plein { width: 100%; }
.cu-compte { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); }
.cu-cta { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.cu-pop { width: 262px; z-index: 30; }
.cu-pop-droite { right: 0; left: auto; }
.cu-pop-item { min-height: 44px; }

/* --- Bande de contexte : génération, fenêtre, périmètre, rupture ---------- */
.cu-contexte {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    padding: 14px 16px; background: var(--et-surface); border: 1px solid var(--et-hairline);
}
.cu-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.cu-champ.est-gen { flex: 0 1 300px; }
.cu-champ.est-date { flex: 0 0 160px; }
.cu-lbl { font-size: 12px; font-weight: 600; color: var(--et-muted); }
.cu-saisie {
    width: 100%; min-height: 44px; padding: 0 12px;
    background: var(--et-surface); border: 1px solid var(--et-bord-champ); border-radius: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink);
}
.cu-champ.est-date .cu-saisie { font-family: var(--et-font-mono); font-weight: 500; }
.cu-seg { display: flex; margin-left: auto; }
.cu-seg > button {
    min-height: 44px; padding: 0 14px; margin-left: -1px;
    background: var(--et-surface); border: 1px solid var(--et-form-border); border-radius: 0;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--et-ink); cursor: pointer; white-space: nowrap;
}
.cu-seg > button:first-child { margin-left: 0; }
.cu-seg > button.est-actif { position: relative; background: var(--et-table-head); border-color: var(--et-table-head); color: var(--et-sur-ardoise-plein); }
.cu-perimetre {
    flex: 1 1 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
    padding-top: 12px; border-top: 1px solid var(--et-hairline);
}

/* --- Cartes ------------------------------------------------------------- */
.cu-carte { min-width: 0; background: var(--et-surface); border: 1px solid var(--et-hairline); }
.cu-carte-tete {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
    padding: 12px 16px; border-bottom: 1px solid var(--et-hairline);
}
.cu-carte-titre { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--et-ink); }
.cu-carte-meta { font-size: 13px; color: var(--et-muted); }

/* --- Table du cumul ------------------------------------------------------ */
.cu-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cu-table thead th {
    padding: var(--et-cellule-tete-y) 12px; background: var(--et-table-head); color: var(--et-sur-ardoise-plein);
    font-weight: 600; text-align: left; white-space: nowrap;
}
.cu-table thead th:first-child { padding-left: 16px; }
.cu-table .num { text-align: right; }
.cu-table tbody td {
    padding: var(--et-cellule-y) 12px; border-top: 1px solid var(--et-hairline); color: var(--et-ink); vertical-align: middle;
}
.cu-table tbody td:first-child { padding-left: 16px; }
.cu-table tbody tr:hover > td { background: var(--et-rang); }
.cu-table td.num { font-family: var(--et-font-mono); font-weight: 500; white-space: nowrap; }
.cu-table td.est-fort { font-weight: 700; }
.cu-table td.est-tiret { color: var(--et-muted); }
.cu-table td.est-neg { color: var(--et-danger-ink); }
.cu-table td.est-pos { color: var(--et-avertissement-ink); }
.cu-qui > strong { display: block; font-size: 14px; }
.cu-sous { display: block; font-size: 12px; color: var(--et-muted); }
.cu-code { font-family: var(--et-font-mono); font-weight: 600; color: var(--et-form-blue-d); }
/* Rangée critique : il manque plus de la moitié du dû. Fond pâle et barre à gauche ; l'encre
   reste celle du texte. */
.cu-table tbody tr.est-critique > td { background: var(--et-danger-badge-bg); }
.cu-table tbody tr.est-critique > td:first-child { box-shadow: inset 3px 0 0 var(--et-danger); }

/* Une semaine : un en-tête repliable qui porte ses payées et son écart. */
.cu-semaine > th { padding: 0; border-top: 1px solid var(--et-form-border); background: var(--et-surface-3); }
.cu-semaine button {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 16px;
    border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--et-ink); text-align: left; cursor: pointer;
}
.cu-semaine button:hover { background: var(--et-rang); }
.cu-semaine strong { flex: 1 1 auto; }
.cu-semaine .bi { transition: transform .15s; }
.cu-semaine .bi.est-ouvert { transform: rotate(90deg); }
.cu-semaine-total { font-family: var(--et-font-mono); font-weight: 600; white-space: nowrap; }

.cu-total {
    display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px;
    padding: 12px 16px; border-top: 2px solid var(--et-table-head); background: var(--et-surface-2); font-size: 13px;
}
.cu-total > span { font-family: var(--et-font-mono); font-weight: 700; }
.cu-methode { margin: 0; padding: 10px 16px 14px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }

/* Le libellé de colonne porté DANS la cellule : caché sur bureau, où l'en-tête le dit ;
   affiché en carte, sous 1024 px. Écrit en texte et non en ::before, pour qu'un lecteur
   d'écran le lise. */
.cu-lib-carte { display: none; }

/* --- Anomalies ----------------------------------------------------------- */
.cu-ano {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
    padding: 12px 16px; border-top: 1px solid var(--et-hairline);
}
.cu-carte-tete + .cu-ano { border-top: 0; }
.cu-ano-date { flex: none; font-family: var(--et-font-mono); font-size: 13px; color: var(--et-muted); }
.cu-ano-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; font-size: 13px; color: var(--et-muted); }
.cu-ano-txt > strong { font-size: 14px; color: var(--et-ink); }

/* --- Paliers : 1024 (cartes), 640 (téléphone) ------------ */
@media (max-width: 1024px) {
    .cu-champ.est-gen { flex: 1 1 100%; }
    .cu-seg { flex: 1 1 100%; margin-left: 0; }
    .cu-perimetre { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* La table en cartes : le salarié en titre, ses heures en paires libellé / valeur,
       quatre par rang. Une table qui défile en largeur cachait des colonnes sans le dire. */
    .cu-table, .cu-table tbody { display: block; width: 100%; }
    .cu-table thead { display: none; }
    .cu-table tbody tr:not(.cu-semaine) {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px;
        padding: 12px; border-top: 1px solid var(--et-hairline);
    }
    .cu-table tbody tr.cu-semaine, .cu-table tbody tr.cu-semaine > th { display: block; }
    .cu-table tbody td { display: block; padding: 0 !important; border: 0; text-align: left; background: transparent !important; }
    .cu-table tbody td.cu-qui { grid-column: 1 / -1; }
    .cu-table tbody td.num { text-align: left; }
    .cu-table tbody td.cu-svc { display: none; }
    .cu-table tbody td.est-tiret { display: none; }
    .cu-table tbody tr:hover > td { background: transparent; }
    .cu-table tbody tr.est-critique { background: var(--et-danger-badge-bg); box-shadow: inset 3px 0 0 var(--et-danger); }
    .cu-table tbody tr.est-critique > td:first-child { box-shadow: none; }
    .cu-lib-carte {
        display: block; font-family: var(--et-font); font-size: 12px; font-weight: 600; color: var(--et-muted);
    }
}

@media (max-width: 640px) {
    .cu-outils { width: 100%; }
    .cu-outils > .rh-pop-hote { flex: 1 1 auto; }
    .cu-outils .cu-btn, .cu-outils .cu-cta { width: 100%; justify-content: center; }
    .cu-champ.est-date { flex: 1 1 40%; }
    .cu-contexte > .cu-btn-perimetre { flex: 1 1 100%; }
    .cu-seg > button { flex: 1 1 50%; }
    .cu-perimetre { grid-template-columns: minmax(0, 1fr); }
    .cu-table tbody tr:not(.cu-semaine) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cu-semaine button { flex-wrap: wrap; }
}