/*
 * Kongre.Org W3CRM overrides
 * Snappier, GPU-accelerated sidebar toggle. W3CRM ships with
 * `transition: all 0.2s ease` on .deznav / .content-body / .nav-header /
 * .header, which causes every property (including bg/border/padding)
 * to animate on toggle — feels sluggish and "weird" because multiple
 * transitions overlap. Here we target only the properties that actually
 * change during the hamburger toggle, cut the duration to 150ms, and
 * nudge the sidebar onto its own compositor layer so the browser can
 * animate the width/margin without triggering full-document reflow.
 */

#main-wrapper,
.deznav,
.nav-header,
.header,
.content-body {
  transition-property: width, margin-left, padding-left, transform;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

/* Promote the sidebar to its own layer so width transitions don't
   trigger repaints on every pixel */
.deznav,
.nav-header {
  will-change: width;
  backface-visibility: hidden;
}

.content-body {
  will-change: margin-left;
  backface-visibility: hidden;
}

/* Hamburger icon itself — tighten from W3CRM's 0.3s default */
.hamburger {
  transition: all 0.15s ease-out 0s !important;
}
.hamburger .line {
  transition: all 0.15s ease-out 0s;
}

/* Menu item hover/click in collapsed state — W3CRM uses 0.4s which is
   noticeably laggy. Bring it in line with the rest. */
[data-sidebar-style=full][data-layout=vertical] .menu-toggle .deznav .metismenu > li {
  transition: all 0.15s ease-out !important;
}

/* ── Toastr / Bootstrap 5 uyumluluk düzeltmesi ──────────────────────────────
   Bootstrap 5'in .toast { background-color: var(--bs-toast-bg) } kuralı (style.css),
   toastr'ın renk sınıflarını eziyor. Yüksek özgüllük + !important ile düzeltiyoruz. */
#toast-container > div {
  background-color: #030303 !important;
  color: #fff !important;
  --bs-toast-bg: transparent !important;
  --bs-toast-color: #fff !important;
}
#toast-container > .toast-success  { background-color: #51a351 !important; }
#toast-container > .toast-error    { background-color: #bd362f !important; }
#toast-container > .toast-warning  { background-color: #f89406 !important; }
#toast-container > .toast-info     { background-color: #2f96b4 !important; }
#toast-container > div .toast-title,
#toast-container > div .toast-message {
  color: #fff !important;
}

/* ── Onboarding wizard — responsive fullscreen layout ───────────────────────
   Narrow (default): stacked — visual on top with capped height, content
   scrollable below. Wide (>=768px): side-by-side — fixed-width content
   column on the left, visual fills the rest. */
.ob-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ob-visual {
  background: #f8f9fa;
  flex: 0 0 38vh;
  min-height: 0;
  overflow: hidden;
}
.ob-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.ob-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.5rem;
}
.ob-title { font-size: 1.25rem; }
.ob-intro { font-size: 14px; }
.ob-bullets { font-size: 13.5px; }
.ob-footer-dots { display: none; }

@media (min-width: 576px) {
  .ob-footer-dots { display: flex; }
}
@media (min-width: 768px) {
  .ob-body { flex-direction: row; }
  .ob-visual { flex: 1 1 auto; order: 2; }
  .ob-content {
    flex: 0 0 42%;
    max-width: 560px;
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
  }
  .ob-title { font-size: 1.6rem; }
  .ob-intro { font-size: 16px; }
  .ob-bullets { font-size: 15px; }
}
@media (min-width: 1200px) {
  .ob-content { flex: 0 0 36%; padding: 3rem; }
}