/* ============================================================
   CloakAPI brand overlay for MagicAI demo at demo.cloakapi.io.
   Injected via shared-nginx sub_filter into every HTML response.
   Pure CSS — keeps MagicAI auto-update path safe.
   Color palette pinned to docs/strategy/moats.md and matches the
   rest of the cloakapi.io surfaces (#6c5ce7 accent, dark-mode-first).
   ============================================================ */

:root {
  /* ---- CloakAPI accent palette ---- */
  --ca-accent:        #6c5ce7;
  --ca-accent-soft:   #a78bfa;
  --ca-accent-strong: #4f3cc9;
  --ca-bg:            #0b0e14;
  --ca-bg-elev:       #11141d;
  --ca-fg:            #f5f5f5;
  --ca-fg-dim:        #a6adc8;
  --ca-line:          #1f2230;

  /* ---- Override MagicAI's tabler primary ---- */
  --tblr-primary:        var(--ca-accent) !important;
  --tblr-primary-rgb:    108, 92, 231     !important;
  --tblr-primary-fg:     #ffffff           !important;

  /* ---- Override MagicAI's HSL primary ---- */
  --primary:               251 76% 64%   !important;   /* matches #6c5ce7 */
  --primary-foreground:    0 0% 100%     !important;
  --navbar-background-hover:  var(--primary) !important;
  --navbar-foreground-hover:  var(--primary) !important;
  --navbar-background-active: var(--primary) !important;
  --navbar-foreground-active: var(--primary) !important;
}

/* ---- Top bar / sidebar / brand wordmark spacing ---- */
.app-header img[alt*="MagicAI" i],
.sidebar img[alt*="MagicAI" i],
.navbar-brand img[alt*="MagicAI" i] {
  /* Logo is already swapped at the DB level; just keep it tight. */
  max-height: 36px;
}

/* ---- Inject a small "demo · gateway demo" pill in the topbar ---- */
.navbar-brand::after,
.app-header .brand-name::after {
  content: " · DEMO";
  font-size: 0.62em;
  font-weight: 700;
  margin-left: 0.4em;
  padding: 2px 6px;
  background: var(--ca-accent);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

/* ---- Tighter buttons + matched corners ---- */
.btn-primary,
button.btn-primary {
  background: var(--ca-accent) !important;
  border-color:    var(--ca-accent) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--ca-accent-soft) !important; }
.btn-primary:active { background: var(--ca-accent-strong) !important; }

.btn,
.btn-outline-primary {
  border-radius: 8px !important;
}

/* ---- Anchor accents ---- */
a, a:link, a:visited {
  color: var(--ca-accent);
}
a:hover {
  color: var(--ca-accent-soft);
}

/* ---- Suppress upstream "Powered by MagicAI" footer if present ---- */
[class*="footer"] [href*="liquid-themes"],
[class*="powered-by"] {
  display: none !important;
}

/* ---- Compact CloakAPI badge in the bottom-right (signature) ---- */
body::after {
  content: "Privacy gateway · cloakapi.io";
  position: fixed;
  right: 12px;
  bottom: 10px;
  font: 500 10.5px/1 -apple-system, system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  color: var(--ca-fg-dim);
  background: rgba(11,14,20,0.75);
  border: 1px solid var(--ca-line);
  padding: 4px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  backdrop-filter: blur(4px);
}