/* JSHS : état des vols HELIOS sur les barres du planning (option, confirmé, effectué, annulé, sous-traité).
   Le script jshs-etats.js pose la classe et l'attribut data-etat d'après le début du titre (« Option · », « Confirmé · »…).
   Règle : la COULEUR DU PROJET n'est jamais modifiée (fond de la barre intact). L'état se lit par une pastille en haut à droite,
   par un contour (forme) et, pour l'option, par des hachures qui laissent à moitié la couleur du projet. */

/* Pastille d'état commune. Case large : élément .jshs-badge dans la 1re ligne (ligne flex, texte tronqué par …, jamais recouvert) ;
   case réduite (sans ligne) : pseudo-élément absolu en haut à droite (texte dans data-etat). */
.jshs-etat::after,
.jshs-badge {
    padding: 0 5px;
    border-radius: 99px;
    font: 800 7.5px/12px "Segoe UI", Arial, sans-serif;
    letter-spacing: .05em;
    text-decoration: none !important;
    font-style: normal !important;
    pointer-events: none;
    background: rgba(255, 255, 255, .26);
    color: #fff;
}
.jshs-etat::after {
    content: attr(data-etat);
    position: absolute;
    top: 1px;
    right: 3px;
}
.jshs-etat-row::after { display: none; }
.jshs-etat:has(> .jshs-warn):not(.jshs-etat-row)::after { right: 20px; }

/* 1re ligne d'une case large : texte tronqué + pastille ; place réservée à l'icône d'avertissement quand elle est là */
.jshs-l1row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.jshs-l1 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jshs-badge { flex: none; }
div[id^="c_"]:has(> .jshs-warn) > .jshs-l1row { padding-right: 20px; }

/* Le gras / souligné / italique d'un statut SOPlanning ne s'ajoute plus à l'effet : l'état se lit par la forme et la pastille */
.jshs-etat { text-decoration: none !important; font-weight: normal !important; font-style: normal !important; }

/* Les contours sont dessinés À L'EXTÉRIEUR de la barre (outline sans décalage) : ils ne recouvrent jamais le texte */
.jshs-etat-opt, .jshs-etat-conf, .jshs-etat-done, .jshs-etat-abort, .jshs-etat-sub { outline-width: 2px; outline-offset: 0; }

/* Option : une rayure sur deux est la couleur du projet, l'autre est éclaircie ; contour en pointillés ; texte en italique */
.jshs-etat-opt {
    background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, .38) 7px 14px) !important;
    outline-style: dashed;
    outline-color: rgba(27, 43, 54, .7);
    font-style: italic !important;
}
.jshs-etat-opt * { font-style: italic; }
.jshs-etat-opt::after, .jshs-etat-opt .jshs-badge { background: #546e7a; color: #fff; }

/* Confirmé : barre pleine entourée d'un contour jaune */
.jshs-etat-conf { outline-style: solid; outline-color: #f4d000; }
.jshs-etat-conf::after, .jshs-etat-conf .jshs-badge { background: #f4d000; color: #1b2b36; }

/* Effectué : couleur du projet intacte, contour sombre et pastille verte avec coche */
.jshs-etat-done { outline-style: solid; outline-color: rgba(0, 0, 0, .7); }
.jshs-etat-done::after, .jshs-etat-done .jshs-badge { background: #2fbe4a; color: #0b2e16; }

/* Annulé : couleur du projet intacte, texte barré (sauf la pastille), contour rouge, pastille rouge */
.jshs-etat-abort { outline-style: solid; outline-color: #ff4d4d; }
.jshs-etat-abort:not(.jshs-etat-row), .jshs-etat-abort:not(.jshs-etat-row) * { text-decoration: line-through !important; }
.jshs-etat-abort .jshs-l1, .jshs-etat-abort .largeCode, .jshs-etat-abort .cellLigneHeureEtCharge { text-decoration: line-through !important; }
.jshs-etat-abort::after, .jshs-etat-abort .jshs-badge { background: #c62828; color: #fff; }

/* Sous-traité : contour violet */
.jshs-etat-sub { outline-style: solid; outline-color: #7e57c2; }
.jshs-etat-sub::after, .jshs-etat-sub .jshs-badge { background: #7e57c2; color: #fff; }