/* Mantaq brand overlay — never patch Onyx source. */

:root {
  --mantaq-blue: #7faaff;
  --mantaq-orange: #ff9f2e;
  --mantaq-ink: #0b0b0c;
  --mantaq-muted: #6b6b70;
  --mantaq-bg: #f4f4f5;
  --mantaq-card: #ffffff;
  --mantaq-border: rgba(0, 0, 0, 0.1);
  --mantaq-brand: var(--mantaq-orange);
  --mantaq-logo-radius: 12px;
  --mantaq-logo-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/*
 * CSS-only brand (no JS DOM mutation — that caused reload loops).
 *
 * 1) Hide Onyx wordmark / lockup SVGs.
 * 2) Cover Onyx diamond marks with Mantaq icon via background
 *    (paths stay in the React tree; only painted over).
 * 3) Hide version disclaimer footer.
 */
svg[viewBox="0 0 152 64"],
svg[viewBox="0 0 2640 733"] {
  display: none !important;
}

/* Onyx diamond (unique path fragments from SvgOnyxLogo) → Mantaq mark */
svg[viewBox="0 0 64 64"]:has(path[d*="53.5264"]),
svg[viewBox="0 0 64 64"]:has(path[d*="10.4014"]),
svg[viewBox="0 0 16 16"]:has(path[d*="M8 4"]),
svg[viewBox="0 0 16 16"]:has(clipPath[id*="clip0_586_577"]) {
  background: url("/mantaq-branding/icon.svg?v=35") center / 88% 88% no-repeat !important;
  overflow: visible !important;
}

svg[viewBox="0 0 64 64"]:has(path[d*="53.5264"]) > *,
svg[viewBox="0 0 64 64"]:has(path[d*="10.4014"]) > *,
svg[viewBox="0 0 16 16"]:has(path[d*="M8 4"]) > *,
svg[viewBox="0 0 16 16"]:has(clipPath[id*="clip0_586_577"]) > * {
  opacity: 0 !important;
}

/*
 * Sidebar wordmark — "MANTAQ" beside the mark.
 *
 * The header wraps the logo differently per state, and that wrapper is the
 * only reliable state signal in the DOM:
 *   expanded  (240px) -> <div class="flex flex-row items-center">
 *   collapsed (52px)  -> <button aria-label="Open Sidebar">
 *
 * So target the div: the wordmark shows only when expanded, and the collapsed
 * rail keeps the mark alone. The previous rule targeted a/button and therefore
 * did exactly the reverse — text spilling 86px out of a 52px rail, and nothing
 * at all when expanded.
 */
.opal-sidebar-header__topbar-inner > div:has(> svg[viewBox="0 0 64 64"])::after {
  content: "MANTAQ";
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-left: 0.4rem;
  white-space: nowrap;
  color: inherit;
}

/* Collapsed rail (and any link/button wrapper): mark only, never a wordmark. */
.opal-sidebar-header a:has(svg[viewBox="0 0 64 64"])::after,
.opal-sidebar-header button:has(svg[viewBox="0 0 64 64"])::after {
  content: none !important;
}

/* Chat footer: "Onyx vX - Open Source AI Platform" */
div.relative.w-full.flex.flex-row.justify-center:has(a[href*="onyx.app"]),
div.relative.w-full.flex.flex-row.justify-center:has(a[href*="onyx.app"]) {
  display: none !important;
}

a[href="https://www.onyx.app/"],
a[href="https://www.onyx.app"] {
  display: none !important;
}

/*
 * FOSS shows Business/Enterprise admin nav as grayed-out upsells.
 */
.opal-sidebar-body__content .opal-sidebar-tab:has([data-disabled]),
.opal-sidebar-body__content .opal-sidebar-tab:has([aria-disabled="true"]),
.opal-sidebar-body__content [data-opal-disabled] {
  display: none !important;
}

.opal-sidebar-body__content a[href="/admin/billing"],
.opal-sidebar-body__content a[href^="/admin/billing?"],
.opal-sidebar-body__content .opal-sidebar-tab:has(a[href="/admin/billing"]),
.opal-sidebar-body__content .opal-sidebar-tab:has(a[href^="/admin/billing?"]) {
  display: none !important;
}

[data-mantaq-wordmark="1"] {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: inherit;
}

/* Shared logo tile (sidebar + app chrome) */
[data-mantaq-logo-tile="1"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--mantaq-logo-radius) !important;
  box-shadow: var(--mantaq-logo-shadow) !important;
  overflow: hidden !important;
  line-height: 0 !important;
  padding: 6px !important;
}

html.dark [data-mantaq-logo-tile="1"],
.dark [data-mantaq-logo-tile="1"] {
  background: #161618 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

[data-mantaq-logo-tile="1"] svg,
[data-mantaq-logo-tile="1"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ============================================================
   Auth kit (html:has(.max-w-md.bg-background-tint-00)) — login + signup match brand mockup
   Scoped carefully so inputs / links stay intact
   ============================================================ */
html:has(.max-w-md.bg-background-tint-00),
html:has(.max-w-md.bg-background-tint-00) body {
  background: var(--mantaq-bg) !important;
}

html:has(.max-w-md.bg-background-tint-00) div.p-4.flex.flex-col.items-center.justify-center.min-h-screen {
  background: var(--mantaq-bg) !important;
}

html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md.flex.items-start.flex-col,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md.bg-background-tint-00 {
  align-items: center !important;
  background: var(--mantaq-card) !important;
  border: 1px solid var(--mantaq-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.07) !important;
  padding: 2rem 1.75rem !important;
}

/* Centered larger logo tile on auth pages */
html:has(.max-w-md.bg-background-tint-00) div.max-w-md > [data-mantaq-logo-tile="1"] {
  display: flex !important;
  margin: 0 auto 0.75rem !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 18px !important;
  padding: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

html:has(.max-w-md.bg-background-tint-00) div.max-w-md > .w-full.mt-3 {
  width: 100% !important;
}

/*
 * Text colour on the auth card.
 *
 * The rules above force a light page and a white card. Onyx, however, may be
 * in its dark theme, where it colours text white — and white on a white card
 * is invisible. Because we took ownership of the background, we must also own
 * the foreground; otherwise headings and field labels silently disappear.
 *
 * Inputs and buttons are deliberately excluded: Onyx renders those with dark
 * fills, and their own light text is correct against them.
 */
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md h1,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md h2,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md h3,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md p,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md span,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md label,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md li,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md strong {
  color: var(--mantaq-ink) !important;
}

/* Links keep the brand accent rather than flat ink. */
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md a {
  color: var(--mantaq-blue) !important;
}

/* Helper copy (password rules, hints) stays secondary. */
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md .text-xs,
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md .text-xs * {
  color: var(--mantaq-muted) !important;
}

/* The "Already have an account? / New to Mantaq?" line sits outside the card,
   directly on the page background, and needs the same treatment. */
html:has(.max-w-md.bg-background-tint-00) div.min-h-screen > .text-sm,
html:has(.max-w-md.bg-background-tint-00) div.min-h-screen > .text-sm *,
html:has(.max-w-md.bg-background-tint-00) p.text-center.mt-4,
html:has(.max-w-md.bg-background-tint-00) p.text-center.mt-4 * {
  color: var(--mantaq-muted) !important;
}
html:has(.max-w-md.bg-background-tint-00) div.min-h-screen > .text-sm a,
html:has(.max-w-md.bg-background-tint-00) p.text-center.mt-4 a {
  color: var(--mantaq-blue) !important;
  text-decoration: underline;
}

/*
 * Heading alignment. Onyx left-aligns its auth heading ("Create account" /
 * "Log In"), while our subtitle rule centres the line beneath it. The mix
 * reads as a layout bug, so centre the heading to match.
 */
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md p.font-heading-h2 {
  text-align: center !important;
  width: 100% !important;
}

/*
 * Password-requirements hint. This is Onyx's own signup helper text; it is
 * worth keeping, but it renders as indented spans with no list marker, so it
 * looks like a list that failed to load. Mute it to secondary weight and give
 * each requirement a real bullet.
 */
html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md .font-secondary-body {
  color: var(--mantaq-muted) !important;
}

html:has(.max-w-md.bg-background-tint-00) div.w-full.max-w-md div.opal-content-sm > span.font-secondary-body::before {
  content: "\2022";
  margin-right: 0.45rem;
  color: var(--mantaq-muted);
}

/*
 * Heading and subheading, targeted by Onyx's own classes.
 *
 * These used to be styled via data-mantaq-auth-* attributes that inject.js
 * added after React rendered — so the text painted left-aligned, then jumped
 * to centre once the script ran. Matching Onyx's native classes means the
 * stylesheet (which is render-blocking in <head>) applies the moment React
 * creates the element: correct in the first painted frame, no shift.
 */
html:has(.max-w-md.bg-background-tint-00) .max-w-md p.font-heading-h2 {
  text-align: center !important;
  width: 100% !important;
  font-weight: 700 !important;
  color: var(--mantaq-ink) !important;
  margin: 0.25rem 0 0 !important;
}

html:has(.max-w-md.bg-background-tint-00) .max-w-md p.font-main-ui-muted.text-text-03,
html:has(.max-w-md.bg-background-tint-00) .max-w-md p.font-main-ui-body.text-text-03 {
  text-align: center !important;
  width: 100% !important;
  color: var(--mantaq-muted) !important;
  margin: 0.35rem 0 1rem !important;
}

html:has(.max-w-md.bg-background-tint-00) [data-mantaq-auth-title="1"] {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  color: var(--mantaq-ink) !important;
  margin: 0.25rem 0 0 !important;
}

html:has(.max-w-md.bg-background-tint-00) [data-mantaq-auth-sub="1"] {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  font-size: 0.9375rem !important;
  color: var(--mantaq-muted) !important;
  margin: 0.35rem 0 1rem !important;
}

html:has(.max-w-md.bg-background-tint-00) form {
  width: 100% !important;
  text-align: left !important;
}

html:has(.max-w-md.bg-background-tint-00) form input {
  border-radius: 10px !important;
}

html:has(.max-w-md.bg-background-tint-00) form input:focus,
html:has(.max-w-md.bg-background-tint-00) form input:focus-visible {
  border-color: var(--mantaq-blue) !important;
  box-shadow: 0 0 0 2px rgba(127, 170, 255, 0.35) !important;
  outline: none !important;
}

html:has(.max-w-md.bg-background-tint-00) form button[type="submit"] {
  background: var(--mantaq-orange) !important;
  color: var(--mantaq-ink) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  width: 100% !important;
  justify-content: center !important;
}

html:has(.max-w-md.bg-background-tint-00) form button[type="submit"] svg {
  display: none !important;
}

html:has(.max-w-md.bg-background-tint-00) [data-mantaq-auth-help="1"] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: var(--mantaq-muted) !important;
  font-size: 0.8125rem !important;
  margin-top: 1.25rem !important;
}

/* Footer links below card (Create Account / Sign In) */
html:has(.max-w-md.bg-background-tint-00) div.min-h-screen > .text-sm.mt-6,
html:has(.max-w-md.bg-background-tint-00) p.text-center.mt-4 {
  display: block !important;
  text-align: center !important;
}