/* ════════════════════════════════════════════════════════════════════════
   space-overrides.css — transfermarket.bsf-skills.com
   ────────────────────────────────────────────────────────────────────────
   Réplique les règles `body[data-space]` de
   social.bsf-go.com/assets/css/space.css pour que transfermarket/<slug>
   hérite l'identité marque (c1/c2/c3) EXACTEMENT comme space.bsf-skills.com,
   sur les composants BSF PARTAGÉS (mêmes classes via unified_topbar.php +
   tokens.css). Palette --space-c* + --space-bg injectées par _header.php,
   par slug, SQL-driven (bsf_spaces.theme_overrides).

   ÉCARTS VOLONTAIRES vs space.css (NE PAS « corriger » en croyant à un bug) :
   - PAS de `.bsf-sidenav{display:none}` ni `.bsf-mobile-nav{display:none}` :
     transfermarket GARDE sa nav (il n'a pas de `.space-cross-sites`).
   - PAS de `body[data-space]{ --s-accent; background; color }` global : le
     feed transfermarket est sombre, brandé via `main{--bsf-brand-accent}`
     (c2=#FFFFFF pour les marques casserait les accents du feed).
   - Carte login NON brandée (portal_login_card = design social, règle Walid)
     → le rail gauche est ciblé via `.bsf-sticky-inner` uniquement.
   - Composants ABSENTS sur transfermarket (feed `.bsf-post-*`, groupes/gens,
     widgets `.space-*` sport/cross-sites) : non répliqués.
   Sync : si space.css évolue sur ces composants, répercuter ici (2 copies).
   ════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ CHROME — topbar ═══════════════ */
body[data-space] .bsf-topbar-inner { background: var(--space-c1); color: var(--space-c2); border-bottom: 2px solid var(--space-c2); }
body[data-space] .bsf-logo-ring { box-shadow: 0 0 0 2px var(--space-c2), 0 4px 14px rgba(0,0,0,.25); }
body[data-space] .bsf-topbar .bsf-brand,
body[data-space] .bsf-topbar .bsf-brand *,
body[data-space] .bsf-topbar .bsf-btn,
body[data-space] .bsf-topbar .bsf-btn-ghost,
body[data-space] .bsf-topbar .bsf-stats-badge { color: var(--space-c2) !important; }
body[data-space] .bsf-topbar .bsf-btn-primary { background: var(--space-c2) !important; color: var(--space-c1-solid, var(--space-c1)) !important; border-color: var(--space-c2) !important; }

/* ═══════════════ CHROME — colonne droite (widgets) ═══════════════ */
body[data-space] .bsf-right-col .bsf-card { background: var(--space-c1) !important; border: 0.5px solid var(--space-c2) !important; color: var(--space-c2); }
body[data-space] .bsf-right-col .bsf-widget-title,
body[data-space] .bsf-right-col .bsf-sug-name,
body[data-space] .bsf-right-col .bsf-sug-more-link { color: var(--space-c2); }
body[data-space] .bsf-right-col .bsf-sug-avatar-init { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .bsf-right-col .bsf-sbtn-ghost { border-color: var(--space-c2); color: var(--space-c2); }

/* ═══════════════ CHROME — rail gauche (desktop) ═══════════════
   Carte login NON ciblée : enfant DIRECT de .bsf-left-col, le rail est dans
   .bsf-sticky-inner → ce sélecteur ne l'atteint pas (design social préservé). */
body[data-space] .bsf-left-col .bsf-sticky-inner .bsf-card { background: var(--space-c1) !important; border: 0.5px solid var(--space-c2) !important; color: var(--space-c2); }
body[data-space] .bsf-sidenav a { color: var(--space-c2) !important; opacity: .82; }
body[data-space] .bsf-sidenav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
body[data-space] .bsf-sidenav a.active { background: rgba(255,255,255,.18); opacity: 1; font-weight: 700; }
body[data-space] .bsf-sidenav a.active i, body[data-space] .bsf-sidenav a.active svg { color: var(--space-c2) !important; stroke: var(--space-c2) !important; }
body[data-space] .bsf-sidenav hr { border-top-color: rgba(255,255,255,.28); }

/* ═══════════════ CHROME — bottom nav (mobile) ═══════════════ */
body[data-space] .bsf-mobile-nav { background: var(--space-c1) !important; border-top: 0.5px solid var(--space-c2) !important; }
body[data-space] .bsf-mobile-nav-item { color: var(--space-c2) !important; opacity: .62; }
body[data-space] .bsf-mobile-nav-item.active { color: var(--space-c2) !important; opacity: 1; font-weight: 600; }
body[data-space] .bsf-mobile-nav-item.active i, body[data-space] .bsf-mobile-nav-item.active svg { color: var(--space-c2) !important; stroke: var(--space-c2) !important; }

/* ════════════════════════════════════════════════════════════════════════
   CHAT BOT WIDGET (.chat-*) — theming c1/c2 (copié de space.css)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .chat-panel { background: var(--space-bg); border-color: var(--space-c2); color: var(--space-c2); }
body[data-space] .chat-header { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .chat-close { background: rgba(0,0,0,.10); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .chat-close:hover { background: rgba(0,0,0,.20); }
body[data-space] .chat-sub { color: var(--space-c1-solid, var(--space-c1)); opacity: .85; }
body[data-space] .chat-bubble.bot,
body[data-space] .chat-bubble.admin { background: rgba(0,0,0,.06); border-color: var(--space-c2); color: var(--space-c2); }
body[data-space] .chat-bubble.user { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .chat-form { background: var(--space-bg); border-top-color: var(--space-c2); }
body[data-space] .chat-input { background: var(--space-bg); color: var(--space-c2); border-color: var(--space-c2); }
body[data-space] .chat-input::placeholder { color: var(--space-c2); opacity: .6; }
body[data-space] .chat-input:focus { border-color: var(--space-c2); box-shadow: 0 0 0 2px rgba(0,0,0,.05); }
body[data-space] .chat-send-btn { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .chat-actions { border-top-color: var(--space-c2); }
body[data-space] .chat-action-btn.primary { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .chat-action-btn.ghost { background: transparent; color: var(--space-c2); border-color: var(--space-c2); }
body[data-space] .chat-action-btn.ghost:hover { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .chat-links { border-top-color: var(--space-c2); }
body[data-space] .chat-link { color: var(--space-c2); border-color: var(--space-c2); }
body[data-space] .chat-link:hover { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }

/* ════════════════════════════════════════════════════════════════════════
   PEER CHAT / MESSAGERIE user-à-user (.pc-*) — theming c1/c2/c3 (copié de space.css)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .pc-panel { background: var(--space-bg); color: var(--space-c2); }
body[data-space] .pc-header { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-header::after { display: none; }
body[data-space] .pc-header-title { color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-header-sub   { color: var(--space-c1-solid, var(--space-c1)); opacity: .7; }
body[data-space] .pc-header-icon { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.15); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-close { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.15); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-close:hover { background: rgba(0,0,0,.2); }
body[data-space] .pc-auth-msg { background: var(--space-bg); color: var(--space-c2); }
body[data-space] .pc-auth-msg h3,
body[data-space] .pc-auth-msg p { color: var(--space-c2); }
body[data-space] .pc-auth-icon-wrap { background: rgba(0,0,0,.06); color: var(--space-c2); }
body[data-space] .pc-auth-cta { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); box-shadow: none; }
body[data-space] .pc-contacts-panel { background: var(--space-bg); border-right-color: var(--space-c2); }
body[data-space] .pc-contacts-label { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-search-inner { background: var(--space-bg); border-color: var(--space-c2); }
body[data-space] .pc-search-inner:focus-within { border-color: var(--space-c2); box-shadow: 0 0 0 2px rgba(0,0,0,.05); }
body[data-space] .pc-search { color: var(--space-c2); }
body[data-space] .pc-search::placeholder { color: var(--space-c2); opacity: .5; }
body[data-space] .pc-search-icon { color: var(--space-c2); }
body[data-space] .pc-contact-item:hover { background: rgba(0,0,0,.05); }
body[data-space] .pc-contact-item.active { background: var(--space-c2); }
body[data-space] .pc-contact-item.active::before { background: var(--space-c1); }
body[data-space] .pc-contact-item.active .pc-contact-name,
body[data-space] .pc-contact-item.active .pc-contact-preview { color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-contact-name { color: var(--space-c2); }
body[data-space] .pc-contact-preview { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-contact-avatar { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-contact-avatar[data-ci] { background: var(--space-c2); }
body[data-space] .pc-presence-dot { border-color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-thread-header { background: var(--space-bg); border-bottom-color: var(--space-c2); }
body[data-space] .pc-messages-body { background: var(--space-bg); }
body[data-space] .pc-compose,
body[data-space] .pc-compose-toolbar { background: var(--space-bg); border-top-color: var(--space-c2); }
body[data-space] .pc-compose-input { background: var(--space-bg); color: var(--space-c3); border-color: var(--space-c3); }
body[data-space] .pc-compose-input::placeholder { color: var(--space-c3); opacity: .85; }
body[data-space] .pc-compose-input:focus { border-color: var(--space-c3); box-shadow: 0 0 0 2px rgba(0,0,0,.05); background: var(--space-bg); }
body[data-space] .pc-compose-send { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); box-shadow: none; }
body[data-space] .pc-thread-avatar { background: var(--space-c1) !important; color: var(--space-c2); box-shadow: 0 0 0 2px var(--space-c2), 0 0 0 3.5px var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-empty-icon { background: var(--space-c1); color: var(--space-c2); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
body[data-space] .pc-msg.mine { background: var(--space-c1); color: var(--space-c2); box-shadow: none; }
body[data-space] .pc-thread-name { color: var(--space-c3); }
body[data-space] .pc-thread-status { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-thread-back { color: var(--space-c2); }
body[data-space] .pc-call-btn { background: rgba(0,0,0,.08); color: var(--space-c3); }
body[data-space] .pc-call-btn:hover { background: rgba(0,0,0,.18); color: var(--space-c3); }
body[data-space] .pc-call-btn-video { background: rgba(0,0,0,.08); color: var(--space-c3); }
body[data-space] .pc-call-btn-video:hover { background: rgba(0,0,0,.18); color: var(--space-c3); }
body[data-space] .pc-tool-btn { color: var(--space-c3); opacity: .9; }
body[data-space] .pc-tool-btn:hover { background: rgba(0,0,0,.06); color: var(--space-c3); opacity: 1; }
body[data-space] .pc-tool-btn.active { color: var(--space-c1-solid, var(--space-c1)); background: var(--space-c2); }
body[data-space] .pc-emoji-popup { background: var(--space-bg); border-color: var(--space-c2); }
body[data-space] .pc-emoji-cats { background: var(--space-bg); border-bottom-color: var(--space-c2); }
body[data-space] .pc-emoji-cat-btn { color: var(--space-c2); }
body[data-space] .pc-emoji-cat-btn:hover { background: rgba(0,0,0,.06); }
body[data-space] .pc-emoji-cat-btn.active { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
body[data-space] .pc-emoji-grid { background: var(--space-bg); }
body[data-space] .pc-emoji-btn { color: var(--space-c2); }
body[data-space] .pc-emoji-btn:hover { background: rgba(0,0,0,.06); }
body[data-space] .pc-day-sep { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-day-sep::before,
body[data-space] .pc-day-sep::after { background: var(--space-c2); opacity: .3; }
body[data-space] .pc-msg.mine .pc-msg-meta { color: var(--space-c3); }
body[data-space] .pc-msg.theirs .pc-msg-meta { color: inherit; }
body[data-space] .pc-gif-popup { background: var(--space-bg); border-color: var(--space-c2); }
body[data-space] .pc-gif-search-bar { border-bottom-color: var(--space-c2); }
body[data-space] .pc-gif-search-bar input { background: rgba(0,0,0,.04); color: var(--space-c2); border-color: var(--space-c2); }
body[data-space] .pc-gif-search-bar input::placeholder { color: var(--space-c2); opacity: .5; }

/* ─── Peer chat — modal appel vidéo (.pc-rtc-*) ─── */
body[data-space] .pc-rtc-inner { background: var(--space-bg); border-color: var(--space-c2); }
body[data-space] .pc-rtc-status { color: var(--space-c2); }
body[data-space] .pc-rtc-partner { color: var(--space-c2); opacity: .7; }
body[data-space] .pc-rtc-btn { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); }
/* .pc-rtc-hangup garde le rouge urgent canonique */

/* ════════════════════════════════════════════════════════════════════════
   DROPDOWNS topbar — menus profil/langue + notifications (copié de space.css)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .bsf-menu { background: var(--space-c1) !important; border-color: var(--space-c2) !important; }
body[data-space] .bsf-menu-item { color: var(--space-c2) !important; background: transparent; }
body[data-space] .bsf-menu-item:hover { background: rgba(0,0,0,.06) !important; color: var(--space-c2) !important; }
body[data-space] .bsf-menu-item.is-active { background: var(--space-c2) !important; color: var(--space-c1-solid, var(--space-c1)) !important; }
body[data-space] .bsf-notif-header { color: var(--space-c2); border-bottom-color: var(--space-c2); }
body[data-space] .bsf-notif-clear-btn { color: var(--space-c2); opacity: .85; }
body[data-space] .bsf-notif-clear-btn:hover { opacity: 1; }
body[data-space] .bsf-notif-item { color: var(--space-c2) !important; }
body[data-space] .bsf-notif-item:hover { background: rgba(0,0,0,.06); }
body[data-space] .bsf-notif-item.unread { background: rgba(0,0,0,.04); }
body[data-space] .bsf-notif-empty { color: var(--space-c2); opacity: .65; }
body[data-space] .bsf-notif-badge { box-shadow: 0 0 0 2px var(--space-c1-solid, var(--space-c1)); } /* badge garde le rouge urgent canonique */

/* ════════════════════════════════════════════════════════════════════════
   RÉACTIONS + EMPTY STATES + SPINNERS (défensif — peuvent apparaître via widgets)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .bsf-react-btn { color: var(--space-c3); border-color: var(--space-c3); opacity: .8; background: transparent; }
body[data-space] .bsf-react-btn:hover { background: rgba(0,0,0,.06); color: var(--space-c3); opacity: 1; }
body[data-space] .bsf-react-btn.active { background: var(--space-c2); border-color: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); opacity: 1; font-weight: 700; }
body[data-space] .bsf-empty-state { color: var(--space-c2); opacity: .8; }
body[data-space] .bsf-empty-state h3 { color: var(--space-c2); opacity: 1; }
body[data-space] .bsf-spinner { color: var(--space-c2); opacity: .7; }
body[data-space] .bsf-spinner::before { border-color: rgba(0,0,0,.1); border-top-color: var(--space-c2); }

/* ════════════════════════════════════════════════════════════════════════
   SEARCH (search.php — externe à transfermarket, défensif si jamais inline)
   ════════════════════════════════════════════════════════════════════════ */
body[data-space] .bsf-search-bar input { background: var(--space-c1); color: var(--space-c2); border-color: var(--space-c2); }
body[data-space] .bsf-search-bar input:focus { border-color: var(--space-c2); box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
body[data-space] .bsf-search-bar input::placeholder { color: var(--space-c2); opacity: .55; }
body[data-space] .bsf-search-tabs { border-bottom-color: var(--space-c2); }
body[data-space] .bsf-tab { color: var(--space-c2); border-color: var(--space-c2); background: transparent; }
body[data-space] .bsf-tab:hover { background: rgba(0,0,0,.06); color: var(--space-c2); border-color: var(--space-c2); }
body[data-space] .bsf-tab.active { background: var(--space-c2); color: var(--space-c1-solid, var(--space-c1)); border-color: var(--space-c2); }