/* ============================================================
   Dark theme for @asyncapi/html-template
   Colors match Scalar's dark (fastify) theme exactly.
   ============================================================ */

:root {
  --bg-1:      #1b1b1d;
  --bg-2:      #242526;
  --bg-3:      #3b3b3b;
  --bg-4:      rgba(255, 255, 255, 0.06);
  --fg-1:      rgba(255, 255, 255, 0.9);
  --fg-2:      rgba(255, 255, 255, 0.62);
  --fg-3:      rgba(255, 255, 255, 0.44);
  --fg-ghost:  rgba(255, 255, 255, 0.26);
  --border:    rgba(255, 255, 255, 0.1);
  --accent:    #27c2a0;
  --green:     #26b226;
  --red:       #fb565b;
  --blue:      #6ecfef;
  --yellow:    #ffc426;
  --orange:    #ff8d4d;
  --purple:    #b191f9;
  --radius:    4px;
  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* -- Base --------------------------------------------------- */
html, body {
  background-color: var(--bg-1) !important;
  color: var(--fg-1) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
}

/* -- Backgrounds -------------------------------------------- */
.bg-white                         { background-color: var(--bg-2) !important; }
.bg-gray-50, .bg-gray-100         { background-color: var(--bg-1) !important; }
.bg-gray-200                      { background-color: var(--bg-2) !important; }
.bg-gray-700, [style*="#4a5568"]  { background-color: var(--bg-3) !important; }
.bg-gray-800                      { background-color: var(--bg-3) !important; }
.bg-gray-900, [style*="#1a202c"]  { background-color: var(--bg-2) !important; }

.burger-menu { background-color: var(--accent) !important; }

/* -- Text --------------------------------------------------- */
.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700  { color: var(--fg-1) !important; }
.text-gray-600,
.text-gray-500  { color: var(--fg-2) !important; }
.text-gray-400  { color: var(--fg-3) !important; }

.aui-root .prose        { color: var(--fg-2) !important; }
.aui-root .prose strong { color: var(--fg-1) !important; }

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1) !important;
  font-family: var(--font) !important;
}

/* -- Links -------------------------------------------------- */
a       { color: var(--accent) !important; }
a:hover { color: #3dd9b5 !important; }

/* -- Borders ------------------------------------------------ */
.border,
.border-gray-200,
.border-gray-300,
.border-gray-400 { border-color: var(--border) !important; }

/* -- Sidebar / aside ---------------------------------------- */
aside, nav,
[class*="sidebar"],
[class*="Sidebar"] {
  background-color: var(--bg-2) !important;
  border-color: var(--border) !important;
}

/* -- Cards / panels ----------------------------------------- */
.shadow, .shadow-md,
[class*="rounded"][class*="border"],
[class*="panel"], [class*="Panel"] {
  background-color: var(--bg-2) !important;
  border-color: var(--border) !important;
}

/* -- Code --------------------------------------------------- */
code, pre,
[class*="codeBlock"],
[class*="code-"],
.hljs {
  background-color: var(--bg-1) !important;
  color: var(--fg-1) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
}

/* -- Buttons ------------------------------------------------ */
button:not(.burger-menu) {
  font-family: var(--font) !important;
  font-size: 13px !important;
}

/* Accent */
.bg-teal-500, [class*="bg-teal"] { background-color: var(--accent) !important; }
.text-teal-500, [class*="text-teal"] { color: var(--accent) !important; }
.hover\:text-teal-500:hover { color: var(--accent) !important; }

/* -- Operation method badges -------------------------------- */
.bg-green-600  { background-color: var(--green) !important; }
.bg-blue-600,
.bg-blue-500   { background-color: var(--blue) !important; color: #000 !important; }
.bg-orange-600 { background-color: var(--orange) !important; }

/* Required badge */
.text-red-600  { color: var(--red) !important; }

/* Type badges */
[class*="bg-blue"]:not(.bg-blue-600):not(.bg-blue-500) { filter: brightness(0.75); }
[class*="bg-green"]:not(.bg-green-600) { filter: brightness(0.75); }
[class*="bg-yellow"] { filter: brightness(0.75); }
[class*="bg-red"]    { filter: brightness(0.75); }
[class*="bg-purple"] { filter: brightness(0.75); }
[class*="bg-pink"]   { filter: brightness(0.75); }

/* -- Radius ------------------------------------------------- */
.rounded-full, .rounded, .rounded-lg { border-radius: var(--radius) !important; }

/* -- Inputs ------------------------------------------------- */
input, select, textarea {
  background-color: var(--bg-3) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font) !important;
}

/* -- Tables ------------------------------------------------- */
table              { border-color: var(--border) !important; }
th                 { background-color: var(--bg-2) !important; color: var(--fg-1) !important; }
td                 { border-color: var(--border) !important; }
tr:nth-child(even) { background-color: rgba(255,255,255,0.03) !important; }
tr:hover           { background-color: var(--bg-4) !important; }

/* -- Hover -------------------------------------------------- */
.hover\:text-gray-900:hover,
a:hover[class*="text-gray"] { color: var(--fg-1) !important; }
.hover\:bg-blue-300:hover   { background-color: rgba(110,207,239,0.15) !important; }

/* -- Scrollbar ---------------------------------------------- */
::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: var(--bg-1); }
::-webkit-scrollbar-thumb       { background: rgba(255,255,255,0.24); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.48); }