/* GLOBALS */
* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  outline: 0 !important;
  border: 0;
  /* scrollbar-width: auto; */
}

label {
  color: var(--text-over-background);
  width: 200px;
  margin: 4px;
}

select {
  min-width: 150px;
}

button::-moz-focus-inner {
  border: 0;
}

ul {
  padding: 0;
  list-style: none;
  width: 100%;
  margin: 0;
}

ul li {
  margin: 16px 0;
  position: relative;
}

/**********************************************************************************************************************/

.track {
  position: absolute;
  top: 40%;
  left: 50%;
  animation: trackAnimate 10s infinite;
}

@keyframes trackAnimate {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: calc(100vh - var(--header-height) - 10px);
    left: 0;
  }
}

/**********************************************************************************************************************/
/* LOADING CIRCLE */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/**********************************************************************************************************************/
/* BLINK ICONS OR ANYTHING */
.blink {
  animation: blink 2s steps(5, start) infinite;
  -webkit-animation: blink 1s steps(5, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}

/**********************************************************************************************************************/
.bell-alarm-off {
  color: var(--icon-foreground)
}

.bell-alarm-on {
  color: #f44336;
}

/**********************************************************************************************************************/
/* LIST VIEW */
.list-entry {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  display: table;
  clear: both;
}

.list-entry:nth-child(odd) {
  background-color: rgb(190, 190, 190);
}

/**********************************************************************************************************************/
/* FORMULAIRES */
/* Style inputs with type="text", select elements and textareas */
input[type=text],
input[type=password],
input[type=number],
select,
textarea {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
  resize: none;
  /* Allow the user to vertically resize the textarea (not horizontally) */

  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
}

input:focus,
textarea:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

/* styles de base */
.input-file-container {
  position: relative;

  padding-top: 20px;
}

.input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: var(--button-background);
  color: var(--button-foreground);
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.input-file {
  position: absolute;
  top: 0;
  left: 0;

  padding: 14px 0;
  opacity: 0;
  cursor: pointer;
}

/* quelques styles d'interactions */
.input-file:hover+.input-file-trigger,
.input-file:focus+.input-file-trigger,
.input-file-trigger:hover,
.input-file-trigger:focus {
  filter: brightness(85%);
}

/**********************************************************************************************************************/
/* IMAGES */
.responsive {
  width: 100%;
  height: auto;
}

/**********************************************************************************************************************/
/* FLAT DROPDOWN */
select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>");
  background-color: var(--button-background);
  background-repeat: no-repeat;
  background-position: right 10px top 15px;
  background-size: 16px 16px;
  color: var(--button-foreground);
  padding: 12px;
  width: auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  transition: 0.3s ease all;
}

.select-blue {
  background-color: var(--button-background);
}

select:focus,
select:active {
  border: 0;
  outline: 0;
}

/**********************************************************************************************************************/

.box-container {
  background-color: brown;
  border: 3px solid #eee;
  margin: 10px;
  padding: 10px;
  float: left;
  text-align: center;
  max-width: 20%
}

/**********************************************************************************************************************/
/*
 Clickable list
*/
.leftsideMenu {
  justify-content: flex-start;
  width: 300px;
}

.leftsideMenu div {
  border-bottom: 1px solid lightgray;
  background-color: var(--button-background);
}

.leftsideMenu div a {
  padding: 8px 20px 8px 20px;
  color: white;
  display: block;
  text-decoration: none;
}

.leftsideMenuActive {
  background-color: SteelBlue;
}

/**********************************************************************************************************************/
/**
 Rounded icon Fab style
 */
.fab {
  width: 40px;
  height: 40px;
  background-color: tomato;
  border-radius: 50%;
  box-shadow: 0 6px 10px 0 #666;
  transition: all 0.1s ease-in-out;

  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 40px;

}

.fab:hover {
  box-shadow: 0 6px 14px 0 #666;
  transform: scale(1.05);
  cursor: pointer;
}

/**********************************************************************************************************************/
/* Style buttons des menus (avec icône) */
.menu-button {
  background-image: url('/icons/button_base.png');
  background-repeat: no-repeat !important;
  background-size: cover !important;
  display: inline-block;
  width: var(--vertical-menu-width);
  height: var(--vertical-menu-width);
  padding: 0;
  margin: 0;
  color: #000;
  background-color: transparent;
  text-shadow: 1px 1px 1px #fff;
  font-size: 1.2em;
  cursor: pointer;
  user-select: none;
}

.menu-active {
  background-image: url('/icons/button_selected.png') !important;
  color: #51b8f1;
}


/**********************************************************************************************************************/

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {
  background-color: #4CAF50;
}

.alert.info {
  background-color: #2196F3;
}

.alert.warning {
  background-color: #ff9800;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/**********************************************************************************************************************/
/* HORIZONTAL PROGRESS BAR */

.progress {
  position: relative;
  background-color: var(--icon-background);
  transition: width 0.3s ease-in-out; /* Rend la progression plus fluide */
}

.bar {
  width: 0%;
  height: 30px;
  background-color: green;
  text-align: center;
  line-height: 30px;
  color: black;
}

.bar-text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: var(--icon-foreground);
}

/**********************************************************************************************************************/
/* GENERIC METAL EFFECT */

.v-metal-separator {
  width: var(--separator-width, 2px);
  height: var(--separator-height, 95%);
  margin-top: 3px;
  border-radius: 40%;
  background: linear-gradient(to bottom, #000 0%, #000 5%, #5d5d5d 15%, #000 50%);
  top: 0;
  left: 0;
  flex-shrink: 0;
}

.h-metal-separator {
  width: var(--separator-width, 95%);
  height: var(--separator-height, 2px);
  margin-top: 3px;
  border-radius: 40%;
  background: linear-gradient(to right, #000 0%, #000 5%, #5d5d5d 15%, #000 50%);
  top: 0;
  left: 0;
  flex-shrink: 0;
}

/**********************************************************************************************************************/
/* QFU PANEL */

.qfu-panel {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px; /* ✅ marge bas panneau */
  align-items: center;
}

.qfu-panel-title {
  margin-bottom: 14px;
  text-align: center;
  font-size: 1em; /* ✅ même taille que EXT CMD */
  color: #f0f0f0;
}

.qfu-buttons {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* ✅ répartit les boutons sur la hauteur */
  align-items: center; /* ✅ centre les boutons horizontalement */
}

/**********************************************************************************************************************/
/* CONTROL PANEL */

.group-control-panel {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.group-control-title {
  margin-bottom: 20px;
  font-size: 1em;
  color: #f0f0f0;
  text-align: center;
}

.group-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start; /* Ne pousse plus en bas */
  gap: 16px; /* ✅ espace régulier entre les boutons */
}

.group-button-wrapper {
  position: relative;
  width: 120px;
  height: 55px;
  cursor: pointer;
}

.group-button-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

.group-button-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #3D3D3D;
  pointer-events: none; /* ✅ évite de bloquer les clics */
  z-index: 1;
}

/**********************************************************************************************************************/
/* VERTICAL SPINNER */

.spinner-container {

  font-size: 16px;
  justify-content: center;
  list-style: none;
  display: flex;
  flex-flow: column;

  background-color: grey;

  width: 40px;
  height: 140px;
  max-width: 40px;
}

.spinner-arrow {
  flex-grow: 1;
  background-color: #1a1a1a;
  border: 1px solid black;
  color: white;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  caret-color: transparent;
  user-select: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */

  transition: all 0.4s ease-in;
}

.spinner-value {
  flex-grow: 3;
  border: 1px;
  color: white;
  border-style: none solid;
  border-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

/**********************************************************************************************************************/
/* AG-GRID CUSTOM  */
.ag-body-viewport {
  overflow-y: scroll !important;
  overflow-x: scroll !important;
}

/**********************************************************************************************************************/
/* VIRTUAL KEYBOARD  */
.keyboard .key-line {
  margin: 6px 6px 6px 0;
  padding: 0;
}
.keyboard .key-input {
  display: inline;
  margin-right: 6px;
  list-style-type: none;
}
#key-func-space {
  width: 10em;
}

#moveable {
  position: absolute;
  z-index: 9999;
  top: var(--header-height);
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}

#handle {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

.hideP {
  visibility: hidden;
}

/**********************************************************************************************************************/
/* BRUSHED METAL  */

/* Metal ------------------------- */

.metal {
  /* position: relative; */
  /* margin: 40px auto; */
  outline: none;
  /* font: bold 6em/2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; */
  /* text-align: center; */
  color: hsla(0,0%,20%,1);
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
  
  background-color: hsl(0,0%,90%);
  box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
    hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */ 
  
  transition: color .2s;
}

/* Radial ------------------------- */

.radial.metal {
  width: 160px;
  height: 160px;
  line-height: 160px;
  border-radius: 80px;
  background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    
    -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}

.metal.radial:before, .metal.radial:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  
  /* fake conical gradients */
  background-image: -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.metal.radial:before { transform: rotate( 65deg); }
.metal.radial:after { transform: rotate(-65deg); }

/* Linear ------------------------- */

.metal.linear {
  width: 100px;
  font-size: 4em;
  height: 80px;
  border-radius: .5em;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
    
    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
}

/* Oval ------------------------- */

.metal.linear.oval {
  margin-top: 100px;
  width: 70px;
  height: 60px;
  line-height: 60px !important;
  border-radius: 50%;
  font: italic bold 3em/50px Georgia, "Times New Roman", Times, serif;
}

/* active ------------------------- */

.metal:active {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  box-shadow: 
    inset hsla(210,100%,30%,  1) 0  0px 0px 4px, /* border */
    inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */
    inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL */
}