/* OverMox additive overrides for asyncapi-react.
   Consumes tokens from /overmox-theme.css (loads first).
   Scoped under .aui-root to avoid leaking outside the bundle container.
   Override colors and fonts only; do NOT touch Tailwind layout utilities
   (mb-*, mt-*, px-*, py-*, flex, grid, text-{size}) so the bundle's
   sizing and flex layout remain intact.
   The highlight.js night-owl theme bundled in default.min.css is left
   alone; it already renders code blocks well in dark mode. */

/* base: sticky header in document flow already reserves its 56px; no extra body padding needed */
body {
  background-color: var(--color-backdrop);
}

/* root scope: backdrop, base text, sans font */
.aui-root {
  background-color: var(--color-backdrop);
  color: #d1d5db;
  font-family: var(--font-sans);
}

/* headings: white */
.aui-root h1,
.aui-root h2,
.aui-root h3,
.aui-root h4,
.aui-root h5,
.aui-root h6 {
  color: #ffffff;
}

/* links: cyan */
.aui-root a {
  color: var(--color-moxblue);
}
.aui-root a:hover {
  color: var(--color-moxblue-hover);
}

/* Tailwind color utility overrides (do NOT touch sizing utilities) */
.aui-root .text-gray-800 { color: #ffffff; }
.aui-root .text-gray-700 { color: #d1d5db; }
.aui-root .text-gray-600 { color: #9ca3af; }
.aui-root .text-gray-500 { color: #9ca3af; }
.aui-root .text-gray-400 { color: #6b7280; }

.aui-root .bg-white { background-color: var(--color-card); }
.aui-root .bg-gray-100 { background-color: var(--color-card); }
.aui-root .bg-gray-200 { background-color: var(--color-surface); }
.aui-root .bg-gray-300 { background-color: var(--color-surface); }
.aui-root .bg-gray-400 { background-color: var(--color-backdrop-light); }
.aui-root .bg-gray-800 { background-color: var(--color-card); }
.aui-root .bg-gray-900 { background-color: var(--color-backdrop); }

.aui-root .border-gray-100 { border-color: rgba(255, 255, 255, 0.06); }
.aui-root .border-gray-200 { border-color: rgba(255, 255, 255, 0.06); }
.aui-root .border-gray-300 { border-color: rgba(255, 255, 255, 0.08); }
.aui-root .border-gray-400 { border-color: rgba(255, 255, 255, 0.10); }
.aui-root .border-gray-500 { border-color: rgba(255, 255, 255, 0.12); }

/* semantic panel and sidebar classes */
.aui-root .panel-item {
  background-color: var(--color-card);
  border-color: rgba(255, 255, 255, 0.06);
  color: #d1d5db;
}
.aui-root .panel-item--right {
  background-color: var(--color-backdrop-light);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.aui-root .panel-item--center {
  background-color: var(--color-card);
}

.aui-root .sidebar--wrapper,
.aui-root .sidebar--content {
  background-color: var(--color-card);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: #d1d5db;
}
.aui-root .sidebar--content a {
  color: #d1d5db;
}
.aui-root .sidebar--content a:hover {
  color: #ffffff;
}
.aui-root .sidebar--content a.active,
.aui-root .sidebar--content .active a {
  color: #ffffff;
  border-left: 2px solid var(--color-brand);
}

/* code surfaces: mono font; let hljs night-owl handle inner coloring */
.aui-root code,
.aui-root pre,
.aui-root .hljs {
  font-family: var(--font-mono);
}
.aui-root code:not(.hljs) {
  background-color: var(--color-card);
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* table borders for schema/property displays */
.aui-root table {
  border-color: rgba(255, 255, 255, 0.08);
}
.aui-root th,
.aui-root td {
  border-color: rgba(255, 255, 255, 0.08);
}
.aui-root th {
  color: #ffffff;
}

/* horizontal rules */
.aui-root hr {
  border-color: rgba(255, 255, 255, 0.08);
}

/* form inputs (if asyncapi-react surfaces any) */
.aui-root input,
.aui-root textarea,
.aui-root select {
  background-color: var(--color-card);
  color: #d1d5db;
  border-color: rgba(255, 255, 255, 0.08);
}
.aui-root input:focus,
.aui-root textarea:focus,
.aui-root select:focus {
  border-color: var(--color-moxblue);
  outline: none;
}

/* buttons (asyncapi-react copy/expand) */
.aui-root button {
  color: #d1d5db;
}
.aui-root button:hover {
  color: #ffffff;
}

/* ---- Polish pass: soften borders further + catch any remaining whites ---- */

/* Bump all bg/border overrides with !important defensively (asyncapi-react sometimes uses inline styles or higher-specificity selectors). */
.aui-root .bg-white,
.aui-root [class*="bg-white"] { background-color: var(--color-card) !important; }
.aui-root .bg-gray-50,
.aui-root .bg-gray-100,
.aui-root .bg-gray-200 { background-color: var(--color-card) !important; }
.aui-root .bg-gray-300,
.aui-root .bg-gray-400 { background-color: var(--color-surface) !important; }
.aui-root .bg-gray-600,
.aui-root .bg-gray-700,
.aui-root .bg-gray-800,
.aui-root .bg-gray-900 { background-color: var(--color-card) !important; }

/* Override Tailwind's --tw-border-opacity by setting border-color directly with !important. Even softer than before. */
.aui-root .border,
.aui-root [class*="border-gray-"],
.aui-root .border-gray-100,
.aui-root .border-gray-200,
.aui-root .border-gray-300,
.aui-root .border-gray-400,
.aui-root .border-gray-500,
.aui-root .border-gray-600 { border-color: rgba(255,255,255,0.04) !important; }

/* Tailwind side-specific borders: also soften. */
.aui-root .border-t,
.aui-root .border-r,
.aui-root .border-b,
.aui-root .border-l { border-color: rgba(255,255,255,0.04) !important; }

/* Semantic class borders bumped to softer alpha. */
.aui-root .panel-item,
.aui-root .panel-item--right,
.aui-root .panel-item--center,
.aui-root .sidebar--wrapper,
.aui-root .sidebar--content { border-color: rgba(255,255,255,0.04) !important; }

/* Tables and hr softened. */
.aui-root table,
.aui-root th,
.aui-root td,
.aui-root hr { border-color: rgba(255,255,255,0.04) !important; }

/* Catch any white bg leak from inline style or hardcoded value via attribute selector. */
.aui-root [style*="background:#fff"],
.aui-root [style*="background-color:#fff"],
.aui-root [style*="background: #fff"],
.aui-root [style*="background-color: #fff"] { background-color: var(--color-card) !important; }

/* Phase N T7: Fork C verified polish fixes (replaces inferred snippets from Phase M followon doc)
 * Issue 2 - AsyncAPI Rules tab invisibility:
 *   Verified culprit: .text-gray-900 (near-black) inside .aui-root, not text-gray-300/400 as inferred.
 *   Render: dark-text on bg-gray-400 (our --color-surface) = invisible.
 */
.aui-root .text-gray-900,
.aui-root .text-gray-800,
.aui-root .text-gray-700 { color: #f3f4f6 !important; }
.aui-root .hover\:text-gray-700:hover,
.aui-root .hover\:text-gray-800:hover,
.aui-root .hover\:text-gray-900:hover { color: #ffffff !important; }

/* Issue 3 - AsyncAPI white rows under expanded sections (e.g. Rules tab content):
 * Verified culprit: Tailwind .bg-blue-100 (light blue near-white) used as panel surface.
 * Inferred sweep guessed bg-white/inline-style; the real source was a light color utility
 * not previously in our overrides. Defensive sweep of light color utilities.
 */
.aui-root .bg-blue-100,
.aui-root .bg-blue-50,
.aui-root .bg-green-100,
.aui-root .bg-green-50,
.aui-root .bg-yellow-100,
.aui-root .bg-yellow-50,
.aui-root .bg-red-100,
.aui-root .bg-red-50,
.aui-root .bg-orange-100,
.aui-root .bg-orange-50 { background-color: var(--color-card) !important; }