/* ==========================================================================
   styles.css - Dark mode ready, variables + overrides
   ========================================================================== */

/* --------------------------
   Variables globales (light defaults)
   -------------------------- */
:root{
  --avatar-size: 200px;
  --avatar-small: 100px;
  --preview-size: 180px;
  --preview-size-mobile: 95px;
  --btn-min-w: 110px;
  --gap: 0.75rem;
  --nav-height: 0px;

  /* palette light */
  --bg: #f8f9fb;
  --card-bg: #ffffff;
  --text: #212529;
  --muted: #666666;
  --border: #dee2e6;
  --link: #0d6efd;
  --danger: #dc3545;
  --success-green: rgba(40,167,69,0.95);

  --nav-accent: rgba(174,0,255,1);
  --nav-accent-dark: rgb(130,3,190);

  --shadow-soft: 0 4px 10px rgba(0,0,0,0.06);
  --shadow-very-soft: 0 1px 3px rgba(0,0,0,0.04);

  --participant-avatar-size: 80px;

  --focus-outline: rgba(0,0,0,0.08);
  --placeholder-color: rgba(0, 0, 0, 0.35);
  --toggler-icon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000000' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* --------------------------
   System preference = dark (appliqué seulement si data-theme non forcé)
   -------------------------- */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b0d10;
    --card-bg: #0f1114;
    --text: #e9eef6;
    --muted: #9aa6b2;
    --border: rgba(255,255,255,0.06);
    --link: #66aaff;
    --danger: #ff6b6b;
    --shadow-soft: 0 6px 18px rgba(0,0,0,0.6);
    --shadow-very-soft: 0 1px 3px rgba(0,0,0,0.25);
    --focus-outline: rgba(255,255,255,0.06);
    --placeholder-color: rgba(255, 255, 255, 0.5);
    --toggler-icon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
}

/* --------------------------
   Forcer thème via data-attribute (plus spécifique)
   -------------------------- */
html[data-theme="dark"]{
  --bg: #0b0d10;
  --card-bg: #0f1114;
  --text: #e9eef6;
  --muted: #9aa6b2;
  --border: rgba(255,255,255,0.06);
  --link: #66aaff;
  --danger: #ff6b6b;
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.6);
  --shadow-very-soft: 0 1px 3px rgba(0,0,0,0.25);
  --focus-outline: rgba(255,255,255,0.06);
  --placeholder-color: rgba(255, 255, 255, 0.5);
  --toggler-icon: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
html[data-theme="light"]{
  --bg: #f8f9fb;
  --card-bg: #ffffff;
  --text: #212529;
  --muted: #666666;
  --border: #dee2e6;
  --link: #0d6efd;
  --danger: #dc3545;
  --shadow-soft: 0 4px 10px rgba(0,0,0,0.06);
  --shadow-very-soft: 0 1px 3px rgba(0,0,0,0.04);
}

/* === Forcer bg-light/bg-white à suivre le thème sombre lorsqu'on force data-theme="dark" === */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] body.bg-light,
html[data-theme="dark"] body.bg-white {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  /* retirer éventuellement ombres claires qui trahissent un thème clair */
  box-shadow: none !important;
  border-color: var(--border) !important;
}

/* Navbar spécifique (Bootstrap utilise parfois .navbar-light/.bg-white) */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.bg-white,
html[data-theme="dark"] .navbar.bg-light,
html[data-theme="dark"] .navbar-light {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Inputs, cards ou autres éléments qui peuvent avoir classes bootstrap blanches */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* --------------------------
   Base layout
   -------------------------- */
html,body{
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  height: 100%;
  padding-top: 16px;
}

/* === Theme-aware overrides for Bootstrap utilities ===
   Put this near the top of styles.css (after :root/html[data-theme] definitions)
*/
.bg-light, .bg-white, body.bg-light, body.bg-white {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Navbar: force a themed background (opaque) so it n'apparaisse pas transparent */
.navbar, .navbar-light, .navbar.bg-white {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
}

/* Ensure sticky-top / fixed headers keep same background */
.sticky-top, .navbar.sticky-top {
  background-color: var(--card-bg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Dropdowns, modals, and overlays */
.dropdown-menu, .modal-content, .card {
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Ensure body uses var even if .bg-* utilities are present on ancestors */
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}


/* Ensure bootstrap .bg-white doesn't force wrong color on nav if used elsewhere:
   we prefer explicit .site-navbar instead of global overriding .bg-white. */
.site-navbar {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-very-soft);
}

/* navbar brand / links */
.site-navbar .navbar-brand,
.site-navbar .nav-link {
  color: var(--text);
}
.site-navbar .nav-link:hover { color: var(--nav-accent); }
.site-navbar .nav-link.active { color: var(--nav-accent-dark); }

/* Toggler border for visibility in dark */
.navbar-toggler {
  border: 1px solid var(--border);
  background-color: rgba(0,0,0,0.02); /* subtle bg to separate from nav */
  padding: .25rem .5rem;
  border-radius: .375rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* icône : on remplace l'image par défaut par notre data-uri
   et on s'assure de sa taille/position */
.navbar-toggler-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-image: var(--toggler-icon) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem 1.5rem;
  filter: none !important; /* fallback si le navigateur applique un filtre par défaut */
  opacity: 0.95;
}

/* Links color */
a { color: var(--link); }

/* --------------------------
   Utilities
   -------------------------- */
.d-none { display: none !important; }

/* .alert { margin-bottom: .6rem; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); } */
.text-muted { color: var(--muted) !important; }

/* focus outlines */
.navbar-nav .nav-link:focus,
.navbar-brand:focus,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px dashed var(--focus-outline);
  outline-offset: 3px;
}
/* ==========================
   Navbar / global accents
   ========================== */
.navbar-nav .nav-link:hover,
.navbar-brand:hover {
  color: var(--nav-accent) !important;
}

.navbar-nav .nav-link.active,
.navbar-brand.active {
  color: var(--nav-accent-dark) !important;
}
#navNewsBadge, #navMessagesBadge{
  font-size: 0.7em !important;
  padding: 0.26em 0.32em !important;
  vertical-align: super !important;
  margin-left: -2px !important;
  line-height: 1;
}

#navGlobalBadge {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 0.5em !important;
  padding: 0.25em 0.25em !important;
  line-height: 1;
  z-index: 1;
  border-radius: 10px; /* Optional: to make it round */
}


/* petit badge "Nouveau" ajouté aux cartes d'actualités */
.news-new-badge {
  font-size: 0.7rem;
  display: inline-block;
  position: relative;
  margin-right: 6px;
  line-height: 1;
}
/* --------------------------
   Avatar / upload preview
   -------------------------- */
.avatar-row{ display:flex; gap:var(--gap); align-items:center; flex-wrap:wrap; justify-content:space-around; }
.avatar-reset-wrap{ position:relative; display:inline-block; flex:0 1 var(--avatar-size); min-width:calc(var(--avatar-size)*0.6); }
.avatar-large{ width:100%; height:var(--avatar-size); object-fit:cover; border-radius:50%; display:block; box-shadow:var(--shadow-very-soft); }
.btn-avatar-reset{ position:absolute; top:6px; right:6px; width:20px; height:20px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,0,0,0.4); color:#fff; border:none; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.35); }
.btn-avatar-reset:hover{ background:rgba(255,0,0,0.8); }
.avatar-controls{ display:flex; gap:.4rem; flex:0 0 auto; align-items:center; justify-content:center; min-width:var(--btn-min-w); }
.preview-wrap{ position:relative; display:inline-block; flex:0 1 var(--preview-size); min-width:calc(var(--preview-size)*0.5); }

.avatar-thumb{ width:100%; height:var(--preview-size); object-fit:cover; border-radius:50%; display:block; }

/* overlay check */
.check-validate{ position:absolute; top:-6px; right:-6px; width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--success-green); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.25); transform:scale(.9); transition:transform .12s ease, opacity .12s ease; z-index:5; }
.check-validate.d-none{ display:none !important; }

/* --------------------------
   Palette couleurs / user cards / profile
   -------------------------- */
.color-palette{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.color-option{ width:28px; height:28px; display:inline-block; border:1px solid var(--border); border-radius:4px; }
.color-palette input[type="radio"]{ display:none; }
.color-palette input[type="radio"]:checked + .color-option { outline:3px solid rgba(0,0,0,0.12); outline-offset:2px; }

.user-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:.5rem; padding:1rem; margin-bottom:1rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--text); box-shadow:var(--shadow-very-soft); }
.user-card .avatar-thumb{ width:100px; height:100px; object-fit:cover; border-radius:50%; margin:0 auto .5rem; display:block; box-shadow:0 1px 3px rgba(0,0,0,0.06); }

/* role labels */
.role-label{ font-size:1rem; color:#fff; padding:.2rem .6rem; border-radius:.25rem; display:inline-block; }
.role-user{ background-color:#6c757d; }
.role-admin{ background-color:#0d6efd; }
.role-superadmin{ background-color:var(--danger); }

/* profile avatar */
.profile-avatar{ width:150px; height:150px; object-fit:cover; border-radius:50%; display:block; margin-bottom:.75rem; box-shadow:var(--shadow-soft); }
.site-navbar.fixed-top {
  position: fixed !important;
}
/* push-summary */
.push-summary{ border-left:4px solid var(--nav-accent); padding:.6rem .8rem; background:var(--card-bg); box-shadow:var(--shadow-very-soft); margin-bottom:.75rem; font-size:.95rem; color:var(--text); }
.push-stats {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}
.push-stats .stat {
  padding: .35rem .6rem;
  border-radius: 6px;
  background: #f8f9fa;
  font-weight: 600;
}
/* .user-status : évite le débordement (pseudo + parenthèses) */
.user-status {
  font-size: 0.875em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}
/* bouton personnalisé de la navbar (par ex. déconnexion) */
.custom-button {
  width: 100px;
  text-align: center;
  box-sizing: border-box;
}
/* --------------------------
   Event / participants / comments
   -------------------------- */
.creator-label{ font-size:.9rem; color:var(--muted); }
.event-image{ width:100%; height:auto; object-fit:cover; max-height:300px; display:block; border-radius:.25rem; box-shadow:var(--shadow-very-soft); }
.event-description p { margin-bottom: 0rem;}

.participant-avatar, .participants .avatar-thumb, .user-popover img.avatar-thumb { width:var(--participant-avatar-size); height:var(--participant-avatar-size); object-fit:cover; border-radius:50%; display:block; }
.comment-avatar{ width:50px !important; height:50px !important; object-fit:cover !important; border-radius:50% !important; display:block; flex-shrink:0; }

/* texts / utilities */
.self{ font-weight:bold; color:var(--text); }
.guest{ font-style:italic; color:var(--muted); cursor:pointer; }
.card-text{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* Dropdown / menus adapt to theme */
.dropdown-menu{ min-width:100%; background:var(--card-bg); color:var(--text); border:1px solid var(--border); }

/* btns */
.btn-primary{ background:var(--link); border-color:var(--link); color:#fff; }
.btn-outline-primary{ color:var(--link); border-color:var(--link); }

/* comment delete button */
.btn-comment-delete{ width:34px; height:34px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-weight:600; background:rgba(220,53,69,0.12); color:var(--danger); border:1px solid rgba(220,53,69,0.18); cursor:pointer; transition:background .12s ease, transform .08s ease; flex:0 0 auto; z-index:10; }
.btn-comment-delete:hover{ background:rgba(220,53,69,0.18); transform:translateY(-1px); }

/* inapp / a2hs banners */
.inapp-banner, .a2hs-banner{ position:fixed; left:12px; right:12px; z-index:11000; background:var(--card-bg); border-radius:10px; box-shadow:var(--shadow-soft); padding:0.6rem; display:flex; justify-content:center; align-items:center; gap:.5rem; transition:transform .18s ease, opacity .18s ease; font-size:.95rem; max-width:980px; margin:0 auto; }
.inapp-banner{ bottom:18px; }
.a2hs-banner{ bottom:16px; z-index:12000; }

/* cards */
.card{ background:var(--card-bg); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-very-soft); }

/* forms */
.form-control, .form-select{ background: transparent; color: var(--text); border: 1px solid var(--border); }
.form-check-input{ color: var(--text); border: 1px solid var(--border); }
.form-control::placeholder, .form-select::placeholder {color: var(--placeholder-color);}
.form-check-label{ color: var(--text); }

/* event thumbnails on profile */
.card-img-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
}

/* ==========================
   Profile page styles
   ========================== */
.profile-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: .5rem;
}
.profile-avatar {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-bottom: .75rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
/* ensure role-label consistency (kept already defined above) */

/* event thumbnails on profile */
.card-img-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
}
/* ==== Table / card dashboard theme fixes ==== */
/* S'assurer que les tables suivent le thème (background / textes / bordures) */
.table,
.table tbody,
.table thead,
.table tbody tr,
.table thead tr {
  background-color: transparent;
  color: var(--text);
}

/* Cellules et en-têtes */
.table th,
.table td {
  background-color: transparent;
  color: var(--text);
  vertical-align: middle;
}

/* Bordures pour table-bordered */
.table.table-bordered th,
.table.table-bordered td {
  border-color: var(--border) !important;
}

/* En-têtes : léger fond distinct mais dépendant du thème (lisibilité) */
.table thead th {
  background-color: rgba(0,0,0,0.03);
  color: var(--text);
}
html[data-theme="dark"] .table thead th {
  background-color: rgba(255,255,255,0.03);
}

/* Si tu utilises .table-light, l'override suivant empêche un fond blanc cassant */
.table.table-light thead th,
.table-light {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* override pour utilitaires bootstrap qui pourraient forcer un fond blanc sur le conteneur */
.bg-white, .bg-light {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* custom-card : utiliser la variable d'ombre pour rester cohérent avec le thème */
.custom-card {
  box-shadow: var(--shadow-soft) !important;
  border-color: rgba(202,145,255,1);
  background-color: var(--card-bg);
  color: var(--text);
}
/* ===== Overrides for admin/dashboard.php (stat-grid, chips, logs) ===== */
.stat-grid .stat-card,
.stat-card {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-very-soft) !important;
  border: 1px solid var(--border) !important;
}

.muted, .small-muted {
  color: var(--muted) !important;
}

/* chips */
.chip {
  padding: .35rem .6rem;
  background-color: rgba(0,0,0,0.03) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
}
html[data-theme="dark"] .chip {
  background-color: rgba(255,255,255,0.03) !important;
}

/* top list separators */
.top-list li {
  border-bottom: 1px dashed var(--border) !important;
  color: var(--text) !important;
}

/* table / cards already global, but ensure .card inside this page uses theme */
.stat-grid .card, .card {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* log-pre */
.log-pre {
  background: rgba(0,0,0,0.85) !important; /* fallback dark block on light theme */
  color: #eee !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .log-pre {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
}

/* ensure links inside lists are visible */
.top-list a { color: var(--link) !important; text-decoration: underline !important; }

/* safety: override page-local .stat-card background:#fff */
body .stat-card[style], .stat-card[style] { background: var(--card-bg) !important; color: var(--text) !important; }


/* responsive tweaks */
@media (max-width: 768px){
  :root{ --avatar-size: var(--avatar-small); }
  .avatar-reset-wrap{ min-width:var(--avatar-small); flex:0 0 var(--avatar-small); }
  .avatar-large{ height:var(--avatar-small); }
  .preview-wrap{ min-width:var(--preview-size-mobile); flex:0 0 var(--preview-size-mobile); }
  .avatar-thumb{ height:var(--preview-size-mobile); }

  .event-image{ max-height:100%; width:100%; margin-bottom:10px; }
  .participant-avatar, .participants .avatar-thumb{ width:70px; height:70px; }
  .comment-avatar{ width:44px !important; height:44px !important; }
  /* profile adjustments */
  .profile-avatar { width: 120px; height: 120px; }
  .card-img-thumb { width: 70px; height: 70px; }
  .navbar-nav { padding-left: 10px; margin-bottom: 0; list-style: none; }
  .navbar-nav .nav-item { margin-bottom: 0; }
  .navbar-nav .btn { width: 100%; margin-bottom: 0; }
  .navbar .btn.w-100 { width: 100% !important; }
}

/* small sizes */
@media (max-width: 576px){
  .user-card{ padding:.8rem; }
  .user-card .avatar-thumb{ width:90px; height:90px; }
  .btn-comment-delete{ width:36px; height:36px; }
}

/* final selection styling for dark */
@media (prefers-color-scheme: dark){
  ::selection{ background: rgba(255,255,255,0.12); color: #fff; }
}