/* ===========================================================================
   Le planning du service creation -- FEN_Com_Suivi_Doss_Crea_Planning et ses
   deux satellites.

   Feuille a part : l'ecran a sa grille, ses jetons de jour et ses vignettes de
   tache, dont aucun autre ecran ne se sert. app.css ne garde que le partage.
   =========================================================================== */

.ecran-planning-crea {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
}

/* La tete : le mois avec ses fleches a gauche, comme au planning de
   production, puis les largeurs de periode et le choix d'entite. */
.bandeau-planning { gap: 8px; flex-wrap: wrap; }
.ecran-planning-crea .groupe-periode { display: flex; gap: 2px; }

.ecran-planning-crea .pave-mois { display: flex; align-items: center; gap: 4px; }
.ecran-planning-crea .pave-mois .fleche {
    width: 22px; height: 22px; padding: 0; line-height: 20px; font-size: 15px;
    border: 1px solid var(--bord); border-radius: var(--r);
    background: var(--fond-carte); color: var(--texte); cursor: pointer;
}
.ecran-planning-crea .pave-mois .fleche:hover { border-color: var(--accent); }
.ecran-planning-crea .bloc-mois {
    display: flex; flex-direction: column; line-height: 1.15; min-width: 128px;
}
.ecran-planning-crea .mois-courant { font-size: 15px; font-weight: 600; }

/* Les couleurs de la grille viennent de crea_lst_type_action : on les nomme. */
.legende-planning {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 5px 10px; border-bottom: 1px solid var(--bord);
    background: var(--fond-barre);
}
.puce-type {
    padding: 1px 7px; border-radius: 9px; font-size: 11px; white-space: nowrap;
    border: 1px solid var(--bord); background: var(--fond-carte);
}

.cadre-planning { flex: 1; min-height: 0; overflow: auto; }
.cadre-planning.occupe { opacity: .55; pointer-events: none; }
.cadre-planning .vide {
    padding: 28px 10px; text-align: center; color: var(--texte-doux);
}
/* Les largeurs de periode : le gris faible tombait a 3,4 de contraste en clair. */
.ecran-planning-crea .groupe-periode .jeton-etat { color: var(--texte-doux); }

/* ------------------------------------------------------------------ la grille

   Les deux orientations partagent la meme table : le bouton Pivoter echange
   simplement ce qui est en lignes et ce qui est en colonnes. */
.table-planning {
    border-collapse: separate; border-spacing: 0; width: 100%;
    table-layout: fixed;
}
.table-planning th, .table-planning td {
    border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
    vertical-align: top; padding: 0;
}

/* La premiere ligne et la premiere colonne restent en vue quand on defile. */
.table-planning thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--fond-barre); padding: 4px 6px; text-align: center;
    font-weight: 600; font-size: 12px; line-height: 1.25;
}
.table-planning .coin-planning { left: 0; z-index: 4; width: 132px; text-align: left; }
.table-planning tbody th {
    position: sticky; left: 0; z-index: 1;
    background: var(--fond-carte); padding: 4px 6px; text-align: left;
    width: 132px;
}

.table-planning .jour-nom { display: block; text-transform: capitalize; }
.table-planning .jour-num { display: block; color: var(--texte-doux); font-size: 11px; }

.tete-personne { line-height: 1.2; }
.tete-personne .init-personne { display: block; font-weight: 600; }
.tete-personne .nom-personne {
    display: block; font-size: 11px; font-weight: 400; opacity: .85;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tete-jour { line-height: 1.2; }

/* Samedi et dimanche quand on les demande : presents, mais en retrait. */
.table-planning .jour-weekend { background: var(--fond-gris); }
.table-planning thead .jour-weekend { background: var(--fond-gris); }
/* Aujourd'hui : un trait sur l'en-tete, et la colonne juste teintee. Poser
   l'ombre sur chaque cellule dessinait un trait par ligne. */
.table-planning thead .jour-aujourdhui {
    color: var(--accent-fonce); box-shadow: inset 0 2px 0 0 var(--accent);
}
.table-planning td.jour-aujourdhui,
.table-planning tr.jour-aujourdhui > td { background: var(--accent-clair); }
.table-planning tbody th.jour-aujourdhui { box-shadow: inset 2px 0 0 0 var(--accent); }

.case-planning {
    min-width: 96px; height: 60px; padding: 2px;
    background: var(--fond-carte);
}
.case-planning:hover { background: var(--fond-ligne); }

/* ------------------------------------------- les jours en lignes (par defaut)

   La disposition du planning de production : le jour et sa semaine tiennent la
   marge gauche, chaque personne a sa colonne. */
.table-jours { table-layout: auto; }

.table-jours .col-jour {
    position: sticky; left: 0; z-index: 3;
    width: 152px; min-width: 152px; text-align: left; font-weight: 400;
    white-space: nowrap; background: var(--fond-carte); padding: 1px 8px;
}
.table-jours thead .col-jour { z-index: 5; }

/* Le jour tient sur UNE ligne : le numero, le mois, puis le nom du jour
   pousse a droite. Le flex va sur la boite INTERIEURE : sur la cellule
   elle-meme il la sort du modele de tableau, et les colonnes se chevauchent
   des qu'on defile de cote. */
.table-jours .etiquette-jour { display: flex; align-items: baseline; gap: 4px; }
.table-jours .col-jour .jour-num { font-weight: 600; }
.table-jours .col-jour .jour-mois { text-transform: capitalize; }
.table-jours .col-jour .jour-abrege {
    margin-left: auto; color: var(--texte-doux); text-transform: capitalize;
}
.table-jours tbody tr { height: 24px; }

/* La colonne des semaines : un bandeau par semaine, une sur deux ombree,
   pour ne pas perdre sa ligne en defilant. */
.table-jours .col-semaine {
    position: sticky; left: 152px; z-index: 3;
    width: 44px; min-width: 44px; text-align: center; vertical-align: middle;
    color: var(--texte-doux); background: var(--fond-barre);
    border-right: 1px solid var(--bord-fort);
}
.table-jours thead .col-semaine { z-index: 5; }
.table-jours tr.sem-paire > .col-semaine { background: var(--fond-gris); }

/* Une ligne = un jour : elle reste basse tant qu'elle n'a rien. */
.table-jours .case-planning { height: auto; min-width: 136px; padding: 1px 2px; }
.table-jours .tete-personne { text-align: center; min-width: 136px; }
.table-jours .tete-personne .nom-personne { max-width: 170px; margin: 0 auto; }
.table-jours .ajout-case { line-height: 1; }

/* Le th d'une personne est celui de TableReglable : la couleur, le glisser et la
   croix vont sur la boite interieure, qui remplit la case (height:1px, puis 100 %). */
.table-jours th.col-personne { padding: 0; height: 1px; }
.table-jours th.col-personne > .tete-personne {
    height: 100%; min-width: 148px; padding: 4px 6px; box-sizing: border-box;
}

/* Le week-end, en bandeau franc, comme au planning de production. */
.table-jours tr.jour-weekend > td,
.table-jours tr.jour-weekend > .col-jour { background: rgba(197, 136, 68, .22); }
.table-jours tr.jour-weekend > .col-jour { color: var(--texte-doux); }
.table-jours tr.jour-aujourdhui > .col-jour { box-shadow: inset 3px 0 0 0 var(--accent); }
.table-jours tr.jour-aujourdhui > td { background: var(--accent-clair); }


/* ------------------------------------------------------------------ une tache */

.tache-planning {
    position: relative; display: block; width: 100%;
    margin-bottom: 2px; padding: 3px 16px 3px 5px;
    border: 1px solid var(--bord-fort); border-radius: 3px;
    background: var(--fond-barre); color: var(--texte);
    font-size: 11px; line-height: 1.3; text-align: left;
    cursor: pointer;
}
.tache-planning:hover { border-color: var(--accent); }

/* Posee par le suivi de creation : on la reconnait sans avoir a lire l'info-bulle. */
.tache-planning.auto { border-left-width: 3px; }

.tache-planning .heure-tache { font-weight: 600; margin-right: 3px; }

/* Le temps estime au dossier, pose a droite du libelle. */
.tache-planning .heures-tache {
    float: right; font-weight: 600; opacity: .85; margin-left: 4px;
}
.tete-personne .charge-personne {
    display: block; font-size: 11px; font-weight: 600; opacity: .8;
}

/* Une colonne se tire par son en-tete ; la croix la retire du tableau. */
.tete-personne { position: relative; }
.tete-personne[draggable=true] { cursor: grab; }
.tete-personne.prise { opacity: .5; }
.croix-colonne {
    position: absolute; top: 1px; right: 2px;
    width: 15px; height: 15px; padding: 0; line-height: 13px;
    border: none; border-radius: 3px; background: transparent;
    color: inherit; opacity: 0; cursor: pointer; font-size: 14px;
}
.tete-personne:hover .croix-colonne { opacity: .6; }
.croix-colonne:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.tache-planning .lib-tache { font-weight: 600; }
.tache-planning .projet-tache {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: .9;
}

.croix-tache {
    position: absolute; top: 1px; right: 1px;
    width: 14px; height: 14px; padding: 0; line-height: 12px;
    border: none; border-radius: 3px; background: transparent;
    color: inherit; opacity: 0; cursor: pointer; font-size: 13px;
}
.tache-planning:hover .croix-tache { opacity: .7; }
.croix-tache:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.croix-tache:disabled { display: none; }

/* Ce qui attend un jour : le chiffre dans la legende ouvre la boite. */
.lien-integrer {
    border: none; background: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--accent-fonce); text-decoration: underline;
}
.table-integrer td, .table-integrer th { vertical-align: middle; }
.table-integrer input[type=date] {
    height: 26px; padding: 0 5px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.aide-integrer { margin: 0 0 10px 0; line-height: 1.4; }

/* ------------------------------------------------- la fiche de tache, en FI */

.boite.boite-tache {
    width: 620px; max-width: 94vw; max-height: 88vh;
    display: flex; flex-direction: column;
}
.fenetre-fi-corps {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.fenetre-fi-corps > .corps-volet { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.fenetre-fi-corps > .barre-boutons {
    flex: none; border-top: 1px solid var(--bord); padding: 8px 10px;
}

/* La barre de titre porte l'identite de la tache : son numero, son type avec
   sa couleur, et d'ou elle vient. Le reste n'a plus besoin de le repeter. */
.entete-tache {
    display: flex; align-items: center; gap: 8px; flex: none;
    padding: 7px 12px; border-bottom: 1px solid var(--bord);
    background: var(--fond-barre);
}
.entete-tache .no-tache { font-weight: 600; }

/* Huit champs, une grille etiquette / champ : les cinq titres de section
   doublaient la hauteur de la fiche sans rien dire de plus. */
.grille-tache {
    display: grid; grid-template-columns: 78px 1fr; gap: 7px 10px;
    align-items: center;
}
.grille-tache > label { color: var(--texte-doux); }
.grille-tache > select,
.grille-tache > textarea { width: 100%; }
.grille-tache > select {
    height: 28px; padding: 0 6px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.grille-tache > textarea, .grille-tache > .dossier-tache,
.grille-tache > .sans-dossier, .grille-tache > .aide-champ { align-self: start; }
.grille-tache > label:has(+ textarea) { align-self: start; padding-top: 4px; }
.grille-tache .aide-champ { margin: 0; }

/* Debut et fin sur une ligne : toute la table tient sur un jour. */
.ligne-quand { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ligne-quand input[type=date] { flex: 0 0 132px; }
.ligne-quand input[type=time] { flex: 0 0 92px; }
.ligne-quand input {
    height: 28px; padding: 0 6px; font: inherit;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}

.ecran-fiche-tache .saisie-zone {
    padding: 4px 6px; font: inherit; resize: vertical;
    background: var(--fond-carte); color: var(--texte);
    border: 1px solid var(--bord-fort); border-radius: var(--r);
}
.ecran-taches-repet .ligne-saisie > input[type=time] { flex: 0 0 96px; }

/* Ce qui partira dans le dossier : ca se lit avant de cliquer Enregistrer. */
.bandeau-echeance {
    display: flex; align-items: center; gap: 6px; line-height: 1.35;
    margin: 12px 0 0 0; padding: 6px 9px; border-radius: var(--r);
    border: 1px solid var(--accent-clair); background: var(--accent-clair);
    color: var(--accent-fonce);
}
.bandeau-echeance.discret {
    border-color: var(--bord); background: var(--fond-barre);
    color: var(--texte-faible);
}

/* Le dossier auquel la tache est rattachee : lecture seule, mais visible. */
.dossier-tache {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    padding: 4px 8px; border-radius: var(--r);
    border: 1px solid var(--bord); background: var(--fond-barre);
}
.dossier-tache .nom-dossier { font-weight: 600; }
.sans-dossier { line-height: 1.35; }