:root {
    --background-page: linear-gradient(343deg,rgba(215, 239, 250, 1) 50%, rgba(208, 238, 255, 1) 50%, rgba(208, 238, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
    --inhead-textColor: #004aad; 
    --background-test: red;
/* BlockCounter */
    --background-BlockCounter: #ffffff;
    --circleColor-marron: #c4af85;
    --circleColor-vert: #95d472;
    --circleColor-rouge: #ff9786;
    --circleColor-jaune: #ffde58;
    --circleColor-orange: #ffb070;
    --circleColor-violet: #bda6ff;
    --circleColor-bleu: #70a0ef;
    --circleColor-rose: #ffa0e1;
    --circleColor-gray: #88888832;
    --policePrincipal: 'Open Sans';
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans' !important;
    list-style: none;
    text-decoration: none;
}

h1, h2, h3 {
    color: var(--inhead-textColor);
}

.open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
    /* height: 100vh; */
    width: 100vw;
    background: var(--background-page);
    background-attachment: fixed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


/* HEADER */


header {
    padding: 0 20px;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .right img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

header .left {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

header .left img {
    height: 25px;
    width: 25px;
}

/* TEXTE HEADER */


.textPage {
    color: var(--inhead-textColor);
    display: flex;
    justify-content: center;
    align-items: center;
}

.textPage .dateLineup {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Styles pour l'indicateur de date du Line-Up --- */

/* VERT : Line-Up actuel (correspond à la date du jour) */
.dateLineup.lineup-date-valid {
    color: #00AA4D !important; /* Vert Vif ou votre couleur de validation */
    font-weight: bold;
}

/* ROUGE : Line-Up obsolète (ne correspond pas à la date du jour) */
.dateLineup.lineup-date-stale {
    color: #DD0000 !important; /* Rouge Vif ou votre couleur d'avertissement */
    font-weight: bold;
    animation: blink 1.5s infinite; /* Optionnel : pour attirer l'attention */
}

/* Optionnel : animation de clignotement pour le rouge */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* PAGE CONTENT */


.content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
    flex-direction: column;
}


/* Block Button */


.blockButton {
    width: 80vw;
}

.Button {
    margin: 15px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-radius: 50px;
}

.Button a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: var(--inhead-textColor);
}

.arrowNext {
    width: 25px;
}


/* LISTING BEDOUIN */


.bedouinCostumer {
    width: 100%;
    height: 18vh;
    display: flex;
    justify-content: space-evenly;
}


/* LISTING CUIR */


.CuirCostumer {
    width: 100%;
    height: 18vh;
    display: flex;
    justify-content: space-evenly;
}


/* BlockCounter TAILLE 1 */


.BlockCounterTaille1 {
    background-color: var(--background-BlockCounter);
    width: 100px;
    height: 135px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    border-radius: 15px 15px 50px 50px;
    flex-direction: column;
}

.BlockCounterTaille1 .text {
    text-align: center;
    color: var(--inhead-textColor);
    font-size: 15px;
    font-weight: bold;
    margin-top: 5px;
}

.BlockCounterTaille1 .circle .Count {
    width: 80px;
    height: 80px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.BlockCounterTaille1 .circle p {
    font-size: 35px;
    font-weight: bold;
    color: var(--inhead-textColor);
}


/* BlockCounter TAILLE 2 */


.BlockCounterTaille2 {
    background-color: var(--background-BlockCounter);
    width: 80px;
    height: 105px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    border-radius: 15px 15px 50px 50px;
    flex-direction: column;
}

.BlockCounterTaille2 .text {
    text-align: center;
    color: var(--inhead-textColor);
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
}

.BlockCounterTaille2 .circle .Count {
    width: 65px;
    height: 65px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.BlockCounterTaille2 .circle p {
    font-size: 25px;
    font-weight: bold;
    color: var(--inhead-textColor);
}


/* COLOR CIRCLE */


.BlockCounterTaille1 .circle #CustomerTotalText {
    background-color: var(--circleColor-marron);   
}
.BlockCounterTaille1 .circle #CustomerBedouinVert {
    background-color: var(--circleColor-vert);   
}
.BlockCounterTaille1 .circle #CustomerBedouinRouge {
    background-color: var(--circleColor-rouge);   
}
.BlockCounterTaille2 .circle #CuirJauneText {
    background-color: var(--circleColor-jaune);   
}
.BlockCounterTaille2 .circle #CuirBleuText {
    background-color: var(--circleColor-bleu);   
}
.BlockCounterTaille2 .circle #CuirOrangeText {
    background-color: var(--circleColor-orange);   
}
.BlockCounterTaille2 .circle #CuirRoseText {
    background-color: var(--circleColor-rose);   
}
.BlockCounterTaille2 .circle #CuirVioletText {
    background-color: var(--circleColor-violet);   
}


/* BLOCK BUTTON CONTROL */


.BlockControle {
    display: flex;
    width: 100%;
    min-height: 40px;
    margin: 8px 0 0;
    justify-content: center;
    flex-wrap: wrap;
    max-height: 100px;
    height: inherit;
}

.BlockControle button {
    background-color: var(--background-BlockCounter);
    border: none;
    border-radius: 7px;
    display: flex;
    color: #004aad;
    font-family: var(--policePrincipal);
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    justify-content: space-evenly;
    margin: 5px 6px;
    padding: 3px 2px;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
    max-height: 35px;
}

.BlockControle button span {
    display: flex;
}

.BlockControle button span, p {
    padding: 0 10px;
}

.BlockControle button:hover {
    background-color: rgb(242, 242, 242);
    outline-color: #70a0ef;
    outline-width: 1px;
    outline-style: solid;
    outline-offset: 1px;
}

.BlockControle button:active {
    background-color: rgb(242, 242, 242);
    outline-color: #2f77eb;
    outline-width: 1.5px;
    outline-offset: 1.3px;
}


/* BAR DE RECHERCHE */


.searchdiv {
    width: 100%;
    display: flex;
    justify-content: center;
}

.SearchCostumer {
    background-color: var(--background-BlockCounter);
    border: #80808057 1px solid;
    border-radius: 7px;
    display: flex;
    color: #004aad;
    font-family: var(--policePrincipal);
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    justify-content: space-evenly;
    padding: 5px 15px;
    cursor: pointer;
}


/* LISTE PERFORMER */

.contentCostumer {
    display: flex;
    padding: 2rem;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.BlockPerformer {
    margin: 10px;
    padding: 10px;
    width: 270px;
    height: 120px;
    border-radius: 20px;
    background-color: var(--background-BlockCounter);
}

.BlockPerformer .headerBlockPerformer {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.BlockPerformer .headerBlockPerformer .editCostumerBtn, .deleteCostumerBtn {
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
}

.BlockPerformer h3 {
    font-size: medium;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 195px;
    overflow: hidden;
}

.BlockPerformer .CircleColorPerformer {
    display: flex;
}

.BlockPerformer .CircleColorPerformer .bedouin, .cuir {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-start;
    color: #80808094;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    font-family: var(--policePrincipal);
}


.BlockPerformer .CircleColorPerformer .bedouin .Circle {
    width: 30px;
    height: 30px;
    border-radius: 50px;
}

.BlockPerformer .CircleColorPerformer .bedouin #Rouge {
    background-color: var(--circleColor-rouge);
}
.BlockPerformer .CircleColorPerformer .bedouin #Vert {
    background-color: var(--circleColor-vert);
}
.BlockPerformer .CircleColorPerformer .bedouin #Verte {
    background-color: var(--circleColor-vert);
}
.BlockPerformer .CircleColorPerformer .bedouin #Gray {
    background-color: var(--circleColor-gray);
}
/*  */
.BlockPerformer .CircleColorPerformer .bedouin #ROUGE {
    background-color: var(--circleColor-rouge);
}
.BlockPerformer .CircleColorPerformer .bedouin #VERT {
    background-color: var(--circleColor-vert);
}
.BlockPerformer .CircleColorPerformer .bedouin #VERTE {
    background-color: var(--circleColor-vert);
}



.BlockPerformer .CircleColorPerformer .cuir .Circle {
    width: 30px;
    height: 30px;
    border-radius: 50px;
}

.BlockPerformer .CircleColorPerformer .cuir #Orange {
    background-color: var(--circleColor-orange);
}
.BlockPerformer .CircleColorPerformer .cuir #Jaune {
    background-color: var(--circleColor-jaune);
}
.BlockPerformer .CircleColorPerformer .cuir #Bleu {
    background-color: var(--circleColor-bleu);
}
.BlockPerformer .CircleColorPerformer .cuir #Rose {
    background-color: var(--circleColor-rose);
}
.BlockPerformer .CircleColorPerformer .cuir #Violet {
    background-color: var(--circleColor-violet);
}
/*  */
.BlockPerformer .CircleColorPerformer .cuir #ORANGE {
    background-color: var(--circleColor-orange);
}
.BlockPerformer .CircleColorPerformer .cuir #JAUNE {
    background-color: var(--circleColor-jaune);
}
.BlockPerformer .CircleColorPerformer .cuir #BLEU {
    background-color: var(--circleColor-bleu);
}
.BlockPerformer .CircleColorPerformer .cuir #ROSE {
    background-color: var(--circleColor-rose);
}
.BlockPerformer .CircleColorPerformer .cuir #VIOLET {
    background-color: var(--circleColor-violet);
}


.BlockPerformer .CircleColorPerformer .cuir .TextDescCuir {
    font-size: small;
}











/* --- DIALOG STYLING --- */
#confirmationDialog {
    padding: 20px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #ffffff;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#confirmationDialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

#confirmationDialog h3 {
    margin-bottom: 15px;
    color: var(--inhead-textColor);
}

#csvDataTable {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.9em;
    min-width: 400px;
}

#csvDataTable thead tr {
    background-color: var(--inhead-textColor);
    color: white;
    text-align: left;
    font-weight: bold;
}

#csvDataTable th, #csvDataTable td {
    padding: 10px 15px;
    border: 1px solid #ddd;
}

#csvDataTable tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

#csvDataTable tbody tr:hover {
    background-color: #f1f8ff;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.dialog-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

#cancelImport {
    background-color: #ccc;
    color: #333;
}

#confirmImport {
    background-color: var(--inhead-textColor);
    color: white;
}


/* --- DIALOG STYLING (à ajouter si non présent) --- */
#confirmationDialog, #addDancerDialog, #editDancerDialog, #columnSelectionDialog {
    padding: 20px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: #ffffff;
    max-width: 90%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    text-align: center;
    margin: auto;
}

#confirmationDialog::backdrop, #addDancerDialog::backdrop, #editDancerDialog::backdrop, #columnSelectionDialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Styles pour les formulaires dans les modales */
#addDancerForm label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

#addDancerForm, #columnSelectionDialog input[type="text"], 
#addDancerForm, #columnSelectionDialog select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Styles des boutons d'actions (déjà dans votre CSS ajouté précédemment) */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.dialog-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

#editDancerDialog {
    width: 350px;
    margin-bottom: auto;
}


/* LISTING COSTUMER */


.listCostumerLineup {
    width: 100%;
    background-color: #fafff7;
    display: flex;
    border-radius: 20px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.listCostumerLineup .blockListCostumerUnite .bannerUnit {
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.blockListCostumerUnite {
    background-color: var(--background-BlockCounter);
    border-radius: 10px;
    border: solid 1px rgba(0, 0, 0, 0.459);
    width: 350px;
    margin: 10px 0;
}

.CostumerDiv {
    margin: 0 0 5px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.CostumerPose {
    background-color: #f5f5f5;
    width: 95%;
    border: 1px solid rgba(0, 0, 0, 0.123);
    border-radius: 6px;
    padding: 1px;
    margin: 3px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.CostumerPose p {
    width: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-width: 50%;
}

.CostumerPose .CostumerSelect {
    width: 50%;
    color: var(--inhead-textColor);
    border: solid 1px #0000001f;
    border-radius: 5px;
    max-width: 50%;
}

.highlight-select {
    /* Couleur bleu très clair */
    background-color: #8ac3ec !important; 
    border: 2px solid #00aaff;
    transition: background-color 0.3s ease;
}

.content .SearchCostumer {
    margin: 10px 0px;
    width: 50%;
}

.gif-background-element {
    position: fixed;
    width: 250px; /* Taille du GIF (ajustez si besoin) */
    height: 250px; /* Taille du GIF (ajustez si besoin) */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; 
    z-index: 9999; 
    pointer-events: none;
    /* ❌ SANS TRANSITION */
    /* image-rendering et autres styles... */
}

/* Positionnement du premier GIF (en haut à gauche) */
#rotatingGifBackground1 {
    top: 50px;
    left: 50px;
}

/* Positionnement du second GIF (en bas à droite) */
#rotatingGifBackground2 {
    bottom: 50px;
    right: 50px;
    /* Rotation si vous voulez un effet différent pour celui-ci */
    /* transform: rotate(15deg); */
}