/* ==========================================================================
   FORMS.CSS - Styles des formulaires GrainBoard
   ========================================================================== */

/* --------------------------------------------------------------------------
   Form Groups
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #64748b;
}

/* --------------------------------------------------------------------------
   Password Requirements
   -------------------------------------------------------------------------- */
.password-requirements {
  font-size: 12px;
  color: #64748b;
  margin-top: 5px;
}

.password-requirements ul {
  margin: 5px 0;
  padding-left: 20px;
}

/* --------------------------------------------------------------------------
   Error & Success Messages
   -------------------------------------------------------------------------- */
.error-list {
  background: rgba(251, 113, 133, 0.1);
  border-left: 3px solid #fb7185;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
}

.error-list ul {
  margin: 0;
  padding-left: 20px;
  color: #fb7185;
}

.success-message {
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22c55e;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  color: #22c55e;
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  color: #ef4444;
}

/* --------------------------------------------------------------------------
   Form Actions
   -------------------------------------------------------------------------- */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.form-actions button {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Inline Form
   -------------------------------------------------------------------------- */
.form-inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-inline .form-group {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Checkbox & Radio
   -------------------------------------------------------------------------- */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-check label {
  margin-bottom: 0;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Field Hints
   -------------------------------------------------------------------------- */
.field-hint {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Validation States
   -------------------------------------------------------------------------- */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #ef4444;
}

.form-group.has-error label {
  color: #ef4444;
}

.form-group.has-success input,
.form-group.has-success select,
.form-group.has-success textarea {
  border-color: #22c55e;
}

.form-group.has-success label {
  color: #22c55e;
}

/* --------------------------------------------------------------------------
   Auth Navigation Links (login / forgot / reset pages)
   -------------------------------------------------------------------------- */
.auth-nav {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
}

.auth-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.auth-link:hover,
.auth-link:focus-visible {
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
}

.auth-link--back span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.auth-link--back:hover span,
.auth-link--back:focus-visible span {
  transform: translateX(-3px);
}