@import "/src/assets/scss/modern-variables.scss";

// Formulaires modernes ESTAIR - Version simplifiée
.modern-form {
  font-size: 13px;
  
  .form-field {
    margin-bottom: 12px;
    
    label {
      display: block;
      font-size: 10px;
      font-weight: 600;
      color: #6B7280;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    input,
    textarea,
    select {
      width: 100%;
      height: 36px;
      padding: 0 8px;
      border: 1px solid #E5E7EB;
      border-radius: 6px;
      font-size: 13px;
      color: #111827;
      background: #FFFFFF;
      transition: all 0.2s ease;
      
      &:focus {
        outline: none;
        border-color: #4AA8DC;
        box-shadow: 0 0 0 3px rgba(74, 168, 220, 0.1);
      }
      
      &::placeholder {
        color: #9CA3AF;
      }
    }
    
    textarea {
      height: auto;
      min-height: 72px;
      padding: 8px;
      resize: vertical;
    }
  }
  
  .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    
    .form-field {
      flex: 1;
      margin-bottom: 0;
    }
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
    margin-top: 16px;
    
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
  
  .btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    min-height: 36px;
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    &.btn-primary {
      background: #4AA8DC;
      color: white;
      border-color: #4AA8DC;
      
      &:hover:not(:disabled) {
        background: #3B82F6;
        transform: translateY(-1px);
      }
    }
    
    &.btn-secondary {
      background: #FFFFFF;
      color: #6B7280;
      border-color: #E5E7EB;
      
      &:hover:not(:disabled) {
        background: #F8F9FA;
        color: #111827;
      }
    }
  }
}

// Intégration Angular Material
.modern-form .mat-form-field {
  width: 100%;
  font-size: 13px;
  
  .mat-input-element {
    font-size: 13px;
    height: 36px;
  }
  
  .mat-form-field-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
  }
}