/*!
Custom SCSS - Palette moderne 2025
*/

/* Variables CSS modernes pour le mode sombre - tendances 2025 */
[data-bs-theme=dark] .card {
  --bs-card-bg: #1a1a1a;
  --bs-card-color: #f8f9fa;
  --bs-card-border-color: #2d2d2d;
  --bs-card-cap-bg: rgba(255, 255, 255, 0.08);
  --bs-card-cap-color: #f8f9fa;
}

/* Variables pour le mode sombre - Titres avec contrastes améliorés */
[data-bs-theme=dark] h1,
[data-bs-theme=dark] h2,
[data-bs-theme=dark] h3,
[data-bs-theme=dark] h4,
[data-bs-theme=dark] h5,
[data-bs-theme=dark] h6,
[data-bs-theme=dark] .h1,
[data-bs-theme=dark] .h2,
[data-bs-theme=dark] .h3,
[data-bs-theme=dark] .h4,
[data-bs-theme=dark] .h5,
[data-bs-theme=dark] .h6 {
  color: #f8f9fa !important;
}

/* Classe pour les titres qui s'adaptent au thème - optimisée 2025 */
.title-custom {
  color: var(--bs-heading-color, inherit);
}

[data-bs-theme=dark] .title-custom {
  color: #f8f9fa !important;
}

/* Classes pour les textes compatibles avec le mode sombre - nuances 2025 */
.text-muted-custom {
  color: var(--bs-text-muted) !important;
}

.text-body-custom {
  color: var(--bs-body-color) !important;
}

/* Classes pour les cartes compatibles avec le mode sombre - style 2025 */
.card-custom {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  color: var(--bs-card-color);
}

.card-custom .card-header {
  background-color: var(--bs-card-cap-bg);
  border-color: var(--bs-card-border-color);
  color: var(--bs-card-cap-color);
}

.card-custom .card-body {
  color: var(--bs-card-color);
}

/* Classes pour les alertes compatibles avec le mode sombre - moderne 2025 */
.alert-custom {
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
  color: var(--bs-alert-color);
}

.alert-custom .alert-heading {
  color: var(--bs-alert-color);
}

.alert-custom i {
  color: inherit;
}

/* Classes pour les boutons compatibles avec le mode sombre - tendances 2025 */
.btn-custom {
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.btn-custom:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

/* Amélioration des composants cotton pour le mode sombre - style 2025 */
.stat-card-custom {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
  color: var(--bs-card-color);
}

.stat-card-custom .card-body {
  background-color: var(--bs-card-bg);
  color: var(--bs-card-color);
}

.stat-card-custom .text-muted {
  color: var(--bs-text-muted) !important;
}

.action-button-custom {
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}

.action-button-custom:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}

/* Styles pour les icônes en mode sombre - moderne */
.icon-custom {
  color: inherit;
}

/* Styles pour les éléments de liste en mode sombre */
.list-unstyled-custom li {
  color: var(--bs-body-color);
}

.list-unstyled-custom i {
  color: inherit;
}

/* Variables CSS personnalisées - Tendances 2025 */
:root {
  /* Couleurs principales modernes 2025 */
  --fse-primary: #4f46e5;          /* Indigo moderne */
  --fse-secondary: #64748b;        /* Slate sophistiqué */
  --fse-success: #059669;          /* Vert émeraude */
  --fse-warning: #d97706;          /* Orange terre */
  --fse-danger: #dc2626;           /* Rouge brick */
  --fse-info: #0ea5e9;             /* Cyan moderne */
  
  /* Couleurs neutres modernes 2025 */
  --fse-light: #f8fafc;            /* Gris très clair */
  --fse-dark: #1e293b;             /* Charcoal moderne */
  
  /* Couleurs d'accent tendances 2025 */
  --fse-accent-terracotta: #ea580c; /* Terracotta */
  --fse-accent-olive: #65a30d;      /* Olive moderne */
  --fse-accent-rose: #e11d48;       /* Rose sophistiqué */
  --fse-accent-sage: #16a34a;       /* Sauge naturelle */
  --fse-accent-warm-gray: #6b7280;  /* Gris chaud */
  --fse-accent-deep-blue: #1e40af;  /* Bleu profond */
}

/* Dégradés modernes inspirés des tendances 2025 */
.modern-gradient-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modern-gradient-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.modern-gradient-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.modern-gradient-4 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.modern-gradient-5 {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.modern-gradient-warm {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.modern-gradient-earth {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.modern-gradient-forest {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

/* Classes utilitaires pour les nouvelles couleurs 2025 */
.text-terracotta {
  color: var(--fse-accent-terracotta) !important;
}

.text-olive {
  color: var(--fse-accent-olive) !important;
}

.text-rose-modern {
  color: var(--fse-accent-rose) !important;
}

.text-sage {
  color: var(--fse-accent-sage) !important;
}

.text-warm-gray {
  color: var(--fse-accent-warm-gray) !important;
}

.text-deep-blue {
  color: var(--fse-accent-deep-blue) !important;
}

.bg-terracotta {
  background-color: var(--fse-accent-terracotta) !important;
}

.bg-olive {
  background-color: var(--fse-accent-olive) !important;
}

.bg-rose-modern {
  background-color: var(--fse-accent-rose) !important;
}

.bg-sage {
  background-color: var(--fse-accent-sage) !important;
}

.bg-warm-gray {
  background-color: var(--fse-accent-warm-gray) !important;
}

.bg-deep-blue {
  background-color: var(--fse-accent-deep-blue) !important;
}

/* Boutons avec les nouvelles couleurs 2025 */
.btn-terracotta {
  background-color: var(--fse-accent-terracotta);
  border-color: var(--fse-accent-terracotta);
  color: white;
}

.btn-terracotta:hover {
  background-color: #c2410c;
  border-color: #c2410c;
  color: white;
}

.btn-olive {
  background-color: var(--fse-accent-olive);
  border-color: var(--fse-accent-olive);
  color: white;
}

.btn-olive:hover {
  background-color: #4d7c0f;
  border-color: #4d7c0f;
  color: white;
}

.btn-rose-modern {
  background-color: var(--fse-accent-rose);
  border-color: var(--fse-accent-rose);
  color: white;
}

.btn-rose-modern:hover {
  background-color: #be123c;
  border-color: #be123c;
  color: white;
}

.btn-sage {
  background-color: var(--fse-accent-sage);
  border-color: var(--fse-accent-sage);
  color: white;
}

.btn-sage:hover {
  background-color: #15803d;
  border-color: #15803d;
  color: white;
}

/* Styles pour la modale fiche élève - optimisés 2025 avec scroll */
.eleve-modal .modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-height: 95vh; /* Augmenté pour que le footer soit visible */
}

.eleve-modal .modal-header {
  border-bottom: 1px solid var(--bs-card-border-color);
  border-radius: 12px 12px 0 0;
  padding: 1.5rem;
}

.eleve-modal .modal-body {
  padding: 1.5rem;
  overflow-y: auto !important;
  overflow-x: hidden;
  max-height: 75vh; /* Plus d'espace car plus de footer */
}

.eleve-modal .modal-footer {
  border-top: 1px solid var(--bs-card-border-color);
  border-radius: 0 0 12px 12px;
  padding: 1rem 1.5rem;
}

.eleve-modal .card-custom {
  border: 1px solid var(--bs-card-border-color);
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.eleve-modal .card-custom:hover {
  border-color: var(--fse-primary);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.eleve-modal .card-header-custom {
  background-color: var(--bs-card-cap-bg);
  border-bottom: 1px solid var(--bs-card-border-color);
  border-radius: 8px 8px 0 0;
  padding: 0.75rem 1rem;
}

.eleve-modal .card-header-custom h6 {
  color: var(--bs-card-color);
  font-weight: 600;
  display: flex;
  align-items: center;
}

.eleve-modal .card-body {
  padding: 1rem;
}

.eleve-modal dt {
  font-weight: 600;
  color: var(--bs-text-muted);
}

.eleve-modal dd {
  margin-bottom: 0.5rem;
}

.eleve-modal .badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Amélioration des listes de parents */
.eleve-modal .parent-info {
  background-color: var(--bs-card-bg);
  border: 1px solid var(--bs-card-border-color);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.eleve-modal .parent-info:last-child {
  margin-bottom: 0;
}

/* Styles pour les informations vides */
.eleve-modal .text-muted {
  color: var(--bs-text-muted) !important;
  font-style: italic;
}

/* Responsive design pour la modale avec scroll optimisé */
@media (max-width: 768px) {
  .eleve-modal .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }
  
  .eleve-modal .modal-content {
    max-height: 85vh; /* Réduit pour mobile aussi */
  }
  
  .eleve-modal .modal-body {
    padding: 1rem;
    overflow-y: auto !important;
  }
  
  .eleve-modal .row {
    margin: 0;
  }
  
  .eleve-modal .col-md-6,
  .eleve-modal .col-md-4,
  .eleve-modal .col-md-8 {
    padding: 0.25rem;
  }
}

/* Amélioration du scroll pour le contenu de la modale */
.eleve-modal .modal-body::-webkit-scrollbar {
  width: 6px;
}

.eleve-modal .modal-body::-webkit-scrollbar-track {
  background: var(--bs-card-border-color);
  border-radius: 3px;
}

.eleve-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--bs-text-muted);
  border-radius: 3px;
}

.eleve-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--bs-primary);
}

/* Styles pour les cartes dans la modale avec scroll */
.eleve-modal .card-custom {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Amélioration de l'espacement pour le scroll */
.eleve-modal .card + .card {
  margin-top: 1rem;
}

/* Animation d'ouverture de la modale */
.eleve-modal .modal.fade .modal-dialog {
  transform: translate(0, -50px);
  transition: transform 0.3s ease-out;
}

.eleve-modal .modal.show .modal-dialog {
  transform: translate(0, 0);
}

/* Styles pour les boutons de la modale */
.eleve-modal .btn-outline-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Amélioration de l'accessibilité */
.eleve-modal .btn-close:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* FORCER LE SCROLL - Règles spécifiques pour garantir le fonctionnement */
.eleve-modal .modal.show .modal-body {
  overflow-y: auto !important;
}

/* Garantir le scroll sur mobile */
@media (max-width: 768px) {
  .eleve-modal .modal-body {
    padding: 1rem;
    max-height: 80vh; /* Plus d'espace sur mobile aussi */
  }
}

/* Styles pour forcer le scroll du contenu injecté par HTMX */
#eleveModalBody * {
  box-sizing: border-box;
}

#eleveModalBody .card {
  margin-bottom: 1rem;
  break-inside: avoid;
}

/* Override des styles Bootstrap par défaut */
.modal-body.eleve-modal-content {
  overflow-y: auto !important;
}