/* ============================================
   THEME "GOLDEN NIGHT" – CORRECTIF STRUCTUREL
   ============================================ */

/* --- 0. RÉINITIALISATION STRICT DU BOX-SIZING --- */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  box-sizing: border-box !important;
}

/* --- 1. FONDATIONS TYPOGRAPHIQUES & PALETTE --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --bg-onyx: #050506;
  --card-bg: #111114;
  --gold-royal: #D4AF37;
  --gold-dim: #b4942e;
  --text-secondary: #9CA3AF;
  --border-gold: 1px solid var(--gold-royal);
  --spacing-base: 1rem;
  --touch-target-min: 44px;
  --transition: all 0.25s ease;
}

body {
  font-family: 'Montserrat', sans-serif !important;
  background-color: var(--bg-onyx) !important;
  color: #f0f0f0;
}

/* --- 2. CONTRÔLE D'OVERFLOW GLOBAL --- */
.content-wrapper,
.content,
.container-fluid,
.row,
[class*="container"] {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Empêche tout débordement horizontal sur le body et html */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* --- 3. STRUCTURE DES CARTES (FLEXIBLE ET SANS DÉBORDEMENT) --- */
.card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--gold-royal) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
  max-width: 100% !important;
  overflow: hidden !important; /* Empêche le contenu de dépasser */
  margin-bottom: 1.5rem;
  transition: var(--transition);
  word-wrap: break-word;
}

.card:hover {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3), 0 12px 28px rgba(0,0,0,0.7) !important;
}

.card-header,
.card-body,
.card-footer {
  max-width: 100% !important;
  overflow-wrap: break-word;
  padding: var(--spacing-base) 1.25rem;
}

.card-header {
  border-bottom: 1px solid var(--gold-royal) !important;
  background-color: transparent !important;
  font-weight: 600;
  color: var(--gold-royal);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- 4. BOUTONS : ADAPTATIFS, JAMAIS DE WIDTH FIXE EN PX --- */
.btn {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;  /* Retour à la ligne si nécessaire */
  word-break: break-word;
  border-radius: 40px !important;
  padding: 0.7rem 1.8rem;
  font-weight: 500;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--gold-royal);
  border-color: var(--gold-royal);
  font-size: clamp(0.85rem, 2vw, 1rem);
  line-height: 1.4;
  text-align: center;
}

.btn-primary,
.btn-save,
.btn-success {
  background-color: var(--gold-royal) !important;
  border-color: var(--gold-royal) !important;
  color: #050506 !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.btn-primary:hover,
.btn-save:hover,
.btn-success:hover {
  background-color: #e6c24a !important;
  border-color: #e6c24a !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}

.btn-outline-primary,
.btn-outline-warning {
  border-color: var(--gold-royal) !important;
  color: var(--gold-royal) !important;
}

.btn-outline-primary:hover,
.btn-outline-warning:hover {
  background-color: var(--gold-royal) !important;
  color: #050506 !important;
}

/* Danger reste sobre */
.btn-danger {
  background-color: #3a1e1e !important;
  border-color: #8b3a3a !important;
  color: #f1c0c0 !important;
}

/* --- 5. FLEXBOX & GRID POUR ÉVITER LES DÉBORDEMENTS --- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;           /* Utilisation de gap au lieu de marges négatives */
  margin-right: 0 !important;
  margin-left: 0 !important;
}

[class*="col-"] {
  padding-right: 0.75rem !important;
  padding-left: 0.75rem !important;
  max-width: 100% !important;
  flex: 0 0 auto;
}

/* Supprime les marges négatives de Bootstrap qui cassent le overflow */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

/* Conteneurs de boutons : toujours wrap */
.btn-group,
.button-holder,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* --- 6. TABLEAUX : ADAPTATION PARFAITE MOBILE --- */
.table-responsive {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background-color: transparent;
}

.table {
  color: #ddd;
  margin-bottom: 0;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0 4px;
  width: 100%;
  table-layout: auto; /* Permet aux colonnes de s'ajuster */
}

.table th,
.table td {
  padding: 0.9rem 0.75rem;
  vertical-align: middle;
  border: none !important;
  min-height: var(--touch-target-min);
  white-space: normal !important;
  word-break: break-word;
}

.table thead th {
  border-bottom: 2px solid var(--gold-royal) !important;
  color: var(--gold-royal);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  background-color: transparent;
  white-space: nowrap; /* Les titres restent sur une ligne si possible */
}

/* Lignes alternées pour lisibilité */
.table tbody tr {
  background-color: rgba(17, 17, 20, 0.8);
  border-radius: 12px;
  transition: var(--transition);
}

.table tbody tr:hover {
  background-color: rgba(212, 175, 55, 0.08);
}

/* Liens */
.table a {
  color: var(--gold-royal);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

/* --- 7. TYPOGRAPHIE RESPONSIVE AVEC CLAMP() --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gold-royal);
  max-width: 100%;
  word-break: break-word;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.card-title { font-size: clamp(1.2rem, 3vw, 1.5rem); }

p, .text-muted, .text-secondary {
  color: var(--text-secondary) !important;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
}

/* --- 8. SIDEBAR & NAVBAR : STABILITÉ --- */
.main-sidebar,
.brand-link,
.sidebar {
  background-color: #0c0c10 !important;
  max-width: 100%;
  overflow-x: hidden;
}

.sidebar .nav-sidebar .nav-link {
  color: #ddd !important;
  padding: 0.75rem 1rem !important;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  transition: var(--transition);
  border-left: 3px solid transparent;
  white-space: normal;
  word-break: break-word;
}

.sidebar .nav-sidebar .nav-link:hover,
.sidebar .nav-sidebar .nav-link.active {
  color: var(--gold-royal) !important;
  background: rgba(212, 175, 55, 0.08);
  border-left-color: var(--gold-royal);
}

.navbar {
  background-color: #0c0c10 !important;
  border-bottom: 1px solid var(--gold-royal) !important;
  min-height: 60px;
  padding: 0 1rem;
  flex-wrap: wrap;
}

.navbar-nav {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.navbar .nav-link {
  color: #ddd !important;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem !important;
  white-space: normal;
}

/* --- 9. BANNIÈRE DE BIENVENUE INJECTÉE (STABLE) --- */
.admin-welcome-banner {
  background: linear-gradient(145deg, #0a0a0e, #13131a);
  border: 1px solid var(--gold-royal);
  border-radius: 24px;
  padding: clamp(1.2rem, 4vw, 2rem);
  margin-bottom: 2rem;
  max-width: 100% !important;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-welcome-banner h2 {
  margin: 0;
  color: var(--gold-royal);
  font-weight: 700;
}

.welcome-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stat-badge {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--gold-royal);
  border-radius: 60px;
  padding: 0.5rem 1.5rem;
  color: #fff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: clamp(0.8rem, 2vw, 1rem);
}

/* --- 10. MEDIA QUERIES MOBILE-FIRST (< 768px) --- */
@media (max-width: 767.98px) {
  /* Forcer les colonnes Bootstrap à 100% */
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5,
  .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10,
  .col-md-11, .col-md-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5,
  .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10,
  .col-sm-11, .col-sm-12,
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5,
  .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10,
  .col-lg-11, .col-lg-12,
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5,
  .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10,
  .col-xl-11, .col-xl-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .card-header,
  .card-body {
    padding: 1rem !important;
  }

  /* Boutons en pleine largeur sur mobile */
  .btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .btn-group,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* Tableaux : réduire padding pour lisibilité */
  .table th, .table td {
    padding: 0.6rem 0.5rem !important;
  }

  /* Sidebar en drawer (si non géré par Jazzmin) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 280px;
    max-width: 85vw;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Empêche le scroll horizontal sur mobile */
  .content-wrapper {
    padding: 0.5rem !important;
  }

  .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Bannière : colonne */
  .admin-welcome-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .welcome-stats {
    width: 100%;
  }

  .stat-badge {
    flex: 1;
    justify-content: center;
  }
}

/* --- 11. NOTIFICATIONS (TOASTS) STABLES --- */
.messagelist {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1070;
  max-width: 380px;
  width: calc(100% - 40px);
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none;
}

.messagelist li {
  background: #111114;
  border-left: 6px solid var(--gold-royal);
  color: #f0f0f0;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--gold-royal);
  font-weight: 500;
  display: flex;
  align-items: center;
  animation: slideIn 0.3s ease-out;
  pointer-events: auto;
  max-width: 100%;
  word-break: break-word;
}

.messagelist li.success { border-left-color: #2e7d32; }
.messagelist li.error { border-left-color: #b71c1c; }
.messagelist li.warning { border-left-color: #f9a825; }

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

/* --- 12. SUPPRESSION DES STYLES BOOTSTRAP CONFLICTUELS --- */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* Empêche les débordements de largeur des images */
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Ajustements pour les formulaires */
input, select, textarea, .form-control {
  max-width: 100% !important;
  background-color: #1a1a1f !important;
  border: 1px solid #444 !important;
  color: #eee !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold-royal) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3) !important;
  outline: none !important;
}

/* Labels */
label {
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.3rem;
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
}