.schema-view {
    width: 100%;
    /*background-image:url("images/abstract_12.jpg")*/
}

.schema-view-body {
    width: 100%;
    /*background-image:url("images/abstract_12.jpg")*/
}

.schema-container-fluid {
    width: 100%;
    max-width: 100%;
}

/* ---------- missing schema fallback  (razor: schema-view-missing) */
.schema-view-missing {
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: .875rem;
}

    .schema-view-missing code {
        background: #fee2e2;
        border-radius: 3px;
        padding: 1px 5px;
        font-family: monospace;
        color: #991b1b;
    }

/* ---------- view header  (razor: <header class="schema-view-header">) */
.schema-view-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    font-variant: small-caps;
}

    .schema-view-header h1,
    .schema-view-header h2,
    .schema-view-header h3 {
        margin: 0;
        font-weight: 700;
        color: #111827;
        line-height: 1.2;
    }

    .schema-view-header h3 {
        font-size: 1.25rem;
    }

    .schema-view-header h2 {
        font-size: 1.5rem;
    }

    .schema-view-header h1 {
        font-size: 1.75rem;
    }

/* ---------- subtitle inside header ----------------------------- */
.schema-view-subtitle {
    font-size: .875rem;
    color: #6b7280;
    margin: 0;
}

/* ---------- mode switcher  (razor: schema-view-modeswitch) ------ */
.schema-view-modeswitch {
    display: inline-flex;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 16px;
    align-self: flex-start;
}

    /* DxButton inside modeswitch renders as <button> */
    .schema-view-modeswitch button,
    .schema-view-modeswitch .dxbl-btn {
        padding: 5px 14px;
        border: none;
        border-right: 1px solid #e2e8f0;
        background: transparent;
        font-size: .8125rem;
        font-weight: 500;
        color: #6b7280;
        cursor: pointer;
        transition: background .15s, color .15s;
        border-radius: 0;
        line-height: 1.4;
    }

        .schema-view-modeswitch button:last-child,
        .schema-view-modeswitch .dxbl-btn:last-child {
            border-right: none;
        }

        .schema-view-modeswitch button:hover:not(.active),
        .schema-view-modeswitch .dxbl-btn:hover:not(.active) {
            background: #f1f5f9;
            color: #374151;
        }

        .schema-view-modeswitch button.active,
        .schema-view-modeswitch .dxbl-btn.active {
            background: #0f172a;
            color: #fff;
        }

/* ---------- root grid ------------------------------------------ */
.schema-root-layout {
    align-items: start;
}

.schema-grid-cell {
    min-width: 0;
}

/* ---------- nested layout containers --------------------------- */
.schema-layout-container {
    min-width: 0;
}

.schema-layout-title {
    margin-bottom: 8px;
    color: #48515d;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.schema-layout-body {
    min-width: 0;
}

/* ---------- group ---------------------------------------------- */
.schema-group {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.schema-group-header {
    margin: -4px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.schema-group-title {
    margin: 4px;
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.schema-group-subtitle {
    color: #6b7280;
    font-size: .875rem;
    margin-top: 2px;
}

/* ---------- field ---------------------------------------------- */
.schema-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.schema-field-label {
    font-size: .8125rem;
    font-weight: 700 !important;
    margin: 0;
    white-space: nowrap;
}

.schema-field-control {
    min-width: 0;
}

    .schema-field-control > * {
        max-width: 100%;
    }

.schema-field-error {
    color: #dc2626;
    font-size: .8125rem;
    margin-top: 2px;
}

.schema-field-missing {
    color: #dc2626;
    font-size: .8125rem;
    font-style: italic;
}

/* ---------- label position ------------------------------------- */
.schema-field-label-top {
    flex-direction: column;
}

.schema-field-label-left {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

    .schema-field-label-left .schema-field-label {
        flex: 0 0 auto;
        min-width: 120px;
    }

.schema-field-label-right {
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

    .schema-field-label-right .schema-field-label {
        flex: 0 0 auto;
        min-width: 120px;
        text-align: right;
    }

.schema-field-label-hidden .schema-field-label {
    display: none;
}

.schema-field-label-floating .schema-field-label {
    font-size: .75rem;
    color: #6b7280;
}

/* ---------- variants ------------------------------------------- */
.schema-field-primary .schema-field-label {
    color: #1d4ed8;
    font-weight: 600;
}

.schema-field-muted {
    opacity: .75;
}

    .schema-field-muted .schema-field-label {
        color: #6b7280;
    }

.schema-field-highlight {
    background: #fff7ed;
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    border-radius: 4px;
}

.schema-field-compact {
    gap: 2px;
}

    .schema-field-compact .schema-field-label {
        font-size: .75rem;
    }

.schema-field-boxed {
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    border-radius: 4px;
    background: #fafafa;
}

/* ---------- actions -------------------------------------------- */
.schema-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ---------- labels / separators / spacers ---------------------- */
.schema-label {
    display: block;
}

.schema-label-default {
    margin: 0;
    font-weight: bold;
    font-size: larger;
}

.schema-label-h1,
.schema-label-h2,
.schema-label-h3,
.schema-label-h4,
.schema-label-h5,
.schema-label-h6 {
    font-weight: 600;
    margin: 0;
}

.schema-separator {
    width: 100%;
    margin: 4px 0;
}

    .schema-separator hr {
        border: 0;
        border-top: 1px solid #e5e7eb;
        margin: 0;
    }

.schema-spacer {
    width: 100%;
}

/* ---------- tabs (generic classes the renderers can target) ---- */
.schema-tabs-main .dxbs-tabs-nav-holder {
    border-bottom: 1px solid #e5e7eb;
}

.schema-tabs-main .rz-tabs-header {
    border-bottom: 1px solid #e5e7eb;
}

/* ---------- child-grid ----------------------------------------- */
.schema-child-grid-toolbar {
    margin-bottom: 8px;
}

.schema-child-grid-missing {
    padding: 8px;
    color: #6b7280;
}

/* ---------- image ---------------------------------------------- */
.schema-image {
    display: block;
}

.schema-image-empty {
    color: #9ca3af;
}

/* ---------- readonly display ----------------------------------- */
.schema-readonly {
    display: inline-block;
    padding: 6px 8px;
    background: #f9fafb;
    border-radius: 4px;
    color: #111827;
    min-height: 1.5em;
}

.schema-view-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ===== Missing / ergänzende Styles ===== */

/* ---------- view title + badge ---------- */
.schema-view-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.preview-badge {
    font-size: .75rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ---------- grid system ---------- */
.schema-root-layout,
.schema-tab-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.schema-grid-cell.span-1 {
    grid-column: span 1;
}

.schema-grid-cell.span-2 {
    grid-column: span 2;
}

.schema-grid-cell.span-3 {
    grid-column: span 3;
}

.schema-grid-cell.span-4 {
    grid-column: span 4;
}

.schema-grid-cell.span-5 {
    grid-column: span 5;
}

.schema-grid-cell.span-6 {
    grid-column: span 6;
}

.schema-grid-cell.span-7 {
    grid-column: span 7;
}

.schema-grid-cell.span-8 {
    grid-column: span 8;
}

.schema-grid-cell.span-9 {
    grid-column: span 9;
}

.schema-grid-cell.span-10 {
    grid-column: span 10;
}

.schema-grid-cell.span-11 {
    grid-column: span 11;
}

.schema-grid-cell.span-12 {
    grid-column: span 12;
}

/* ---------- tabs ---------- */
.schema-tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}

.schema-tab-btn {
    padding: 6px 12px;
    font-size: .8125rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

    .schema-tab-btn:hover {
        color: #374151;
        background: #f9fafb;
    }

    .schema-tab-btn.active {
        color: #111827;
        border-bottom-color: #111827;
        font-weight: 600;
    }

.schema-tabs-body {
    width: 100%;
}

.schema-tab-panel {
    display: none;
}

    .schema-tab-panel.active {
        display: block;
    }

/* ---------- boolean ---------- */
.schema-bool-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

    .schema-bool-wrapper input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

/* ---------- required ---------- */
.schema-field-required .schema-field-label::after {
    content: " *";
    color: #dc2626;
}

/* ---------- buttons ---------- */
.schema-action-btn {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: #0f172a;
    color: #fff;
}

    .btn-primary:hover {
        background: #1e293b;
    }

.btn-secondary {
    background: #f1f5f9;
    color: #111827;
}

    .btn-secondary:hover {
        background: #e2e8f0;
    }

.w-100 {
    width: 100%;
}

/* ---------- inputs ---------- */
.schema-field-control input,
.schema-field-control select,
.schema-field-control textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: .875rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #111827;
}

    .schema-field-control input:focus,
    .schema-field-control select:focus,
    .schema-field-control textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 1px #2563eb;
    }

/* ---------- bootstrap fallbacks ---------- */
.text-uppercase {
    text-transform: uppercase;
}

.text-muted {
    color: #6b7280;
}

.mb-1 {
    margin-bottom: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.h6 {
    font-size: .875rem;
    font-weight: 600;
}

.p-3 {
    padding: 12px;
}

/* ---------- group variants ---------- */
.schema-group {
    min-width: 0;
}

.schema-group-card {
    padding: 14px;
    border: 1px solid #d7dce3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgb(31 35 40 / 6%);
}

.schema-group-panel {
    padding: 12px;
    border: 1px solid #dfe3ea;
    border-radius: 6px;
    background: #f8fafc;
}

.schema-group-quiet {
    padding: 8px 0;
    border: 0;
    background: transparent;
}

.schema-group-borderless {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.schema-group-caption > .schema-group-header,
.schema-group-collapsible-caption > .schema-group-header {
    min-height: 34px;
    padding: 0 0 8px;
    border-bottom: 1px solid #e1e5ea;
}

.schema-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schema-group-toggle {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #c6ccd5;
    border-radius: 999px;
    background: #ffffff;
    color: #48515d;
    line-height: 1;
}

.schema-group-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.schema-group-subtitle {
    color: #68707b;
    font-size: .8rem;
}

.schema-group-collapsed > .schema-group-body {
    display: none !important;
}

.schema-theme-image-hero .schema-group,
.schema-theme-split-image .schema-group,
.schema-theme-dashboard .schema-group {
    background: rgb(255 255 255 / 72%);
}

.schema-theme-image-hero .schema-group-header,
.schema-theme-split-image .schema-group-header,
.schema-theme-dashboard .schema-group-header {
    background: transparent;
}

.schema-theme-image-hero .schema-group-quiet,
.schema-theme-image-hero .schema-group-borderless,
.schema-theme-split-image .schema-group-quiet,
.schema-theme-split-image .schema-group-borderless {
    background: transparent;
}

/* ---------- root themes / surfaces ---------- */
.schema-theme-default {
    background-repeat: no-repeat;
}

.schema-theme-document {
    background: #f4f6f8;
}

.schema-theme-compact-form .schema-root-layout,
.schema-theme-compact-form .schema-group-body,
.schema-theme-compact-form .schema-layout-body {
    gap: 8px !important;
}

.schema-theme-image-hero {
    min-height: 100%;
    background-repeat: no-repeat;
}

.schema-theme-split-image {
    background-repeat: no-repeat;
    background-size: 38% auto;
    background-position: left top;
}

.schema-theme-dashboard {
    background: #eef2f7;
}

.schema-surface-plain {
    width: 100%;
}

.schema-surface-card {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 40px rgb(15 23 42 / 8%);
}

.schema-surface-glass {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 8px;
    background: rgb(255 255 255 / 78%);
    backdrop-filter: blur(12px);
}

.schema-surface-boxed {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid #d8dde6;
    background: #fff;
}

.schema-surface-full-width {
    width: 100%;
}

.schema-view-header {
    min-width: 0;
}

.schema-view-header-compact {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.schema-view-header-large {
    min-height: 160px;
    justify-content: center;
    padding: 28px 0 18px;
}

.schema-view-header-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 32%);
    align-items: center;
}

.schema-view-header-image {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
}

.schema-view-header-icon {
    font-size: 1.5rem;
}

/* ---------- visual layout items ---------- */
.schema-image {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #f3f5f8;
}

    .schema-image img {
        width: 100%;
        height: 100%;
        object-fit: var(--schema-image-fit, cover);
        display: block;
    }

    .schema-image figcaption {
        padding: 6px 8px;
        color: #5f6875;
        font-size: .8rem;
    }

.schema-image-empty {
    min-height: 120px;
    display: grid;
    place-items: center;
    color: #7b8491;
    border: 1px dashed #c6ced8;
}

.schema-text-block,
.schema-html-block {
    min-width: 0;
    color: #1f2937;
}

.schema-text-lead {
    font-size: 1.05rem;
    font-weight: 600;
}

.schema-text-muted {
    color: #68707b;
}

.schema-text-note {
    padding: 10px 12px;
    border-left: 3px solid #5275d6;
    background: #f4f7ff;
}

.schema-text-quote {
    padding-left: 12px;
    border-left: 3px solid #c4cad4;
    color: #3f4752;
    font-style: italic;
}

.schema-alert {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    background: #eef2ff;
    color: #1e3a8a;
}

.schema-alert-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.schema-alert-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.schema-alert-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.schema-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #394454;
    font-size: .78rem;
    font-weight: 700;
}

.schema-badge-info {
    background: #e0f2fe;
    color: #075985;
}

.schema-badge-success {
    background: #dcfce7;
    color: #166534;
}

.schema-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.schema-badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.schema-metric {
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #fff;
}

.schema-metric-highlight {
    border-color: #b7c7ff;
    background: #f4f7ff;
}

.schema-metric-label {
    color: #68707b;
    font-size: .78rem;
    font-weight: 700;
}

.schema-metric-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
}

.schema-metric-hint {
    color: #68707b;
    font-size: .78rem;
}

.schema-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    color: #244fd6;
    text-decoration: none;
}

.schema-link-button {
    padding: 7px 10px;
    border-radius: 4px;
    background: #244fd6;
    color: #fff;
}

.schema-link-muted {
    color: #68707b;
}

.schema-icon-block {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    color: #394454;
}

    .schema-icon-block i {
        font-size: var(--schema-icon-size, 24px);
    }

.schema-icon-accent {
    color: #244fd6;
}

.schema-icon-muted {
    color: #7b8491;
}

.schema-section,
.schema-hero {
    min-width: 0;
    padding: 14px;
    border-radius: 8px;
    background: #fff;
}

.schema-section-card,
.schema-section-panel {
    border: 1px solid #d8dde6;
}

.schema-section-panel {
    background: #f8fafc;
}

.schema-section-quiet {
    padding: 0;
    background: transparent;
}

.schema-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .schema-section-header h4,
    .schema-hero h2 {
        margin: 0;
    }

.schema-section-subtitle,
.schema-hero-subtitle {
    color: #68707b;
    font-size: .85rem;
}

.schema-hero {
    position: relative;
    overflow: hidden;
    min-height: 160px;
}

.schema-hero-image {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 6px;
}

.schema-hero-content {
    position: relative;
    display: grid;
    gap: 12px;
}

/* ---------- native schema tabs ---------- */
.schema-tabs-native {
    display: grid;
    gap: var(--schema-tabs-gap, 12px);
}

    .schema-tabs-native .schema-tabs-header {
        display: flex;
        flex-wrap: wrap;
        gap: var(--schema-tabs-gap, 4px);
        border-bottom: 1px solid #d7dce3;
    }

.schema-tabs-align-center .schema-tabs-header {
    justify-content: center;
}

.schema-tabs-align-end .schema-tabs-header {
    justify-content: flex-end;
}

.schema-tabs-align-stretch .schema-tab-native-btn {
    flex: 1 1 0;
    justify-content: center;
}

.schema-tabs-vertical {
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    align-items: start;
}

    .schema-tabs-vertical .schema-tabs-header {
        flex-direction: column;
        border-bottom: 0;
        border-right: 1px solid #d7dce3;
    }

.schema-tab-native-btn,
.mock-tab-strip button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
}

    .schema-tab-native-btn.active,
    .mock-tab-strip button.active {
        color: #244fd6;
        border-bottom-color: #244fd6;
        font-weight: 700;
    }

.schema-tabs-pills .schema-tabs-header,
.schema-tabs-pills .mock-tab-strip {
    border-bottom: 0;
}

    .schema-tabs-pills .schema-tab-native-btn,
    .schema-tabs-pills .mock-tab-strip button {
        border: 1px solid transparent;
        border-radius: 999px;
        background: #eef2f7;
    }

        .schema-tabs-pills .schema-tab-native-btn.active,
        .schema-tabs-pills .mock-tab-strip button.active {
            border-color: #244fd6;
            background: #e8eeff;
        }

.schema-tabs-boxed {
    padding: 10px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: rgb(255 255 255 / 76%);
}

.schema-tabs-compact .schema-tab-native-btn,
.schema-tabs-compact .mock-tab-strip button {
    min-height: 28px;
    padding: 4px 8px;
    font-size: .82rem;
}

.schema-tab-image {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}

.schema-tab-badge {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: .72rem;
    font-weight: 700;
}

.schema-tabs-native-panel:not(.active) {
    display: none;
}

.schema-tabs-native-panel > .schema-tab-body {
    padding: var(--schema-tabs-panel-padding, 12px);
}

/* ---------- semantic label variants ---------------------------- */
.schema-label-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.schema-label-subtitle {
    margin: 2px 0 8px;
    font-size: .95rem;
    font-weight: 500;
    color: #64748b;
}

.schema-label-section {
    margin: 10px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.schema-label-subsection {
    margin: 8px 0 2px;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 0;
}

.schema-label-caption,
.schema-label-muted {
    margin: 4px 0;
    color: #64748b;
    font-size: .82rem;
    font-weight: 500;
}

.schema-label-overline {
    margin: 6px 0 2px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.schema-label-note {
    margin: 4px 0;
    padding: 6px 8px;
    border-left: 3px solid #60a5fa;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .86rem;
}

.schema-label-warning {
    margin: 4px 0;
    padding: 6px 8px;
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    color: #92400e;
    font-size: .86rem;
    font-weight: 600;
}

/* ---------- host theme integration -----------------------------
   Keep SchemaView neutral: DevExpress/XAF/Bootstrap themes own the actual
   palette. These overrides intentionally come last so older hard-coded light
   fallbacks above do not force white cards in dark applications. */
.schema-view {
    --schema-color-bg: var(--bs-body-bg, var(--dxbl-body-bg, Canvas));
    --schema-color-surface: var(--bs-body-bg, var(--dxbl-surface-bg, var(--dxbl-body-bg, Canvas)));
    --schema-color-surface-soft: var(--bs-secondary-bg, color-mix(in srgb, var(--schema-color-text) 6%, var(--schema-color-bg)));
    --schema-color-text: var(--bs-body-color, var(--dxbl-body-color, CanvasText));
    --schema-color-muted: var(--bs-secondary-color, color-mix(in srgb, var(--schema-color-text) 62%, transparent));
    --schema-color-border: var(--bs-border-color, color-mix(in srgb, var(--schema-color-text) 18%, transparent));
    --schema-color-border-soft: color-mix(in srgb, var(--schema-color-border) 62%, transparent);
    --schema-color-primary: var(--bs-primary, var(--dxbl-primary, #244fd6));
    color: var(--schema-color-text);
}

.schema-view-body,
.schema-surface-plain,
.schema-surface-full-width {
    color: var(--schema-color-text);
}

.schema-view-header,
.schema-tabs-native .schema-tabs-header,
.schema-tabs-main .dxbs-tabs-nav-holder,
.schema-tabs-main .rz-tabs-header,
.schema-tabs-nav,
.schema-label-section,
.schema-label-divider,
.schema-separator hr {
    border-color: var(--schema-color-border);
}

.schema-view-header h1,
.schema-view-header h2,
.schema-view-header h3,
.schema-view-title,
.schema-group-title,
.schema-label-title,
.schema-text-block,
.schema-html-block,
.schema-metric-value,
.schema-icon-block {
    color: var(--schema-color-text);
}

.schema-view-subtitle,
.schema-layout-title,
.schema-group-subtitle,
.schema-section-subtitle,
.schema-hero-subtitle,
.schema-label-section,
.schema-label-subsection,
.schema-label-caption,
.schema-label-muted,
.schema-label-overline,
.schema-text-muted,
.schema-metric-label,
.schema-metric-hint,
.schema-child-grid-missing,
.schema-image figcaption,
.schema-image-empty,
.schema-visual,
.schema-tab-native-btn,
.schema-tab-btn,
.schema-tab-badge {
    color: var(--schema-color-muted);
}

.schema-group,
.schema-group-card,
.schema-group-panel,
.schema-section,
.schema-section-card,
.schema-section-panel,
.schema-hero,
.schema-metric,
.schema-surface-card,
.schema-surface-boxed,
.schema-tabs-boxed {
    background: var(--schema-color-surface);
    border-color: var(--schema-color-border);
    color: var(--schema-color-text);
}

.schema-group-panel,
.schema-section-panel,
.schema-image,
.schema-readonly,
.schema-field-boxed,
.schema-field-control input,
.schema-field-control select,
.schema-field-control textarea,
.schema-view-modeswitch,
.schema-tabs-pills .schema-tab-native-btn,
.btn-secondary,
.schema-badge,
.schema-tab-badge {
    background: var(--schema-color-surface-soft);
    color: var(--schema-color-text);
    border-color: var(--schema-color-border);
}

.schema-group-header,
.schema-section-header,
.schema-theme-image-hero .schema-group-header,
.schema-theme-split-image .schema-group-header,
.schema-theme-dashboard .schema-group-header {
    background: transparent;
    border-color: var(--schema-color-border-soft);
}

.schema-group-quiet,
.schema-group-borderless,
.schema-section-quiet {
    background: transparent;
    border-color: transparent;
}

.schema-group-toggle {
    background: var(--schema-color-surface-soft);
    border-color: var(--schema-color-border);
    color: var(--schema-color-text);
}

.schema-surface-glass,
.schema-theme-image-hero .schema-group,
.schema-theme-split-image .schema-group,
.schema-theme-dashboard .schema-group {
    background: color-mix(in srgb, var(--schema-color-surface) 78%, transparent);
    border-color: var(--schema-color-border);
    color: var(--schema-color-text);
}

.schema-theme-document,
.schema-theme-dashboard {
    background: var(--schema-color-bg);
}

.schema-field-label,
.schema-field-primary .schema-field-label {
    color: inherit;
}

.schema-field-muted .schema-field-label,
.schema-field-label-floating .schema-field-label,
.text-muted {
    color: var(--schema-color-muted);
}

.schema-tab-native-btn:hover,
.schema-tab-btn:hover {
    background: var(--schema-color-surface-soft);
    color: var(--schema-color-text);
}

.schema-tab-native-btn.active,
.schema-tab-btn.active {
    color: var(--schema-color-primary);
    border-color: var(--schema-color-primary);
}

.schema-tabs-pills .schema-tab-native-btn.active {
    background: color-mix(in srgb, var(--schema-color-primary) 16%, var(--schema-color-surface));
    border-color: var(--schema-color-primary);
    color: var(--schema-color-primary);
}

.schema-field-control input:focus,
.schema-field-control select:focus,
.schema-field-control textarea:focus {
    border-color: var(--schema-color-primary);
    box-shadow: 0 0 0 1px var(--schema-color-primary);
}

.schema-view-modeswitch button:hover:not(.active),
.schema-view-modeswitch .dxbl-btn:hover:not(.active) {
    background: var(--schema-color-surface-soft);
    color: var(--schema-color-text);
}

.schema-view-modeswitch button.active,
.schema-view-modeswitch .dxbl-btn.active {
    background: var(--schema-color-primary);
    color: var(--bs-btn-color, #fff);
}

.schema-field-required .schema-field-label::after {
    color: var(--schema-color-danger);
}

/* ---------- renderer coverage ---------------------------------
   Structural classes emitted by SchemaItem/SchemaButtonBar/etc.
   Variant-specific classes still layer on top of these base rules. */
.schema-action,
.schema-viewitem,
.schema-child-grid,
.schema-child-grid-xaflist,
.schema-empty,
.schema-layout-horizontal,
.schema-layout-vertical,
.schema-layout-grid,
.schema-layout-stack,
.schema-tabs,
.schema-tab-body,
.schema-section-body,
.schema-hero-body,
.schema-metric-content,
.schema-view-header-text {
    min-width: 0;
}

.schema-button-bar {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.schema-button-bar-label {
    color: var(--schema-color-muted);
    font-size: .82rem;
    font-weight: 700;
}

.schema-button-bar-buttons {
    min-width: 0;
}

.schema-button-bar-center .schema-button-bar-buttons {
    justify-content: center;
}

.schema-button-bar-end .schema-button-bar-buttons {
    justify-content: flex-end;
}

.schema-button-bar-between .schema-button-bar-buttons {
    justify-content: space-between;
}

.schema-button-bar-stretch .schema-button-bar-buttons > .schema-action {
    flex: 1 1 0;
}

.schema-separator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schema-separator-text {
    color: var(--schema-color-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.schema-separator hr {
    flex: 1 1 auto;
}

.schema-item-unknown {
    padding: 8px 10px;
    border: 1px dashed var(--schema-color-border);
    border-radius: 4px;
    color: var(--schema-color-muted);
    background: var(--schema-color-surface-soft);
    font-size: .82rem;
}

.schema-designer-toggle {
    font: inherit;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
    border: 1px solid var(--schema-color-border);
    background: var(--schema-color-surface);
    color: var(--schema-color-text);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: var(--schema-shadow-sm, 0 4px 14px rgba(0,0,0,.18));
    font-weight: 600;
}

.schema-designer-json {
    color: var(--schema-color-text);
    background: var(--schema-color-surface);
    border-top: 1px solid var(--schema-color-border);
    padding: 12px;
    overflow: auto;
    min-width: 0;
}

.schema-designer-json-title {
    font-weight: 700;
    color: var(--schema-color-text);
    margin-bottom: 8px;
}

.schema-designer-json-pre {
    font-size: .78rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--schema-color-code-bg, var(--bs-dark, #1f2933));
    color: var(--schema-color-code-text, var(--bs-light, #f8fafc));
    margin: 0;
    padding: 10px;
    border-radius: 4px;
    max-height: 360px;
    overflow: auto;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- theme-aware semantic variants + narrow containers ---
   Keep these late: they normalize renderer/designer variant classes and
   override older hard-coded light fallbacks without changing renderer logic. */
.schema-view {
    --schema-color-success: var(--bs-success, #198754);
    --schema-color-info: var(--bs-info, #0dcaf0);
    --schema-color-warning: var(--bs-warning, #ffc107);
    --schema-color-danger: var(--bs-danger, #dc3545);
    --schema-color-link: var(--bs-link-color, var(--schema-color-primary));
    container-type: inline-size;
}

.schema-group-default,
.designer-schema-view,
.schema-view-header-default,
.schema-tabs-default,
.schema-tabs-align-start,
.schema-text-body,
.schema-html-default,
.schema-alert-info,
.schema-badge-default,
.schema-metric-default,
.schema-link-default,
.schema-icon-default,
.schema-section-default,
.schema-visual-default,
.schema-hero-default {
    color: inherit;
}

.schema-alert,
.schema-alert-info,
.schema-text-note,
.schema-label-note {
    border-color: color-mix(in srgb, var(--schema-color-info) 42%, var(--schema-color-border));
    background: color-mix(in srgb, var(--schema-color-info) 12%, var(--schema-color-surface));
    color: var(--schema-color-text);
}

.schema-alert-success,
.schema-badge-success {
    border-color: color-mix(in srgb, var(--schema-color-success) 48%, var(--schema-color-border));
    background: color-mix(in srgb, var(--schema-color-success) 14%, var(--schema-color-surface));
    color: var(--schema-color-text);
}

.schema-alert-warning,
.schema-badge-warning,
.schema-field-highlight,
.schema-label-warning,
.preview-badge {
    border-color: color-mix(in srgb, var(--schema-color-warning) 55%, var(--schema-color-border));
    background: color-mix(in srgb, var(--schema-color-warning) 16%, var(--schema-color-surface));
    color: var(--schema-color-text);
}

.schema-alert-danger,
.schema-badge-danger,
.schema-view-missing,
.schema-field-error,
.schema-field-missing {
    border-color: color-mix(in srgb, var(--schema-color-danger) 50%, var(--schema-color-border));
    background: color-mix(in srgb, var(--schema-color-danger) 12%, var(--schema-color-surface));
    color: var(--schema-color-text);
}

.schema-view-missing code {
    background: color-mix(in srgb, var(--schema-color-danger) 18%, var(--schema-color-surface));
    color: var(--schema-color-text);
}

.schema-badge-info,
.schema-metric-highlight {
    border-color: color-mix(in srgb, var(--schema-color-info) 42%, var(--schema-color-border));
    background: color-mix(in srgb, var(--schema-color-info) 12%, var(--schema-color-surface));
    color: var(--schema-color-text);
}

.schema-link,
.schema-icon-accent {
    color: var(--schema-color-link);
}

.schema-link-button,
.schema-view .btn-primary,
.schema-view .schema-action-btn.btn-primary {
    background: var(--schema-color-primary);
    border-color: var(--schema-color-primary);
    color: var(--bs-btn-color, #fff);
}

.schema-view .btn-success,
.schema-view .schema-action-btn.btn-success {
    background: var(--schema-color-success);
    border-color: var(--schema-color-success);
    color: var(--bs-btn-color, #fff);
}

.schema-view .btn-info,
.schema-view .schema-action-btn.btn-info {
    background: var(--schema-color-info);
    border-color: var(--schema-color-info);
    color: var(--schema-color-text);
}

.schema-view .btn-warning,
.schema-view .schema-action-btn.btn-warning {
    background: var(--schema-color-warning);
    border-color: var(--schema-color-warning);
    color: var(--schema-color-text);
}

.schema-view .btn-danger,
.schema-view .schema-action-btn.btn-danger {
    background: var(--schema-color-danger);
    border-color: var(--schema-color-danger);
    color: var(--bs-btn-color, #fff);
}

.schema-view .btn-link,
.schema-view .schema-action-btn.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--schema-color-link);
    padding-inline: 0;
}

.schema-action-btn:disabled,
.schema-action-btn[disabled],
.schema-tab-native-btn:disabled,
.schema-tab-native-btn[disabled],
.schema-view-modeswitch button:disabled,
.schema-view-modeswitch .dxbl-btn:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.schema-button-bar-buttons,
.schema-section-body,
.schema-hero-body,
.schema-group-body,
.schema-tab-body,
.schema-layout-body {
    min-width: 0;
}

.schema-field-label,
.schema-tab-native-btn span,
.schema-tab-btn span,
.schema-button-bar-label,
.schema-group-title,
.schema-section-header h4,
.schema-hero h2,
.schema-metric-value,
.schema-link,
.schema-icon-block {
    overflow-wrap: anywhere;
}

.schema-field-label-left .schema-field-label,
.schema-field-label-right .schema-field-label {
    white-space: normal;
}

@container (max-width: 640px) {
    .schema-view .schema-root-layout,
    .schema-view .schema-tab-body,
    .schema-view .schema-section-body,
    .schema-view .schema-hero-body,
    .schema-view .schema-group-body,
    .schema-view .schema-layout-body {
        grid-template-columns: 1fr !important;
    }

    .schema-view .schema-grid-cell,
    .schema-view .schema-action,
    .schema-view .schema-button-bar,
    .schema-view .schema-child-grid,
    .schema-view .schema-tabs,
    .schema-view .schema-viewitem,
    .schema-view .schema-label,
    .schema-view .schema-spacer,
    .schema-view .schema-separator,
    .schema-view .schema-image,
    .schema-view .schema-visual,
    .schema-view .schema-text-block,
    .schema-view .schema-html-block,
    .schema-view .schema-alert,
    .schema-view .schema-badge,
    .schema-view .schema-metric,
    .schema-view .schema-link,
    .schema-view .schema-icon-block,
    .schema-view .schema-section,
    .schema-view .schema-hero,
    .schema-view .schema-empty {
        grid-column: 1 / -1 !important;
    }

    .schema-view .schema-field-label-left,
    .schema-view .schema-field-label-right {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .schema-view .schema-field-label-left .schema-field-label,
    .schema-view .schema-field-label-right .schema-field-label {
        flex-basis: auto !important;
        min-width: 0 !important;
        text-align: left;
    }

    .schema-view .schema-view-header-split,
    .schema-view .schema-tabs-vertical {
        grid-template-columns: 1fr;
    }

    .schema-view .schema-tabs-vertical .schema-tabs-header {
        border-right: 0;
        border-bottom: 1px solid var(--schema-color-border);
    }

    .schema-view .schema-view-modeswitch,
    .schema-view .schema-tabs-header,
    .schema-view .schema-button-bar-buttons {
        max-width: 100%;
        overflow-x: auto;
    }

    .schema-view .schema-surface-card,
    .schema-view .schema-surface-glass,
    .schema-view .schema-surface-boxed,
    .schema-view .schema-group,
    .schema-view .schema-section,
    .schema-view .schema-hero {
        padding: 10px;
    }
}

/* ---------- read mode display ----------------------------------
   Read-only values must not render as gray pills: empty values become invisible,
   and non-empty values inherit the host theme without a forced surface. */
.schema-view .schema-readonly {
    display: block;
    width: 100%;
    min-height: 1.5em;
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
}

.schema-view .schema-readonly:empty {
    min-height: 0;
}

/* ---------- spacing ownership ----------------------------------
   Layout gaps come from schema/root/group gap settings. Groups should not add
   an extra vertical margin on top of parent grid/flex gaps. */
.schema-view .schema-group {
    margin-bottom: 0;
}

/* ---------- control height normalization -----------------------
   DxTextBox, DxComboBox, DxDateEdit and DxSpinEdit can render with slightly
   different root/input heights. Normalize at the SchemaView field boundary. */
.schema-view {
    --schema-control-height: 34px;
}

.schema-view .schema-field-control > * {
    box-sizing: border-box;
    min-height: var(--schema-control-height);
}

.schema-view .schema-field-control input,
.schema-view .schema-field-control select,
.schema-view .schema-field-control textarea {
    min-height: var(--schema-control-height);
}

.schema-view .schema-field-control > .dxbl-edit,
.schema-view .schema-field-control > .dxbl-text-edit,
.schema-view .schema-field-control > .dxbl-spin-edit,
.schema-view .schema-field-control > .dxbl-combobox,
.schema-view .schema-field-control > .dxbl-date-edit {
    height: var(--schema-control-height);
    min-height: var(--schema-control-height);
}

.schema-view .schema-field-control .dxbl-text-edit-input:not(textarea),
.schema-view .schema-field-control .dxbl-edit input,
.schema-view .schema-field-control .dxbl-text-edit input {
    height: calc(var(--schema-control-height) - 2px);
    min-height: calc(var(--schema-control-height) - 2px);
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--schema-control-height) - 2px);
}

.schema-view .schema-field-control > .dxbl-edit-btn,
.schema-view .schema-field-control > .dxbl-btn,
.schema-view .schema-field-control > button {
    min-height: calc(var(--schema-control-height) - 2px);
}

.schema-view .schema-field-control > .dxbl-spin-edit {
    overflow: hidden;
}

.schema-view .schema-field-control .dxbl-spin-edit .dxbl-edit-btn,
.schema-view .schema-field-control .dxbl-spin-edit .dxbl-btn,
.schema-view .schema-field-control .dxbl-spin-edit button {
    min-height: 0;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

.schema-view .schema-field-control textarea {
    min-height: max(var(--schema-control-height), 4.5em);
}

.schema-view .schema-field-control > .dxbl-memo-edit {
    height: auto;
    min-height: var(--schema-field-control-min-height, max(var(--schema-control-height), 4.5em));
}

.schema-view .schema-field-control .dxbl-memo-edit textarea,
.schema-view .schema-field-control .dxbl-memo-edit textarea.dxbl-text-edit-input {
    height: 100%;
    min-height: var(--schema-field-control-min-height, max(var(--schema-control-height), 4.5em));
    padding: 6px 8px;
    line-height: 1.4;
}

/* ---------- renderer variable bridge ---------------------------
   Renderers may provide schema values through --schema-* variables only.
   The visual behavior remains centralized here so themes can override it. */
.schema-view {
    background-image: var(--schema-background-image, none);
    background-position: var(--schema-background-position, center);
    background-size: var(--schema-background-size, cover);
}

.schema-view .schema-view-body {
    max-width: var(--schema-body-max-width, none);
    padding: var(--schema-body-padding, 0);
}

.schema-view .schema-root-layout,
.schema-view .schema-root-groups,
.schema-view .schema-tab-body,
.schema-view .schema-group-body,
.schema-view .schema-layout-body,
.schema-view .schema-section-body,
.schema-view .schema-hero-body {
    display: var(--schema-layout-display, grid);
    grid-template-columns: repeat(var(--schema-layout-columns, 12), minmax(0, 1fr));
    flex-direction: var(--schema-layout-direction, column);
    gap: var(--schema-layout-gap, 12px);
    align-items: start;
}

.schema-view .schema-grid-cell,
.schema-view .schema-field,
.schema-view .schema-action,
.schema-view .schema-button-bar,
.schema-view .schema-child-grid,
.schema-view .schema-tabs,
.schema-view .schema-viewitem,
.schema-view .schema-label,
.schema-view .schema-spacer,
.schema-view .schema-separator,
.schema-view .schema-image,
.schema-view .schema-visual,
.schema-view .schema-text-block,
.schema-view .schema-html-block,
.schema-view .schema-alert,
.schema-view .schema-badge,
.schema-view .schema-metric,
.schema-view .schema-link,
.schema-view .schema-icon-block,
.schema-view .schema-section,
.schema-view .schema-hero,
.schema-view .schema-empty,
.schema-view .schema-group,
.schema-view .schema-layout-container {
    grid-column: var(--schema-grid-column, auto);
    grid-row: var(--schema-grid-row, auto);
}

.schema-view .schema-layout-container {
    padding: var(--schema-layout-padding, 0);
}

.schema-view .schema-group-header-collapsible {
    cursor: pointer;
}

.schema-view .schema-group[style*="--schema-group-bg"] {
    background: var(--schema-group-bg);
}

.schema-view .schema-group[style*="--schema-group-border"] {
    border: var(--schema-group-border);
}

.schema-view .schema-group[style*="--schema-group-radius"] {
    border-radius: var(--schema-group-radius);
}

.schema-view .schema-group[style*="--schema-group-padding"] {
    padding: var(--schema-group-padding);
}

.schema-view .schema-group[style*="--schema-group-margin"] {
    margin: var(--schema-group-margin);
}

.schema-view .schema-group[style*="--schema-group-shadow"] {
    box-shadow: var(--schema-group-shadow);
}

.schema-view .schema-group[style*="--schema-group-color"] {
    color: var(--schema-group-color);
}

.schema-view .schema-button-bar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--schema-button-bar-gap, 8px);
}

.schema-view .schema-spacer,
.schema-view .schema-empty {
    min-height: var(--schema-item-height, 0);
}

.schema-view .schema-viewitem {
    height: var(--schema-item-height, auto);
}

.schema-view .schema-image {
    width: var(--schema-image-width, auto);
    height: var(--schema-image-height, auto);
    max-width: var(--schema-image-max-width, 100%);
    max-height: var(--schema-image-max-height, none);
}

.schema-view .schema-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: var(--schema-image-max-height, none);
    object-fit: var(--schema-image-fit, cover);
}

.schema-view .schema-text-block {
    text-align: var(--schema-text-align, start);
}

.schema-view .schema-hero {
    background-image: var(--schema-hero-image, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.schema-view .schema-visual {
    min-height: var(--schema-visual-height, 260px);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    color: var(--schema-color-muted);
    background-image: var(--schema-visual-image, none);
    background-repeat: no-repeat;
    background-position: var(--schema-visual-position, center);
    background-size: var(--schema-visual-fit, contain);
    opacity: var(--schema-visual-opacity, .1);
    pointer-events: none;
    user-select: none;
}

.schema-view .schema-visual-text,
.schema-view .schema-visual-icon {
    font-size: var(--schema-visual-size, clamp(72px, 12vw, 160px));
    line-height: 1;
    font-weight: 800;
}

.schema-view .schema-visual-detail-image,
.schema-view .schema-visual-watermark {
    align-self: stretch;
}

.schema-view .schema-field {
    opacity: var(--schema-field-opacity, 1);
    pointer-events: var(--schema-field-pointer-events, auto);
    font-weight: var(--schema-field-font-weight, inherit);
    font-style: var(--schema-field-font-style, inherit);
    text-decoration: var(--schema-field-text-decoration, none);
}

.schema-view .schema-field[style*="--schema-field-bg"] {
    background: var(--schema-field-bg);
}

.schema-view .schema-field[style*="--schema-field-color"] {
    color: var(--schema-field-color);
}

.schema-view .schema-field-label-left .schema-field-label,
.schema-view .schema-field-label-right .schema-field-label {
    flex: 0 0 auto;
    min-width: var(--schema-field-label-width, 120px);
}

.schema-view .schema-field-label-left .schema-field-control,
.schema-view .schema-field-label-right .schema-field-control {
    flex: var(--schema-field-control-flex, 1 1 auto);
    min-width: 0;
}

.schema-view .schema-field-control {
    width: var(--schema-field-control-width, auto);
    max-width: 100%;
    min-height: var(--schema-field-control-min-height, auto);
}