/* ── Forms ────────────────────────────────────────────────────────────── */

.field,
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .field-row .field {
    margin-bottom: 0;
  }
}

label,
.field > label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
}

label .required,
label::after[data-required] {
  color: var(--color-danger);
  margin-left: var(--space-1);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow   var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted);
}

input[type="file"] {
  padding: var(--space-2);
  font-size: var(--text-sm);
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888780' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

[dir="rtl"] select {
  background-position: left var(--space-3) center;
  padding-right: var(--space-4);
  padding-left: var(--space-8);
}

/* Checkboxes */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  max-height: 12rem;
  overflow-y: auto;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  cursor: pointer;
  min-width: 10rem;
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Form page wrapper */
.form-page {
  max-width: 36rem;
  margin: var(--space-8) auto;
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.form-page h1 {
  margin-bottom: var(--space-6);
  font-size: var(--text-2xl);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Filter form */
.filter-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.filter-form select,
.filter-form input {
  width: auto;
}

/* Sélecteur de secteurs commun (secteur racine + sous-secteurs) */
.sector-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); padding: var(--space-3);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); max-height: 26rem; overflow-y: auto; }
.sector-picker__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.sector-picker__group legend { padding: 0; margin-bottom: var(--space-1); }
.sector-picker__sub { padding-left: 1.4rem; min-width: 0; }
@media (max-width: 600px) { .sector-picker { grid-template-columns: 1fr; max-height: none; } }

/* Domaines de compétences (fiche membre) */
.competence-picker { display: flex; flex-direction: column; gap: var(--space-2); }
.competence-picker__group { border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); padding: var(--space-2) var(--space-3); }
.competence-picker__group summary { cursor: pointer; display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.competence-picker__count { font-size: 0.78rem; color: #8b5e2a; }
.competence-picker__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); gap: var(--space-2); align-items: center; padding: 0.3rem 0 0.3rem 1rem; border-top: 1px solid var(--color-border); }
.competence-picker__row--root { padding-left: 0; font-weight: 600; }
.competence-picker__row label { min-width: 0; overflow-wrap: anywhere; }
.competence-picker__row select { width: 100%; }
@media (max-width: 600px) { .competence-picker__row { grid-template-columns: 1fr; } }

.competences { display: flex; flex-direction: column; gap: 0.75rem; }
.competences__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #2d2419; margin: 0 0 0.35rem; }
.competences__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.competences__chip { font-size: 0.8rem; padding: 3px 10px; border-radius: 5px; background: #eef4f7; color: #2a6b8a; text-decoration: none; }
.competences__group--not_deployed_context .competences__chip,
.competences__group--not_deployed_means .competences__chip { background: #f5f0e8; color: #8b5e2a; }
.competences__group--unspecified .competences__chip { background: #f3f3f3; color: #555; }