/**
 * EduMali Meet - Feuille de Style Personnalisée
 * Charte graphique : EduMali - Plateforme éducative au Mali
 * Date : 2 décembre 2025
 * 
 * Ce fichier contient les variables et styles personnalisés pour adapter
 * l'interface de la plateforme de visioconférence à l'identité EduMali.
 */

/* ========================================
   VARIABLES CSS EDUMALI
   ======================================== */
:root {
  /* Palette de couleurs principale EduMali */
  --edumali-primary: #f8b91b;          /* Jaune/Or principal - Boutons CTA */
  --edumali-primary-hover: #f9c238;    /* Jaune hover */
  --edumali-primary-light: #fcf5e6;    /* Beige clair - Backgrounds secondaires */
  
  --edumali-green: #198754;            /* Vert - Succès, Status "En ligne" */
  --edumali-danger: #DC4537;           /* Rouge - Erreurs, Bouton "Quitter" */
  
  --edumali-heading: #2e2e2e;          /* Gris foncé - Titres */
  --edumali-nav: #5d5d5d;              /* Gris moyen - Navigation */
  --edumali-text: #454545;             /* Texte principal */
  
  --edumali-bg: #f6f6f6;               /* Fond clair principal */
  --edumali-border: #e7e7e7;           /* Bordures */
  
  /* Police par défaut */
  --edumali-font: "Poppins", sans-serif;
}

/* ========================================
   TYPOGRAPHIE
   ======================================== */
body {
  font-family: var(--edumali-font) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--edumali-heading);
  font-family: var(--edumali-font);
}

/* ========================================
   BOUTONS PRINCIPAUX
   ======================================== */
.btn-primary,
.btn.btn-primary {
  background-color: var(--edumali-primary) !important;
  border-color: var(--edumali-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--edumali-primary-hover) !important;
  border-color: var(--edumali-primary-hover) !important;
}

.btn-success {
  background-color: var(--edumali-green) !important;
  border-color: var(--edumali-green) !important;
}

.btn-danger {
  background-color: var(--edumali-danger) !important;
  border-color: var(--edumali-danger) !important;
}

/* ========================================
   NAVIGATION & HEADER
   ======================================== */
.navbar,
.header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--edumali-border);
}

.navbar-brand {
  color: var(--edumali-heading) !important;
  font-weight: 600;
}

.nav-link {
  color: var(--edumali-nav) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--edumali-primary) !important;
}

/* ========================================
   LIENS & ACCENTS
   ======================================== */
a {
  color: var(--edumali-primary);
}

a:hover {
  color: var(--edumali-primary-hover);
}

.text-primary {
  color: var(--edumali-primary) !important;
}

.text-success {
  color: var(--edumali-green) !important;
}

.text-danger {
  color: var(--edumali-danger) !important;
}

.bg-primary {
  background-color: var(--edumali-primary) !important;
}

.bg-light {
  background-color: var(--edumali-bg) !important;
}

/* ========================================
   CARTES & CONTENEURS
   ======================================== */
.card {
  border: 1px solid var(--edumali-border);
  border-radius: 8px;
}

.card-header {
  background-color: var(--edumali-primary-light);
  border-bottom: 1px solid var(--edumali-border);
  color: var(--edumali-heading);
}

/* ========================================
   FORMULAIRES
   ======================================== */
.form-control:focus,
.form-select:focus {
  border-color: var(--edumali-primary);
  box-shadow: 0 0 0 0.2rem rgba(248, 185, 27, 0.25);
}

.form-check-input:checked {
  background-color: var(--edumali-primary);
  border-color: var(--edumali-primary);
}

/* ========================================
   BADGES & ALERTES
   ======================================== */
.badge.bg-primary {
  background-color: var(--edumali-primary) !important;
}

.badge.bg-success {
  background-color: var(--edumali-green) !important;
}

.badge.bg-danger {
  background-color: var(--edumali-danger) !important;
}

.alert-success {
  background-color: rgba(25, 135, 84, 0.1);
  border-color: var(--edumali-green);
  color: var(--edumali-green);
}

.alert-danger {
  background-color: rgba(220, 69, 55, 0.1);
  border-color: var(--edumali-danger);
  color: var(--edumali-danger);
}

.alert-warning {
  background-color: var(--edumali-primary-light);
  border-color: var(--edumali-primary);
  color: #856404;
}

/* ========================================
   INTERFACE MEETING (Spécifique Visio)
   ======================================== */

/* Bouton "Rejoindre la réunion" */
.btn-join-meeting {
  background-color: var(--edumali-primary) !important;
  border-color: var(--edumali-primary) !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 12px 32px;
  font-size: 1.1rem;
}

.btn-join-meeting:hover {
  background-color: var(--edumali-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(248, 185, 27, 0.3);
}

/* Contrôles vidéo (Caméra/Micro) */
.video-control.active {
  background-color: var(--edumali-green) !important;
  color: #ffffff !important;
}

.video-control.muted,
.video-control.disabled {
  background-color: var(--edumali-danger) !important;
  color: #ffffff !important;
}

/* Bouton "Quitter" la réunion */
.btn-leave-meeting,
.btn-end-call {
  background-color: var(--edumali-danger) !important;
  border-color: var(--edumali-danger) !important;
  color: #ffffff !important;
}

.btn-leave-meeting:hover,
.btn-end-call:hover {
  background-color: #b71d18 !important;
}

/* Status participants */
.participant-online,
.status-online {
  color: var(--edumali-green) !important;
}

.participant-offline,
.status-offline {
  color: var(--edumali-nav) !important;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
  background-color: var(--edumali-bg);
  border-top: 1px solid var(--edumali-border);
  color: var(--edumali-nav);
}

.footer a {
  color: var(--edumali-nav);
}

.footer a:hover {
  color: var(--edumali-primary);
}

/* ========================================
   LOADING & PROGRESS
   ======================================== */
.progress-bar {
  background-color: var(--edumali-primary) !important;
}

.spinner-border.text-primary {
  color: var(--edumali-primary) !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  .btn-join-meeting {
    padding: 10px 24px;
    font-size: 1rem;
  }
}

/* ========================================
   DARK MODE SUPPORT (Optionnel)
   ======================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --edumali-bg: #1a1a1a;
    --edumali-heading: #f6f6f6;
    --edumali-text: #e0e0e0;
    --edumali-border: #3a3a3a;
  }
  
  body {
    background-color: var(--edumali-bg);
    color: var(--edumali-text);
  }
  
  .card {
    background-color: #2a2a2a;
    color: var(--edumali-text);
  }
}

/* ========================================
   UTILITAIRES
   ======================================== */
.text-edumali-primary {
  color: var(--edumali-primary) !important;
}

.bg-edumali-primary {
  background-color: var(--edumali-primary) !important;
}

.bg-edumali-light {
  background-color: var(--edumali-primary-light) !important;
}

.border-edumali {
  border-color: var(--edumali-primary) !important;
}

/* ========================================
   ANIMATIONS (Facultatif - Performance)
   ======================================== */
.btn,
.card,
a {
  transition: all 0.3s ease-in-out;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}