/* ============================================================================
   ALTDATABASE - SYSTÈME DE DESIGN UNIFIÉ
   ============================================================================
   
   Fichier CSS global consolidant tous les styles de l'application pour
   assurer une cohérence graphique et faciliter la maintenance.
   
   Structure :
   1. Variables CSS et couleurs de marque
   2. Base et typographie
   3. Navigation et layout
   4. Composants UI (cartes, boutons, formulaires)
   5. Pages spécifiques (authentification, import, dashboard)
   6. Utilitaires et helpers
   7. Responsive et animations
   ============================================================================ */

/* ==========================================================================
   1. VARIABLES CSS ET COULEURS DE MARQUE
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CSS ET BASE
   ========================================================================== */

/* Variables CSS */
:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #fd7e14;
  --info-color: #0dcaf0;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  
  /* Couleurs de marque avec dégradés */
  --brand-primary-contrast: #ffffff;
  --brand-secondary-contrast: #ffffff;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 50rem;
  
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  --gradient-primary: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
  --gradient-light: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

/* Protection contre les refreshs intempestifs */
body.app-blocked {
  pointer-events: none;
  user-select: none;
}

body.app-blocked::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9998;
  pointer-events: none;
}

body.app-blocked .app-overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  pointer-events: auto;
}

/* ==========================================================================
   2. BASE ET TYPOGRAPHIE
   ========================================================================== */

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

/* Focus states généraux */
.btn:focus, 
.btn:active:focus, 
.btn-link.nav-link:focus, 
.form-control:focus, 
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Floating labels */
.form-floating > .form-control-plaintext::placeholder, 
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, 
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   3. NAVIGATION ET LAYOUT
   ========================================================================== */

/* Navbar principale */
.navbar {
  position: relative;
  z-index: 1030;
}

.navbar.bg-primary {
  background-color: #0d6efd !important;
}

.navbar .container-fluid {
  background-color: transparent !important;
  background-image: none !important;
  background: none !important;
}

.navbar .container-fluid * {
  background-color: transparent !important;
  background-image: none !important;
  background: none !important;
}

.navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.navbar .navbar-brand {
  color: white !important;
}

/* Styles pour le logo selon le rôle utilisateur */
.navbar-brand .logo-icon {
  color: white; /* Couleur par défaut pour les utilisateurs */
  transition: color 0.3s ease;
}

.navbar-brand .logo-icon.admin {
  color: #fd7e14; /* Orange pour les administrateurs */
}

.navbar-brand .logo-icon.super-admin {
  color: #dc3545; /* Rouge pour les super administrateurs */
}

/* Footer */
.footer {
  margin-top: auto;
}

/* ==========================================================================
   4. COMPOSANTS UI - CARTES
   ========================================================================== */

/* Cartes de base avec animations */
.card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--gradient-light);
  box-shadow: var(--shadow-sm), 0 1px 3px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  animation: fadeInUp 0.6s ease-out;
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-xl), 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-body {
  position: relative;
}

.card-body i {
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: transform var(--transition-fast);
}

.card:hover .card-body i {
  transform: scale(1.1);
}

.card-title {
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Cartes spécifiques import */
.import-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.import-card > .card-body {
  flex: 1 1 auto;
  min-height: 0;
}

.import-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg), 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Styles spécifiques pour la carte Anael */
#anael-imports-card .import-card {
  overflow: hidden;
}

#anael-imports-card .flex-grow-1 {
  min-height: 0;
}

/* Cartes de hauteur fixe */
.card.h-100 {
  min-height: 200px;
}

/* ==========================================================================
   4. COMPOSANTS UI - BOUTONS
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
  padding: 10px 24px;
  font-weight: 600;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.875rem;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.btn-gradient {
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.75rem 2rem;
  font-weight: 500;
  color: white !important;
  text-decoration: none;
}

.btn-gradient:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-md);
  color: white !important;
}

/* États spéciaux du bouton d'import */
.btn-gradient.loading,
button.btn-gradient.loading {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  filter: brightness(0.8) !important;
  transform: none !important;
  background: #6c757d !important; /* Gris Bootstrap */
}

.btn-gradient.loading:hover,
button.btn-gradient.loading:hover {
  filter: brightness(0.8) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
  background: #6c757d !important;
}

.btn-gradient:disabled,
button.btn-gradient:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: brightness(0.7) !important;
  background: #6c757d !important;
}

/* ==========================================================================
   4. COMPOSANTS UI - FORMULAIRES
   ========================================================================== */

.import-form .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}

.import-form .btn-primary {
  transition: all var(--transition-normal);
}

.import-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* ==========================================================================
   4. COMPOSANTS UI - ZONES DE TÉLÉCHARGEMENT
   ========================================================================== */

.upload-zone {
  border: 2px dashed #dee2e6;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xl);
  text-align: center;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.upload-zone:hover {
  border-color: #0d6efd;
  background-color: #f8f9fa;
}

.upload-zone.dragover {
  border-color: #0d6efd;
  background-color: #e3f2fd;
}

/* ==========================================================================
   4. COMPOSANTS UI - BARRES DE PROGRESSION
   ========================================================================== */

.progress-bar-initial {
  width: 0%;
}

/* ==========================================================================
   4. COMPOSANTS UI - MODALES
   ========================================================================== */

.modal-content {
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-header {
  border-bottom: 1px solid #e9ecef;
  padding: var(--spacing-lg);
}

.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  border-top: 1px solid #e9ecef;
  padding: var(--spacing-md) var(--spacing-lg);
}

/* ==========================================================================
   5. PAGES SPÉCIFIQUES - DASHBOARD
   ========================================================================== */

.hero-banner {
  background: linear-gradient(135deg, #0a58ca 0%, #052c65 100%);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(10, 88, 202, 0.4), 
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

.hero-banner h1 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
}

.hero-banner p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   5. PAGES SPÉCIFIQUES - AUTHENTIFICATION
   ========================================================================== */

.auth-container {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  background-color: #f8f9fa;
  position: relative;
  min-height: calc(100vh - 120px);
}

/* ==========================================================================
   6. UTILITAIRES ET HELPERS
   ========================================================================== */

/* Utilitaires de dégradé */
.bg-gradient-primary {
  background: var(--gradient-primary) !important;
  color: var(--brand-primary-contrast) !important;
}

/* En-tête de carte avec dégradé */
.card-header.bg-gradient-primary {
  background: var(--gradient-primary) !important;
  color: white !important;
  border-bottom: none !important;
}

.card-header.bg-gradient-primary .card-title {
  color: white !important;
  margin-bottom: 0;
  font-weight: 600;
}

.card-header.bg-gradient-primary i {
  color: white !important;
}

.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Icônes standardisées */
.card-icon {
  font-size: 2rem !important;
}

.icon-database,
.icon-briefcase,
.icon-folder {
  font-size: 2rem;
}

/* Troncature de texte */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* États de chargement */
.loading-state {
  opacity: 0.6;
  pointer-events: none;
}

/* Effets de bordure */
.border-hover {
  transition: border-color var(--transition-normal);
}

.border-hover:hover {
  border-color: #0d6efd !important;
}

/* ==========================================================================
   7. ANIMATIONS
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.fade-in {
  animation: fadeIn var(--transition-slow) ease-in;
}

.slide-up {
  animation: slideUp var(--transition-normal) ease-out;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .import-card {
    margin-bottom: var(--spacing-md);
  }
  
  .upload-zone {
    padding: var(--spacing-md);
  }
  
  .card-icon, 
  .icon-database, 
  .icon-briefcase, 
  .icon-folder {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .import-card:hover {
    transform: none !important;
  }
  
  .modal-dialog {
    margin: var(--spacing-sm);
  }
  
  .card:hover {
    transform: translateY(-2px) scale(1.01);
  }
}

/* ==========================================================================
   9. CORRECTIONS ET SURCHARGES
   ========================================================================== */

/* Éviter les déformations sur les cartes flexibles */
.flex-grow-1 {
  min-height: 0;
}

/* Améliorer la lisibilité des boutons dans les cartes sombres */
.card-body .btn {
  font-weight: 500;
}

/* Assurer la cohérence des espaces */
.container-fluid {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* ==========================================================================
   10. PAGES ANAEL - CONSULTATION DES DONNÉES
   ========================================================================== */

/* Suppression des effets de survol pour les listes de données */
.anael-page .table tbody tr {
  transition: none !important;
}

.anael-page .table tbody tr:hover {
  background-color: inherit !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Alternance visible des lignes de tableau */
.anael-page .table tbody tr.table-row-alternate,
.anael-page .table tbody tr.table-row-alternate-dark {
  background-color: #f0f0f0 !important;
}

.anael-page .table tbody tr.table-row-alternate td,
.anael-page .table tbody tr.table-row-alternate-dark td {
  background-color: #f0f0f0 !important;
}

/* Style uniforme pour les données de tableau */
.anael-page .table td {
  font-family: inherit !important;
  font-weight: normal !important;
}

/* Suppression des effets sur les cartes */
.anael-page .card {
  transition: none !important;
  box-shadow: none !important;
}

.anael-page .card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Suppression des effets sur les boutons */
.anael-page .btn {
  transition: none !important;
  box-shadow: none !important;
}

.anael-page .btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

.anael-page .btn:focus {
  box-shadow: none !important;
}

.anael-page .btn:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Blocs de statistiques condensés */
.anael-page .card-body.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.anael-page .card-header.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Pagination sans transitions */
.anael-page .pagination .page-link {
  border: 1px solid #dee2e6;
  color: #6c757d;
  transition: none !important;
}

.anael-page .pagination .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.anael-page .pagination .page-link:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
  color: #495057;
  transition: none !important;
}

/* ==========================================================================
   10. STYLES PERSONNALISÉS POUR LES TOOLTIPS
   ========================================================================== */

/* Tooltips personnalisés pour s'harmoniser avec le design du site */
.tooltip {
  font-size: 0.875rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-inner {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: var(--dark-color);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem 1rem;
  max-width: 280px;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
}

/* Flèche du tooltip */
.tooltip .tooltip-arrow::before {
  border-top-color: #f8f9fa !important;
  border-bottom-color: #f8f9fa !important;
  border-left-color: #f8f9fa !important;
  border-right-color: #f8f9fa !important;
}

/* Styles pour les tooltips selon leur position */
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: rgba(248, 249, 250, 0.9) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: rgba(248, 249, 250, 0.9) !important;
}

.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: rgba(248, 249, 250, 0.9) !important;
}

.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: rgba(248, 249, 250, 0.9) !important;
}

/* Animation d'apparition du tooltip */
/* (Déjà défini ci-dessus avec .tooltip) */

/* Styles pour le contenu HTML du tooltip DSN */
.tooltip .tooltip-inner strong {
  color: var(--primary-color);
  font-weight: 600;
}

.tooltip .tooltip-inner br + strong {
  margin-top: 0.25rem;
  display: inline-block;
}

/* Hover effect sur les lignes avec tooltip */
tr[data-bs-toggle="tooltip"] {
  cursor: help;
  transition: background-color var(--transition-fast);
}

tr[data-bs-toggle="tooltip"]:hover {
  background-color: rgba(13, 110, 253, 0.05) !important;
}

/* ==========================================================================
   11. PRINT STYLES
   ========================================================================== */

@media print {
  .navbar,
  .footer,
  .btn,
  .modal {
    display: none !important;
  }
  
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}

/* ==========================================================================
   DASHBOARD - CARTES DE STATISTIQUES
   ========================================================================== */

/* Cartes avec bordures colorées pour le dashboard */
.border-left-primary {
  border-left: 0.25rem solid var(--primary-color) !important;
}

.border-left-success {
  border-left: 0.25rem solid var(--success-color) !important;
}

.border-left-info {
  border-left: 0.25rem solid var(--info-color) !important;
}

.border-left-warning {
  border-left: 0.25rem solid var(--warning-color) !important;
}

/* Styles pour les textes des cartes de stats */
.text-xs {
  font-size: 0.7rem;
  font-weight: 700;
}

.text-gray-800 {
  color: #5a5c69 !important;
}

.text-gray-300 {
  color: #dddfeb !important;
}

/* Animation hover pour les cartes de stats */
.card.shadow:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease-in-out;
}

/* Amélioration des onglets du dashboard */
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--secondary-color);
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  border-bottom-color: var(--primary-color);
  background: transparent;
  color: var(--primary-color);
}

.nav-tabs .nav-link:hover:not(.disabled) {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
}

.nav-tabs .nav-link.disabled {
  color: #adb5bd;
  cursor: not-allowed;
}

/* Tableau de volumétrie */
#volumetrieTable tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

#volumetrieTable code {
  font-size: 0.85em;
  color: #e83e8c;
  background-color: #f8f9fa;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

/* Mini-graphiques dans les cartes */
.chart-container {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 60px;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Badges de pourcentage dans les cartes */
.card .badge {
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: middle;
}

/* Amélioration des cartes de stats avec graphiques */
.card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card .row.no-gutters {
  flex-grow: 0;
  flex-shrink: 0;
}

/* Assurer que les cartes ont une hauteur uniforme */
.dashboard-card {
  height: 180px;
}