/* =======================================
   🎨 EduBridge BuddyX UI – Thème sombre premium (v2.2)
   ======================================= */

body.buddypress {
  background: #0e1120;
  color: #e6e8f5;
  font-family: "Inter", "Poppins", sans-serif;
  line-height: 1.6;
}

/* ====== Structure générale ====== */
#edb-bp-layout {
  display: flex;
  gap: 28px;
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ====== Sidebar ====== */
.edb-bp-sidebar {
  width: 260px;
  background: #14172b;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  position: sticky;
  top: 20px;
  height: fit-content;
}

.edb-bp-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edb-bp-sidebar li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: #b9bfd8;
  font-weight: 500;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
}

.edb-bp-sidebar li a:hover,
.edb-bp-sidebar li.current a {
  background: linear-gradient(135deg, #6c4ef3, #f3b53c);
  color: #fff !important;
  transform: translateX(4px);
}

/* ===== Icônes ===== */
.edb-bp-sidebar li:nth-child(1) a::before { content: "📰"; }
.edb-bp-sidebar li:nth-child(2) a::before { content: "👤"; }
.edb-bp-sidebar li:nth-child(3) a::before { content: "🔔"; }
.edb-bp-sidebar li:nth-child(4) a::before { content: "💬"; }
.edb-bp-sidebar li:nth-child(5) a::before { content: "🤝"; }
.edb-bp-sidebar li:nth-child(6) a::before { content: "👥"; }
.edb-bp-sidebar li:nth-child(7) a::before { content: "⚙️"; }


/* ====== Contenu principal ====== */
.edb-bp-content {
  flex: 1;
  background: #181b31;
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.45);
}

/* ====== Titres et textes ====== */
.edb-bp-content h1,
.edb-bp-content h2,
.edb-bp-content h3 {
  color: #fff;
  font-weight: 700;
}

.edb-bp-content h4,
.edb-bp-content h5,
.edb-bp-content label,
.edb-bp-content span,
.edb-bp-content li,
.edb-bp-content p {
  color: #d8dbec;
}

/* ====== Cartes ====== */
.edb-bp-content .item-list li,
.edb-bp-content .activity-item,
.edb-bp-content .notification {
  background: #1d2240;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #eceefc;
  transition: all 0.25s ease;
}

.edb-bp-content .item-list li:hover,
.edb-bp-content .activity-item:hover {
  border-color: rgba(108, 78, 243, 0.6);
  box-shadow: 0 6px 16px rgba(108, 78, 243, 0.25);
  transform: translateY(-3px);
}

/* ====== Formulaires ====== */
.edb-bp-content input[type=text],
.edb-bp-content input[type=email],
.edb-bp-content input[type=password],
.edb-bp-content textarea,
.edb-bp-content select {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.edb-bp-content input:focus,
.edb-bp-content textarea:focus {
  border-color: #f3b53c;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.edb-bp-content input::placeholder {
  color: #9ea4c8;
}

/* ====== Boutons ====== */
.edb-bp-content a.button,
.edb-bp-content button,
.edb-bp-content input[type=submit],
button,
a.bp-primary-action,
a.bp-secondary-action {
  display: inline-block;
  background: linear-gradient(135deg, #6c4ef3, #f3b53c);
  color: #fff !important;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(108, 78, 243, 0.25);
}

.edb-bp-content a.button:hover,
.edb-bp-content button:hover,
.edb-bp-content input[type=submit]:hover {
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(108, 78, 243, 0.35);
}



/* ====== Notifications ====== */
.edb-bp-content .notifications .unread {
  border-left: 4px solid #f3b53c;
  background: rgba(243, 181, 60, 0.08);
}

#buddypress a,
.edb-bp-content a { color: #f3b53c; text-decoration: none; }
#buddypress a:hover,
.edb-bp-content a:hover { color: #ffcb6f; text-decoration: underline; }

#buddypress button,
#buddypress input[type=button],
#buddypress input[type=reset],
#buddypress input[type=submit],
#buddypress a.button,
.edb-bp-content button,
.edb-bp-content input[type=button],
.edb-bp-content input[type=reset],
.edb-bp-content input[type=submit],
.edb-bp-content a.button {
  background: linear-gradient(135deg, #6c4ef3, #f3b53c) !important;
  color: #fff !important;
  border: none !important;
}
/* ============================================
   ✅ Correctifs de lisibilité et uniformité globale
   ============================================ */

/* --- Zones de fond clair mal contrastées (notifications, filtres, etc.) --- */
#buddypress select,
#buddypress .filter select,
#buddypress .notifications-options select,
#buddypress .activity-filters select {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
}

#buddypress select option {
  background: #14172b !important;
  color: #fff !important;
}

/* --- Correction des zones blanches par défaut dans BuddyPress --- */
#buddypress,
#buddypress div,
#buddypress table,
#buddypress td,
#buddypress th {
  background-color: transparent !important;
  color: #e6e8f5 !important;
}

/* --- Cartes et encadrés (groupes, membres, notifications) --- */
#buddypress .item-list li,
#buddypress .activity-item,
#buddypress .notification,
#buddypress .group-item {
  background: rgba(24, 27, 49, 0.95) !important;
  border-radius: 14px !important;
  color: #e7e9f3 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* --- Description des groupes (texte lisible) --- */
#buddypress .group-description,
#buddypress .group-meta,
#buddypress .group-header-meta {
  color: #d5d8ea !important;
  background: rgba(20, 23, 43, 0.75) !important;
  border-radius: 10px;
  padding: 10px 14px;
}

/* --- Boutons gris remplacés par la charte violette/or --- */
#buddypress a.button,
#buddypress button,
#buddypress input[type=submit],
#buddypress input[type=button],
#buddypress input[type=reset],
#buddypress .generic-button a,
#buddypress .activity-meta a {
  background: linear-gradient(135deg, #6c4ef3, #f3b53c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 3px 10px rgba(108, 78, 243, 0.3);
  transition: all 0.25s ease;
}

#buddypress a.button:hover,
#buddypress button:hover,
#buddypress input[type=submit]:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* --- Lien "Tout" (filtres notifications) --- */
#buddypress .filters,
#buddypress .notifications-options,
#buddypress .activity-filters {
  background: rgba(20, 23, 43, 0.8) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  color: #e7e9f3 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Champs et formulaires (inscriptions, messagerie) --- */
#buddypress input[type=text],
#buddypress input[type=email],
#buddypress input[type=password],
#buddypress textarea,
#buddypress select {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  transition: border-color 0.2s ease;
}

#buddypress input:focus,
#buddypress textarea:focus {
  border-color: #f3b53c !important;
  outline: none !important;
}

/* --- Tables (liste notifications, amis, groupes) --- */
#buddypress table {
  background: rgba(24, 27, 49, 0.95) !important;
  border-radius: 12px !important;
  color: #e8ebfa !important;
}
#buddypress table th {
  background: rgba(108, 78, 243, 0.2) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
#buddypress table td {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --- Activités et commentaires --- */
#buddypress .activity-content,
#buddypress .acomment-content {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  color: #e6e9f3 !important;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  #buddypress select,
  #buddypress .filters select {
    width: 100% !important;
  }
}
/* === Avatar cliquable (changement photo) === */
#buddypress .avatar,
#buddypress .user-avatar img {
  transition: all 0.3s ease;
  position: relative;
}
#buddypress .avatar:hover,
#buddypress .user-avatar img:hover {
  opacity: 0.8;
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(243, 181, 60, 0.6);
}
#buddypress .user-nicename,
#buddypress .bp-userbox__handle,
#buddypress .nickname {
  color: #f3b53c;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

#buddypress .user-nicename:hover,
#buddypress .bp-userbox__handle:hover,
#buddypress .nickname:hover {
  color: #ffd37b;
  text-decoration: underline;
}
/* ============================================
   ✅ Espacement du layout sous la barre du site
   ============================================ */
#edb-bp-layout {
  margin-top: 60px !important; /* espace entre la barre blanche et le contenu */
}

/* Option : si certaines pages BuddyPress ont un header plus haut (ex: avec cover image) */
body.buddypress #edb-bp-layout {
  padding-top: 20px !important;
}
/* === Liens supplémentaires dans la sidebar === */
.edb-bp-sidebar .edb-nav-extra a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: #b9bfd8;
  font-weight: 500;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
}

.edb-bp-sidebar .edb-nav-extra a:hover,
.edb-bp-sidebar .edb-nav-extra a.current {
  background: linear-gradient(135deg, #6c4ef3, #f3b53c);
  color: #fff !important;
  transform: translateX(4px);
}
.loading-activity {
  text-align: center;
  padding: 40px;
  color: #ccc;
  font-size: 15px;
  opacity: 0.7;
}
/* ==========================================================
   📱 Version mobile unifiée – layout compact et scrollable
   ========================================================== */
@media (max-width: 900px) {

  /* === Conteneur global : layout horizontal avec scroll === */
  #edb-bp-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    width: 100%;
    overflow-x: auto !important;     /* ✅ scroll horizontal conservé */
    overflow-y: visible !important;  /* ✅ autorise le scroll vertical */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 auto;
  }
html, body {
  scroll-behavior: smooth !important;
}
  /* === Masque tout débordement du body === */
body.buddypress {
  overflow-x: hidden !important;
}

body.buddypress #edb-bp-layout {
  transform: scale(0.97);
  transform-origin: top center;
}
  /* === Sidebar === */
  .edb-bp-sidebar {
    flex: 0 0 230px !important;
    min-width: 230px !important;
    background: #14172b;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    scroll-snap-align: start;
  }

  .edb-bp-sidebar ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .edb-bp-sidebar li a {
    font-size: 14px;
    padding: 10px 14px;
    text-align: left;
  }

  /* === Contenu principal === */
  .edb-bp-content {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    background: #181b31;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.45);
    scroll-snap-align: start;
  }
/* MOBILE : bande blanche fixe + texte qui défile en continu */
@media (max-width: 900px) {
  body.buddypress {
    padding-bottom: 40px; /* espace sous la bande */
  }

  /* --- Bande blanche --- */
  body.buddypress #edb-bp-layout::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    z-index: 99998;
    pointer-events: none;
  }

  /* --- Texte défilant au-dessus de la bande --- */
  body.buddypress #edb-bp-layout::before {
    content: "⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢";
    position: fixed;
    bottom: 0;
    left: 0;
    height: 32px;
    line-height: 32px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 100000;
    background: linear-gradient(
      to right,
      #fff 0%,
      #fff 10%,
      rgba(255, 255, 255, 0.95) 90%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: edb-scroll-hint-marquee 18s linear infinite;
    pointer-events: none;
  }

  /* --- Animation fluide continue --- */
  @keyframes edb-scroll-hint-marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}

/* DESKTOP : on masque la bande */
@media (min-width: 901px) {
  body.buddypress #edb-bp-layout::after,
  body.buddypress #edb-bp-layout::before {
    display: none;
  }
}

  /* === Boutons du haut (Afficher / Modifier / etc.) === */
  #buddypress .item-list-tabs ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 18px;
  }

  #buddypress .item-list-tabs li a {
    display: block;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(108,78,243,0.3);
    transition: all 0.2s ease;
  }

  #buddypress .item-list-tabs li a:hover,
  #buddypress .item-list-tabs li.current a {
    background: linear-gradient(135deg, #6c4ef3, #f3b53c);
    color: #fff;
  }
}

/* Masque le message sur ordi */
@media (min-width: 901px) {
  #edb-bp-layout::after { display: none; }
}
#scrollFab,
.pwa-nav {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 99999 !important;
  transform: none !important;
}
/* ==========================================================
   📱 Bande “Faites glisser” haut + bas (mobile uniquement)
   ========================================================== */
@media (max-width: 900px) {
  body.buddypress {
    padding-top: 40px;
    padding-bottom: 40px; /* espace sous la bande */
    overflow-x: hidden !important;
  }

  /* --- Bande blanche en haut --- */
  body.buddypress #edb-bp-layout::before {
    content: "⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    line-height: 32px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 99999;
    animation: edb-scroll-hint-marquee 18s linear infinite;
    pointer-events: none;
  }

  /* --- Bande blanche en bas --- */
  body.buddypress #edb-bp-layout::after {
    content: "⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢    ⇠  Faites glisser  ⇢";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    line-height: 32px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255,255,255,0.95);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    z-index: 99999;
    animation: edb-scroll-hint-marquee 18s linear infinite;
    pointer-events: none;
  }

  /* --- Animation fluide continue --- */
  @keyframes edb-scroll-hint-marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}

/* --- Masque la bande sur ordinateur --- */
@media (min-width: 901px) {
  body.buddypress #edb-bp-layout::before,
  body.buddypress #edb-bp-layout::after {
    display: none !important;
  }
}
/* ============================================
   🧭 Harmonisation du layout pour /groupes/
   ============================================ */
body.buddypress #buddypress.groups {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

#buddypress.groups .item-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

#buddypress.groups .group-item {
  background: #1a1e32;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all .3s ease;
}

#buddypress.groups .group-item:hover {
  transform: translateY(-3px);
  border-color: rgba(243,181,60,0.4);
}

#buddypress.groups .item-avatar img {
  border-radius: 12px;
}

#buddypress.groups .item {
  color: #e5e7f0;
}
.edb-bp-sidebar li a.active {
  background: linear-gradient(135deg, #6c4ef3, #f3b53c);
  color: #fff !important;
  transform: translateX(4px);
}
/* 🚫 Cache le menu horizontal BuddyPress pour éviter la confusion */
#buddypress #item-nav,
#buddypress .bp-navs.main-navs {
    display: none !important;
}