/*############################################################################################################
//  Droits d'auteur © 2022-2023 P.ink, l'ancre d'une vie Tous droits réservés, en collaboration avec OptimalC
//############################################################################################################*/

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Conteneur des Panneaux
 *  ############################################################################################################
 */
div.panelID {
    position:relative;top:0;left:0;margin:0.25rem 0.5rem 0.5rem 0.5rem;padding:1rem 0.5rem;width:calc( 100% - 2.5rem );height:auto;
    display:inline-flex;flex:1 0 auto;flex-direction:row;flex-wrap:wrap;
    border-style:solid;border-width:2px;border-color:white;border-radius:0.5rem;
}
div.panelID::before {
    position:absolute;top:-8px;left:1rem;
    font-size:16px;font-weight:400;padding:0 0.5rem;
    content:"Gestion";background-color:#A7A7A7;color:#212121;text-shadow:0 0 1px #212121;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Onglets des Panneaux
 *  ############################################################################################################
 */
div.panelID > .onglet {
    padding:0 2rem;width:auto;height:50px;
    background-color:#DADADA;color:#212121;
    border-style:solid;border-width:1px 1px 0 0;border-color:var(--op-deep-blue);border-radius:0.5rem 0.5rem 0 0;
    cursor:pointer;
}
div.panelID > .onglet:first-of-type {
    border-width:1px 1px 0 1px;
}

div.panelID > .onglet.active {
    background-color:var(--op-deep-blue);color:#FAFAFA;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Conteneur
 *  ############################################################################################################
 */
div.panelID > .panelContent {

    padding:0.5rem;

    width:calc(100% - 2px);height:auto;
    display:inline-flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;
    background-color:#C7C7C7;
    border:solid 1px var(--op-deep-blue);
    border-radius:0 0.5rem 0.5rem 0.5rem;
    overflow-y:hidden;overflow-x:hidden;
}
div.panelID > .panelContent > .panelToggle {
    margin:0;padding:0;
    display:inline-flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;
    width:100%;height:auto;
}
div.panelID > .panelContent > .panelToggle.hidden {
    display:none;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Boutons
 *  ############################################################################################################
 */
.panelID > .panelContent > .panelToggle > button {
    position:relative;margin:0 0 0.25rem 0.25rem;padding:0 24px 0 48px;width:auto;max-width:256px;height:32px;
    display:inline-flex;flex:0 1 auto;align-items:center;justify-content:flex-start;
    font-weight:600;line-height:32px;
    border-style:solid;border-width:1px;border-color:#FAFAFA;border-radius:0.5rem;outline:0;
    background-color:var(--op-deep-blue);color:#FAFAFA;
    cursor:pointer;outline:0;
}

.panelID > .panelContent > .panelToggle > button:hover {
    background-color:#DADADA;color:#212121;
}
.panelID > .panelContent > .panelToggle > button::before {
    position:absolute;top:0;left:0;width:30px;height:30px;
    font-family:"FontAwesome";line-height:30px;
    background-color:var(--op-deep-blue);color:#FAFAFA;
    border-style:solid;border-width:0 1px 0 0;border-color:#FAFAFA;border-radius:0.5rem 0 0 0.5rem;
}
.panelID > .panelContent > .panelToggle > button.addButton::before {
    content:"\F067";
}
.panelID > .panelContent > .panelToggle > button.searchButton::before {
    content:"\F002";
}
.panelID > .panelContent > .panelToggle > button.refreshButton::before {
    content:"\F021";
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Tablature
 *  ############################################################################################################
 */
.panelID > .panelContent > .panelToggle > table {
    width:100%;margin:0;padding:0;
    table-layout:fixed;border-collapse:separate;border-spacing:0.25rem;
}
.panelID > .panelContent > .panelToggle > table > caption {
    width:calc( 100% - 0.5rem );height:24px;margin:0 0.25rem 0 0.25rem;padding:0;
    background-color:var(--op-deep-blue);color:#FAFAFA;
    font-weight:800;line-height:24px;
    border:none;border-radius:0.5rem;
}
.panelID > .panelContent > .panelToggle > table > tr > th {
    margin:0;padding:0 0.25rem 0 0.25rem;height:24px;
    font-family:"FontAwesome";font-weight:800;line-height:24px;text-align:left;
    background-color:#4A4A4A;color:#FAFAFA;border-radius:0.5rem;
    border-style:solid;border-width:0;border-color:#DADADA;
    box-sizing:border-box;
}
/* Colonnes avec bouton lien : aligner le titre avec le contenu (après le bouton 24px) */
.panelID > .panelContent > .panelToggle > table > tr.title > th.col-link {
    padding-left:24px;
}
/* Colonnes triables : double-clic pour trier */
.panelID > .panelContent > .panelToggle > table > tr > th.sortable {
    cursor:pointer;
}
.panelID > .panelContent > .panelToggle > table > tr > th.sortable:hover {
    text-decoration:underline;
}
/* Cellule Commentaires des tâches (suivi) : textarea multi-ligne plus haut et plus large */
.panelID > .panelContent > .panelToggle > table#tabletask > tr > td[data-col="Commentaires"] textarea {
    height:40px;          /* 2 lignes environ */
    width:100%;           /* occupe toute la cellule */
    resize:vertical;      /* autorise l'utilisateur à agrandir en hauteur si besoin */
    padding-top:2px;
    padding-bottom:2px;
}
/* Onglet opérations BT: colonne technique FkRessource — largeur 0, cellules conservées.
   display:none désalignait tout le tableau avec table-layout:fixed (colgroup vs cellules visibles). */
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > th[data-col="FkRessource"],
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="FkRessource"] {
    width:0;
    min-width:0;
    max-width:0;
    padding:0 !important;
    margin:0;
    border:none;
    overflow:hidden;
    font-size:0;
    line-height:0;
    color:transparent;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="FkRessource"] {
    position:relative;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="FkRessource"] input {
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    pointer-events:none;
}
.panelID > .panelContent > .panelToggle > table#tableoperation {
    table-layout:fixed;
    width:100%;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > colgroup > col[data-col-name="FkRessource"] {
    width:0;
    max-width:0;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > colgroup > col[data-col-name="NoOperation"] {
    width:4.5rem;
    max-width:4.5rem;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > colgroup > col[data-col-name="choisirRessource"] {
    width:24px;
    max-width:24px;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > th[data-col="choisirRessource"],
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="choisirRessource"] {
    width:24px;
    min-width:24px;
    max-width:24px;
    padding:0;
    box-sizing:border-box;
    overflow:hidden;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="choisirRessource"] > button.choisirRessource {
    width:24px;
    min-width:24px;
    max-width:24px;
    height:24px;
    flex:0 0 24px;
    margin:0;
    padding:0;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="choisirRessource"] > button.choisirRessource::before {
    width:24px;
    height:24px;
    line-height:24px;
    font-size:12px;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > th[data-col="NoOperation"],
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="NoOperation"] {
    max-width:4.5rem;
    overflow:hidden;
}
/* Opérations BT : colonnes Ressource (Nom) et Durée plus étroites que le défaut global (ex. Nom 16rem) */
.panelID > .panelContent > .panelToggle > table#tableoperation > colgroup > col[data-col-name="Nom"] {
    width:6rem;
    max-width:6rem;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > colgroup > col[data-col-name="Duree"] {
    width:4.5rem;
    max-width:4.5rem;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > th[data-col="Nom"],
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="Nom"] {
    max-width:6rem;
    overflow:hidden;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > th[data-col="Duree"],
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="Duree"] {
    max-width:4.5rem;
    overflow:hidden;
}
/* Opérations BT : Description longue (Commentaires) — colonne et textarea plus larges */
.panelID > .panelContent > .panelToggle > table#tableoperation > colgroup > col[data-col-name="Commentaires"] {
    width:39rem;
    min-width:25rem;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > th[data-col="Commentaires"],
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="Commentaires"] {
    height:auto;
    min-height:2.75rem;
    vertical-align:top;
    overflow:visible;
}
.panelID > .panelContent > .panelToggle > table#tableoperation > tr > td[data-col="Commentaires"] textarea {
    width:100%;
    min-width:0;
    min-height:2.75rem;
    height:2.75rem;
    resize:vertical;
    box-sizing:border-box;
    padding:0.25rem 0.35rem;
    margin:0;
    line-height:1.35;
}
.panelID > .panelContent > .panelToggle > table > tr > td {
    padding:0;height:24px;
    vertical-align:center;align-content:center;justify-content:center;
    border-radius:0.5rem;overflow:hidden;
    box-sizing:border-box;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur {
    position:relative;top:2px;margin:0;padding:0;width:100%;height:24px;
    display:inline-flex;flex:1 1 auto;background-color:transparent;
}
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur > button.linkButton {
    margin:0;padding:0;width:24px;height:24px;
    display:inline-flex;flex:0 0 auto;
    background-color:var(--op-deep-blue);color:#FAFAFA;
    border:none;border-radius:0.5rem 0 0 0.5rem;outline:none;
    cursor:pointer;
}
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur > button.linkButton::before {
    position:absolute;top:0;left:0;width:24px;height:24px;
    font-family:"FontAwesome";line-height:24px;
    content:"\F129";
    background-color:transparent;color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td > .linkButtonConteneur > input {
    background-color:#DADADA;border-radius:0 0.5rem 0.5rem 0;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td input {
    margin:0;padding:0 0 0 0.25rem;width:calc( 100% - 0.25rem );height:24px;
    display:inline-flex;flex:1 1 auto;
    border:none;border-radius:0.5rem;outline:none;
    background-color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td input.disabled {
    background-color:#DADADA;
    
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td > button {
    margin:0;padding:0;width:32px;height:24px;
    display:inline-flex;flex:1 1 auto;justify-content:center;
    font-size:0;font-weight:bold;line-height:24px;
    background-color:var(--op-deep-blue);color:#FAFAFA;
    border:none;border-radius:0.5rem;outline:none;
    cursor:pointer;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button:hover,
.panelID > .panelContent > .panelToggle > table > tr > td > button:focus,
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer.active:hover,
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer.active:focus {
    background-color:#DADADA;color:#212121;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer {
    background-color:#7A7A7A;color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer.active {
    background-color:var(--op-deep-blue);color:#FAFAFA;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > tr > td > button::before {
    position:relative;top:0;left:0;width:32px;height:24px;
    font-family:"FontAwesome";font-size:14px;font-weight:400;
    border:none;border-radius:0.5rem;outline:none;
    color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.editer::before {
    content:"\F040";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.desactiver::before {
    content:"\F1F8";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.choisirRessource::before {
    content:"\F0C9";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.visualiser::before {
    content:"\F129";
}

.panelID > .panelContent > .panelToggle > table > tr > td > button.editerDate::before {
    content:"\F017";
}

.panelID > .panelContent > .panelToggle > table > tr > td > button.cree::before {
    content:"\F069";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.transferer::before {
    content:"\F1d8";
}
.panelID > .panelContent > .panelToggle > table > tr > td > button.consommer::before {
    content:"\F0f5";
}

.panelID > .panelContent > .panelToggle > table td:has(button:last-child):hover > button::before {
    background-color:#DADADA;color:#212121;
}
.panelID > .panelContent > .panelToggle > table td:has(button:last-child):hover > button.editer::before {
    background-color:#7A7A7A;color:#FAFAFA;
}
.panelID > .panelContent > .panelToggle > table td:has(button:last-child):hover > button.editer.active::before {
    background-color:#DADADA;color:#212121;
}
/*  --------------------------------------------------------------------------------------------------------  */

/*  ------------------------------------------------------------------------------------------------------------
 *  Division | Contenu des Panneaux | Tablature | Dimensions des colones
 *  ############################################################################################################
 */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="editer"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="desactiver"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="visualiser"] {
    width:32px;
}

.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="editerDate"] {
    width:32px;
}

.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="cree"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="transferer"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="consommer"] {
    width:32px;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Fait"] {
    width:2.5rem;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Commentaires"] {
    width:auto;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Description"] {
    width:24rem;
}
/*  --------------------------------------------------------------------------------------------------------  */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="No"] {
    width:12rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="NoManufacturier"] {
    width:12rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Magasin"] {
    width:12rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Nom"] {
    width:16rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Prix"] {
    width:6rem;
}
/* Colonne Prix : format "56 200,00$" (séparateur milliers, virgule décimale, $ après) — pas de ::before, le $ est dans la valeur */
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="LeadTime"] {
    width:6rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyEnCommande"] {
    width:4rem;
}
/* Ligne avec pièce en commande (fournisseur) : surligneur + barre orange */
.panelID > .panelContent > .panelToggle > table tr.row-q-cmd > td {
    background-color: #fff8e1;
}
.panelID > .panelContent > .panelToggle > table tr.row-q-cmd > td:first-child {
    border-left: 4px solid #e65100;
    box-sizing: border-box;
}
.panelID > .panelContent > .panelToggle > table tr.row-q-cmd > td[data-col="QtyEnCommande"] {
    border-left: 4px solid #e65100;
    box-sizing: border-box;
}
/* Ligne avec quantité sous le min (pièces / emplacements) : surligneur + barre orange */
.panelID > .panelContent > .panelToggle > table tr.row-sous-min > td {
    background-color: #fff8e1;
}
.panelID > .panelContent > .panelToggle > table tr.row-sous-min > td:first-child {
    border-left: 4px solid #e65100;
    box-sizing: border-box;
}
.panelID > .panelContent > .panelToggle > table tr.row-sous-min > td[data-col="QtyHand"] {
    border-left: 4px solid #e65100;
    box-sizing: border-box;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Min"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Max"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Qty"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyHand"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyOrder"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="QtyProject"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Date"] {
    width:10rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Operation"] {
    width:4rem;
}
.panelID > .panelContent > .panelToggle > table > colgroup > col[data-col-name="Rappel"] {
    width:10rem;
}
/* Tâche marquée Fait : cellule Rappel en vert pâle */
.panelID > .panelContent > .panelToggle > table tr.row-fait-checked td[data-col="Rappel"] input {
    background-color: #d4edda !important;
}
/* Pièce en commande (QtyOrder > 0) : fond vert pâle + barre orange à gauche de la ligne (module Pièce / Emplacements et autres listes) */
.panelID > .panelContent > .panelToggle > table tr.row-en-commande > td {
    background-color: var(--op-row-commande);
}
.panelID > .panelContent > .panelToggle > table tr.row-en-commande > td:first-child {
    border-left: 4px solid #e65100;
    box-sizing: border-box;
}
/*  --------------------------------------------------------------------------------------------------------  */