/*
    Developer-preview UI themes (see Theming/README.md).

    Everything here is scoped under html.smb-themed, which wwwroot/js/theme.js adds for every theme except the
    classless "Legacy" look (the previous hard-coded styling). Browsers without a stored preference get Fluent 2.
    Delete this file together with theme.js and the Theming folder to drop the feature.

    Palettes are ported 1:1 from doc/portal-simple-v1.html (Slate is the base set, the other themes override it).
*/

/* ---------- 1. Palettes ---------- */

html.smb-themed {
    --f-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --f-head: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --f-mono: 'JetBrains Mono', 'Ubuntu Mono', Consolas, 'Courier New', monospace;
    --c-bg: #101214;
    --c-panel: #191c1f;
    --c-panel-2: #21262a;
    --c-input: #22282c;
    --c-border: #2c3338;
    --c-border-2: #3b444a;
    --c-text: #e6edf0;
    --c-text-2: #a6b0b6;
    --c-text-3: #8b959b;
    --c-accent: #5b9bf5;
    --c-accent-hi: #8ab9f8;
    --c-accent-bg: rgba(91, 155, 245, .14);
    --c-on-accent: #08203f;
    --c-accent-solid: #5b9bf5;
    --c-accent-solid-hi: #8ab9f8;
    --c-accent-2: #b3cc4a;
    --c-ok: #57bd88;
    --c-ok-bg: rgba(87, 189, 136, .16);
    --c-warn: #e6b063;
    --c-warn-bg: rgba(230, 176, 99, .16);
    --c-dan: #e87b7b;
    --c-dan-bg: rgba(232, 123, 123, .16);
    --c-neu: #a6b0b6;
    --c-neu-bg: rgba(166, 176, 182, .12);
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-pill: 999px;
    --pad: 20px;
    --row: 13px;
    --btn-r: 4px;
    --shadow: none;
    --tile-lift: none;
    --head-w: 500;
    --head-ls: -.01em;
}

html.smb-theme-fluent {
    --f-sans: 'Segoe UI Variable', 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --f-head: 'Segoe UI Variable', 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --c-bg: #0f0f0f;
    --c-panel: #1a1a1a;
    --c-panel-2: #212121;
    --c-input: #242424;
    --c-border: #2e2e2e;
    --c-border-2: #3f3f3f;
    --c-text: #f2f2f2;
    --c-text-2: #b0b0b0;
    --c-text-3: #919191;
    --c-accent: #2899f5;
    --c-accent-hi: #63b5f8;
    --c-accent-bg: rgba(40, 153, 245, .15);
    --c-on-accent: #04203c;
    --c-accent-solid: #2899f5;
    --c-accent-solid-hi: #63b5f8;
    --c-accent-2: #c3d453;
    --c-ok: #5cc08c;
    --c-ok-bg: rgba(92, 192, 140, .16);
    --c-warn: #e8b264;
    --c-warn-bg: rgba(232, 178, 100, .16);
    --c-dan: #ec8080;
    --c-dan-bg: rgba(236, 128, 128, .16);
    --c-neu: #b0b0b0;
    --c-neu-bg: rgba(176, 176, 176, .12);
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --btn-r: 4px;
    --head-w: 600;
    --head-ls: -.005em;
}

html.smb-theme-m3 {
    --c-bg: #121414;
    --c-panel: #1a1c1c;
    --c-panel-2: #232626;
    --c-input: #232626;
    --c-border: #2f3333;
    --c-border-2: #414646;
    --c-text: #e2e4e3;
    --c-text-2: #b4bbba;
    --c-text-3: #909897;
    --c-accent: #d0bcff;
    --c-accent-hi: #e3d5ff;
    --c-accent-bg: rgba(208, 188, 255, .15);
    --c-on-accent: #2b1a52;
    --c-accent-solid: #d0bcff;
    --c-accent-solid-hi: #e3d5ff;
    --c-accent-2: #c9d96a;
    --c-ok: #6fd39b;
    --c-ok-bg: rgba(111, 211, 155, .16);
    --c-warn: #eebd75;
    --c-warn-bg: rgba(238, 189, 117, .16);
    --c-dan: #f09797;
    --c-dan-bg: rgba(240, 151, 151, .16);
    --c-neu: #b4bbba;
    --c-neu-bg: rgba(180, 187, 186, .12);
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 18px;
    --btn-r: 8px;
    --pad: 22px;
    --tile-lift: 0 1px 3px rgba(0, 0, 0, .4);
    --head-w: 400;
    --head-ls: 0;
}

html.smb-theme-galaxia {
    --c-bg: #000000;
    --c-panel: #0a0d0d;
    --c-panel-2: #121717;
    --c-input: #0f1414;
    --c-border: #1d2424;
    --c-border-2: #2d3736;
    --c-text: #f4f8f7;
    --c-text-2: #aab6b4;
    --c-text-3: #87938f;
    --c-accent: #c8d0ce;
    --c-accent-hi: #e6ebea;
    --c-accent-bg: rgba(200, 208, 206, .11);
    --c-on-accent: #0a0d0d;
    --c-accent-solid: #c8d0ce;
    --c-accent-solid-hi: #e6ebea;
    --c-accent-2: #cfe04f;
    --c-ok: #4fd6a0;
    --c-ok-bg: rgba(79, 214, 160, .14);
    --c-warn: #e8c05f;
    --c-warn-bg: rgba(232, 192, 95, .14);
    --c-dan: #ef8585;
    --c-dan-bg: rgba(239, 133, 133, .14);
    --c-neu: #aab6b4;
    --c-neu-bg: rgba(170, 182, 180, .10);
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 16px;
    --btn-r: 6px;
    --pad: 24px;
    --row: 15px;
    --head-w: 300;
    --head-ls: -.02em;
}

html.smb-theme-console {
    --c-bg: #0a0f14;
    --c-panel: #0f161e;
    --c-panel-2: #152029;
    --c-input: #111b23;
    --c-border: #1c2833;
    --c-border-2: #2b3a47;
    --c-text: #dde8ec;
    --c-text-2: #93a6b0;
    --c-text-3: #6e808a;
    --c-accent: #19c8d4;
    --c-accent-hi: #5ce0e9;
    --c-accent-bg: rgba(25, 200, 212, .12);
    --c-on-accent: #04222a;
    --c-accent-solid: #19c8d4;
    --c-accent-solid-hi: #5ce0e9;
    --c-accent-2: #f4747f;
    --c-ok: #3fc0a2;
    --c-ok-bg: rgba(63, 192, 162, .14);
    --c-warn: #d9a03f;
    --c-warn-bg: rgba(217, 160, 63, .16);
    --c-dan: #f4747f;
    --c-dan-bg: rgba(244, 116, 127, .15);
    --c-neu: #93a6b0;
    --c-neu-bg: rgba(147, 166, 176, .10);
    --r-sm: 2px;
    --r-md: 2px;
    --r-lg: 3px;
    --btn-r: 2px;
    --pad: 20px;
    --row: 12px;
    --head-w: 600;
    --head-ls: -.01em;
}

html.smb-theme-mn1 {
    --c-bg: #0b0e14;
    --c-panel: #151a24;
    --c-panel-2: #1c222e;
    --c-input: #151a24;
    --c-border: #252d3c;
    --c-border-2: #333d50;
    --c-text: #e8eaf0;
    --c-text-2: #99a2b8;
    --c-text-3: #5c6680;
    --c-accent: #16b9bd;
    --c-accent-hi: #4fd6d9;
    --c-accent-bg: rgba(22, 185, 189, .14);
    --c-on-accent: #04222a;
    --c-accent-solid: #16b9bd;
    --c-accent-solid-hi: #4fd6d9;
    --c-accent-2: #f0555f;
    --c-ok: #3fbf7f;
    --c-ok-bg: rgba(63, 191, 127, .14);
    --c-warn: #e8a33d;
    --c-warn-bg: rgba(232, 163, 61, .14);
    --c-dan: #f0555f;
    --c-dan-bg: rgba(240, 85, 95, .14);
    --c-neu: #99a2b8;
    --c-neu-bg: rgba(153, 162, 184, .10);
    --r-sm: 2px;
    --r-md: 3px;
    --r-lg: 4px;
    --btn-r: 2px;
    --pad: 20px;
    --row: 12px;
    --head-w: 600;
    --head-ls: -.005em;
}

html.smb-theme-cp77 {
    --c-bg: #0a0f11;
    --c-panel: #10181c;
    --c-panel-2: #172227;
    --c-input: #10181c;
    --c-border: #24363b;
    --c-border-2: #345058;
    --c-text: #eef4ef;
    --c-text-2: #a9bcb4;
    --c-text-3: #6f847c;
    --c-accent: #fcee0a;
    --c-accent-hi: #fff759;
    --c-accent-bg: rgba(252, 238, 10, .14);
    --c-on-accent: #111100;
    --c-accent-solid: #fcee0a;
    --c-accent-solid-hi: #fff759;
    --c-accent-2: #00f0ff;
    --c-ok: #00f0ff;
    --c-ok-bg: rgba(0, 240, 255, .14);
    --c-warn: #ff9f1c;
    --c-warn-bg: rgba(255, 159, 28, .16);
    --c-dan: #ff003c;
    --c-dan-bg: rgba(255, 0, 60, .16);
    --c-neu: #a9bcb4;
    --c-neu-bg: rgba(169, 188, 180, .10);
    --r-sm: 0;
    --r-md: 0;
    --r-lg: 0;
    --btn-r: 0;
    --pad: 20px;
    --row: 12px;
    --head-w: 700;
    --head-ls: .02em;
}

html.smb-themed.smb-branding {
    --c-accent: #16b9bd;
    --c-accent-hi: #4fd6d9;
    --c-accent-bg: rgba(16, 136, 139, .14);
    --c-accent-solid: #10888b;
    --c-accent-solid-hi: #239294;
    --c-on-accent: #ffffff;
    --c-accent-2: #b3cc4a;
}

html.smb-themed.smb-branding.smb-branding-cyan {
    --c-accent-bg: rgba(22, 185, 189, .22);
    --c-accent-solid: #16b9bd;
    --c-accent-solid-hi: #4fd6d9;
    --c-on-accent: #041b1e;
}

html.smb-themed ::selection,
html.smb-themed input.e-input::selection,
html.smb-themed textarea.e-input::selection,
html.smb-themed .e-input-group input.e-input::selection,
html.smb-themed .e-input-group.e-control-wrapper input.e-input::selection,
html.smb-themed .e-input-group textarea.e-input::selection,
html.smb-themed .e-input-group.e-control-wrapper textarea.e-input::selection,
html.smb-themed .e-float-input input::selection,
html.smb-themed .e-float-input.e-control-wrapper input::selection,
html.smb-themed .e-float-input textarea::selection,
html.smb-themed .e-float-input.e-control-wrapper textarea::selection,
html.smb-themed .e-float-input.e-small textarea::selection {
    background: rgba(255, 255, 255, .24);
    color: inherit;
}

/* ---------- 1a. CP77 flair (Night City easter egg) ---------- */

/* The yellow is the point: branding does not repaint it. */
html.smb-themed.smb-theme-cp77.smb-branding,
html.smb-themed.smb-theme-cp77.smb-branding.smb-branding-cyan {
    --c-accent: #fcee0a;
    --c-accent-hi: #fff759;
    --c-accent-bg: rgba(252, 238, 10, .14);
    --c-on-accent: #111100;
    --c-accent-solid: #fcee0a;
    --c-accent-solid-hi: #fff759;
    --c-accent-2: #00f0ff;
}

html.smb-themed.smb-theme-cp77 {
    background-image:
        linear-gradient(90deg, rgba(252, 238, 10, .045) 1px, transparent 1px),
        linear-gradient(rgba(252, 238, 10, .045) 1px, transparent 1px);
    background-size: 28px 28px;
}

html.smb-themed.smb-theme-cp77 body {
    background-color: transparent;
}

html.smb-themed.smb-theme-cp77 .smb-layout-sidebar {
    background: linear-gradient(180deg, #14201f 0%, #0a0f11 60%) !important;
    border-right: 2px solid var(--c-accent) !important;
}

html.smb-themed.smb-theme-cp77 .smb-layout-sidebar .nav-logo {
    content: url("/img/smabbler-logo-cp77.svg");
    filter: drop-shadow(0 0 6px rgba(252, 238, 10, .35));
}

html.smb-themed.smb-theme-cp77 .smb-layout-sidebar a.active {
    background: var(--c-accent) !important;
    color: var(--c-on-accent) !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

html.smb-themed.smb-theme-cp77 .smb-layout-sidebar a.active .oi {
    color: var(--c-on-accent) !important;
}

html.smb-themed.smb-theme-cp77 .smb-layout-footer {
    color: var(--c-accent) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

html.smb-themed.smb-theme-cp77 .e-btn.e-primary,
html.smb-themed.smb-theme-cp77 .e-btn.create-button.e-primary {
    box-shadow: 0 0 12px rgba(252, 238, 10, .35);
    text-transform: uppercase;
    letter-spacing: .04em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

html.smb-themed.smb-theme-cp77 .e-grid,
html.smb-themed.smb-theme-cp77 .e-dialog,
html.smb-themed.smb-theme-cp77 .useful-links-list {
    border-color: var(--c-border-2) !important;
    box-shadow: inset 0 0 0 1px rgba(252, 238, 10, .08);
}

html.smb-themed.smb-theme-cp77 .aiassistant-root .e-btn.conversation-button.selected {
    border-left-width: 4px;
    box-shadow: inset 24px 0 24px -24px rgba(252, 238, 10, .35);
}

html.smb-themed.smb-theme-cp77 .e-aiassistview .e-prompt-text {
    box-shadow: 0 0 14px rgba(252, 238, 10, .3);
}

html.smb-themed.smb-theme-cp77 ::-webkit-scrollbar-thumb {
    background: var(--c-accent) !important;
}

/* ---------- 2. Shell: body, layout, side bar ---------- */

html.smb-themed,
html.smb-themed body {
    background-color: var(--c-bg);
    color: var(--c-text);
}

html.smb-themed .title-row {
    border-color: var(--c-border-2);
}

html.smb-themed a,
html.smb-themed .btn-link,
html.smb-themed .branded-link,
html.smb-themed .material-dark-blue,
html.smb-themed .material-dark-blue-btn,
html.smb-themed .smbb-primary {
    color: var(--c-accent) !important;
}

html.smb-themed a:hover,
html.smb-themed .btn-link:hover,
html.smb-themed .branded-link:hover {
    color: var(--c-accent-hi) !important;
}

html.smb-themed .smb-layout-content.fit,
html.smb-themed .smb-layout-content.full,
html.smb-themed .smb-layout-content:has(.aiassistant-root),
html.smb-themed .main,
html.smb-themed .e-diagram {
    background-color: var(--c-bg);
    color: var(--c-text);
}

html.smb-themed .smb-layout-content.fit.transparent,
html.smb-themed .smb-layout-content.full.transparent {
    background-color: transparent;
}

html.smb-themed .smb-layout-footer {
    color: var(--c-text-3);
}

html.smb-themed .smb-layout-sidebar {
    background: var(--c-panel);
    border-right: 1px solid var(--c-border);
    width: 170px !important;
    max-width: 170px;
}

html.smb-themed .smb-layout-sidebar .logo-container {
    width: 100%;
    padding: 0 14px !important;
}

html.smb-themed .smb-layout-sidebar .smb-layout-nav-separator {
    margin: 0 8px;
}

html.smb-themed .smb-layout-sidebar .nav-link {
    color: var(--c-text-2) !important;
    border-radius: var(--r-sm);
    margin: 0 8px;
}

html.smb-themed .smb-layout-sidebar .oi {
    color: var(--c-text-2);
}

html.smb-themed .smb-layout-sidebar a.active {
    background-color: var(--c-accent-bg);
    color: var(--c-accent) !important;
}

html.smb-themed .smb-layout-sidebar a.active .oi {
    color: var(--c-accent);
}

html.smb-themed .smb-layout-sidebar a:hover {
    background-color: var(--c-panel-2);
    color: var(--c-text) !important;
}

html.smb-themed .smb-layout-nav-separator,
html.smb-themed .smb-layout-sidebar .nav-separator {
    background: var(--c-border) !important;
}

html.smb-themed .compact-user-panel-container {
    background-color: transparent;
    border-top: 1px solid var(--c-border);
    align-self: stretch;
    justify-content: flex-start;
    padding: 0 8px;
}

html.smb-themed .smb-layout-sidebar .compact-user-panel-container .e-btn.e-link {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    text-align: left;
}

html.smb-themed .compact-user-panel-container:hover {
    background-color: var(--c-panel-2);
}

html.smb-themed .compact-user-panel-container .e-ripple-element,
html.smb-themed .compact-user-panel-container .e-btn::after {
    display: none;
}

html.smb-themed .smb-layout-sidebar .compact-user-panel-container button,
html.smb-themed .smb-layout-sidebar .compact-user-panel-container .e-btn.e-link,
html.smb-themed .smb-layout-sidebar .compact-user-panel-container .e-btn.e-link:hover,
html.smb-themed .smb-layout-sidebar .compact-user-panel-container .e-btn.e-link:focus,
html.smb-themed .smb-layout-sidebar .compact-user-panel-container .e-btn.e-link:active {
    text-decoration: none !important;

    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--c-accent) !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}

html.smb-themed .smb-layout-top-menu,
html.smb-themed .e-menu-container.top-menu {
    background-color: var(--c-panel);
    border-bottom: 1px solid var(--c-border);
}

html.smb-themed ::-webkit-scrollbar-track,
html.smb-themed ::-webkit-scrollbar-track-piece,
html.smb-themed ::-webkit-scrollbar-button {
    background-color: var(--c-panel) !important;
}

html.smb-themed ::-webkit-scrollbar-thumb {
    background-color: var(--c-border-2) !important;
    border: 2px solid var(--c-panel) !important;
    border-radius: var(--r-pill);
}

html.smb-themed ::-webkit-scrollbar-button:vertical:start:decrement,
html.smb-themed ::-webkit-scrollbar-button:vertical:end:increment {
    background: var(--c-panel) !important;
}

html.smb-themed .e-fab.e-btn,
html.smb-themed .e-btn.guide-button {
    border: 1px solid transparent;
    border-radius: 20px !important;
}

html.smb-themed .e-btn.guide-button {
    margin-left: 16px;
}

html.smb-themed .e-btn.user-agreement-panel-accept-button,
html.smb-themed .e-btn.create-button.e-primary {
    background-color: var(--c-accent-solid) !important;
    border-color: var(--c-accent-solid);
    color: var(--c-on-accent) !important;
    font-weight: 400;
}

html.smb-themed .e-btn.user-agreement-panel-accept-button:hover,
html.smb-themed .e-btn.create-button.e-primary:hover,
html.smb-themed .e-btn.create-button.e-primary:focus,
html.smb-themed .e-btn.create-button.e-primary.e-active {
    background-color: var(--c-accent-solid-hi) !important;
    border-color: var(--c-accent-solid-hi);
    color: var(--c-on-accent) !important;
}

html.smb-themed .e-dropdown-popup.create-button {
    background: var(--c-panel);
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-sm);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    min-width: 260px;
}

html.smb-themed .e-dropdown-popup.create-button ul .e-item {
    color: var(--c-text);
    font-size: 13px;
}

html.smb-themed .e-dropdown-popup.create-button ul .e-item:hover,
html.smb-themed .e-dropdown-popup.create-button ul .e-item.e-focused {
    background: var(--c-panel-2);
    color: var(--c-text);
}

html.smb-themed .e-dropdown-popup.create-button ul .e-item.e-disabled {
    color: var(--c-text-3);
    font-size: 12px;
    opacity: 1;
}

html.smb-themed .user-agreement-panel {
    background: var(--c-panel);
    border-top: 1px solid var(--c-border);
    color: var(--c-text);
}

/* ---------- 2a. AI assistant ---------- */

html.smb-themed .aiassistant-root .e-btn.conversation-button,
html.smb-themed .aiassistant-root .e-btn.conversation-button.e-primary {
    color: var(--c-text) !important;
    background-color: transparent !important;
    border-color: transparent;
    text-align: left;
}

html.smb-themed .aiassistant-root .e-btn.conversation-button:hover {
    background-color: var(--c-panel-2) !important;
    color: var(--c-text) !important;
}

html.smb-themed .aiassistant-root .e-btn.conversation-button.selected,
html.smb-themed .aiassistant-root .e-btn.conversation-button.selected:hover {
    background-color: var(--c-panel-2) !important;
    color: var(--c-text) !important;
    border-left: 3px solid var(--c-accent);
    border-radius: 0 !important;
    padding-left: 9px;
    font-weight: 600;
}

html.smb-themed .es-tab-dot {
    background: var(--c-accent);
}

html.smb-themed .aiassistant-root .conversations-toolbar {
    border-bottom-color: var(--c-border);
}

html.smb-themed .aiassistant-root .conversation-button .conversation-date,
html.smb-themed .aiassistant-root .search-tool .search-icon {
    color: var(--c-text-3);
}

html.smb-themed .aiassistant-root .conversation-menu-trigger {
    color: var(--c-text-2);
}

html.smb-themed .aiassistant-root .conversation-menu-trigger:hover {
    color: var(--c-text);
}

html.smb-themed .aiassistant-root .side-panel,
html.smb-themed .aiassistant-root .details-sidebar {
    border-color: var(--c-border);
}

html.smb-themed .e-aiassistview .e-view-header .e-tbar-btn .e-tbar-btn-text,
html.smb-themed .e-aiassistview .e-view-header .e-tbar-btn .e-btn-icon {
    color: var(--c-text) !important;
    font-weight: 500;
}

html.smb-themed .e-aiassistview .e-view-header .e-toolbar-item .e-tbar-btn-text {
    font-size: 16px;
    font-weight: 600;
}

html.smb-themed .e-aiassistview .e-view-header,
html.smb-themed .e-aiassistview .e-view-header .e-toolbar,
html.smb-themed .e-aiassistview .e-view-header .e-toolbar-items,
html.smb-themed .e-aiassistview .e-view-header .e-toolbar-item {
    overflow: visible;
}

html.smb-themed .e-aiassistview .e-view-header .e-toolbar-item.e-active {
    position: relative;
}

html.smb-themed .e-aiassistview .e-view-header .e-toolbar-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    transform: none;
    height: 2px;
    width: calc(100% + 180px);
    background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent) 40%, transparent 100%);
}

html.smb-themed .e-aiassistview .e-prompt-container {
    margin: 10px 0;
    max-width: 65%;
}

html.smb-themed .e-aiassistview .e-prompt-text {
    background-color: var(--c-accent-solid);
    color: var(--c-on-accent);
    border-radius: 10px 10px 2px 10px;
    padding: 12px 18px;
    line-height: 1.5;

    font-size: 15px;
    font-weight: 400;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

html.smb-themed .e-aiassistview .e-output-container {
    margin: 6px 0 14px;
}

html.smb-themed .e-aiassistview .e-output-icon {
    background-color: var(--c-panel-2);
    color: var(--c-text-2);
}

html.smb-themed .e-aiassistview .e-toolbar,
html.smb-themed .e-aiassistview .e-toolbar .e-toolbar-items,
html.smb-themed .e-aiassistview .e-content-footer,
html.smb-themed .e-aiassistview .e-prompt-toolbar {
    background-color: transparent !important;
    border: none;
    border-radius: 0;
}

html.smb-themed .e-aiassistview .e-content-footer .e-toolbar {
    width: auto !important;
}

html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn,
html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn .e-tbar-btn-text,
html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn .e-icons {
    color: var(--c-text-2) !important;
    font-size: 12px;
}

html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn {
    padding: 4px 12px 4px 8px !important;
    border-radius: var(--r-sm);
    min-height: 28px;
    overflow: visible;
}

html.smb-themed .e-aiassistview .e-toolbar-item.response-details-item {
    overflow: visible;
    min-width: fit-content;
}

html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn:hover,
html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn:hover .e-tbar-btn-text,
html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn:hover .e-icons {
    color: var(--c-accent) !important;
    background-color: var(--c-accent-bg) !important;
}

html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn:hover .e-tbar-btn-text,
html.smb-themed .e-aiassistview .response-details-item .e-tbar-btn:hover .e-icons {
    background-color: transparent !important;
}

html.smb-themed .e-aiassistview .response-meta,
html.smb-themed .e-aiassistview .response-meta-entry:not(:last-child)::after {
    color: var(--c-text-3);
}

html.smb-themed .e-aiassistview .selected-chat-response {
    background-color: var(--c-panel-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

/* Prompt box and details side panel */
html.smb-themed .aiassistant-root .prompt-wrapper {
    background: var(--c-panel-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}

html.smb-themed .aiassistant-root .hints-dropdown {
    background: var(--c-panel-2);
    border-color: var(--c-border-2);
}

html.smb-themed .aiassistant-root .footer-container > div:last-child {
    padding: 8px 0;
    color: var(--c-text-2);
}

html.smb-themed .aiassistant-root .submit-question-icon {
    color: var(--c-accent);
    transition: opacity .15s, color .15s;
}

html.smb-themed .aiassistant-root .submit-question-icon.submit-question-icon-idle {
    color: var(--c-text-3);
    opacity: .45;
    cursor: default;
}

html.smb-themed .aiassistant-root .e-btn.hints-plus-button {
    border-radius: 50% !important;
}

html.smb-themed .aiassistant-root .hint-chip {
    background: var(--c-accent-bg);
    border-color: var(--c-accent);
}

html.smb-themed .aiassistant-root .details-sidebar {
    position: relative;
}

html.smb-themed .aiassistant-root .top-buttons-container {
    position: sticky;
    top: 0;
    right: auto;
    left: auto;
    width: auto;
    background-color: var(--c-bg);
    padding: 12px 12px 6px;
    margin: -10px -10px 0;
    box-sizing: border-box;
    justify-content: flex-end;
    z-index: 5;
}

html.smb-themed .aiassistant-root .side-panel {
    width: 294px;
}

html.smb-themed .aiassistant-root .top-buttons-container .e-btn {
    color: var(--c-text-2) !important;
    border: 1px solid var(--c-border-2);
    background: var(--c-panel) !important;
}

html.smb-themed .aiassistant-root .top-buttons-container .e-btn:hover {
    color: var(--c-text) !important;
    background-color: var(--c-panel-2) !important;
}

html.smb-themed .aiassistant-root .details-right-header-text {
    font-size: 16px;
}

html.smb-themed .aiassistant-root .details-container .empty-responses-state {
    height: auto;
    justify-content: flex-start;
    padding: 24px 12px;
    color: var(--c-text-2);
}

html.smb-themed .aiassistant-root .empty-responses-title {
    color: var(--c-text);
}

html.smb-themed .aiassistant-root .empty-responses-description,
html.smb-themed .aiassistant-root .empty-state-description {
    color: var(--c-text-2);
}

html.smb-themed .aiassistant-root .section-item {
    border-bottom-color: var(--c-border);
}

html.smb-themed .aiassistant-root .conversation-summary {
    color: var(--c-text-2);
    border-color: var(--c-border-2);
    border-radius: var(--r-sm);
    background: var(--c-panel);
}

html.smb-themed .aiassistant-root .details-header {
    background: var(--c-bg);
}

html.smb-themed .aiassistant-root .summary-name { color: var(--c-text); }
html.smb-themed .aiassistant-root .summary-sep { color: var(--c-text-3); }
html.smb-themed .aiassistant-root .summary-status { background: var(--c-text-3); }
html.smb-themed .aiassistant-root .summary-status-active { background: var(--c-ok); }
html.smb-themed .aiassistant-root .summary-status-sleeping { background: var(--c-warn); }
html.smb-themed .aiassistant-root .summary-status-inactive { background: var(--c-dan); }

html.smb-themed .aiassistant-root .response-details-link {
    color: var(--c-accent);
}

html.smb-themed .aiassistant-root .response-details-link:hover {
    color: var(--c-accent-hi);
}

html.smb-themed .aiassistant-root .response-details-count {
    background: var(--c-accent-bg);
    color: var(--c-accent);
}

html.smb-themed .aiassistant-root .details-title { color: var(--c-text); }
html.smb-themed .aiassistant-root .details-total,
html.smb-themed .aiassistant-root .details-query-count,
html.smb-themed .aiassistant-root .details-result-row,
html.smb-themed .aiassistant-root .details-empty { color: var(--c-text-3); }
html.smb-themed .aiassistant-root .details-queries { border-bottom-color: var(--c-border); }
html.smb-themed .aiassistant-root .details-queries-label,
html.smb-themed .aiassistant-root .details-result-label { color: var(--c-text-3); }
html.smb-themed .aiassistant-root .details-query-row { color: var(--c-text-2); border-radius: var(--r-sm); }
html.smb-themed .aiassistant-root .details-query-row:hover { background: var(--c-panel-2); }
html.smb-themed .aiassistant-root .details-query-row.active { background: var(--c-accent-bg); border-color: var(--c-accent); color: var(--c-text); }
html.smb-themed .aiassistant-root .details-query-badge { border-radius: var(--r-sm); }
html.smb-themed .aiassistant-root .details-query-badge-all { color: var(--c-text-2); background: var(--c-neu-bg); }
html.smb-themed .aiassistant-root .details-query-badge-none { color: var(--c-text-3); background: var(--c-neu-bg); }
html.smb-themed .aiassistant-root .details-result-match .match-arrow { color: var(--c-accent); }
html.smb-themed .aiassistant-root .details-result-match .match-to { color: var(--c-text); }
html.smb-themed .aiassistant-root .details-result-graph { color: var(--c-accent-solid); border-radius: var(--r-sm); }
html.smb-themed .aiassistant-root .details-result-graph:hover { border-color: var(--c-accent-solid); background: var(--c-accent-bg); }
html.smb-themed .aiassistant-root .details-result { background: var(--c-panel); border-color: var(--c-border); border-radius: var(--r-md); }
html.smb-themed .aiassistant-root .details-result-file { color: var(--c-text); }
html.smb-themed .aiassistant-root .details-result-text { color: var(--c-text-2); }
html.smb-themed .aiassistant-root .details-result-text .hit { color: var(--c-text); }
html.smb-themed .aiassistant-root .details-result-footer { color: var(--c-text-2); }
html.smb-themed .aiassistant-root .confidence-high { color: var(--c-ok); background: var(--c-ok-bg); }
html.smb-themed .aiassistant-root .confidence-mid { color: var(--c-warn); background: var(--c-warn-bg); }
html.smb-themed .aiassistant-root .confidence-low { color: var(--c-dan); background: var(--c-dan-bg); }

/* The response toolbar has no items any more (Details moved into the meta line); do not leave an empty bar. */
html.smb-themed .e-aiassistview .e-output-container .e-toolbar:not(:has(.e-toolbar-item)) { display: none; }

html.smb-themed .survey-question,
html.smb-themed .survey-form-container {
    background-color: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
}

html.smb-themed .survey-question-scale-item {
    background-color: var(--c-panel-2);
    border: 1px solid var(--c-border-2);
    color: var(--c-text);
}

html.smb-themed .survey-form-container .e-input-group,
html.smb-themed .survey-form-container .e-input-group textarea {
    background-color: transparent !important;
}

html.smb-themed .survey-question-scale-item:hover {
    background-color: var(--c-accent-bg);
}

html.smb-themed .survey-question-scale-item.selected {
    background-color: var(--c-accent-solid);
}

/* ---------- 2b. Portal page wrappers ---------- */

html.smb-themed .files-container,
html.smb-themed .query-list-container,
html.smb-themed .home-dashboard-panel,
html.smb-themed .maintainer-panel-container,
html.smb-themed .history-list-container,
html.smb-themed .es-page-container,
html.smb-themed .gm-page-container,
html.smb-themed .content-box,
html.smb-themed .smabbler-windowed-page .panel-container {
    background: transparent;
}

html.smb-themed .page-container > .query-list-container,
html.smb-themed .files-container {
    padding: 20px 0 0;
}

html.smb-themed .files-container {
    gap: 14px;
}

html.smb-themed .tip-container,
html.smb-themed .all-warnings {
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}

html.smb-themed .useful-links-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 0 0 24px;
}

html.smb-themed .useful-links-container > p.fs-16 {
    margin-bottom: 16px;
}

html.smb-themed .useful-links-list {
    display: inline-block;
    min-width: 200px;
    padding: 10px 16px;
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}

html.smb-themed .useful-links-list p {
    margin: 0 0 4px;
    font-size: 14px;
}

html.smb-themed .useful-links-list p:last-child {
    margin-bottom: 0;
}

html.smb-themed .home-dashboard .e-grid {
    border: 1px solid var(--c-border);
}

html.smb-themed .home-dashboard .query-list-container,
html.smb-themed .home-dashboard-panel .query-list-container {
    padding: 0 !important;
}

html.smb-themed .home-dashboard .pl-20 {
    padding-left: 0 !important;
}

html.smb-themed .home-dashboard .e-btn.pl-20 {
    padding-left: 12px !important;
}

html.smb-themed .query-list-container .e-grid .e-rowcell .e-btn,
html.smb-themed .query-list-container .e-grid .e-rowcell .e-btn.large-rounded {
    height: 30px;
    line-height: 1;
    padding: 0 12px;
    font-size: 12px;
    border-radius: var(--btn-r) !important;
}

/* ---------- 3. Bootstrap bits still in use ---------- */

html.smb-themed .btn-primary {
    color: var(--c-on-accent);
    background-color: var(--c-accent-solid);
    border-color: var(--c-accent-solid);
    border-radius: var(--btn-r);
}

html.smb-themed .btn-primary:hover {
    background-color: var(--c-accent-solid-hi);
    border-color: var(--c-accent-solid-hi);
}

html.smb-themed .light-border {
    border-color: var(--c-border-2);
}

html.smb-themed .blue-bg-color {
    background-color: var(--c-accent-solid) !important;
}

html.smb-themed .red-color {
    color: var(--c-dan) !important;
}

html.smb-themed .red-bg-color {
    background-color: var(--c-dan) !important;
}

html.smb-themed .green-bg-color {
    background-color: var(--c-ok) !important;
}

html.smb-themed .orange-bg-color {
    background-color: var(--c-warn);
}

/* ---------- 4. Syncfusion (material-dark) ---------- */

/* Buttons */
html.smb-themed .e-btn,
html.smb-themed .e-css.e-btn,
html.smb-themed .material-dark-btn,
html.smb-themed .material-dark-blue-btn {
    background-color: var(--c-border) !important;
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
    border-radius: var(--btn-r) !important;
    box-shadow: none;
    text-transform: none;
    font-weight: 400;
}

html.smb-themed .e-btn:hover,
html.smb-themed .e-css.e-btn:hover {
    background-color: var(--c-border-2) !important;
    color: var(--c-text);
}

html.smb-themed .e-btn:focus,
html.smb-themed .e-btn:active,
html.smb-themed .e-css.e-btn:focus,
html.smb-themed .e-css.e-btn:active {
    box-shadow: none;
    outline: none;
}

html.smb-themed .e-btn.e-primary,
html.smb-themed .e-css.e-btn.e-primary,
html.smb-themed .e-fab.e-btn.e-primary {
    background-color: var(--c-accent-solid) !important;
    color: var(--c-on-accent) !important;
    border-color: var(--c-accent-solid);
    font-weight: 400;
}

html.smb-themed .e-btn.e-primary:hover,
html.smb-themed .e-btn.e-primary:focus,
html.smb-themed .e-css.e-btn.e-primary:hover,
html.smb-themed .e-fab.e-btn.e-primary:hover {
    background-color: var(--c-accent-solid-hi) !important;
    color: var(--c-on-accent) !important;
    border-color: var(--c-accent-solid-hi);
}

html.smb-themed .e-btn.e-flat,
html.smb-themed .e-btn.e-link,
html.smb-themed .e-css.e-btn.e-flat,
html.smb-themed .e-css.e-btn.e-link,
html.smb-themed .e-btn.e-icon-btn,
html.smb-themed .e-toolbar .e-tbar-btn.e-btn,
html.smb-themed .e-grid .e-toolbar .e-tbar-btn.e-btn,
html.smb-themed .e-dropdown-btn.e-btn.e-caret-hide {
    background-color: transparent !important;
    border-color: transparent;
    color: var(--c-accent);
}

html.smb-themed .e-toolbar .e-tbar-btn.e-btn,
html.smb-themed .e-grid .e-toolbar .e-tbar-btn.e-btn,
html.smb-themed .e-btn.e-icon-btn {
    color: var(--c-text-2);
}

html.smb-themed .e-btn.e-flat.e-primary,
html.smb-themed .e-css.e-btn.e-flat.e-primary {
    color: var(--c-accent) !important;
    background-color: transparent !important;
}

html.smb-themed .e-btn.e-flat:hover,
html.smb-themed .e-btn.e-link:hover,
html.smb-themed .e-btn.e-flat.e-primary:hover {
    background-color: var(--c-accent-bg) !important;
    color: var(--c-accent-hi) !important;
}

html.smb-themed .e-toolbar .e-tbar-btn.e-btn:hover,
html.smb-themed .e-grid .e-toolbar .e-tbar-btn.e-btn:hover {
    background-color: var(--c-panel-2) !important;
    color: var(--c-text) !important;
}

html.smb-themed .e-btn.e-outline,
html.smb-themed .e-css.e-btn.e-outline {
    background-color: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
}

html.smb-themed .e-btn.e-outline:hover {
    background-color: var(--c-panel-2);
}

html.smb-themed .e-btn.e-danger,
html.smb-themed .e-css.e-btn.e-danger,
html.smb-themed .e-btn.e-danger.red-bg-color {
    background-color: var(--c-dan) !important;
    border-color: var(--c-dan);
    color: var(--c-bg) !important;
    font-weight: 400;
}

html.smb-themed .e-btn.e-danger:hover,
html.smb-themed .e-btn.e-danger:focus,
html.smb-themed .e-css.e-btn.e-danger:hover,
html.smb-themed .e-btn.e-danger.red-bg-color:hover {
    background-color: color-mix(in srgb, var(--c-dan) 82%, white) !important;
    border-color: color-mix(in srgb, var(--c-dan) 82%, white);
    color: var(--c-bg) !important;
}

html.smb-themed .e-btn.e-warning,
html.smb-themed .e-css.e-btn.e-warning {
    background-color: var(--c-warn);
    color: #1a1a1a;
}

html.smb-themed .e-btn.e-success,
html.smb-themed .e-css.e-btn.e-success {
    background-color: var(--c-accent-solid) !important;
    border-color: var(--c-accent-solid);
    color: var(--c-on-accent) !important;
    font-weight: 400;
}

html.smb-themed .e-btn.e-success:not(.e-flat):hover,
html.smb-themed .e-css.e-btn.e-success:not(.e-flat):hover {
    background-color: var(--c-accent-solid-hi) !important;
    border-color: var(--c-accent-solid-hi);
    color: var(--c-on-accent) !important;
}

html.smb-themed .e-btn.e-flat.e-success,
html.smb-themed .e-css.e-btn.e-flat.e-success,
html.smb-themed .e-success {
    background-color: transparent !important;
    border-color: transparent;
    color: var(--c-accent) !important;
}

html.smb-themed .e-btn.e-flat.e-success:hover,
html.smb-themed .e-css.e-btn.e-flat.e-success:hover {
    background-color: var(--c-accent-bg) !important;
    color: var(--c-accent-hi) !important;
}

html.smb-themed .e-btn:disabled,
html.smb-themed .e-btn.e-disabled,
html.smb-themed .e-css.e-btn:disabled,
html.smb-themed .e-css.e-btn.e-disabled,
html.smb-themed .e-btn.e-primary:disabled,
html.smb-themed .e-btn.e-primary.e-disabled,
html.smb-themed .e-css.e-btn.e-primary:disabled,
html.smb-themed .e-css.e-btn.e-primary.e-disabled,
html.smb-themed .e-btn.e-success:disabled,
html.smb-themed .e-btn.e-success.e-disabled,
html.smb-themed .e-btn.e-danger:disabled,
html.smb-themed .e-btn.e-danger.e-disabled {
    background-color: transparent !important;
    border: 1px solid var(--c-border);
    color: var(--c-text-3) !important;
    box-shadow: none;
    opacity: .6;
}

/* Inputs */
html.smb-themed .e-input-group,
html.smb-themed .e-input-group.e-control-wrapper,
html.smb-themed .e-float-input,
html.smb-themed .e-float-input.e-control-wrapper {
    background-color: transparent;
    border-color: var(--c-border-2);
    color: var(--c-text);
}

html.smb-themed .e-input-group.e-input-focus,
html.smb-themed .e-float-input.e-input-focus {
    background-color: transparent;
}

html.smb-themed .e-input-group input.e-input,
html.smb-themed .e-input-group textarea.e-input,
html.smb-themed .e-float-input input,
html.smb-themed .e-float-input textarea,
html.smb-themed .e-input-group .e-input-group-icon {
    color: var(--c-text);
    background-color: transparent;
}

html.smb-themed .e-input-group:not(.e-disabled) .e-input-group-icon:hover {
    color: var(--c-accent);
}

html.smb-themed .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error)::after,
html.smb-themed .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error)::before,
html.smb-themed .e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error)::after,
html.smb-themed .e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error)::before {
    background: var(--c-accent);
}

html.smb-themed .e-input-group input::placeholder,
html.smb-themed .e-input-group textarea::placeholder,
html.smb-themed .e-float-input input::placeholder,
html.smb-themed .e-float-input textarea::placeholder,
html.smb-themed .e-input::placeholder,
html.smb-themed .e-textbox::placeholder {
    color: var(--c-text-3) !important;
    opacity: .85 !important;
}

html.smb-themed .e-float-input label.e-float-text,
html.smb-themed .e-float-input.e-control-wrapper label.e-float-text,
html.smb-themed .e-input-group .e-float-text {
    color: var(--c-text-3);
}

html.smb-themed .e-float-input.e-input-focus label.e-float-text,
html.smb-themed .e-float-input.e-control-wrapper.e-input-focus label.e-float-text {
    color: var(--c-accent);
}

html.smb-themed .chat-question {
    background: var(--c-panel-2) !important;
    border-radius: var(--r-lg) !important;

    padding: 6px 10px !important;
    margin: 0 !important;
}

html.smb-themed .chat-question textarea {
    field-sizing: content;
    box-sizing: border-box !important;
    height: auto;
    min-height: 30px !important;
    max-height: 168px !important;
    line-height: 1.5 !important;
    overflow-y: auto !important;
    padding: 5px 4px !important;
}

/* Dropdown popups, context menus, tooltips */
html.smb-themed .e-popup,
html.smb-themed .e-ddl.e-popup,
html.smb-themed .e-dropdownbase,
html.smb-themed .e-contextmenu-wrapper ul,
html.smb-themed .e-menu-wrapper ul,
html.smb-themed .e-contextmenu-container ul {
    background-color: var(--c-panel);
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-sm);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

html.smb-themed .e-dropdownbase .e-list-item,
html.smb-themed .e-contextmenu-wrapper ul .e-menu-item,
html.smb-themed .e-contextmenu-container ul .e-menu-item {
    background-color: var(--c-panel) !important;
    color: var(--c-text) !important;
}

html.smb-themed .e-dropdownbase .e-list-parent,
html.smb-themed .e-dropdownbase .e-content,
html.smb-themed .e-ddl.e-popup .e-content,
html.smb-themed .e-ddl.e-popup .e-dropdownbase {
    background-color: var(--c-panel) !important;
}

html.smb-themed .e-dropdownbase .e-list-item.e-hover,
html.smb-themed .e-contextmenu-wrapper ul .e-menu-item.e-focused,
html.smb-themed .e-contextmenu-container ul .e-menu-item.e-focused {
    background-color: var(--c-panel-2) !important;
    color: var(--c-text) !important;
}

html.smb-themed .e-dropdownbase .e-list-item.e-active,
html.smb-themed .e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: var(--c-accent-bg) !important;
    color: var(--c-accent) !important;
}

html.smb-themed .e-tooltip-wrap .e-tip-content,
html.smb-themed .e-tooltip-wrap {
    background-color: var(--c-panel-2);
    color: var(--c-text);
    border-color: var(--c-border-2);
}

/* Checkbox, radio, switch */
html.smb-themed .e-checkbox-wrapper .e-frame,
html.smb-themed .e-css.e-checkbox-wrapper .e-frame {
    background-color: var(--c-input);
    border-color: var(--c-border-2);
    border-radius: var(--r-sm);
}

html.smb-themed .e-checkbox-wrapper .e-frame.e-check,
html.smb-themed .e-checkbox-wrapper:hover .e-frame.e-check,
html.smb-themed .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
html.smb-themed .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--c-accent-solid);
    border-color: var(--c-accent-solid);
    color: var(--c-on-accent);
}

html.smb-themed .e-checkbox-wrapper .e-label,
html.smb-themed .e-css.e-checkbox-wrapper .e-label,
html.smb-themed .e-radio + label .e-label {
    color: var(--c-text);
}

html.smb-themed .e-radio:checked + label::before {
    border-color: var(--c-accent);
}

html.smb-themed .e-radio:checked + label::after {
    background-color: var(--c-accent);
    color: var(--c-accent);
}

html.smb-themed .e-switch-wrapper .e-switch-on,
html.smb-themed .e-css.e-switch-wrapper .e-switch-on {
    background-color: var(--c-accent-solid);
}

html.smb-themed .e-switch-wrapper .e-switch-handle.e-switch-active,
html.smb-themed .e-css.e-switch-wrapper .e-switch-handle.e-switch-active {
    background-color: var(--c-accent-solid);
}

html.smb-themed .e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on,
html.smb-themed .e-css.e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: var(--c-accent-solid);
}

html.smb-themed .e-switch-wrapper:hover .e-switch-handle.e-switch-active,
html.smb-themed .e-css.e-switch-wrapper:hover .e-switch-handle.e-switch-active {
    background-color: var(--c-accent-solid);
}

html.smb-themed .e-switch-wrapper .e-ripple-container,
html.smb-themed .e-css.e-switch-wrapper .e-ripple-container {
    background-color: transparent !important;
}

html.smb-themed .e-switch-wrapper:has(.e-switch:focus-visible) .e-ripple-container,
html.smb-themed .e-css.e-switch-wrapper:has(.e-switch:focus-visible) .e-ripple-container {
    background-color: var(--c-neu-bg) !important;
}

/* Grid, pager, toolbar */
html.smb-themed .e-grid,
html.smb-themed .e-grid .e-gridheader,
html.smb-themed .e-grid .e-gridcontent,
html.smb-themed .e-grid .e-content,
html.smb-themed .e-grid .e-table,
html.smb-themed .e-grid .e-headercontent,
html.smb-themed .e-grid .e-gridpager,
html.smb-themed .e-grid .e-toolbar,
html.smb-themed .e-grid .e-toolbar .e-toolbar-items,
html.smb-themed .e-toolbar,
html.smb-themed .e-toolbar .e-toolbar-items,
html.smb-themed .e-pager,
html.smb-themed .sf-pager {
    background-color: var(--c-panel) !important;
    color: var(--c-text);
    border-color: var(--c-border);
}

html.smb-themed .e-grid {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
}

html.smb-themed .e-grid .e-headercell,
html.smb-themed .e-grid .e-detailheadercell,
html.smb-themed .e-grid .e-columnheader {
    background-color: var(--c-panel) !important;
    color: var(--c-text-3);
    border-color: var(--c-border);
    font-weight: 400;
}

html.smb-themed .e-grid .e-gridheader {
    border-bottom: 1px solid var(--c-border);
}

html.smb-themed .e-grid .e-headercelldiv,
html.smb-themed .e-grid .e-headercell .e-headertext,
html.smb-themed .e-grid .e-headercell .e-sortfilterdiv,
html.smb-themed .e-grid .e-headercell .e-filtermenudiv {
    background-color: transparent;
    color: var(--c-text-3);
}

html.smb-themed .e-grid .e-rowcell,
html.smb-themed .e-grid .e-detailrowcollapse,
html.smb-themed .e-grid .e-detailrowexpand,
html.smb-themed .e-grid .e-detailindentcell,
html.smb-themed .e-grid .e-emptyrow td {
    background-color: var(--c-panel);
    color: var(--c-text);
    border-color: var(--c-border);
}

html.smb-themed .e-grid .e-altrow .e-rowcell,
html.smb-themed .e-grid .e-altrow {
    background-color: var(--c-panel);
}

html.smb-themed .e-grid .e-row:hover .e-rowcell,
html.smb-themed .e-grid .e-row:hover .e-detailrowcollapse,
html.smb-themed .e-grid .e-row:hover .e-detailrowexpand,
html.smb-themed .e-grid .e-row:hover .e-detailindentcell,
html.smb-themed .e-grid.e-gridhover tr.e-row:hover .e-rowcell,
html.smb-themed .e-grid.e-gridhover tr.e-row:hover .e-detailrowcollapse,
html.smb-themed .e-grid.e-gridhover tr.e-row:hover .e-detailrowexpand {
    background-color: var(--c-panel-2) !important;
    color: var(--c-text) !important;
}

html.smb-themed .e-grid td.e-active,
html.smb-themed .e-grid .e-row.e-active .e-rowcell {
    background-color: var(--c-accent-bg) !important;
    color: var(--c-text);
}

html.smb-themed .e-grid .e-icons,
html.smb-themed .e-toolbar .e-icons,
html.smb-themed .e-grid .e-toolbar .e-tbar-btn .e-tbar-btn-text,
html.smb-themed .e-grid .e-toolbar .e-tbar-btn-text {
    color: var(--c-text-2);
}

html.smb-themed .e-grid .e-toolbar .e-tbar-btn,
html.smb-themed .e-toolbar .e-tbar-btn,
html.smb-themed .e-toolbar .e-toolbar-item .e-tbar-btn {
    background-color: transparent;
}

html.smb-themed .e-grid .e-toolbar .e-tbar-btn:hover,
html.smb-themed .e-toolbar .e-tbar-btn:hover {
    background-color: var(--c-panel-2);
}

html.smb-themed .e-grid .e-gridpager.e-pager,
html.smb-themed .e-pager.e-control {
    background-color: var(--c-panel) !important;
    border-color: var(--c-border);
}

html.smb-themed .e-pager .e-numericitem,
html.smb-themed .e-pager .e-pagercontainer,
html.smb-themed .e-pager div.e-icons,
html.smb-themed .e-pager .e-pagesizes,
html.smb-themed .e-pager .e-parentmsgbar,
html.smb-themed .e-pager .e-pagermsgdiv,
html.smb-themed .e-pager .e-pagerconstant,
html.smb-themed .e-pager .e-pagercontainer > .e-icons {
    background-color: transparent !important;
    color: var(--c-text-2);
    border-color: var(--c-border);
}

html.smb-themed .e-pager .e-pagercontainer {
    display: inline-flex;
    align-items: center;
    margin: 9px 6px 9px 18px;
}

html.smb-themed .e-pager .e-pagercontainer .e-icons {
    margin-top: 0;
}

html.smb-themed .e-pager .e-pagercontainer,
html.smb-themed .e-pager .e-pagerdropdown,
html.smb-themed .e-pager .e-pagerconstant {
    vertical-align: middle;
}

html.smb-themed .e-pager .e-pagerdropdown {
    margin: 0 0 0 12px;
    height: 32px;
}

html.smb-themed .e-pager .e-pagerconstant {
    margin: 0 0 0 8px;
}

html.smb-themed .e-pager .e-pagerdropdown input.e-input {
    text-align: center;
}

html.smb-themed .e-ddl.e-popup[style*="width: 90px"] .e-list-item {
    text-align: center;
    text-indent: 0;
    padding: 0 18px 0 0;
}

html.smb-themed .e-pager .e-numericitem {
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    vertical-align: middle;
}

html.smb-themed .e-pager .e-np,
html.smb-themed .e-pager .e-pp,
html.smb-themed .e-pager .e-np:hover,
html.smb-themed .e-pager .e-pp:hover {
    border-color: transparent !important;
    background-color: transparent !important;
    vertical-align: middle;
    height: 27px;
    line-height: 8px;
    padding: 4px 6px 13px !important;
}

html.smb-themed .e-pager .e-numericitem:hover {
    background-color: var(--c-panel-2) !important;
    color: var(--c-text);
}

html.smb-themed .e-pager .e-currentitem,
html.smb-themed .e-pager .e-currentitem:hover {
    background-color: transparent !important;
    border-color: var(--c-accent) !important;
    color: var(--c-accent) !important;
    box-shadow: none !important;
}

html.smb-themed .e-grid .e-filterbarcell,
html.smb-themed .e-grid .e-filterbarcell .e-input-group {
    background-color: var(--c-panel-2);
    border-color: var(--c-border);
}

html.smb-themed .e-grid .group-row > td,
html.smb-themed .e-grid .group-row .e-rowcell,
html.smb-themed .e-grid .group-row .e-detailrowcollapse,
html.smb-themed .e-grid .group-row .e-detailrowexpand {
    background-color: var(--c-panel-2) !important;
}

html.smb-themed .group-members-grid .e-grid,
html.smb-themed .group-members-grid .e-grid .e-gridcontent,
html.smb-themed .group-members-grid .e-grid .e-content,
html.smb-themed .group-members-grid .e-grid .e-table,
html.smb-themed .group-members-grid .e-row > td,
html.smb-themed .group-members-grid .e-grid .e-rowcell,
html.smb-themed .group-members-grid .e-grid .e-detailrowcollapse,
html.smb-themed .group-members-grid .e-grid .e-detailrowexpand,
html.smb-themed .group-members-grid .e-grid .e-detailindentcell {
    background-color: color-mix(in srgb, var(--c-panel) 55%, var(--c-bg)) !important;
}

html.smb-themed .group-members-grid .e-grid {
    border: 0 !important;
    border-radius: 0;
}

html.smb-themed .e-grid .e-detailcell,
html.smb-themed .e-grid .e-detailrow .e-detailcell {
    background-color: transparent !important;
    border-color: var(--c-border);
}

html.smb-themed .e-grid .e-detailrow .e-detailindentcell,
html.smb-themed .e-grid .e-detailrow td.e-detailindentcell {
    background-color: var(--c-panel) !important;
    border-top: 1px solid var(--c-border) !important;
    border-right: 1px solid var(--c-border) !important;
    border-bottom: 1px solid var(--c-border) !important;
}

html.smb-themed .valid.modified:not([type=checkbox]) {
    outline-color: var(--c-accent);
}

html.smb-themed .e-input-group.e-success,
html.smb-themed .e-input-group.e-control-wrapper.e-success,
html.smb-themed .e-input-group.e-success:not(.e-float-icon-left),
html.smb-themed .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
html.smb-themed .e-input-group.e-float-icon-left.e-success .e-input-in-wrap,
html.smb-themed .e-float-input.e-success input,
html.smb-themed .e-float-input.e-success textarea,
html.smb-themed .e-float-input.e-control-wrapper.e-success input,
html.smb-themed .e-float-input.e-control-wrapper.e-success textarea,
html.smb-themed .e-input.e-success,
html.smb-themed .e-input.e-success:focus,
html.smb-themed .e-input-group.e-success input.e-input,
html.smb-themed .e-input-group.e-control-wrapper.e-success input.e-input {
    border-bottom-color: var(--c-accent) !important;
}

html.smb-themed .e-input-group.e-success::before,
html.smb-themed .e-input-group.e-success::after,
html.smb-themed .e-input-group.e-control-wrapper.e-success::before,
html.smb-themed .e-input-group.e-control-wrapper.e-success::after,
html.smb-themed .e-float-input.e-success .e-float-line::before,
html.smb-themed .e-float-input.e-success .e-float-line::after,
html.smb-themed .e-float-input.e-control-wrapper.e-success .e-float-line::before,
html.smb-themed .e-float-input.e-control-wrapper.e-success .e-float-line::after {
    background: var(--c-accent) !important;
}

html.smb-themed .e-float-input.e-success label.e-float-text,
html.smb-themed .e-float-input.e-control-wrapper.e-success label.e-float-text {
    color: var(--c-text-2);
}

/* Dialogs */
html.smb-themed .e-dialog,
html.smb-themed .api-key-roll-modal div.e-dialog {
    background-color: var(--c-panel) !important;
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-lg);
    box-shadow: var(--tile-lift);
}

html.smb-themed .e-dialog .e-dlg-header-content,
html.smb-themed .e-dialog .e-dlg-content,
html.smb-themed .e-dialog .e-footer-content {
    background-color: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}

html.smb-themed .e-dialog .e-dlg-header,
html.smb-themed .e-dialog .e-dlg-header * {
    color: var(--c-text);
}

html.smb-themed .e-dlg-overlay {
    background-color: rgba(0, 0, 0, .6);
}

/* Cards, badges, tabs, breadcrumbs, toasts */
html.smb-themed .e-card {
    background-color: var(--c-panel);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--tile-lift);
}

html.smb-themed .e-card .e-card-header,
html.smb-themed .e-card .e-card-header .e-card-header-title,
html.smb-themed .e-card .e-card-content {
    color: var(--c-text);
    background-color: transparent;
}

html.smb-themed .e-card .e-card-sub-title {
    color: var(--c-text-3);
}

html.smb-themed .e-badge,
html.smb-themed .e-chip-list .e-chip {
    background-color: var(--c-panel-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    border-radius: var(--r-pill);
}

html.smb-themed .e-chip-list .e-chip:hover,
html.smb-themed .select-chips .e-chip:hover {
    background-color: var(--c-accent-bg) !important;
    color: var(--c-accent) !important;
    border-color: var(--c-accent);
}

html.smb-themed .e-chip-list .e-chip.e-active,
html.smb-themed .select-chips .e-chip-list .e-chip.e-active {
    background-color: var(--c-accent-solid) !important;
    color: var(--c-on-accent) !important;
    border-color: var(--c-accent-solid);
}

html.smb-themed .e-chip-list .e-chip.e-active:hover,
html.smb-themed .select-chips .e-chip-list .e-chip.e-active:hover {
    background-color: var(--c-accent-solid-hi) !important;
    color: var(--c-on-accent) !important;
}

html.smb-themed .e-badge.e-badge-primary {
    background-color: var(--c-accent-solid);
    color: var(--c-on-accent);
}

html.smb-themed .e-badge.e-badge-success {
    background-color: var(--c-ok-bg);
    color: var(--c-ok);
}

html.smb-themed .e-badge.e-badge-warning {
    background-color: var(--c-warn-bg);
    color: var(--c-warn);
}

html.smb-themed .e-badge.e-badge-danger {
    background-color: var(--c-dan-bg);
    color: var(--c-dan);
}

html.smb-themed .e-badge.e-badge-info,
html.smb-themed .e-badge.e-badge-secondary {
    background-color: var(--c-neu-bg);
    color: var(--c-neu);
}

html.smb-themed .e-tab .e-tab-header,
html.smb-themed .e-tab .e-tab-header .e-toolbar-items,
html.smb-themed .e-tab .e-content {
    background-color: transparent;
    border-color: var(--c-border);
}

html.smb-themed .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
html.smb-themed .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
html.smb-themed .e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
    color: var(--c-text-2);
}

html.smb-themed .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
html.smb-themed .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
html.smb-themed .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--c-accent);
}

html.smb-themed .e-tab .e-tab-header .e-indicator {
    background-color: var(--c-accent);
}

html.smb-themed .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text,
html.smb-themed .e-breadcrumb .e-breadcrumb-separator {
    color: var(--c-text-3);
}

html.smb-themed .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text,
html.smb-themed .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
    color: var(--c-accent) !important;
}

html.smb-themed .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
    color: var(--c-text);
}

html.smb-themed .e-toast-container .e-toast {
    background-color: var(--c-panel-2);
    color: var(--c-text);
    border: 1px solid var(--c-border-2);
    border-radius: var(--r-lg);
    overflow: hidden;
}

html.smb-themed .e-toast-container .e-toast.e-toast-success {
    background-image: linear-gradient(var(--c-ok-bg), var(--c-ok-bg));
    border-color: color-mix(in srgb, var(--c-ok) 35%, transparent);
}

html.smb-themed .e-toast-container .e-toast.e-toast-info {
    background-image: linear-gradient(var(--c-accent-bg), var(--c-accent-bg));
    border-color: color-mix(in srgb, var(--c-accent) 35%, transparent);
}

html.smb-themed .e-toast-container .e-toast.e-toast-warning {
    background-image: linear-gradient(var(--c-warn-bg), var(--c-warn-bg));
    border-color: color-mix(in srgb, var(--c-warn) 35%, transparent);
}

html.smb-themed .e-toast-container .e-toast.e-toast-danger {
    background-image: linear-gradient(var(--c-dan-bg), var(--c-dan-bg));
    border-color: color-mix(in srgb, var(--c-dan) 35%, transparent);
}

html.smb-themed .e-toast-container .e-toast:hover {
    background-color: var(--c-panel-2);
}

html.smb-themed .e-toast-container .e-toast .e-toast-progress {
    background-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
}

html.smb-themed .e-toast-container .e-toast.e-toast-success .e-toast-progress {
    background-color: color-mix(in srgb, var(--c-ok) 60%, transparent);
}

html.smb-themed .e-toast-container .e-toast.e-toast-warning .e-toast-progress {
    background-color: color-mix(in srgb, var(--c-warn) 60%, transparent);
}

html.smb-themed .e-toast-container .e-toast.e-toast-danger .e-toast-progress {
    background-color: color-mix(in srgb, var(--c-dan) 60%, transparent);
}

html.smb-themed .e-toast-container .e-toast .e-toast-message .e-toast-title {
    color: var(--c-text);
    font-weight: 400;
}

html.smb-themed .e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: var(--c-text-2);
}

html.smb-themed .e-skeleton.e-skeleton-text,
html.smb-themed .e-skeleton.e-skeleton-square,
html.smb-themed .e-skeleton.e-skeleton-rectangle,
html.smb-themed .e-skeleton.e-skeleton-circle {
    background-color: var(--c-panel-2);
}

html.smb-themed .e-skeleton.e-shimmer-wave::after {
    background-image: linear-gradient(90deg, transparent calc(50% - 100px), var(--c-border-2) 50%, transparent calc(50% + 100px));
}

html.smb-themed .e-accordion {
    background-color: var(--c-panel) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg);
}

html.smb-themed .e-accordion .e-acrdn-item,
html.smb-themed .e-accordion .e-acrdn-item > .e-acrdn-panel,
html.smb-themed .e-accordion .e-acrdn-item > .e-acrdn-panel .e-acrdn-content {
    background-color: var(--c-panel) !important;
    color: var(--c-text);
}

html.smb-themed .e-accordion .e-acrdn-item > .e-acrdn-header,
html.smb-themed .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header,
html.smb-themed .e-accordion .e-acrdn-item.e-select.e-active > .e-acrdn-header,
html.smb-themed .e-accordion .e-acrdn-item .e-acrdn-header:hover,
html.smb-themed .e-accordion .e-acrdn-item .e-acrdn-header:focus {
    background-color: var(--c-panel-2) !important;
    border-color: var(--c-border) !important;
}

html.smb-themed .e-accordion .e-acrdn-item > .e-acrdn-header > .e-acrdn-header-content,
html.smb-themed .e-accordion .e-acrdn-item > .e-acrdn-header .e-toggle-icon,
html.smb-themed .e-accordion .e-acrdn-item > .e-acrdn-header .e-acrdn-header-icon {
    color: var(--c-text) !important;
}

html.smb-themed .subscription-label,
html.smb-themed .api-label {
    color: var(--c-text-2);
}

html.smb-themed .copy-text.boxed {
    background-color: var(--c-panel-2);
    border: 1px solid var(--c-border);
}

html.smb-themed .copy-text.boxed:hover {
    background-color: var(--c-border);
}

html.smb-themed .e-badge.green-bg-color {
    background-color: var(--c-ok-bg) !important;
    border-color: var(--c-ok);
    color: var(--c-ok) !important;
}

html.smb-themed .e-badge.red-bg-color {
    background-color: var(--c-dan-bg) !important;
    border-color: var(--c-dan);
    color: var(--c-dan) !important;
}

html.smb-themed .e-badge.orange-bg-color {
    background-color: var(--c-warn-bg) !important;
    border-color: var(--c-warn);
    color: var(--c-warn) !important;
}

html.smb-themed .e-badge.blue-bg-color {
    background-color: var(--c-accent-bg) !important;
    border-color: var(--c-accent);
    color: var(--c-accent) !important;
}

/* Progress, spinner, splitter, list view, accordion */
html.smb-themed .e-progressbar .e-progress-bar,
html.smb-themed .e-progress-bar {
    fill: var(--c-accent-solid);
}

html.smb-themed .e-spinner-pane .e-spinner-inner .e-path-circle,
html.smb-themed .e-spinner-pane .e-spinner-inner .e-path-arc {
    stroke: var(--c-accent);
}

html.smb-themed .e-splitter .e-split-bar {
    background-color: var(--c-border);
}

html.smb-themed .e-listview,
html.smb-themed .e-listview .e-list-item,
html.smb-themed .e-accordion,
html.smb-themed .e-accordion .e-acrdn-item,
html.smb-themed .e-accordion .e-acrdn-item .e-acrdn-header,
html.smb-themed .e-accordion .e-acrdn-item .e-acrdn-panel {
    background-color: var(--c-panel);
    color: var(--c-text);
    border-color: var(--c-border);
}

html.smb-themed .e-listview .e-list-item.e-hover,
html.smb-themed .e-listview .e-list-item.e-active {
    background-color: var(--c-accent-bg);
    color: var(--c-accent);
}