body {
	font-family: Arial;
	font-size:10px;
	-webkit-user-select: none;       
	-moz-user-select: none; 
	-ms-user-select: none;
	user-select: none;
}

.top {
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	background-color:#FFFFFF;
	z-index:10;
}

table {
	border:0px;
	width: 100%;
	font-family: Arial;
	font-size:9px;
	text-align:center;
}
tr {
	height:18px;
}	
td {
  position: relative;
  overflow: visible; 
}
.epais {
	border:2px solid #000;
	width:100%;
}
.fin {
	border:1px solid #000;
	width:50%;
}

.tooltip-wrapper {
	position: relative;
	display: inline-block; 
}

.tooltiptext {
	visibility: hidden;
	opacity: 0;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 6px 10px;
	position: absolute;
	z-index: 100;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	transition: opacity 0.3s;
	pointer-events: none;
}

.tooltip-wrapper:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.baie {
	display:inline-block;
	width:200px;
	margin:15px;
	font-family: Arial;
	font-size:12px;
	text-align:center;
}

.temperature {
	font-size:9px;
}

@media (max-width: 500px) {
	.baie {
		width:90%;
	}
}

.type_windows {
	display:inline-block;
	position:relative;
	top:1px;
	background-image:url('type_windows.png');
	background-size:contain;
	width:10px;
	height:10px;		
	margin-right:4px;
}
.type_linux {
	display:inline-block;
	position:relative;
	top:1px;
	background-image:url('type_linux.png');
	background-size:contain;
	width:10px;
	height:10px;
	margin-right:4px;
}
.legende {
	display:inline-block;
	position:relative;
	margin-right:20px;
}
.legende_carree {
	display:inline-block;
	position:relative;
	top:1px;
	width:10px;
	height:10px;		
	margin-right:4px;
	border:1px solid #333;
}
select {
	font-family: Arial;
	font-size:10px;
	background-color:#fff;
	border:1px solid #000;
}

.note_bottom {
	display:block;
	cursor:pointer;
	color:#3C92C0;
}
.note_bottom img {
	position:relative;
	top:2px;
}



/* Hidden native input */
#fileInput { display: none; }

input[type="text"] {
  border: 1px solid #46AFE8;
  border-radius: 3px;
  padding: 6px 10px;
  text-align:center;
  font-size:12px;
  height:30px;
  width:100%;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="button"]:focus, input[type="submit"]:focus, input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="button"]:hover, input[type="submit"]:hover {
	outline: none;
}

#simulationModelId {
  border: 1px solid #46AFE8;
  border-radius: 3px;
  padding: 6px 10px;
  text-align:center;
  font-size:12px;
  height:30px;
  width:100%;
}

.card {
	position:relative;
	display:inline-grid;
	width:500px;
	height:430px;
	border-radius:10px;
	border:1px solid #46AFE8;
	padding:20px;
	background-color:#EEE;
	margin:20px;
}

/* ── Bouton Choisir ── */
.btn-choose {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #46AFE8;
  color: #FFF;
  font-family: Arial;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .55rem 1.1rem;
  border: 0px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
  width: 100%;
  justify-content: center;
  margin-bottom: 5px;
}
.btn-choose:hover {
  background: #000;
}
.btn-choose svg { flex-shrink: 0; }

/* ── Bouton Envoyer ── */
.btn-send {
  position:absolute;
  right:20px;
  bottom:10px;
  display: none;
  align-items: center;
  gap: .5rem;
  background: #46AFE8;
  color: #FFF;
  font-family: Arial;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .55rem 1.1rem;
  border: 0px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
  width: 200px;
  justify-content: center;
}
.btn-send:hover {
  background: #000;
}
.btn-send svg { flex-shrink: 0; }

/* ── Listbox zone ── */
.list-wrapper {
  border: 1px solid #46AFE8;
  border-radius: 3px;
  overflow: auto;
  height: 270px;
  background: #FFF;
  position: relative;
}

/* Empty state */
.empty-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color:#777
  font-family: Arial;
  font-size: .72rem;
  letter-spacing: .04em;
  transition: opacity .25s;
}
.empty-hint svg { opacity: .35; }

#fileList {
  list-style: none;
  padding: .4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.file-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: calc(3px - 2px);
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
}
@keyframes itemIn {
  from { opacity:0; transform: translateX(-8px); }
  to   { opacity:1; transform: translateX(0); }
}
.file-item:hover  { background: rgba(255,255,255,.04); }
.file-item.active {
  background: #DCF3FF;
}

.file-info {
  display: flex;
  align-items: center;
  gap: .65rem;
  overflow: hidden;
}

.file-ext {
  font-family: Arial;
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 3px;
  background: #46AFE8;
  color: #FFF;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.file-name {
  font-family: Arial;
  font-size: .78rem;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size, .file-date {
  text-align: right;
  font-family: Arial;
  font-size: .66rem;
  color: #777;
  flex-shrink: 0;
}

.file-size {
  min-width: 50px;
}

.file-date {
  min-width: 120px;
}

/* ── Bouton Supprimer ── */
.btn-delete {
  display: none;
  align-items: center;
  gap: .4rem;
  background: #FFF;
  border: 1px solid #F00;
  color: #F00;
  font-family: Arial;
  font-size: .72rem;
  letter-spacing: .05em;
  padding: .45rem .9rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, color .2s;
  width: 120px;
  justify-content: center;
  position:absolute;
  bottom:10px;
  right:20px;
}
.btn-delete.visible { display: inline-block; }
.btn-delete:hover {
  background: #FCC;
}


/* ── Bouton Télécharger ── */
.btn-download {
  display: none;
  align-items: center;
  gap: .4rem;
  background: #46AFE8;
  border: 1px solid #46AFE8;
  color: #FFF;
  font-family: Arial;
  font-size: .72rem;
  letter-spacing: .05em;
  padding: .45rem .9rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, color .2s;
  width: 120px;
  justify-content: center;
  position:absolute;
  bottom:10px;
  right:150px;
}
.btn-download.visible { display: inline-block; }
.btn-download:hover {
  border: 1px solid #000;
  background: #000;
}

/* ── Stats bar ── */
.stats {
  font-family: Arial;
  font-size: .68rem;
  color:#777;
  display: flex;
  justify-content: space-between;
  position:absolute;
  bottom:20px;
  width:120px;
  text-align:left;
}

/* ── Error toast ── */
#errorToast {
  display: none;
  margin-top: .8rem;
  background: #FCC;
  border: 1px solid #F00;
  border-radius: 3px;
  padding: .5rem .9rem;
  font-family: Arial;
  font-size: .72rem;
  color: #F00;
}
#errorToast.show {
  display: block;
  animation: fadeUp .25s ease forwards;
}

@keyframes fadeUp {
  from { opacity:0; transform: translateY(18px); }
  to   { opacity:1; transform: translateY(0); }
}



#popup_miseenligne {
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	width:300px;
	height:160px;
	text-align:center;
	margin:auto;
	padding:30px;
	background-color:#FFF;
	border-radius:1.5rem;
	box-shadow:0 6px 32px rgba(16,32,64,0.08);
	z-index:5100;
}

#popup_button {
	display: none;
	background-color: #46AFE8;
	color: #FFF;
	padding: 8px 20px;
	border-radius: 3px;
	border:0px;
	margin-top: 25px;
	cursor:pointer;
}
#popup_button:hover {
	background-color: #000;
}

.progress_container {
    width: 100%;
    height: 20px;
}

.progress_bar {
    height: 100%;
    width: 0%;
    background-color: #46AFE8;
	border-radius:10px;
    transition: width 0.2s;
	margin-top:20px;
}

#blur {
	display:none;
	position: fixed;
	top: 0px;
	left:0px;
	bottom:0px;
	right:0px;
	backdrop-filter: blur(5px) contrast(80%);
	z-index:5000;
	-webkit-animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.simulation_state {
  position:relative;
  font-family: Arial;
  font-size: 8px;
  font-weight: 600;
  border-radius: 3px;
  color: #FFF;
  letter-spacing: -0.3px;
  width:55px;
  height:20px;
  line-height:20px;
  text-align:center;
  margin-left:10px;
  overflow:hidden;
}

tr.selected-row td {
    background: #DCF3FF;
}

.tooltip_state {
  visibility: hidden;
  opacity: 0;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px 10px;
  position: fixed;
  z-index: 9999;
  white-space: nowrap;
  transition: opacity 0.3s;
  pointer-events: none;
  font-family: Arial;
  font-size: 11px;
}
.tooltip_state.visible {
  visibility: visible;
  opacity: 1;
}

.tooltip_state table {
	color: #fff;
	border-collapse:collapse;
	background-color: #333 !important;
}
.tooltip_state tr {
    border: 1px solid #FFF;
	background-color: #333 !important;
}
.tooltip_state td {
    border: 1px solid #FFF;
	background-color: #333 !important;
}

#card_simulations_adms {
	position:absolute;
	top:60px;
	right:20px;
	left:20px;
	bottom:60px;
	overflow:auto;
	background-color:#fff;
	padding:10px;
	border-radius:3px;
	border:1px solid #46AFE8;
}