/* 
 * Styles personnalisés pour GymDépôt.ca
 * Optimisations UI/UX pour une interface plus efficace et compacte
 */

/* Variables globales */
:root {
  --primary-color: #0056b3;
  --primary-hover: #004494;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-800: #343a40;
  --font-size-base: 0.9rem;
  --font-size-sm: 0.85rem;
  --font-size-xs: 0.75rem;
  --border-radius: 0.25rem;
  --box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Styles de base */
body {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* Réduction de la taille des éléments de formulaire pour une interface plus compacte */
.form-control, .btn, .input-group-text {
  font-size: var(--font-size-base);
  padding: 0.375rem 0.5rem;
}

/* Boutons plus compacts */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-sm);
}

.btn-xs {
  padding: 0.125rem 0.25rem;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* Tableaux optimisés */
.table-compact th, 
.table-compact td {
  padding: 0.5rem;
  font-size: var(--font-size-sm);
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 86, 179, 0.075);
}

/* Ajout d'une classe pour les cellules numériques */
.text-number {
  text-align: right;
  font-family: 'Roboto Mono', monospace;
}

/* Cartes avec moins de padding */
.card-compact .card-body {
  padding: 0.75rem;
}

.card-compact .card-header, 
.card-compact .card-footer {
  padding: 0.5rem 0.75rem;
}

/* Amélioration des liens d'action */
.action-link {
  color: var(--gray-800);
  text-decoration: none;
  margin-right: 0.5rem;
}

.action-link:hover {
  color: var(--primary-color);
}

/* Badges plus compacts */
.badge {
  font-size: 85%;
  font-weight: 500;
  padding: 0.25em 0.5em;
}

/* États des badges pour divers statuts */
.badge-nouvelle { background-color: #17a2b8; }
.badge-en_traitement { background-color: #6f42c1; }
.badge-terminé { background-color: #28a745; }
.badge-expediee { background-color: #fd7e14; }
.badge-livree { background-color: #28a745; }
.badge-annulee { background-color: #dc3545; }

.badge-en-commande { background-color: #17a2b8; }
.badge-en-preparation { background-color: #6f42c1; }
.badge-en-route { background-color: #fd7e14; }
.badge-recu { background-color: #28a745; }
.badge-annule { background-color: #dc3545; }

/* Amélioration des accordéons */
.accordion-compact .accordion-button {
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
}

.accordion-compact .accordion-body {
  padding: 0.75rem;
}

/* Amélioration des filtres de recherche */
.filter-section {
  background-color: var(--gray-100);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.filter-section .form-group {
  margin-bottom: 0.5rem;
}

/* Amélioration des entêtes de section */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-300);
}

.section-header h2, 
.section-header h3, 
.section-header h4 {
  margin-bottom: 0;
}

/* Alertes améliorées */
.alert {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.alert-dismissible .btn-close {
  padding: 0.75rem 1rem;
}

/* Pagination compacte */
.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-sm);
}

/* Texte tronqué avec ellipsis */
.text-truncate-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-truncate-2lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Surbrillance des éléments actifs */
.row-selected {
  background-color: rgba(0, 86, 179, 0.1) !important;
}

/* Amélioration des onglets */
.nav-tabs .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-base);
}

/* Ajout d'un indicateur d'activité */
.activity-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.activity-recent {
  background-color: #28a745;
}

.activity-medium {
  background-color: #ffc107;
}

.activity-old {
  background-color: #dc3545;
}

/* Icônes de statut */
.status-icon {
  margin-right: 0.25rem;
}

/* Barre latérale compacte */
.sidebar-compact {
  padding: 0.5rem;
}

.sidebar-compact .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-base);
}

/* Améliorations pour la vue Kanban */
.kanban-board {
  display: flex;
  overflow-x: auto;
  padding: 0.5rem 0;
}

.kanban-column {
  flex: 0 0 300px;
  margin-right: 1rem;
  background-color: var(--gray-100);
  border-radius: var(--border-radius);
  padding: 0.5rem;
}

.kanban-column h5 {
  font-size: 1rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-300);
}

.kanban-card {
  background-color: white;
  border-radius: var(--border-radius);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--box-shadow);
  cursor: grab;
}

.kanban-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Améliorations pour les statistiques */
.stat-card {
  text-align: center;
  padding: 1rem;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--secondary-color);
}

/* Amélioration de la barre de navigation */
.navbar-brand {
  font-weight: bold;
}

.navbar-nav .nav-link {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* Animation discrète pour les transitions */
.fade-transition {
  transition: all 0.2s ease-in-out;
}

/* Correctif pour les espaces verticaux */
.mt-compact {
  margin-top: 0.5rem !important;
}

.mb-compact {
  margin-bottom: 0.5rem !important;
}

.py-compact {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Correctifs d'accessibilité */
.btn-primary, .btn-success, .btn-danger {
  color: white !important;
}

.text-muted {
  color: #6c757d !important;
}

/* Media queries pour la responsivité */
@media (max-width: 768px) {
  :root {
    --font-size-base: 0.85rem;
    --font-size-sm: 0.8rem;
  }
  
  .table-responsive-mobile {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  
  .d-mobile-none {
    display: none !important;
  }
  
  .kanban-column {
    flex: 0 0 270px;
  }
}

/* Améliorations d'impression */
@media print {
  .no-print {
    display: none !important;
  }
  
  .table-print th, 
  .table-print td {
    padding: 0.25rem 0.5rem;
  }
  
  body {
    font-size: 10pt;
  }
}