/* === PALETTE DE COULEURS SOMBRES === */
@background-main: #0d1117;
@background-card: #161b22;
@text-color: #c9d1d9;
@primary: #1f6feb;
@primary-glow: fade(@primary, 40%);
@border-color: #30363d;

/* === GLOBAL === */
body {
  background: @background-main;
  color: @text-color;
  font-family: "Segoe UI", sans-serif;
}

.container {
  margin-top: 50px;
}

/* === CARD === */
.card {
  background: @background-card;
  border: 1px solid @border-color;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 0 25px fade(#000, 40%);
}

/* === INPUTS MODERNES === */
input.form-control,
select.form-select {
  background: lighten(@background-card, 3%);
  color: @text-color;
  border: 1px solid @border-color;
  border-radius: 10px;
  padding: 10px 12px;
  transition: all 0.25s ease;

  &:hover {
    border-color: lighten(@border-color, 15%);
    background: lighten(@background-card, 6%);
  }

  &:focus {
    border-color: @primary;
    box-shadow: 0 0 6px @primary-glow;
    background: lighten(@background-card, 10%);
    outline: none;
    color: @text-color;
  }
}

/* === CHECKBOXES === */
.form-check-input {
  background-color: @background-main;
  border: 1px solid @border-color;

  &:checked {
    background-color: @primary;
    border-color: @primary;
    box-shadow: 0 0 6px @primary-glow;
  }
}

/* Labels */
label {
  color: @text-color;
}

/* === BOUTON === */
button {
  background: @primary;
  border: none;
  color: white;
  border-radius: 10px;
  padding: 10px 20px;
  transition: background 0.25s ease;

  &:hover {
    background: lighten(@primary, 10%);
    box-shadow: 0 0 10px @primary-glow;
  }
}

/* === TEXTAREA MODERNE === */
textarea.form-control {
  background: lighten(@background-card, 3%);
  color: @text-color;
  border: 1px solid @border-color;
  border-radius: 10px;
  padding: 10px 12px;
  transition: all 0.25s ease;
  min-height: 100px; /* optionnel : hauteur par défaut */

  &:hover {
    border-color: lighten(@border-color, 15%);
    background: lighten(@background-card, 6%);
  }

  &:focus {
    border-color: @primary;
    box-shadow: 0 0 6px @primary-glow;
    background: lighten(@background-card, 10%);
    outline: none;
    color: @text-color;
  }
}