/* ==========================================================================
   TAS SAISONNIERS — surcouche Aurore
   À charger APRÈS charte-graphique.css et APRÈS styles.css (Tailwind pré-compilé).
   --------------------------------------------------------------------------
   Ce fichier ne contient QUE ce qui est propre au TAS :
     · la coquille d'application à rail vertical
     · les garde-fous de performance sur les tirages longs
     · le repli mobile du rail
     · la cohabitation avec le Tailwind pré-purgé

   Rien ici ne dépend de lib.js ni de app.js. Aucune classe Tailwind nouvelle
   n'est introduite : tout passe par des classes nommées de la charte.
   ========================================================================== */

/* ==========================================================================
   1. COQUILLE
   Le défilement a lieu sur le body. La nappe de fond est en position fixe,
   elle ne bouge donc jamais ; le rail et la barre sont collants.
   ========================================================================== */
.tas-app {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
}

.tas-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: var(--z-rail);
}

.tas-zone {
  flex: 1;
  min-width: 0;            /* sans quoi un tableau large fait déborder le flex */
  display: flex;
  flex-direction: column;
}

.tas-barre {
  position: sticky;
  top: 0;
  z-index: var(--z-barre);
}

.tas-contenu {
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

/* ==========================================================================
   2. GARDE-FOUS DE PERFORMANCE
   Un tirage peut dépasser 1 200 lignes. Aucune surface de données ne doit
   être floutée : le flou force un recalcul à chaque image au défilement.
   ========================================================================== */
.tas-contenu .tableau-enveloppe,
.tas-contenu .kpi,
.tas-contenu .carte,
.tas-contenu .accordeon {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fond-surface);
}

/* Le thead collant reste opaque, sinon il laisse traîner les lignes dessous */
.tas-contenu .tableau thead th { background: var(--fond-surface-2); }

/* Au-delà de ~400 lignes, la barre et le rail perdent le flou : gain net de
   fluidité sur les postes sans accélération matérielle. Poser la classe sur
   .tas-app depuis app.js quand le nombre de lignes affichées le justifie. */
.tas-app.sans-flou .rail,
.tas-app.sans-flou .barre,
.tas-app.sans-flou .voile {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--fond-surface);
}

/* ==========================================================================
   3. RACINE DE PORTAIL
   backdrop-filter crée un bloc conteneur : toute modale ou tout menu rendu
   à l'intérieur du rail ou de la barre se positionnerait par rapport à eux.
   Les portails sont montés ici, à la racine du body, hors de toute surface
   floutée.
   ========================================================================== */
#portail-modales,
#portail-menus {
  position: relative;
  z-index: var(--z-modale);
}
#portail-menus { z-index: var(--z-menu); }

/* ==========================================================================
   4. REPLI MOBILE ET ÉCRANS ÉTROITS
   En dessous de 960 px le rail passe en tiroir. La classe .ouvert est posée
   par app.js sur .tas-app.
   ========================================================================== */
.tas-bascule-rail { display: none; }

@media (max-width: 960px) {
  .tas-bascule-rail { display: inline-flex; }

  .tas-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--transition);
    box-shadow: var(--ombre-lg);
  }
  .tas-app.rail-ouvert .tas-rail { transform: translateX(0); }

  .tas-app.rail-ouvert::after {
    content: '';
    position: fixed; inset: 0;
    z-index: calc(var(--z-rail) - 1);
    background: rgba(20, 23, 28, .40);
  }

  .tas-contenu { padding: var(--e-4); gap: var(--e-4); }
}

/* ==========================================================================
   5. COHABITATION AVEC LE TAILWIND PRÉ-PURGÉ
   Le bundle Tailwind est figé : on ne peut pas ajouter d'utilitaire, et les
   utilitaires déjà présents (bg-white, border-gray-200, rounded-lg, text-sm…)
   restent appliqués sur le balisage existant. Les règles ci-dessous ne font
   que neutraliser les fonds et bordures en dur sur les éléments qui reçoivent
   une classe de la charte, pour éviter le double habillage.

   Elles sont volontairement limitées aux cas rencontrés dans le TAS. Toute
   autre collision se règle en RETIRANT l'utilitaire Tailwind du balisage,
   jamais en ajoutant un !important supplémentaire ici.
   ========================================================================== */
.carte.bg-white,
.kpi.bg-white,
.tableau-enveloppe.bg-white,
.modale.bg-white { background: var(--fond-surface) !important; }

.rail.bg-white,
.barre.bg-white { background: var(--voile) !important; }

.btn.rounded,
.btn.rounded-md,
.btn.rounded-lg { border-radius: var(--r-md) !important; }

.pastille.rounded-full { border-radius: var(--r-sm) !important; }

/* ==========================================================================
   6. DÉTAILS PROPRES AU TAS
   ========================================================================== */

/* Accordéon de suivi ETP par service : le compte reste aligné à droite même
   quand le libellé de service est long (référentiel SIRH, 598 unités). */
.tas-contenu .accordeon > summary { gap: var(--e-2); }
.tas-contenu .accordeon > summary .libelle-service {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Ligne de candidat désisté : atténuée sans perdre la lisibilité (4,9:1) */
.tas-contenu .tableau tbody tr.desiste td { color: var(--texte-tertiaire); }
.tas-contenu .tableau tbody tr.desiste td:first-child { font-weight: var(--gras-normal); text-decoration: line-through; text-decoration-color: var(--danger); }

/* Personne externe au référentiel : liseré pervenche, pas de rouge */
.tas-contenu .tableau tbody tr.externe td:first-child { box-shadow: inset var(--filet-epaisseur) 0 0 var(--perv-400); }

/* Dépassement d'enveloppe ETP */
.tas-contenu .kpi.depassement .kpi-valeur { color: var(--danger); }

/* ==========================================================================
   7. COLONNE SERVICE FIGÉE (page Besoins)
   La cellule figée doit rester opaque : elle recouvre les colonnes qui
   défilent sous elle. Sa couleur ne peut donc pas être « transparente ».
   On fait porter la teinte par la LIGNE, via une variable dont la cellule
   figée hérite : les deux restent alors toujours de la même couleur, au
   repos comme au survol, quelle que soit la nature de la ligne.
   ========================================================================== */
.tas-contenu .tableau tbody tr,
.tableau tbody tr { --ligne-fond: var(--fond-surface); }
.tableau tbody tr.ligne-multi   { --ligne-fond: var(--info-fond); }
.tableau tbody tr.ligne-horstas { --ligne-fond: var(--alerte-fond); }
.tableau tbody tr.ligne-fort    { --ligne-fond: var(--danger-fond); }
.tableau tbody tr:hover         { --ligne-fond: var(--fond-survol); }

.tableau tbody td { background: var(--ligne-fond); }

.tableau tbody td.tas-col-service,
.tas-col-service {
  /* La teinte de ligne peut être semi-transparente (thème sombre) : on la
     superpose à une base opaque, sinon les colonnes défilent visiblement
     sous la cellule figée. */
  background: linear-gradient(var(--ligne-fond, transparent), var(--ligne-fond, transparent)), var(--fond-surface);
  box-shadow: 2px 0 4px -2px rgba(15, 23, 42, .18);
}
.tableau thead th.tas-col-service,
thead .tas-col-service { background: var(--fond-surface-2); }

/* ==========================================================================
   8. THÈME SOMBRE — neutralisation des couleurs Tailwind en dur
   Le balisage conserve des utilitaires clairs (bg-white, text-slate-800…)
   que le thème sombre doit pouvoir couvrir tant que le ré-habillage n'est
   pas achevé. Rien ici ne s'applique en thème clair.
   ========================================================================== */
[data-theme="sombre"] .bg-white { background: var(--fond-surface) !important; }
[data-theme="sombre"] .bg-slate-50,
[data-theme="sombre"] .bg-gray-50 { background: var(--fond-surface-2) !important; }
[data-theme="sombre"] .bg-slate-100 { background: var(--fond-surface-3) !important; }


/* --- Fonds teintés en dur : en thème sombre, on remappe le fond ET le texte.
   Sans la couleur de texte, celui-ci hérite du clair et devient illisible
   sur un aplat resté pâle (cas des encadrés de modèles de contrat). ------- */
[data-theme="sombre"] .bg-emerald-50,
[data-theme="sombre"] .bg-emerald-100 { background: var(--succes-fond) !important; color: var(--succes) !important; }
[data-theme="sombre"] .bg-red-50,
[data-theme="sombre"] .bg-red-100,
[data-theme="sombre"] .bg-red-50\/30,
[data-theme="sombre"] .bg-red-50\/40 { background: var(--danger-fond) !important; color: var(--danger) !important; }
[data-theme="sombre"] .bg-amber-50,
[data-theme="sombre"] .bg-amber-100,
[data-theme="sombre"] .bg-amber-50\/50 { background: var(--alerte-fond) !important; color: var(--alerte) !important; }
[data-theme="sombre"] .bg-blue-50,
[data-theme="sombre"] .bg-blue-100,
[data-theme="sombre"] .bg-blue-50\/30 { background: var(--info-fond) !important; color: var(--info) !important; }
[data-theme="sombre"] .bg-purple-50,
[data-theme="sombre"] .bg-purple-100,
[data-theme="sombre"] .bg-pink-50,
[data-theme="sombre"] .bg-pink-100,
[data-theme="sombre"] .bg-purple-50\/50,
[data-theme="sombre"] .bg-purple-50\/30,
[data-theme="sombre"] .bg-pink-50\/50 { background: var(--marque-fond) !important; color: var(--marque-texte) !important; }

/* Textes teintés en dur : versions claires lisibles sur fond sombre */
[data-theme="sombre"] .text-emerald-600,
[data-theme="sombre"] .text-emerald-700 { color: var(--succes) !important; }
[data-theme="sombre"] .text-red-500,
[data-theme="sombre"] .text-red-600,
[data-theme="sombre"] .text-red-800,
[data-theme="sombre"] .text-red-900 { color: var(--danger) !important; }
[data-theme="sombre"] .text-amber-600,
[data-theme="sombre"] .text-amber-700 { color: var(--alerte) !important; }
[data-theme="sombre"] .text-blue-600,
[data-theme="sombre"] .text-blue-700 { color: var(--info) !important; }
[data-theme="sombre"] .text-purple-600,
[data-theme="sombre"] .text-pink-600,
[data-theme="sombre"] .text-pink-700 { color: var(--marque-texte) !important; }

[data-theme="sombre"] .text-slate-800,
[data-theme="sombre"] .text-slate-700,
[data-theme="sombre"] .text-gray-800 { color: var(--texte-primaire) !important; }
[data-theme="sombre"] .text-slate-600,
[data-theme="sombre"] .text-slate-500 { color: var(--texte-secondaire) !important; }
[data-theme="sombre"] .text-slate-400,
[data-theme="sombre"] .text-slate-300 { color: var(--texte-tertiaire) !important; }

[data-theme="sombre"] .border-slate-200,
[data-theme="sombre"] .border-slate-300,
[data-theme="sombre"] .border-slate-100 { border-color: var(--bordure) !important; }

[data-theme="sombre"] .hover\:bg-slate-50:hover,
[data-theme="sombre"] .hover\:bg-slate-100:hover { background: var(--fond-survol) !important; }

/* Champs de saisie restés en Tailwind */
[data-theme="sombre"] input[type="text"],
[data-theme="sombre"] input[type="date"],
[data-theme="sombre"] input[type="email"],
[data-theme="sombre"] input[type="password"],
[data-theme="sombre"] select,
[data-theme="sombre"] textarea {
  /* background-color et non background : le raccourci effaçait aussi
     l'image de fond, donc le chevron des listes déroulantes de la charte */
  background-color: var(--fond-surface-2);
  color: var(--texte-primaire);
  border-color: var(--bordure);
}

/* Champ en largeur automatique : barres de filtres, où plusieurs contrôles
   se suivent sur une ligne. Le .champ de la charte est en largeur pleine,
   ce qui convient aux formulaires mais empile les filtres. */
.champ-auto { width: auto; }