/* BoostSlash offline demo — portal switcher bar (logo palette) */

:root {
  --bs-black: #000000;
  --bs-blue: #0868b0;
  --bs-orange: #f85038;
  --bs-orange-soft: #f86840;
  /* Align compiled CRM theme with BoostSlash logo */
  /* Force override even if the compiled bundle defines its own theme palette */
  --primary: #0868b0 !important;
  --primary-hover: #065a99 !important;
  --primary-glow: rgb(8 104 176 / .45) !important;

  /* Tailwind-like accent tokens used by the compiled bundle */
  --accent-sky: #4db3ef !important;
  --accent-teal: #0868b0 !important;
  --accent-amber: #f86840 !important;
  --accent-rose: #f85038 !important;
}

#bs-demo-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: linear-gradient(90deg, #000000, #111111);
  color: #fafafa;
  font-size: 13px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}

#bs-demo-bar a {
  color: #d4d4d8;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#bs-demo-bar a:hover {
  color: #fff;
  background: rgba(8, 104, 176, 0.28);
  border-color: rgba(8, 104, 176, 0.45);
}

#bs-demo-bar a.active {
  color: #fff;
  background: rgba(8, 104, 176, 0.35);
  border-color: #0868b0;
}

#bs-demo-bar .demo-pill {
  background: rgba(248, 80, 56, 0.18);
  border: 1px solid rgba(248, 80, 56, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb4a8;
}

#bs-demo-bar .demo-produced {
  color: #a1a1aa;
  font-size: 12px;
  margin-left: 4px;
}

#bs-demo-bar .demo-produced strong {
  color: #4db3ef;
  font-weight: 700;
}

body.bs-demo-active {
  padding-bottom: 46px;
}

/* Sidebar / login / error-page logo — transparent PNG, no colored tile */
.brand-logo-mark,
span.brand-logo-mark,
.brand-logo-mark.bg-primary {
  width: 2.5rem !important;
  height: 1.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: url("/assets/boostslash-logo.png?v=7") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: visible;
  filter: none !important;
  --tw-bg-opacity: 0 !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
}

.brand-logo:hover .brand-logo-mark {
  transform: none !important;
  box-shadow: none !important;
}

/* Dark UI: use white-letter variant so black wordmarks stay visible */
html.dark .brand-logo-mark,
html.dark span.brand-logo-mark {
  background-color: transparent !important;
  background-image: url("/assets/boostslash-logo-dark.png?v=7") !important;
  filter: none !important;
}

/* Sales page + launcher + splash logos */
.brand-logo,
.brand-logo img,
.header-logo,
.boot-logo-img,
img.brand-logo,
img[src*="boostslash-logo"] {
  background: transparent !important;
  object-fit: contain;
}

.brand-logo,
.header-logo,
.boot-logo-img {
  mix-blend-mode: normal;
}

html.dark img[src*="boostslash-logo.png"] {
  /* dark wordmark handled via background marks / explicit dark asset */
}

#boot-splash .boot-logo-img {
  background: transparent !important;
  width: 72px !important;
  height: auto !important;
  max-height: 48px !important;
}

/* Remaining accent overrides — BoostSlash blue/orange palette */
.bg-emerald-500, .bg-emerald-400, .bg-sky-500, .bg-sky-400 { background-color: #0868b0 !important; }
.text-emerald-600, .text-emerald-500, .text-sky-600, .text-sky-500 { color: #0868b0 !important; }
.border-emerald-400, .border-emerald-500, .border-sky-400, .border-sky-500 { border-color: #0868b0 !important; }
.border-t-emerald-400, .border-t-sky-400 { border-top-color: #0868b0 !important; }
.ring-emerald-500, .ring-primary, .ring-sky-500 { --tw-ring-color: #0868b0 !important; }
.ui-toast-success { border-color: #0868b0 !important; background: #eef6fc !important; color: #065a99 !important; }
html.dark .ui-toast-success { background: #0c2740 !important; color: #4db3ef !important; }
.shadow-primary\/30, .shadow-primary\/20 { --tw-shadow-color: rgb(8 104 176 / 0.3) !important; }