/*
Ce fichier défini le style qui sera appliqué aux élément HTML de l'application.

NOTE:
La largeur de la grille et de la barre de navigation dans les ordonnées sont fixées dans WP.waplanner.setWidth();

NOTE:
- ne pas oublier l'importance des "Priority level of selector"
http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
http://www.w3.org/TR/CSS21/cascade.html#specificity

Bleu hover: #8FC7E3

couleur onglets #FEFEFE;
*/

/*
----------------
Eléments Globaux
----------------
*/

html {
    margin: 0;
}

body  {
	font-family: Sans-Serif;
    background: #fafafa; /* couleur fond */
    margin: 0;
    min-height: 100vh;
}

@media print {
    .hideInPrint {
        display: none !important;
    }
    #nav_bar_container, #tab_list_bar_menu_container, #main_menu, #planning_grid_header_container {
        display: none;
    }
    body {
        background-color:white;
    }
    #mainscreen, #planning_grid_header_container, #list_screens {
        background-color:white;
    }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
    .grid_line {
        break-inside: avoid !important;
    }
    .planning_header {
        padding: 8px  !important;
        margin-top:-8px !important;
    }
}

@media screen {
    .today
    {
        background-color: #FCF2C8;
    }
    .hideInScreen {
        display: none !important;
    }
}

/*
Font Awesome pose sur .fa-lg un line-height:.05em, pensé pour ne pas grandir
une ligne de texte. Dans nos boutons à hauteur fixe (bouton form des cartes
job, .cell_button des entêtes de ligne), le glyphe sort alors de la boîte par
le haut : on lui rend une métrique compatible avec ces layouts.
*/
.fa-lg {
    line-height: .75em;
}

/*
Écran de login en panneau latéral : colonne formulaire claire à
largeur proportionnelle (~1/3 de l'écran, bornée par un plancher/plafond
en px), l'image du tenant occupe le reste en carte arrondie flottante.
La marge autour de #login_image_pane reprend le fond de la colonne (même
teinte, pas de rupture de couleur), le recadrage de l'image est purement
décoratif (les formats larges en montrent plus), la colonne reste lisible
quel que soit le fond. L'image vient de --login-bg (posée par
WP.login.setBackground), fallback teaping.jpg.
*/
#login_screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    background: #f7f7f5;
}

#login_screen_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 33.333%;
    min-width: 420px; /* plancher : formulaire lisible sur petit/moyen écran */
    max-width: 620px; /* plafond : éviter un formulaire démesuré sur très grand écran */
    box-sizing: border-box;
    padding: 24px 48px;
    overflow-y: auto;
    background: #f7f7f5;
    text-align: center;
}

#login_image_pane {
    flex: 1;
    margin: 12px 12px 12px 0;
    border-radius: 20px;
    overflow: hidden;
    background-image: var(--login-bg, url(../img/teaping.jpg));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* carte flottante : l'ombre portée la détache de la colonne */
    box-shadow: var(--wp-shadow-lg);
}

/* colonne en trois zones : version + langue en tête, logo + message de
   bienvenue + formulaire centrés, lien d'état des services + mode en pied
   (statusLink à gauche, modeSelect à droite, cf login.js) */
#login_screen_top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#login_screen_center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#login_screen_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#login_screen_version {
    font-size: 13px;
    color: var(--wp-text-muted);
}

/* lien vers la page d'état des services, en bas à gauche du pied de colonne
   (couleur/soulignement des liens hérités du thème) ; taille de texte standard
   de l'appli, comme le reste du pied de colonne. inline-flex pour aligner la
   pastille d'état sur le libellé */
#login_screen_status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wp-font-size);
}

/* Pastille d'état de la plateforme (#login_screen_status_dot, peinte par
   WP.login à partir du champ `overall` de /public-status du monitor) : vert
   sain, orange dégradé, rouge interruption, gris état inconnu (monitor
   injoignable, hors ligne). Teintes du thème — identiques à celles de la page
   d'état (monitor/public/status.css) pour l'orange et le rouge, un vert voisin
   pour le sain (--wp-success #16a34a contre --ok #059669 là-bas). */
.wp-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--wp-text-muted);
}

.wp-status-dot--ok {
    background-color: var(--wp-success);
}

.wp-status-dot--degraded {
    background-color: var(--wp-warning);
}

.wp-status-dot--critical {
    background-color: var(--wp-danger);
}

.wp-status-dot--unknown {
    background-color: var(--wp-text-muted);
}

/* logo centré au-dessus du message de bienvenue et du formulaire, aligné sur
   la largeur des champs (WP.login.fieldWidth) */
#login_logo {
    width: 280px;
    margin-bottom: 24px;
}

#login_screen_welcome {
    font-size: 20px;
    font-weight: 600;
    color: var(--wp-text);
    margin-bottom: 24px;
}

/* champs unifiés : bordure alignée sur le token commun, focus couleur marque
   au lieu du bleu navigateur */
#login_screen input,
#login_screen select {
    background: #fff;
    border: 1px solid var(--wp-border);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#login_screen select {
    /* la règle générique .form-control impose min-width: 172px (listes/filtres
       de l'appli) ; l'écran de login veut des selects volontairement courts */
    min-width: 0;
    text-overflow: ellipsis;
}

#login_screen input:focus,
#login_screen select:focus {
    border-color: var(--wp-brand);
    box-shadow: 0 0 0 3px rgba(199, 54, 38, .18); /* --wp-brand à 18 % */
}

/* légère élévation au survol des boutons du formulaire (login/SSO), en plus
   des couleurs .btn-success/.btn-primary déjà posées par theme.css */
#login_screen_center .btn {
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out,
        box-shadow .15s ease, transform .15s ease;
}

#login_screen_center .btn:hover:not(:disabled) {
    box-shadow: var(--wp-shadow-md);
    transform: translateY(-1px);
}

/* bouton de connexion désactivé (identifiant/domaine vides) : 70 % de
   transparence, plus marquée que l'opacité .55 du thème ; l'état
   « connexion en cours » (startFromButton) pose une opacité INLINE .7 qui
   prime sur cette règle */
#login_screen_center .btn[disabled] {
    opacity: .3;
}

/* le bouton porte aussi .form-control (buildInput) : la règle générique
   .form-control[disabled] (thème global, pensée pour les champs de saisie)
   a une spécificité supérieure à .btn-brand/.btn-primary et écraserait leur
   fond par un gris quasi blanc à l'état désactivé — invisible sur la
   colonne claire. On restaure la couleur de la variante pour garder le
   bouton identifiable pendant sa transparence. */
#login_screen_center .btn-brand[disabled] {
    background-color: var(--wp-brand);
}
#login_screen_center .btn-warning[disabled] {
    background-color: var(--wp-warning);
}
#login_screen_center .btn-primary[disabled] {
    background-color: var(--wp-primary);
}

/* le panneau image se replie sur petit écran */
@media (max-width: 700px) {
    #login_image_pane {
        display: none;
    }

    #login_screen_content {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        /* padding resserré : avec 48px de chaque côté, les enfants à largeur
           fixe (280px) débordaient sous 376px de viewport (iPhone SE 1re gén,
           Fold replié) et forçaient un défilement horizontal */
        padding: 24px 16px;
    }

    /* les zones sont en align-items:center donc dimensionnées par leur
       contenu : sans borne ici, le max-width:100% des enfants se résoudrait
       contre elles (donc contre le contenu lui-même) et ne bornerait rien */
    #login_screen_top,
    #login_screen_center,
    #login_screen_bottom {
        max-width: 100%;
    }

    /* les largeurs fixes (logo, champs, boutons — posées en dur ou en style
       inline depuis login.js) se plient à la colonne sur très petit écran */
    #login_logo,
    #login_screen_center > div,
    #login_screen_center .btn,
    #totpDiv .wp-totp-submit {
        max-width: 100%;
    }

    /* min-width primerait sur max-width : on le neutralise ici */
    #totpDiv .wp-totp-submit {
        min-width: 0;
    }
}

/*
Écran TOTP du login (2e facteur) : s'intègre à la colonne comme les
champs classiques (même largeur que fieldsDiv, pas de carte flottante),
à la place des champs de saisie. Construit par setUpTotpScreen
(js/src/login.js), qui pose #totpDiv / #registerDiv / #qrCode et les
classes wp-totp-*.
*/
#totpDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 280px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

#totpDiv p {
    margin: 0;
    color: var(--wp-text-muted);
    font-size: 13px;
}

#registerDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#qrCode {
    width: 160px;
    max-width: 100%;
    margin: 6px 0;
    border: 1px solid var(--wp-border-light);
    border-radius: var(--wp-radius);
    background-color: #fff;
}

/* saisie du code à 6 chiffres : même largeur que les autres champs */
#totpDiv .wp-totp-code {
    width: 100%;
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
}

/* même gabarit que le bouton de login (fieldWidth 280px, hauteur 50px) ;
   min-width car buildInput pose un width:auto inline sur les boutons */
#totpDiv .wp-totp-submit {
    height: 50px;
    min-width: 280px;
    max-width: 100%;
    font-size: 20px;
}

/* Écran de choix du sous-domaine au login (WP.subdomains.buildList, js/src/
   domain/subdomains.js), affiché en overlay par-dessus l'écran de chargement
   (#subdomain_overlay), pas sur l'écran de login : chaque sous-domaine est
   SON PROPRE bouton large (fond, radius, ombre légère).
   Disposés en GRILLE auto-adaptative (peu de colonnes, boutons larges plutôt
   que carrés) plutôt qu'empilés en liste verticale. Le tableau HTML
   (tbody/tr/td) est conservé tel quel — <tr> reste l'élément interactif
   (tabindex, clic, flèches) attendu par les e2e (#subdomain_overlay tr) — seul
   son display est réassigné en item de grille ; <td> s'efface (display: block,
   cf .subdomain-row td) et le style visuel passe sur le <tr> lui-même. */
.subdomain-choose-panel {
    display: inline-block;
    /* Largeur "idéale" pour le nombre de colonnes posée en style inline par
       buildList (js/src/domain/subdomains.js) ; ce max-width reste le filet
       de sécurité mobile (repli en dessous de 767px ci-dessous). */
    max-width: calc(100vw - 40px);
    text-align: center;
}

.subdomain-choose-message {
    margin-bottom: 10px;
    padding: 0 8px;
    color: var(--wp-text);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.subdomain-list-scroll {
    width: 100%;
    /* Grande capacité avant scroll : le conteneur suit la hauteur de la
       fenêtre plutôt qu'un plafond fixe (640px trop court dès qu'un domaine
       a plus d'une poignée de sous-domaines) — overflow-y reste un filet de
       sécurité pour les cas extrêmes, pas le comportement attendu. */
    max-height: calc(100vh - 180px);
    margin: 0 auto;
    /* overflow-y:auto fait de cette boîte un conteneur de défilement qui rogne
       sur TOUS les côtés : sans ce padding, le survol d'une carte (translateY
       de -1px + ombre --wp-shadow-md, cf .subdomain-row:hover) se fait couper,
       de façon très visible sur la première rangée collée au bord haut.
       Padding dissymétrique parce que l'ombre l'est : --wp-shadow-md est
       décalée vers le bas (0 10px 15px -3px, theme.css), donc elle descend de
       10 + 15/2 - 3 = 14,5px sous la carte — moins le 1px de soulèvement —
       alors qu'elle ne dépasse ni en haut ni sur les côtés de plus de
       15/2 - 3 = 4,5px. 16px en bas couvrent la dernière rangée, 12px en haut
       le soulèvement de la première, 6px sur les côtés l'étalement latéral.
       Attention : box-sizing:border-box (Bootstrap) fait que le padding
       latéral retire de la largeur utile — il est compensé dans le calcul
       d'idealWidth (scrollPadding, js/src/domain/subdomains.js buildList) ;
       les paddings verticaux, eux, n'entrent dans aucun calcul. */
    padding: 12px 6px 16px;
    overflow-y: auto;
}

.subdomain-list {
    /* Flex (pas grid) : une grille CSS place toujours les éléments orphelins
       de la DERNIÈRE ligne incomplète alignés à gauche (aucun moyen natif de
       les centrer) — flex-wrap + justify-content:center centre chaque ligne
       indépendamment, orpheline comprise. Le nombre de colonnes "carré"
       (racine carrée du nombre de sous-domaines, buildList) résulte
       simplement de la largeur du conteneur (posée en inline sur le panel)
       divisée par la largeur fixe des boutons ci-dessous — pas besoin de
       colonnes explicites, donc pas de repli responsive séparé non plus :
       une largeur de panel plus étroite (mobile, cf. max-width du panel)
       replie naturellement moins de boutons par ligne. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.subdomain-list tbody {
    display: contents;
}
/* Boutons larges (rangées plutôt que chiclets carrés), libellé centré — la
   largeur (flex-basis) doit rester synchronisée avec columnWidth dans
   buildList (subdomains.js), le calcul de largeur du panel en dépend (tout
   comme le padding de .subdomain-list-scroll ci-dessus, cf scrollPadding). */
.subdomain-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 150px;
    cursor: pointer;
    padding: 14px 16px;
    font-family: var(--wp-font-family);
    font-size: 15px;
    font-weight: 600;
    color: var(--wp-text);
    text-align: center;
    background-color: var(--wp-surface);
    border: 1px solid var(--wp-border-light);
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-sm);
    transition: background-color .15s ease, box-shadow .15s ease,
        color .15s ease, transform .15s ease, border-color .15s ease;
}
/* PAS de display:contents ici : un <td> ainsi effacé laisse son texte comme
   enfant flex anonyme, et cet enfant anonyme ne se centre pas verticalement
   de façon fiable (constaté : align-items:center posé mais texte collé en
   haut dès qu'une ligne voisine plus haute — libellé long passé sur
   plusieurs lignes — étire le <tr>). Un <td> bloc, largeur 100%, est un vrai
   enfant flex que align-items:center centre correctement dans la hauteur
   étirée de la ligne. */
.subdomain-row td {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subdomain-row:hover {
    background-color: var(--wp-surface);
    border-color: var(--wp-brand);
    box-shadow: var(--wp-shadow-md);
    color: var(--wp-brand);
    transform: translateY(-1px);
}
/* Sélection clavier : accent de marque (--wp-brand, même rouge que la barre de
   progression du chargement) pour bien distinguer "ligne pointée par les
   flèches" d'un simple survol. */
.subdomain-row:focus {
    background-color: var(--wp-surface);
    color: var(--wp-brand);
    box-shadow: var(--wp-shadow-md), inset 0 0 0 2px var(--wp-brand);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .subdomain-row {
        transition: none;
    }
    .subdomain-row:hover {
        transform: none;
    }
}

#launch_screen {
    width: 100vw;
    height: 100vh;
    background-color: var(--wp-surface);
    position: fixed;
    top: 0;
    left: 0;
}

/* Sortie de l'écran de chargement : le voile (position:fixed, opaque) se
   dissout par-dessus le contenu qui apparaît (login.finish + showContent),
   d'où un fondu enchaîné plutôt qu'une coupure sèche. */
#launch_screen.wp-launch-fading {
    transition: opacity 400ms ease;
    opacity: 0;
    pointer-events: none;
}

/* Respect de prefers-reduced-motion : pas de fondu de sortie (login.finish
   bascule alors sur un hide() instantané). */
@media (prefers-reduced-motion: reduce) {
    #launch_screen.wp-launch-fading {
        transition: none;
    }
}

/* Barre de progression de démarrage : centrée à l'écran, bien visible.
   Masquée en jQuery (hide()/show()) pendant le choix de sous-domaine
   (#subdomain_overlay), qui met le chargement en pause et occupe le centre de
   l'écran — cf WP.utilities.buildProgress / login.js showSubdomainOverlay. */
#progress_container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(440px, calc(100vw - 48px));
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wp-progressbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Seul repère de marque de l'écran de chargement (#launch_screen,
   index.html). */
.wp-progressbar-logo {
    height: 160px;
    width: auto;
    margin-bottom: 20px;
}

.wp-progressbar-track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: var(--wp-border-light);
    overflow: hidden;
    box-shadow: var(--wp-shadow-sm);
}

.wp-progressbar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--wp-brand), #e0574a);
    transition: width .3s ease;
}

/* Compteur de lancement (WP.utilities.buildProgress startCounter()) : vit
   dans la barre, à la place d'un pourcentage textuel — un peu plus grand que
   le texte standard de l'appli (--wp-font-size) pour rester bien visible. */
#launch_counter {
    margin-top: 14px;
    padding: 6px 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border-light);
    box-shadow: var(--wp-shadow-sm);
    font-family: var(--wp-font-family);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wp-text-muted);
}

#launch_counter .fa-clock-o {
    color: var(--wp-brand);
}

@media (prefers-reduced-motion: reduce) {
    .wp-progressbar-fill {
        transition: none;
    }
}

/* Overlay de choix du sous-domaine (WP.login.showSubdomainOverlay), affiché
   par-dessus l'écran de chargement, pas sur l'écran de login (cf
   WP.subdomains.chooseSubdomain). Toujours en display:flex — seule l'opacité
   bascule (comme #launch_screen.wp-launch-fading) pour permettre un fondu,
   avec pointer-events désactivés quand invisible. */
#subdomain_overlay {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Pas de voile plein écran : l'écran de chargement (#launch_screen) doit
       rester visible derrière le choix de sous-domaine, pas être masqué par
       un fond. Le contraste des boutons vient de leur propre bordure/ombre
       (.subdomain-row, #launch_counter), pas d'une teinte de fond. */
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

#subdomain_overlay.wp-subdomain-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    #subdomain_overlay {
        transition: none;
    }
}

.wait {
    cursor: wait !important;
}

.even {
    background-color: #f0f0f0;
}


.odd {
    background-color: #f9f9f9;
}

.even .specialday {
    background-color: #E8E6DF;
}

.odd .specialday {
    background-color: #F0EEEA;
}

.specialday {
    background-color: #E8E6DF;
}

#planning_grid .even .secondaryinfocell {
    border-bottom-color: #f0f0f0;
    border-bottom-width: 0px;
    padding-top: 0;
    padding-bottom: 0;
}

#planning_grid .odd .secondaryinfocell {
    border-bottom-color: #f9f9f9;
    border-bottom-width: 0px;
    padding-top: 0;
    padding-bottom: 0;
}

#planning_grid .even .secondaryinfocell.specialday {
    border-bottom-color: #E8E6DF;
}

#planning_grid .odd .secondaryinfocell.specialday {
    border-bottom-color: #F0EEEA;
}


/*
---------
Waplanner
---------
*/

#waplanner  {
    margin-left: 10px;
    margin-right: 10px;
}

/*
-----------------
Boutons d'édition
-----------------
*/

.child_screen .crud_button  {
    float: left;
    margin-left: 50px;
}

/*
Menu dans la bannière
---------------------
*/

#manage_menu  {
    float:right;
    margin-right:0px;
}

#manage_sub_menu  {
    display: none;
    clear:both;
}

#manage_button_li {
    float:right;
}

#manage_sub_menu li  {
    float:left;
}

/*
-----------
grid_screen
-----------
*/

#grid_screen  {
    padding: 0 5px 5px 5px;
    margin-top: 0;
}

/*
----------
Calendrier
----------
*/

#today_button  {
	float: left;
    margin: 0 40px 0 0;
}

#selected_month {
    margin-right: 10px;
}

#selected_num_of_days {
    float: right;
}

#nav_bar_container  {
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}

#nav_bar  {
    width: 100%;
    border: 1px solid LightGray;
}

#nav_bar td, #nav_bar th {
    border: 1px solid LightGray;
}

#navigation_buttons_container {
    height: 30px;
}

#nav_bar_recap_line  {
    height: 24px;
    font-weight: bold;
}

.minimized_cell {
   overflow:hidden;
   box-shadow: -12px 0 8px -8px #c0c0c0 inset;
}

.secondaryinfo.minimized_cell {
   display: none;
}

.nav_bar_calendar_cell {
    width: 50px;
}

#nav_bar_recap_line .nav_bar_grid_cell  {
    border-bottom: 2px solid #000;
}

.nav_bar_past_cell  {
    background-color: #f3f3f3;
}

.nav_bar_today_cell {
    background-color: #FCF2C8;
}

.nav_bar_future_cell  {
    background-color: #D9EDF7;
}

.nav_bar_transition_cell  {
    background: linear-gradient(to right, #f3f3f3, #D9EDF7); /* gradient from nav_bar_past_cell to nav_bar_future_cell */
}

#nav_bar_date_line  {
    background-color: white;
    font-size: 80%;
    height: 22px;
}

.highlighted_month {
    background-color: #8FC7E3;
    background: #8FC7E3;
}

#nav_bar_recap_line td:active  {
	background-color: yellow;
}

.nav_bar_calendar_cell:hover  {
    background-color: #8FC7E3;
}

#main_menu {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 5px;
    /* pendant du padding-top : sans lui la pastille du menu actif touche
       le bord bas de la barre */
    padding-bottom: 5px;
}

/* Logo client (script de menu de type "image") : même gabarit que
   .navbar-brand, qui porte le logo WAPLANNER — boîte de la hauteur de la
   barre qui centre verticalement l'image, quelle que soit sa hauteur. */
.wp-navbar-client-logo {
    display: flex;
    align-items: center;
    float: left;
    height: 50px;
    margin-right: 5px;
}

/* Couleurs du menu général : palette de l'appli monitor au lieu du bleu du
   thème — entrées en gris (survol plus sombre), actif en gris plus soutenu
   (--wp-border-light) / gris foncé (--wp-text), comme les onglets du
   monitor. Seule l'Assistance reste en rouge (style inline posé par
   mainMenuView) */
.navbar-nav > li > a {
    z-index: 0;
    color: #374151; /* --text-2 du monitor */
}
/* Pastille de survol en ::before, encastrée dans le bouton (padding du lien
   inchangé, cf. .navbar-nav > li > a de theme.css) plutôt que posée sur toute
   sa boîte : sans ça le survol touche le haut/bas de la navbar sur 50px et
   les items se touchent bord à bord, comme les onglets du monitor. */
.navbar-nav > li > a::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 4px;
    right: 4px;
    z-index: -1;
    border-radius: var(--wp-radius);
    background-color: transparent;
    transition: background-color .12s;
}
.navbar-nav > li:not(.active) > a:hover,
.navbar-nav > li:not(.active) > a:focus {
    color: var(--wp-text);
    background-color: transparent; /* annule le fond pleine boîte de .nav > li > a:hover (theme.css) */
}
.navbar-nav > li:not(.active) > a:hover::before,
.navbar-nav > li:not(.active) > a:focus::before {
    background-color: var(--wp-hover-bg);
}
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus {
    color: var(--wp-text);
    font-weight: 700;
    background-color: transparent; /* annule le fond pleine boîte de .nav > li > a:hover (theme.css) */
}
.navbar-nav > li.active > a::before {
    background-color: var(--wp-border-light); /* pastille active encastrée, même gabarit que le survol */
}

/* Aides à la prise en main du menu Gérer (visite guidée, guide de
   migration) : en bleu, seules entrées colorées de la liste — ce sont des
   documents à ouvrir, pas des commandes de l'application */
.dropdown-menu > li > a.wp-menu-help,
.dropdown-menu > li > a.wp-menu-help:hover,
.dropdown-menu > li > a.wp-menu-help:focus {
    color: var(--wp-primary);
}

/* Boutons de liste (.listbutton, rangée entre la navbar et la liste, seul
   usage des nav-pills) : entrées grises comme le menu général ; le bouton
   actif garde sa pastille pleine, en gris au lieu du bleu du thème. Même
   pastille de survol encastrée que le menu général, ci-dessus. */
.nav-pills > li > a {
    z-index: 0;
    color: #374151;
}
.nav-pills > li > a::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 2px;
    right: 2px;
    z-index: -1;
    border-radius: var(--wp-radius);
    background-color: transparent;
    transition: background-color .12s;
}
.nav-pills > li:not(.active) > a:hover,
.nav-pills > li:not(.active) > a:focus {
    color: var(--wp-text);
    background-color: transparent; /* annule le fond pleine boîte de .nav > li > a:hover (theme.css) */
}
.nav-pills > li:not(.active) > a:hover::before,
.nav-pills > li:not(.active) > a:focus::before {
    background-color: var(--wp-hover-bg);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    font-weight: 700;
    background-color: transparent; /* annule le bleu de .nav-pills > li.active > a (theme.css) */
}
.nav-pills > li.active > a::before,
.nav-pills > li.active > a:hover::before,
.nav-pills > li.active > a:focus::before {
    background-color: #6b7280; /* pastille active encastrée, même gabarit que le survol */
}

/*
---------------------
Grille des ressources
---------------------
*/

#planning_grid  {
    table-layout: fixed;
    border: 1px solid #888;
}

#planning_grid th    {
    background-color: white;
    background-clip: padding-box;
}

.pm_column {
    border-left: 1px dashed #bbb;
}

#planning_column_header  {
	border-top-color: #FEFEFE; /* couleur onglets */
	border-left-color: #FEFEFE; /* couleur onglets */
    padding-top: 3px;
    padding-bottom: 3px;
}

.planning_header  {
    padding: 4px;
    line-height: 15px;
}

#planning_grid_container  {
	clear:both;
}

#planning_grid .grid_cell {
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 0;
    vertical-align:bottom;
    border-top-width: 0;
    border-right-width: 0;
    position: relative;
    background-clip: padding-box;
}

#planning_grid {
    line-height: 0;
}

#planning_grid .cardTr .grid_cell, .planning_header {
    border-bottom-color: #888 !important;
}

.hover_droppable {
    background-color: #8FC7E3 !important;
    border-bottom-color: #8FC7E3 !important;
}

.card {
    display: inline-table;
}

.infoTr {
    height: 0;
}

#planning_grid .highlighted_lineHeader {
    background-color: yellow;
}

.cell_button {
    width: fit-content;
    bottom: 1px;
    position: absolute;
    width: 35px;
    height: 20px;
    padding: 0;
    opacity: 0.8;
    z-index: 2;
}

.cell_button.right {
    right: 1px;
}

.cell_button.left {
    left: 1px;
}

.grid_cell_spacer {
    z-index: -1;
    visibility: hidden;
    float: right;
}

/*
--------------
Ecran de liste
--------------
*/

/* nav-pills */
.nav-pills>li>a {
    padding-top: 7px;
    padding-bottom: 7px;
}

#list_screens  {
    margin-bottom: 0;
    border-top: 1px solid lightgray;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

/*
Elements de la grille
-------------------------------
*/

.grid_cell .job_step, .grid_cell .interval_card {
    width:100%; /*prend la largeur de la case */
    height:inherit; /* prend la hauteur de la case */
    display: inline-block;
    position: relative;
}

/* Cartes cliquables (popover d'édition au clic) : curseur pointer,
   cohérent avec les lignes de liste (cf. tabulatorAdapter) */
.grid_cell .card {
    cursor: pointer;
}

.infoInCardArea_iconContainer {
    z-index: 3;
    display: inline-block;
    width: fit-content;
    position: absolute;
    top: 2px;
    right: 4px;
}

.infoInCardArea_icon {
   text-shadow: 1px 1px 1px #444;
   font-size: 130%;
}

.infoInCardArea_text {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    margin-left: 3px;
    padding-right: 12px;
    font-size: 90%;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infoInCardArea_cardText {
    margin-top: 3px;
    margin-bottom: 3px;
    left: 3px;
    top: 3px;
    padding: 4px;
    line-height: 1.2em;
    box-shadow: 1px 1px 1px #666;
    white-space: pre-line;
    overflow: hidden;
    width: 100%;
}

.infoInCardArea_cardLabel {
    margin-top: 0;
    margin-bottom: 3px;
    left: 3px;
    top: 3px;
    box-shadow: 1px 1px 1px #666;
    white-space: pre-line;
    overflow: hidden;
    width: 100%;
    display: inline-block;
}

.interval_member {
    font-size: 90%;
    margin-bottom: 3px;
}

.secondaryinfoicon {
    font-size: 130%;
    line-height: 1.35em;
    padding: 2px;
}

.job_step th, .job_step td {
    border: 1px solid black;
    border-color: lightgray  !important;
}

.job_step {
    margin-bottom: 3px;
}

/*
Etape
-----
*/

.step_element  {
    border-color: gray;
    background-color: white;
    line-height: 1.2em;
}

.step_reference  {
    font-size:small;
}

.en_hours  {
    font-size: 70%
}

/*
-------------
Drag and Drop
-------------
*/

tbody tr.ui-draggable:hover  {
    background-color: #8fc7e3 !important;
    color: darkgreen;
}

.ui-draggable  {
    cursor: move;
}

.ui-draggable.ui-draggable-disabled {
    cursor: pointer;
}


.col-sm-1 .col-sm-2 .col-sm-3 .col-sm-4 .col-sm-5 .col-sm-6 .col-sm-7 .col-sm-12 {
    min-height: 0
}

/*
------
Ecrans
------
*/

/* un écran est le contenu d'un onglet sous la grille */
.screen  {
	padding-top: 5px;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: #fafafa; /* couleur fond */
}

/*
-------
Edition
-------
*/

/* Permet de placer l'input de recherche des listes (proxy de filtre) */
.datatable_filter_integration  {
	float: left;
}

/* Le conteneur des boutons de crud et de scripts : flex à retour à la ligne,
   sans hauteur figée — en écran étroit les boutons se replient sur une
   deuxième rangée, qui doit pousser le conteneur et non le déborder */
.action_buttons  {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 0;
}

/* Conteneur de liste principale */
.main_list {
    clear: both;
}

/* Onglets de vues (viewTabs.js) : ils partagent une seule rangée avec les
   outils de liste */
.wp-viewtabs {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
}
.wp-viewtabs .wp-viewtab-close {
    margin-left: 6px;
    opacity: 0.5;
}
.wp-viewtabs .wp-viewtab-close:hover {
    opacity: 1;
}
.wp-viewtabs .wp-viewtab-add a {
    padding-left: 10px;
    padding-right: 10px;
}
/* Onglet dont la liste n'a jamais été chargée (ni résultats dans le
   modèle ni requête tournée — hasLoadedQuery) : libellé estompé en
   italique ; l'apparence normale revient au premier chargement */
.wp-viewtabs li.wp-viewtab-unloaded > a {
    color: var(--wp-text-muted, #6b7280);
    font-style: italic;
}
/* ⟳ et ✕ de l'onglet actif : pastilles cliquables VISIBLES — la zone de clic
   doit se voir ; le ⟳ tourne pendant un chargement (fa-spin posé par
   viewTabs.setLoading) */
.wp-viewtabs .wp-viewtab-refresh,
.wp-viewtabs li.active .wp-viewtab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, transparent);
    opacity: 1;
    margin-left: 6px;
    cursor: pointer;
    font-size: 11px;
}
.wp-viewtabs .wp-viewtab-refresh:hover,
.wp-viewtabs li.active .wp-viewtab-close:hover {
    background: color-mix(in srgb, currentColor 22%, transparent);
}

/* Rangée de chips de critères (filterChips.js) — interligne du wrap plus
   aéré que l'espacement horizontal, sinon les rangées enveloppées sont
   trop serrées. PADDING haut et non margin : l'élément clear les floats de
   la rangée d'outils, et une marge haute fusionnerait avec la clearance
   pour disparaître ; marge basse réduite, le conteneur de liste apporte
   déjà son padding. */
.wp-chipsbar {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 6px;
    padding-top: 10px;
    margin: 0 0 4px;
}
.wp-chipsbar > .wp-chips-group {
    display: contents;
}
.wp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--wp-border, #d1d5db);
    border-radius: 999px;
    background: var(--wp-surface, #fff);
    font-size: var(--wp-font-size-sm, 12px);
    white-space: nowrap;
}
.wp-chip > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wp-chip-label {
    color: var(--wp-text-muted, #6b7280);
    font-weight: 600;
}
/* mini-inputs dans les chips : les styles inline (float/margin) posés par
   les constructeurs de champs sont neutralisés, la chip gère l'espacement.
   min-width: 0 est CAPITAL : la chip est un conteneur flex et un input
   enfant direct garderait sinon son min-width:auto = largeur intrinsèque
   (~172px), qui PRIME sur width et max-width — les largeurs resserrées
   (dates 92px, nombres 72px) resteraient sans effet sur les critères des
   domaines (inputs nus, sans span enveloppant) */
.wp-chip input,
.wp-chip select,
.wp-chip textarea {
    float: none !important;
    margin: 0 !important;
    height: 24px;
    min-height: 24px;
    min-width: 0;
    padding: 1px 6px;
    font-size: var(--wp-font-size-sm, 12px);
    width: auto;
    max-width: 160px;
    border: 1px solid var(--wp-border-light, #e5e7eb);
    border-radius: 4px;
    resize: none;
}
.wp-chip input.input-medium {
    width: 110px;
}
.wp-chip .form-control {
    width: 140px;
}
.wp-chip input[type="checkbox"] {
    height: auto;
    width: auto;
    border: none;
}
.wp-chip .wp-chip-close {
    margin-left: 2px;
    opacity: 0.5;
    cursor: pointer;
}
.wp-chip .wp-chip-close:hover {
    opacity: 1;
}
.wp-chip-add {
    border-style: dashed;
    background: transparent;
}
.wp-chip-add > a {
    color: var(--wp-text-muted, #6b7280);
    text-decoration: none;
}
/* Critère basculable au clic sur son libellé : ACTIF = appliqué à la
   requête (même vide → « valeur par défaut ») — pilule teintée accent,
   bien démarquée ; inactif = aspect neutre ; inactif avec une valeur =
   ignoré sans perdre la saisie, chip estompée en pointillés */
.wp-chips-criteria .wp-chip {
    /* même hauteur repliée/dépliée (input 24 + padding 6 + bordure 2) :
       le dépliage ne fait pas respirer la ligne */
    min-height: 32px;
}
.wp-chips-criteria .wp-chip-label {
    cursor: pointer;
}
.wp-chips-criteria .wp-chip.wp-chip-on {
    border-color: var(--wp-link, #2563eb);
    background: color-mix(in srgb, var(--wp-link, #2563eb) 8%, var(--wp-surface, #fff));
}
.wp-chips-criteria .wp-chip.wp-chip-on .wp-chip-label {
    color: var(--wp-link, #2563eb);
}
.wp-chips-criteria .wp-chip.wp-chip-muted {
    opacity: 0.55;
    border-style: dashed;
}
/* Critère INACTIF replié : libellé seul (l'input n'apparaît qu'au clic
   sur la chip) — les recherches à nombreux critères restent compactes ;
   !important : les constructeurs de champs posent des styles inline */
.wp-chip.wp-chip-collapsed {
    cursor: pointer;
}
.wp-chip.wp-chip-collapsed > *:not(.wp-chip-label) {
    display: none !important;
}
/* Saut de ligne ANTICIPÉ devant une chip dont le dépliage déborderait
   la ligne (filterChips._layoutCriteria) : la chip prend sa ligne
   définitive dès le rendu et se déplie sur place, sans fuir sous le
   curseur — item plein-largeur de hauteur nulle dans le flex de la
   barre */
.wp-chipsbar .wp-chip-break {
    flex-basis: 100%;
    height: 0;
}

/* Valeurs courtes : inputs resserrés dans les chips (dates, nombres) —
   après la règle input-medium pour la primer à spécificité égale */
.wp-chip input.wp-date-input {
    width: 92px;
}
/* datetime : « jj/mm/aaaa hh:mm » ne tient pas dans la largeur date seule */
.wp-chip input.wp-datetime-input {
    width: 128px;
}
.wp-chip input[type="number"] {
    width: 72px;
}

/* Chip modifiée sans relance : la liste affichée ne reflète plus les
   champs — liseré + point accent, levés quand la requête part */
.wp-chip-dirty {
    border-color: var(--wp-link, #2563eb);
}
.wp-chip-dirty::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wp-link, #2563eb);
}
.wp-chips-locked .wp-chip {
    opacity: 0.6;
    pointer-events: none;
}

/* Bouton de première exécution (filterChips.buildLaunchBar) : affiché
   au-dessus de la liste quand une sélection attend ses critères */
.wp-launchbar {
    clear: both;
    text-align: center;
    padding: 8px 0;
}
.wp-launch-button {
    font-size: 15px;
    padding: 10px 26px;
    border-radius: 8px;
}
/* Rangée [onglets + outils] des listes : flex à retour à la ligne, pour que
   les éléments se replient proprement quand la largeur manque au lieu de se
   chevaucher ; les floats inline que posent les éléments sont ignorés par le
   conteneur flex */
.wp-listmenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.wp-listmenu .wp-menuright {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 10px;
    margin-left: auto;
    order: 5;
}
/* En-tête compact (liste du planning) : la rangée de chips s'insère dans
   la rangée onglets/outils, entre les onglets et le groupe de droite
   (ordre source — le groupe de droite passe dernier par `order`) ; le
   CTA de première exécution devient un bouton discret en bout de rangée */
.wp-chipsbar-inline {
    display: inline-flex;
    clear: none;
    padding-top: 0;
    margin: 0;
    /* toute la largeur restante de la rangée, pour que la frontière de wrap
       soit STABLE : dimensionnée au contenu, elle bougerait au dépliage
       d'une chip et l'anti-saut (_layoutCriteria) calculerait sur du sable */
    flex: 1 1 auto;
    min-width: 0;
}
.wp-chipsbar-inline .wp-launchbar {
    clear: none;
    padding: 0;
}
.wp-launchbar-inline .wp-launch-button {
    font-size: var(--wp-font-size-sm, 12px);
    padding: 3px 12px;
    border-radius: 6px;
}
/* Outils de table (filtre d'affichage, compteur, colvis/exports) :
   déposés dans la ligne de pagination Tabulator (tabulatorAdapter) — le
   footer-contents de Tabulator est un flex space-between, pagination à
   gauche, outils à droite sur la même ligne */
.wp-tabletools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    gap: 6px 0; /* l'espacement horizontal reste aux margins des éléments */
}
/* Écran étroit : le compteur de lignes et le libellé « Lignes par page »
   cèdent leur place (le !important passe devant le .show() inline du
   compteur) */
@media (max-width: 1023px) {
    .wp-linecount {
        display: none !important;
    }
    .wp-tabulator .tabulator-paginator > label {
        display: none;
    }
}

/* Page d'accueil des listes à requête manuelle (listStartPage.js) :
   tuiles des vues/recherches tant qu'aucune requête n'a tourné */
.wp-startpage {
    clear: both;
    text-align: center;
    /* 16 + 4 de marge basse des chips = 20px au-dessus du bouton Lancer,
       36px dessous */
    padding: 16px 20px 24px;
}
/* Lancer la recherche de l'onglet actif : l'action première, en grand
   au-dessus de la proposition d'ouvrir un autre onglet */
.wp-startpage-launch {
    margin-bottom: 36px;
}
.wp-startpage-title {
    color: var(--wp-text-muted, #6b7280);
    font-size: 15px;
    margin-bottom: 18px;
}
.wp-startpage-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
/* Requête en cours : animation de chargement à la place des tuiles */
.wp-startpage-loading {
    padding: 24px 0;
    font-size: 30px;
    color: var(--wp-text-muted, #6b7280);
}
.wp-startpage-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 130px;
    padding: 10px 16px;
    border: 1px solid var(--wp-border-light, #e5e7eb);
    border-radius: 8px;
    background: var(--wp-surface, #fff);
    cursor: pointer;
    text-align: left;
}
.wp-startpage-tile:hover {
    border-color: var(--wp-link, #2563eb);
}
.wp-startpage-tile-label {
    font-weight: 600;
}
.wp-startpage-tile-sub {
    font-size: 11.5px;
    color: var(--wp-text-muted, #6b7280);
}

/*
Liste principale
----------------
*/

/* Le thème vendoré Tabulator promeut .tabulator en couche GPU
   (translateZ(0)), qui se peint alors décalée de l'offset de ses ancêtres —
   liste collée au bord gauche. Le fichier vendoré étant synchronisé tel quel
   depuis npm (sync-deps.js), la neutralisation est ici. !important car cette
   feuille est chargée avant tabulator.min.css. */
.tabulator {
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
}

.main_list table  {
    text-align: left;
}

/* Police des listes : 90 % du 14px de base (80 % pour les listes filles,
   plus bas), pour rester en dessous des champs de formulaire (13px).
   Tabulator rend des <div>, d'où le doublage des sélecteurs `table` par
   .tabulator-row / .tabulator-col — sans quoi les listes repassent à 14px. */
.main_list table tr,
.main_list .wp-tabulator .tabulator-row,
.main_list .wp-tabulator .tabulator-header .tabulator-col {
    font-size: 90%;
}

.list table td, .child_list table td  {
    white-space: nowrap;
}

.child_list table,
.child_list .wp-tabulator .tabulator-row,
.child_list .wp-tabulator .tabulator-header .tabulator-col {
    font-size: 80%;
}

/* Le contenu replié sous la ligne (responsiveLayout collapse — option
   « colonnes repliées » ou petit écran) suit la police de sa liste : le
   CSS vendoré Tabulator fige son table à 14px (spécificité 0,2,1 ET
   chargé après cette feuille : il faut la battre, pas l'égaler), et sans
   le inherit sur tr les règles table/tr ci-dessus se composeraient en
   cascade (80 % du 80 % de la ligne). */
.wp-tabulator .tabulator-row .tabulator-responsive-collapse table,
.wp-tabulator .tabulator-row .tabulator-responsive-collapse table tr {
    font-size: inherit;
}

/*
Formulaire d'édition
--------------------
*/

.edition_form_panel {
    display: table;
    font-size: 100%;
    z-index: 100;
}

.mandatory_field {
	font-weight: bold;
}

.edition_form_panel fieldset {
    border: 1px solid black;
    padding: 10px;
}

.interval_edition_form {
    max-width: 250px;
}

.btn-hidden {
    display: none;
}

/*
Titre du formulaire d'édition
-----------------------------
*/

/* NOTE: le titre reprend le nom de l'action qui a été cliquée */

.action_title, .child_action_title  {
	font-weight: bold;
	margin-right: 10px;
}

/*
Ligne sélectionnée
------------------
*/

.selectedRow, .child_selectedRow, .clickedRow {
    background-color: yellow !important; /*#8fc7e3*/
}

.child_list .selectedRow {
    background-color: yellow !important;
}

.child_list .selectedRow td {
    color: black !important;
}

/*
-------------------
Edition liste fille
-------------------
*/

.child_action_buttons  {
    height: 30px;
}

/*
Erreur
------
*/

.list_error_message, .form_error_message, .child_error_message {
	clear: both;
	color: white;
    background-color: red;
	margin-bottom: 10px;

	display: none;
}

.list_info_message {
    clear: both;
    color: gray;
    margin-bottom: 10px;

    display: none;
}

.faulty_text_field  {
    border-bottom: 4px solid red !important;
}

/*
Édition en masse (formulaire « Modifier N éléments », WP.massEditPanel)
-----------------------------------------------------------------------
*/

/* aligné sur le titre d'un formulaire de fiche (h4 de l'en-tête de modale) ;
   la taille et la marge, posées en inline par box.buildForm, sont défaites
   par massEditPanel */
.wp-massedit-title {
    font-weight: 600;
}

.wp-massedit-error {
    padding: 4px 8px;
}

.wp-massedit-hint {
    color: var(--wp-text-muted, #6b7280);
    margin-bottom: 10px;
}

/* champ non retenu : estompé jusqu'à ce que sa case soit cochée
   (ou qu'une saisie la coche) */
.wp-massedit-row.wp-massedit-off td.formfield {
    opacity: 0.45;
}

.wp-massedit-row .wp-massedit-apply {
    margin: 0 6px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

/* la disposition du dataType peut être large (onglets, deux colonnes) */
.bootbox .wp-massedit-form {
    min-width: 520px;
    max-width: 80vw;
}

@media (max-width: 767px) {
    .bootbox .wp-massedit-form {
        min-width: 0;
    }
}

/*
Champ multi-lignes composite (type "multirow", WP.multirowField)
---------------------------------------------------------------
Taille AUTOMATIQUE : le conteneur s'ajuste à son contenu (inline-block) et ce
sont des PLAFONDS qui bornent la place prise dans le formulaire hôte — au-delà,
le contenu défile sur les deux axes. Rien n'est à dimensionner dans le dataType :
un champ à deux colonnes et deux lignes reste compact, un champ large ou long
défile. Les planchers évitent le tableau ridicule quand il est vide.

Ces dimensions vont sur le conteneur INTERNE et non sur la racine, parce que
fieldPanel.buildFormLine pose une largeur inline sur la racine quand la box hôte
déclare une largeur — elle écraserait les nôtres.
*/

.wp-multirow {
    display: inline-block;
}

.wp-multirow-scroll {
    display: inline-block;
    /* ~6 lignes + en-tête en hauteur ; en largeur, de quoi loger 4 à 5
       colonnes courantes sans écraser la disposition du formulaire */
    max-width: 560px;
    max-height: 164px;
    min-width: 180px;
    min-height: 64px;
    overflow: auto;
    border: 1px solid #ddd;
    background-color: #fff;
    vertical-align: top;
}

.wp-multirow-table {
    border-collapse: collapse;
    font-size: 13px; /* WP.field.fieldFontSize */
    /* Occupe au moins la largeur du conteneur (sinon l'en-tête ne va pas
       jusqu'au bord quand les colonnes sont étroites), tout en restant libre
       de la dépasser : c'est ce débordement qui fait défiler. */
    min-width: 100%;
}

/* En-tête collant : les libellés de colonne restent lisibles pendant le
   défilement vertical (c'est le conteneur qui défile, pas la page). */
.wp-multirow-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 3px 6px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.wp-multirow-table td {
    padding: 2px 6px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap; /* une ligne = une ligne ; le défilement H fait le reste */
}

.wp-multirow-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wp-multirow-row {
    cursor: pointer;
}

.wp-multirow-row:hover {
    background-color: #f7fbff;
}

/* Sélection = cible des boutons Modifier / Supprimer */
.wp-multirow-row.selected {
    background-color: #d9edf7;
}

.wp-multirow-buttons {
    margin-top: 4px;
}

.wp-multirow-buttons .btn {
    margin-right: 4px;
}

/* Lecture seule : même tableau, barre de boutons retirée */
.wp-multirow-readonly .wp-multirow-buttons {
    display: none;
}

/* Boîte de saisie d'une ligne : même politique que l'édition en masse, la
   disposition rowFormPanel pouvant être large. */
.bootbox .wp-multirow-form {
    min-width: 320px;
    max-width: 80vw;
}

.wp-multirow-error {
    padding: 4px 8px;
}

@media (max-width: 767px) {
    /* Petits écrans : le plafond de largeur cède la place à la largeur
       disponible, et la hauteur peut respirer un peu plus. */
    .wp-multirow-scroll {
        max-width: 100%;
        min-width: 0;
        max-height: 220px;
    }

    .bootbox .wp-multirow-form {
        min-width: 0;
    }
}

/*
Ressources et intervalles
-------------------------
*/

/*
Formulaires
*/

.edition_form_panel input
.edition_form_panel select
.edition_form_panel textarea {
    margin:0;
}

.form-control {
    min-width: 172px;
    font-weight: normal;
    display: inline-block;
}

.form-control.input-sm {
    min-width: 45px;
}

.modal-dialog {
    width: auto;
    display: table;
    max-width : 100%;
    max-height: 100%;
}

.grid_y_nav_grid_line {
    border-left: 5px solid #000;
    border-right: 5px solid #000;
}

.navListCell {
    padding: 5px;

}

.navListCell:hover {
    background-color: #e1effc;
}

.grid_y_navigation_button {
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 18px;
}

.mouse_down  {
    background-color: #cbe4fc !important;
}


/* z-index du datepicker jQuery UI (navbar) et de l'autocomplétion : au-dessus
   des modales (1050) et popovers (1060) — le calendrier air-datepicker suit
   via --adp-z-index (css/datepickerTheme.css) */
.ui-datepicker, .ui-autocomplete {
    z-index: 9999 !important;
}

/* Thème du calendrier air-datepicker : css/datepickerTheme.css, partagé avec
   les pages cartes */

/* popovers plus larges que le gabarit de theme.css */
.popover {
    max-width: 600px;
}

/*
Draggable
----------
*/

/* Pour ne pas opacifier les lignes non draggables de la liste */
.ui-state-disabled.ui-draggable-disabled  {
    opacity : 1;
}


#list_screen_toggle_li {
    float: right;
}

#fullscreen {
    margin-right: 15px;
    margin-left: 15px;
}

/*
Modal
=====
*/

#mainscreen, #fullscreen {
    position: relative;
}

/*
Datepicker
==========
*/

.gridfirstdate .ui-state-default {
    background: #8FC7E3;
}

/*
Divers
======
*/

.secondaryinfoicon:hover {
    cursor: pointer;
}

.stepingrouphover:hover {
    background-color: yellow !important;
}

.left-align {
    text-align: left;
}

.modal-header {
  padding: 10px;
}

.modal-footer {
  padding: 10px;
}

.input-medium {
    width: 130px;
    min-width: 65px;
}

.input-small {
    width: 45px;
    max-width: 45px;
    min-width: 45px;
}

/* Bouton sombre (Supprimer des formulaires) — plat, aligné sur le thème */
.btn-inverse {
    color: #fff;
    background-color: #1f2937;
    border-color: transparent;
}

.btn-inverse:hover,
.btn-inverse:focus {
    color: #fff;
    background-color: #111827;
}

.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
    color: #fff;
    background-color: #030712;
}

.tooltip-content {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    right: 100%;
    margin-right:-14px;
    margin-bottom:-14px;
    min-width: 200px;
    background-color: yellow;
    color: black;
    border-color:#aaa;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    line-height: normal;
    padding: 12px;
    z-index: 0;
    opacity: 0;
    transition: opacity .6s;
    box-shadow: 2px 2px 1px silver;
    pointer-events: none;
}

.has-tooltip:hover .tooltip-content { /* Makes tooltip visible when hovered on */
    visibility: visible;
    opacity: 1;
}

.offline_banner {
    background : repeating-linear-gradient(-45deg, #fff, #fff 30px, #ed1228 30px, #ed1228 60px);
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    padding: 4px;
}

.offline_banner #offline_text {
    background-color: white;
    opacity: 0.85;
    font-size: 16px;
    color: red;
    text-align: center;
    width: fit-content;
    width: -moz-fit-content;
    padding-left: 5px;
    padding-right: 5px;
}

.offline_background {
    background-color: rgba(237, 18, 40, 0.10);
}

#button_online {
    position: relative;
    float:right;
}
.offline_navigation {
    background : #ff9999;
}

/* Défilement vertical quand la modale est plus haute que la fenêtre */
.modal {
  overflow: auto !important;
}

/*
----------
Responsive
----------
Petits écrans (≤767px) : modales plein écran, layouts de formulaire
empilés (les <table> de fieldPanel passent en blocs), grille du planning
contenue dans sa propre bande scrollable — la grille n'a pas de mode
tactile complet, cf. doc/chantiers_ui.md.
*/

@media (max-width: 767px) {

    /* Modales plein écran */
    .modal-dialog {
        display: block;
        width: auto;
        margin: 0;
    }
    .modal-content {
        border-radius: 0;
        border-right: 0;
        border-left: 0;
    }
    /* le min-width inline (550px, standardFormPanel.buildHtml) forcerait
       un défilement horizontal du corps de modale sur mobile */
    #myModalBody {
        min-width: 0 !important;
    }

    /* Formulaires : les tables d'ASSEMBLAGE s'empilent (les zones côte à
       côte passent en une colonne)… */
    .edition_form_panel,
    .edition_form_panel table,
    .edition_form_panel tbody,
    .edition_form_panel tr,
    .edition_form_panel td {
        display: block;
        width: auto;
    }
    .edition_form_panel td {
        margin-bottom: 4px;
    }
    /* … mais les tables de CHAMPS (.multicolumnform : libellé + champ)
       restent des tableaux — la largeur suffit pour garder le libellé à
       côté du champ, et les empiler donne de longues colonnes de vide */
    .edition_form_panel .multicolumnform table {
        display: table;
        width: 100%;
        /* colonnes bornées par la largeur du conteneur : sans fixed, les
           inputs à largeur fixe élargissent leur cellule et débordent de
           l'écran (max-width:100% inopérant en layout auto) */
        table-layout: fixed;
    }
    .edition_form_panel .multicolumnform tbody {
        display: table-row-group;
    }
    .edition_form_panel .multicolumnform tr {
        display: table-row;
    }
    .edition_form_panel .multicolumnform td {
        display: table-cell;
        margin-bottom: 0;
    }
    .edition_form_panel input,
    .edition_form_panel select,
    .edition_form_panel textarea {
        max-width: 100%;
    }

    /* La grille du planning défile dans sa bande, pas la page — le
       min-width inline posé par gridView (≥1240px, en-tête sticky du
       desktop) est neutralisé, le contenu garde sa largeur et défile */
    #grid_screen {
        min-width: 0 !important;
        max-width: 100vw;
        overflow-x: auto;
    }

    /* Filet : les listes ne font jamais défiler la page */
    .main_list {
        max-width: 100vw;
        overflow-x: auto;
    }
}