/* --- Schema indentation: industry-standard (Stripe/Redoc style) --- */
.schema-table td {
 vertical-align: top;
}
/* Indent levels: small, consistent step */
.schema-indent-1 { padding-left: 20px !important; }
.schema-indent-2 { padding-left: 36px !important; }
.schema-indent-3 { padding-left: 52px !important; }
.schema-indent-4 { padding-left: 68px !important; }
.schema-indent-5 { padding-left: 84px !important; }
/* Subtle vertical gutter line — light gray, indicates nesting */
.schema-indent-1 { border-left: 2px solid #e5e7eb; }
.schema-indent-2 { border-left: 2px solid #e5e7eb; box-shadow: inset 16px 0 0 -14px #e5e7eb; }
.schema-indent-3 { border-left: 2px solid #e5e7eb; box-shadow: inset 32px 0 0 -30px #e5e7eb; }
.schema-indent-4 { border-left: 2px solid #e5e7eb; box-shadow: inset 48px 0 0 -46px #e5e7eb; }
.schema-indent-5 { border-left: 2px solid #e5e7eb; box-shadow: inset 64px 0 0 -62px #e5e7eb; }
.schema-required {
 color: var(--color-danger, #dc2626);
 font-weight: bold;
 margin-left: 4px;
}
/* --- Table border and spacing improvements --- */
table, th, td {
 border: 1px solid var(--color-border) !important;
}
th, td {
 padding: 12px 18px !important;
}
/* ================================================================
  Gen2X API Reference — Design System
  All visual styles are controlled from this single file.
================================================================ */
/* ── Tokens ────────────────────────────────────────────────────── */
:root {
 /* Surface */
 --color-bg:             #ffffff;
 --color-surface:        #f9fafb;
 --color-surface-hover:  #f3f4f6;
 --color-border:         #d1d5db;
 --color-border-light:   #e5e7eb;
 /* Text */
 --color-text:           #111827;
 --color-text-secondary: #4b5563;
 --color-text-muted:     #6b7280;
 /* Accent */
 --color-primary:        #2563eb;
 --color-primary-hover:  #1d4ed8;
 --color-primary-bg:     #eff6ff;
 /* Semantic */
 --color-danger:         #dc2626;
 --color-danger-bg:      #fef2f2;
 --color-required:       #ef4444;
 --color-warning:        #f59e0b;
 --color-warning-bg:     #fffbeb;
 /* Code */
 --color-code-bg:        #1e293b;
 --color-code-border:    #334155;
 --color-code-text:      #e2e8f0;
 --color-code-inline-bg: #f1f5f9;
 --color-code-inline-border: #e2e8f0;
 /* Input */
 --color-input-border:   #d1d5db;
 /* Typography */
 --font-sans:  Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
 --font-mono:  "Cascadia Code", Consolas, "Courier New", monospace;
 --text-xs:    0.75rem;
 --text-sm:    0.8125rem;
 --text-base:  0.9375rem;
 --text-md:    1.0625rem;
 --text-lg:    1.25rem;
 --text-xl:    1.625rem;
 --text-2xl:   2.25rem;
 /* Spacing */
 --sp-1:  4px;
 --sp-2:  8px;
 --sp-3:  12px;
 --sp-4:  16px;
 --sp-5:  24px;
 --sp-6:  32px;
 --sp-7:  40px;
 --sp-8:  48px;
 --sp-9:  56px;
 --sp-10: 64px;
 --sp-11: 80px;
 /* Radius */
 --radius-sm:  4px;
 --radius-md:  6px;
 --radius-lg:  8px;
 --radius-xl:  12px;
 /* Shadows */
 --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
 --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.08);
 /* Layout */
 --sidebar-width: 280px;
}
/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 font-size: 15px;
 -webkit-text-size-adjust: 100%;
}
body {
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: 1.7;
 color: var(--color-text-secondary);
 background: var(--color-bg);
}
/* ── Global element spacing ────────────────────────────────────── */
p, ul, ol, table, pre, blockquote {
 margin-top: 0;
 margin-bottom: var(--sp-4);
}
a {
 color: var(--color-primary);
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
/* ── Layout ────────────────────────────────────────────────────── */
#sidebar {
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 width: var(--sidebar-width);
 background: var(--color-surface);
 border-right: 1px solid var(--color-border);
 overflow-y: auto;
 z-index: 10;
 padding-top: 56px;
}
#main {
 margin-left: var(--sidebar-width);
 padding: var(--sp-6) var(--sp-7) var(--sp-8);
 min-height: 100vh;
}
#content {
 max-width: none;
 width: 100%;
}
/* ── Sidebar ───────────────────────────────────────────────────── */
#sidebar-logo-bar {
 position: fixed;
 top: 0;
 left: 0;
 width: var(--sidebar-width);
 z-index: 30;
 background: var(--color-surface);
 padding: var(--sp-2) 0 0 0;
 border-bottom: 1px solid var(--color-border);
}
#sidebar-logo {
 width: 100%;
 max-width: 100%;
 height: 48px;
 object-fit: contain;
 display: block;
 margin: 0 auto;
 padding: 0;
}
#sidebar-header {
 padding: var(--sp-2) var(--sp-4) var(--sp-3);
 border-bottom: 1px solid var(--color-border);
}
#sidebar-title {
 font-size: var(--text-md);
 font-weight: 700;
 color: var(--color-text);
 line-height: 1.35;
}
#sidebar-search-wrap {
 position: sticky;
 top: 0;
 padding: var(--sp-2) var(--sp-4);
 border-bottom: 1px solid var(--color-border);
 background: var(--color-surface);
 z-index: 1;
}
#sidebar-search {
 width: 100%;
 height: 36px;
 padding: 0 var(--sp-3);
 border: 1px solid var(--color-input-border);
 border-radius: var(--radius-lg);
 font-family: var(--font-sans);
 font-size: var(--text-sm);
 color: var(--color-text);
 background: var(--color-bg);
 transition: border-color 0.15s, box-shadow 0.15s;
}
#sidebar-search:focus {
 outline: none;
 border-color: var(--color-primary);
 box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.nav-divider {
 margin: var(--sp-2) var(--sp-4);
 border: none;
 border-top: 1px solid var(--color-border);
}
.nav-tag {
 display: block;
 padding: var(--sp-2) var(--sp-4);
 font-size: var(--text-base);
 font-weight: 600;
 color: var(--color-text);
 border-left: 3px solid transparent;
 text-decoration: none;
 transition: background 0.12s, border-color 0.12s;
}
.nav-tag:hover {
 background: var(--color-surface-hover);
 text-decoration: none;
}
.nav-tag.active {
 color: var(--color-primary);
 background: var(--color-primary-bg);
 border-left-color: var(--color-primary);
}
.nav-op {
 display: block;
 padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-7);
 font-size: var(--text-sm);
 color: var(--color-text-muted);
 text-decoration: none;
 transition: background 0.12s, color 0.12s;
}
.nav-op:hover {
 background: var(--color-surface-hover);
 color: var(--color-text);
 text-decoration: none;
}
/* ── Headings ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
 color: var(--color-text);
 font-weight: 700;
 line-height: 1.3;
}
h1.page-title {
 font-size: var(--text-2xl);
 font-weight: 800;
 margin-bottom: var(--sp-4);
 padding-bottom: var(--sp-3);
 border-bottom: 3px solid var(--color-text);
 letter-spacing: -0.02em;
}
h2.section-heading {
 font-size: var(--text-xl);
 font-weight: 700;
 margin-top: var(--sp-7);
 margin-bottom: var(--sp-4);
 padding-bottom: var(--sp-2);
 border-bottom: 2px solid var(--color-border);
}
h3.tag-heading {
 font-size: var(--text-lg);
 font-weight: 700;
 margin-top: var(--sp-6);
 margin-bottom: var(--sp-3);
 padding-bottom: var(--sp-2);
 border-bottom: 2px solid var(--color-text);
 color: var(--color-text);
}
h4.op-title {
 font-size: var(--text-md);
 font-weight: 700;
 margin-top: var(--sp-5);
 margin-bottom: var(--sp-3);
 padding-bottom: var(--sp-1);
 border-bottom: 1px solid var(--color-border-light);
 color: var(--color-text);
}
h2.md-h2,
.info-description h2 {
 font-size: var(--text-xl);
 font-weight: 700;
 margin-top: var(--sp-6);
 margin-bottom: var(--sp-3);
 padding-bottom: var(--sp-2);
 border-bottom: 2px solid var(--color-border);
}
h3.md-h3 {
 font-size: var(--text-md);
 font-weight: 600;
 margin-top: var(--sp-5);
 margin-bottom: var(--sp-2);
 color: var(--color-text-secondary);
}
/* ── Content typography ────────────────────────────────────────── */
.md-content p,
.md-content li,
.tag-description,
.op-description {
 font-size: var(--text-base);
 color: var(--color-text-secondary);
 line-height: 1.7;
}
.md-content ul,
.md-content ol {
 padding-left: var(--sp-5);
}
.md-content li {
 margin-bottom: var(--sp-2);
}
.md-content a {
 color: var(--color-primary);
 text-decoration: none;
}
.md-content a:hover {
 text-decoration: underline;
 color: var(--color-primary-hover);
}
ol.md-ol {
 padding-left: var(--sp-5);
 margin: var(--sp-3) 0;
}
/* ── Code ──────────────────────────────────────────────────────── */
pre {
 position: relative;
 margin: var(--sp-3) 0;
 padding: var(--sp-4);
 border-radius: var(--radius-lg);
 background: var(--color-code-bg);
 border: 1px solid var(--color-code-border);
 overflow-x: auto;
}
code {
 font-family: var(--font-mono);
 font-size: var(--text-sm);
}
:not(pre) > code {
 background: var(--color-code-inline-bg);
 border: 1px solid var(--color-code-inline-border);
 padding: 2px var(--sp-2);
 border-radius: var(--radius-sm);
 color: var(--color-text);
}
/* ── Tables ────────────────────────────────────────────────────── */
table {
 width: 100%;
 border-collapse: collapse;
 margin: var(--sp-3) 0;
 border: 1px solid var(--color-border);
}
th,
td {
 padding: var(--sp-3) var(--sp-4);
 text-align: left;
 border-bottom: 1px solid var(--color-border);
}
th {
 background: var(--color-surface);
 font-weight: 600;
 font-size: var(--text-sm);
 color: var(--color-text);
}
/* ── Blockquote (Note / Warning) ───────────────────────────────── */
blockquote {
 padding: var(--sp-3);
 border-left: 4px solid var(--color-warning);
 background: var(--color-warning-bg);
 border-radius: var(--radius-md);
 margin: var(--sp-3) 0;
}
blockquote p:last-child {
 margin-bottom: 0;
}
/* ── Tabs ──────────────────────────────────────────────────────── */
.tab-bar {
 display: flex;
 gap: var(--sp-1);
 border-bottom: 1px solid var(--color-border);
 margin-top: var(--sp-3);
}
.tab-btn {
 padding: var(--sp-2) var(--sp-4);
 font-family: var(--font-sans);
 font-size: var(--text-sm);
 font-weight: 500;
 color: var(--color-text-muted);
 border: none;
 background: none;
 cursor: pointer;
 border-bottom: 2px solid transparent;
 transition: color 0.12s, border-color 0.12s;
}
.tab-btn:hover {
 color: var(--color-text);
}
.tab-btn.active {
 color: var(--color-primary);
 border-bottom-color: var(--color-primary);
}
.tab-panel {
 display: none;
 padding-top: var(--sp-3);
}
.tab-panel.active {
 display: block;
}
.no-response-body {
 color: var(--color-muted, #888);
 font-style: italic;
 padding: var(--sp-3) 0;
 margin: 0;
}
/* ── Payload sections ──────────────────────────────────────────── */
.payload-section {
 margin: var(--sp-3) 0;
}
.payload-heading {
 font-size: var(--text-xs);
 font-weight: 700;
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: var(--sp-3);
}
/* ── Schema toolbar ───────────────────────────────────────────── */
.schema-toolbar {
 display: flex;
 gap: var(--sp-2);
 margin-bottom: var(--sp-2);
}
.schema-toolbar-btn {
 padding: 3px var(--sp-3);
 font-size: var(--text-xs);
 font-weight: 600;
 color: var(--color-primary);
 background: var(--color-primary-bg);
 border: 1px solid var(--color-primary);
 border-radius: var(--radius-sm);
 cursor: pointer;
 transition: background 0.12s, color 0.12s;
}
.schema-toolbar-btn:hover {
 background: var(--color-primary);
 color: #fff;
}
/* ── Schema table ──────────────────────────────────────────────── */
.schema-table {
 width: 100%;
 border-collapse: collapse;
 margin: var(--sp-3) 0;
 border: 1px solid var(--color-border);
 font-size: var(--text-sm);
}
.schema-table th {
 background: var(--color-surface);
 font-weight: 600;
 text-align: left;
 padding: var(--sp-3) var(--sp-4);
 border-bottom: 2px solid var(--color-border);
 color: var(--color-text);
}
.schema-table td {
 padding: var(--sp-2) var(--sp-4);
 border-bottom: 1px solid var(--color-border);
 vertical-align: top;
}
.schema-field {
 font-family: var(--font-mono);
 font-weight: 600;
 color: var(--color-text);
 font-size: var(--text-sm);
}
.schema-type {
 display: inline-block;
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 color: var(--color-primary);
 background: var(--color-primary-bg);
 padding: 2px var(--sp-2);
 border-radius: var(--radius-sm);
}
.schema-req {
 color: var(--color-required);
 font-weight: 700;
 margin-left: var(--sp-1);
}
.schema-allowed {
 font-size: var(--text-xs);
 color: var(--color-text-muted);
}
.schema-toggle-inline {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 cursor: pointer;
 font-family: var(--font-mono);
 font-weight: 700;
 font-size: var(--text-sm);
 color: var(--color-primary);
 user-select: none;
 margin-right: var(--sp-1);
 border-radius: var(--radius-sm);
 transition: background 0.12s, color 0.12s;
}
.schema-toggle-inline:hover {
 color: var(--color-primary-hover);
 background: var(--color-primary-bg);
}
/* ── Error table ───────────────────────────────────────────────── */
.error-table {
 width: 100%;
 border-collapse: collapse;
 margin: var(--sp-3) 0;
 border: 1px solid var(--color-border);
 font-size: var(--text-sm);
}
.error-table th {
 background: var(--color-danger-bg);
 font-weight: 600;
 text-align: left;
 padding: var(--sp-3) var(--sp-4);
 border-bottom: 2px solid var(--color-border);
 color: var(--color-text);
}
.error-table td {
 padding: var(--sp-2) var(--sp-4);
 border-bottom: 1px solid var(--color-border);
 vertical-align: top;
}
/* ── Operations ────────────────────────────────────────────────── */
.operation {
 margin: var(--sp-5) 0;
}
.op-divider {
 border: none;
 border-top: 1px solid var(--color-border);
 margin: var(--sp-5) 0;
}
.tag-divider {
 border: none;
 border-top: 3px solid var(--color-border);
 margin: var(--sp-6) 0;
}
/* ── Copy button ───────────────────────────────────────────────── */
.copy-btn {
 position: absolute;
 top: var(--sp-2);
 right: var(--sp-2);
 padding: var(--sp-1) var(--sp-3);
 font-family: var(--font-sans);
 font-size: var(--text-xs);
 color: var(--color-code-text);
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: var(--radius-sm);
 cursor: pointer;
 transition: background 0.12s, color 0.12s;
}
.copy-btn:hover {
 background: rgba(255, 255, 255, 0.18);
 color: #ffffff;
}
/* ── Example selector ──────────────────────────────────────────── */
.example-select {
 font-family: var(--font-sans);
 font-size: var(--text-sm);
 padding: var(--sp-1) var(--sp-3);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 margin-bottom: var(--sp-3);
 color: var(--color-text);
 background: var(--color-bg);
}
/* ── Info description ──────────────────────────────────────────── */
.info-description {
 margin-bottom: var(--sp-6);
}
/* ── Font-scale panel ──────────────────────────────────────────── */
#font-scale-panel {
 position: fixed;
 bottom: var(--sp-4);
 right: var(--sp-4);
 display: flex;
 align-items: center;
 gap: var(--sp-1);
 background: var(--color-bg);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-xl);
 padding: var(--sp-1) var(--sp-3);
 box-shadow: var(--shadow-md);
 z-index: 20;
 font-size: var(--text-xs);
}
#font-scale-panel button {
 width: 28px;
 height: 28px;
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 background: var(--color-bg);
 cursor: pointer;
 font-size: var(--text-sm);
 color: var(--color-text);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.12s;
}
#font-scale-panel button:hover {
 background: var(--color-surface-hover);
}
#font-scale-reset {
 font-size: var(--text-xs);
 width: auto;
 padding: 0 var(--sp-3);
}
#font-scale-label {
 font-weight: 600;
 color: var(--color-text-muted);
 margin-right: var(--sp-1);
}
#font-scale-value {
 font-weight: 600;
 color: var(--color-text);
 min-width: 36px;
 text-align: center;
}
/* ── Error message ─────────────────────────────────────────────── */
.error-msg {
 color: var(--color-danger);
 font-weight: 600;
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
 #sidebar {
   display: none;
 }
 #main {
   margin-left: 0;
   padding: var(--sp-5) var(--sp-4);
 }
}
/* ── @alenaksu/json-viewer web component styling ───────────────── */
.json-viewer-wrap {
 position: relative;
 margin: var(--sp-4) 0;
 background: var(--color-code-bg);
 border: 1px solid var(--color-code-border);
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.jv-toolbar {
 display: flex;
 align-items: center;
 gap: var(--sp-3);
 padding: var(--sp-2) var(--sp-4);
 background: linear-gradient(180deg, #1e293b 0%, #1a2332 100%);
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.jv-toolbar-btn {
 font-family: var(--font-sans);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.03em;
 text-transform: uppercase;
 color: #8b9cb5;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 4px;
 padding: 5px 14px;
 cursor: pointer;
 transition: all 0.15s ease;
 line-height: 1;
}
.jv-toolbar-btn:hover {
 background: rgba(255, 255, 255, 0.1);
 color: #e2e8f0;
 border-color: rgba(255, 255, 255, 0.18);
}
.jv-toolbar-btn:active {
 background: rgba(255, 255, 255, 0.06);
 transform: scale(0.97);
}
.jv-copy-btn {
 margin-left: auto;
 color: #6b8aaf;
 border-color: transparent;
 background: transparent;
}
.jv-copy-btn:hover {
 color: #93c5fd;
 background: rgba(59, 130, 246, 0.1);
 border-color: rgba(59, 130, 246, 0.2);
}
.json-viewer-wrap json-viewer {
 --background-color: var(--color-code-bg);
 --color: var(--color-code-text);
 --font-family: var(--font-mono);
 --font-size: var(--text-sm);
 --line-height: 1.7rem;
 --string-color: #a3eea0;
 --number-color: #d19a66;
 --boolean-color: #4ba7ef;
 --null-color: #df9cf3;
 --property-color: #6fb3d2;
 --preview-color: rgba(222, 174, 143, 0.7);
 --indent-size: 1.5em;
 --indentguide-size: 1px;
 --indentguide-style: solid;
 --indentguide-color: #334155;
 --indentguide-color-active: #475569;
 display: block;
 padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-3);
 max-height: 550px;
 overflow: auto;
}
/* ── Endpoint section blocks ───────────────────────────────────── */
.endpoint-block {
 margin: var(--sp-3) 0;
}
.ep-heading {
 display: inline-block;
 padding: 5px 14px;
 font-weight: 700;
 border-radius: var(--radius-sm);
 font-size: var(--text-sm);
 margin-bottom: var(--sp-2);
 letter-spacing: 0.01em;
}
.ep-mqtt {
 background: #0f766e;
 color: #ffffff;
}
.ep-rest {
 background: #1d4ed8;
 color: #ffffff;
}
.endpoint-table {
 width: 100%;
 border-collapse: collapse;
 margin: 0 0 var(--sp-3) 0;
 border: 1px solid var(--color-border);
 font-size: var(--text-sm);
}
.endpoint-table td {
 padding: var(--sp-2) var(--sp-4);
 border-bottom: 1px solid var(--color-border);
 vertical-align: middle;
}
.endpoint-table td:first-child {
 font-weight: 600;
 color: var(--color-text);
 width: 140px;
 white-space: nowrap;
}
.ep-note {
 font-size: var(--text-sm);
 color: var(--color-text-secondary);
 border-left: 3px solid var(--color-warning);
 background: var(--color-warning-bg);
 padding: var(--sp-2) var(--sp-3);
 border-radius: var(--radius-sm);
 margin-top: var(--sp-1);
 margin-bottom: 0;
}
/* HTTP method badges */
.ep-method {
 display: inline-block;
 font-weight: 700;
 padding: 2px 10px;
 border-radius: 12px;
 font-size: 0.82em;
 letter-spacing: 0.04em;
}
.ep-method-put    { background: #ffd54f; color: #5d4037; }
.ep-method-get    { background: #c8e6c9; color: #1b5e20; }
.ep-method-post   { background: #bbdefb; color: #0d47a1; }
.ep-method-delete { background: #ffcdd2; color: #b71c1c; }
.ep-method-patch  { background: #e1bee7; color: #4a148c; }


/* ════════════════════════════════════════════════════════════════
  Schema table — tree-style nested rendering (additive, isolated)
  Only affects elements inside .schema-table
  ════════════════════════════════════════════════════════════════ */
.schema-table .schema-indent-1 { padding-left: 28px !important; }
.schema-table .schema-indent-2 { padding-left: 52px !important; }
.schema-table .schema-indent-3 { padding-left: 76px !important; }
.schema-table .schema-indent-4 { padding-left: 100px !important; }
.schema-table .schema-indent-5 { padding-left: 124px !important; }
.schema-table .schema-toggle-inline {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 16px;
 height: 16px;
 cursor: pointer;
 font-family: var(--font-mono);
 font-weight: 700;
 font-size: 12px;
 color: var(--color-primary);
 user-select: none;
 margin-right: 8px;
 border-radius: var(--radius-sm);
 border: 1px solid var(--color-border);
 background: var(--color-bg);
 vertical-align: middle;
 flex-shrink: 0;
 transition: background 0.12s, color 0.12s;
}
.schema-table .schema-toggle-inline:hover {
 color: var(--color-primary-hover);
 background: var(--color-primary-bg);
}
.schema-table .schema-toggle-spacer {
 display: inline-block;
 width: 16px;
 height: 16px;
 margin-right: 8px;
 vertical-align: middle;
 flex-shrink: 0;
}

/* ── Type badge colors per data type ─────────────────────────── */

/* Default fallback (object, anything else) — purple */
.schema-table .schema-type {
 color: #6b21a8 !important;
 background: #f3e8ff !important;
}

/* string → blue (matches field name pills) */
.schema-table .schema-type[data-type="string"] {
 color: var(--color-primary) !important;
 background: var(--color-primary-bg) !important;
}

/* integer / number → orange */
.schema-table .schema-type[data-type="integer"],
.schema-table .schema-type[data-type="number"] {
 color: #b45309 !important;
 background: #fef3c7 !important;
}

/* boolean → pink */
.schema-table .schema-type[data-type="boolean"] {
 color: #be185d !important;
 background: #fce7f3 !important;
}

/* enum → green */
.schema-table .schema-type[data-type="enum"] {
 color: #15803d !important;
 background: #dcfce7 !important;
}

/* array → teal */
.schema-table .schema-type[data-type="array"] {
 color: #0f766e !important;
 background: #ccfbf1 !important;
}

/* object → purple (explicit, same as default) */
.schema-table .schema-type[data-type="object"] {
 color: #6b21a8 !important;
 background: #f3e8ff !important;
}

/* ── Field name pills — always blue ──────────────────────────── */
.schema-table .schema-field {
 color: var(--color-primary) !important;
 background: var(--color-primary-bg) !important;
 font-family: var(--font-mono);
 font-weight: 600;
 font-size: var(--text-xs);
 padding: 2px 8px;
 border-radius: var(--radius-sm);
 display: inline-block;
}