/* --- START OF FINAL FILE: gui_style.css (with color corrections) --- */
:root {
    --bg-dark: #0d1117;
    --bg-widget: #161b22;
    --border-color: #30363d;
    --accent-color: #58a6ff;
    --accent-glow: rgba(88, 166, 255, 0.3);
    --accent-strong-glow: rgba(88, 166, 255, 0.6);
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-danger: #f85149;
    --text-warning: #f9a825;
    --text-success: #3fb950;
    --font-family-mono: 'Fira Code', monospace;
}
body { 
    background-color: var(--bg-dark); 
    color: var(--text-primary); 
    font-family: var(--font-family-mono); 
    margin: 0; 
    padding: 1.5rem; 
    box-sizing: border-box; 
}

/* V3: Tab Navigation */
.main-header { margin-bottom: 1.5rem; }
.tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-color); }
.tab-btn { font-family: var(--font-family-mono); font-size: 0.9rem; background: none; border: none; color: var(--text-secondary); padding: 0.75rem 1.25rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent-color); font-weight: 600; }
.hidden { display: none !important; }

/* Dashboard and Settings Panels */
.dashboard-grid { 
    display: grid; 
    grid-template-columns: 250px 1fr 300px; 
    grid-template-rows: auto 1fr auto; 
    gap: 1rem; 
}
.settings-panel { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ADDED: PSU Control Panel Layout */
.psu-control-panel { max-width: 1400px; margin: 0 auto; }
.psu-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; height: calc(100vh - 8rem); }
.psu-controls-widget { grid-column: 1 / 2; }
.psu-log-widget { grid-column: 2 / 3; display: flex; flex-direction: column; }
.psu-log-widget .log-feed { flex-grow: 1; }
.psu-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; padding-bottom: 0; border-bottom: none; }
.psu-tab-btn { font-size: 0.85rem; background: none; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 0.5rem 1rem; cursor: pointer; border-radius: 6px 6px 0 0; border-bottom: none; transition: all 0.2s ease; }
.psu-tab-btn.active { background-color: var(--bg-dark); border-color: var(--border-color); color: var(--text-primary); border-bottom: 1px solid var(--bg-dark); margin-bottom: -1px; }
.psu-tab-content { padding: 1rem; border: 1px solid var(--border-color); border-radius: 0 6px 6px 6px; margin-top: -1px; display: flex; flex-direction: column; gap: 1rem; }
.psu-tab-content.hidden { display: none; }
.control-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border: 1px solid var(--border-color); padding: 1rem; border-radius: 4px; }
.control-group h4 { width: 100%; margin: -0.5rem 0 0.5rem 0; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
.input-with-button { display: flex; align-items: center; gap: 0.5rem; }
.input-with-button label { font-size: 0.9rem; }
.input-with-button input[type="text"], .input-with-button input[type="number"] { font-family: var(--font-family-mono); width: 80px; padding: 0.3rem; background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); text-align: center; font-size: 0.9rem; }
.checkbox-item-psu { display: flex; align-items: center; }
.checkbox-item-psu label { cursor: pointer; font-size: 0.9rem; }
.checkbox-item-psu input[type="checkbox"] { margin-right: 0.5rem; }
.direct-command-wrapper { display: flex; gap: 0.5rem; padding: 0.5rem; border-top: 1px solid var(--border-color); }
.direct-command-wrapper input { flex-grow: 1; font-family: var(--font-family-mono); background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); padding: 0.5rem; }
.clear-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; }
.clear-btn:hover { color: var(--accent-color); }
.log-entry.log-cmd { color: var(--text-warning); }
.log-entry.log-data { color: var(--text-success); }
.log-entry.log-error { color: var(--text-danger); font-weight: 600; }


.widget { background-color: var(--bg-widget); border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; transition: all 0.3s ease; }
.widget:hover { border-color: var(--accent-color); box-shadow: 0 0 12px var(--accent-glow); }
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; }
.widget-header h3 { margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); }

.settings-content p { color: var(--text-secondary); margin-top: 0; font-size: 0.9rem; }
.checkbox-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.checkbox-item { display: flex; align-items: center; }
.checkbox-item input[type="checkbox"] { opacity: 0; width: 0; height: 0; }
.checkbox-item label { cursor: pointer; display: flex; align-items: center; font-size: 0.9rem; }
.checkbox-item label::before { content: ''; display: inline-block; width: 18px; height: 18px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-dark); margin-right: 0.75rem; transition: all 0.2s ease; }
.checkbox-item input:checked + label::before { background-color: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 0 8px var(--accent-glow); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230d1117' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; }

.connection-controls { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
#serial-port-selector, #psu-port-selector { font-family: var(--font-family-mono); flex-grow: 1; padding: 0.5rem; background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 0.9rem; min-width: 200px; }
#serial-port-selector:focus, #psu-port-selector:focus { border-color: var(--accent-color); box-shadow: 0 0 8px var(--accent-glow); outline: none; }
#connect-port-btn, #connect-psu-btn, .control-group button, .direct-command-wrapper button { font-family: var(--font-family-mono); font-size: 0.9rem; background-color: var(--border-color); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; }
#connect-port-btn:hover, #connect-psu-btn:hover, .control-group button:hover, .direct-command-wrapper button:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--bg-dark); }
#connect-port-btn:disabled, #connect-psu-btn:disabled, .control-group button:disabled, .direct-command-wrapper button:disabled { background-color: #21262d; border-color: #30363d; color: #8b949e; cursor: not-allowed; }
#connection-status, #psu-connection-status { font-size: 0.9rem; color: var(--text-secondary); margin-top: 1rem; width: 100%; }
#connection-status-text.status-connected, #psu-connection-status-text.status-connected { color: var(--text-success); font-weight: 600; }
#connection-status-text.status-failed, #psu-connection-status-text.status-failed { color: var(--text-danger); font-weight: 600; }
#connection-status-text.status-controller-halted, #psu-connection-status-text.status-controller-halted { color: var(--text-warning); font-weight: 600; }
#connection-status-text.status-disconnected, #psu-connection-status-text.status-disconnected { color: var(--text-secondary); font-weight: 400; }
.reset-controls { margin-top: 1rem; }
.btn-danger { font-family: var(--font-family-mono); font-size: 1rem; font-weight: 600; background-color: var(--text-danger); color: var(--bg-dark); border: 1px solid var(--text-danger); border-radius: 6px; padding: 0.75rem 1.5rem; cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; }
.btn-danger:hover { background-color: #e0443c; border-color: #e0443c; box-shadow: 0 0 12px rgba(248, 81, 73, 0.6); }
.btn-danger:disabled { background-color: var(--border-color); border-color: var(--border-color); color: var(--text-secondary); cursor: not-allowed; }

.widget-main-stats { grid-area: 1 / 1 / 2 / 2; }
.widget-zones { grid-area: 2 / 1 / 3 / 2; }
.widget-power { grid-area: 3 / 1 / 4 / 2; }
.widget-chart { grid-area: 1 / 2 / 4 / 3; }
.widget-system-log { grid-area: 1 / 3 / 4 / 4; }
.temp-display { display: flex; flex-direction: column; gap: 1.25rem; flex-grow: 1; justify-content: center; }
.temp-display .current, .temp-display .target { text-align: center; }
.temp-display label { font-size: 0.75rem; color: var(--text-secondary); display: block; margin-top: 0.25rem; }
.temp-display .current span { font-size: 3.25rem; font-weight: 600; line-height: 1; color: var(--accent-color); text-shadow: 0 0 10px var(--accent-strong-glow); }
.temp-display .target span { font-size: 1.8rem; font-weight: 400; }
.temp-controls { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 0.75rem; }
#manual-temp-input { font-family: var(--font-family-mono); width: 80px; padding: 0.3rem; background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); text-align: center; font-size: 1rem; transition: all 0.2s ease; -moz-appearance: textfield; }
#manual-temp-input:focus { border-color: var(--accent-color); box-shadow: 0 0 8px var(--accent-glow); outline: none; }
#manual-temp-input::-webkit-outer-spin-button, #manual-temp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#set-temp-btn { font-family: var(--font-family-mono); font-size: 0.9rem; background-color: var(--border-color); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer; transition: all 0.2s ease; }
#set-temp-btn:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--bg-dark); }
.status-indicator { width: 12px; height: 12px; border-radius: 50%; background-color: var(--text-secondary); box-shadow: none; transition: all 0.5s ease; }
.status-indicator.idle { background-color: var(--text-success); box-shadow: 0 0 8px var(--text-success); }

/* --- CHANGE IS HERE: Colors are swapped --- */
/* Blue for Cooling */
.status-indicator.cooling { background-color: var(--accent-color); box-shadow: 0 0 8px var(--accent-strong-glow); }
/* Yellow for Heating */
.status-indicator.heating { background-color: var(--text-warning); box-shadow: 0 0 8px var(--text-warning); }

.status-indicator.passive-cooling, .status-indicator.passive-heating { background-color: #a371f7; box-shadow: 0 0 8px #a371f7; }
.zone-list { overflow-y: auto; flex-grow: 1; }
.zone-item { padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: space-between; align-items: center; }
.zone-item:hover { border-color: var(--accent-color); background-color: rgba(88, 166, 255, 0.1); }
.zone-item.active { border-color: var(--accent-color); box-shadow: 0 0 8px var(--accent-glow), inset 0 0 5px rgba(88, 166, 255, 0.1); background-color: rgba(88, 166, 255, 0.15); }
.zone-item-name { font-weight: 600; }
.zone-item-temp { color: var(--text-secondary); }
.power-display { text-align: center; margin: auto 0; }
.power-display span { font-size: 2.25rem; font-weight: 600; line-height: 1; color: var(--text-primary); }
.power-display label { font-size: 0.9rem; color: var(--text-secondary); display: block; margin-top: 0.25rem; }
.chart-container { flex-grow: 1; position: relative; min-height: 200px; }
.telemetry-chart-container { min-height: 220px; }
.log-feed { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; font-size: 0.75rem; padding-right: 0.5rem; }
.log-entry { padding: 0.4rem 0; border-top: 1px solid var(--border-color); line-height: 1.4; opacity: 0.85; }
.log-entry:first-child { border-top: none; }
.log-entry.alert { color: var(--text-danger); font-weight: 600; }
.log-entry.alert::before { content: "⚠️ "; }
@media (max-width: 1400px) { .psu-main-grid { grid-template-columns: 1.5fr 1fr; } }
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: 220px 1fr; grid-template-rows: auto auto 1fr; } .widget-main-stats, .widget-power, .widget-zones, .widget-chart, .widget-system-log { grid-area: auto; } .psu-main-grid { grid-template-columns: 1fr; height: auto; } .telemetry-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { body { padding: 0.5rem; } .dashboard-grid, .psu-main-grid, .telemetry-grid { display: flex; flex-direction: column; height: auto; gap: 0.5rem; } .settings-panel { gap: 0.5rem; } .widget { border-radius: 6px; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); margin-bottom: 0.5rem; } .widget:last-child { margin-bottom: 0; } .widget-chart .chart-container, .telemetry-chart-container { min-height: 250px; } .log-feed { font-size: 0.7rem; } .control-group { flex-direction: column; align-items: stretch; } }