/* ========================================================= Darkscope / 360TPRM Theme Layer Load this file AFTER site.css. Supported theme hooks: or or ========================================================= */ /* ---------- Base variables ---------- */ :root, body[data-theme="dark"], body.theme-dark { --ds-bg-0: #020617; --ds-bg-1: #071126; --ds-bg-2: #0f172a; --ds-bg-3: #111827; --ds-surface-0: rgba(15, 23, 42, 0.42); --ds-surface-1: rgba(15, 23, 42, 0.58); --ds-surface-2: rgba(30, 41, 59, 0.50); --ds-surface-3: rgba(2, 6, 23, 0.68); --ds-card-bg: rgba(15, 23, 42, 0.48); --ds-card-bg-hover: rgba(15, 23, 42, 0.62); --ds-panel-bg: rgba(15, 23, 42, 0.78); --ds-dialog-bg: rgba(15, 23, 42, 0.72); --ds-table-bg: rgba(15, 23, 42, 0.42); --ds-table-header-bg: linear-gradient(90deg, rgba(37,99,235,0.16) 0%, rgba(30,41,59,0.10) 100%); --ds-row-alt-bg: rgba(255,255,255,0.018); --ds-row-hover-bg: linear-gradient(90deg, rgba(37,99,235,0.12), rgba(255,255,255,0.02)); --ds-text: rgba(255,255,255,0.94); --ds-text-strong: #ffffff; --ds-text-muted: rgba(255,255,255,0.64); --ds-text-soft: rgba(255,255,255,0.50); --ds-text-inverse: #0f172a; --ds-border: rgba(255,255,255,0.07); --ds-border-strong: rgba(96,165,250,0.18); --ds-border-hover: rgba(96,165,250,0.34); --ds-primary: #60a5fa; --ds-primary-strong: #2563eb; --ds-primary-soft: rgba(37,99,235,0.16); --ds-danger: #ef4444; --ds-warning: #f59e0b; --ds-success: #22c55e; --ds-shadow: 0 18px 45px rgba(0,0,0,0.38); --ds-shadow-soft: 0 8px 32px rgba(0,0,0,0.35); --ds-glass-blur: blur(18px); color-scheme: dark; } body[data-theme="light"], body.theme-light { --ds-bg-0: #f8fafc; --ds-bg-1: #f1f5f9; --ds-bg-2: #e2e8f0; --ds-bg-3: #cbd5e1; --ds-surface-0: rgba(255, 255, 255, 0.76); --ds-surface-1: rgba(255, 255, 255, 0.88); --ds-surface-2: rgba(248, 250, 252, 0.88); --ds-surface-3: rgba(241, 245, 249, 0.92); --ds-card-bg: rgba(255, 255, 255, 0.82); --ds-card-bg-hover: rgba(255, 255, 255, 0.94); --ds-panel-bg: rgba(248, 250, 252, 0.92); --ds-dialog-bg: rgba(255, 255, 255, 0.92); --ds-table-bg: rgba(255, 255, 255, 0.84); --ds-table-header-bg: linear-gradient(90deg, rgba(37,99,235,0.14) 0%, rgba(226,232,240,0.82) 100%); --ds-row-alt-bg: rgba(15,23,42,0.025); --ds-row-hover-bg: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(255,255,255,0.60)); --ds-text: rgba(15,23,42,0.92); --ds-text-strong: #020617; --ds-text-muted: rgba(51,65,85,0.76); --ds-text-soft: rgba(71,85,105,0.62); --ds-text-inverse: #ffffff; --ds-border: rgba(15,23,42,0.10); --ds-border-strong: rgba(37,99,235,0.22); --ds-border-hover: rgba(37,99,235,0.38); --ds-primary: #2563eb; --ds-primary-strong: #1d4ed8; --ds-primary-soft: rgba(37,99,235,0.12); --ds-danger: #dc2626; --ds-warning: #d97706; --ds-success: #15803d; --ds-shadow: 0 18px 45px rgba(15,23,42,0.14); --ds-shadow-soft: 0 8px 32px rgba(15,23,42,0.10); --ds-glass-blur: blur(14px); color-scheme: light; } /* ---------- Page backgrounds ---------- */ body[data-theme="dark"] .bg-tpms, body.theme-dark .bg-tpms { background: radial-gradient(circle at 70% 20%, rgba(37,99,235,0.12), transparent 40%), linear-gradient(135deg, #111827 0%, #020617 100%) !important; } body[data-theme="light"] .bg-tpms, body.theme-light .bg-tpms, body[data-theme="light"] .bg-default, body.theme-light .bg-default, body[data-theme="light"] .bg-analytics, body.theme-light .bg-analytics { background: radial-gradient(circle at 70% 20%, rgba(37,99,235,0.10), transparent 42%), linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important; } body[data-theme="dark"] .page, body.theme-dark .page, body[data-theme="dark"] .scroll-page, body.theme-dark .scroll-page { color: var(--ds-text); } body[data-theme="light"] .page, body.theme-light .page, body[data-theme="light"] .scroll-page, body.theme-light .scroll-page { color: var(--ds-text); } /* ---------- General typography ---------- */ body[data-theme] .mud-typography, body.theme-dark .mud-typography, body.theme-light .mud-typography, body[data-theme] .page-title, body.theme-dark .page-title, body.theme-light .page-title, body[data-theme] .chart-title, body.theme-dark .chart-title, body.theme-light .chart-title, body[data-theme] .risk-label, body.theme-dark .risk-label, body.theme-light .risk-label { color: var(--ds-text) !important; } body[data-theme] .page-subtitle, body.theme-dark .page-subtitle, body.theme-light .page-subtitle, body[data-theme] .dependency-subtitle, body.theme-dark .dependency-subtitle, body.theme-light .dependency-subtitle, body[data-theme] .risk-description, body.theme-dark .risk-description, body.theme-light .risk-description, body[data-theme] .chart-summary-row, body.theme-dark .chart-summary-row, body.theme-light .chart-summary-row, body[data-theme] .supplier-card .mud-typography-caption, body.theme-dark .supplier-card .mud-typography-caption, body.theme-light .supplier-card .mud-typography-caption { color: var(--ds-text-muted) !important; } /* ---------- Core cards / glass surfaces ---------- */ body[data-theme] .dashboard-kpi, body[data-theme] .tprm-table, body[data-theme] .tprm-chart-card, body[data-theme] .glass-form-card, body[data-theme] .glass-paper, body[data-theme] .value-chain-card, body[data-theme] .customer-tile, body[data-theme] .dashboard-card, body[data-theme] .process-card, body[data-theme] .treatment-card, body[data-theme] .treatment-response-card, body[data-theme] .attachment-row, body.theme-dark .dashboard-kpi, body.theme-dark .tprm-table, body.theme-dark .tprm-chart-card, body.theme-dark .glass-form-card, body.theme-dark .glass-paper, body.theme-dark .value-chain-card, body.theme-dark .customer-tile, body.theme-dark .dashboard-card, body.theme-dark .process-card, body.theme-dark .treatment-card, body.theme-dark .treatment-response-card, body.theme-dark .attachment-row, body.theme-light .dashboard-kpi, body.theme-light .tprm-table, body.theme-light .tprm-chart-card, body.theme-light .glass-form-card, body.theme-light .glass-paper, body.theme-light .value-chain-card, body.theme-light .customer-tile, body.theme-light .dashboard-card, body.theme-light .process-card, body.theme-light .treatment-card, body.theme-light .treatment-response-card, body.theme-light .attachment-row { background: var(--ds-card-bg) !important; color: var(--ds-text) !important; border-color: var(--ds-border) !important; box-shadow: var(--ds-shadow-soft); backdrop-filter: var(--ds-glass-blur); -webkit-backdrop-filter: var(--ds-glass-blur); } body[data-theme] .tprm-chart-card:hover, body.theme-dark .tprm-chart-card:hover, body.theme-light .tprm-chart-card:hover, body[data-theme] .supplier-card:hover, body.theme-dark .supplier-card:hover, body.theme-light .supplier-card:hover { background: var(--ds-card-bg-hover) !important; border-color: var(--ds-border-hover) !important; } body[data-theme] .supplier-card, body.theme-dark .supplier-card, body.theme-light .supplier-card { background: linear-gradient(145deg, var(--ds-surface-2), var(--ds-surface-3)) !important; color: var(--ds-text) !important; border-color: var(--ds-border) !important; box-shadow: var(--ds-shadow-soft); } /* ---------- Tables ---------- */ body[data-theme] .tprm-table .mud-table-head, body.theme-dark .tprm-table .mud-table-head, body.theme-light .tprm-table .mud-table-head { background: var(--ds-table-header-bg) !important; } body[data-theme] .tprm-table .mud-table-head th, body[data-theme] .tprm-table .mud-table-sort-label, body.theme-dark .tprm-table .mud-table-head th, body.theme-dark .tprm-table .mud-table-sort-label, body.theme-light .tprm-table .mud-table-head th, body.theme-light .tprm-table .mud-table-sort-label { color: var(--ds-text-strong) !important; } body[data-theme] .tprm-table .mud-table-body tr:nth-child(even), body.theme-dark .tprm-table .mud-table-body tr:nth-child(even), body.theme-light .tprm-table .mud-table-body tr:nth-child(even) { background: var(--ds-row-alt-bg) !important; } body[data-theme] .tprm-table .mud-table-body tr:hover, body.theme-dark .tprm-table .mud-table-body tr:hover, body.theme-light .tprm-table .mud-table-body tr:hover { background: var(--ds-row-hover-bg) !important; } body[data-theme] .tprm-table .mud-table-body td, body.theme-dark .tprm-table .mud-table-body td, body.theme-light .tprm-table .mud-table-body td { color: var(--ds-text) !important; border-bottom-color: var(--ds-border) !important; } body[data-theme] .tprm-table .mud-table-pagination, body.theme-dark .tprm-table .mud-table-pagination, body.theme-light .tprm-table .mud-table-pagination { background: var(--ds-surface-0) !important; color: var(--ds-text) !important; border-top-color: var(--ds-border) !important; } body[data-theme] .mud-table-cell, body.theme-dark .mud-table-cell, body.theme-light .mud-table-cell { color: var(--ds-text) !important; } /* ---------- Forms, inputs, selects ---------- */ body[data-theme] .mud-input, body[data-theme] .mud-input-control, body[data-theme] .mud-select, body[data-theme] .mud-select-input, body[data-theme] input, body[data-theme] textarea, body.theme-dark .mud-input, body.theme-dark .mud-input-control, body.theme-dark .mud-select, body.theme-dark .mud-select-input, body.theme-dark input, body.theme-dark textarea, body.theme-light .mud-input, body.theme-light .mud-input-control, body.theme-light .mud-select, body.theme-light .mud-select-input, body.theme-light input, body.theme-light textarea { color: var(--ds-text) !important; } body[data-theme] .mud-input-label, body.theme-dark .mud-input-label, body.theme-light .mud-input-label { color: var(--ds-text-muted) !important; } body[data-theme] .mud-input-slot, body.theme-dark .mud-input-slot, body.theme-light .mud-input-slot, body[data-theme] .tprm-search .mud-input-control, body.theme-dark .tprm-search .mud-input-control, body.theme-light .tprm-search .mud-input-control { background: var(--ds-surface-0) !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; } body[data-theme] .tprm-search input, body.theme-dark .tprm-search input, body.theme-light .tprm-search input { color: var(--ds-text) !important; } body[data-theme] .tprm-search .mud-input-adornment, body.theme-dark .tprm-search .mud-input-adornment, body.theme-light .tprm-search .mud-input-adornment { color: var(--ds-text-muted) !important; } /* ---------- Dialogs ---------- */ body[data-theme] .glass-dialog, body.theme-dark .glass-dialog, body.theme-light .glass-dialog { background: var(--ds-dialog-bg) !important; color: var(--ds-text) !important; border-color: var(--ds-border-strong) !important; } body[data-theme] .glass-dialog .mud-dialog-title, body.theme-dark .glass-dialog .mud-dialog-title, body.theme-light .glass-dialog .mud-dialog-title { color: var(--ds-text-strong) !important; background: linear-gradient(90deg, rgba(96,165,250,0.10), rgba(214,31,55,0.08)) !important; border-bottom-color: var(--ds-border) !important; } body[data-theme] .glass-dialog .mud-dialog-actions, body.theme-dark .glass-dialog .mud-dialog-actions, body.theme-light .glass-dialog .mud-dialog-actions { background: var(--ds-surface-0) !important; border-top-color: var(--ds-border) !important; } body[data-theme="light"] .glass-dialog-overlay, body.theme-light .glass-dialog-overlay { background: rgba(15, 23, 42, 0.30) !important; } /* ---------- Navigation dock ---------- */ body[data-theme] .tprm-dock, body.theme-dark .tprm-dock, body.theme-light .tprm-dock { background: var(--ds-surface-0) !important; border-color: var(--ds-border) !important; box-shadow: var(--ds-shadow-soft); } body[data-theme] .tprm-dock-item, body.theme-dark .tprm-dock-item, body.theme-light .tprm-dock-item, body[data-theme] .tprm-dock-item span, body.theme-dark .tprm-dock-item span, body.theme-light .tprm-dock-item span { color: var(--ds-text) !important; } /* ---------- Map / dependency UI ---------- */ body[data-theme] .dependency-map-page, body.theme-dark .dependency-map-page, body.theme-light .dependency-map-page, body[data-theme] .map-view-switch, body.theme-dark .map-view-switch, body.theme-light .map-view-switch, body[data-theme] .supplier-control-filterbar, body.theme-dark .supplier-control-filterbar, body.theme-light .supplier-control-filterbar, body[data-theme] .dock-header, body.theme-dark .dock-header, body.theme-light .dock-header { background: var(--ds-panel-bg) !important; color: var(--ds-text) !important; border-color: var(--ds-border-strong) !important; } body[data-theme] .process-tree, body.theme-dark .process-tree, body.theme-light .process-tree { border-left-color: var(--ds-border-strong) !important; } body[data-theme] .process-node::before, body.theme-dark .process-node::before, body.theme-light .process-node::before { background: var(--ds-border-hover) !important; } body[data-theme] .control-treatment-panel, body.theme-dark .control-treatment-panel, body.theme-light .control-treatment-panel, body[data-theme] .treatment-response-toggle, body.theme-dark .treatment-response-toggle, body.theme-light .treatment-response-toggle { background: var(--ds-surface-0) !important; color: var(--ds-text) !important; border-color: var(--ds-border) !important; } /* ---------- Buttons ---------- */ body[data-theme] .glass-add-button, body.theme-dark .glass-add-button, body.theme-light .glass-add-button { color: #ffffff !important; background: linear-gradient(135deg, rgba(37,99,235,0.90), rgba(29,78,216,0.82)) !important; border-color: var(--ds-border-strong) !important; } body[data-theme="light"] .mud-button-text, body.theme-light .mud-button-text { color: var(--ds-primary) !important; } /* ---------- Icons ---------- */ body[data-theme] .node-header .mud-icon-root, body[data-theme] .section-header .mud-icon-root, body[data-theme] .chart-header-icon, body.theme-dark .node-header .mud-icon-root, body.theme-dark .section-header .mud-icon-root, body.theme-dark .chart-header-icon, body.theme-light .node-header .mud-icon-root, body.theme-light .section-header .mud-icon-root, body.theme-light .chart-header-icon { color: var(--ds-primary) !important; } body[data-theme] .mud-icon-button, body.theme-dark .mud-icon-button, body.theme-light .mud-icon-button { color: var(--ds-primary) !important; } /* ---------- Charts / summaries ---------- */ body[data-theme] .chart-summary, body.theme-dark .chart-summary, body.theme-light .chart-summary { border-top-color: var(--ds-border) !important; } body[data-theme] .chart-summary-row strong, body.theme-dark .chart-summary-row strong, body.theme-light .chart-summary-row strong { color: var(--ds-text-strong) !important; } body[data-theme] .tprm-chart-card .mud-chart-legend, body[data-theme] .tprm-chart-card .mud-chart, body.theme-dark .tprm-chart-card .mud-chart-legend, body.theme-dark .tprm-chart-card .mud-chart, body.theme-light .tprm-chart-card .mud-chart-legend, body.theme-light .tprm-chart-card .mud-chart { color: var(--ds-text) !important; } /* ---------- Scrollbars ---------- */ body[data-theme] .vertical-scroll-only .mud-table-container, body[data-theme] .unmapped-suppliers-sidepanel .supplier-row, body.theme-dark .vertical-scroll-only .mud-table-container, body.theme-dark .unmapped-suppliers-sidepanel .supplier-row, body.theme-light .vertical-scroll-only .mud-table-container, body.theme-light .unmapped-suppliers-sidepanel .supplier-row { scrollbar-width: thin; scrollbar-color: var(--ds-border-hover) transparent; } body[data-theme] .vertical-scroll-only .mud-table-container::-webkit-scrollbar, body[data-theme] .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar, body.theme-dark .vertical-scroll-only .mud-table-container::-webkit-scrollbar, body.theme-dark .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar, body.theme-light .vertical-scroll-only .mud-table-container::-webkit-scrollbar, body.theme-light .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar { width: 8px; } body[data-theme] .vertical-scroll-only .mud-table-container::-webkit-scrollbar-track, body[data-theme] .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-track, body.theme-dark .vertical-scroll-only .mud-table-container::-webkit-scrollbar-track, body.theme-dark .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-track, body.theme-light .vertical-scroll-only .mud-table-container::-webkit-scrollbar-track, body.theme-light .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-track { background: transparent; } body[data-theme] .vertical-scroll-only .mud-table-container::-webkit-scrollbar-thumb, body[data-theme] .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-thumb, body.theme-dark .vertical-scroll-only .mud-table-container::-webkit-scrollbar-thumb, body.theme-dark .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-thumb, body.theme-light .vertical-scroll-only .mud-table-container::-webkit-scrollbar-thumb, body.theme-light .unmapped-suppliers-sidepanel .supplier-row::-webkit-scrollbar-thumb { background: var(--ds-border-hover); border-radius: 20px; } /* ---------- Risk chips: light mode needs stronger contrast ---------- */ body[data-theme="light"] .risk-chip.unknown, body.theme-light .risk-chip.unknown { background: rgba(100,116,139,0.15) !important; color: #334155 !important; } body[data-theme="light"] .risk-chip.low, body.theme-light .risk-chip.low { background: rgba(34,197,94,0.16) !important; color: #166534 !important; } body[data-theme="light"] .risk-chip.medium, body.theme-light .risk-chip.medium { background: rgba(234,179,8,0.18) !important; color: #854d0e !important; } body[data-theme="light"] .risk-chip.high, body.theme-light .risk-chip.high { background: rgba(249,115,22,0.18) !important; color: #9a3412 !important; } body[data-theme="light"] .risk-chip.critical, body.theme-light .risk-chip.critical { background: rgba(239,68,68,0.18) !important; color: #991b1b !important; } /* ---------- MudBlazor paper/popover defaults ---------- */ body[data-theme] .mud-paper, body.theme-dark .mud-paper, body.theme-light .mud-paper { color: var(--ds-text); } body[data-theme="light"] .mud-popover, body.theme-light .mud-popover { background: rgba(255,255,255,0.96) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-border) !important; } body[data-theme="dark"] .mud-popover, body.theme-dark .mud-popover { background: rgba(15,23,42,0.96) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-border) !important; } /* ---------- Utility helpers ---------- */ .theme-surface { background: var(--ds-card-bg) !important; color: var(--ds-text) !important; border: 1px solid var(--ds-border) !important; } .theme-text { color: var(--ds-text) !important; } .theme-muted { color: var(--ds-text-muted) !important; }