/**
 * SHARY.EVENTS - Charte Graphique
 * Version: 1.0
 * Date: November 2025
 */

/* ============================================
   1️⃣ VARIABLES DE COULEURS - Nouveau Logo 2025
   ============================================ */
:root {
  /* Palette principale - Basée sur le nouveau logo shary.events */
  --shary-violet: #6C5CE7;           /* Couleur bulle - Confiance, tech, créativité */
  --shary-violet-light: #8B7EEB;     /* Violet clair dégradé bulle */
  --shary-bleu-marine: #2D3E50;      /* Texte "shary" - Professionnel, sérieux */
  --shary-corail: #FF6B6B;           /* Texte "events" - Énergie, dynamisme */
  --shary-bleu-clair: #74B9FF;       /* Accent secondaire - Fraîcheur digital */
  --shary-gris-neutre: #2D3436;      /* Texte, icônes - Lisibilité */
  --shary-blanc: #FFFFFF;            /* Fonds clairs - Minimalisme */
  
  /* Dégradé principal - Inspiré de la bulle du logo */
  --shary-gradient: linear-gradient(135deg, #8B7EEB 0%, #6C5CE7 100%);
  --shary-gradient-reverse: linear-gradient(135deg, #6C5CE7 0%, #8B7EEB 100%);
  
  /* Couleurs dérivées pour états */
  --shary-violet-hover: #5B4BCF;     /* Violet plus foncé au hover */
  --shary-bleu-hover: #5FA3E8;       /* Bleu plus foncé au hover */
  --shary-corail-hover: #E85E5D;     /* Corail plus foncé au hover */
  --shary-corail-light: #FF8A80;     /* Corail plus clair */
  
  /* Grises pour UI */
  --shary-gris-light: #B2BEC3;       /* Bordures, séparateurs */
  --shary-gris-bg: #F8F9FA;          /* Fonds secondaires */
  --shary-gris-dark: #1E2426;        /* Texte très sombre */
  
  /* Ombres */
  --shary-shadow-soft: 0 4px 12px rgba(108, 92, 231, 0.08);
  --shary-shadow-medium: 0 8px 24px rgba(108, 92, 231, 0.12);
  --shary-shadow-strong: 0 12px 32px rgba(108, 92, 231, 0.16);
  
  /* Bordures arrondies */
  --shary-radius-sm: 8px;
  --shary-radius-md: 16px;
  --shary-radius-lg: 24px;
  
  /* Typographie */
  --shary-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shary-font-weight-regular: 400;
  --shary-font-weight-medium: 500;
  --shary-font-weight-semibold: 600;
  --shary-font-weight-bold: 700;
}

/* ============================================
   2️⃣ TYPOGRAPHIE GLOBALE
   ============================================ */
body {
  font-family: var(--shary-font-family);
  font-weight: var(--shary-font-weight-regular);
  color: var(--shary-gris-neutre);
  background-color: var(--shary-gris-bg);
}

h1, h2, h3, h4, h5, h6,
.logo, .page-title {
  font-family: var(--shary-font-family);
  font-weight: var(--shary-font-weight-bold);
  color: var(--shary-gris-dark);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.subtitle,
.section-header {
  font-weight: var(--shary-font-weight-semibold);
  font-size: 1.25rem;
  color: var(--shary-gris-neutre);
}

/* ============================================
   3️⃣ BOUTONS
   ============================================ */

/* Boutons primaires */
.btn-primary,
.btn-shary-primary,
button.primary {
  background: var(--shary-violet);
  color: var(--shary-blanc);
  border: none;
  border-radius: var(--shary-radius-sm);
  padding: 10px 24px;
  font-weight: var(--shary-font-weight-medium);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shary-shadow-soft);
}

.btn-primary:hover,
.btn-shary-primary:hover,
button.primary:hover {
  background: var(--shary-gradient);
  box-shadow: var(--shary-shadow-medium);
  transform: translateY(-2px);
  color: var(--shary-blanc);
}

.btn-primary:active,
.btn-shary-primary:active,
button.primary:active {
  transform: translateY(0);
  box-shadow: var(--shary-shadow-soft);
}

/* Boutons secondaires */
.btn-secondary,
.btn-shary-secondary,
button.secondary {
  background: var(--shary-blanc);
  color: var(--shary-violet);
  border: 2px solid var(--shary-violet);
  border-radius: var(--shary-radius-sm);
  padding: 10px 24px;
  font-weight: var(--shary-font-weight-medium);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-shary-secondary:hover,
button.secondary:hover {
  background: var(--shary-violet);
  color: var(--shary-blanc);
  box-shadow: var(--shary-shadow-soft);
  transform: translateY(-2px);
}

/* Bouton LinkedIn CTA */
.btn-linkedin,
.btn-shary-linkedin {
  background: var(--shary-corail);
  color: var(--shary-blanc);
  border: none;
  border-radius: var(--shary-radius-sm);
  padding: 10px 24px;
  font-weight: var(--shary-font-weight-medium);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shary-shadow-soft);
}

.btn-linkedin:hover,
.btn-shary-linkedin:hover {
  background: var(--shary-corail-hover);
  box-shadow: var(--shary-shadow-medium);
  transform: translateY(-2px);
  color: var(--shary-blanc);
}

/* Bouton avec icône LinkedIn */
.btn-linkedin i,
.btn-shary-linkedin i {
  font-size: 16px;
}

/* ============================================
   4️⃣ CARDS / BLOCS
   ============================================ */
.card,
.shary-card {
  background: var(--shary-blanc);
  border: none;
  border-radius: var(--shary-radius-lg);
  box-shadow: var(--shary-shadow-soft);
  padding: 24px;
  transition: all 0.3s ease;
}

.card:hover,
.shary-card:hover {
  box-shadow: var(--shary-shadow-medium);
  transform: translateY(-4px);
}

.card-header {
  background: transparent;
  border: none;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--shary-gris-light);
}

.card-title {
  font-weight: var(--shary-font-weight-semibold);
  color: var(--shary-gris-dark);
  margin: 0;
}

/* ============================================
   5️⃣ FORMULAIRES / INPUTS
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
  border: 2px solid var(--shary-gris-light);
  border-radius: var(--shary-radius-sm);
  padding: 10px 16px;
  font-family: var(--shary-font-family);
  font-size: 14px;
  color: var(--shary-gris-neutre);
  transition: all 0.3s ease;
  background: var(--shary-blanc);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  border-color: var(--shary-bleu-clair);
  outline: none;
  box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
}

.form-label,
label {
  font-weight: var(--shary-font-weight-medium);
  color: var(--shary-gris-neutre);
  margin-bottom: 8px;
  font-size: 14px;
}

/* ============================================
   6️⃣ NAVIGATION / SIDEBAR
   ============================================ */
.sidebar {
  background: var(--shary-gris-dark) !important;
}

.sidebar .logo-header {
  background: var(--shary-gris-dark) !important;
}

.sidebar .nav-item a {
  color: var(--shary-blanc);
  font-weight: var(--shary-font-weight-medium);
  transition: all 0.3s ease;
  border-radius: var(--shary-radius-sm);
}

.sidebar .nav-item.active a,
.sidebar .nav-item a:hover {
  background: var(--shary-violet);
  color: var(--shary-blanc);
}

/* ============================================
   7️⃣ NAVIGATION HEADER
   ============================================ */
.main-header {
  background: var(--shary-blanc);
  box-shadow: var(--shary-shadow-soft);
  border-bottom: 1px solid var(--shary-gris-light);
}

.navbar-header {
  background: var(--shary-blanc) !important;
}

/* ============================================
   8️⃣ ÉTATS & BADGES
   ============================================ */
.badge-primary,
.badge-shary {
  background: var(--shary-violet);
  color: var(--shary-blanc);
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: var(--shary-font-weight-medium);
  font-size: 12px;
}

.badge-secondary {
  background: var(--shary-bleu-clair);
  color: var(--shary-blanc);
}

.badge-accent {
  background: var(--shary-corail);
  color: var(--shary-blanc);
}

/* ============================================
   9️⃣ ALERTES & NOTIFICATIONS
   ============================================ */
.alert-success {
  background: rgba(116, 185, 255, 0.1);
  border-left: 4px solid var(--shary-bleu-clair);
  color: var(--shary-gris-neutre);
  border-radius: var(--shary-radius-sm);
}

.alert-info {
  background: rgba(108, 92, 231, 0.1);
  border-left: 4px solid var(--shary-violet);
  color: var(--shary-gris-neutre);
  border-radius: var(--shary-radius-sm);
}

.alert-warning {
  background: rgba(255, 118, 117, 0.1);
  border-left: 4px solid var(--shary-corail);
  color: var(--shary-gris-neutre);
  border-radius: var(--shary-radius-sm);
}

/* ============================================
   🔟 LIENS
   ============================================ */
a {
  color: var(--shary-violet);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--shary-violet-hover);
  text-decoration: underline;
}

/* ============================================
   1️⃣1️⃣ UTILITAIRES
   ============================================ */
.text-primary { color: var(--shary-violet) !important; }
.text-secondary { color: var(--shary-bleu-clair) !important; }
.text-accent { color: var(--shary-corail) !important; }
.text-muted { color: var(--shary-gris-light) !important; }

.bg-primary { background-color: var(--shary-violet) !important; }
.bg-secondary { background-color: var(--shary-bleu-clair) !important; }
.bg-accent { background-color: var(--shary-corail) !important; }
.bg-light { background-color: var(--shary-gris-bg) !important; }

.gradient-primary { background: var(--shary-gradient) !important; }

/* ============================================
   1️⃣2️⃣ TABLEAUX / DATATABLES
   ============================================ */
.table thead th {
  background: var(--shary-gris-bg);
  color: var(--shary-gris-dark);
  font-weight: var(--shary-font-weight-semibold);
  border-bottom: 2px solid var(--shary-violet);
}

.table tbody tr:hover {
  background: rgba(108, 92, 231, 0.05);
}

/* ============================================
   1️⃣3️⃣ MODALES
   ============================================ */
.modal-content {
  border-radius: var(--shary-radius-lg);
  border: none;
  box-shadow: var(--shary-shadow-strong);
}

.modal-header {
  background: var(--shary-gradient);
  color: var(--shary-blanc);
  border-top-left-radius: var(--shary-radius-lg);
  border-top-right-radius: var(--shary-radius-lg);
  border-bottom: none;
}

.modal-title {
  color: var(--shary-blanc);
  font-weight: var(--shary-font-weight-semibold);
}

.modal-footer {
  border-top: 1px solid var(--shary-gris-light);
  padding: 16px 24px;
}