/* ══════════════════════════════════════════════════════════════════════════ ElephantSqlDB · Report Builder · Scoped Dark Theme ────────────────────────────────────────────────────────────────────────── ALL rules are gated behind body.rb-dark-page which is added to ONLY while the /report-builder route is active (ReportBuilderComponent injects it on first render and removes it on dispose). This file has ZERO effect on any other page or component — same gating discipline as dashboard-theme.css so the two surfaces coexist cleanly. Palette inherited from dashboard-theme.css: bg #0a0a14 surfaces #0e0e1a #14141f #181828 #1a1a2a #1e1e2e #22223a border #252535 accent #FF4F1F (primary actions, selection, brand glyph) secondary #3B9EFF (parameters, info) text #ccd / #dde (primary) · #aab / #888 (secondary) · #555/#444/#333 (dim) error #5a1515 / #e08080 ok-badge #5a9a5a on #182818 / #2a4a2a ══════════════════════════════════════════════════════════════════════════ */ /* ── Page background ────────────────────────────────────────────────────── */ html.rb-dark-page, body.rb-dark-page { background-color: #0a0a14 !important; color: #ccd; font-family: 'Segoe UI', system-ui, sans-serif; overflow-x: hidden; } /* ── Strip Blazor default layout chrome (matches dashboard scoping) ─────── */ body.rb-dark-page div.page, body.rb-dark-page div.page > main, body.rb-dark-page div.page > main > article, body.rb-dark-page .content, body.rb-dark-page .content.px-4 { background: transparent !important; padding: 0 !important; margin: 0 !important; max-width: none !important; } body.rb-dark-page div.sidebar, body.rb-dark-page div.top-row { display: none !important; } /* ── Form element overrides (mirroring dashboard-theme.css conventions) ─── */ body.rb-dark-page select { background-color: #181828; border: 1px solid #252535; color: #aab; font-family: 'Segoe UI', system-ui, sans-serif; } body.rb-dark-page select:focus { outline: none; border-color: rgba(255, 79, 31, 0.27); } body.rb-dark-page select option { background: #181828; color: #aab; } body.rb-dark-page input[type=text], body.rb-dark-page input[type=number], body.rb-dark-page input[type=search], body.rb-dark-page textarea { background-color: #0e0e1a !important; border: 1px solid #252535 !important; color: #dde !important; font-family: 'Segoe UI', system-ui, sans-serif; } body.rb-dark-page input[type=text]:focus, body.rb-dark-page input[type=number]:focus, body.rb-dark-page input[type=search]:focus, body.rb-dark-page textarea:focus { border-color: rgba(255, 79, 31, 0.27) !important; outline: none !important; } /* ── Scrollbar ──────────────────────────────────────────────────────────── */ body.rb-dark-page ::-webkit-scrollbar { width: 6px; height: 6px; } body.rb-dark-page ::-webkit-scrollbar-track { background: #0e0e1c; } body.rb-dark-page ::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 3px; } body.rb-dark-page ::-webkit-scrollbar-thumb:hover { background: #3a3a4a; } /* ── Toolbar (mirrors .db-toolbar primitives exactly) ───────────────────── */ body.rb-dark-page .rb-toolbar { display: flex !important; align-items: center !important; gap: 7px !important; padding: 0 14px !important; height: 52px !important; background: #0a0a14 !important; border-bottom: 1px solid #1a1a2a !important; } body.rb-dark-page .tb-hex { color: #FF4F1F !important; font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; } body.rb-dark-page .tb-brand { color: #dde !important; font-weight: 600 !important; font-size: 14px !important; flex-shrink: 0 !important; } body.rb-dark-page .tb-sub { color: #555 !important; font-size: 11px !important; flex-shrink: 0 !important; } body.rb-dark-page .tb-sep { color: #1e1e2e !important; font-size: 20px !important; flex-shrink: 0 !important; } body.rb-dark-page .tb-lbl { font-size: 8.5px !important; letter-spacing: 1px !important; color: #444 !important; text-transform: uppercase !important; flex-shrink: 0 !important; } body.rb-dark-page .db-group { display: flex !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important; } body.rb-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; min-width: 110px !important; } body.rb-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; display: inline-flex !important; align-items: center !important; gap: 4px !important; } body.rb-dark-page .tb-btn:hover { color: #ccd !important; border-color: rgba(255, 79, 31, 0.27) !important; } body.rb-dark-page .tb-btn.danger:hover { color: #e08080 !important; border-color: #5a1515 !important; } body.rb-dark-page .tb-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } body.rb-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.rb-dark-page .tb-action-btn:hover { background: #e84618 !important; } body.rb-dark-page .tb-action-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } body.rb-dark-page .tb-action-btn.secondary { background: #1a1a2a !important; border: 1px solid #252535 !important; color: #aab !important; } body.rb-dark-page .tb-action-btn.secondary:hover { color: #ccd !important; border-color: rgba(255, 79, 31, 0.27) !important; } body.rb-dark-page .tb-new-input { background: #0e0e1a !important; border: 1px solid #FF4F1F !important; border-radius: 4px !important; color: #dde !important; font-size: 11px !important; padding: 3px 7px !important; height: 28px !important; min-width: 140px !important; outline: none !important; } body.rb-dark-page .tb-right { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 7px !important; } body.rb-dark-page .tb-count { color: #2a2a3a !important; font-size: 11px !important; } body.rb-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; } body.rb-dark-page .rf-badge.flash { background: #2a1818 !important; border-color: #5a1515 !important; color: #e08080 !important; } body.rb-dark-page .sb-err { color: #e08080 !important; font-size: 10.5px !important; background: #2a1818 !important; border: 1px solid #5a1515 !important; padding: 2px 7px !important; border-radius: 3px !important; } /* ── 3-pane workspace ───────────────────────────────────────────────────── */ body.rb-dark-page .rb-canvas { display: grid !important; grid-template-columns: 232px 1fr 280px !important; height: calc(100vh - 52px - 28px) !important; /* toolbar + datasources strip */ background: #1e1e2e !important; /* matches canvas wrap (mockup) */ overflow: hidden !important; } /* ── Toolbox (left) ─────────────────────────────────────────────────────── */ body.rb-dark-page .rb-toolbox { background: #0e0e1a !important; border-right: 1px solid #1a1a2a !important; overflow-y: auto !important; } body.rb-dark-page .rb-toolbox .tb-search { padding: 9px 10px; border-bottom: 1px solid #1a1a2a; } body.rb-dark-page .rb-toolbox .tb-search input { width: 100% !important; padding: 5px 9px !important; background: #0e0e1a !important; border: 1px solid #252535 !important; color: #aab !important; font-size: 11px !important; border-radius: 3px !important; } body.rb-dark-page .rb-toolbox .tb-search input::placeholder { color: #333 !important; } body.rb-dark-page .tb-group-sec { padding: 4px 0; border-bottom: 1px solid #14141f; } body.rb-dark-page .tb-group-title { padding: 7px 12px; font-size: 8.5px; text-transform: uppercase; letter-spacing: 1px; color: #444; font-weight: 600; display: flex; align-items: center; justify-content: space-between; } body.rb-dark-page .tb-group-title .chev { font-size: 9px; color: #2a2a3a; } body.rb-dark-page .tb-item { padding: 6px 12px 6px 14px; display: flex; align-items: center; gap: 9px; cursor: grab; color: #888; font-size: 11px; transition: all .1s; user-select: none; } body.rb-dark-page .tb-item:hover { background: rgba(255, 79, 31, 0.08); color: #ccd; } body.rb-dark-page .tb-item:active { cursor: grabbing; } body.rb-dark-page .tb-item .ico { width: 20px; height: 20px; background: #181828; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: #FF4F1F; font-size: 11px; border: 1px solid #1e1e2e; } body.rb-dark-page .tb-item:hover .ico { background: #22223a; border-color: rgba(255, 79, 31, 0.27); } /* ── Canvas (center) ────────────────────────────────────────────────────── */ body.rb-dark-page .rb-canvas-wrap { /* Flex column with horizontal centering. The mockup centers the tabs, ruler, and page horizontally within the canvas. The previous rule relied on `margin: 0 auto` on each child, which was being defeated by an ancestor's layout. align-items:center is bulletproof — it centers every child regardless of width / overflow / parent quirks. */ display: flex !important; flex-direction: column !important; align-items: center !important; background: #1e1e2e !important; /* mockup canvas color (RGB 30,30,46) */ overflow: auto !important; padding: 18px 18px 36px !important; background-image: radial-gradient(circle at center, rgba(255, 79, 31, 0.025) 0%, transparent 60%) !important; } /* Multi-page tab strip */ body.rb-dark-page .report-tabs { display: flex; gap: 2px; max-width: 816px; margin: 0 auto 0; align-items: stretch; padding: 0 4px; } body.rb-dark-page .rt { background: #14141f; color: #888; padding: 8px 16px; font-size: 11px; border: 1px solid #1e1e2e; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; transition: all .12s; display: flex; align-items: center; gap: 6px; user-select: none; } body.rb-dark-page .rt:hover { color: #ccd; background: #181828; } body.rb-dark-page .rt.active { background: #1e1e2e; color: #FF4F1F; border-color: #252535; border-bottom: 1px solid #1e1e2e; position: relative; top: 1px; font-weight: 600; } body.rb-dark-page .rt .rt-ico { font-size: 11px; } body.rb-dark-page .rt-rename { background: #0e0e1a !important; border: 1px solid #FF4F1F !important; color: #dde !important; font-size: 11px !important; padding: 2px 5px !important; min-width: 100px !important; } body.rb-dark-page .rt-add { background: transparent; color: #444; padding: 8px 12px; font-size: 14px; border: 1px dashed #1e1e2e; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; transition: all .12s; } body.rb-dark-page .rt-add:hover { color: #FF4F1F; border-color: rgba(255, 79, 31, 0.27); } /* Ruler */ body.rb-dark-page .ruler-h { height: 16px; background: #14141f; border: 1px solid #1e1e2e; border-bottom: none; margin: 0 auto; max-width: 816px; display: flex; font-size: 8px; color: #333; } body.rb-dark-page .ruler-h span { flex: 1; border-right: 1px solid #1a1a2a; padding: 3px 0 0 3px; } /* The page — darker than the canvas wrap so it reads as "paper on a workbench". Matches the mockup, which uses #0a0a14 for the page and #1e1e2e for the surrounding canvas (the previous values were swapped). */ body.rb-dark-page .page { background: #0a0a14 !important; margin: 0 auto !important; box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.6) !important; border: 1px solid #252535 !important; position: relative !important; } /* Bands */ body.rb-dark-page .band { border-bottom: 1px dashed #2a2a3a; position: relative; padding: 14px 42px; min-height: 60px; } body.rb-dark-page .band-label { position: absolute; left: 0; top: 0; background: #14141f; color: #555; font-size: 8.5px; padding: 2px 8px; border-bottom-right-radius: 3px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; border-right: 1px solid #252535; border-bottom: 1px solid #252535; } body.rb-dark-page .band.detail { min-height: 240px; } body.rb-dark-page .band.detail .band-label { color: #FF4F1F; } body.rb-dark-page .band.group-header .band-label, body.rb-dark-page .band.group-footer .band-label { color: #3B9EFF; } body.rb-dark-page .band.report-header .band-label, body.rb-dark-page .band.report-footer .band-label { color: #aab; } /* Active drop-target band — receives new items added from the toolbox. The user picks the target by clicking on the band; defaults to Detail. */ body.rb-dark-page .band { cursor: pointer; transition: box-shadow .12s, background .12s; } body.rb-dark-page .band:hover { background: rgba(255, 79, 31, 0.015); } body.rb-dark-page .band.active-target { box-shadow: inset 4px 0 0 0 #FF4F1F; background: rgba(255, 79, 31, 0.025); } body.rb-dark-page .band.active-target .band-label { color: #FF4F1F !important; background: #1a1a2a; } /* Toolbox "ADDING TO" indicator — shows the active drop target. */ body.rb-dark-page .tb-target-indicator { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #0a0a14; border-bottom: 1px solid #1a1a2a; } body.rb-dark-page .tb-target-lbl { font-size: 8.5px; letter-spacing: 1px; color: #444; text-transform: uppercase; font-weight: 600; } body.rb-dark-page .tb-target-band { font-size: 10.5px; color: #FF4F1F; font-weight: 600; flex: 1; } /* ── Page tab close (✕) button ─────────────────────────────────────────── */ body.rb-dark-page .rt-close { margin-left: 6px; color: #444; font-size: 9.5px; padding: 0 4px; border-radius: 2px; cursor: pointer; line-height: 1; transition: all .1s; user-select: none; } body.rb-dark-page .rt-close:hover { color: #e08080; background: rgba(192, 64, 64, 0.12); } body.rb-dark-page .rt-close.disabled { color: #1e1e2e; cursor: not-allowed; pointer-events: none; } body.rb-dark-page .rt.active .rt-close { color: #888; } body.rb-dark-page .rt.active .rt-close:hover { color: #e08080; background: rgba(192, 64, 64, 0.2); } /* ── Data Source strip — column count badge on chips ───────────────────── */ body.rb-dark-page .ds-col-count { margin-left: 5px; padding: 1px 5px; background: rgba(255, 79, 31, 0.15); color: #FF4F1F; border-radius: 2px; font-size: 9.5px; font-weight: 600; } /* ── Data sources panel: extra header + NL row + status ────────────────── */ body.rb-dark-page .rb-ds-name-input { background: #0a0a14 !important; border: 1px solid #252535 !important; color: #FF4F1F !important; font-weight: 600 !important; font-size: 12px !important; padding: 3px 7px !important; height: 26px !important; border-radius: 3px !important; flex: 0 0 200px !important; } body.rb-dark-page .rb-ds-mode-toggle { display: inline-flex; align-items: center; gap: 5px; color: #888; font-size: 10.5px; margin-left: 6px; } body.rb-dark-page .rb-nl-row { display: flex; align-items: center; gap: 7px; margin: 8px 0 8px; } body.rb-dark-page .rb-nl-lbl { font-size: 8.5px; letter-spacing: 1px; color: #3B9EFF; text-transform: uppercase; font-weight: 600; flex-shrink: 0; min-width: 50px; } body.rb-dark-page .rb-nl-input { flex: 1; background: #0a0a14 !important; border: 1px solid #252535 !important; color: #dde !important; font-size: 11.5px !important; padding: 5px 9px !important; height: 28px !important; border-radius: 3px !important; } body.rb-dark-page .rb-nl-input:focus { border-color: rgba(59, 158, 255, 0.45) !important; } body.rb-dark-page .rb-ds-status { padding: 5px 0; font-size: 10.5px; border-top: 1px solid #1a1a2a; margin-top: 6px; } body.rb-dark-page .rb-ds-ok { color: #5a9a5a; } body.rb-dark-page .rb-ds-err { color: #e08080; } body.rb-dark-page .rb-ds-hint { color: #444; font-style: italic; } /* ── Preview grid ──────────────────────────────────────────────────────── */ body.rb-dark-page .rb-ds-preview { flex: 1; overflow: auto; border: 1px solid #252535; border-radius: 3px; margin-top: 4px; background: #0a0a14; } body.rb-dark-page .rb-ds-preview-table { width: 100%; border-collapse: collapse; font-size: 11px; } body.rb-dark-page .rb-ds-preview-table thead th { background: #14141f; color: #aab; padding: 5px 8px; text-align: left; border-bottom: 1px solid #FF4F1F; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; position: sticky; top: 0; } body.rb-dark-page .rb-ds-preview-table .rb-ds-coltype { display: block; color: #555; font-size: 8.5px; font-weight: 400; text-transform: lowercase; letter-spacing: 0; margin-top: 1px; } body.rb-dark-page .rb-ds-preview-table tbody td { padding: 4px 8px; color: #ccd; border-bottom: 1px solid #1a1a2a; font-family: Consolas, monospace; font-size: 10.5px; white-space: nowrap; } body.rb-dark-page .rb-ds-preview-table tbody tr:nth-child(even) td { background: #14141f; } /* ── Inspector: data source picker row with ＋ New button ───────────────── */ body.rb-dark-page .insp-ds-picker { display: flex; gap: 5px; align-items: center; width: 100%; } body.rb-dark-page .insp-ds-picker select { flex: 1; min-width: 0; } body.rb-dark-page .insp-ds-picker .tb-btn { flex-shrink: 0; white-space: nowrap; font-size: 10px !important; height: 26px !important; } /* ── Reusable Data Source Editor root + Compact mode for the inspector ── */ body.rb-dark-page .rb-dse-root { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } body.rb-dark-page .rb-dse-root.compact .rb-nl-row { gap: 4px; margin: 4px 0; } body.rb-dark-page .rb-dse-root.compact .rb-nl-lbl { min-width: 38px; font-size: 8px; } body.rb-dark-page .rb-dse-root.compact .rb-nl-input { font-size: 10.5px !important; height: 24px !important; padding: 3px 7px !important; } body.rb-dark-page .rb-dse-root.compact .rb-ds-sql { height: 110px !important; font-size: 10.5px !important; padding: 6px !important; min-height: 80px !important; } body.rb-dark-page .rb-dse-root.compact .rb-dse-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } body.rb-dark-page .rb-dse-root.compact .tb-action-btn { height: 24px !important; font-size: 10px !important; padding: 0 9px !important; } body.rb-dark-page .rb-dse-actions { display: flex; align-items: center; gap: 9px; padding: 2px 0; } /* ── Inspector: DataTable Columns editor ───────────────────────────────── */ body.rb-dark-page .insp-col-card { background: #0a0a14; border: 1px solid #252535; border-radius: 3px; padding: 6px; margin-bottom: 6px; } body.rb-dark-page .insp-col-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; } body.rb-dark-page .insp-col-row:last-child { margin-bottom: 0; } body.rb-dark-page .insp-col-row input, body.rb-dark-page .insp-col-row select { flex: 1; height: 24px !important; font-size: 10.5px !important; padding: 2px 6px !important; } /* Active state for B/I/U style toggle buttons */ body.rb-dark-page .tb-btn.active { background: rgba(255, 79, 31, 0.18) !important; border-color: rgba(255, 79, 31, 0.5) !important; color: #FF4F1F !important; } /* ── InputFile styling (override Blazor default appearance) ────────────── */ body.rb-dark-page .rb-file-input { width: 100%; color: #aab; font-size: 10.5px; } body.rb-dark-page .rb-file-input::file-selector-button { background: #181828; border: 1px solid #252535; color: #ccd; padding: 3px 9px; border-radius: 3px; cursor: pointer; font-size: 10.5px; font-family: 'Segoe UI', system-ui, sans-serif; margin-right: 8px; } body.rb-dark-page .rb-file-input::file-selector-button:hover { border-color: rgba(255, 79, 31, 0.4); color: #FF4F1F; } /* Report items */ body.rb-dark-page .ri { position: absolute; cursor: pointer; transition: outline .08s; overflow: hidden; } body.rb-dark-page .ri.selected { outline: 1px solid #FF4F1F; outline-offset: 3px; } body.rb-dark-page .ri.selected::after { content: ''; position: absolute; right: -7px; bottom: -7px; width: 9px; height: 9px; background: #FF4F1F; border: 1px solid #0a0a14; cursor: nwse-resize; } body.rb-dark-page .ri.selected::before { content: ''; position: absolute; left: -7px; top: -7px; width: 9px; height: 9px; background: #FF4F1F; border: 1px solid #0a0a14; } /* Item designer-time placeholders (v0 — full rendering comes from the renderer) */ body.rb-dark-page .ri-placeholder { width: 100%; height: 100%; background: #14141f; border: 1px dashed #252535; color: #555; font-size: 10.5px; display: flex; align-items: center; justify-content: center; letter-spacing: 0.4px; } body.rb-dark-page .ri-table-ph { color: #FF4F1F; border-color: rgba(255, 79, 31, 0.27); } body.rb-dark-page .ri-chart-ph { color: #FF4F1F; border-color: rgba(255, 79, 31, 0.27); } body.rb-dark-page .ri-gauge-ph { color: #5a9a5a; border-color: #2a4a2a; } body.rb-dark-page .ri-kpi-ph { color: #3B9EFF; border-color: rgba(59, 158, 255, 0.27); } body.rb-dark-page .ri-image-ph { color: #888; } body.rb-dark-page .ri-line { width: 100%; } body.rb-dark-page .ri-pagebreak { width: 100%; height: 100%; color: #555; font-size: 10px; text-align: center; border-top: 1px dashed #FF4F1F; border-bottom: 1px dashed #FF4F1F; padding-top: 4px; background: rgba(255, 79, 31, 0.04); } body.rb-dark-page .ri-textblock { width: 100%; height: 100%; display: flex; align-items: center; } /* Empty canvas state */ body.rb-dark-page .rb-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #444; } body.rb-dark-page .rb-empty-inner { text-align: center; } body.rb-dark-page .rb-empty-glyph { font-size: 64px; color: #1e1e2e; } body.rb-dark-page .rb-empty-title { font-size: 16px; color: #555; margin-top: 16px; } body.rb-dark-page .rb-empty-sub { font-size: 11px; color: #333; margin-top: 4px; } /* ── Inspector (right) ──────────────────────────────────────────────────── */ body.rb-dark-page .rb-inspector { background: #0e0e1a !important; border-left: 1px solid #1a1a2a !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } body.rb-dark-page .insp-tabs { display: flex; border-bottom: 1px solid #1a1a2a; background: #0a0a14; } body.rb-dark-page .insp-tab { flex: 1; text-align: center; padding: 9px 0; font-size: 10.5px; cursor: pointer; color: #555; border-bottom: 2px solid transparent; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; } body.rb-dark-page .insp-tab:hover { color: #aab; } body.rb-dark-page .insp-tab.active { color: #FF4F1F; border-bottom-color: #FF4F1F; } body.rb-dark-page .insp-body { padding: 12px; overflow-y: auto; flex: 1; } body.rb-dark-page .insp-header { background: rgba(255, 79, 31, 0.08); border: 1px solid rgba(255, 79, 31, 0.27); padding: 8px 10px; border-radius: 3px; margin-bottom: 14px; } body.rb-dark-page .insp-header .name { font-weight: 600; color: #FF4F1F; font-size: 12px; } body.rb-dark-page .insp-header .type { font-size: 10px; color: #888; margin-top: 2px; letter-spacing: 0.4px; } body.rb-dark-page .insp-section { font-size: 8.5px; text-transform: uppercase; letter-spacing: 1px; color: #444; font-weight: 600; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #1a1a2a; } body.rb-dark-page .insp-row { display: grid; grid-template-columns: 88px 1fr; gap: 8px; margin-bottom: 7px; align-items: center; } body.rb-dark-page .insp-row label { font-size: 10.5px; color: #888; } body.rb-dark-page .insp-row input, body.rb-dark-page .insp-row select { padding: 4px 7px !important; border-radius: 3px !important; font-size: 10.5px !important; width: 100% !important; } body.rb-dark-page .insp-row .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } body.rb-dark-page .insp-todo { color: #444; font-size: 10.5px; font-style: italic; } body.rb-dark-page .insp-empty { text-align: center; color: #444; padding: 40px 12px; } body.rb-dark-page .insp-empty-glyph { font-size: 48px; color: #1e1e2e; } body.rb-dark-page .insp-empty-title { font-size: 13px; color: #555; margin-top: 12px; } body.rb-dark-page .insp-empty-sub { font-size: 10.5px; color: #333; margin-top: 4px; } /* ── Data sources strip (bottom) ────────────────────────────────────────── */ body.rb-dark-page .rb-datasources { background: #0e0e1a !important; border-top: 1px solid #1a1a2a !important; height: 28px !important; display: flex !important; align-items: center !important; padding: 0 14px !important; font-size: 10px !important; gap: 12px !important; cursor: pointer !important; letter-spacing: 0.4px !important; color: #555 !important; text-transform: uppercase !important; } body.rb-dark-page .rb-datasources .chev { color: #444; } body.rb-dark-page .ds-chip { background: #181828; padding: 2px 9px; border-radius: 3px; font-family: Consolas, monospace; font-size: 10px; color: #aab; text-transform: none; letter-spacing: 0; border: 1px solid #252535; } body.rb-dark-page .ds-chip:hover { border-color: rgba(255, 79, 31, 0.4); } body.rb-dark-page .ds-chip .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #5a9a5a; margin-right: 5px; vertical-align: middle; } body.rb-dark-page .ds-chip.warn { color: #e8a04b; } body.rb-dark-page .ds-chip.warn .dot { background: #e8a04b; } body.rb-dark-page .ds-actions { margin-left: auto; color: #555; } body.rb-dark-page .ds-actions:hover { color: #FF4F1F; } /* Expanded data sources panel (under the strip) */ body.rb-dark-page .rb-datasources-panel { position: fixed; bottom: 28px; left: 232px; right: 280px; background: #0e0e1a; border-top: 1px solid #252535; height: 220px; padding: 12px; overflow: hidden; z-index: 50; box-shadow: 0 -8px 24px rgba(0,0,0,0.5); display: flex; flex-direction: column; } body.rb-dark-page .rb-ds-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } body.rb-dark-page .rb-ds-name { color: #FF4F1F; font-weight: 600; font-size: 12px; } body.rb-dark-page .rb-ds-mode { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } body.rb-dark-page .rb-ds-sql { flex: 1; width: 100% !important; background: #0a0a14 !important; border: 1px solid #252535 !important; color: #dde !important; font-family: Consolas, monospace !important; font-size: 12px !important; padding: 8px !important; border-radius: 3px !important; resize: none !important; } body.rb-dark-page .rb-ds-empty { color: #444; font-size: 11px; text-align: center; padding: 32px; font-style: italic; } /* ══════════════════════════════════════════════════════════════════════════ Preview modal — fullscreen overlay rendering the report with REAL data from PreviewRows. Hides editor chrome; shows the report as it would appear in the final PDF/HTML export target. ══════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── Preview modal uses the native