/** * UI themes: default (purple-gray), blue-black, white-blue. * Set data-theme on via UserSettings.applyThemeFromStorage() or user_settings.js. */ /* --- Default: Fioletowo-szary (current) --- */ :root, [data-theme="default"] { --bg-dark: #1a1a2e; --bg-darker: #16213e; --primary: #bb86fc; --primary-hover: #d4b3ff; --secondary: #03dac6; --error: #cf6679; --glass-bg: rgba(30, 30, 46, 0.65); --glass-border: rgba(255, 255, 255, 0.08); --text-main: #ffffff; --text-muted: #a0a0a0; --settings-bg: #0f0f13; --settings-text: #e6edf3; --settings-heading: #ffffff; --settings-accent: #bb86fc; --settings-muted: #8b949e; --settings-card-bg: rgba(22, 27, 34, 0.8); --settings-card-border: rgba(255, 255, 255, 0.08); --settings-input-bg: rgba(0, 0, 0, 0.3); --settings-input-border: rgba(255, 255, 255, 0.12); --settings-input-bg-hover: rgba(255, 255, 255, 0.06); --settings-input-bg-active: rgba(187, 134, 252, 0.15); --settings-toast-bg: #238636; } /* --- Niebiesko-czarny --- */ [data-theme="blue-black"] { --bg-dark: #0d1117; --bg-darker: #010409; --primary: #58a6ff; --primary-hover: #79c0ff; --secondary: #3fb950; --error: #f85149; --glass-bg: rgba(22, 27, 34, 0.8); --glass-border: rgba(255, 255, 255, 0.06); --text-main: #e6edf3; --text-muted: #8b949e; --settings-bg: #0d1117; --settings-text: #e6edf3; --settings-heading: #ffffff; --settings-accent: #58a6ff; --settings-muted: #8b949e; --settings-card-bg: rgba(22, 27, 34, 0.9); --settings-card-border: rgba(255, 255, 255, 0.06); --settings-input-bg: rgba(0, 0, 0, 0.4); --settings-input-border: rgba(255, 255, 255, 0.1); --settings-input-bg-hover: rgba(255, 255, 255, 0.05); --settings-input-bg-active: rgba(88, 166, 255, 0.12); --settings-toast-bg: #238636; /* Planner (Vite) uses tokens.scss – override same variable names so compiled CSS sees them */ --color-primary: #58a6ff; --color-primary-dark: #1f6feb; --color-primary-light: #79c0ff; --color-secondary: #3fb950; --color-bg-dark: #0d1117; --color-bg-darker: #010409; --color-bg-panel: rgba(22, 27, 34, 0.9); --color-bg-sidebar: #0d1117; --color-bg-hover: rgba(255, 255, 255, 0.06); --color-border: rgba(255, 255, 255, 0.12); --color-border-light: rgba(255, 255, 255, 0.06); --color-text-primary: #e6edf3; --color-text-secondary: #8b949e; --color-text-muted: #8b949e; --glass-bg: rgba(22, 27, 34, 0.85); --glass-border: rgba(255, 255, 255, 0.06); --input-bg: rgba(0, 0, 0, 0.4); --input-border: rgba(255, 255, 255, 0.1); --shadow-glow: 0 0 15px rgba(88, 166, 255, 0.15); } /* --- Biało-niebieski (jasny) --- */ [data-theme="white-blue"] { --bg-dark: #f0f6fc; --bg-darker: #e2e8f0; --primary: #0969da; --primary-hover: #0550ae; --secondary: #1a7f37; --error: #cf222e; --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(0, 0, 0, 0.08); --text-main: #1f2328; --text-muted: #656d76; /* Planner (Vite) tokens – jasne wartości */ --color-primary: #0969da; --color-primary-dark: #0550ae; --color-primary-light: #218bff; --color-secondary: #1a7f37; --color-bg-dark: #f0f6fc; --color-bg-darker: #e2e8f0; --color-bg-panel: rgba(255, 255, 255, 0.95); --color-bg-sidebar: #f0f6fc; --color-bg-hover: rgba(0, 0, 0, 0.04); --color-border: rgba(0, 0, 0, 0.12); --color-border-light: rgba(0, 0, 0, 0.08); --color-text-primary: #1f2328; --color-text-secondary: #656d76; --color-text-muted: #656d76; --glass-bg: rgba(255, 255, 255, 0.9); --glass-border: rgba(0, 0, 0, 0.08); --input-bg: rgba(0, 0, 0, 0.04); --input-border: rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 12px rgba(9, 105, 218, 0.15); --settings-bg: #f0f6fc; --settings-text: #1f2328; --settings-heading: #0d1117; --settings-accent: #0969da; --settings-muted: #656d76; --settings-card-bg: rgba(255, 255, 255, 0.95); --settings-card-border: rgba(0, 0, 0, 0.08); --settings-input-bg: rgba(0, 0, 0, 0.04); --settings-input-border: rgba(0, 0, 0, 0.12); --settings-input-bg-hover: rgba(0, 0, 0, 0.06); --settings-input-bg-active: rgba(9, 105, 218, 0.1); --settings-toast-bg: #1a7f37; } /* Apply theme to common app elements when theme is set */ [data-theme="blue-black"] body { background: #0d1117 !important; background-image: linear-gradient(135deg, #0d1117 0%, #010409 100%) !important; background-size: cover !important; color: #e6edf3 !important; } [data-theme="blue-black"] .btn-primary, [data-theme="blue-black"] .btn-login { background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%) !important; color: #fff !important; } [data-theme="blue-black"] .sidebar, [data-theme="blue-black"] #controls, [data-theme="blue-black"] .control-section { background: rgba(22, 27, 34, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* Planner (Vite bundle) uses compiled SCSS – override with !important so theme wins */ [data-theme="blue-black"] .main-container { background: #0d1117 !important; } [data-theme="blue-black"] .sidebar { background: rgba(22, 27, 34, 0.95) !important; border-right-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="blue-black"] .sidebar .sidebar-header { background: rgba(255, 255, 255, 0.02) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="blue-black"] .sidebar .sidebar-header .logo, [data-theme="blue-black"] .sidebar .sidebar-header h3 { color: #e6edf3 !important; } [data-theme="blue-black"] .sidebar .logo { background: linear-gradient(135deg, #1f6feb 0%, #58a6ff 100%) !important; box-shadow: 0 4px 12px rgba(88, 166, 255, 0.25) !important; } [data-theme="blue-black"] .panel, [data-theme="blue-black"] .card { background: rgba(22, 27, 34, 0.9) !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; } [data-theme="blue-black"] .panel.active, [data-theme="blue-black"] .card.active { border-color: rgba(88, 166, 255, 0.35) !important; box-shadow: 0 0 15px rgba(88, 166, 255, 0.12) !important; } [data-theme="blue-black"] .panel-header { background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="blue-black"] .panel-header h3 { color: #e6edf3 !important; background: linear-gradient(135deg, #fff 40%, #c9d1d9 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="blue-black"] .panel-header.collapsible-header:hover h3 { background: linear-gradient(135deg, #fff 0%, #58a6ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="blue-black"] .worklist-item { background: linear-gradient(135deg, rgba(88, 166, 255, 0.12) 0%, rgba(88, 166, 255, 0.06) 100%) !important; border-color: rgba(88, 166, 255, 0.3) !important; color: #e6edf3 !important; } [data-theme="blue-black"] .worklist-item:hover, [data-theme="blue-black"] .worklist-item.active { background: linear-gradient(135deg, rgba(88, 166, 255, 0.18) 0%, rgba(88, 166, 255, 0.1) 100%) !important; border-color: rgba(88, 166, 255, 0.45) !important; } [data-theme="blue-black"] .viewer-container { background: #0d1117 !important; } [data-theme="blue-black"] .validation-wizard .progress-fill { background: linear-gradient(90deg, #58a6ff, #3fb950) !important; box-shadow: 0 0 12px rgba(88, 166, 255, 0.4) !important; } [data-theme="blue-black"] .wizard-step .step-number { background: rgba(88, 166, 255, 0.15) !important; } [data-theme="blue-black"] .wizard-step.current { background: radial-gradient(circle at top left, rgba(88, 166, 255, 0.2), rgba(0, 0, 0, 0.7)) !important; box-shadow: 0 0 18px rgba(88, 166, 255, 0.3) !important; } [data-theme="blue-black"] .upload-area:hover { border-color: #58a6ff !important; background: rgba(88, 166, 255, 0.06) !important; } [data-theme="blue-black"] .modal-content, [data-theme="blue-black"] .measurement-modal { background: rgba(22, 27, 34, 0.95) !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 0 15px rgba(88, 166, 255, 0.1) !important; } [data-theme="blue-black"] .control-column { background: rgba(22, 27, 34, 0.95) !important; border-left-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="blue-black"] #header.toolbar, [data-theme="blue-black"] .toolbar { background: rgba(13, 17, 23, 0.98) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; color: #e6edf3 !important; } [data-theme="blue-black"] .toolbar .app-title.text-gradient { background: linear-gradient(135deg, #58a6ff 0%, #79c0ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="blue-black"] .loading-overlay { background: #0d1117 !important; } [data-theme="blue-black"] .viewport-wrapper { background: #0d1117 !important; } [data-theme="blue-black"] .footer-status { background: rgba(13, 17, 23, 0.95) !important; border-top-color: rgba(255, 255, 255, 0.06) !important; color: #8b949e !important; } [data-theme="blue-black"] .sidebar, [data-theme="blue-black"] .sidebar .panel-body { color: #e6edf3 !important; } [data-theme="blue-black"] .control-column, [data-theme="blue-black"] .control-column .panel-body, [data-theme="blue-black"] .control-column .data-row, [data-theme="blue-black"] .control-column .label, [data-theme="blue-black"] .control-column .value { color: #e6edf3 !important; } /* Blue-black: checkboxes, inputs, titles, buttons, sliders (override purple) */ [data-theme="blue-black"] input[type="checkbox"] { border-color: rgba(255, 255, 255, 0.3) !important; } [data-theme="blue-black"] input[type="checkbox"]:checked { background: #58a6ff !important; border-color: #58a6ff !important; box-shadow: 0 0 8px rgba(88, 166, 255, 0.4) !important; } [data-theme="blue-black"] input[type="checkbox"]:checked:hover { background: #79c0ff !important; } [data-theme="blue-black"] .btn-primary { background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%) !important; box-shadow: 0 4px 15px rgba(88, 166, 255, 0.25) !important; color: #fff !important; } [data-theme="blue-black"] .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(88, 166, 255, 0.4) !important; background: linear-gradient(135deg, #388bfd 0%, #58a6ff 100%) !important; } [data-theme="blue-black"] .btn-icon:hover, [data-theme="blue-black"] .btn-icon.active { color: #58a6ff !important; background: rgba(88, 166, 255, 0.1) !important; } [data-theme="blue-black"] .btn:hover { color: #58a6ff !important; } [data-theme="blue-black"] .nav-btn.active { background: rgba(88, 166, 255, 0.15) !important; border-color: rgba(88, 166, 255, 0.4) !important; color: #58a6ff !important; } [data-theme="blue-black"] .role-btn.active { background: rgba(88, 166, 255, 0.2) !important; border-color: rgba(88, 166, 255, 0.5) !important; color: #58a6ff !important; } [data-theme="blue-black"] .slider-label span:last-child { color: #58a6ff !important; background: rgba(88, 166, 255, 0.12) !important; } [data-theme="blue-black"] input[type="range"]::-webkit-slider-thumb { border-color: #58a6ff !important; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5) !important; } [data-theme="blue-black"] input[type="range"]:hover::-webkit-slider-thumb { background: #79c0ff !important; } [data-theme="blue-black"] input[type="range"]:active::-webkit-slider-thumb { background: #58a6ff !important; } [data-theme="blue-black"] input[type="range"]::-moz-range-thumb { background: #58a6ff !important; border: none !important; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5) !important; } [data-theme="blue-black"] input[type="range"]:hover::-moz-range-thumb { background: #79c0ff !important; } [data-theme="blue-black"] input[type="range"] { accent-color: #58a6ff; } /* Settings page: force custom range reset to avoid native square focus ring around thumb */ [data-theme="blue-black"] .settings-shell input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); accent-color: #58a6ff; outline: none !important; } [data-theme="blue-black"] .settings-shell input[type="range"]:focus, [data-theme="blue-black"] .settings-shell input[type="range"]:focus-visible { outline: none !important; box-shadow: none !important; } [data-theme="blue-black"] .settings-shell input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(88, 166, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 100%); } [data-theme="blue-black"] .settings-shell input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; margin-top: -4px; background: #ffffff !important; border: 2px solid #58a6ff !important; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5) !important; } [data-theme="blue-black"] .settings-shell input[type="range"]::-moz-range-track { height: 6px; border: none; border-radius: 999px; background: linear-gradient(90deg, rgba(88, 166, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 100%); } [data-theme="blue-black"] .settings-shell input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ffffff !important; border: 2px solid #58a6ff !important; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5) !important; } [data-theme="blue-black"] .measurement-section h4, [data-theme="blue-black"] .measurement-modal h4 { color: #58a6ff !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="blue-black"] .form-field input[type="number"]:focus, [data-theme="blue-black"] .form-field input[type="text"]:focus, [data-theme="blue-black"] .form-field select:focus { border-color: #58a6ff !important; background: rgba(0, 0, 0, 0.5) !important; } [data-theme="blue-black"] .info-box { background: rgba(88, 166, 255, 0.1) !important; border-left-color: #58a6ff !important; } [data-theme="blue-black"] .collapsible-header:hover h3, [data-theme="blue-black"] h3.text-gradient, [data-theme="blue-black"] .section-title.accent { color: #58a6ff !important; } [data-theme="blue-black"] a:not(.nav-btn):not(.btn) { color: #58a6ff !important; } [data-theme="blue-black"] a:not(.nav-btn):not(.btn):hover { color: #79c0ff !important; } [data-theme="blue-black"] .header-actions .btn-icon:hover, [data-theme="blue-black"] .header-actions .btn-sm:hover { color: #58a6ff !important; background: rgba(88, 166, 255, 0.1) !important; } [data-theme="blue-black"] .worklist-group-header { color: #8b949e !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="blue-black"] .data-group .panel-header h3 { color: #e6edf3 !important; background: linear-gradient(135deg, #fff 40%, #c9d1d9 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="blue-black"] #uploadProgressBar { background: linear-gradient(90deg, #58a6ff, #3fb950) !important; } /* Worklist: "Load Entire Study" button text (inline #bb86fc in Worklist.ts) */ [data-theme="blue-black"] .worklist-item[data-select-study] > div { color: #58a6ff !important; } /* Toolbar: user name and ADMIN/role badge (Auth.ts → .user-role-badge) */ [data-theme="blue-black"] .user-profile .user-name { color: #e6edf3 !important; } [data-theme="blue-black"] .user-profile .user-role-badge { background: rgba(88, 166, 255, 0.2) !important; color: #58a6ff !important; border-color: rgba(88, 166, 255, 0.4) !important; } /* Right panel: "Coronary Heights" and other .data-group-title */ [data-theme="blue-black"] .data-group .data-group-title { color: rgba(88, 166, 255, 0.9) !important; } [data-theme="blue-black"] .data-group .data-group-title::after { background: linear-gradient(90deg, rgba(88, 166, 255, 0.3) 0%, transparent 100%) !important; } /* 3D View Settings modal: background, checkboxes, sliders (override purple from bundle) */ [data-theme="blue-black"] #view3dSettingsModal { background: #0d1117 !important; border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="blue-black"] #view3dSettingsModal .view3d-section-title { color: #8b949e !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="checkbox"] { border-color: rgba(255, 255, 255, 0.3) !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="checkbox"]:checked { background: #58a6ff !important; border-color: #58a6ff !important; box-shadow: 0 0 8px rgba(88, 166, 255, 0.4) !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="checkbox"]:checked:hover { background: #79c0ff !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="range"]::-webkit-slider-thumb { background: #fff !important; border: 2px solid #58a6ff !important; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5) !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="range"]:hover::-webkit-slider-thumb { background: #79c0ff !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="range"]:active::-webkit-slider-thumb { background: #58a6ff !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="range"]::-moz-range-thumb { background: #58a6ff !important; border: none !important; box-shadow: 0 0 10px rgba(88, 166, 255, 0.5) !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="range"]:hover::-moz-range-thumb { background: #79c0ff !important; } [data-theme="blue-black"] #view3dSettingsModal input[type="range"] { accent-color: #58a6ff; } [data-theme="blue-black"] .clinical-summary-panel .cs-title { background: linear-gradient(135deg, #fff 0%, #58a6ff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="blue-black"] .clinical-summary-panel .cs-chip:not(.cs-muted) { background: rgba(88, 166, 255, 0.15) !important; border-color: rgba(88, 166, 255, 0.3) !important; color: #58a6ff !important; } [data-theme="blue-black"] .clinical-summary-panel .cs-metric-suggestion { color: rgba(88, 166, 255, 0.85) !important; } [data-theme="blue-black"] .clinical-summary-panel .cs-badge.cs-badge-ai { background: rgba(88, 166, 255, 0.2) !important; color: #58a6ff !important; border-color: rgba(88, 166, 255, 0.4) !important; } [data-theme="blue-black"] .clinical-summary-panel .cs-card-link, [data-theme="blue-black"] .clinical-summary-panel a.cs-link { color: #58a6ff !important; } [data-theme="blue-black"] .clinical-summary-panel .cs-card-link:hover, [data-theme="blue-black"] .clinical-summary-panel a.cs-link:hover { color: #79c0ff !important; } [data-theme="blue-black"] .clinical-summary-panel .cs-card-title { color: #58a6ff !important; } [data-theme="blue-black"] .cs-compact-actions .btn { background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%) !important; box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3) !important; } [data-theme="blue-black"] .cs-compact-actions .btn:hover { box-shadow: 0 4px 12px rgba(88, 166, 255, 0.5) !important; } /* --- White-blue (jasne tło): wymuszenie !important jak blue-black --- */ [data-theme="white-blue"] body { background: #f0f6fc !important; background-image: linear-gradient(135deg, #f0f6fc 0%, #e2e8f0 100%) !important; background-size: cover !important; color: #1f2328 !important; } [data-theme="white-blue"] .main-container { background: #f0f6fc !important; } [data-theme="white-blue"] .loading-overlay { background: #f0f6fc !important; } [data-theme="white-blue"] .viewer-container { background: #f0f6fc !important; } [data-theme="white-blue"] .viewport-wrapper { background: #f0f6fc !important; } [data-theme="white-blue"] .footer-status { background: rgba(255, 255, 255, 0.95) !important; border-top-color: rgba(0, 0, 0, 0.08) !important; color: #656d76 !important; } [data-theme="white-blue"] .sidebar { background: rgba(255, 255, 255, 0.98) !important; border-right-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="white-blue"] .sidebar .sidebar-header { background: rgba(0, 0, 0, 0.02) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="white-blue"] .sidebar .logo { background: linear-gradient(135deg, #0969da 0%, #0550ae 100%) !important; box-shadow: 0 4px 12px rgba(9, 105, 218, 0.25) !important; } [data-theme="white-blue"] .sidebar .sidebar-header h3 { color: #1f2328 !important; } [data-theme="white-blue"] .panel, [data-theme="white-blue"] .card { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; } [data-theme="white-blue"] .panel.active, [data-theme="white-blue"] .card.active { border-color: rgba(9, 105, 218, 0.35) !important; box-shadow: 0 0 12px rgba(9, 105, 218, 0.12) !important; } [data-theme="white-blue"] .panel-header { background: linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="white-blue"] .panel-header h3, [data-theme="white-blue"] .data-group .panel-header h3 { color: #1f2328 !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #1f2328 !important; } [data-theme="white-blue"] .panel-header.collapsible-header:hover h3 { color: #0969da !important; background: none !important; -webkit-text-fill-color: #0969da !important; } [data-theme="white-blue"] .worklist-item { background: linear-gradient(135deg, rgba(9, 105, 218, 0.08) 0%, rgba(9, 105, 218, 0.04) 100%) !important; border-color: rgba(9, 105, 218, 0.25) !important; color: #1f2328 !important; } [data-theme="white-blue"] .worklist-item:hover:not(.disabled), [data-theme="white-blue"] .worklist-item.active { background: linear-gradient(135deg, rgba(9, 105, 218, 0.12) 0%, rgba(9, 105, 218, 0.06) 100%) !important; border-color: rgba(9, 105, 218, 0.4) !important; } [data-theme="white-blue"] .worklist-item[data-select-study] > div { color: #0969da !important; } [data-theme="white-blue"] .control-column { background: rgba(255, 255, 255, 0.98) !important; border-left-color: rgba(0, 0, 0, 0.08) !important; color: #1f2328 !important; } [data-theme="white-blue"] .control-column .panel-body, [data-theme="white-blue"] .control-column .data-group, [data-theme="white-blue"] .control-column .data-row, [data-theme="white-blue"] .control-column .label, [data-theme="white-blue"] .control-column .value { color: #1f2328 !important; } [data-theme="white-blue"] .sidebar .panel-body, [data-theme="white-blue"] .sidebar .panel-header h3, [data-theme="white-blue"] .sidebar .worklist-group-header, [data-theme="white-blue"] .sidebar .worklist-item { color: #1f2328 !important; } [data-theme="white-blue"] .header-actions .btn-icon, [data-theme="white-blue"] .header-actions .btn-sm { color: #1f2328 !important; } [data-theme="white-blue"] #header.toolbar, [data-theme="white-blue"] .toolbar { background: rgba(255, 255, 255, 0.98) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; color: #1f2328 !important; } [data-theme="white-blue"] .toolbar .nav-btn, [data-theme="white-blue"] .toolbar .btn-icon { color: #1f2328 !important; border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(0, 0, 0, 0.04) !important; } [data-theme="white-blue"] .toolbar .nav-btn:hover, [data-theme="white-blue"] .toolbar .btn-icon:hover { background: rgba(0, 0, 0, 0.08) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1f2328 !important; } [data-theme="white-blue"] .toolbar .role-btn { color: #1f2328 !important; border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(0, 0, 0, 0.04) !important; } [data-theme="white-blue"] .toolbar .role-btn:hover { background: rgba(0, 0, 0, 0.08) !important; color: #1f2328 !important; } [data-theme="white-blue"] .toolbar .app-title.text-gradient { background: linear-gradient(135deg, #0969da 0%, #0550ae 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="white-blue"] .toolbar .text-muted, [data-theme="white-blue"] .toolbar-patient { color: #656d76 !important; } [data-theme="white-blue"] .worklist-group-header { color: #656d76 !important; background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="white-blue"] .data-group .data-group-title { color: rgba(9, 105, 218, 0.95) !important; } [data-theme="white-blue"] .data-group .data-group-title::after { background: linear-gradient(90deg, rgba(9, 105, 218, 0.3) 0%, transparent 100%) !important; } [data-theme="white-blue"] .user-profile .user-name { color: #1f2328 !important; } [data-theme="white-blue"] .user-profile .user-role-badge { background: rgba(9, 105, 218, 0.15) !important; color: #0969da !important; border-color: rgba(9, 105, 218, 0.35) !important; } [data-theme="white-blue"] .btn-primary, [data-theme="white-blue"] .btn-login { background: linear-gradient(135deg, #0969da 0%, #0550ae 100%) !important; color: #fff !important; } [data-theme="white-blue"] .btn { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #1f2328 !important; } [data-theme="white-blue"] .btn:hover { background: rgba(0, 0, 0, 0.08) !important; } [data-theme="white-blue"] .btn-icon:hover, [data-theme="white-blue"] .btn-icon.active { color: #0969da !important; background: rgba(9, 105, 218, 0.1) !important; } [data-theme="white-blue"] .nav-btn.active, [data-theme="white-blue"] .role-btn.active { background: rgba(9, 105, 218, 0.12) !important; border-color: rgba(9, 105, 218, 0.35) !important; color: #0969da !important; } [data-theme="white-blue"] input[type="checkbox"]:checked { background: #0969da !important; border-color: #0969da !important; box-shadow: 0 0 6px rgba(9, 105, 218, 0.35) !important; } [data-theme="white-blue"] input[type="checkbox"]:checked:hover { background: #0550ae !important; } [data-theme="white-blue"] input[type="range"]::-webkit-slider-thumb { border-color: #0969da !important; box-shadow: 0 0 8px rgba(9, 105, 218, 0.4) !important; } [data-theme="white-blue"] input[type="range"]::-moz-range-thumb { background: #0969da !important; box-shadow: 0 0 8px rgba(9, 105, 218, 0.4) !important; } [data-theme="white-blue"] input[type="range"] { accent-color: #0969da; } [data-theme="white-blue"] .slider-label span:last-child { color: #0969da !important; background: rgba(9, 105, 218, 0.1) !important; } [data-theme="white-blue"] #uploadProgressBar { background: linear-gradient(90deg, #0969da, #1a7f37) !important; } [data-theme="white-blue"] #view3dSettingsModal { background: #f0f6fc !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="white-blue"] #view3dSettingsModal .view3d-section-title { color: #656d76 !important; } [data-theme="white-blue"] #view3dSettingsModal input[type="checkbox"]:checked { background: #0969da !important; border-color: #0969da !important; } [data-theme="white-blue"] #view3dSettingsModal input[type="range"]::-webkit-slider-thumb { border-color: #0969da !important; } [data-theme="white-blue"] #view3dSettingsModal input[type="range"]::-moz-range-thumb { background: #0969da !important; } [data-theme="white-blue"] #view3dSettingsModal input[type="range"] { accent-color: #0969da; } [data-theme="white-blue"] .modal-content, [data-theme="white-blue"] .measurement-modal { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #1f2328 !important; } [data-theme="white-blue"] .section-title, [data-theme="white-blue"] .text-muted { color: #656d76 !important; } [data-theme="white-blue"] .app-title.text-gradient { background: linear-gradient(135deg, #0969da 0%, #0550ae 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ===== Unified toolbar (all views) ===== */ #header.toolbar, .toolbar.unified { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 12px; flex-shrink: 0; background: rgba(22, 22, 24, 0.95); border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); z-index: 100; } .toolbar .toolbar-left, .toolbar .toolbar-center, .toolbar .toolbar-right { display: flex; align-items: center; gap: 8px; } .toolbar .toolbar-left { flex: 0 0 auto; } .toolbar .toolbar-center { flex: 1; justify-content: center; } .toolbar .toolbar-right { flex: 0 0 auto; } .toolbar .app-title { margin: 0; font-size: 1.1rem; font-weight: 700; } .toolbar .app-title.text-gradient { background: linear-gradient(135deg, var(--primary, #bb86fc) 0%, var(--primary-hover, #d4b3ff) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .toolbar .toolbar-patient, .toolbar .text-muted { font-size: 0.8rem; color: var(--text-muted, #a0a0a0); } .toolbar .nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); cursor: pointer; white-space: nowrap; } .toolbar .nav-btn:hover:not(.active):not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); } .toolbar .nav-btn.active, .toolbar .nav-btn.btn-primary { font-weight: 600; } .toolbar .nav-btn .icon { opacity: 0.9; } .toolbar .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); cursor: pointer; color: inherit; } .toolbar .btn-icon:hover { background: rgba(255, 255, 255, 0.12); } /* Responsive toolbar behavior: - keep navigation available via horizontal scroll on medium widths - wrap into two rows on narrow widths */ @media (max-width: 1500px) { #header.toolbar .toolbar-patient, .toolbar.unified .toolbar-patient { display: none; } #header.toolbar .toolbar-center, .toolbar.unified .toolbar-center { justify-content: flex-start; min-width: 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } #header.toolbar .toolbar-center::-webkit-scrollbar, .toolbar.unified .toolbar-center::-webkit-scrollbar { display: none; } } @media (max-width: 1100px) { #header.toolbar, .toolbar.unified { height: auto; min-height: 48px; padding: 6px 10px; flex-wrap: wrap; row-gap: 6px; } #header.toolbar .toolbar-left, .toolbar.unified .toolbar-left { order: 1; flex: 1 1 auto; min-width: 0; } #header.toolbar .toolbar-right, .toolbar.unified .toolbar-right { order: 2; flex: 0 0 auto; margin-left: auto; min-width: 0; } #header.toolbar .toolbar-center, .toolbar.unified .toolbar-center { order: 3; flex: 1 0 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; } #header.toolbar .app-title, .toolbar.unified .app-title { font-size: 1rem; white-space: nowrap; } } @media (max-width: 720px) { #header.toolbar .toolbar-right .nav-btn, #header.toolbar .toolbar-right #btnPrintReport, #header.toolbar .toolbar-right #btnCopyClinicalSummaryLink, .toolbar.unified .toolbar-right .nav-btn, .toolbar.unified .toolbar-right #btnPrintReport, .toolbar.unified .toolbar-right #btnCopyClinicalSummaryLink { display: none; } #header.toolbar .toolbar-center .nav-btn, .toolbar.unified .toolbar-center .nav-btn { padding: 5px 8px; font-size: 0.78rem; } }