/* ══════════════════════════════════════════════════════════════════════════ ElephantSqlDB · Query Dashboard · Scoped Dark Theme ────────────────────────────────────────────────────────────────────────── ALL rules are gated behind body.db-dark-page which is added to ONLY while the /query-dashboard route is active (QueryDashboardLayout injects it on mount and removes it on dispose). This file has ZERO effect on any other page or component. ══════════════════════════════════════════════════════════════════════════ */ /* ── Page background (html + body) ─────────────────────────────────────── */ html.db-dark-page, body.db-dark-page { background-color: #0a0a14 !important; color: #ccd; font-family: 'Segoe UI', system-ui, sans-serif; overflow-x: hidden; } /* ── Strip Blazor default layout chrome ─────────────────────────────────── */ /* MainLayout.razor wraps pages in: div.page > main > article.content.px-4 */ body.db-dark-page div.page, body.db-dark-page div.page > main, body.db-dark-page div.page > main > article, body.db-dark-page .content, body.db-dark-page .content.px-4 { background: transparent !important; padding: 0 !important; margin: 0 !important; max-width: none !important; } /* Hide the default Blazor sidebar (NavMenu) on the dashboard page */ body.db-dark-page div.sidebar, body.db-dark-page div.top-row { display: none !important; } /* ── Radzen form element overrides (dashboard page only) ────────────────── */ /* and

*/
body.db-dark-page input[type=text],
body.db-dark-page input[type=search],
body.db-dark-page textarea {
    background-color: #0e0e1a !important;
    border-color: #252535 !important;
    color: #dde !important;
}
body.db-dark-page input[type=text]:focus,
body.db-dark-page textarea:focus {
    border-color: rgba(255, 79, 31, 0.27) !important;
    outline: none !important;
}

/* Radzen Dropdown */
body.db-dark-page .rz-dropdown,
body.db-dark-page .rz-dropdown-panel {
    background: #181828 !important;
    border-color: #252535 !important;
    color: #aab !important;
}
body.db-dark-page .rz-dropdown-item:hover,
body.db-dark-page .rz-list-item:hover {
    background: #22223a !important;
    color: #dde !important;
}

/* Radzen Button (only inside the dashboard canvas, not global) */
body.db-dark-page .db-canvas .rz-button,
body.db-dark-page .db-toolbar .rz-button {
    background: #181828 !important;
    border-color: #252535 !important;
    color: #888 !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
body.db-dark-page ::-webkit-scrollbar              { width: 6px; height: 6px; }
body.db-dark-page ::-webkit-scrollbar-track        { background: #0e0e1c; }
body.db-dark-page ::-webkit-scrollbar-thumb        { background: #2a2a3a; border-radius: 3px; }
body.db-dark-page ::-webkit-scrollbar-thumb:hover  { background: #3a3a4a; }

/* ── Blazor error UI ────────────────────────────────────────────────────── */
body.db-dark-page #blazor-error-ui {
    background: #1a0a0a;
    border-top: 1px solid #5a1515;
    color: #e08080;
}

/* ══════════════════════════════════════════════════════════════════════════
   WIDGET CARD LAYOUT
   These rules duplicate QueryWidget.razor.css but are placed here so they
   are guaranteed to apply even when Blazor's scoped-CSS bundle is stale or
   when Radzen's stylesheet wins the specificity race.
   All rules are still scoped to body.db-dark-page.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Widget shell — the floating card ───────────────────────────────────── */
body.db-dark-page .qwidget {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    background: #14141f !important;
    border: 1px solid #22223a !important;
    border-radius: 8px !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    transition: border-color .15s !important;
    min-width: 320px !important;
    /* overflow must stay visible so resize handles extend outside bounds */
    overflow: visible !important;
}
body.db-dark-page .qwidget:hover { border-color: rgba(255,79,31,.18) !important; }
body.db-dark-page .qwidget.minimized { overflow: hidden !important; }

/* ── Header bar ─────────────────────────────────────────────────────────── */
body.db-dark-page .qw-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px 0 12px !important;
    height: 42px !important;
    min-height: 42px !important;
    background: #1a1a2a !important;
    border-bottom: 1px solid #1e1e2e !important;
    border-radius: 8px 8px 0 0 !important;
    cursor: grab !important;
    user-select: none !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
body.db-dark-page .qw-header:active { cursor: grabbing !important; }

body.db-dark-page .qw-title-area {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
}
body.db-dark-page .qw-hex   { color: #FF4F1F !important; font-size: 13px !important; flex-shrink: 0 !important; }
body.db-dark-page .qw-dot   { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #2a3a2a !important; flex-shrink: 0 !important; }
body.db-dark-page .qw-dot.live { background: #3a8a3a !important; animation: liveP 3s infinite !important; }
body.db-dark-page .qw-title {
    color: #ccd !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}
body.db-dark-page .qw-controls { display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; }

body.db-dark-page .qw-viz-sel {
    background: #0e0e1a !important;
    border: 1px solid #252535 !important;
    border-radius: 4px !important;
    color: #888 !important;
    font-size: 10px !important;
    padding: 2px 5px !important;
    cursor: pointer !important;
    height: 24px !important;
}
body.db-dark-page .qw-btn {
    background: transparent !important;
    border: 1px solid #222232 !important;
    color: #555 !important;
    border-radius: 4px !important;
    width: 24px !important; height: 24px !important;
    font-size: 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .12s !important;
    flex-shrink: 0 !important;
}
body.db-dark-page .qw-btn:hover          { background: #222232 !important; color: #bbb !important; }
body.db-dark-page .qw-btn.close:hover    { background: rgba(255,79,31,.1) !important; color: #FF4F1F !important; border-color: rgba(255,79,31,.27) !important; }
body.db-dark-page .qw-btn.sql-tog        { font-size: 9px !important; }
body.db-dark-page .qw-btn.sql-tog.on     { background: rgba(255,79,31,.09) !important; border-color: rgba(255,79,31,.33) !important; color: #FF4F1F !important; }

/* ── Body flex row ───────────────────────────────────────────────────────── */
body.db-dark-page .qw-body {
    display: flex !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 0 8px 8px !important;
}

/* ── SQL pane ────────────────────────────────────────────────────────────── */
body.db-dark-page .qw-sql {
    flex-shrink: 0 !important;
    width: 0;                /* no !important — inline style must win when open */
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 0px solid #1e1e2e !important;
    transition: width .22s ease, border-right-width .22s ease !important;
}
body.db-dark-page .qw-sql.open {
    width: 38%;              /* no !important — inline style from Razor must win */
    border-right-width: 1px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body.db-dark-page .qw-sql-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    min-height: 100% !important;
}
body.db-dark-page .qw-divider {
    width: 5px !important;
    background: #2a2a3e !important;
    cursor: col-resize !important;
    flex-shrink: 0 !important;
    transition: background .15s !important;
    position: relative !important;
}
/* Widen the invisible hit target so it's easy to grab */
body.db-dark-page .qw-divider::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    left: -4px !important; right: -4px !important;
}
body.db-dark-page .qw-divider:hover { background: rgba(255,79,31,.6) !important; }

/* ── Viz pane — CRITICAL for chart sizing ───────────────────────────────── */
body.db-dark-page .qw-viz {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;   /* allows D3 container to get a real height */
    overflow: hidden !important;
}
body.db-dark-page .qw-viz-canvas {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: #090913 !important;
    border: 1px solid #181828 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
}
body.db-dark-page .qw-viz-canvas svg { display: block !important; width: 100% !important; height: 100% !important; }

/* ── Resize handles — extend outside .qwidget, need overflow:visible above ─ */
body.db-dark-page .rh-e {
    position: absolute !important;
    right: -5px !important; top: 15% !important; bottom: 15% !important;
    width: 10px !important;
    cursor: ew-resize !important;
    z-index: 20 !important;
    border-radius: 5px !important;
    background: transparent !important;
    transition: background .15s !important;
}
body.db-dark-page .rh-s {
    position: absolute !important;
    bottom: -5px !important; left: 15% !important; right: 15% !important;
    height: 10px !important;
    cursor: ns-resize !important;
    z-index: 20 !important;
    border-radius: 5px !important;
    background: transparent !important;
    transition: background .15s !important;
}
body.db-dark-page .rh-se {
    position: absolute !important;
    bottom: -5px !important; right: -5px !important;
    width: 22px !important; height: 22px !important;
    cursor: nwse-resize !important;
    z-index: 21 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #252535 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    user-select: none !important;
    transition: color .15s !important;
}
body.db-dark-page .qwidget:hover .rh-e  { background: rgba(255,79,31,.25) !important; }
body.db-dark-page .qwidget:hover .rh-s  { background: rgba(255,79,31,.25) !important; }
body.db-dark-page .qwidget:hover .rh-se { color: rgba(255,79,31,.7) !important; }

/* ── SQL block inner elements ────────────────────────────────────────────── */
body.db-dark-page .sql-block {
    background: #0f0f1c !important;
    border: 1px solid #1e1e2e !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
body.db-dark-page .sql-block-head {
    display: flex !important; align-items: center !important; gap: 6px !important;
    padding: 6px 8px !important; background: #121220 !important;
}
body.db-dark-page .sb-dot   { width: 8px !important; height: 8px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
body.db-dark-page .sb-lbl   { flex: 1 !important; color: #aab !important; font-size: 11px !important; font-weight: 500 !important; cursor: pointer !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body.db-dark-page .color-row { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 6px 8px 0 !important; margin-bottom: 8px !important; }
body.db-dark-page .swatch    { width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer !important; transition: transform .12s, border-color .12s !important; padding: 0 !important; }
body.db-dark-page .swatch:hover { transform: scale(1.2) !important; }
body.db-dark-page .swatch.sel   { border-color: #fff !important; transform: scale(1.15) !important; }
body.db-dark-page .sb-field-lbl { font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 1.1px !important; color: rgba(255,79,31,.47) !important; text-transform: uppercase !important; margin-bottom: 2px !important; margin-top: 4px !important; padding: 0 8px !important; }
body.db-dark-page .sb-nl-row { display: flex !important; gap: 4px !important; padding: 3px 8px 5px !important; }
body.db-dark-page .sb-nl { flex: 1 !important; background: #0a0a18 !important; border: 1px solid #1e1e2e !important; border-radius: 4px !important; color: #bbc !important; font-size: 10.5px !important; padding: 4px 7px !important; outline: none !important; font-family: inherit !important; min-width: 0 !important; }
body.db-dark-page .sb-gen-btn  { background: #FF4F1F !important; border: none !important; border-radius: 4px !important; color: #fff !important; font-size: 9.5px !important; font-weight: 600 !important; padding: 0 9px !important; cursor: pointer !important; flex-shrink: 0 !important; height: 26px !important; }
body.db-dark-page .sb-gen-btn:disabled { background: #3a2218 !important; color: #666 !important; cursor: default !important; }
body.db-dark-page .sb-sql-wrap { margin: 0 8px 5px !important; background: #090912 !important; border: 1px solid #1a1a28 !important; border-radius: 4px !important; height: 90px !important; overflow: hidden !important; }
body.db-dark-page .sb-sql { width: 100% !important; height: 100% !important; background: transparent !important; border: none !important; color: #9ed09e !important; font-family: 'Cascadia Code',Consolas,monospace !important; font-size: 9.5px !important; line-height: 1.65 !important; padding: 6px 9px !important; resize: none !important; outline: none !important; box-sizing: border-box !important; }
body.db-dark-page .sb-exec-row { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 8px 8px !important; }
body.db-dark-page .sb-exec-btn { flex: 1 !important; background: #182818 !important; border: 1px solid #2a4a2a !important; border-radius: 4px !important; color: #6ae06a !important; font-size: 10.5px !important; font-weight: 600 !important; height: 26px !important; cursor: pointer !important; }
body.db-dark-page .sb-exec-btn:hover    { background: #1e3c1e !important; }
body.db-dark-page .sb-exec-btn:disabled { background: #111820 !important; color: #3a5a3a !important; cursor: default !important; }
body.db-dark-page .add-series-btn { background: #1a1a2e !important; border: 1px dashed #2a2a45 !important; border-radius: 5px !important; color: #4a4a6a !important; font-size: 10.5px !important; padding: 6px !important; cursor: pointer !important; text-align: center !important; margin-top: 2px !important; width: 100% !important; display: block !important; }
body.db-dark-page .add-series-btn:hover { background: #202038 !important; color: #8888aa !important; }
body.db-dark-page .sb-meta { font-size: 9px !important; color: #3a3a55 !important; white-space: nowrap !important; }
body.db-dark-page .sb-err {
    margin: 2px 8px 4px !important;
    padding: 3px 7px !important;
    background: #2e0a0a !important;
    border: 1px solid #5a1515 !important;
    border-radius: 3px !important;
    color: #e08080 !important;
    font-size: 9.5px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* ── Canvas (from QueryDashboard.razor.css) ────────────────────────────── */
body.db-dark-page .db-canvas {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: calc(100vh - 52px) !important;
    overflow: hidden !important;
}

/* ── Tree split panel ──────────────────────────────────────────────────── */
body.db-dark-page .db-tree-panel {
    width: 288px;
    min-width: 288px;
    background: #1e1e32;
    border-right: 1px solid #2a2a44;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width .22s ease, min-width .22s ease, opacity .22s ease;
    flex-shrink: 0;
    color: #e0e0f0 !important;
}
body.db-dark-page .db-tree-panel.hidden {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    border-right: none;
}
body.db-dark-page .db-tree-panel-header {
    padding: 10px 12px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #FF4F1F;
    letter-spacing: .08em;
    border-bottom: 1px solid #252540;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Widget canvas area (right of split) ───────────────────────────────── */
body.db-dark-page .db-widget-canvas {
    position: relative !important;
    flex: 1 !important;
    min-height: calc(100vh - 52px) !important;
    background-color: #0a0a14 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px) !important;
    background-size: 38px 38px !important;
    overflow: auto !important;
}

/* ── Toolbar (from QueryDashboard.razor.css) ────────────────────────────── */
body.db-dark-page .db-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 14px !important;
    height: 52px !important;
    background: #0e0e1c !important;
    border-bottom: 1px solid #1a1a28 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2000 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
body.db-dark-page .tb-hex    { color: #FF4F1F !important; font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; }
body.db-dark-page .tb-brand  { color: #dde !important; font-weight: 600 !important; font-size: 14px !important; flex-shrink: 0 !important; }
body.db-dark-page .tb-sep    { color: #1e1e2e !important; font-size: 20px !important; flex-shrink: 0 !important; }
body.db-dark-page .tb-lbl    { font-size: 8.5px !important; letter-spacing: 1px !important; color: #333 !important; text-transform: uppercase !important; flex-shrink: 0 !important; }
body.db-dark-page .db-group  { display: flex !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important; }
body.db-dark-page .tb-sel {
    background: #181828 !important; border: 1px solid #252535 !important;
    border-radius: 4px !important; color: #aab !important;
    font-size: 11px !important; padding: 3px 7px !important;
    height: 28px !important; cursor: pointer !important;
}
body.db-dark-page .tb-btn {
    background: #181828 !important; border: 1px solid #252535 !important;
    border-radius: 4px !important; color: #888 !important;
    font-size: 10.5px !important; padding: 0 9px !important;
    height: 26px !important; cursor: pointer !important; transition: all .12s !important;
}
body.db-dark-page .tb-btn:hover    { background: #22223a !important; color: #bbb !important; }
body.db-dark-page .tb-btn:disabled { opacity: .35 !important; cursor: not-allowed !important; }
body.db-dark-page .tb-btn.danger:hover { background: #3a1010 !important; color: #e06060 !important; border-color: #5a1a1a !important; }
body.db-dark-page .tb-new-input {
    background: #0e0e1a !important; border: 1px solid rgba(255,79,31,.33) !important;
    border-radius: 4px !important; color: #dde !important;
    font-size: 11px !important; padding: 0 8px !important;
    height: 26px !important; outline: none !important; width: 160px !important;
}
body.db-dark-page .rf-badge {
    background: #182818 !important; border: 1px solid #2a4a2a !important;
    border-radius: 3px !important; color: #5a9a5a !important;
    font-size: 10px !important; padding: 2px 10px !important;
    min-width: 36px !important; text-align: center !important;
    font-family: Consolas, monospace !important; transition: all .2s !important;
}
body.db-dark-page .rf-badge.off   { background: #111120 !important; border-color: #1e1e2e !important; color: #333 !important; }
body.db-dark-page .rf-badge.flash { background: rgba(255,79,31,.1) !important; border-color: rgba(255,79,31,.4) !important; color: #FF4F1F !important; }
body.db-dark-page .tb-right { display: flex !important; align-items: center !important; gap: 7px !important; margin-left: auto !important; flex-shrink: 0 !important; }
body.db-dark-page .tb-action-btn {
    background: #FF4F1F !important; border: none !important;
    border-radius: 5px !important; color: #fff !important;
    font-size: 11px !important; font-weight: 600 !important;
    padding: 0 13px !important; height: 30px !important;
    cursor: pointer !important; transition: background .12s !important;
}
body.db-dark-page .tb-action-btn:hover    { background: #FF6A3A !important; }
body.db-dark-page .tb-action-btn:disabled { background: #3a2218 !important; color: #666 !important; cursor: not-allowed !important; }
body.db-dark-page .tb-action-btn.secondary { background: #1a1a2a !important; border: 1px solid #252535 !important; color: #888 !important; }
body.db-dark-page .tb-action-btn.secondary:hover { background: #22223a !important; color: #bbb !important; }
body.db-dark-page .tb-count { color: #2a2a3a !important; font-size: 11px !important; }

/* ── @keyframes (must be global, not scoped) ─────────────────────────────── */
@keyframes liveP { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ══════════════════════════════════════════════════════════════════════════
   CALCULATION WIDGET CARD  —  body.db-dark-page scope
   ══════════════════════════════════════════════════════════════════════════ */

body.db-dark-page .qwc-card {
    position: absolute !important;
    width: 200px !important;
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #14141f !important;
    border: 1px solid #22223a !important;
    border-radius: 8px !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    transition: border-color .15s !important;
    overflow: visible !important;
}
body.db-dark-page .qwc-card:hover { border-color: rgba(255,79,31,.2) !important; }

body.db-dark-page .qwc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px 0 10px !important;
    height: 28px !important;
    min-height: 28px !important;
    background: #1a1a2a !important;
    border-bottom: 1px solid #1e1e2e !important;
    border-radius: 8px 8px 0 0 !important;
    flex-shrink: 0 !important;
}
body.db-dark-page .qwc-label {
    color: #aab !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    cursor: pointer !important;
}
body.db-dark-page .qwc-close { background: transparent !important; border: none !important; color: #444 !important; font-size: 9px !important; cursor: pointer !important; }
body.db-dark-page .qwc-close:hover { color: #FF4F1F !important; }

body.db-dark-page .qwc-body { padding: 10px 12px 6px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
body.db-dark-page .qwc-value-row { display: flex !important; align-items: baseline !important; gap: 3px !important; }
body.db-dark-page .qwc-value { font-size: 28px !important; font-weight: 700 !important; line-height: 1 !important; }
body.db-dark-page .qwc-unit    { font-size: 11px !important; font-weight: 500 !important; opacity: .85 !important; }
body.db-dark-page .qwc-no-data { font-size: 10px !important; color: #3a3a55 !important; font-style: italic !important; }

body.db-dark-page .qwc-trend-row { display: flex !important; align-items: center !important; gap: 5px !important; }
body.db-dark-page .qwc-trend { font-size: 11px !important; font-weight: 700 !important; }
body.db-dark-page .qwc-trend.up      { color: #5DCAA5 !important; }
body.db-dark-page .qwc-trend.down    { color: #FF4F1F !important; }
body.db-dark-page .qwc-trend.neutral { color: #888 !important; }
body.db-dark-page .qwc-trend-label   { font-size: 10px !important; color: #555 !important; }

body.db-dark-page .qwc-settings-btn {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #1e1e2e !important;
    color: #444 !important;
    font-size: 10px !important;
    cursor: pointer !important;
    padding: 3px 0 !important;
    width: 100% !important;
    text-align: center !important;
    border-radius: 0 0 8px 8px !important;
}
body.db-dark-page .qwc-settings-btn:hover { background: #1a1a2a !important; color: #aab !important; }

body.db-dark-page .qwc-settings { padding: 8px 10px 4px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; border-top: 1px solid #1e1e2e !important; }
body.db-dark-page .qwc-palette-row { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; margin-bottom: 2px !important; }
body.db-dark-page .qwc-swatch { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer !important; padding: 0 !important; }
body.db-dark-page .qwc-swatch:hover { transform: scale(1.2) !important; }
body.db-dark-page .qwc-swatch.sel   { border-color: #fff !important; transform: scale(1.15) !important; }

body.db-dark-page .qwc-row { display: flex !important; align-items: center !important; gap: 5px !important; }
body.db-dark-page .qwc-lbl { font-size: 7.5px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: rgba(255,79,31,.5) !important; text-transform: uppercase !important; flex-shrink: 0 !important; width: 30px !important; }
body.db-dark-page .qwc-sel { flex: 1 !important; background: #0e0e1a !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #aab !important; font-size: 10px !important; padding: 2px 4px !important; height: 22px !important; cursor: pointer !important; }
body.db-dark-page .qwc-sel:focus { outline: none !important; border-color: rgba(255,79,31,.27) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ALERT PANEL  —  body.db-dark-page scope
   ══════════════════════════════════════════════════════════════════════════ */

body.db-dark-page .qwa-panel {
    position: absolute !important;
    width: 460px !important;
    max-height: 540px !important;
    overflow-y: auto !important;
    background: #12121e !important;
    border: 1px solid rgba(255,79,31,.33) !important;
    border-radius: 8px !important;
    z-index: 100 !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
body.db-dark-page .qwa-header { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; background: #1a1a2a !important; border-bottom: 1px solid #1e1e2e !important; }
body.db-dark-page .qwa-title  { color: #FF4F1F !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .5px !important; flex: 1 !important; }
body.db-dark-page .qwa-count  { color: #444 !important; font-size: 10px !important; }
body.db-dark-page .qwa-close  { background: transparent !important; border: none !important; color: #444 !important; font-size: 10px !important; cursor: pointer !important; }
body.db-dark-page .qwa-close:hover { color: #FF4F1F !important; }

body.db-dark-page .qwa-empty { color: #333 !important; font-size: 11px !important; padding: 12px !important; text-align: center !important; }

body.db-dark-page .qwa-item { border-left: 3px solid #252535 !important; background: #0e0e1c !important; }
body.db-dark-page .qwa-item.triggered { border-left-color: #FF4F1F !important; }
body.db-dark-page .qwa-item.disabled  { opacity: .5 !important; }

body.db-dark-page .qwa-item-head { display: flex !important; align-items: center !important; gap: 6px !important; padding: 6px 8px !important; background: #121220 !important; }
body.db-dark-page .qwa-name { flex: 1 !important; color: #ccd !important; font-size: 11px !important; font-weight: 500 !important; cursor: pointer !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body.db-dark-page .qwa-name-input { flex: 1 !important; background: #0a0a18 !important; border: 1px solid rgba(255,79,31,.33) !important; border-radius: 3px !important; color: #dde !important; font-size: 11px !important; padding: 1px 5px !important; outline: none !important; font-family: inherit !important; }
body.db-dark-page .qwa-fired { font-size: 8px !important; font-weight: 700 !important; color: #FF4F1F !important; background: rgba(255,79,31,.12) !important; border: 1px solid rgba(255,79,31,.3) !important; border-radius: 3px !important; padding: 1px 5px !important; }

body.db-dark-page .qwa-item-actions { display: flex !important; align-items: center !important; gap: 3px !important; flex-shrink: 0 !important; }
body.db-dark-page .qwa-tog { background: transparent !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #444 !important; width: 20px !important; height: 20px !important; font-size: 10px !important; cursor: pointer !important; }
body.db-dark-page .qwa-tog.on { color: #5DCAA5 !important; border-color: rgba(93,202,165,.33) !important; }
body.db-dark-page .qwa-btn { background: transparent !important; border: 1px solid #1e1e2e !important; border-radius: 3px !important; color: #444 !important; width: 20px !important; height: 20px !important; font-size: 9px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.db-dark-page .qwa-btn:hover        { background: #1e1e2e !important; color: #aab !important; }
body.db-dark-page .qwa-btn.danger:hover { background: #3a1010 !important; color: #FF4F1F !important; border-color: #5a1515 !important; }

body.db-dark-page .qwa-item-body { padding: 8px 10px 10px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; border-top: 1px solid #1e1e2e !important; }
body.db-dark-page .qwa-section-lbl { font-size: 8px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: rgba(255,79,31,.5) !important; text-transform: uppercase !important; margin-bottom: 2px !important; }

body.db-dark-page .qwa-cond-row  { display: flex !important; align-items: center !important; gap: 4px !important; flex-wrap: wrap !important; }
body.db-dark-page .qwa-bool-row  { display: flex !important; align-items: center !important; justify-content: center !important; padding: 2px 0 !important; }
body.db-dark-page .qwa-sel { background: #0e0e1a !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #aab !important; font-size: 10px !important; padding: 2px 4px !important; height: 22px !important; cursor: pointer !important; font-family: inherit !important; flex: 1 !important; min-width: 60px !important; }
body.db-dark-page .qwa-sel:focus   { outline: none !important; border-color: rgba(255,79,31,.27) !important; }
body.db-dark-page .qwa-sel-op      { max-width: 48px !important; flex: none !important; }
body.db-dark-page .qwa-sel-type    { max-width: 56px !important; flex: none !important; }
body.db-dark-page .qwa-sel-bool    { max-width: 64px !important; flex: none !important; }
body.db-dark-page .qwa-sel-party   { width: 100% !important; }
body.db-dark-page .qwa-val-input   { background: #0e0e1a !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #9ed09e !important; font-size: 10px !important; padding: 2px 5px !important; height: 22px !important; outline: none !important; flex: 1 !important; min-width: 60px !important; }

body.db-dark-page .qwa-add-cond { background: #1a1a2e !important; border: 1px dashed #2a2a45 !important; border-radius: 4px !important; color: #4a4a6a !important; font-size: 10px !important; padding: 3px 8px !important; cursor: pointer !important; font-family: inherit !important; margin-top: 2px !important; align-self: flex-start !important; }
body.db-dark-page .qwa-add-cond:hover    { background: #202038 !important; color: #8888aa !important; }
body.db-dark-page .qwa-add-cond:disabled { opacity: .35 !important; cursor: not-allowed !important; }

body.db-dark-page .qwa-notify-row  { margin-bottom: 4px !important; }
body.db-dark-page .qwa-search-input { width: 100% !important; background: #0e0e1a !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #aab !important; font-size: 10px !important; padding: 3px 7px !important; outline: none !important; font-family: inherit !important; box-sizing: border-box !important; }
body.db-dark-page .qwa-party-chip  { display: flex !important; gap: 8px !important; align-items: center !important; background: rgba(255,79,31,.08) !important; border: 1px solid rgba(255,79,31,.2) !important; border-radius: 4px !important; padding: 3px 8px !important; margin-top: 4px !important; }
body.db-dark-page .qwa-party-chip span       { color: #ccd !important; font-size: 10px !important; }
body.db-dark-page .qwa-party-chip .qwa-party-email { color: #555 !important; font-size: 9px !important; }
body.db-dark-page .qwa-last-eval  { font-size: 9px !important; color: #3a3a55 !important; margin-top: 4px !important; }

body.db-dark-page .qwa-add-btn { width: calc(100% - 20px) !important; margin: 6px 10px !important; background: rgba(255,79,31,.08) !important; border: 1px dashed rgba(255,79,31,.3) !important; border-radius: 5px !important; color: rgba(255,79,31,.7) !important; font-size: 11px !important; font-weight: 600 !important; padding: 5px !important; cursor: pointer !important; font-family: inherit !important; }
body.db-dark-page .qwa-add-btn:hover { background: rgba(255,79,31,.15) !important; color: #FF4F1F !important; }

body.db-dark-page .qwa-party-manager { padding: 4px 10px 10px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; border-top: 1px solid #1e1e2e !important; }
body.db-dark-page .qwa-party-row     { display: flex !important; align-items: center !important; gap: 6px !important; padding: 3px 0 !important; border-bottom: 1px solid #141428 !important; }
body.db-dark-page .qwa-party-name    { flex: 1 !important; color: #aab !important; font-size: 10px !important; }
body.db-dark-page .qwa-party-email-sm { flex: 1.5 !important; color: #555 !important; font-size: 10px !important; font-style: italic !important; }
body.db-dark-page .qwa-new-party-row { display: flex !important; gap: 4px !important; align-items: center !important; margin-top: 4px !important; }
body.db-dark-page .qwa-party-input   { flex: 1 !important; background: #0e0e1a !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #aab !important; font-size: 10px !important; padding: 3px 6px !important; outline: none !important; font-family: inherit !important; height: 22px !important; }
body.db-dark-page .qwa-party-input:focus { border-color: rgba(255,79,31,.27) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ANALYSIS POPUP CARD  —  body.db-dark-page scope
   ══════════════════════════════════════════════════════════════════════════ */
body.db-dark-page .qwanalysis-card {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    background: #14141f !important;
    border: 1px solid rgba(255,79,31,.35) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.6) !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    overflow: hidden !important;
    min-width: 400px !important;
    min-height: 240px !important;
}
body.db-dark-page .qwanalysis-header { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; background: #1a1a2a !important; border-bottom: 1px solid #252535 !important; flex-shrink: 0 !important; user-select: none !important; }
body.db-dark-page .qwanalysis-title { flex: 1 !important; color: #ccd !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body.db-dark-page .qwanalysis-actions { display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; }
body.db-dark-page .qwanalysis-btn { background: transparent !important; border: 1px solid #252535 !important; border-radius: 3px !important; color: #556 !important; font-size: 11px !important; width: 22px !important; height: 22px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; }
body.db-dark-page .qwanalysis-btn:hover { background: #1e1e2e !important; color: #aab !important; }
body.db-dark-page .qwanalysis-close { background: transparent !important; border: none !important; color: #444 !important; font-size: 10px !important; width: 20px !important; height: 20px !important; cursor: pointer !important; }
body.db-dark-page .qwanalysis-close:hover { color: #FF4F1F !important; }
body.db-dark-page .qwanalysis-body { flex: 1 !important; overflow: hidden !important; position: relative !important; background: #0e0e1a !important; }
body.db-dark-page .qwanalysis-iframe { width: 100% !important; height: 100% !important; border: none !important; display: block !important; background: #fff !important; }
body.db-dark-page .qwanalysis-loading { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important; gap: 16px !important; color: #556 !important; font-size: 12px !important; }
body.db-dark-page .qwanalysis-spinner { width: 36px !important; height: 36px !important; border: 3px solid rgba(255,79,31,.15) !important; border-top-color: #FF4F1F !important; border-radius: 50% !important; animation: qwanalysis-spin .8s linear infinite !important; }
body.db-dark-page .qwanalysis-error { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 100% !important; gap: 12px !important; color: #FF4F1F !important; font-size: 12px !important; padding: 20px !important; text-align: center !important; }
body.db-dark-page .qwanalysis-retry { background: rgba(255,79,31,.1) !important; border: 1px solid rgba(255,79,31,.3) !important; border-radius: 4px !important; color: #FF4F1F !important; font-size: 11px !important; padding: 4px 12px !important; cursor: pointer !important; }
body.db-dark-page .qwanalysis-empty { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; color: #333 !important; font-size: 11px !important; font-style: italic !important; }
body.db-dark-page .qwanalysis-resize { position: absolute !important; bottom: 0 !important; right: 0 !important; width: 16px !important; height: 16px !important; cursor: se-resize !important; color: #333 !important; font-size: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.db-dark-page .sb-analyze-btn { background: rgba(59,158,255,.1) !important; border: 1px solid rgba(59,158,255,.3) !important; border-radius: 4px !important; color: #3B9EFF !important; font-size: 10px !important; font-weight: 600 !important; padding: 3px 8px !important; cursor: pointer !important; white-space: nowrap !important; }
body.db-dark-page .sb-analyze-btn:disabled { opacity: .35 !important; cursor: not-allowed !important; }
body.db-dark-page .sb-analyze-btn.busy { color: #FFB347 !important; border-color: rgba(255,179,71,.3) !important; background: rgba(255,179,71,.08) !important; }
@keyframes qwanalysis-spin { to { transform: rotate(360deg); } }

body.db-dark-page .qwanalysis-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 7px 12px !important; background: #1a1a2a !important; border-top: 1px solid #252535 !important; flex-shrink: 0 !important; }
body.db-dark-page .qwanalysis-footer-label { color: #445 !important; font-size: 10px !important; font-style: italic !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body.db-dark-page .qwanalysis-download-btn { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: rgba(59,158,255,.12) !important; border: 1px solid rgba(59,158,255,.4) !important; border-radius: 5px !important; color: #3B9EFF !important; font-size: 11px !important; font-weight: 600 !important; padding: 5px 14px !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; }
body.db-dark-page .qwanalysis-download-btn:hover { background: rgba(59,158,255,.22) !important; border-color: rgba(59,158,255,.65) !important; color: #7ec8ff !important; }

/* ── Axis field selectors ─────────────────────────────────────────────────── */
body.db-dark-page .sb-axis-row { display:flex !important; gap:8px !important; padding:5px 8px !important; background:#0e0e1a !important; border-top:1px solid #1e1e30 !important; }
body.db-dark-page .sb-axis-group { display:flex !important; align-items:center !important; gap:5px !important; flex:1 !important; }
body.db-dark-page .sb-axis-lbl { font-size:9px !important; font-weight:700 !important; color:#FF4F1F !important; letter-spacing:.6px !important; flex-shrink:0 !important; width:10px !important; }
body.db-dark-page .sb-axis-sel { flex:1 !important; background:#1a1a2a !important; border:1px solid #252535 !important; border-radius:3px !important; color:#ccd !important; font-size:10px !important; padding:2px 4px !important; height:22px !important; cursor:pointer !important; min-width:0 !important; }
body.db-dark-page .sb-axis-sel:focus { outline:none !important; border-color:rgba(255,79,31,.27) !important; }

/* ── Query timing strip ───────────────────────────────────────────────────── */
body.db-dark-page .qw-timing { display:flex !important; align-items:center !important; gap:10px !important; padding:0 8px !important; flex-shrink:0 !important; }
body.db-dark-page .qw-timing-item { display:flex !important; align-items:center !important; gap:4px !important; background:rgba(59,158,255,.08) !important; border:1px solid rgba(59,158,255,.18) !important; border-radius:3px !important; padding:2px 6px !important; white-space:nowrap !important; }
body.db-dark-page .qw-timing-lbl { font-size:9px !important; color:#3B9EFF !important; font-weight:700 !important; letter-spacing:.3px !important; flex-shrink:0 !important; }
body.db-dark-page .qw-timing-val { font-size:9.5px !important; color:#aab !important; font-family:'Courier New',monospace !important; }

/* ── Gauge mode ──────────────────────────────────────────────────────────── */
body.db-dark-page .qwc-card.gauge-mode { width:210px !important; min-height:170px !important; }
body.db-dark-page .qwc-gauge-body { padding:4px 4px 0 !important; }
body.db-dark-page .qwc-gauge-svg  { width:100% !important; display:block !important; }
body.db-dark-page .qwc-header-actions { display:flex !important; align-items:center !important; gap:3px !important; flex-shrink:0 !important; }
body.db-dark-page .qwc-mode-btn { background:transparent !important; border:1px solid #252535 !important; border-radius:3px !important; color:#445 !important; font-size:11px !important; width:18px !important; height:18px !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; }
body.db-dark-page .qwc-mode-btn:hover  { background:#1e1e2e !important; color:#aab !important; }
body.db-dark-page .qwc-mode-btn.active { background:rgba(255,79,31,.15) !important; border-color:#FF4F1F !important; color:#FF4F1F !important; }
body.db-dark-page .qwc-val-input { flex:1 !important; background:#0e0e1a !important; border:1px solid #252535 !important; border-radius:3px !important; color:#ccd !important; font-size:10px !important; padding:2px 4px !important; height:20px !important; min-width:0 !important; }

body.db-dark-page .qwc-btn { background:transparent !important; border:1px solid #222232 !important; color:#555 !important; border-radius:4px !important; width:24px !important; height:24px !important; font-size:10px !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; padding:0 !important; }
body.db-dark-page .qwc-btn:hover { background:#222232 !important; color:#bbb !important; }
body.db-dark-page .qwc-btn.close:hover { background:rgba(255,79,31,.1) !important; color:#FF4F1F !important; border-color:rgba(255,79,31,.27) !important; }
body.db-dark-page .qwc-btn.sql-tog { font-size:9px !important; }
body.db-dark-page .qwc-btn.sql-tog.on { background:rgba(255,79,31,.1) !important; border-color:rgba(255,79,31,.33) !important; color:#FF4F1F !important; }

body.db-dark-page .qwc-header { padding:0 10px 0 12px !important; height:38px !important; min-height:38px !important; gap:6px !important; cursor:grab !important; user-select:none !important; }
body.db-dark-page .qwc-header:active { cursor:grabbing !important; }
body.db-dark-page .qwc-hex { color:#FF4F1F !important; font-size:13px !important; flex-shrink:0 !important; }
body.db-dark-page .qwc-label { flex:1 !important; color:#ccd !important; font-size:11px !important; font-weight:500 !important; }
body.db-dark-page .qwc-header-actions { gap:4px !important; }

body.db-dark-page .tb-action-btn.perf-active { background:rgba(220,50,50,.18) !important; border-color:rgba(220,50,50,.5) !important; color:#e06060 !important; }