/* STEP 06L: larger operational numbers and user-selectable visual themes */
.thermoai-shell,
.thermoai-shell input,
.thermoai-shell select,
.thermoai-shell button,
.thermoai-shell table {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Increase data values without making the surrounding labels bulky. */
.professional-nav-code {
    font-size: 11px !important;
    font-weight: 800;
}

#savingsKpi {
    font-size: 32px !important;
    line-height: 1;
}

#baselineKpi,
#optimizedKpi {
    font-size: 22px !important;
}

#projectedEnergyKpi {
    font-size: 29px !important;
}

.energy-display span,
.thermoai-demand-pair strong,
.gauge-value-text span {
    font-size: 13px !important;
}

.equipment-live-value {
    font-size: 16px !important;
    font-weight: 800;
}

.equipment-live-detail {
    font-size: 11px !important;
}

.optimizer-approach-values strong {
    font-size: 17px !important;
    font-weight: 800;
}

.optimizer-ai-recommendation strong {
    font-size: 15px !important;
}

.agent-metrics strong,
#confidenceKpi,
#safetyKpi {
    font-size: 16px !important;
}

.agent-cycle-timing strong {
    font-size: 13px !important;
}

.thermoai-context strong,
.live-context-strip strong {
    font-size: 13.5px !important;
}

.status-pill,
.count-chip,
.connection-pill,
#optimizerApproachLiveState {
    font-size: 11px !important;
}

.thermoai-timeline .event-item strong,
.thermoai-timeline .event-item time,
.compact-table-wrap td,
.compact-table-wrap th {
    font-size: 12px !important;
}

.thermoai-timeline .event-item p {
    font-size: 11.5px !important;
}

/* Compact two-option theme control in the top bar. */
.optimizer-theme-control {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 5px 4px 8px;
    border: 1px solid #24404a;
    border-radius: 10px;
    background: rgba(6, 18, 25, .62);
}

.optimizer-theme-label {
    color: #6f929d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.optimizer-theme-options {
    display: flex;
    gap: 3px;
}

.optimizer-theme-options button {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #8faab3;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.optimizer-theme-options button:hover {
    color: #f3fdff;
    background: rgba(255, 255, 255, .055);
}

.optimizer-theme-options button.active {
    color: #07151b;
    border-color: #63ead4;
    background: #63ead4;
    box-shadow: 0 4px 14px rgba(49, 219, 194, .18);
}

.optimizer-theme-options i {
    width: 8px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: #07141c;
}

.optimizer-theme-options [data-optimizer-theme-choice="blue"] i {
    background: #348cf2;
}

/* DARK LAB: existing engineering appearance with slightly cleaner contrast. */
.thermoai-shell[data-optimizer-theme="dark"] {
    --lab-text: #f4fbfd;
    --lab-muted: #a9bec6;
}

/* BLUE STUDIO: blue-gradient workspace and floating white instrument cards. */
.thermoai-shell[data-optimizer-theme="blue"] {
    --lab-bg: #e9f3ff;
    --lab-deck: #2d88f1;
    --lab-panel: #ffffff;
    --lab-panel-alt: #f2f7ff;
    --lab-line: #cfdded;
    --lab-text: #17253d;
    --lab-muted: #60758e;
    --lab-cyan: #1688f5;
    --lab-green: #1eae68;
    --lab-blue: #5865ed;
    --lab-amber: #bd6909;
    color: var(--lab-text);
    background:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,.23), transparent 24%),
        radial-gradient(circle at 82% 72%, rgba(76,42,214,.13), transparent 28%),
        linear-gradient(145deg, #49a6ff 0%, #2f8bf3 42%, #2478e6 100%) !important;
    background-attachment: fixed !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-workspace {
    background: transparent !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-sidebar {
    border-right-color: rgba(255,255,255,.18) !important;
    background:
        linear-gradient(180deg, rgba(13,79,171,.98), rgba(20,91,185,.94)) !important;
    box-shadow: 12px 0 32px rgba(14, 72, 153, .18);
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-brand strong,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-brand small {
    color: #ffffff !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .professional-nav-heading {
    color: #a8cffc !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .professional-nav-item {
    color: #d7eaff;
}

.thermoai-shell[data-optimizer-theme="blue"] .professional-nav-item:hover {
    color: #ffffff;
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.09);
}

.thermoai-shell[data-optimizer-theme="blue"] .professional-nav-item.active {
    color: #ffffff;
    border-color: rgba(255,255,255,.32);
    background: rgba(255,255,255,.17);
    box-shadow: inset 3px 0 0 #8ff5e0, 0 8px 24px rgba(0,48,120,.12);
}

.thermoai-shell[data-optimizer-theme="blue"] .professional-nav-code {
    color: #ffffff;
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
}

.thermoai-shell[data-optimizer-theme="blue"] .professional-nav-copy small {
    color: #b9d9ff;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-control-lock {
    color: #ffffff;
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.1);
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-control-lock strong,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-control-lock small {
    color: #e5f2ff;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-topbar,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-context {
    color: #17253d;
    border-color: #cfdded !important;
    background: rgba(255,255,255,.965) !important;
    box-shadow: 0 8px 24px rgba(23, 79, 153, .09);
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-topbar h1,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-context strong,
.thermoai-shell[data-optimizer-theme="blue"] .user-chip strong {
    color: #17253d !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .breadcrumb,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-context span {
    color: #3676b8 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-sheetbar {
    color: #ffffff;
    background: rgba(24,104,210,.22);
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-mode {
    color: #fff4cf !important;
    text-shadow: 0 1px 2px rgba(19,66,126,.34);
}

.thermoai-shell[data-optimizer-theme="blue"] .panel {
    color: #17253d;
    border-color: rgba(210,224,241,.96) !important;
    background: rgba(255,255,255,.975) !important;
    box-shadow: 0 14px 35px rgba(17,70,145,.16) !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .panel-heading,
.thermoai-shell[data-optimizer-theme="blue"] .compact-heading {
    border-bottom-color: #d8e4f2 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] h1,
.thermoai-shell[data-optimizer-theme="blue"] h2,
.thermoai-shell[data-optimizer-theme="blue"] h3,
.thermoai-shell[data-optimizer-theme="blue"] h4,
.thermoai-shell[data-optimizer-theme="blue"] .panel strong,
.thermoai-shell[data-optimizer-theme="blue"] .panel b {
    color: #17253d;
}

.thermoai-shell[data-optimizer-theme="blue"] .section-index {
    color: #117ae8 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] input,
.thermoai-shell[data-optimizer-theme="blue"] select,
.thermoai-shell[data-optimizer-theme="blue"] .signout-button,
.thermoai-shell[data-optimizer-theme="blue"] .text-button {
    color: #1d3150 !important;
    border-color: #c9d9ec !important;
    background: #ffffff !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .simulation-chip,
.thermoai-shell[data-optimizer-theme="blue"] .status-pill,
.thermoai-shell[data-optimizer-theme="blue"] .connection-pill,
.thermoai-shell[data-optimizer-theme="blue"] .count-chip,
.thermoai-shell[data-optimizer-theme="blue"] .no-write-chip,
.thermoai-shell[data-optimizer-theme="blue"] .deterministic-chip {
    color: #08765a !important;
    border-color: #8bdac7 !important;
    background: #e9fff8 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-gauge,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-demand-pair > div,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-readiness-strip > div,
.thermoai-shell[data-optimizer-theme="blue"] .agent-metrics > div,
.thermoai-shell[data-optimizer-theme="blue"] .catalog-readiness-grid > div,
.thermoai-shell[data-optimizer-theme="blue"] .agent-cycle-timing > div {
    color: #17253d;
    border-color: #d8e4f2 !important;
    background: #f2f7ff !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-gauge {
    background:
        radial-gradient(circle at 50% 52%, rgba(41,139,246,.12), transparent 62%),
        #f2f7ff !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .gauge-track {
    stroke: #cfdded;
}

.thermoai-shell[data-optimizer-theme="blue"] .gauge-value {
    stroke: #238bf1;
}

.thermoai-shell[data-optimizer-theme="blue"] .gauge-value-text strong,
.thermoai-shell[data-optimizer-theme="blue"] .thermoai-demand-pair b,
.thermoai-shell[data-optimizer-theme="blue"] .agent-metrics strong {
    color: #17253d !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .gauge-value-text span,
.thermoai-shell[data-optimizer-theme="blue"] .equipment-live-value {
    color: #087cd8 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-energy-meter {
    border-color: #b9d7f5 !important;
    background: linear-gradient(145deg, #f3f8ff, #ffffff) !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .energy-display {
    color: #087a55;
    border-color: #b9d7f5;
    background: #eaf5ff;
}

.thermoai-shell[data-optimizer-theme="blue"] .thermoai-flow-map {
    background-color: #f2f8ff;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(41,139,246,.1), transparent 65%),
        linear-gradient(rgba(29,126,229,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,126,229,.07) 1px, transparent 1px) !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .flow-equipment {
    color: #17253d;
    border-color: #b7d5f2;
    background: rgba(255,255,255,.96);
    box-shadow: 0 7px 18px rgba(31,93,170,.08);
}

.thermoai-shell[data-optimizer-theme="blue"] .equipment-icon,
.thermoai-shell[data-optimizer-theme="blue"] .agent-orbit {
    color: #167fe6;
    border-color: #48a5f8;
    background: #e9f5ff;
}

.thermoai-shell[data-optimizer-theme="blue"] .flow-equipment small,
.thermoai-shell[data-optimizer-theme="blue"] .equipment-live-detail,
.thermoai-shell[data-optimizer-theme="blue"] .optimizer-signalr-proof {
    color: #5b7490 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-approach-panel {
    color: #17253d;
    border-color: #b9d8f6;
    background: #f8fbff;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-approach-values > div,
.thermoai-shell[data-optimizer-theme="blue"] .optimizer-ai-recommendation > div,
.thermoai-shell[data-optimizer-theme="blue"] .optimizer-ai-recommendation > p {
    color: #17253d;
    border-color: #cee0f1;
    background: #edf5ff;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-approach-values .formula-result {
    border-color: #34bba0;
    background: #e9fff8;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-approach-values strong,
.thermoai-shell[data-optimizer-theme="blue"] .optimizer-approach-heading strong {
    color: #18304f !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-ai-recommendation strong {
    color: #087653 !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .agent-state small,
.thermoai-shell[data-optimizer-theme="blue"] .agent-cycle-timing small,
.thermoai-shell[data-optimizer-theme="blue"] .agent-boundary small {
    color: #58718b !important;
}

.thermoai-shell[data-optimizer-theme="blue"] .agent-boundary {
    color: #8d5204;
    border: 1px solid #f0d294;
    background: #fff7e6;
}

.thermoai-shell[data-optimizer-theme="blue"] .primary-button {
    color: #ffffff !important;
    border-color: #247fe7 !important;
    background: linear-gradient(135deg, #4ba9ff, #297fe7) !important;
    box-shadow: 0 8px 22px rgba(31,112,213,.2);
}

.thermoai-shell[data-optimizer-theme="blue"] .event-item,
.thermoai-shell[data-optimizer-theme="blue"] .rule-card,
.thermoai-shell[data-optimizer-theme="blue"] .command-card,
.thermoai-shell[data-optimizer-theme="blue"] .mapping-result,
.thermoai-shell[data-optimizer-theme="blue"] .explanation-content {
    color: #243854;
    border-color: #d2e0ef !important;
    background: #f6f9fe !important;
}

.thermoai-shell[data-optimizer-theme="blue"] table {
    color: #20334f;
    background: #ffffff;
}

.thermoai-shell[data-optimizer-theme="blue"] th {
    color: #2d5d8f;
    border-color: #d6e2ef;
    background: #edf5ff;
}

.thermoai-shell[data-optimizer-theme="blue"] td {
    color: #233853;
    border-color: #e0e9f3;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-theme-control {
    border-color: #c7d8eb;
    background: #eef5ff;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-theme-label {
    color: #55779c;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-theme-options button {
    color: #55708d;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-theme-options button:hover {
    color: #18304e;
    background: #dcecff;
}

.thermoai-shell[data-optimizer-theme="blue"] .optimizer-theme-options button.active {
    color: #ffffff;
    border-color: #2d86ed;
    background: #2d86ed;
}

.candidate-fan-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

.candidate-fan-state.on {
    color: #54e29a;
    background: rgba(84, 226, 154, .10);
}

.candidate-fan-state.off {
    color: #ffbd59;
    background: rgba(255, 189, 89, .10);
}

.candidate-fan-state.hold,
.candidate-fan-state.unknown {
    color: #9db5c4;
    background: rgba(157, 181, 196, .10);
}

.command-card.fan-status-advisory {
    border-color: #2fc9b1;
}

.command-card.fan-status-advisory .command-value {
    color: #7dff78;
}

@media (max-width: 1300px) {
    .optimizer-theme-label {
        display: none;
    }

    .optimizer-theme-options button {
        padding-right: 6px;
        padding-left: 6px;
    }
}

@media (max-width: 1050px) {
    .optimizer-theme-options button {
        width: 29px;
        overflow: hidden;
        color: transparent !important;
        gap: 0;
    }

    .optimizer-theme-options i {
        flex: 0 0 10px;
        width: 10px;
        height: 10px;
        margin: auto;
    }
}