/* ==========================================================================
rbq-components.css — Kanonische Shared Components für alle Rascasse Dashboards
Version: 2.0.1
Einbindung:
Kanonischer Google Fonts Import (im des Dashboards):
Font-Rollen (siehe rascasse-claude-config/rules/design-system.md):
--rbq-font Inter Body/UI, Fließtext, Buttons, Tabellen
--rbq-font-display DM Serif Display Premium Headers
--rbq-font-label Instrument Sans Labels/Meta, KPI-Werte, Sublines
--rbq-font-loader Outfit Loader-Text
Gilt NUR für rbq-iframe-Dashboards, nicht für die WP-Theme-Shell
(rascasse-administration nutzt bewusst Playfair Display — siehe Memory
headline-serif-two-standards).
========================================================================== */
/* ==========================================================================
DESIGN TOKENS — Kanonische CSS Custom Properties
NUR --rbq-* Prefix verwenden. Keine Kurzformen (--bd, --t2, --pk).
========================================================================== */
:root {
/* Primary */
--rbq-primary: #D81B60;
--rbq-primary-hover: #B91550;
--rbq-primary-light: rgba(216, 27, 96, 0.08);
--rbq-primary-border: rgba(216, 27, 96, 0.2);
/* Accent */
--rbq-accent: #89C8CC;
--rbq-accent-dark: #5BA8AD;
--rbq-accent-light: rgba(137, 200, 204, 0.08);
--rbq-accent-border: rgba(137, 200, 204, 0.2);
--rbq-petrol: #0D9488;
/* Surfaces */
--rbq-surface: #ffffff;
--rbq-background: #f8f9fa;
--rbq-zebra: #F9FAFB;
/* Borders */
--rbq-border: #E5E7EB;
--rbq-border-light: #F3F4F6;
/* Text */
--rbq-text-1: #111827;
--rbq-text-2: #374151;
--rbq-text-3: #6B7280;
--rbq-text-muted: #9CA3AF;
/* Status */
--rbq-positive: #16a34a;
--rbq-positive-light: rgba(22, 163, 74, 0.1);
--rbq-negative: #dc2626;
--rbq-negative-light: rgba(220, 38, 38, 0.1);
--rbq-warning: #f59e0b;
--rbq-warning-light: rgba(245, 158, 11, 0.1);
--rbq-success: #10B981;
--rbq-success-light: rgba(16, 185, 129, 0.1);
--rbq-danger: #EF4444;
--rbq-danger-light: rgba(239, 68, 68, 0.1);
/* Gender */
--rbq-female: #E91E63;
--rbq-male: #00838F;
/* Spacing */
--rbq-space-1: 4px;
--rbq-space-2: 8px;
--rbq-space-3: 12px;
--rbq-space-4: 16px;
--rbq-space-5: 20px;
--rbq-space-6: 24px;
--rbq-space-8: 32px;
/* Typography */
--rbq-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--rbq-font-display: 'DM Serif Display', serif;
--rbq-font-label: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--rbq-font-loader: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
--rbq-text-xs: 11px;
--rbq-text-sm: 14px;
--rbq-text-base: 15px;
--rbq-text-lg: 16px;
--rbq-input-min-font: 14px; /* Minimum font-size for interactive elements */
--rbq-text-xl: 20px;
--rbq-text-2xl: 24px;
--rbq-text-3xl: 30px;
--rbq-text-4xl: 36px;
--rbq-text-5xl: 48px;
/* Radius */
--rbq-radius-sm: 6px;
--rbq-radius: 8px;
--rbq-radius-lg: 12px;
/* Container */
--rbq-container: 1200px;
/* Breakpoints — Styleguide Phase 2 WS3 (18.07.2026). CSS custom
properties können in @media-Bedingungen NICHT referenziert werden
(Browser-Limitierung) — diese Variablen sind die dokumentierte
Referenz-Skala, tatsächliche @media-Queries müssen die Literal-Werte
hartkodieren. Ziel: alle NEUEN/geänderten Breakpoints auf diese 4
Stufen mappen statt neue Ad-hoc-Werte zu erfinden.
--bp-sm 480px iPhone SE/Mini Portrait
--bp-md 768px iPhone Pro Max Portrait / kleines Tablet
--bp-lg 1024px Tablet Landscape / kleines Notebook
--bp-xl 1280px Desktop */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
/* Other */
--rbq-transition: 0.15s ease;
--rbq-input-height: 38px;
/* Shadows */
--rbq-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--rbq-shadow: 0 4px 12px rgba(0,0,0,0.08);
--rbq-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
--rbq-shadow-popup: 0 4px 20px rgba(0,0,0,0.15);
/* Surface Alpha (for overlays) */
--rbq-surface-alpha-90: rgba(255, 255, 255, 0.9);
--rbq-surface-alpha-92: rgba(255, 255, 255, 0.92);
--rbq-surface-alpha-95: rgba(255, 255, 255, 0.95);
/* Misc */
--rbq-help-bg: #B0B7C3;
--rbq-error-bg: #fef2f2;
--rbq-error-icon: #ef4444;
}
/* ==========================================================================
DARK MODE — Override design tokens for dark theme
Activated via [data-theme="dark"] on or auto via prefers-color-scheme
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--rbq-primary: #F472B6;
--rbq-primary-hover: #F9A8D4;
--rbq-primary-light: rgba(244, 114, 182, 0.12);
--rbq-primary-border: rgba(244, 114, 182, 0.25);
--rbq-accent: #A5D8DC;
--rbq-accent-dark: #89C8CC;
--rbq-accent-light: rgba(165, 216, 220, 0.12);
--rbq-accent-border: rgba(165, 216, 220, 0.25);
--rbq-petrol: #2DD4BF;
--rbq-surface: #1E293B;
--rbq-background: #0F172A;
--rbq-zebra: #1a2332;
--rbq-border: #334155;
--rbq-border-light: #253244;
--rbq-text-1: #F1F5F9;
--rbq-text-2: #CBD5E1;
--rbq-text-3: #94A3B8;
--rbq-text-muted: #64748B;
--rbq-positive: #4ade80;
--rbq-positive-light: rgba(74, 222, 128, 0.12);
--rbq-negative: #f87171;
--rbq-negative-light: rgba(248, 113, 113, 0.12);
--rbq-warning: #fbbf24;
--rbq-warning-light: rgba(251, 191, 36, 0.12);
--rbq-success: #34D399;
--rbq-success-light: rgba(52, 211, 153, 0.12);
--rbq-danger: #F87171;
--rbq-danger-light: rgba(248, 113, 113, 0.12);
--rbq-female: #F472B6;
--rbq-male: #22D3EE;
--rbq-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--rbq-shadow: 0 4px 12px rgba(0,0,0,0.4);
--rbq-shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
--rbq-shadow-popup: 0 4px 20px rgba(0,0,0,0.6);
--rbq-surface-alpha-90: rgba(30, 41, 59, 0.9);
--rbq-surface-alpha-92: rgba(30, 41, 59, 0.92);
--rbq-surface-alpha-95: rgba(30, 41, 59, 0.95);
--rbq-help-bg: #475569;
--rbq-error-bg: rgba(248, 113, 113, 0.1);
--rbq-error-icon: #f87171;
}
}
html[data-theme="dark"] {
--rbq-primary: #F472B6;
--rbq-primary-hover: #F9A8D4;
--rbq-primary-light: rgba(244, 114, 182, 0.12);
--rbq-primary-border: rgba(244, 114, 182, 0.25);
--rbq-accent: #A5D8DC;
--rbq-accent-dark: #89C8CC;
--rbq-accent-light: rgba(165, 216, 220, 0.12);
--rbq-accent-border: rgba(165, 216, 220, 0.25);
--rbq-petrol: #2DD4BF;
--rbq-surface: #1E293B;
--rbq-background: #0F172A;
--rbq-zebra: #1a2332;
--rbq-border: #334155;
--rbq-border-light: #253244;
--rbq-text-1: #F1F5F9;
--rbq-text-2: #CBD5E1;
--rbq-text-3: #94A3B8;
--rbq-text-muted: #64748B;
--rbq-positive: #4ade80;
--rbq-positive-light: rgba(74, 222, 128, 0.12);
--rbq-negative: #f87171;
--rbq-negative-light: rgba(248, 113, 113, 0.12);
--rbq-warning: #fbbf24;
--rbq-warning-light: rgba(251, 191, 36, 0.12);
--rbq-success: #34D399;
--rbq-success-light: rgba(52, 211, 153, 0.12);
--rbq-danger: #F87171;
--rbq-danger-light: rgba(248, 113, 113, 0.12);
--rbq-female: #F472B6;
--rbq-male: #22D3EE;
--rbq-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--rbq-shadow: 0 4px 12px rgba(0,0,0,0.4);
--rbq-shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
--rbq-shadow-popup: 0 4px 20px rgba(0,0,0,0.6);
--rbq-surface-alpha-90: rgba(30, 41, 59, 0.9);
--rbq-surface-alpha-92: rgba(30, 41, 59, 0.92);
--rbq-surface-alpha-95: rgba(30, 41, 59, 0.95);
--rbq-help-bg: #475569;
--rbq-error-bg: rgba(248, 113, 113, 0.1);
--rbq-error-icon: #f87171;
}
/* ==========================================================================
GLOBAL RESET — Box-Sizing, Body Font, Margin
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: var(--rbq-space-2);
font-family: var(--rbq-font);
color: var(--rbq-text-1);
background: var(--rbq-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"] {
color-scheme: dark;
}
html[data-theme="light"], html:not([data-theme]) {
color-scheme: light;
}
/* --------------------------------------------------------------------------
DARK MODE OVERRIDES — Catch inline hardcoded backgrounds in dashboards
Many dashboards use background:white inline. These rules override them
with higher specificity via html[data-theme="dark"].
-------------------------------------------------------------------------- */
html[data-theme="dark"] .viz-card,
html[data-theme="dark"] .rbq-modal__content,
html[data-theme="dark"] .rbq-export-preview-wrap,
html[data-theme="dark"] .rbq-export-controls .export-close,
html[data-theme="dark"] .section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .kpi-section,
html[data-theme="dark"] .bar-section,
html[data-theme="dark"] .chart-section,
html[data-theme="dark"] .scatter-section,
html[data-theme="dark"] .stats-row,
html[data-theme="dark"] .content-grid,
html[data-theme="dark"] .finder-card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .main-panel {
background: var(--rbq-surface) !important;
color: var(--rbq-text-1);
}
html[data-theme="dark"] .mapboxgl-popup-content {
background: var(--rbq-surface) !important;
color: var(--rbq-text-1) !important;
}
html[data-theme="dark"] .rbq-ai-insight {
background: var(--rbq-zebra) !important;
border-color: var(--rbq-border-light) !important;
}
html[data-theme="dark"] .export-btn,
html[data-theme="dark"] .rbq-export-bar {
background: var(--rbq-surface) !important;
border-color: var(--rbq-border-light) !important;
color: var(--rbq-text-3) !important;
}
html[data-theme="dark"] .export-btn .icon-wrapper {
background: var(--rbq-background) !important;
}
html[data-theme="dark"] .export-btn:hover {
background: var(--rbq-background) !important;
color: var(--rbq-text-1) !important;
}
/* Theme toggle button in dark mode */
html[data-theme="dark"] #rbq-theme-toggle {
background: var(--rbq-surface) !important;
border-color: var(--rbq-border-light) !important;
}
/* ==========================================================================
PREMIUM HEADER — rbq-viz-header
Usage:
========================================================================== */
.rbq-viz-header {
position: relative;
background: var(--rbq-surface);
border-radius: 16px 16px 0 0;
overflow: visible;
margin-bottom: 0;
}
.rbq-viz-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--rbq-primary), var(--rbq-accent));
border-radius: 16px 16px 0 0;
z-index: 2;
}
.rbq-viz-header__texture {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
border-radius: 16px 16px 0 0;
background:
radial-gradient(ellipse 50% 80% at 85% 30%, rgba(216,27,96,0.03), transparent),
radial-gradient(ellipse 40% 60% at 5% 70%, rgba(137,200,204,0.03), transparent);
z-index: 0;
}
.rbq-viz-header__content {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 28px;
padding: 28px 32px 22px;
}
.rbq-viz-header__left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.rbq-viz-header__title {
font-family: 'DM Serif Display', serif;
font-size: var(--rbq-text-4xl);
font-weight: 400;
line-height: 1.15;
color: var(--rbq-text-1);
margin: 0;
}
.rbq-viz-header__title span,
.rbq-viz-header__audience {
color: var(--rbq-primary);
}
/* Help-Tooltip im Header darf nicht den Pink-Style des Title-spans erben */
.rbq-viz-header__title .rbq-help,
.rbq-viz-header__title .rbq-help__tooltip {
color: var(--rbq-text-2);
}
.rbq-viz-header__title .rbq-help__tooltip {
color: #fff;
}
.rbq-viz-header__title-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--rbq-border-light);
border: 1px solid var(--rbq-border);
font-family: var(--rbq-font);
font-size: 10px;
font-weight: 600;
color: var(--rbq-text-muted);
cursor: help;
position: relative;
vertical-align: middle;
margin-left: 6px;
transition: all 0.2s ease;
}
.rbq-viz-header__title-help:hover {
background: var(--rbq-accent);
border-color: var(--rbq-accent);
color: white;
}
.rbq-viz-header__title-help:hover::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--rbq-text-1);
color: white;
padding: 10px 14px;
border-radius: var(--rbq-radius);
font-family: var(--rbq-font);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
white-space: normal;
width: max-content;
max-width: 300px;
z-index: 1000;
box-shadow: var(--rbq-shadow-popup);
}
.rbq-viz-header__subline {
font-size: var(--rbq-text-sm);
color: var(--rbq-text-3);
font-family: 'Instrument Sans', var(--rbq-font);
line-height: 1.4;
margin-top: 2px;
}
.rbq-viz-header__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
/* --------------------------------------------------------------------------
AI INSIGHT — Compact insight card in header right column
-------------------------------------------------------------------------- */
.rbq-ai-insight {
width: 300px;
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--rbq-zebra);
border: 1px solid var(--rbq-border-light);
border-radius: var(--rbq-radius-lg);
padding: 14px 16px;
}
.rbq-ai-insight__icon {
flex-shrink: 0;
line-height: 0;
}
.rbq-ai-insight__icon svg {
width: 20px;
height: 20px;
fill: var(--rbq-text-3);
}
.rbq-ai-insight__label {
display: flex;
align-items: center;
gap: 5px;
font-family: 'Instrument Sans', var(--rbq-font);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rbq-text-3);
margin-bottom: 6px;
}
.rbq-ai-insight__label svg {
width: 14px;
height: 14px;
}
.rbq-ai-insight__text {
font-family: 'Instrument Sans', var(--rbq-font);
font-size: 13px;
color: var(--rbq-text-3);
line-height: 1.55;
}
.rbq-viz-header__right {
display: flex;
align-items: stretch;
gap: 12px;
flex-shrink: 0;
}
/* ==========================================================================
META CHIP — Header-Metadaten (Country, Gender, Date Range)
Usage: Label
========================================================================== */
.meta-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 13px;
background: var(--rbq-background);
border: 1px solid var(--rbq-border-light);
border-radius: var(--rbq-radius);
font-size: 12px;
font-weight: 500;
color: var(--rbq-text-3);
white-space: nowrap;
}
.meta-chip svg {
width: 14px;
height: 14px;
fill: none;
stroke: var(--rbq-text-muted);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.meta-chip img {
width: 14px;
height: 14px;
border-radius: 2px;
object-fit: cover;
}
.meta-chip__gender {
font-size: 14px;
line-height: 1;
letter-spacing: 1px;
font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', sans-serif;
}
/* ==========================================================================
YOY BADGE — Year-over-Year Trend Indicators
Usage: YoY
+12%
========================================================================== */
.yoy-badge {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
background: var(--rbq-surface-alpha-90);
border: 1px solid var(--rbq-border-light);
cursor: default;
}
.yoy-badge[title] {
cursor: help;
}
.yoy-badge__year {
color: var(--rbq-text-muted);
}
.yoy-badge__value--up {
color: var(--rbq-success);
}
.yoy-badge__value--down {
color: var(--rbq-danger);
}
/* ==========================================================================
HELP ICON — Tooltip via data-tooltip Attribut
Usage: ?
========================================================================== */
.rbq-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: var(--rbq-help-bg);
color: white;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
font-style: normal;
line-height: 1;
text-transform: none;
letter-spacing: normal;
cursor: help;
position: relative;
flex-shrink: 0;
transition: all var(--rbq-transition);
margin-left: 6px;
}
.rbq-help:hover {
background: var(--rbq-primary);
color: white;
}
/* Tooltip — appears below by default */
.rbq-help__tooltip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1F2937;
color: #F9FAFB;
padding: 8px 12px;
border-radius: var(--rbq-radius-sm);
font-family: var(--rbq-font);
font-size: 12px;
font-weight: 400;
white-space: normal;
width: 220px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: var(--rbq-transition);
z-index: 10000;
line-height: 1.5;
pointer-events: none;
}
.rbq-help:hover .rbq-help__tooltip {
opacity: 1;
visibility: visible;
}
/* Dark-mode override: deep slate + bright border for max contrast against dark page */
html[data-theme="dark"] .rbq-help__tooltip {
background: #020617;
color: #FFFFFF;
border: 1px solid #64748B;
box-shadow: 0 4px 16px rgba(0,0,0,0.7);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .rbq-help__tooltip {
background: #020617;
color: #FFFFFF;
border: 1px solid #64748B;
box-shadow: 0 4px 16px rgba(0,0,0,0.7);
}
}
/* Modifier: tooltip opens to the left (for right-edge buttons) */
.rbq-help__tooltip--left {
left: auto;
right: 0;
transform: none;
}
/* Modifier: tooltip opens to the right (for left-edge buttons) */
.rbq-help__tooltip--right {
left: 0;
transform: none;
}
/* Modifier: tooltip opens above */
.rbq-help__tooltip--above {
top: auto;
bottom: calc(100% + 8px);
}
/* Portaled to by RbqHelp — fixed coords escape overflow:hidden + iframe edges.
left/top/right/bottom/transform are set inline by the helper. */
.rbq-help__tooltip--portal {
position: fixed;
margin: 0;
}
/* ==========================================================================
BUTTONS — Primary, Secondary, Ghost
========================================================================== */
.rbq-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rbq-space-2);
height: var(--rbq-input-height);
padding: 0 var(--rbq-space-5);
border-radius: var(--rbq-radius);
border: none;
font-size: var(--rbq-text-sm);
font-family: var(--rbq-font);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all var(--rbq-transition);
position: relative;
}
.rbq-btn--primary {
background: var(--rbq-primary);
color: white;
}
.rbq-btn--primary:hover {
background: var(--rbq-primary-hover);
}
.rbq-btn--secondary {
background: var(--rbq-surface);
color: var(--rbq-text-2);
border: 1px solid var(--rbq-border);
}
.rbq-btn--secondary:hover {
border-color: var(--rbq-accent);
background: var(--rbq-zebra);
}
.rbq-btn--ghost {
background: transparent;
color: var(--rbq-text-3);
}
.rbq-btn--ghost:hover {
background: var(--rbq-background);
color: var(--rbq-text-1);
}
.rbq-btn:disabled,
.rbq-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.rbq-btn:disabled:hover,
.rbq-btn[disabled]:hover {
background: initial;
}
/* ==========================================================================
EXPORT BAR + EXPORT BUTTONS
========================================================================== */
.rbq-export-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: var(--rbq-surface);
border-top: 1px solid var(--rbq-border-light);
}
.rbq-export-bar__label {
font-family: 'Instrument Sans', var(--rbq-font);
font-size: var(--rbq-text-xs);
font-weight: 600;
color: var(--rbq-text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rbq-export-bar__buttons {
display: flex;
gap: 8px;
}
.export-btn {
display: flex;
align-items: center;
gap: 7px;
padding: 0 14px;
height: 34px;
border-radius: var(--rbq-radius);
border: 1px solid var(--rbq-border-light);
background: var(--rbq-surface);
font-family: 'Instrument Sans', var(--rbq-font);
font-size: var(--rbq-text-xs);
font-weight: 600;
color: var(--rbq-text-3);
cursor: pointer;
white-space: nowrap;
transition: all var(--rbq-transition);
position: relative;
}
.export-btn:hover {
background: var(--rbq-background);
border-color: rgba(0,0,0,0.12);
color: var(--rbq-text-1);
}
.export-btn .icon-wrapper {
width: 20px;
height: 20px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--rbq-background);
transition: transform var(--rbq-transition);
}
.export-btn .icon-wrapper svg {
width: 12px;
height: 12px;
color: var(--rbq-text-3);
}
.export-btn:hover .icon-wrapper {
transform: scale(1.05);
}
.export-btn--disabled {
opacity: 0.45;
cursor: not-allowed;
}
.export-btn--disabled:hover {
background: var(--rbq-surface);
border-color: var(--rbq-border-light);
color: var(--rbq-text-3);
}
.export-btn--disabled:hover .icon-wrapper {
transform: none;
}
.export-btn__coming-soon {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
background: var(--rbq-surface-alpha-92);
border-radius: var(--rbq-radius);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rbq-text-3);
}
.export-btn--disabled:hover .export-btn__coming-soon {
display: flex;
}
/* ==========================================================================
FILTER BAR — Horizontal filter row with search, dropdowns, advanced panel
========================================================================== */
.filter-bar {
display: flex;
align-items: center;
gap: var(--rbq-space-3);
padding: var(--rbq-space-3) 0;
margin-bottom: var(--rbq-space-3);
border-bottom: 1px solid var(--rbq-border-light);
position: relative;
z-index: 500;
}
.filter-bar__search {
position: relative;
flex: 0 0 170px;
}
.filter-bar__search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--rbq-text-muted);
pointer-events: none;
}
.filter-bar__search-icon svg {
width: 14px;
height: 14px;
}
.filter-bar__search-input {
width: 100%;
height: var(--rbq-input-height);
padding: 8px 12px 8px 34px;
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-sm);
font-size: var(--rbq-text-sm);
font-family: var(--rbq-font);
color: var(--rbq-text-1);
background: var(--rbq-surface);
outline: none;
transition: border-color 0.2s;
}
.filter-bar__search-input:focus {
border-color: var(--rbq-primary);
}
.filter-bar__search-input::placeholder {
color: var(--rbq-text-muted);
}
.filter-bar__dropdown {
position: relative;
}
.filter-bar__select {
appearance: none;
height: var(--rbq-input-height);
padding: 8px 36px 8px 14px;
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-sm);
font-size: var(--rbq-text-sm);
font-family: var(--rbq-font);
color: var(--rbq-text-1);
background: var(--rbq-surface);
cursor: pointer;
outline: none;
transition: border-color 0.2s;
}
.filter-bar__select:hover {
border-color: var(--rbq-accent);
}
.filter-bar__select:focus {
border-color: var(--rbq-primary);
}
.filter-bar__dropdown-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--rbq-text-muted);
pointer-events: none;
}
.filter-bar__dropdown-icon svg {
width: 12px;
height: 12px;
}
.filter-bar__advanced-btn {
display: flex;
align-items: center;
justify-content: center;
height: var(--rbq-input-height);
padding: 0 12px;
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-sm);
font-size: var(--rbq-text-sm);
color: var(--rbq-text-muted);
background: var(--rbq-surface);
cursor: pointer;
transition: all 0.2s;
}
.filter-bar__advanced-btn:hover {
border-color: var(--rbq-primary);
}
.filter-bar__advanced-btn.active {
background: var(--rbq-text-1);
color: white;
border-color: var(--rbq-text-1);
}
.filter-bar__advanced-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: var(--rbq-surface);
border-radius: var(--rbq-radius);
box-shadow: var(--rbq-shadow-popup);
padding: var(--rbq-space-6);
z-index: 500;
min-width: 700px;
display: none;
}
.filter-bar__advanced-panel.visible {
display: block;
}
.filter-bar__sliders {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--rbq-space-6);
}
.filter-bar__spacer {
flex: 1;
}
.filter-bar__stats {
display: flex;
gap: var(--rbq-space-4);
text-align: right;
}
.filter-bar__stat-value {
font-size: var(--rbq-text-base);
font-weight: 700;
color: var(--rbq-primary);
}
.filter-bar__stat-label {
font-size: var(--rbq-text-xs);
color: var(--rbq-text-muted);
}
/* Filter Tags (removable) */
.filter-bar__tag {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: var(--rbq-primary-light);
border-radius: 20px;
font-size: var(--rbq-text-xs);
font-weight: 500;
color: var(--rbq-primary);
}
.filter-bar__tag-remove {
cursor: pointer;
opacity: 0.7;
transition: opacity var(--rbq-transition);
}
.filter-bar__tag-remove:hover {
opacity: 1;
}
/* ==========================================================================
FILTER GROUPS — Used in advanced panels and sidebar filters
========================================================================== */
.filter-group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 140px;
}
.filter-group-header {
font-size: var(--rbq-text-xs);
font-weight: 700;
color: var(--rbq-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: var(--rbq-space-4);
margin-bottom: var(--rbq-space-3);
padding-bottom: var(--rbq-space-2);
border-bottom: 1px solid var(--rbq-border-light);
}
.filter-group__label {
font-size: 12px;
font-weight: 600;
color: var(--rbq-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--rbq-space-4);
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-group__value {
font-size: 12px;
font-weight: 500;
color: var(--rbq-primary);
background: var(--rbq-primary-light);
padding: 2px 8px;
border-radius: 10px;
}
.filter-group__help {
font-size: 12px;
color: var(--rbq-text-muted);
margin-bottom: var(--rbq-space-2);
}
/* ==========================================================================
NOUISLIDER OVERRIDES — Consistent slider styling
========================================================================== */
.filter-group .noUi-target {
background: var(--rbq-border);
border: none;
box-shadow: none;
height: 6px;
border-radius: 3px;
}
.filter-group .noUi-connect {
background: var(--rbq-primary);
}
.filter-group .noUi-handle {
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: var(--rbq-surface) !important;
border: 3px solid var(--rbq-primary) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
cursor: pointer;
top: -7px !important;
right: -9px !important;
}
.filter-group .noUi-handle:before,
.filter-group .noUi-handle:after {
display: none !important;
}
/* ==========================================================================
LOADER — Pulse animation overlay
========================================================================== */
.loader-overlay {
position: absolute;
inset: 0;
z-index: 10;
background: var(--rbq-surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 220px;
gap: 16px;
transition: opacity 0.4s ease;
}
.loader-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.loader-title {
font-family: 'Outfit', sans-serif;
font-size: var(--rbq-text-lg);
font-weight: 700;
color: var(--rbq-text-1);
letter-spacing: -0.2px;
}
.loader-status {
font-size: 12.5px;
color: var(--rbq-text-muted);
min-height: 18px;
transition: opacity 0.35s ease;
}
.pulse-wrap {
position: relative;
width: 16px;
height: 16px;
}
.pulse-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rbq-primary);
opacity: 0.6;
}
.pulse-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid var(--rbq-primary);
opacity: 0;
animation: pulseOut 2.4s ease-out infinite;
}
@keyframes pulseOut {
0% { transform: scale(0.5); opacity: 0.5; }
100% { transform: scale(2.2); opacity: 0; }
}
/* ==========================================================================
VIZ CARD — Content reveal animation after loading
Usage:
========================================================================== */
.viz-content > * {
opacity: 0;
filter: blur(8px);
transition: opacity .5s ease, filter .5s ease;
}
.viz-card.active .viz-content > *:nth-child(1) { opacity: 1; filter: blur(0); transition-delay: 0s; }
.viz-card.active .viz-content > *:nth-child(2) { opacity: 1; filter: blur(0); transition-delay: .08s; }
.viz-card.active .viz-content > *:nth-child(3) { opacity: 1; filter: blur(0); transition-delay: .14s; }
.viz-card.active .viz-content > *:nth-child(4) { opacity: 1; filter: blur(0); transition-delay: .2s; }
.viz-card.active .viz-content > *:nth-child(5) { opacity: 1; filter: blur(0); transition-delay: .26s; }
.viz-card.active .viz-content > *:nth-child(6) { opacity: 1; filter: blur(0); transition-delay: .32s; }
.viz-card.active .viz-content > *:nth-child(7) { opacity: 1; filter: blur(0); transition-delay: .38s; }
.viz-card.active .viz-content > *:nth-child(8) { opacity: 1; filter: blur(0); transition-delay: .44s; }
/* Catch-all für Kinder 9+: die nth-child-Staffel oben deckt nur die ersten 8
direkten Kinder ab — alles danach (z.B. die Export-Leiste auf Dashboards
mit Filter-Modals als viz-content-Kinder) blieb sonst dauerhaft bei
opacity:0 + blur und war unsichtbar, obwohl klickbar. Die spezifischeren
nth-child-Regeln gewinnen weiterhin für die Stagger-Delays der ersten 8. */
.viz-card.active .viz-content > * { opacity: 1; filter: blur(0); }
/* ==========================================================================
ERROR OVERLAY — Fehler-Zustand mit Retry-Button
========================================================================== */
.error-overlay {
position: absolute;
inset: 0;
z-index: 10;
background: var(--rbq-surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 220px;
gap: 14px;
opacity: 0;
pointer-events: none;
transition: opacity .35s ease;
}
.error-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.error-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--rbq-error-bg);
display: flex;
align-items: center;
justify-content: center;
}
.error-icon svg {
width: 18px;
height: 18px;
stroke: var(--rbq-error-icon);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.error-title {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--rbq-text-1);
}
.error-msg {
font-size: 12.5px;
color: var(--rbq-text-muted);
text-align: center;
max-width: 280px;
line-height: 1.5;
}
.retry-btn {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--rbq-primary);
background: none;
border: 1px solid var(--rbq-primary);
border-radius: 8px;
padding: 8px 20px;
cursor: pointer;
transition: all .2s;
margin-top: 4px;
}
.retry-btn:hover {
background: var(--rbq-primary);
color: #fff;
}
/* ==========================================================================
GENERIC SKELETON LOADER — injected by RascasseLoader (rbq-header.js)
into #rl-loader when a dashboard has no bespoke skeleton (.sk-wrap).
Replaces the sparse pulse with a layout-shaped shimmer placeholder.
Dashboards can opt into a viz-shaped variant via data-skeleton="…" on
#rl-loader (e.g. "core-metrics" for the header dashboards).
========================================================================== */
.loader-overlay--skeleton {
padding: 22px 22px 0;
align-items: stretch;
justify-content: flex-start;
gap: 0;
overflow: hidden;
}
.rl-sk { width: 100%; display: flex; flex-direction: column; }
.rl-sk-el {
position: relative;
overflow: hidden;
background: var(--rbq-border-light);
border-radius: var(--rbq-radius-sm);
}
.rl-sk-el::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
animation: rlSkShimmer 1.5s ease-in-out infinite;
}
@keyframes rlSkShimmer { 100% { transform: translateX(100%); } }
html[data-theme="dark"] .rl-sk-el { background: rgba(255,255,255,0.09); }
html[data-theme="dark"] .rl-sk-el::after {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.rl-sk-head {
background: var(--rbq-surface);
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-lg);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 18px;
}
.rl-sk-chips { display: flex; gap: 10px; margin-top: 4px; }
.rl-sk-chip { height: 24px; width: 104px; border-radius: 999px; }
.rl-sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rl-sk-card {
background: var(--rbq-surface);
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-lg);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rl-sk-row { display: flex; align-items: center; gap: 10px; }
.rl-sk-row__img { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.rl-sk-row__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rl-sk-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 0 24px;
}
/* --- Viz-shaped primitives (data-skeleton variants) --- */
.rl-sk-head--split {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.rl-sk-head__left {
flex: 1;
max-width: 640px;
display: flex;
flex-direction: column;
gap: 12px;
}
.rl-sk-head__ai { width: 300px; height: 56px; border-radius: var(--rbq-radius-lg); flex-shrink: 0; }
.rl-sk-hgrid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 200px;
gap: 16px;
}
.rl-sk-hgrid .rl-sk-card { min-height: 150px; }
.rl-sk-sqrow { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.rl-sk-sq { width: 34px; height: 34px; border-radius: 8px; }
.rl-sk-donut-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; }
.rl-sk-donut {
width: 88px;
height: 88px;
border-radius: 50%;
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
mask: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}
.rl-sk-donut-label { height: 9px; width: 56px; margin: 0 auto; }
.rl-sk-bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; min-height: 96px; }
.rl-sk-bars .rl-sk-el { flex: 1; border-radius: 3px 3px 0 0; }
.rl-sk-line {
flex: 1;
min-height: 96px;
border-radius: 0;
clip-path: polygon(0 82%, 8% 74%, 16% 78%, 25% 70%, 34% 64%, 44% 52%, 54% 24%, 62% 46%, 71% 38%, 80% 45%, 90% 28%, 100% 34%, 100% 100%, 0 100%);
}
.rl-sk-axis { display: flex; justify-content: space-between; }
.rl-sk-axis .rl-sk-el { height: 8px; width: 34px; }
/* map-list: große Map-Fläche + Ranking-Liste */
.rl-sk-mlgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.rl-sk-map { position: relative; min-height: 320px; }
.rl-sk-map__dot {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--rbq-surface);
}
html[data-theme="dark"] .rl-sk-map__dot { background: var(--rbq-surface); }
.rl-sk-list { display: flex; flex-direction: column; gap: 12px; }
.rl-sk-list__bar { margin-left: auto; }
/* table: Toolbar + Header-Zeile + Datenzeilen */
.rl-sk-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rl-sk-input { height: 36px; width: 260px; border-radius: var(--rbq-radius); }
.rl-sk-thead { height: 34px; border-radius: var(--rbq-radius) var(--rbq-radius) 0 0; margin-bottom: 6px; }
.rl-sk-trow {
display: grid;
grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 70px;
gap: 12px;
align-items: center;
padding: 7px 0;
}
.rl-sk-trow .rl-sk-el { height: 11px; }
.rl-sk-trow .rl-sk-el:first-child { height: 26px; border-radius: 6px; }
/* bars/line: großer einzelner Chart */
.rl-sk-bigbars { display: flex; align-items: flex-end; gap: 10px; min-height: 220px; padding-top: 8px; }
.rl-sk-bigbars .rl-sk-el { flex: 1; border-radius: 4px 4px 0 0; }
.rl-sk-line--tall { min-height: 220px; }
/* card-grid / donut-grid: Grid aus Entity-/Donut-Cards */
.rl-sk-cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rl-sk-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 4px auto 2px; }
.rl-sk-center { margin-left: auto; margin-right: auto; }
/* scatter: Punktwolke über Achsen */
.rl-sk-scatter { position: relative; min-height: 260px; }
.rl-sk-scatter .rl-sk-el { position: absolute; border-radius: 50%; }
/* radar: Spider-Chart-Silhouette */
.rl-sk-radar-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 0; }
.rl-sk-radar {
width: 260px;
height: 240px;
border-radius: 0;
clip-path: polygon(50% 0%, 90% 25%, 100% 70%, 65% 100%, 20% 92%, 0% 40%);
}
/* two-col: H2H-Vergleich */
.rl-sk-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rl-sk-labelbar { display: flex; align-items: center; gap: 10px; }
.rl-sk-labelbar .rl-sk-el:first-child { width: 90px; height: 10px; flex-shrink: 0; }
.rl-sk-labelbar .rl-sk-el:last-child { flex: 1; height: 14px; border-radius: 999px; }
@media (max-width: 980px) {
.rl-sk-grid { grid-template-columns: repeat(2, 1fr); }
.rl-sk-hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rl-sk-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rl-sk-head__ai { display: none; }
.rl-sk-trow { grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1fr) 70px; }
.rl-sk-trow .rl-sk-el:nth-child(4),
.rl-sk-trow .rl-sk-el:nth-child(5) { display: none; }
}
@media (max-width: 600px) {
.rl-sk-grid { grid-template-columns: 1fr; }
.rl-sk-hgrid { grid-template-columns: 1fr; }
.rl-sk-cgrid { grid-template-columns: 1fr; }
.rl-sk-mlgrid { grid-template-columns: 1fr; }
.rl-sk-vs { grid-template-columns: 1fr; }
.rl-sk-map { min-height: 220px; }
.loader-overlay--skeleton { padding: 18px 16px 0; }
}
/* ==========================================================================
TABULATOR TABLE — Kanonische Overrides für Tabulator v5.5
========================================================================== */
.tabulator {
background: transparent;
border: none;
font-family: var(--rbq-font);
}
.tabulator-header {
background: var(--rbq-zebra) !important;
border: none !important;
border-bottom: 1px solid var(--rbq-border) !important;
}
.tabulator-header .tabulator-col {
background: transparent !important;
border: none !important;
}
.tabulator-header .tabulator-col .tabulator-col-content {
padding: 12px 16px !important;
}
.tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
font-size: var(--rbq-text-xs) !important;
font-weight: 600 !important;
color: var(--rbq-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3;
}
.tabulator-header .tabulator-col:hover .tabulator-col-title {
color: var(--rbq-primary) !important;
}
/* Sort arrows */
.tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
border-bottom-color: var(--rbq-border) !important;
}
.tabulator-header .tabulator-col[aria-sort="asc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
border-bottom-color: var(--rbq-primary) !important;
}
.tabulator-header .tabulator-col[aria-sort="desc"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
border-top-color: var(--rbq-primary) !important;
}
/* Rows */
.tabulator-tableholder {
background: var(--rbq-surface);
}
.tabulator-row {
background: var(--rbq-surface) !important;
border: none;
border-bottom: 1px solid var(--rbq-border-light);
transition: background var(--rbq-transition);
}
.tabulator-row:last-child {
border-bottom: none;
}
.tabulator-row:hover {
background: var(--rbq-zebra) !important;
}
.tabulator-row.tabulator-row-even {
background: var(--rbq-surface) !important;
}
.tabulator-row.tabulator-row-even:hover {
background: var(--rbq-zebra) !important;
}
/* Cells */
.tabulator-cell {
border: none !important;
border-right: none !important;
padding: 12px 16px;
vertical-align: middle;
}
/* Footer / Pagination */
.tabulator-footer {
background: var(--rbq-zebra);
border: none;
border-top: 1px solid var(--rbq-border);
padding: var(--rbq-space-3) var(--rbq-space-4);
}
.tabulator-paginator {
display: flex;
align-items: center;
gap: var(--rbq-space-2);
}
.tabulator-page {
background: var(--rbq-surface);
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-sm);
color: var(--rbq-text-2);
padding: 6px 12px;
margin: 0 2px;
font-size: var(--rbq-text-sm);
cursor: pointer;
transition: all var(--rbq-transition);
}
.tabulator-page:hover {
border-color: var(--rbq-accent);
}
.tabulator-page.active {
background: var(--rbq-primary);
border-color: var(--rbq-primary);
color: white;
}
.tabulator-page[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
/* ==========================================================================
DATA TABLE — Native HTML table styling
========================================================================== */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--rbq-text-sm);
font-family: var(--rbq-font);
}
.data-table th,
.data-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--rbq-border-light);
}
.data-table th {
background: var(--rbq-zebra);
font-size: var(--rbq-text-xs);
font-weight: 600;
color: var(--rbq-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.data-table th.sortable {
cursor: pointer;
user-select: none;
transition: color var(--rbq-transition);
}
.data-table th.sortable:hover {
color: var(--rbq-primary);
}
.data-table th.sorted {
color: var(--rbq-primary);
}
.data-table th .sort-arrow,
.data-table th .sort-icon {
margin-left: 4px;
opacity: 0.3;
}
.data-table th.sorted .sort-arrow,
.data-table th.sorted .sort-icon {
opacity: 1;
}
.data-table tbody tr {
transition: background var(--rbq-transition);
}
.data-table tbody tr:hover {
background: var(--rbq-zebra);
}
.data-table tbody tr:nth-child(even) {
background: var(--rbq-background);
}
.data-table tbody tr:nth-child(even):hover {
background: var(--rbq-zebra);
}
/* Value helpers */
.data-table__value {
font-weight: 600;
}
.data-table__value--positive {
color: var(--rbq-positive);
}
.data-table__value--negative {
color: var(--rbq-negative);
}
/* Inline bar */
.data-table__bar {
width: 80px;
height: 8px;
background: var(--rbq-border-light);
border-radius: 4px;
overflow: hidden;
}
.data-table__bar-fill {
height: 100%;
border-radius: 4px;
}
/* Sticky header variant */
.data-table--sticky thead {
position: sticky;
top: 0;
z-index: 10;
}
/* ==========================================================================
MAP COMPONENTS — Container, Legend, Popup, Controls
========================================================================== */
/* Map Container */
.map-section {
background: var(--rbq-surface);
border-radius: var(--rbq-radius-lg);
overflow: hidden;
margin: var(--rbq-space-6) 0;
box-shadow: var(--rbq-shadow-sm);
border: 1px solid var(--rbq-border);
position: relative;
}
.map-section__title {
font-size: 15px;
font-weight: 700;
color: var(--rbq-text-1);
padding: var(--rbq-space-3) var(--rbq-space-4);
display: flex;
align-items: center;
gap: var(--rbq-space-3);
border-bottom: 1px solid var(--rbq-border-light);
background: var(--rbq-surface);
}
/* Map Loading */
.map-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--rbq-surface-alpha-95);
font-size: var(--rbq-text-sm);
color: var(--rbq-text-3);
z-index: 10;
}
.map-loading__spinner {
width: 18px;
height: 18px;
border: 2px solid var(--rbq-border);
border-top-color: var(--rbq-primary);
border-radius: 50%;
animation: rbq-spin 0.8s linear infinite;
margin-bottom: var(--rbq-space-3);
}
@keyframes rbq-spin {
to { transform: rotate(360deg); }
}
/* Map Legend */
.map-legend {
position: absolute;
background: var(--rbq-surface);
padding: var(--rbq-space-3);
border-radius: var(--rbq-radius-sm);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 10;
font-size: var(--rbq-text-sm);
}
.map-legend__title {
font-size: var(--rbq-text-xs);
font-weight: 700;
color: var(--rbq-text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--rbq-space-2);
}
.map-legend__items {
display: flex;
flex-direction: column;
gap: var(--rbq-space-2);
}
.map-legend__item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--rbq-text-sm);
cursor: pointer;
padding: 4px 6px;
margin: -4px -6px;
border-radius: var(--rbq-radius-sm);
transition: background var(--rbq-transition);
}
.map-legend__item:hover {
background: var(--rbq-background);
}
.map-legend__item.disabled {
opacity: 0.4;
}
.map-legend__color {
width: 16px;
height: 16px;
border-radius: 4px;
flex-shrink: 0;
}
.map-legend__name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Color Scale Legend */
.map-legend__scale {
display: flex;
gap: 2px;
}
.map-legend__scale-color {
width: 20px;
height: 10px;
}
.map-legend__labels {
display: flex;
justify-content: space-between;
margin-top: 4px;
font-size: 10px;
color: var(--rbq-text-muted);
}
/* Map Popup — Unified pattern for all map tooltips */
.rbq-popup {
min-width: 220px;
max-width: 300px;
font-family: var(--rbq-font);
}
.rbq-popup .mapboxgl-popup-content {
padding: 0 !important;
border-radius: var(--rbq-radius-sm) !important;
box-shadow: var(--rbq-shadow-popup) !important;
overflow: hidden;
}
.rbq-popup__header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--rbq-border-light);
}
.rbq-popup__thumb {
width: 32px;
height: 32px;
border-radius: var(--rbq-radius-sm);
object-fit: contain;
background: var(--rbq-zebra);
flex-shrink: 0;
}
.rbq-popup__name {
font-size: var(--rbq-text-base);
font-weight: 700;
color: var(--rbq-text-1);
}
.rbq-popup__meta {
font-size: var(--rbq-text-xs);
color: var(--rbq-text-muted);
margin-top: 1px;
}
.rbq-popup__body {
padding: 10px 14px;
}
.rbq-popup__row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: var(--rbq-text-sm);
}
.rbq-popup__label {
color: var(--rbq-text-muted);
}
.rbq-popup__value {
font-weight: 600;
}
.rbq-popup__value--primary {
color: var(--rbq-primary);
}
.rbq-popup__kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: var(--rbq-space-2);
}
.rbq-popup__kpi {
text-align: center;
}
.rbq-popup__kpi-value {
font-size: var(--rbq-text-base);
font-weight: 700;
}
.rbq-popup__kpi-label {
font-size: 9px;
color: var(--rbq-text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Map Hint */
.map-hint {
position: absolute;
bottom: 24px;
right: 24px;
background: var(--rbq-surface-alpha-95);
padding: 10px 14px;
border-radius: var(--rbq-radius-sm);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
font-size: var(--rbq-text-sm);
color: var(--rbq-text-3);
display: flex;
align-items: center;
gap: 6px;
transition: opacity 0.3s;
z-index: 5;
}
.map-hint.hidden {
opacity: 0;
pointer-events: none;
}
.map-hint svg {
color: var(--rbq-primary);
width: 16px;
height: 16px;
}
/* Mapbox Control Overrides */
.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib {
display: none !important;
}
.mapboxgl-ctrl-group {
border-radius: var(--rbq-radius) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
border: 1px solid var(--rbq-border) !important;
}
.mapboxgl-ctrl-group button {
width: 28px !important;
height: 28px !important;
}
/* ==========================================================================
CARD BASE — Shared hover/active patterns for all cards
========================================================================== */
.rbq-card {
background: var(--rbq-surface);
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-lg);
padding: var(--rbq-space-4);
transition: all var(--rbq-transition);
}
.rbq-card:hover {
border-color: var(--rbq-accent);
box-shadow: var(--rbq-shadow);
}
.rbq-card--interactive {
cursor: pointer;
}
.rbq-card--interactive:hover {
transform: translateY(-2px);
box-shadow: var(--rbq-shadow);
}
.rbq-card.active {
border-color: var(--rbq-primary);
background: var(--rbq-primary-light);
box-shadow: 0 0 0 2px var(--rbq-primary-border);
}
/* Card Grid */
.rbq-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--rbq-space-4);
}
/* Entity Cell — Used in tables for entity with logo */
.entity-cell {
display: flex;
align-items: center;
gap: var(--rbq-space-3);
}
.entity-cell__logo {
width: 40px;
height: 40px;
border-radius: var(--rbq-radius-sm);
object-fit: contain;
background: var(--rbq-zebra);
border: 1px solid var(--rbq-border-light);
flex-shrink: 0;
}
.entity-cell__name {
font-size: var(--rbq-text-sm);
font-weight: 600;
color: var(--rbq-text-1);
}
.entity-cell__category {
font-size: var(--rbq-text-xs);
color: var(--rbq-text-muted);
}
/* ==========================================================================
RESPONSIVE — Small Desktop (≤1280px, --bp-xl)
Styleguide struktureller Follow-up 18.07.2026: war 1200px, auf die
unternehmensweite Kanon-Skala gerundet (480/768/1024/1280).
========================================================================== */
@media (max-width: 1280px) {
.rbq-viz-header__title {
font-size: var(--rbq-text-3xl);
}
.rbq-viz-header__content {
gap: var(--rbq-space-5);
padding: 24px 28px 18px;
}
}
/* ==========================================================================
RESPONSIVE — Tablet (≤1024px, --bp-lg)
Styleguide struktureller Follow-up 18.07.2026: war 960px, auf die
unternehmensweite Kanon-Skala gerundet.
========================================================================== */
@media (max-width: 1024px) {
/* Header */
.rbq-viz-header__content {
gap: var(--rbq-space-4);
padding: 24px 24px 18px;
}
.rbq-viz-header__title {
font-size: var(--rbq-text-3xl);
}
.rbq-ai-insight {
width: 260px;
}
/* Filter Bar */
.filter-bar {
flex-wrap: wrap;
gap: var(--rbq-space-2);
}
.filter-bar__search {
flex: 0 0 160px;
}
.filter-bar__advanced-panel {
min-width: 500px;
}
.filter-bar__sliders {
grid-template-columns: repeat(3, 1fr);
}
.filter-bar__stats {
gap: var(--rbq-space-2);
}
.filter-bar__stat-value {
font-size: var(--rbq-text-sm);
}
.filter-bar__stat-label {
font-size: 10px;
}
/* Export */
.rbq-export-bar {
flex-wrap: wrap;
gap: var(--rbq-space-2);
}
/* Map */
.map-legend {
max-width: 220px;
}
/* Cards */
.rbq-card-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Data Table — horizontal scroll */
.data-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ==========================================================================
RESPONSIVE — Mobile (≤768px, --bp-md)
Styleguide struktureller Follow-up 18.07.2026: war 640px, auf die
unternehmensweite Kanon-Skala gerundet.
========================================================================== */
@media (max-width: 768px) {
/* Header — vertical stack */
.rbq-viz-header__content {
flex-direction: column;
padding: var(--rbq-space-4);
gap: var(--rbq-space-3);
}
.rbq-viz-header__title {
font-size: var(--rbq-text-2xl);
}
.rbq-viz-header__right {
width: 100%;
}
.rbq-ai-insight {
width: 100%;
}
.rbq-viz-header__meta {
flex-wrap: wrap;
gap: var(--rbq-space-2);
}
/* Meta Chips — smaller */
.meta-chip {
padding: 4px 10px;
font-size: var(--rbq-text-xs);
gap: 5px;
}
.meta-chip svg,
.meta-chip img {
width: 12px;
height: 12px;
}
/* Filter Bar — full-width stack */
.filter-bar {
flex-direction: column;
align-items: stretch;
gap: var(--rbq-space-2);
}
.filter-bar__search {
flex: 1 1 100%;
}
.filter-bar__search-input {
width: 100%;
}
.filter-bar__dropdown {
width: 100%;
}
.filter-bar__select {
width: 100%;
}
.filter-bar__advanced-panel {
min-width: 100%;
position: relative;
top: auto;
box-shadow: none;
border: 1px solid var(--rbq-border-light);
}
.filter-bar__sliders {
grid-template-columns: 1fr 1fr;
}
.filter-bar__spacer {
display: none;
}
.filter-bar__stats {
width: 100%;
justify-content: space-between;
text-align: left;
}
/* Export Bar */
.rbq-export-bar {
flex-direction: column;
align-items: stretch;
gap: var(--rbq-space-2);
padding: var(--rbq-space-3);
}
.rbq-export-bar__buttons {
flex-wrap: wrap;
}
.export-btn {
flex: 1 1 auto;
justify-content: center;
}
/* Buttons */
.rbq-btn--primary,
.rbq-btn--secondary {
width: 100%;
justify-content: center;
}
/* Map */
.map-section {
margin: var(--rbq-space-3) 0;
border-radius: var(--rbq-radius);
}
.map-legend {
position: relative;
max-width: 100%;
border-radius: 0;
box-shadow: none;
border-top: 1px solid var(--rbq-border-light);
}
.map-legend__scale {
width: 100%;
}
.map-legend__scale-color {
flex: 1;
}
.map-hint {
display: none;
}
/* Cards — single column */
.rbq-card-grid {
grid-template-columns: 1fr;
gap: var(--rbq-space-3);
}
.rbq-card {
padding: var(--rbq-space-3);
}
/* Data Table — horizontal scroll */
.data-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 calc(-1 * var(--rbq-space-3));
padding: 0 var(--rbq-space-3);
}
.data-table {
min-width: 600px;
}
/* Help tooltips — wider on mobile */
.rbq-help__tooltip {
width: 180px;
font-size: 11px;
}
/* Tabulator — compact mode */
.tabulator .tabulator-header .tabulator-col {
padding: 6px 8px !important;
font-size: var(--rbq-text-xs) !important;
}
.tabulator .tabulator-row .tabulator-cell {
padding: 6px 8px !important;
font-size: var(--rbq-text-xs) !important;
}
/* Loader */
.loader-overlay .pulse-center {
width: 20px;
height: 20px;
}
.loader-overlay .loader-title {
font-size: var(--rbq-text-lg);
}
}
/* ==========================================================================
RESPONSIVE — Small Mobile (≤480px, --bp-sm)
Styleguide struktureller Follow-up 18.07.2026: war 400px, auf die
unternehmensweite Kanon-Skala gerundet.
========================================================================== */
@media (max-width: 480px) {
.rbq-viz-header__title {
font-size: var(--rbq-text-xl);
}
.filter-bar__sliders {
grid-template-columns: 1fr;
}
.meta-chip {
padding: 3px 8px;
font-size: 10px;
}
}
/* --------------------------------------------------------------------------
CONTAINER RESET — Dashboard container with no border/padding
-------------------------------------------------------------------------- */
.rbq-container {
background: var(--rbq-surface);
border-radius: 0;
border: none;
padding: 0;
}
/* --------------------------------------------------------------------------
CUSTOM TOOLTIP — Plotly/ECharts hover tooltip
-------------------------------------------------------------------------- */
#rbq-custom-tooltip {
position: fixed;
z-index: 10000;
pointer-events: none;
display: none;
}
.rbq-plotly-tooltip {
background: var(--rbq-surface);
border: 1px solid var(--rbq-border);
border-radius: 12px;
padding: 14px;
min-width: 220px;
max-width: 300px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
font-family: var(--rbq-font);
}
.rbq-plotly-tooltip__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--rbq-border-light);
}
.rbq-plotly-tooltip__logo {
width: 36px;
height: 36px;
border-radius: 8px;
object-fit: cover;
border: 1px solid var(--rbq-border-light);
}
.rbq-plotly-tooltip__name {
font-weight: 700;
font-size: 13px;
color: var(--rbq-text-1);
}
.rbq-plotly-tooltip__category {
font-size: 11px;
color: var(--rbq-text-muted);
margin-top: 1px;
}
.rbq-plotly-tooltip__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
font-size: 12px;
}
.rbq-plotly-tooltip__label {
color: var(--rbq-text-3);
}
.rbq-plotly-tooltip__value {
font-weight: 600;
color: var(--rbq-text-1);
}
.rbq-plotly-tooltip__value--primary {
color: var(--rbq-primary);
}
/* --------------------------------------------------------------------------
CONTROLS BAR — Sort/filter controls below charts
-------------------------------------------------------------------------- */
.rbq-controls-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: var(--rbq-surface);
border-top: 1px solid var(--rbq-border-light);
}
.rbq-controls-bar__sort-label {
font-family: 'Instrument Sans', var(--rbq-font);
font-size: 11px;
font-weight: 600;
color: var(--rbq-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rbq-controls-bar__right {
display: flex;
gap: 8px;
margin-left: auto;
}
/* --------------------------------------------------------------------------
ERROR OVERLAY — Inline error state for chart panels
-------------------------------------------------------------------------- */
.error-overlay {
position: absolute;
inset: 0;
z-index: 10;
background: var(--rbq-surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: var(--rbq-radius-lg);
}
.error-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--rbq-error-bg);
display: flex;
align-items: center;
justify-content: center;
}
.error-icon svg {
width: 18px;
height: 18px;
stroke: var(--rbq-error-icon);
fill: none;
stroke-width: 2;
}
.error-title {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--rbq-text-1);
}
.error-msg {
font-size: 12.5px;
color: var(--rbq-text-muted, #9ca0b4);
text-align: center;
max-width: 260px;
line-height: 1.5;
}
.retry-btn {
margin-top: 4px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 8px 20px;
border-radius: 8px;
border: 1px solid var(--rbq-border);
background: var(--rbq-surface);
color: var(--rbq-text-2);
cursor: pointer;
transition: all 0.2s;
}
.retry-btn:hover {
border-color: var(--rbq-primary);
color: var(--rbq-primary);
}
/* =============================================
DARK-MODE SCROLLBARS (global, dashboard iframes)
============================================= */
html[data-theme="dark"],
html[data-theme="dark"] * {
scrollbar-color: #475569 #1E293B; /* Firefox: thumb track */
scrollbar-width: thin;
}
html[data-theme="dark"] ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
background: #1E293B;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 5px;
border: 2px solid #1E293B;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background: #64748B;
}
html[data-theme="dark"] ::-webkit-scrollbar-corner {
background: #1E293B;
}
/* ==========================================================================
EDITABLE RANGE-SLIDER INPUTS (RbqEditableSlider helper)
Wired up by RbqEditableSlider.bind(sliderEl, type) in rbq-components.js.
========================================================================== */
.rbq-range-group__inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.rbq-range-group__input {
width: 72px;
padding: 4px 6px;
font-size: var(--rbq-text-sm);
font-weight: 500;
color: var(--rbq-text-2);
text-align: center;
background: var(--rbq-surface);
border: 1px solid var(--rbq-border);
border-radius: var(--rbq-radius-sm);
font-family: inherit;
}
.rbq-range-group__input:focus {
outline: none;
border-color: var(--rbq-primary);
box-shadow: 0 0 0 2px rgba(216,27,96,.15);
}
.rbq-range-group__sep {
color: var(--rbq-text-3);
font-size: var(--rbq-text-sm);
}