/* add-eleve.css */
/* Base */
.mathia-add-eleve{
  font-family: "Inter" !important;
  color:#0a1e36;
}

.mathia-add-eleve p,
.mathia-add-eleve a,
.mathia-add-eleve h1,
.mathia-add-eleve h2,
.mathia-add-eleve h3,
.mathia-add-eleve h4,
.mathia-add-eleve h5,
.mathia-add-eleve p a,
.mathia-add-eleve span,
.mathia-add-eleve span p,
.mathia-add-eleve span p a,
.mathia-add-eleve strong,
.mathia-add-eleve em,
.mathia-add-eleve b,
.mathia-add-eleve div,
.mathia-add-eleve div table h3,
.mathia-add-eleve dfn,
.mathia-add-eleve label {
  font-family: "Inter" !important;
  font-weight: 500 !important;
}

.mathia-row{
  display:flex;
  gap:24px;
  align-items:flex-end;
}

/* Labels */
.mathia-label{
  display:block;
  font-size:20px;
  line-height:1.1;
  margin:0 0 10px 0;
  color:#0a1e36;
}

/* Fields sizing to mimic screenshot */
.mathia-field{
  display:flex;
  flex-direction:column;
}

.mathia-field:not(.mathia-field--select){
  width:520px;
  max-width:60vw;
}

.mathia-field--select{
  width:140px;
}

/* Input */
.mathia-input{
  height:56px;
  padding:0 18px;
  border-radius:14px !important;
  border:2px solid #e6edf7 !important;
  background:#ffffff;
  font-size:18px;
  outline:none !important;
  box-sizing:border-box;
  font-weight:500
}

.mathia-input::placeholder{
  color:#9aa8bd;
}

.mathia-input:focus{
  border-color:#cfe0ff;
  box-shadow:0 0 0 4px rgba(207,224,255,.55);
}



/* Select (pill with arrow) */
.mathia-select{
  height:56px;
  padding:0 44px 0 18px;
  border-radius:14px;
  border:2px solid #e6edf7;
  background:#ffffff;
  font-size:18px;
  font-weight:500;
  color:#0b1f3a;
  outline:none !important;
  box-sizing:border-box;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* Down arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, #8fa2bf 50%),
    linear-gradient(135deg, #8fa2bf 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 24px,
    calc(100% - 16px) 24px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.mathia-select:focus{
  border-color:#cfe0ff;
  box-shadow:0 0 0 4px rgba(207,224,255,.55);
}

/* Check button */
.mathia-check{
  width:56px;
  height:56px;
  border-radius:14px !important;
  border:0;
  background:#70C8EE !important;
  color:#0a1e36 !important;
  font-size:2.2em !important;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  outline:none !important;
}

/* Disabled = pale/unclickable, Active = a bit stronger */
.mathia-check:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.mathia-check.is-active{
  opacity:1;
  background:#d9ecff;
}

/* List / error area (optional styling) */
.mathia-eleves{
  margin:18px 0 0 0;
  padding-left:22px;
}

.mathia-error{
  margin-top:12px;
  color:#b00020;
  font-weight:500;
}

#classePrete {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

#classePrete.is-active {
  opacity: 1;
}


/* Loader discret sur la coche */
.mathia-add-eleve .mathia-check {
  position: relative;
}

/* état loading = on masque le ✓ et on affiche un spinner */
.mathia-add-eleve .mathia-check.is-loading {
  pointer-events: none;
  opacity: 0.9;
  color: transparent !important; /* masque le caractère ✓ */
}

.mathia-add-eleve .mathia-check.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(11, 31, 58, 0.25);
  border-top-color: rgba(11, 31, 58, 0.9);
  animation: mathia-spin 0.8s linear infinite;
}

@keyframes mathia-spin {
  to { transform: rotate(360deg); }
}
.mathia-add-eleve .mathia-check.is-loading{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important; /* Safari */
}

.mathia-add-eleve .mathia-check.is-loading::before{
  content: none !important;
  display: none !important;
}