/* =========================================================
   TOPBAR — SOGENTIS
   Compatible avec core/partials/_topbar.html + theme.js
   ========================================================= */

.topbar{
  font-size: .875rem;
  line-height: 1.2;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.topbar a{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: inherit;
}

.topbar a i{ font-size: 1rem; }

/* -------- Brand -------- */
.topbar .topbar-brand{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.topbar .topbar-brand-mark{
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-image: var(--brand-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

.topbar .fw-bold{ letter-spacing: .2px; }

.topbar .opacity-50{ opacity: .45 !important; }

/* -------- Social icons -------- */
.topbar .social-icon svg{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  transition: transform .2s ease, color .2s ease, fill .2s ease;
  color: currentColor;
  fill: currentColor;
}
.topbar .social-icon:hover svg{
  transform: scale(1.1);
  color: var(--bs-primary, #0d6efd);
  fill: var(--bs-primary, #0d6efd);
}

/* -------- Buttons -------- */
.topbar .btn-sm{
  padding: .25rem .5rem;
  font-size: .75rem;
}

.topbar button[data-bs-toggle="offcanvas"]{
  font-size: 1.25rem;
  padding: .2rem .5rem;
  line-height: 1;
}

/* Hover */
.topbar a:hover,
.topbar button:hover{
  opacity: .85;
  transition: opacity .2s ease;
}

/* =========================================================
   OFFCANVAS (Mobile)
   ========================================================= */
.offcanvas-header.bg-dark,
.offcanvas-body.bg-dark{ background: #111; }

.offcanvas-header,
.offcanvas-body{ border-left: 1px solid rgba(255,255,255,0.08); }

.offcanvas-body a,
.offcanvas-body button{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

.offcanvas-body svg{
  width: 18px;
  height: 18px;
}

.offcanvas-body .btn-sm{
  width: 100%;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn.active{
  background-color: var(--bs-primary, #0d6efd) !important;
  color: #fff !important;
  border-color: var(--bs-primary, #0d6efd) !important;
}

/* Responsive */
@media (max-width: 576px){
  .topbar .topbar-brand-mark{
    width: 36px;
    height: 36px;
  }
}

/* Dark mode */
body.dark-mode .topbar{
  background: #0d0f14 !important;
  color: #f1f3f5;
  border-bottom-color: rgba(255,255,255,0.05);
}
body.dark-mode .topbar .btn.btn-outline-light{
  border-color: #2a3242;
}
body.dark-mode .offcanvas.bg-dark,
body.dark-mode .offcanvas-header.bg-dark,
body.dark-mode .offcanvas-body.bg-dark{
  background: #0b0e12 !important;
  color: #e6e9ef;
}
body.dark-mode .offcanvas-header,
body.dark-mode .offcanvas-body{
  border-left-color: rgba(255,255,255,0.06);
}