/* 
 * IT2Help - Styles communs UI
 * Centralisation des styles d'interface utilisateur communs
 */

/* Styles de base */
:root {
  /* Utilisation des variables définies dans variables.css */
  --common-transition: var(--transition-normal);
  --common-shadow: var(--shadow-md);
  --common-border-radius: var(--border-radius-md);
}

/* Styles communs pour les boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--btn-border-radius);
  transition: var(--common-transition);
  cursor: pointer;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(var(--hover-translate-y));
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-outline:hover {
  background-color: var(--primary-light);
  transform: translateY(var(--hover-translate-y));
}

/* Styles communs pour les cartes */
.card {
  background: var(--white);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: var(--common-transition);
}

.card:hover {
  transform: translateY(var(--hover-translate-y));
  box-shadow: var(--card-hover-shadow);
}

/* Styles communs pour les formulaires */
.form-group {
  margin-bottom: var(--space-md);
}

.form-control {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  transition: var(--common-transition);
}

.form-control:focus {
  border-color: var(--input-focus-border-color);
  box-shadow: var(--input-focus-ring);
  outline: none;
}

/* Styles communs pour les icônes */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-sm {
  font-size: var(--icon-size-sm);
}

.icon-md {
  font-size: var(--icon-size-md);
}

.icon-lg {
  font-size: var(--icon-size-lg);
}

/* Styles communs pour les animations */
.fade-in {
  animation: fadeIn var(--animation-duration-normal)
    var(--animation-timing-function);
}

.slide-in {
  animation: slideIn var(--animation-duration-normal)
    var(--animation-timing-function);
}

/* Styles communs pour les utilitaires */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.mt-1 {
  margin-top: var(--space-xs);
}
.mt-2 {
  margin-top: var(--space-sm);
}
.mt-3 {
  margin-top: var(--space-md);
}
.mt-4 {
  margin-top: var(--space-lg);
}
.mt-5 {
  margin-top: var(--space-xl);
}

.mb-1 {
  margin-bottom: var(--space-xs);
}
.mb-2 {
  margin-bottom: var(--space-sm);
}
.mb-3 {
  margin-bottom: var(--space-md);
}
.mb-4 {
  margin-bottom: var(--space-lg);
}
.mb-5 {
  margin-bottom: var(--space-xl);
}

/* Styles communs pour les messages */
.message {
  padding: var(--space-md);
  border-radius: var(--common-border-radius);
  margin-bottom: var(--space-md);
}

.message-success {
  background-color: var(--success);
  color: var(--white);
}

.message-error {
  background-color: var(--danger);
  color: var(--white);
}

.message-warning {
  background-color: var(--warning);
  color: var(--white);
}

.message-info {
  background-color: var(--info);
  color: var(--white);
}