/* Palette and metrics mirror scada_app/styles.py (SCADA_DARK) and pfr_workspace.py; tests/test_web_palette.py checks the hex values. */
:root{--bg:#2d2d2d;--surface:#262626;--field:#3d3d3d;--btn:#4a4a4a;--alt:#444444;--line:#525252;--line2:#6e6e6e;
  --fg:#eeeeec;--dim:#adadad;--accent:#E95420;--accent-dark:#c34113;--ok:#57e389;--warn:#cd9309;--stop:#ff7b63;--err:#e01b24}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13.3px/1.3 "Segoe UI","Ubuntu","Cantarell",sans-serif}
#loading{max-width:520px;margin:15vh auto;padding:0 16px;text-align:center}
#loading h1{font-size:28px;margin:0 0 8px}
#load-error{color:#ff8b8b;text-align:left;white-space:pre-wrap}
.hint{color:var(--dim);font-size:12px}
#app{display:flex;flex-direction:column;height:100vh}
.spacer{flex:1}
button{font:inherit;color:var(--fg);background:var(--btn);border:1px solid var(--line2);border-radius:4px;padding:4px 14px;cursor:pointer}
button:hover:not(:disabled){background:#5c5c5c;border-color:#888888}
button:active:not(:disabled){background:var(--field)}
button:disabled{opacity:.5;cursor:default}
input[type=number]{font:inherit;color:var(--fg);background:var(--field);border:1px solid var(--line2);border-radius:4px;padding:2px 4px}
input[type=number]:focus{border-color:#3584e4;outline:none}

/* Header: 44 px */
#hdr{height:44px;flex:none;display:flex;align-items:center;padding:0 14px;background:var(--surface);border-bottom:2px solid var(--line)}
#tabs{display:flex;height:100%}
.tab{height:100%;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--dim);font-size:12px;font-weight:normal;padding:0 16px}
.tab:hover:not(:disabled){color:var(--fg);background:transparent;border-bottom-color:var(--line2)}
.tab.active,.tab.active:hover:not(:disabled){color:var(--accent);border-bottom-color:var(--accent);font-weight:bold}
.toggle{height:28px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--dim);font-size:12px;padding:0 12px}
.toggle:hover:not(:disabled){background:transparent;border-color:var(--line)}
.toggle.active,.toggle.active:hover:not(:disabled){border-color:var(--accent);color:var(--accent);font-weight:bold}
.scenario-select{margin-left:8px;font-size:13px;max-width:260px}
.module-label{margin-left:16px;font-size:13px;font-weight:bold;color:var(--fg)}

/* Footer: 50 px */
#ftr{height:50px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--surface);border-top:2px solid var(--line)}
#ftr .gap{width:6px}
.flabel{color:var(--dim);font-size:12px}
.speed-label{width:110px}
.vsep{color:var(--line);font-size:16px}
button.go,button.reset,button.apply{height:34px;color:#fff}
button.go{background:#215732;border-color:#26A269;font-weight:bold}
button.go:hover:not(:disabled){background:#26A269;border-color:#26A269}
button.go.running{background:#8b1a1a;border-color:var(--err)}
button.go.running:hover:not(:disabled){background:var(--err);border-color:var(--err)}
button.reset{background:#4a1a52;border-color:#77216F}
button.reset:hover:not(:disabled){background:#77216F;border-color:#77216F}
button.apply{background:#1a3d6e;border-color:#3584e4;font-weight:bold}
button.apply:hover:not(:disabled){background:#3584e4;border-color:#3584e4}
.status{font-size:12px;font-weight:bold}
.status.stopped{color:var(--stop)}.status.running{color:var(--ok)}.status.ready{color:var(--warn)}.status.error{color:#ff8b8b}
.sim-time{color:var(--accent);font-size:12px;font-weight:bold}

/* Speed slider: groove #4a4a4a 6 px, handle #E95420 14 px, filled part #c34113, ticks every 10 */
.slider{position:relative;width:150px;height:26px;flex:none}
.slider input{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;width:100%;height:14px;margin:0;padding:0;background:transparent;cursor:pointer}
.slider input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent-dark) var(--p,0%),var(--btn) var(--p,0%))}
.slider input::-moz-range-track{height:6px;border-radius:3px;background:var(--btn)}
.slider input::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent-dark)}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border-radius:7px;background:var(--accent);border:none}
.slider input::-moz-range-thumb{width:14px;height:14px;border-radius:7px;background:var(--accent);border:none}
.slider input:focus{outline:none}
.ticks span{position:absolute;top:16px;width:1px;height:5px;background:var(--dim)}

main{flex:1;display:flex;min-height:0}
section{flex:1;min-width:0;overflow:auto;padding:10px}
#view-graphs:not([hidden]){display:flex;flex-direction:column;overflow:hidden;padding:4px}
.graph-bar{display:flex;align-items:center;gap:10px;padding:2px 0 4px}
#plots{flex:1;min-height:0;display:grid;gap:4px}
.plot{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--plot-bg,#1e2832)}
.plot-canvas{flex:1;min-height:0;min-width:0;position:relative;overflow:hidden}
.plot-canvas .uplot{position:absolute;inset:0}
.show-bar{display:flex;gap:10px;align-items:center;font-size:10px;color:#cfd8dc;padding:2px 4px}
.show-toggle{display:flex;align-items:center;gap:3px}
.plot-legend{position:absolute;left:6px;top:4px;padding:3px 6px;font-size:11px;line-height:1.35;color:#b0bec5;
  background:rgba(30,40,50,.75);border:1px solid rgba(176,190,197,.35);pointer-events:none}
.plot-legend .sw{display:inline-block;width:22px;height:0;margin-right:6px;vertical-align:middle}

/* Table tab (QTableView in SCADA_DARK) */
.table-section:not([hidden]){display:flex;flex-direction:column;padding:4px;overflow:hidden}
#table-status{margin:6px 0;text-align:center}
.table-wrap,.ev-wrap{color-scheme:dark}
.table-wrap{flex:1;min-height:0;overflow:auto;background:var(--field);border:1px solid var(--line);border-radius:4px}
.table-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:6px}
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
#log{width:100%}
#log th,#log td{padding:4px;text-align:right;white-space:nowrap;border:1px solid var(--line)}
#log th{position:sticky;top:0;background:var(--btn);color:var(--dim);font-weight:bold;border-top:none}
#log tbody tr:nth-child(even){background:var(--alt)}

/* Event Log column: 380 px */
#event-col{width:380px;flex:none;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--surface);border-left:1px solid var(--line)}
#event-col[hidden]{display:none}
.ev-head{display:flex;align-items:center}
.ev-title{color:var(--accent);font-size:10px;font-weight:bold}
.ev-head button{height:26px;font-size:10px;padding:2px 8px}
.ev-wrap{flex:1;min-height:0;overflow:auto;background:var(--field);border:1px solid var(--line);border-radius:4px}
#events{width:100%;table-layout:fixed;font-size:10px}
#events th{position:sticky;top:0;background:var(--btn);color:var(--dim);font-size:9px;font-weight:bold;padding:2px 3px;text-align:left;border-right:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#events td{padding:0 2px;height:20px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line)}
#events tbody tr:nth-child(even){background:var(--alt)}

.diagram-section{color-scheme:light;padding:0;overflow:hidden}
.diagram{position:relative;width:100%;height:100%;min-height:300px;background:#e9f1f5;overflow:hidden}
.dg-stage{color-scheme:light;position:absolute;font-family:Consolas,"Courier New",monospace}
.dg-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.dg-text{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:pre;line-height:1}
.dg-slot{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border-radius:2px;
  font:inherit;font-size:max(9px,calc(var(--sc) * 11px));color:#212121;text-align:center;border:1px solid;min-width:0}
.dg-slot.edit{background:#fef3e2;border-color:#f5a623}
.dg-slot.edit:focus{background:#fff;outline:none}
.dg-slot.edit.dirty{background:#fde8c8;border:2px solid #E95420}
.dg-slot.ro{background:#e8f0fe;border-color:#7baaf7}
input[type=number].dg-slot{color:#212121}
input.dg-slot::-webkit-inner-spin-button,input.dg-slot::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input.dg-slot{-moz-appearance:textfield;appearance:textfield}

/* Docs tab (docs_tab.py QTabWidget + _docs_helpers) */
.docs-section:not([hidden]){display:flex;flex-direction:column;padding:0;overflow:hidden}
.docs-bar{display:flex;flex:none;background:#262626}
.docs-bar button{background:#262626;color:var(--dim);font-size:12px;padding:6px 18px;border:none;border-bottom:2px solid transparent;border-radius:0}
.docs-bar button:hover:not(:disabled){background:#262626;color:var(--fg);border-bottom-color:transparent}
.docs-bar button.active,.docs-bar button.active:hover:not(:disabled){color:var(--accent);border-bottom-color:var(--accent);font-weight:bold}
.docs-panel,.about-section{background:#1e2a35;color-scheme:dark}
.docs-panel{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px}
.docs-panel>*{flex:none}
fieldset.groupbox{margin:0;min-width:0;border:1px solid var(--line);border-radius:6px;padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
fieldset.groupbox>legend{color:var(--accent);font-weight:bold;padding:0 6px}
.doc-narr{color:#eeeeec;font-size:12px;line-height:150%;white-space:pre-wrap}
.doc-narr.rich{white-space:normal}
.doc-eq{margin:0;color:#fdd835;font:12px Consolas,"Courier New",monospace;background:#1e2a35;border-radius:4px;padding:8px;white-space:pre;overflow-x:auto}
.doc-tip{color:#80cbc4;font-size:11px;font-style:italic;white-space:pre-wrap}

/* About tab */
.about-section:not([hidden]){display:flex;flex-direction:column;gap:12px;padding:14px;overflow:auto}
.about-section>*{flex:none}
.about-title{margin:0;color:var(--accent);font-size:20px;font-weight:bold}
.about-sub{color:var(--dim);font-size:12px}
.about-body{color:#eeeeec;font-size:12px;line-height:150%}
.about-body a,.doc-narr a{color:#4fc3f7}

/* Diagram hitboxes: hand cursor, hover highlight = QColor(79, 195, 247, 60) */
.dg-hit{position:absolute;padding:0;margin:0;border:none;border-radius:0;background:transparent;cursor:pointer}
.dg-hit:hover:not(:disabled),.dg-hit:focus-visible{background:rgba(79,195,247,.235);border:none}
.dg-hit:focus-visible{outline:2px solid #3584e4}

/* Equipment dialogs (dialogs/_base.py) */
dialog.dlg{padding:0;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;color-scheme:dark}
dialog.dlg::backdrop{background:rgba(0,0,0,.5)}
.dlg-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.dlg-titlebar{color:var(--dim);font-size:11px}
.dlg-heading{margin:0;color:var(--accent);font-size:13px;font-weight:bold}
.dlg-sep{width:100%;margin:0;border:none;border-top:1px solid #2d3f50}
.dlg-form{border-collapse:separate;border-spacing:0 5px;font-size:11px}
.dlg-form th{text-align:right;font-weight:normal;color:var(--dim);padding-right:10px;vertical-align:top;white-space:nowrap}
.dlg-form td{color:var(--fg)}
.dlg-form .unit{color:var(--dim)}
.dlg-edit input[type=number]{width:110px}
.dlg-desc{color:var(--fg);font-size:11px;white-space:pre-wrap}
.dlg-buttons{display:flex;justify-content:flex-end;gap:8px}
.dlg-buttons .ok,.dlg-buttons .close{background:#1a3d6e;border-color:#3584e4;color:#fff;font-weight:bold}
.dlg-buttons .ok:hover:not(:disabled),.dlg-buttons .close:hover:not(:disabled){background:#3584e4}
.dlg-edit input[type=number].invalid{border-color:var(--err);outline:1px solid var(--err)}