/* PreciseSystem.Blazor — OTS-aligned design tokens */ /* Hide PH chart subcooling/superheat annotations — values don't match solver exactly. Extra ancestor selector provides specificity to override chart library CSS. */ .ps-designer-layout .ph-chart .sc-sh-label { display: none; } :root { --ps-primary: var(--ots-primary, #0071bc); --ps-bg: var(--ots-bg-primary, #ffffff); --ps-panel: var(--ots-bg-secondary, #f8f9fa); --ps-text: var(--ots-text-primary, #212529); --ps-muted: var(--ots-text-secondary, #6c757d); --ps-border: var(--ots-border, #dee2e6); --ps-btn-bg: var(--ots-bg-tertiary, #e9ecef); --ps-btn-hover: var(--ots-border, #dee2e6); --ps-success: var(--ots-success, #0cb14b); --ps-danger: var(--ots-danger, #dc3545); --ps-error-bg: #fdf0f0; --ps-error-border: #e8c4c4; --ps-error-text: var(--ots-invalid-text, #9a3030); --ps-warning-bg: var(--ots-warning-bg, #fff3cd); --ps-warning-border: #e6c34d; --ps-warning-text: var(--ots-warning-text, #664d03); --ps-overlay-bg: rgba(255, 255, 255, 0.7); --ps-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ps-radius: 8px; --ps-focus-ring: var(--ots-focus-ring, #258cfb); --ps-cascade-green: var(--ots-success, #0cb14b); --ps-exhaust-orange: var(--ots-chart-5, #fd7e14); } [data-bs-theme="dark"] { --ps-primary: var(--ots-primary, #3ea6ff); --ps-bg: var(--ots-bg-primary, #212529); --ps-panel: var(--ots-bg-secondary, #2b3035); --ps-text: var(--ots-text-primary, #f8f9fa); --ps-muted: var(--ots-text-secondary, #adb5bd); --ps-border: var(--ots-border, #495057); --ps-btn-bg: var(--ots-bg-tertiary, #343a40); --ps-btn-hover: var(--ots-border, #495057); --ps-success: var(--ots-success, #2ed573); --ps-danger: var(--ots-danger, #f87171); --ps-error-bg: #2d1a1a; --ps-error-border: #5a2a2a; --ps-error-text: var(--ots-invalid-text, #f87171); --ps-warning-bg: var(--ots-warning-bg, #3b3010); --ps-warning-border: #5a4d2a; --ps-warning-text: var(--ots-warning-text, #fbbf24); --ps-overlay-bg: rgba(33, 37, 41, 0.7); --ps-cascade-green: var(--ots-success, #2ed573); --ps-exhaust-orange: var(--ots-chart-5, #fb923c); } /* Explicit light-mode override — needed when a parent has data-bs-theme="dark" (e.g., set from cookie) but the inner designer layout is light. Without this rule, the inner element's data-bs-theme="light" can't reset the variables that were set by the dark rule above. */ [data-bs-theme="light"] { --ps-primary: var(--ots-primary, #0071bc); --ps-bg: var(--ots-bg-primary, #ffffff); --ps-panel: var(--ots-bg-secondary, #f8f9fa); --ps-text: var(--ots-text-primary, #212529); --ps-muted: var(--ots-text-secondary, #6c757d); --ps-border: var(--ots-border, #dee2e6); --ps-btn-bg: var(--ots-bg-tertiary, #e9ecef); --ps-btn-hover: var(--ots-border, #dee2e6); --ps-success: var(--ots-success, #0cb14b); --ps-danger: var(--ots-danger, #dc3545); --ps-error-bg: #fdf0f0; --ps-error-border: #e8c4c4; --ps-error-text: var(--ots-invalid-text, #9a3030); --ps-warning-bg: var(--ots-warning-bg, #fff3cd); --ps-warning-border: #e6c34d; --ps-warning-text: var(--ots-warning-text, #664d03); --ps-overlay-bg: rgba(255, 255, 255, 0.7); --ps-cascade-green: var(--ots-success, #0cb14b); --ps-exhaust-orange: var(--ots-chart-5, #fd7e14); } /* ── Layout ── */ .ps-designer-layout { display: flex; flex-direction: column; background: var(--ps-bg); color: var(--ps-text); font-family: var(--ps-font); } .ps-designer-layout.ps-designer-loading > .ps-designer-body { opacity: 0; } .ps-designer-layout:not(.ps-designer-loading) > .ps-designer-body { animation: ps-fade-in 0.15s ease-out; } .ps-loading-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 48px 16px; color: var(--ps-muted, #6c757d); font-size: 0.875rem; } .ps-loading-error { display: flex; align-items: center; justify-content: center; padding: 48px 16px; color: var(--ps-danger, #dc3545); font-size: 0.875rem; text-align: center; } @keyframes ps-fade-in { from { opacity: 0; } to { opacity: 1; } } .ps-designer-layout .ps-designer-body { display: flex; height: 100%; } .ps-designer-layout .ps-designer-sidebar { width: 320px; min-width: 320px; height: 100%; max-height: 100vh; position: sticky; top: 0; align-self: flex-start; border-right: 1px solid var(--ps-border); overflow: hidden; display: flex; flex-direction: column; background: var(--ps-panel); } .ps-designer-layout .ps-sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; } .ps-designer-layout .ps-sidebar-header { padding: 8px 16px; border-bottom: 1px solid var(--ps-border); display: flex; justify-content: flex-end; flex-shrink: 0; } .ps-designer-layout .ps-sidebar-header-toggles { display: flex; gap: 8px; } .ps-designer-layout .ps-perf-column { width: 180px; min-width: 180px; border-right: 1px solid var(--ps-border); padding: 16px 12px; overflow-y: auto; background: var(--ps-panel); } .ps-designer-layout .ps-designer-main { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; min-width: 0; } .ps-designer-layout .ps-chart-area { position: relative; flex: 1; min-height: 200px; max-height: calc(100vh - 200px); border: 1px solid var(--ps-border); border-radius: var(--ps-radius); overflow: hidden; } /* ── Control Panel ── */ .ps-designer-layout .ps-control-panel { font-family: var(--ps-font); color: var(--ps-text); padding: 12px; display: flex; flex-direction: column; gap: 12px; } .ps-designer-layout .ps-control-section { border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 10px; background: var(--ps-bg); } .ps-designer-layout .ps-control-section h4 { margin: 0 0 6px 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ps-muted); } .ps-designer-layout .ps-control-label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 4px; color: var(--ps-muted); } .ps-designer-layout .ps-control-select { width: 100%; padding: 6px 8px; border: 1px solid var(--ps-border); border-radius: 4px; background: var(--ps-panel); color: var(--ps-text); font-size: 0.8125rem; font-family: var(--ps-font); } .ps-designer-layout .ps-control-select:focus { outline: none; border-color: var(--ps-primary); box-shadow: 0 0 0 2px var(--ps-focus-ring); } .ps-designer-layout .ps-refrigerant-description, .ps-designer-layout .ps-system-description { display: block; font-size: 0.75rem; color: var(--ps-muted); margin-top: 4px; font-style: italic; line-height: 1.3; } /* ── Model detail tier (slim inline dropdown inside System section) ── */ .ps-designer-layout .ps-model-detail-select { padding: 4px 6px; font-size: 0.75rem; } .ps-designer-layout .ps-model-detail-note { display: block; font-size: 0.7rem; color: var(--ps-muted); margin-top: 4px; line-height: 1.3; } /* ── Sliders ── */ .ps-designer-layout .ps-slider-row { display: grid; grid-template-columns: 100px 1fr 90px; align-items: center; gap: 8px; margin-bottom: 6px; } .ps-designer-layout .ps-slider-row label { font-size: 0.8125rem; font-weight: 500; color: var(--ps-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-designer-layout .ps-slider-row input[type="range"] { width: 100%; height: 4px; } .ps-designer-layout .ps-slider-value { display: flex; align-items: center; gap: 2px; justify-content: flex-end; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ps-primary); min-width: 0; } .ps-designer-layout .ps-slider-value input[type="number"] { width: 48px; min-height: 26px; padding: 4px 6px; border: 1px solid var(--ps-border); border-radius: 4px; background: var(--ps-panel); color: var(--ps-primary); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-family: var(--ps-font); -moz-appearance: textfield; } .ps-designer-layout .ps-slider-value input[type="number"]::-webkit-inner-spin-button, .ps-designer-layout .ps-slider-value input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ps-designer-layout .ps-slider-value input[type="number"]:hover { border-color: var(--ps-muted); } .ps-designer-layout .ps-slider-value input[type="number"]:focus { outline: none; border-color: var(--ps-primary); box-shadow: 0 0 0 2px var(--ps-focus-ring); } .ps-designer-layout .ps-slider-value span { font-size: 0.75rem; color: var(--ps-muted); font-weight: 400; width: 32px; text-align: left; flex-shrink: 0; } /* ── Input rows ── */ .ps-designer-layout .ps-input-row { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 8px; margin-bottom: 6px; } .ps-designer-layout .ps-input-row label { font-size: 0.8125rem; font-weight: 500; color: var(--ps-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ps-designer-layout .ps-input-row input[type="number"] { width: 100%; min-height: 26px; padding: 4px 6px; border: 1px solid var(--ps-border); border-radius: 4px; background: var(--ps-panel); color: var(--ps-text); font-size: 0.8125rem; font-variant-numeric: tabular-nums; font-family: var(--ps-font); } /* ── Segmented control (3-way picker, alternative to a 3-option