/* Bagre Report - Dark Theme Applied when: */ html[data-theme="dark"]{ color-scheme: dark; } html[data-theme="dark"] body { background: #0f1115 !important; color: #e7e7e7; /* Shared theme variables (used by pages.css to avoid specificity/cascade issues) */ --br-surface-0: #0f1115; --br-surface-1: #151922; --br-surface-2: #0f1115; --br-border: rgba(255,255,255,0.12); --br-fg: #e7e7e7; --br-muted: rgba(231,231,231,0.72); } html[data-theme="dark"] a { color: #9bd1ff; } html[data-theme="dark"] a:hover { color: #c7e7ff; } html[data-theme="dark"] hr{ border-color: rgba(255,255,255,0.10); } /* Main surfaces */ html[data-theme="dark"] .container, html[data-theme="dark"] body .container, html[data-theme="dark"] body .container-fluid, html[data-theme="dark"] .container-page, html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .panel, html[data-theme="dark"] .box { background: #151922 !important; color: #e7e7e7 !important; border-color: rgba(255,255,255,0.12) !important; } /* Bootstrap helpers that force light backgrounds */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: #151922 !important; } /* Extra-specific: legacy report view surfaces */ html[data-theme="dark"] body.br-body-report-view-php .container { background: var(--br-surface-1) !important; color: var(--br-fg) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-report-view-php fieldset { background: var(--br-surface-2) !important; border-color: var(--br-border) !important; } /* Drill module modal */ html[data-theme="dark"] .br-modal { background: var(--br-surface-1) !important; color: var(--br-fg) !important; } html[data-theme="dark"] .br-modal-head { background: rgba(0,0,0,0.12) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] .container, html[data-theme="dark"] .container-page{ box-shadow: 0 10px 28px rgba(0,0,0,0.55) !important; } /* Header / top bars */ html[data-theme="dark"] .header, html[data-theme="dark"] .navbar, html[data-theme="dark"] .br-topbar, html[data-theme="dark"] .br-header { background: #12151c !important; color: #e7e7e7 !important; } /* Form controls */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0f1115 !important; color: #e7e7e7 !important; border-color: rgba(255,255,255,0.20) !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { outline: none; border-color: rgba(155,209,255,0.55) !important; box-shadow: 0 0 0 3px rgba(155,209,255,0.18) !important; } html[data-theme="dark"] ::placeholder{ color: rgba(231,231,231,0.55) !important; } html[data-theme="dark"] fieldset{ border-color: rgba(255,255,255,0.14) !important; } html[data-theme="dark"] legend, html[data-theme="dark"] label{ color: #e7e7e7 !important; } /* Tables */ html[data-theme="dark"] .table, html[data-theme="dark"] table { color: #e7e7e7; } html[data-theme="dark"] .table-scroll{ background: #0f1115 !important; border-color: rgba(255,255,255,0.12) !important; } html[data-theme="dark"] table th, html[data-theme="dark"] table td { border-color: rgba(255,255,255,0.12) !important; } /* Default header + zebra colors for report tables (can be overridden by report CSS vars) */ html[data-theme="dark"] body{ --br-header-bg: #1e2432; --br-header-fg: #e7e7e7; --br-zebra-odd: rgba(255,255,255,0.02); --br-zebra-even: rgba(255,255,255,0.04); } /* Pagination / info boxes */ html[data-theme="dark"] .pagination, html[data-theme="dark"] .metrics-summary, html[data-theme="dark"] .br-menu{ background: #0f1115 !important; border-color: rgba(255,255,255,0.12) !important; } /* Buttons (legacy ones use .btn-* custom) */ html[data-theme="dark"] .btn-light{ background: rgba(255,255,255,0.08) !important; color: #e7e7e7 !important; } html[data-theme="dark"] .btn-link{ color:#9bd1ff !important; } /* Dropdowns / tooltips */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover, html[data-theme="dark"] .tooltip-inner { background: #151922; color: #e7e7e7; border-color: rgba(255,255,255,0.12); } /* Charts (cards + text) */ html[data-theme="dark"] .br-chart-card { background: var(--br-surface-1) !important; border-color: var(--br-border) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important; } html[data-theme="dark"] .br-chart-title { color: var(--br-fg) !important; } html[data-theme="dark"] .br-chart-msg { color: var(--br-muted) !important; } /* ============================= Admin editors (single_source / advanced) The editor pages include very specific light styles in pages.css (e.g. fieldset background #fff, topbars with rgba(255,...)). We override them explicitly for dark mode. ============================= */ html[data-theme="dark"] body.br-body-admin-report-edit-php .container{ background: var(--br-surface-1) !important; color: var(--br-fg) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php fieldset{ background: var(--br-surface-2) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php legend{ color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php small, html[data-theme="dark"] body.br-body-admin-report-edit-php .br-adv-help{ color: var(--br-muted) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php code{ background: rgba(255,255,255,0.06) !important; color: var(--br-fg) !important; } /* Toolbar (buscador + modo simple) */ html[data-theme="dark"] body.br-body-admin-report-edit-php .br-fields-toolbar input, html[data-theme="dark"] body.br-body-admin-report-edit-php .br-fields-toolbar select{ background: rgba(255,255,255,0.06) !important; color: var(--br-fg) !important; border-color: var(--br-border) !important; } /* Sticky bars */ html[data-theme="dark"] body.br-body-admin-report-edit-php .editor-topbar{ background: rgba(21,25,34,0.92) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .editor-bottombar{ background: rgba(21,25,34,0.95) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .btn-outline-secondary{ background: transparent !important; color: var(--br-muted) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .btn-outline-secondary:hover{ background: rgba(255,255,255,0.08) !important; color: var(--br-fg) !important; } /* Tabs & advanced popups */ html[data-theme="dark"] body.br-body-admin-report-edit-php .br-adv-tabs{ background: rgba(255,255,255,0.06) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .br-adv-tab{ color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .br-adv-tab.active{ background: var(--br-surface-1) !important; box-shadow: 0 1px 3px rgba(0,0,0,.55) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php #br-adv-popup{ background: var(--br-surface-1) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php #br-adv-popup .br-adv-header{ background: rgba(0,0,0,0.18) !important; border-color: var(--br-border) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php #br-adv-popup .br-adv-title{ color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php #br-adv-popup .br-adv-close{ background: rgba(255,255,255,0.10) !important; color: var(--br-fg) !important; } /* Tables inside editor */ html[data-theme="dark"] body.br-body-admin-report-edit-php table th{ background: var(--br-header-bg) !important; color: var(--br-header-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php tr:nth-child(even) td{ background: var(--br-zebra-even) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php tr:nth-child(odd) td{ background: var(--br-zebra-odd) !important; } /* Legacy modals/hints used inside editor */ html[data-theme="dark"] body.br-body-admin-report-edit-php .modal{ background: var(--br-surface-1) !important; color: var(--br-fg) !important; border-color: var(--br-border) !important; } /* Messages (info/error) in editor */ html[data-theme="dark"] body.br-body-admin-report-edit-php .messages{ background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .messages.error{ background: rgba(255,77,77,0.10) !important; border-color: rgba(255,77,77,0.25) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .messages.info{ background: rgba(80,170,255,0.10) !important; border-color: rgba(80,170,255,0.25) !important; } /* Hint icon: avoid "light" pill in dark mode */ html[data-theme="dark"] body.br-body-admin-report-edit-php .br-hint-icon{ background: rgba(155,209,255,0.12) !important; border-color: rgba(155,209,255,0.28) !important; color: #cfeaff !important; } /* Alerts (bootstrap-ish) */ html[data-theme="dark"] .alert{ background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; color: var(--br-fg) !important; } html[data-theme="dark"] .alert-warning{ background: rgba(255,193,7,0.10) !important; border-color: rgba(255,193,7,0.22) !important; } html[data-theme="dark"] .alert-info{ background: rgba(13,202,240,0.10) !important; border-color: rgba(13,202,240,0.22) !important; } html[data-theme="dark"] .alert-danger{ background: rgba(220,53,69,0.10) !important; border-color: rgba(220,53,69,0.22) !important; } /* Breaks section: Visualización y Descripción del encabezado */ html[data-theme="dark"] body.br-body-admin-report-edit .br-break-opts-box{ background: var(--br-surface-1) !important; border-color: var(--br-border) !important; color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit .br-break-lookup-box{ background: rgba(3,105,161,0.10) !important; border-color: rgba(3,105,161,0.25) !important; color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit .br-break-lookup-box div{ color: var(--br-fg) !important; } /* Select options in some browsers */ html[data-theme="dark"] select option{ background: #0f1115; color: #e7e7e7; } html[data-theme="dark"] body.br-body-admin-report-edit-php .modal h2{ color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-php .br-hint-pop{ background: var(--br-surface-1) !important; color: var(--br-fg) !important; border-color: var(--br-border) !important; } /* Advanced editor page */ html[data-theme="dark"] body.br-body-admin-report-edit-advanced-php .panel{ background: var(--br-surface-1) !important; border-color: var(--br-border) !important; color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-advanced-php .tabbar button{ background: rgba(255,255,255,0.06) !important; border-color: var(--br-border) !important; color: var(--br-fg) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-advanced-php .tabbar button.active{ background: var(--br-surface-1) !important; border-bottom-color: var(--br-surface-1) !important; } html[data-theme="dark"] body.br-body-admin-report-edit-advanced-php code{ background: rgba(255,255,255,0.06) !important; color: var(--br-fg) !important; }