/* Structural surfaces derive from the saved palette; table and compact-rail rules stay untouched. */
body[bp-layout="vertical"] {
    --vera-workspace: color-mix(in srgb, var(--vera-text) 4%, var(--vera-canvas));
    --vera-shell-line: color-mix(in srgb, var(--vera-text) 17%, var(--vera-surface));
}
body[bp-layout="vertical"] .navbar.navbar-vertical.navbar-fixed ~ .page-wrapper,
body[bp-layout="vertical"] :is(.page-wrapper, .page-body, .page-body > main) {
    background-color: var(--vera-workspace) !important;
}
body[bp-layout="vertical"] .page-body > main.container-fluid > :is(.container-fluid, .container-xl, .container-xxl) {
    background-color: transparent !important;
}
body[bp-layout="vertical"] .vera-global-header {
    background: var(--vera-surface);
    border-bottom-color: var(--vera-shell-line);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--vera-text) 5%, transparent);
}
html:not(.ot-sidebar-compact) body #vera-sidebar {
    --vera-nav-surface: var(--vera-surface);
    border-right-color: var(--vera-shell-line);
}
html:not(.ot-sidebar-compact) body #vera-sidebar .vera-menu-search {
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--vera-text) 9%, var(--vera-surface));
}
html:not(.ot-sidebar-compact) body #vera-sidebar .vera-menu-search input {
    background: color-mix(in srgb, var(--vera-text) 2%, var(--vera-surface));
    box-shadow: none;
}
html:not(.ot-sidebar-compact) body #vera-sidebar #mobile-menu .ot-sidebar-section {
    color: color-mix(in srgb, var(--vera-text) 78%, var(--vera-surface));
}
html:not(.ot-sidebar-compact) body #vera-sidebar #mobile-menu .ot-sidebar-section::after {
    background: color-mix(in srgb, var(--vera-text) 16%, var(--vera-surface));
}
html:not(.ot-sidebar-compact) body #vera-sidebar #mobile-menu :is([aria-current="page"], .nav-link.active, .dropdown-item.active) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vera-accent) 32%, var(--vera-surface)) !important;
}
html:not(.ot-sidebar-compact) body #vera-sidebar #mobile-menu [aria-current="page"]::before {
    top: 8px;
    bottom: 8px;
    width: 3px;
}
html:not(.ot-sidebar-compact) body #vera-sidebar .vera-sidebar-controls {
    border-top-color: var(--vera-shell-line);
    background: color-mix(in srgb, var(--vera-text) 2%, var(--vera-surface));
}
html:not(.ot-sidebar-compact) body #vera-sidebar .ot-sidebar-toggle {
    color: var(--vera-text);
}
@media (min-width: 992px) {
    html:not(.ot-sidebar-compact) body .vera-global-header .vera-global-brand {
        flex-basis: 224px;
    }
    html:not(.ot-sidebar-compact) body .vera-global-header .vera-global-context {
        border-left-color: var(--vera-shell-line);
        padding-left: 24px;
    }
}
/* The dashboard uses the same white data surfaces as the registries. */
body .vera-dashboard-lab {
    gap: 20px;
}
body .vera-dashboard-lab .vera-lab-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vera-shell-line);
}
body .vera-dashboard-lab .vera-lab-section-heading {
    margin-bottom: 14px;
}
body .vera-dashboard-lab .vera-lab-card {
    border-radius: 6px;
}
body .vera-dashboard-lab .vera-lab-functional-card > header {
    border-bottom: 1px solid var(--vera-border);
    margin-bottom: 0;
}
body .vera-dashboard-lab .vera-lab-chart-grid {
    gap: 20px;
}