/* ============================================================
   Optimum Soil — «Καταγραφικό» (Field Instrument Ledger)
   Light instrument theme · navy = brand ink · red = alarms only
   ============================================================ */

:root{
  /* surfaces */
  --paper:#F2F4F8;
  --panel:#FFFFFF;
  --line:#D8DEE9;
  /* ink ramp */
  --ink:#131A26;
  --ink2:#46536B;
  --ink3:#66748F;        /* >=11px, on white only */
  --ink3-paper:#5A6880;  /* tertiary on paper bg */
  /* brand */
  --navy:#082768;
  --navy-press:#051A47;
  --navy-tint:#E8EDF8;
  /* alarm vocabulary (red = alarms ONLY) */
  --red:#D80001;
  --red-text:#B00002;
  --zone-crit:#F7DCDB;
  --amber:#E8730A;
  --amber-strong:#C25E05;
  /* ΓΡΑΜΜΑΤΑ, ΟΧΙ ΣΧΗΜΑΤΑ. Το `--amber` #E8730A βγάζει 3,05:1 σε λευκό και 2,72:1 πάνω στο δικό του
     απαλό φόντο — κάτω και από το κατώφλι των γραφικών, πολύ κάτω από το 4,5:1 του κειμένου. Το
     ζευγάρι «σχήμα + σκουρότερο κείμενο» υπήρχε ήδη για το κόκκινο (`--red-text`) και το μπλε
     (`--blue-text`)· για το πορτοκαλί απλώς έλειπε. 5,38:1 σε λευκό, 4,80:1 στο απαλό φόντο.
     ΚΑΝΕΝΑ σχήμα δεν αλλάζει: κουκκίδες, ράγες, γεμίσματα και περιγράμματα κρατούν το `--amber`. */
  --amber-text:#A85306;
  --zone-warn:#FDEEDF;
  --ok:#00A63F;
  /* Η ΜΠΑΝΤΑ «ΕΝΤΟΣ ΟΡΙΩΝ» ΠΑΝΩ ΣΕ ΓΕΜΙΣΜΑ (απόφαση χρήστη 21/08/2026, «Β′»). ΡΗΤΟ χρώμα και όχι
     διαφανές λευκό: το διαφανές δανείζεται χρώμα από ό,τι έχει πίσω του, και τα τρία όργανα έχουν
     ΤΡΙΑ διαφορετικά υποστρώματα — ράγα και καντράν πάνω στο πράσινο πλακίδιο (→ ανοιχτό πράσινο),
     θερμόμετρο πάνω στον σωλήνα `var(--line)` (→ υπόλευκο, ΧΩΡΙΣ πράσινο). Ο χρήστης το είδε στο
     render και το ανέφερε. Με ρητό χρώμα το αποτέλεσμα είναι το ΙΔΙΟ στα τρία. */
  --ok-band:color-mix(in srgb,var(--ok) 45%,#fff);
  /* ΤΟ ΠΡΑΣΙΝΟ ΔΕΝ ΕΙΧΕ ΚΑΘΟΛΟΥ ΠΑΡΑΛΛΑΓΗ ΚΕΙΜΕΝΟΥ. Το `--ok` βγάζει 3,22:1 σε λευκό και 2,91:1
     πάνω στο `--ok-bg` — δηλαδή η λέξη «Εντός ορίων», που είναι η πιο συχνή ένδειξη της οθόνης,
     ήταν η λιγότερο ευανάγνωστη. #0A7A34 → 5,46:1 και 4,94:1. Οι κουκκίδες, τα εικονίδια και τα
     γεμίσματα κρατούν το `--ok`: είναι σχήματα, με κατώφλι 3:1. */
  --ok-text:#0A7A34;
  /* ΚΑΤΩ πλευρά ορίων: ό,τι είναι «πολύ χαμηλά» διαβάζεται ψυχρό, όχι θερμό — L→LL ανοιχτό μπλε,
     κάτω από LL σκούρο μπλε. Η σοβαρότητα μένει ίδια (warn/crit), αλλάζει μόνο η ανάγνωση. */
  --blue:#2E9BD6;
  /* 4,61:1 στο πάνελ ΑΛΛΑ 4,06:1 πάνω στο `--blue-bg`, δηλαδή κάτω από το AA εκεί που ζει: η
     ένδειξη «κάτω όριο» κάθεται μέσα στο απαλό μπλε πλακίδιο, όχι σε λευκό. #186E9C → 5,60:1 στο
     πάνελ και 4,94:1 στο απαλό φόντο. Το `--blue` των ΣΧΗΜΑΤΩΝ δεν άλλαξε. */
  --blue-text:#186E9C;
  --blue-line:#B4DDF2;
  --blue-bg:#E4F3FB;
  --blue-deep:#10357F;
  --blue-deep-text:#0C2A66;
  --blue-deep-line:#B6C3E3;
  --blue-deep-bg:#E1E7F5;
  /* ΓΕΜΙΣΜΑΤΑ πλακιδίων-«φαναριών»: κορεσμένα, ΙΔΙΑ και στα δύο θέματα, ώστε το λευκό κείμενο να
     διαβάζεται πάντα. Το σκούρο θέμα ανεβάζει τα --ok/--red για ΚΕΙΜΕΝΟ (φωτεινά σε σκούρο φόντο)
     — αν τα χρησιμοποιούσαμε ως γέμισμα, λευκό πάνω σε #2BE070 ξεπλένεται. Δεν επανορίζονται
     παρακάτω στο dark block· τα αλλάζουν μόνο οι Ρυθμίσεις (applyZoneColors). */
  --ok-fill:#00A63F;
  --amber-fill:#E8730A;
  --red-fill:#D80001;
  --blue-fill:#2E9BD6;
  --blue-deep-fill:#10357F;
  /* derived surfaces / states */
  --on-accent:#FFFFFF;      /* κείμενο πάνω σε navy/red γεμίσματα */
  --hover:#F8FAFD;
  --nodata:#C3CBDA;
  --stale:#98A2B8;
  --crit-line:#EBB6B5;
  --crit-bg:#FFF6F5;
  --ok-line:#BFE0CC;
  --ok-bg:#ECF6EF;
  --warn-line:#EAD3A6;
  --warn-bg:#FBF1DE;
  /* type */
  --sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',Consolas,'Courier New',monospace;
  --title:'Commissioner',var(--sans);
  /* geometry */
  --r:10px;
  --r-sm:8px;
  --nav-w:216px;
  /* motion */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  /* z scale */
  --z-nav:10; --z-sticky:20; --z-popover:30; --z-dialog:50; --z-toast:60;
}

/* ============ Σκούρο θέμα — μόνο re-point των tokens ============ */
:root[data-theme="dark"]{
  --paper:#0B1220;
  --panel:#141D31;
  --line:#2A3856;
  --ink:#E8EDF9;
  --ink2:#AEB9D4;
  --ink3:#8290AF;
  --ink3-paper:#8794B3;
  --navy:#8FACE8;
  --navy-press:#A9C2F2;
  --navy-tint:#1D2B4E;
  --red:#FF6B6B;
  --red-text:#FF9494;
  --zone-crit:#4A2530;
  --amber:#FF9A3C;
  --amber-strong:#FFB670;
  --amber-text:#FFB670;   /* στο σκοτεινό το κείμενο πάει ΦΩΤΕΙΝΟΤΕΡΑ, ίδιο μοτίβο με --red-text/--blue-text· 9,74:1 */
  --zone-warn:#3E2B14;
  --ok:#2BE070;
  --ok-band:color-mix(in srgb,var(--ok) 45%,#fff);
  /* Στο σκοτεινό το ίδιο το `--ok` είναι ήδη 9,60:1 — το token υπάρχει ώστε να ορίζεται και στα
     ΔΥΟ θέματα (αν λείπει από το ένα, το χρώμα πέφτει στο άλλο: σκούρο κείμενο σε σκούρο πάνελ). */
  --ok-text:#2BE070;
  /* Στο σκούρο θέμα το «σκούρο μπλε» δεν μπορεί να είναι σκούρο — θα χανόταν στο φόντο· γίνεται
     κορεσμένο ινδικό, που κρατά τη ψυχρή ανάγνωση. */
  --blue:#6FC8FF;
  --blue-text:#9BD8FF;
  --blue-line:#14506B;
  --blue-bg:#0C2A3A;
  --blue-deep:#7C93FF;
  --blue-deep-text:#A3B3FF;
  --blue-deep-line:#2A3A6E;
  --blue-deep-bg:#161C3A;
  --on-accent:#0B1220;
  --hover:#1A2540;
  --nodata:#3A4763;
  --stale:#55648A;
  --crit-line:#5E3038;
  --crit-bg:#2B1B22;
  --ok-line:#2E5A40;
  --ok-bg:#16301F;
  --warn-line:#6E5827;
  --warn-bg:#3A2E12;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{color-scheme:dark}
:root[data-theme="dark"] .skel::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:var(--sans);
  font-size:15px; line-height:1.5;
  background:var(--paper); color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:none;border:none}
input,select,textarea{
  font-family:inherit;font-size:14px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;width:100%;min-height:40px;
}
textarea{min-height:64px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px;
}
input::placeholder,textarea::placeholder{color:var(--ink3)}
a{color:var(--navy)}
.num,.mono{font-family:var(--mono);font-feature-settings:'tnum' 1,'zero' 1}
.hidden{display:none!important}
/* ΚΡΥΦΟ ΑΛΛΑ ΕΣΤΙΑΣΙΜΟ. Τα πεδία αρχείου ζουν μέσα σε `label` και ήταν `display:none`: ο
   φυλλομετρητής τα βγάζει τελείως από τη σειρά Tab, οπότε τα τέσσερα ανεβάσματα (φόντο,
   εικόνα συμβόλου, εικόνα καλλιέργειας, εισαγωγή οθόνης) ήταν ΑΠΡΟΣΙΤΑ χωρίς ποντίκι.
   Με αυτό το μοτίβο το πεδίο μένει στο δέντρο, δέχεται εστίαση και ανοίγει με Enter/Space,
   χωρίς να καταλαμβάνει χώρο. Το `:focus-visible` του κουμπιού-ετικέτας δείχνει πού είμαστε. */
.sc-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
label:focus-within{outline:2px solid var(--navy);outline-offset:2px}
svg.ic{width:20px;height:20px;flex:none;display:block}
svg.ic-s{width:16px;height:16px;flex:none;display:block}

/* ============ App shell ============ */
#app{display:none}
#app.on{display:block}
.shell{min-height:100vh}
nav.rail-nav{
  position:fixed;inset:0 auto 0 0;width:var(--nav-w);
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:var(--z-nav);
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
/* λευκό «νόμισμα» πίσω από το σήμα: το navy μισό του διαβάζεται σε κάθε φόντο (dark theme, navy πεδία) */
.brand-mark{width:36px;height:36px;flex:none;object-fit:contain;background:#fff;border-radius:50%;padding:3px;box-shadow:0 0 0 1px var(--line)}
.brand-name{font-family:var(--title);font-weight:600;font-size:17px;line-height:1.15;color:var(--ink)}
.brand-sub{font-size:11px;color:var(--ink3);letter-spacing:.02em}
.nav-items{padding:6px 10px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-sm);
  color:var(--ink2);font-weight:500;font-size:14px;min-height:40px;
  transition:background 140ms var(--ease-out),color 140ms var(--ease-out);
  text-align:left;width:100%;
}
.nav-item:hover{background:var(--paper);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--navy);color:var(--on-accent)}
.nav-sec{padding:14px 12px 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

/* ---- Τεχνητή Νοημοσύνη (σελίδες αποτελεσμάτων) ---- */
.ai-page{max-width:1100px;margin:0 auto}
.ai-hero{border-left:3px solid var(--red);padding:2px 0 2px 14px;margin-bottom:16px}
.ai-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--red-text)}
.ai-title{font-size:24px;font-weight:700;color:var(--navy);margin:4px 0 6px}
.ai-lead{font-size:15px;color:var(--ink2);max-width:70ch}
.ai-stats{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 18px}
.ai-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;min-width:120px}
.ai-statn{display:block;font-size:22px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.ai-statl{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.ai-statsub{display:block;font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.35;max-width:24ch}
.ai-p{font-size:14.5px;line-height:1.6;color:var(--ink);max-width:74ch;margin:0 0 12px}
.ai-fig{margin:18px 0;background:#f6f8fb;border:1px solid #e3e9f2;border-radius:var(--r-sm);padding:12px;overflow-x:auto}
.ai-fig img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:4px}
.ai-fig figcaption{font-size:12.5px;color:#5a6880;margin-top:10px;text-align:center;font-style:italic}
.ai-figtitle{display:block;font-style:normal;font-weight:600;color:#33415c}
.ai-fighelp{display:block;font-style:normal;margin:5px auto 0;line-height:1.55;max-width:72ch}
.ai-means{background:var(--navy-tint);border-radius:var(--r-sm);padding:14px 16px;font-size:14px;color:var(--ink);margin:18px 0}
.ai-means strong{color:var(--navy)}
.ai-note{font-size:12px;color:var(--ink3);font-style:italic;margin-top:18px}
.ai-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--navy-tint);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin:18px 0}
.ai-picker label{font-weight:600;color:var(--navy);font-size:14px}
.ai-pick{flex:1;min-width:220px;max-width:420px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-size:14px}
.ai-refresh{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--navy);border-radius:var(--r-sm);background:var(--panel);color:var(--navy);font-size:13px;font-weight:600;cursor:pointer}
.ai-refresh:hover{background:var(--navy-tint)}
.ai-refresh svg{width:15px;height:15px}
.ai-loading{display:flex;flex-direction:column;gap:12px;color:var(--ink3);font-size:14px;padding:24px 4px 8px}
.ai-loading-top{display:flex;align-items:center;gap:10px}
.ai-loading svg{width:18px;height:18px}
.ai-empty{display:flex;align-items:flex-start;gap:12px;color:var(--ink3);font-size:14px;background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-sm);padding:22px 18px}
.ai-empty svg{width:18px;height:18px;flex:none;margin-top:2px}
.ai-empty-msg{color:var(--ink);font-weight:600;margin-bottom:5px}
.ai-empty-hint{color:var(--ink3);font-size:13px;line-height:1.55}
.ai-recs{background:var(--navy-tint);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin:18px 0}
.ai-recs-h{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);margin-bottom:8px}
.ai-recs-h svg{width:16px;height:16px}
.ai-recs ul{margin:0;padding-left:20px}
.ai-recs li{font-size:14px;color:var(--ink);margin:5px 0;line-height:1.5}
/* AI loading skeleton (reuses .skel shimmer) + hint */
.ai-loading .ai-hint{color:var(--ink3);font-size:12.5px;margin-top:2px}
.ai-skel-row{display:flex;gap:12px;margin:16px 0 0}
.ai-skel-pill{height:66px;flex:1 1 120px;border-radius:var(--r-sm)}
.ai-skel-box{height:300px;border-radius:var(--r-sm);margin-top:14px}
/* subtle staggered entrance (auto-disabled by the prefers-reduced-motion block above) */
@keyframes osFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai-results>*{animation:osFadeUp .32s var(--ease-out) both}
.ms-grid>.ms-cell{animation:osFadeUp .3s var(--ease-out) both}
.ms-grid>.ms-cell:nth-child(2){animation-delay:.03s}
.ms-grid>.ms-cell:nth-child(3){animation-delay:.06s}
.ms-grid>.ms-cell:nth-child(4){animation-delay:.09s}
.ms-grid>.ms-cell:nth-child(5){animation-delay:.12s}
.ms-grid>.ms-cell:nth-child(n+6){animation-delay:.15s}
.ai-analysis{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;margin:18px 0}
.ai-analysis-h{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);margin-bottom:8px}
.ai-analysis-h svg{width:16px;height:16px}
.ai-analysis p{font-size:14px;color:var(--ink);line-height:1.6;margin:8px 0}
.ai-analysis ul{margin:8px 0;padding-left:20px}
.ai-analysis li{font-size:14px;color:var(--ink);margin:4px 0;line-height:1.5}
.nav-foot{border-top:1px solid var(--line);padding:12px 14px;font-size:13px}
.nav-farm{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 6px;border-radius:var(--r-sm);min-height:40px}
.nav-farm:hover{background:var(--paper)}
.nav-farm .f-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.nav-usercode{font-family:var(--mono);font-size:11.5px;color:var(--ink3);padding:2px 6px}

main.content{margin-left:var(--nav-w);min-height:100vh;display:flex;flex-direction:column}

/* sticky view header */
.view-head{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:12px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:58px;
}
.view-title{font-family:var(--title);font-weight:600;font-size:19px;margin-right:auto}
.head-live{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.head-live .t{font-family:var(--mono);font-size:12.5px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.dot.pulse{animation:pulse 2s infinite}
.dot.stale{background:var(--stale);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn-icon{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;min-width:40px;padding:0 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13.5px;font-weight:500;
  transition:transform 160ms var(--ease-out),background 140ms;
}
.btn-icon:hover{background:var(--paper);color:var(--ink)}
.btn-icon:active{transform:scale(.97)}
.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.view-body{padding:20px 24px 48px;max-width:1240px;width:100%}
.view-body.wide{max-width:none}
#profile-btn .f-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-plain.sel{border-color:var(--navy);color:var(--navy);background:var(--navy-tint)}
.set-label{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.set-body{display:flex;flex-direction:column;gap:20px;padding:2px}
.set-group{display:flex;flex-direction:column}
.set-opts{display:flex;gap:10px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:var(--on-accent);border-radius:var(--r-sm);
  padding:0 16px;min-height:40px;font-size:14px;font-weight:600;
  transition:background 140ms,transform 160ms var(--ease-out);
}
.btn:hover{background:var(--navy-press)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.full{width:100%}
.btn-plain{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel);color:var(--ink2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 14px;min-height:40px;font-size:14px;font-weight:500;
  transition:background 140ms,transform 160ms var(--ease-out);
}
.btn-plain:hover{background:var(--paper);color:var(--ink)}
.btn-plain:active{transform:scale(.97)}
.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--red);color:var(--on-accent);border-radius:var(--r-sm);
  padding:0 16px;min-height:40px;font-size:14px;font-weight:600;
  transition:filter 140ms,transform 160ms var(--ease-out);
}
.btn-danger:hover{filter:brightness(.88)}
.btn-danger:active{transform:scale(.97)}
.link-btn{color:var(--navy);font-weight:500;font-size:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:5px;padding:4px 2px;min-height:32px}
.link-btn:hover{text-decoration:underline}

/* ============ Panels & misc ============ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.panel-title{font-family:var(--title);font-weight:600;font-size:15.5px;margin-bottom:12px}
.microlabel{font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:.04em}
.meta{font-size:13px;color:var(--ink3)}
.field{margin-bottom:12px}
.field>label{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:5px}
.row2{display:flex;gap:10px}
.row2>.field{flex:1}
.check-row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);cursor:pointer;min-height:40px}
.check-row input{width:18px;height:18px;min-height:0;accent-color:var(--navy);flex:none}

/* status words */
.stw{font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.stw.ok{color:var(--ok-text)}
.stw.warn{color:var(--amber-text)}
.stw.crit{color:var(--red-text)}
.stw.nodata{color:var(--ink3)}

/* ============ Signature: limit rail ============ */
.rail{position:relative;height:34px;min-width:120px}
.rail-track{position:absolute;left:0;right:0;top:8px;height:6px;border-radius:99px;overflow:hidden;display:flex;background:var(--navy-tint)}
.rail-seg{height:100%}
/* πιο ευδιάκριτες ζώνες ράγας: αναμειγνύουμε την αχνή απόχρωση προς το έντονο σημασιολογικό χρώμα
   (theme-aware, δουλεύει και σε light και σε dark) */
.rail-seg.zc{background:color-mix(in srgb,var(--zone-crit) 42%,var(--red))}
.rail-seg.zw{background:color-mix(in srgb,var(--zone-warn) 42%,var(--amber))}
.rail-seg.zk{background:color-mix(in srgb,var(--navy-tint) 55%,var(--navy))}
/* κάτω πλευρά της ράγας: ψυχρά, όπως όλα τα «πολύ χαμηλά» */
.rail-seg.zw.low{background:color-mix(in srgb,var(--blue-bg) 42%,var(--blue))}
.rail-seg.zc.low{background:color-mix(in srgb,var(--blue-deep-bg) 42%,var(--blue-deep))}
.rail-tick{position:absolute;top:6px;width:1px;height:10px;background:var(--ink3);transform:translateX(-.5px)}
.rail-lab{position:absolute;top:19px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:700;white-space:nowrap}
.rail-caret{
  position:absolute;top:-2px;width:0;height:0;transform:translateX(-5px);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid var(--navy);
  transition:left 200ms var(--ease-out);
}
.rail-caret.warn{border-top-color:var(--amber)}
.rail-caret.crit{border-top-color:var(--red)}
.rail-caret.nodata{border-top-color:var(--stale)}
.rail-whisker{position:absolute;top:10px;height:2px;background:var(--ink2);opacity:.55;border-radius:1px;transition:left 200ms var(--ease-out),width 200ms var(--ease-out)}
.rail.empty .rail-track{background:repeating-linear-gradient(90deg,var(--paper) 0 6px,var(--navy-tint) 6px 12px)}
.rail.mini{height:8px;min-width:48px}
.rail.mini .rail-track{top:1px}
.rail.mini .rail-caret{top:-4px;transform:translateX(-4px) scale(.8)}

/* ============ Dashboard ============ */
.station{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 18px}
.station .pos-name{font-family:var(--title);font-weight:600;font-size:20px}
.station .crumbs{font-size:13px;color:var(--ink2)}
.station .node{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);margin-left:auto}
.station .chip-mono{font-family:var(--mono);font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink2)}
.advisory{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:12px 16px;margin:14px 0;font-size:14.5px;
}
.advisory .glyph{width:10px;height:10px;border-radius:2px;flex:none}
.advisory.ok .glyph{background:var(--navy)}
.advisory.warn .glyph{background:var(--amber)}
.advisory.crit .glyph{background:var(--red)}
.advisory.crit{border-color:var(--crit-line);background:var(--crit-bg)}
.advisory .adv-text{flex:1}
.advisory .adv-text b{font-weight:600}

.ldot.ok{background:var(--ok)}
.ldot.warn{background:var(--amber)}
.ldot.crit{background:var(--red)}
.ldot.nodata{background:var(--nodata)}

/* ============ ΚΑΤΩ πλευρά ορίων ============
   Η σοβαρότητα (warn/crit) κρατά την κλάση της· δίπλα της μπαίνει «low» όταν η παραβίαση είναι
   προς τα κάτω, και τα χρώματα γίνονται ψυχρά: L→LL ανοιχτό μπλε, κάτω από LL σκούρο μπλε.
   Τρεις κλάσεις κερδίζουν σε ειδικότητα από τους κανόνες σοβαρότητας, ό,τι σειρά κι αν έχουν. */
.ldot.warn.low{background:var(--blue)}
.ldot.crit.low{background:var(--blue-deep)}
.stw.warn.low{color:var(--blue-text)}
.stw.crit.low{color:var(--blue-deep-text)}
.rail-caret.warn.low{border-top-color:var(--blue)}
.rail-caret.crit.low{border-top-color:var(--blue-deep)}
.advisory.warn.low .glyph{background:var(--blue)}
.advisory.crit.low .glyph{background:var(--blue-deep)}
.advisory.crit.low{border-color:var(--blue-deep-line);background:var(--blue-deep-bg)}
.pin-tile.warn.low{border-color:var(--blue-line);background:var(--blue-bg)}
.pin-tile.crit.low{border-color:var(--blue-deep-line);background:var(--blue-deep-bg)}
.pin-status.warn.low{color:var(--blue-text)}
.pin-status.crit.low{color:var(--blue-deep-text)}
.al-row.warn.low{border-left-color:var(--blue)}
.al-row.crit.low{border-left-color:var(--blue-deep)}
.sens-tile.warn.low{border-color:var(--blue-line);background:var(--blue-bg)}
.sens-tile.crit.low{border-color:var(--blue-deep-line);background:var(--blue-deep-bg)}
.st-status.warn.low{color:var(--blue-text)}
.st-status.crit.low{color:var(--blue-deep-text)}

/* Ρυθμίσεις → Χρώματα ζωνών: σειρές με native color input */
.set-zc{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.set-zc-row{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer}
.set-zc-row input[type=color]{width:34px;height:26px;border:1px solid var(--line);border-radius:6px;padding:1px;background:var(--panel);cursor:pointer}

/* Ρυθμίσεις → Ετικέτες κατάστασης: πέντε πεδία κειμένου, σειρά LL → L → Εντός ορίων → H → HH
   (ΙΔΙΑ σειρά με τις ρυθμίσεις της εφαρμογής — ζητήθηκε ρητά). */
.set-zl{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.set-zl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.set-zl-row input{width:170px;flex:none;padding:5px 8px;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.set-zl-row input:disabled{opacity:.6;cursor:not-allowed}

/* ============ Πλακίδια-«φανάρια» — ευθυγράμμιση με τη Μέτρηση Πεδίου της εφαρμογής ============
   Αριθμητικά πλακίδια με ΓΝΩΣΤΗ ζώνη: γεμάτο χρώμα ζώνης + λευκό κείμενο. Ισχύει στα αριθμητικά
   pins της Επισκόπησης (.num — τα γραφικά .gfx κρατούν το απαλό φόντο, εκεί μιλά το γραφικό) και
   στα πλακίδια της καρτέλας Αισθητήρα. Χωρίς δεδομένα: ουδέτερο, όπως πριν. Τα var() σέβονται
   τα custom χρώματα των Ρυθμίσεων. ΜΕΤΑ τους κανόνες .low ώστε να κερδίζουν στη σειρά. */
.pin-tile.num.ok{background:var(--ok-fill);border-color:transparent}
.pin-tile.num.warn{background:var(--amber-fill);border-color:transparent}
.pin-tile.num.crit{background:var(--red-fill);border-color:transparent}
.pin-tile.num.warn.low{background:var(--blue-fill)}
.pin-tile.num.crit.low{background:var(--blue-deep-fill)}
.pin-tile.num:is(.ok,.warn,.crit) :is(.pin-name,.pin-val,.pin-status){color:#fff}
.pin-tile.num:is(.ok,.warn,.crit) .pin-unit{color:rgba(255,255,255,.85)}
.pin-tile.num:is(.ok,.warn,.crit) .ldot{background:#fff}

/* (τα γεμίσματα της καρτέλας Αισθητήρα ζουν ΜΕΤΑ τους κανόνες .sens-tile — δες πιο κάτω:
    ίδια ειδικότητα με τους παλιούς, οπότε κερδίζει όποιος γράφτηκε τελευταίος) */
.ltrend.up{color:var(--ink2)}
.ltrend.down{color:var(--ink2)}
.ltrend.flat{color:var(--ink3)}
.compliance{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 4px;font-size:13.5px}
.comp-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;min-height:36px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--ink2);font-weight:500}
.comp-chip:hover{background:var(--paper)}
.comp-chip .n{font-family:var(--mono);font-weight:600}
.comp-chip.c-ok .n{color:var(--ok-text)}
.comp-chip.c-warn .n{color:var(--amber-text)}
.comp-chip.c-crit .n{color:var(--red-text)}
.comp-note{margin-left:auto;color:var(--ink3-paper);font-size:12.5px}

/* ============ error/offline banner ============ */
.err-banner{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--crit-line);background:var(--crit-bg);color:var(--red-text);
  border-radius:var(--r);padding:11px 16px;margin-bottom:14px;font-size:14px;
}
.err-banner .btn-plain{min-height:34px;margin-left:auto}
.note-banner{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);background:var(--navy-tint);color:var(--navy);
  border-radius:var(--r);padding:11px 16px;margin-bottom:14px;font-size:14px;
}

/* ============ Charts view ============ */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink2);
  border-radius:99px;padding:0 14px;min-height:38px;font-size:13.5px;font-weight:500;
  transition:background 140ms,transform 160ms var(--ease-out);
}
.chip:active{transform:scale(.97)}
.chip:hover{background:var(--paper)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-accent)}
.chip.chip-off{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.chip.chip-off:hover{background:var(--panel)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
/* Μενού γραμμής εργαλείων (Επεξεργασία Οθονών). Το `position:relative` είναι στο περιτύλιγμα και
   όχι στη γραμμή: η γραμμή τυλίγει, οπότε η αγκύρωση πρέπει να είναι στο ίδιο το κουμπί. */
.tb-menu-wrap{position:relative;display:inline-flex}
.tb-menu{position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:40;min-width:252px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 10px 28px rgba(3,10,30,.18);padding:5px;display:flex;flex-direction:column;gap:2px}
.tb-menu .btn-plain{width:100%;justify-content:flex-start;border:none;background:transparent;
  padding:7px 10px;border-radius:6px;font-weight:500}
.tb-menu .btn-plain:hover{background:var(--navy-tint)}
.tb-menu .btn-plain.hidden{display:none}
.tb-menu.to-left{left:0;right:auto}
.tb-menu-sep{height:1px;background:var(--line);margin:4px 2px}
.tb-menu-row{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:13px;color:var(--ink2)}
.tb-menu-row > span{white-space:nowrap}
.tb-menu-row.hidden{display:none}
.tb-menu-row .dash-sensor-sel{flex:1 1 auto;width:auto;min-width:0;font-size:12.5px;padding:5px 8px}
/* Η διαγραφή είναι η μόνη μη αναστρέψιμη ενέργεια του μενού και ξεχωρίζει — κόκκινο ΜΟΝΟ εδώ. */
.tb-menu .btn-plain.danger{color:var(--red-text)}
.tb-menu .btn-plain.danger:hover{background:var(--crit-bg)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--panel)}
.seg button{padding:0 14px;min-height:38px;font-size:13.5px;color:var(--ink2);font-weight:500;border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--navy-tint);color:var(--navy);font-weight:600}
.seg button:disabled{opacity:.4;cursor:not-allowed;color:var(--ink3)}   /* π.χ. Χάρτης χωρίς συντεταγμένες / Γραφική χωρίς widgets */
.toolbar select{width:auto;min-width:150px}
.toolbar .sp{flex:1}
.toolbar .tb-sep{width:1px;align-self:stretch;min-height:24px;background:var(--line);margin:0 2px}

.kpis{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow-x:auto}
.kpi{flex:1;min-width:130px;padding:12px 16px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:none}
.kpi .k-label{font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:.04em;margin-bottom:4px}
.kpi .k-val{font-family:var(--mono);font-size:20px;font-weight:500;font-feature-settings:'tnum' 1}
.kpi .k-val .u{font-size:12px;color:var(--ink2);font-family:var(--sans)}
.kpi .k-trend{font-family:var(--mono);font-size:12px;margin-left:8px}
.kpi .k-sub{font-size:12px;margin-top:2px}

.chart-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;position:relative}
.chart-box{position:relative;height:520px}
.chart-hint{font-size:12.5px;color:var(--ink3-paper);margin-top:8px}
.fs-btn{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink2)}
.fs-btn:hover{background:var(--paper);color:var(--ink)}
.chart-wrap:fullscreen{background:var(--panel);padding:24px;display:flex;flex-direction:column;justify-content:center}
.chart-wrap:fullscreen .chart-box{height:calc(100vh - 90px)}
.under-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:900px){.under-grid{grid-template-columns:1fr}}

table.dt{width:100%;border-collapse:collapse;font-size:13px}
.dt th{
  text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink2);
  letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.dt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.dt tr:last-child td{border-bottom:none}
.dt .num-cell{font-family:var(--mono);font-feature-settings:'tnum' 1;white-space:nowrap}
.dt tr:hover td{background:var(--hover)}

/* ============ Analytics ============ */
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;overflow-y:hidden}
.subtab{
  padding:10px 14px;font-size:14px;color:var(--ink2);font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;min-height:42px;
}
.subtab:hover{color:var(--ink)}
.subtab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.smallmults{display:grid;grid-template-columns:1fr;gap:14px}
.stat-desc{font-size:13px;color:var(--ink2);background:var(--navy-tint);border-left:3px solid var(--navy);border-radius:var(--r-sm);padding:9px 12px;margin-bottom:14px;line-height:1.5}
.sm-cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.sm-cell h4{font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.sm-cell h4 .u{font-family:var(--mono);font-size:11px;color:var(--ink3);font-weight:400}
.sm-box{position:relative;height:400px}
.heat-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
table.heat{border-collapse:collapse;font-family:var(--mono);font-size:11px}
.heat th{color:var(--ink2);font-weight:500;padding:3px 5px;text-align:center}
.heat td{width:34px;height:22px;text-align:center;border:1px solid var(--panel);border-radius:3px;color:transparent}
.heat td.oob{box-shadow:inset 0 0 0 2px var(--red)}
.heat td:hover{color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)} /* A6: αναγνώσιμο σε κάθε χρώμα κελιού/θέμα */
.comp-bars{display:flex;flex-direction:column;gap:10px}
.comp-row{display:grid;grid-template-columns:170px 1fr 110px;gap:12px;align-items:center;font-size:13.5px}
.comp-bar{height:18px;border-radius:5px;overflow:hidden;display:flex;background:var(--paper)}
.comp-bar .b-ok{background:var(--navy-tint)}
.comp-bar .b-warn{background:var(--zone-warn)}
.comp-bar .b-crit{background:var(--zone-crit)}
.comp-pct{font-family:var(--mono);font-size:12.5px;color:var(--ink2);text-align:right}
.big-fig{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--ink)}
.corr-note{font-family:var(--mono);font-size:13px;color:var(--ink2)}

/* ============ Journal ============ */
/* ============ Structure ============ */
.tree{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px}
.tnode{border-radius:var(--r-sm)}
.tline{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-sm);
  min-height:44px;
}
.tline:hover{background:var(--paper)}
.tline .tw{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ink3);border-radius:6px;flex:none}
.tline .tw:hover{background:var(--navy-tint);color:var(--navy)}
.tline .tw.leaf{visibility:hidden}
.tline .tico{color:var(--ink2);flex:none}
.tline .tlabel{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
.tline .tname{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tline .tlvl{font-family:var(--mono);font-size:10.5px;color:var(--ink3);letter-spacing:.03em;flex:none}
.tline .tmeta{font-family:var(--mono);font-size:11.5px;color:var(--ink3);flex:none}
.tline .tinactive{font-size:11px;color:var(--ink3);border:1px solid var(--line);border-radius:99px;padding:1px 7px;flex:none}
.tag-warn{font-size:11.5px;color:var(--amber-strong);background:var(--zone-warn);border-radius:99px;padding:2px 8px;flex:none}
.tag-ok{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ok-text);flex:none}
.tag-ok .dot{width:7px;height:7px}
.tacts{display:flex;gap:2px;opacity:0;transition:opacity 120ms}
.tline:hover .tacts,.tline:focus-within .tacts{opacity:1}
.tbtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink3)}
.tbtn:hover{background:var(--navy-tint);color:var(--navy)}
.tbtn.danger:hover{background:var(--crit-bg);color:var(--red-text)}
.tkids{margin-left:22px;padding-left:12px;border-left:1px solid var(--line)}
.holding{margin-top:16px}

/* ============ Params (limits) ============ */
.ptable-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
table.ptable{width:100%;border-collapse:collapse;font-size:13px}
.ptable th{
  text-align:left;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;
  color:var(--ink2);padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.ptable th .qm{color:var(--ink3);cursor:help;border-bottom:1px dotted var(--ink3)}
.ptable td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.ptable tr.prow:hover td{background:var(--hover)}
.ptable tr.dirty td{background:var(--navy-tint)}
.ptable input[type=number]{
  width:84px;min-height:36px;padding:6px 8px;font-family:var(--mono);font-size:13px;text-align:right;
  font-feature-settings:'tnum' 1;
}
/* ΟΘΟΝΗ ΟΔΗΓΙΩΝ: τέσσερα κουτάκια κειμένου ανά παράμετρο, ένα ανά όριο. Τίποτε άλλο — τα όρια
   και η προεπισκόπηση έφυγαν, ρυθμίζονται στη Διαχείριση Δομής. */
.ptable td{vertical-align:top}
.pi-name{white-space:nowrap;padding-top:26px}   /* ευθυγράμμιση με τα textarea, κάτω από την ετικέτα ορίου */
/* Η τιμή του ορίου πάνω από κάθε κουτάκι: δείχνει ΠΟΤΕ θα εμφανιστεί αυτή η οδηγία. */
.pi-lim{font-size:11px;color:var(--ink3);margin-bottom:4px;white-space:nowrap}
.pi-lim b{color:var(--ink2);font-family:var(--mono);font-weight:700}
.pi-ta{width:100%;min-width:180px;resize:vertical;font:inherit;font-size:13px;line-height:1.45;
  padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink)}
.pi-ta:focus{outline:2px solid var(--navy);outline-offset:-1px;border-color:transparent}
.pi-ta:disabled{opacity:.6;cursor:not-allowed}
/* Όριο χωρίς τιμή → καμία παραβίαση, άρα καμία οδηγία να δοθεί. */
.pi-none{color:var(--ink3);text-align:center;padding-top:26px}
/* Επεξήγηση κάτω από τη γενική οδηγία — δεν έχει όριο, οπότε χρειάζεται να πει τι κάνει. */
.pi-hint{font-size:11px;color:var(--ink3);margin-top:4px;line-height:1.35}
/* Επιστροφή στη Δομή — η οθόνη δεν είναι στο μενού, οπότε χωρίς αυτό ο χρήστης «κολλάει». */
.pback{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;background:none;border:0;
  padding:4px 0;font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer}
.pback:hover{text-decoration:underline}
.pback svg{transform:rotate(180deg)}   /* chevR → βελάκι προς τα αριστερά */
.ptable .pname{font-weight:500;font-size:14px;white-space:nowrap}
.ptable .punit{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.p-err{font-size:12.5px;color:var(--red-text);padding:4px 10px 8px}
.drawer-toggle{font-size:12.5px;color:var(--navy);display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 8px;border-radius:6px}
.drawer-toggle:hover{background:var(--navy-tint)}
.pdrawer td{background:var(--hover);padding:14px 16px}
.pdrawer .dr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pdrawer textarea{min-height:52px;font-size:13px}
.savebar{
  position:sticky;bottom:0;z-index:var(--z-sticky);
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 16px;margin-top:14px;box-shadow:0 -2px 8px rgba(19,26,38,.06);
}
.savebar .msg{font-size:14px;font-weight:500}

/* ============ Login ============ */
#login{min-height:100vh;display:none;background:var(--paper)}
#login.on{display:flex;align-items:stretch}

/* ---- Branded hero (αριστερά) ---- */
.login-hero{
  flex:1 1 54%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  color:#EAF1FF;
  /* κόκκινο = ΜΟΝΟ συναγερμοί (PRODUCT.md) — όχι διακοσμητικό glow στο hero */
  background:
    radial-gradient(90% 90% at 0% 100%, rgba(143,172,232,.18), transparent 52%),
    linear-gradient(158deg,#0A2E74 0%,#082768 46%,#05163A 100%);
}
/* διακοσμητικές «στρώσεις εδάφους» στη βάση */
.login-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,255,255,.045) 22px 23px);
  mask:linear-gradient(180deg,transparent,#000);
}
/* brand πάνω στο navy — το λευκό «νόμισμα» του σήματος εγγυάται ότι το navy μισό του διαβάζεται */
.lh-brand{display:flex;align-items:center;gap:12px}
.lh-mark{width:42px;height:42px;flex:none;object-fit:contain;background:#fff;border-radius:50%;padding:4px;box-shadow:0 2px 10px rgba(3,10,30,.3)}
.lh-name{font-family:var(--title);font-weight:600;font-size:19px;line-height:1.15;color:#fff}
.lh-org{font-size:12px;letter-spacing:.03em;color:rgba(234,241,255,.62)}
.lh-wrap{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;
  padding:clamp(22px,4vh,42px) clamp(28px,4.5vw,64px) 28px;
}
.lh-body{margin:auto 0}
.lh-headline{font-family:var(--title);font-weight:700;font-size:clamp(24px,2.5vw,32px);line-height:1.18;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.lh-lead{font-size:14.5px;line-height:1.55;color:rgba(234,241,255,.82);max-width:52ch;margin:0 0 22px}
/* ---- μινιατούρα dashboard: πάντα «φωτεινό θέμα» — στιγμιότυπο του πραγματικού προϊόντος ---- */
/* Η ΚΑΡΤΑ ΕΙΝΑΙ ΠΑΝΤΑ ΛΕΥΚΗ — στιγμιότυπο του προϊόντος. Τα όργανα όμως βάφονται με tokens θέματος:
   στο σκοτεινό θέμα θα έβγαιναν σκούρες ζώνες και ανοιχτό κείμενο πάνω σε λευκό. Καρφώνουμε εδώ
   ΜΟΝΟ τα tokens που χρησιμοποιούν καντράν/θερμόμετρο/ράγα, στις φωτεινές τιμές τους. */
.lh-demo{
  --line:#D8DEE9; --ink:#131A26; --ink3:#66748F; --navy:#082768; --navy-tint:#E8EDF8;
  --red:#D80001; --zone-crit:#F7DCDB; --amber:#E8730A; --zone-warn:#FDEEDF;
  --ok:#00A63F; --ok-text:#0A7A34; --amber-text:#A85306;
  --blue:#2E9BD6; --blue-text:#186E9C; --blue-bg:#E4F3FB;
  --blue-deep:#10357F; --blue-deep-bg:#E1E7F5;
  background:#fff;color:#131A26;border-radius:12px;
  box-shadow:0 10px 24px rgba(3,10,30,.35);
  padding:12px 18px;max-width:620px;margin:0 0 22px;
  animation:lhd-in .6s var(--ease-out) both;
}
@keyframes lhd-in{from{opacity:0;transform:translateY(10px)}}
.lhd-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#082768;padding-bottom:10px}
.lhd-dot{width:8px;height:8px;border-radius:50%;background:#1E7A45;flex:none;animation:lhd-pulse 2.4s ease-out infinite}
@keyframes lhd-pulse{0%{box-shadow:0 0 0 0 rgba(30,122,69,.45)}70%{box-shadow:0 0 0 7px rgba(30,122,69,0)}100%{box-shadow:0 0 0 0 rgba(30,122,69,0)}}
.lhd-live{margin-left:auto;font-size:11.5px;font-weight:500;color:#5A6577}
.lhd-row{display:flex;gap:16px;align-items:stretch}
.lhd-w{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.lhd-fig{height:116px;width:100%;display:flex;align-items:center;justify-content:center}
.lhd-w .val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.lhd-w .val.ok{color:var(--ok-text)}
.lhd-w .val.warn{color:var(--amber-text)}
.lhd-w .val.warn.low{color:var(--blue-text)}
.lhd-w .lbl{font-size:11px;color:#5A6577;white-space:nowrap}
/* Τα όργανα έρχονται από την εφαρμογή (scThermo/scDial/scGauge) — εδώ μόνο τα μεγέθη τους. */
.lhd-fig .sc-thermo{height:114px;width:auto;margin:0}
.lhd-fig .sc-dial{width:100%;max-width:176px;margin:0}
.lhd-fig .rail{width:100%;max-width:168px;min-width:0;height:34px}
.lhd-adv{display:flex;align-items:center;gap:8px;margin-top:12px;padding:8px 10px;border:1px solid #EAD3A6;background:#FBF1DE;border-radius:8px;font-size:12.5px;line-height:1.4;color:#131A26}
.lhd-adv .g{width:16px;height:16px;border-radius:50%;background:#B45309;color:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
/* ---- 8 παράμετροι + γραμμές αξίας ---- */
.lh-params-t{font-size:13px;color:rgba(234,241,255,.72);margin:0 0 8px}
.lh-params{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0 0 20px;max-width:500px}
.lh-params li{font-size:12px;font-weight:500;color:#EAF1FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:4px 11px}
.lh-value{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lh-value li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:rgba(234,241,255,.85);max-width:56ch}
.lh-value svg{width:18px;height:18px;flex:none;margin-top:1px;color:#BFD2F5}
.lh-foot{margin-top:26px;font-size:12.5px;color:rgba(234,241,255,.6)}
.lh-foot a{color:rgba(234,241,255,.82);text-decoration:none;font-weight:500}
.lh-foot a:hover{color:#fff;text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .lh-demo,.lhd-dot{animation:none}
}

/* ---- Πλευρά φόρμας (δεξιά) ---- */
.login-card{
  flex:1 1 46%;background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;
  padding:40px clamp(24px,5%,68px);
  animation:login-in .5s var(--ease-out) both;
}
.login-card>*{width:100%;max-width:376px;margin-left:auto;margin-right:auto}
@keyframes login-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.login-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.login-title{font-family:var(--title);font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.login-welcome{font-size:14px;color:var(--ink2);margin:0 0 20px}
.ver-pill{font-family:var(--mono);font-size:10.5px;color:var(--ink3);border:1px solid var(--line);border-radius:99px;padding:2px 8px;margin-left:auto}

@media (max-width:860px){
  #login.on{flex-direction:column}
  .login-hero{flex:none}
  .login-hero::after{display:none}
  .lh-wrap{padding:20px 24px 24px}
  .lh-body{margin:14px 0 0}
  .lh-demo,.lh-params,.lh-params-t,.lh-value,.lh-foot{display:none}
  .lh-headline{margin-bottom:8px}
  .lh-lead{margin-bottom:0}
  .login-card{flex:none;padding:28px 24px 36px;animation:none}
}
.login-legend{margin:14px 0 18px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.login-legend .ll-t{font-size:12.5px;color:var(--ink2);margin-bottom:2px}
.auth-tabs{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px}
.auth-tabs button{flex:1;min-height:40px;font-size:14px;font-weight:500;color:var(--ink2);border-right:1px solid var(--line)}
.auth-tabs button:last-child{border-right:none}
.auth-tabs button[aria-selected="true"]{background:var(--navy-tint);color:var(--navy);font-weight:600}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute;right:2px;top:2px;bottom:2px;width:38px;display:flex;align-items:center;justify-content:center;color:var(--ink3);border-radius:6px}
.pw-eye:hover{color:var(--ink)}
.auth-err{border:1px solid var(--crit-line);background:var(--crit-bg);color:var(--red-text);font-size:13.5px;border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px}
.cred-sheet{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.cred-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.cred-row:last-child{border-bottom:none}
.cred-row .cl{width:110px;color:var(--ink2);flex:none}
.cred-row .cv{font-family:var(--mono);font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cred-row.key{background:var(--zone-warn)}
.cred-row.key .cv{font-weight:600}
.cred-note{font-size:12.5px;color:var(--amber-strong);margin:-6px 0 12px}
.reg-pending{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ink);font-size:13.5px;line-height:1.5;border-radius:var(--r-sm);padding:11px 13px;margin-bottom:16px}

/* ============ Διαχείριση Χρηστών ============ */
.um{max-width:820px}
.um-head{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.um-title{font-family:var(--title);font-weight:700;font-size:20px}
.um-intro{font-size:13.5px;color:var(--ink2);line-height:1.55;margin-top:4px;max-width:60ch}
.um-list{display:flex;flex-direction:column;gap:12px}
.um-card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:14px 16px}
.um-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.um-name{font-weight:600;font-size:15px}
.um-code{color:var(--ink3);font-family:var(--mono);font-size:12.5px}
.um-badge{font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px;margin-left:8px}
.um-badge.ok{color:var(--ok-text);background:var(--ok-bg);border:1px solid var(--ok-line)}
.um-badge.pend{color:var(--amber-strong);background:var(--warn-bg);border:1px solid var(--warn-line)}
.um-actions{display:flex;gap:6px}
.btn-plain.sm{min-height:34px;padding:0 10px;font-size:13px}
.btn-plain.danger:hover{background:var(--crit-bg);color:var(--red-text)}
.um-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.um-chip{font-size:12px;border-radius:99px;padding:3px 10px;background:var(--paper);border:1px solid var(--line);color:var(--ink2)}
.um-chip.edit{background:var(--navy-tint);border-color:var(--navy-tint);color:var(--navy);font-weight:600}
.um-chip.none{color:var(--ink3);font-style:italic}
.um-inst{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2)}
.um-inst svg{width:15px;height:15px;flex:none;color:var(--ink3)}
/* editor dialog */
.um-form{display:flex;flex-direction:column;gap:12px}
.um-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink2)}
.um-field input{width:100%}
.um-sec-t{font-weight:600;color:var(--navy);font-size:13.5px;margin-top:4px}
.um-hint{font-size:12px;color:var(--ink2);line-height:1.5;margin:-4px 0 2px}
.um-tabgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.um-frow{display:flex;flex-direction:column;gap:5px;font-size:13px;min-width:0}
.um-frow label{color:var(--ink2)}
.um-frow select{width:100%}
.um-instgrid{display:flex;flex-direction:column;gap:7px}
.um-check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.um-check input{width:18px;height:18px;min-height:0;accent-color:var(--navy);flex:none}
@media(max-width:620px){ .um-tabgrid{grid-template-columns:1fr} }
.ro-pill{font-size:11.5px;font-weight:600;color:var(--ink3);background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:3px 10px}

/* A5: skip link — ορατό μόνο με εστίαση πληκτρολογίου */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--navy);color:#fff;padding:8px 14px;border-radius:8px;font-weight:600}
.skip-link:focus{left:8px}

/* ============ Dialogs / popover / toast / skeleton ============ */
dialog.dlg{
  margin:auto; /* το reset *{margin:0} ακυρώνει το native κεντράρισμα του <dialog> */
  /* ΧΩΡΙΣ αυτά, το <dialog> παίρνει το UA-default άσπρο → μένει άσπρο και στο dark θέμα */
  background:var(--panel);color:var(--ink);
  border:none;border-radius:12px;padding:0;width:min(440px,92vw);
  box-shadow:0 12px 40px rgba(19,26,38,.22);
  transition:opacity 120ms var(--ease-out),transform 120ms var(--ease-out);
  max-height:calc(100dvh - 32px); /* D4: να μη ξεφεύγουν τα κουμπιά εκτός οθόνης σε μικρά ύψη */
}
dialog.dlg[open]{display:flex;flex-direction:column}
.dlg-body{overflow-y:auto} /* D4: το περιεχόμενο σκρολάρει, head/foot μένουν ορατά */
dialog.dlg.wide{width:min(620px,94vw)}
dialog.dlg::backdrop{background:rgba(19,26,38,.42)}
@starting-style{dialog.dlg[open]{opacity:0;transform:scale(.98)}}
.dlg-head{padding:16px 20px 0;display:flex;align-items:center;gap:10px}
.dlg-head h3{font-family:var(--title);font-weight:600;font-size:17px;flex:1}
.dlg-x{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--ink3)}
.dlg-x:hover{background:var(--paper);color:var(--ink)}
.dlg-body{padding:14px 20px 4px}
/* flex-wrap: με τέσσερα κουμπιά (π.χ. ο διάλογος σωλήνα: Διαγραφή · Τακτοποίηση · Άκυρο ·
   Αποθήκευση) η σειρά ξεχείλιζε και, επειδή η στοίχιση είναι δεξιά, ΚΟΒΟΤΑΝ το πρώτο κουμπί
   αριστερά — δηλαδή η «Διαγραφή» γινόταν μισή. Με αναδίπλωση πέφτουν σε δεύτερη γραμμή. */
.dlg-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:10px 20px 18px}
.dlg-danger-note{font-size:13.5px;color:var(--ink2);line-height:1.55}
.dlg-danger-note b{color:var(--red-text)}
.steps{display:flex;gap:6px;margin-bottom:14px}
.steps .st{flex:1;height:4px;border-radius:99px;background:var(--line)}
.steps .st.done{background:var(--navy)}

.popover{
  position:fixed;z-index:var(--z-popover);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 28px rgba(19,26,38,.16);
  width:280px;padding:14px;
  transform-origin:bottom left;
  transition:opacity 140ms var(--ease-out),transform 140ms var(--ease-out);
}
@starting-style{.popover.on{opacity:0;transform:scale(.96)}}
.pop-row{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px}
.pop-row .pl{color:var(--ink2);width:96px;flex:none}
.pop-row .pv{font-family:var(--mono);font-size:12.5px;flex:1;overflow:hidden;text-overflow:ellipsis}
.pop-copy{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink3)}
.pop-copy:hover{background:var(--paper);color:var(--navy)}

#toast-zone{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:var(--on-accent);font-size:13.5px;border-radius:99px;padding:10px 18px;
  max-width:88vw;box-shadow:0 4px 16px rgba(19,26,38,.25);
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);
}
@starting-style{.toast{opacity:0;transform:translateY(12px)}}
.toast.err{background:var(--red)}
.toast.leaving{opacity:0;transform:translateY(8px)}

.skel{position:relative;overflow:hidden;background:var(--paper);border-radius:6px}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  transform:translateX(-100%);animation:shimmer 1.2s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-row{display:grid;grid-template-columns:12px 172px 150px 74px 1fr 152px;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.skel-row .skel{height:14px}
.skel-row .skel.big{height:26px}

.empty-state{
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--r);
  padding:44px 24px;text-align:center;color:var(--ink2);font-size:14.5px;
}
.empty-state .es-title{font-weight:600;font-size:16px;color:var(--ink);margin-bottom:6px}
.empty-state .btn{margin-top:14px}

/* ============ Responsive ============ */
@media(max-width:1100px){
  :root{--nav-w:60px}
  .brand-name,.brand-sub,.nav-item span,#profile-btn .f-name,.nav-sec{display:none}
  .nav-item{justify-content:center;padding:10px}
  .brand{justify-content:center;padding:14px 8px}
}
@media(max-width:760px){
  nav.rail-nav{
    inset:0 0 auto 0;width:100%;height:56px;flex-direction:row;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);padding:0 8px;
  }
  .brand{padding:8px}
  .nav-items{flex-direction:row;overflow-x:auto;padding:0 4px;align-items:center}
  .nav-sec{display:none}
  .nav-item{padding:8px;min-width:44px}
  .nav-foot{border-top:none;margin-left:auto;display:flex;align-items:center}
  main.content{margin-left:0;margin-top:56px}
  /* C30: το sticky header να κολλάει ΚΑΤΩ από τη σταθερή μπάρα πλοήγησης (56px), όχι πάνω της */
  .view-head{padding:10px 14px;top:56px}
  .view-body{padding:14px 14px 40px}
  .station .node{margin-left:0}
  .kpis{flex-wrap:wrap}
  .kpi{min-width:45%}
  .chart-box{height:360px}
  .sm-box{height:300px}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .dot.pulse{animation:none}
  .skel::after{animation:none}
}

/* dashboard: sensor picker + recent readings */
.dash-sensorbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dash-sensorbar .dsb-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.dash-sensor-sel{flex:0 0 300px;width:300px;max-width:100%;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-overflow:ellipsis}
.dash-sensor-sel:focus{outline:2px solid var(--navy);outline-offset:1px}
.dash-sensor-sel.sel-auto{flex:0 0 auto;width:auto;min-width:148px;max-width:340px}
/* ══ ΕΠΙΛΟΓΕΑΣ ΜΕ ΔΙΚΟ ΜΑΣ ΣΤΥΛ (Chrome 135+, `appearance: base-select`) ══
   ΔΥΟ ΠΡΑΓΜΑΤΑ ΔΕΝ ΤΑ ΦΤΑΝΕΙ ΤΟ CSS ΣΤΟΝ ΚΛΑΣΙΚΟ `<select>`: η θέση του βέλους (τη βάζει το
   φύλλο στυλ του φυλλομετρητή, το padding δεν τη μετακινεί) και η λίστα που ανοίγει (τη
   ζωγραφίζει το λειτουργικό — τετράγωνη, με δικά της χρώματα). Με το `base-select` και τα δύο
   γίνονται κανονικά στοιχεία και ακολουθούν τα tokens του θέματος.
   ΠΡΟΣΤΑΤΕΥΜΕΝΟ ΜΕ `@supports`: όπου δεν υπάρχει, ισχύει ό,τι ίσχυε — native επιλογέας, καμία
   αλλαγή, κανένα σπάσιμο. */
@supports (appearance: base-select){
  .dash-sensor-sel, .dash-sensor-sel::picker(select){appearance:base-select}
  .dash-sensor-sel{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 12px;text-align:start}
  /* Το επιλεγμένο κείμενο κόβεται με αποσιωπητικά όπως και πριν — στον base-select ζει σε δικό
     του ψευδοστοιχείο, αλλιώς ένα μακρύ όνομα ξεχειλίζει από το κουμπί. */
  .dash-sensor-sel::selectedcontent{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dash-sensor-sel::picker-icon{color:var(--ink3);transition:transform .16s var(--ease-out)}
  .dash-sensor-sel:open::picker-icon{transform:rotate(180deg)}
  .dash-sensor-sel::picker(select){
    border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
    box-shadow:0 12px 30px rgba(3,10,30,.18);padding:5px;margin-top:6px;
    max-height:min(60vh,420px);overflow:auto}
  .dash-sensor-sel option{padding:8px 10px;border-radius:6px;font-size:13.5px;font-weight:500;
    color:var(--ink);background:transparent}
  .dash-sensor-sel option:hover{background:var(--navy-tint)}
  .dash-sensor-sel option:checked{background:var(--navy-tint);color:var(--navy);font-weight:600}
  /* Το χρώμα λέει ήδη ποιο είναι επιλεγμένο· το σημάδι επιλογής μόνο χώρο έτρωγε. */
  .dash-sensor-sel option::checkmark{display:none}
}
/* Χάρακας μέτρησης κειμένου: εκτός ροής, αόρατος, χωρίς αναδίπλωση. */
.sel-ruler{position:absolute;left:-9999px;top:0;white-space:pre;visibility:hidden;pointer-events:none}
/* Στενή παραλλαγή: ο επιλογέας πλέγματος δείχνει «Ελεύθερα» ή «40 px» — δεν χρειάζεται το πλάτος
   του επιλογέα εγκατάστασης, που κουβαλά ονόματα εγκαταστάσεων. */
.dash-sensor-sel.sel-sm{flex:0 0 auto;width:auto;min-width:96px;padding-right:16px}
/* ΠΕΔΙΟ ΜΕ ΕΤΙΚΕΤΑ. Σκέτο «Ελεύθερα» ανάμεσα σε κουμπιά δεν λέει ΤΙ ρυθμίζει· η ετικέτα μπαίνει
   μία φορά έξω από τη λίστα, αντί να επαναλαμβάνεται η λέξη «Πλέγμα» σε κάθε επιλογή. Ένα
   περίγραμμα γύρω και από τα δύο: διαβάζονται ως ΕΝΑ χειριστήριο. */
.tb-field{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel);overflow:hidden}
.tb-field.hidden{display:none}
.tb-field .tb-field-l{display:flex;align-items:center;padding:0 9px;font-size:12px;font-weight:500;
  color:var(--ink3);background:var(--paper);border-right:1px solid var(--line);white-space:nowrap}
.tb-field .dash-sensor-sel{border:none;border-radius:0;background:transparent}
.tb-field .dash-sensor-sel:focus{outline-offset:-2px}
.recent-panel{margin-top:6px}
.recent-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.recent-tbl{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
.recent-tbl th,.recent-tbl td{padding:8px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.recent-tbl th:first-child,.recent-tbl td:first-child{text-align:left}
.recent-tbl thead th{position:sticky;top:0;background:var(--paper);font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em}
.recent-tbl .rt-unit{font-weight:400;color:var(--ink3)}
.recent-tbl tbody tr:hover{background:var(--paper)}
.recent-tbl .rt-time{font-family:var(--mono);color:var(--ink2)}
.recent-tbl .rt-val{font-family:var(--mono);font-variant-numeric:tabular-nums}
.recent-tbl tbody tr:last-child td{border-bottom:none}

/* structure manager (category nav + read-only tree + workspace) */
.st2{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.st2-left{display:flex;flex-direction:column;gap:14px}
.st2-cats{display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px}
.st2-cat{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.st2-cat:hover{background:var(--paper);color:var(--ink)}
.st2-cat.on{background:var(--navy-tint);color:var(--navy);border-color:var(--navy-tint)}
.st2-cat-l{flex:1}
.st2-cat-n{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--paper);color:var(--ink2)}
.st2-cat.on .st2-cat-n{background:var(--panel);color:var(--navy)}
/* Το κουτί της ιεραρχίας μεγαλώνει/μικραίνει με το ανοιχτό περιεχόμενο·
   scroll μόνο όταν το δέντρο ξεπερνά το ύψος της οθόνης. */
.st2-tree-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;max-height:calc(100vh - 120px);overflow:auto}
.st2-tree-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.st2-ro{font-weight:600;color:var(--ink3);text-transform:none;letter-spacing:0}
.st2-tkids{margin-left:14px;border-left:1px solid var(--line);padding-left:6px}
.st2-tn{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;font-size:12.5px;color:var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none}
.st2-tn:hover{background:var(--paper)}
.st2-chev{display:inline-flex;width:16px;flex:0 0 16px;color:var(--ink3);cursor:pointer}
.st2-chev.leaf{visibility:hidden}
.st2-tn-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2-tn.sensor .st2-tn-name{color:var(--navy);font-weight:600}
.st2-tn-tag{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.st2-unhead{font-size:10px;font-weight:700;color:var(--amber-strong);text-transform:uppercase;margin:10px 0 4px}
.st2-work{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;min-height:440px}
.st2-work-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.st2-work-head h3{font-family:var(--title);font-size:16px;font-weight:600}
.st2-table-wrap{overflow-x:auto}
/* table-layout:fixed → οι στήλες μοιράζονται το ΔΙΑΘΕΣΙΜΟ πλάτος αντί να το επιβάλλει το
   περιεχόμενο. Χωρίς αυτό, μια μεγάλη Περιγραφή με nowrap έσπρωχνε τον πίνακα εκτός οθόνης. */
.st2-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
.st2-table th,.st2-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st2-table td.ta-r,.st2-table th.ta-r{padding-right:12px}
/* Οι δύο μακρόστενες στήλες (Διαδρομή, Περιγραφή) κόβονται με «…»· το πλήρες κείμενο στο tooltip. */
.st2-path,.st2-desc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Οι ανώτεροι κόμβοι του μονοπατιού υποχωρούν· έντονος μένει ΜΟΝΟ ο άμεσος γονέας. */
.st2-path-up{color:var(--ink3);font-weight:400}
.st2-path b{font-weight:600;color:var(--ink)}
/* Σταθερά πλάτη στις στενές στήλες, ώστε το table-layout:fixed να μη μοιράζει ίσα μερίδια και
   κόβει τα κουμπιά. Οι υπόλοιπες (Όνομα, Διαδρομή, Περιγραφή) μοιράζονται ό,τι περισσεύει. */
.st2-table th.st2-th-ord{width:64px}           /* Σειρά (λαβή + αριθμός) — μόνο όπου υπάρχει */
/* Ενέργειες: αρκετό πλάτος για δύο κουμπιά. ΟΧΙ overflow:visible — άφηνε τα κουμπιά να
   ξεχειλίσουν έξω από τον πίνακα και να χρειάζεται οριζόντιο scroll. */
.st2-table th.ta-r{width:198px}
.st2-table .ta-r{white-space:nowrap}
.st2-table thead th{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em}
.st2-table .ta-r{text-align:right}
.st2-table tbody tr{cursor:pointer;user-select:none;-webkit-user-select:none}
/* Ομάδες ανά γονέα: εναλλάξ απαλό φόντο + διαχωριστική γραμμή στην αρχή κάθε ομάδας. Δείχνει
   με μια ματιά ποια σημεία ανήκουν στην ίδια θέση, ποιες θέσεις στον ίδιο χώρο κ.ο.κ. — και
   ταυτόχρονα τα όρια μέσα στα οποία επιτρέπεται το σύρσιμο. */
.st2-table tbody tr.st2-galt{background:color-mix(in srgb,var(--navy-tint) 42%,transparent)}
.st2-table tbody tr.st2-gstart>td{border-top:2px solid var(--ink3)}
.st2-table tbody tr:hover{background:var(--paper)}
/* Σειρά εμφάνισης + αναδιάταξη με σύρσιμο (native HTML5 DnD — καμία βιβλιοθήκη).
   Ο αριθμός είναι αποτέλεσμα, όχι πληκτρολόγηση: η λαβή είναι η κύρια οδός. */
.st2-ord{display:inline-flex;align-items:center;gap:8px}
.st2-grip{color:var(--ink3);cursor:grab;letter-spacing:-2px;font-size:15px;line-height:1}
.st2-drow:active .st2-grip{cursor:grabbing}
.st2-ord-n{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600;min-width:1.4em}
.st2-dragging{opacity:.45}
/* Η γραμμή-στόχος δείχνει ΠΟΥ θα πέσει (πάνω/κάτω). Inset shadow: δεν μετακινεί τίποτα, άρα
   δεν «πηδάει» ο πίνακας κατά το σύρσιμο. */
.st2-dropb>td{box-shadow:inset 0 2px 0 var(--navy)}
.st2-dropa>td{box-shadow:inset 0 -2px 0 var(--navy)}
.st2-empty{text-align:center;color:var(--ink3);font-style:italic;padding:28px}
.st2-mini{font:inherit;font-size:11.5px;font-weight:600;padding:4px 8px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--navy);cursor:pointer;margin-left:4px}
.st2-mini:hover{background:var(--navy-tint)}
.st2-mini.danger{color:var(--red-text);border-color:transparent;background:rgba(216,0,1,.08)}
.st2-mini.danger:hover{background:rgba(216,0,1,.16)}
.st2-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:60px 20px;color:var(--ink3)}
.st2-intro-t{font-family:var(--title);font-size:16px;font-weight:600;color:var(--ink)}
.st2-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer;padding:0}
.st2-back:hover{color:var(--navy)}
.st2-form{display:flex;flex-direction:column;gap:14px;max-width:760px}
.st2-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st2-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.st2-f-l{font-size:12px;font-weight:600;color:var(--ink2)}
.st2-f-h{font-size:11px;color:var(--ink3)}
.st2-in{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px}
.st2-in:focus{outline:2px solid var(--navy);outline-offset:1px}
.st2-sec{border-top:1px solid var(--line);padding-top:14px}
.st2-sec-t{font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.st2-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.st2-check input{width:18px;height:18px;min-height:0;flex:none;accent-color:var(--navy);padding:0}
.st2-lim-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.st2-lim-tbl{border-collapse:collapse;width:100%;min-width:660px;font-size:12px}
.st2-lim-tbl th,.st2-lim-tbl td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:center}
.st2-lim-tbl th{font-size:10.5px;font-weight:600;color:var(--ink2);text-transform:uppercase}
/* 1η στήλη = «Σειρά» (αριθμητικό), 2η = όνομα παραμέτρου (ήταν 1η πριν μπει η σειρά) */
.st2-lim-tbl td:nth-child(2),.st2-lim-tbl th:nth-child(2){text-align:left;font-weight:600;white-space:nowrap;padding-left:10px}
.st2-lim-tbl td:first-child .st2-in{width:52px}
.st2-lim-tbl .st2-in{padding:5px 6px;font-size:12px;text-align:center}
.st2-lim{width:64px}
.st2-formbar{display:flex;gap:10px;padding-top:16px;margin-top:4px;border-top:1px solid var(--line)}
@media(max-width:900px){.st2{grid-template-columns:1fr}.st2-grid2{grid-template-columns:1fr}}

/* ============ Κέντρο Ανάλυσης: subtabs + Επισκόπηση (pins/alarms) ============ */
.an-tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.an-tab{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px}
.an-tab:hover{color:var(--ink)}
.an-tab.on{color:var(--navy);border-bottom-color:var(--navy)}
.panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.panel-head .panel-title{margin:0}
.panel-head .sp{flex:1}

.pin-group{margin-bottom:18px}
.pin-group:last-child{margin-bottom:0}
.pin-group-h{display:flex;align-items:center;gap:8px;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.pin-group-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.pin-group-n{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink3);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
/* Το πλέγμα και το πλακίδιο της Επισκόπησης ζουν πλέον στο κοινό .ms-* (ΕΝΑ πλακίδιο για όλες τις
   οθόνες) — δες τον κανόνα «.ms-grid» πιο κάτω, μαζί με το μέγεθος γραφικών (data-ovsize).
   Εδώ μένουν μόνο όσα χρησιμοποιεί ακόμη το ovGraphic (μεγάλος αριθμός ως γραφικό). */
.pin-val{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--ink);margin-top:6px;font-feature-settings:'tnum' 1}
.pin-unit{font-size:13px;color:var(--ink3);font-weight:500;font-family:var(--sans)}
/* γραφική προβολή pin (reuse SCADA renderers) — ΕΝΙΑΙΟ ύψος χώρου + παρόμοια μεγέθη σε όλους τους τύπους,
   ώστε να μη «χτυπάει» άλλο τεράστιο κι άλλο μικροσκοπικό στο μάτι */
.pin-graphic{display:flex;justify-content:center;align-items:center;height:205px;margin:10px 0}
.pin-graphic .sc-dial{max-width:280px}
.pin-graphic .sc-thermo{height:200px}
.pin-graphic .sc-wg-bar{width:100%;height:18px;border-radius:9px}   /* παχύτερη μπάρα ώστε να ταιριάζει με ράγα/θερμόμετρο/καντράν */
.pin-graphic .sc-wg-bar.vert{width:26px;height:160px;border-radius:13px}
.pin-graphic .sc-wg-bar .sc-wg-fill{border-radius:9px}
.pin-graphic .sc-led{font-size:40px}
.pin-graphic .sc-lamp{width:54px;height:54px}
/* Μεγάλη ράγα στην Επισκόπηση — πιο χοντρό track, μεγαλύτερο caret & αριθμοί, ώστε να πιάνει περισσότερο χώρο */
.pin-graphic .rail{width:100%;height:62px}
.pin-graphic .rail .rail-track{top:21px;height:14px}
.pin-graphic .rail .rail-tick{top:18px;height:20px;width:2px}
.pin-graphic .rail .rail-caret{top:6px;transform:translateX(-8px);border-left-width:8px;border-right-width:8px;border-top-width:16px}
.pin-graphic .rail .rail-whisker{top:27px;height:3px}
.pin-graphic .rail .rail-lab{top:41px;font-size:15px}
.pin-rail-wrap{width:100%}
.pin-gval{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink);text-align:center;margin-top:2px;font-feature-settings:'tnum' 1}
.pin-sub{font-size:12px;color:var(--ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-status{font-size:12px;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:6px}
.pin-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.pin-status.ok{color:var(--ok-text)}
.pin-status.warn{color:var(--amber-text)}   /* ήταν --amber-strong: 4,29:1, κοντά αλλά κάτω από το 4,5:1 */
.pin-status.crit{color:var(--red-text)}
.pin-status.nodata{color:var(--ink3)}
.pin-range{font-size:12px;color:var(--ink3);margin-top:2px;font-family:var(--mono)}
.pin-x{position:absolute;top:8px;right:8px;color:var(--ink3);padding:4px;border-radius:6px;opacity:0;transition:opacity 120ms}
.pin-tile:hover .pin-x,.pin-tile:focus-within .pin-x{opacity:1}
.pin-x:hover{background:var(--hover);color:var(--red-text)}

.pin-x-wrap{position:relative;width:26px}
.pin-x-wrap .pin-x{position:static;display:block}
@media(max-width:900px){
}

.al-list{display:flex;flex-direction:column;gap:8px;max-height:440px;overflow-y:auto}
.al-row{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;background:var(--panel)}
.al-row.crit{border-left:3px solid var(--red)}
.al-row.warn{border-left:3px solid var(--amber)}
.al-row.ended{opacity:.72}
.al-row .ldot{margin-top:5px;flex:none}
.al-main{flex:1;min-width:0}
.al-title{font-size:13.5px;color:var(--ink)}
.al-sub{font-size:12px;color:var(--ink3);margin-top:1px}
.al-right{text-align:right;flex:none}
.al-val{font-size:14px;font-weight:700;color:var(--ink)}
.al-when{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:2px}
.al-empty{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:13.5px;padding:12px 4px}
.al-empty svg{color:var(--ok)}
.al-badge{background:var(--red);color:var(--on-accent);font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 7px;margin-left:6px}
.al-instr{display:flex;align-items:flex-start;gap:5px;font-size:12.5px;color:var(--ink2);margin-top:5px;padding:6px 9px;background:var(--paper);border:1px solid var(--line);border-radius:6px;line-height:1.45} /* F6 */
.al-instr svg{flex:none;margin-top:2px;color:var(--navy)}

/* ============ Σύγκριση (πλούσια) ============ */
.cmp-custom{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.cmp-custom input[type="datetime-local"]{width:auto;min-height:36px;padding:6px 10px}
.cmp-scope-sel{flex:1 1 180px;min-width:150px;max-width:280px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
/* κάθε διάγραμμα μεγάλο: πάντα 1 ανά σειρά (πλήρες πλάτος) */
.cmp-grid{display:grid;grid-template-columns:1fr;gap:16px}
.cmp-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.cmp-card:fullscreen{background:var(--panel);padding:22px;display:flex;flex-direction:column;justify-content:center}
.cmp-card:fullscreen .chart-box{height:calc(100vh - 110px)}
.cmp-card-t{font-weight:700;font-size:13.5px;color:var(--ink);margin-bottom:8px}

/* ============ Εποπτεία SCADA ============ */
/* ΤΥΛΙΓΕΙ. Χωρίς αυτό, τρία μπλοκ (υπόδειξη + στρώσεις + υπόμνημα) σε στενό παράθυρο ΞΕΧΕΙΛΙΖΑΝ και
   το υπόμνημα κοβόταν στη δεξιά άκρη — φαινόταν σε στιγμιότυπο πριν μπουν οι στρώσεις. */
.sc-hintrow{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap;row-gap:6px}
.sc-hintrow .sp{flex:1}
.sc-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);font-weight:600;align-items:center}
.sc-legend .ldot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:4px}
.sc-scene{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.sc-space{padding:16px 18px}
.sc-spname{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin-bottom:12px}
.sc-spname svg{color:var(--navy)}
.sc-points{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.sc-point{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
.sc-ptname{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--ink);margin-bottom:2px}
.sc-ptname svg{color:var(--ink3)}
.sc-blist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sc-badge{display:flex;align-items:flex-start;gap:9px;background:var(--panel);border:2px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;cursor:pointer;text-align:left;transition:border-color 160ms}
.sc-badge:hover{filter:brightness(.98)}
.sc-badge .ldot{margin-top:4px;flex:none}
.sc-bmeta{min-width:0;flex:1}   /* min-width:0 → το μακρύ όνομα κόβεται με ellipsis αντί να ξεχειλίζει το κουτί */
.sc-bname{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-val{font-size:12px;color:var(--ink2);margin-top:1px}
.sc-badge.abs{position:absolute;display:block;transform:translate(-50%,-50%);box-shadow:0 2px 9px rgba(0,0,0,.16);user-select:none;width:132px;padding:5px 7px;border-width:1.5px}
.sc-mhead{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.sc-mhead .ldot{margin-top:0;width:8px;height:8px}
.sc-mname{font-size:10px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-mchips{display:flex;flex-direction:column;gap:1px}
.sc-mchip{display:flex;align-items:baseline;justify-content:space-between;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:0 4px;line-height:1.35;white-space:nowrap}
.sc-mchip.oob{background:color-mix(in srgb,var(--red) 14%,var(--panel));border-color:var(--red)}
.sc-mchip .sc-chl{font-size:10px;opacity:.8;color:var(--ink2)}   /* A7: ≥10px για αναγνωσιμότητα */
.sc-mchip .sc-chv{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--ink)}
.sc-mchip.oob .sc-chv{color:var(--red-text)}
/* ΤΟ ΜΙΛΙΜΕΤΡΕ ΑΝΗΚΕΙ ΣΤΗ ΣΚΗΝΗ, ΟΧΙ ΣΤΟ ΠΑΡΑΘΥΡΟ.
   Πριν, το πλέγμα ήταν φόντο του .sc-canvas (του σταθερού viewport) ενώ τα στοιχεία ζουν στο
   .sc-stage (το layer που κάνει zoom/pan). Στο 100% τα δύο συμπίπτουν και δεν φαινόταν τίποτα —
   αλλά με ZOOM OUT η σκηνή μίκραινε και το πλέγμα ΕΜΕΝΕ να γεμίζει όλο το παράθυρο. Δηλαδή ο
   χρήστης έβλεπε μιλιμετρέ εκεί που ΔΕΝ υπάρχει σκηνή, έσερνε στοιχείο προς τα εκεί, και αυτό
   σταματούσε σε ένα αόρατο όριο στη μέση του πλέγματος. Το πλέγμα υποσχόταν χώρο που δεν υπήρχε.
   Τώρα το πλέγμα ζωγραφίζεται στο ίδιο layer με τα στοιχεία: κλιμακώνεται μαζί τους, οπότε η άκρη
   της σκηνής ΦΑΙΝΕΤΑΙ σε κάθε ζουμ και το όριο του σύρσιμου γίνεται προφανές αντί για αυθαίρετο. */
/* ΥΨΟΣ: ό,τι μένει μέχρι το κάτω άκρο του παραθύρου — το γράφει το scSizeCanvas σε --sc-canvas-h.
   ΟΧΙ aspect-ratio: με πλάτος 1660px το 16:9 έδινε 934px ύψος, που δεν χωρούσε κάτω από τη γραμμή
   εργαλείων και ανάγκαζε κύλιση ολόκληρης της σελίδας. Το 60vh είναι μόνο δίχτυ πριν τρέξει η JS. */
.sc-canvas{position:relative;width:100%;height:var(--sc-canvas-h,60vh);min-height:320px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;touch-action:none;cursor:grab;
  background-color:color-mix(in srgb,var(--ink3) 9%,var(--paper))}   /* «απ' έξω»: πιο μουντό από τη σκηνή */
.sc-canvas.panning{cursor:grabbing}
/* pannable/zoomable layer: στοιχεία (θέσεις σε %) + πλέγμα + προαιρετικό φόντο· ο μετασχηματισμός εδώ.
   #19: το ΜΕΓΕΘΟΣ της σκηνής είναι ανά οθόνη (canvas_w × canvas_h) και το γράφει inline το
   scBuildCanvas σε px — ΟΧΙ ποσοστό του παραθύρου, αλλιώς η ίδια οθόνη δείχνει αλλού σε κάθε
   μέγεθος παραθύρου. Το 100% εδώ είναι μόνο δίχτυ πριν τρέξει η JS. */
/* ΤΟ `user-select:none` ΕΙΝΑΙ ΔΙΟΡΘΩΣΗ ΣΦΑΛΜΑΤΟΣ, ΟΧΙ ΚΑΛΛΩΠΙΣΜΟΣ. Χωρίς αυτό, ένα σύρσιμο πάνω
   από τη σκηνή άφηνε ΕΠΙΛΕΓΜΕΝΟ ΚΕΙΜΕΝΟ (τίτλοι, τιμές, ετικέτες που δεν το δήλωναν όλα), και το
   επόμενο πάτημα πάνω στην επιλογή ξεκινούσε **native drag της επιλογής**: ο καμβάς κουνιόταν λίγα
   px και μετά κόλλαγε, με τον κέρσορα `no-drop` («απαγορευτικό») — αναφορά χρήστη 01/09. Μπαίνει
   στη ΣΚΗΝΗ και όχι σε κάθε στοιχείο χωριστά, γιατί ακριβώς η διασπορά ήταν το πρόβλημα.
   Ζεύγος με το `preventDefault` του `scAttachPanZoom`: το ένα εμποδίζει τη δημιουργία της επιλογής,
   το άλλο το σύρσιμό της. Χρειάζονται και τα δύο — η επιλογή μπορεί να έρθει και από αλλού (Ctrl+A
   του φυλλομετρητή, διπλό κλικ σε κείμενο). */
.sc-stage{position:absolute;top:0;left:0;width:100%;height:100%;
  user-select:none;-webkit-user-select:none;
  transform-origin:0 0;
  background-color:var(--paper);box-shadow:0 0 0 1px var(--line)}
/* will-change ΜΟΝΟ όσο σέρνεις. Μόνιμο `will-change:transform` κρατά τη σκηνή σε ξεχωριστό
   επίπεδο σύνθεσης, το οποίο ο browser ΔΕΝ ξαναζωγραφίζει όταν αλλάξει η κλίμακα: μεγεθύνει την
   υπάρχουσα ψηφιδοεικόνα, οπότε σύμβολα και κείμενα βγαίνουν θολά/κοκκώδη σε zoom in. Χωρίς αυτό
   κάθε αλλαγή κλίμακας ξαναζωγραφίζεται σε πλήρη ανάλυση — τα SVG είναι διανυσματικά, δεν έχουν
   ταβάνι. Η κλάση `panning` μπαίνει ήδη στο .sc-canvas όσο κρατάς πατημένο. */
.sc-canvas.panning .sc-stage{will-change:transform}
/* ΤΟ ΒΗΜΑ ΕΡΧΕΤΑΙ ΑΠΟ ΤΟ `--sc-grid`, δεν είναι πια καρφωμένο στα 40 px: έτσι το πλέγμα που
   ΒΛΕΠΕΙΣ είναι το ίδιο που ΚΟΥΜΠΩΝΕΙ. Χωρίς ρύθμιση μένει 40 px, δηλαδή ίδια εικόνα με πριν. */
.sc-stage:not(.has-bg){
  background-image:linear-gradient(color-mix(in srgb,var(--ink3) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink3) 12%,transparent) 1px,transparent 1px);
  background-size:var(--sc-grid,40px) var(--sc-grid,40px)}
/* οδηγοί στοίχισης κατά το σύρσιμο widget (μαγνητικό κούμπωμα σε γραμμές άλλων στοιχείων) */
/* Πλαίσιο επιλογής (Shift+σύρσιμο σε κενό). Συντεταγμένες ΟΘΟΝΗΣ, γι' αυτό κάθεται στο
   .sc-canvas και ΟΧΙ στη σκηνή: έτσι δεν το πιάνει το ζουμ ούτε η μετακίνηση. */
.sc-marquee{position:absolute;pointer-events:none;z-index:7;
  border:1px dashed #1F6FEB;background:color-mix(in srgb,#1F6FEB 8%,transparent)}
/* ── ΚΑΤΑΛΟΓΟΣ ΣΤΟΙΧΕΙΩΝ (Λ9) ────────────────────────────────────────────────────────────────
   ΚΥΛΙΣΗ ΜΕΣΑ ΣΤΟΝ ΚΑΤΑΛΟΓΟ, ΟΧΙ ΣΤΟΝ ΔΙΑΛΟΓΟ: μια οθόνη με 200 στοιχεία θα έκανε τον διάλογο
   ψηλότερο από την οθόνη και το κουμπί «Κλείσιμο» θα έφευγε κάτω από το παράθυρο. Το 52vh αφήνει
   χώρο για κεφαλίδα, υποσημείωση και υποσέλιδο.
   ΜΙΑ ΓΡΑΜΜΗ ΑΝΑ ΣΤΟΙΧΕΙΟ ΣΕ ΔΥΟ ΣΤΗΛΕΣ: ο τύπος σε σταθερό πλάτος ώστε τα ονόματα να ξεκινούν
   ΟΛΑ στην ίδια στήλη — αλλιώς ο κατάλογος διαβάζεται ως σκάλα και το μάτι δεν σαρώνει. */
.sc-eltree{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto;overflow-x:hidden}
.sc-eltree-h{margin-top:8px;padding:2px 4px;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink3)}
.sc-eltree-h:first-child{margin-top:0}
.sc-eltree-r{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center;
  width:100%;padding:6px 8px;text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);font:inherit}
.sc-eltree-r:hover{background:color-mix(in srgb,var(--navy) 7%,transparent)}
.sc-eltree-r.on{background:color-mix(in srgb,var(--navy) 13%,transparent);border-color:var(--navy)}
.sc-eltree-t{font-size:11px;font-weight:700;color:var(--ink3)}
/* ΤΟ ΟΝΟΜΑ ΨΑΛΙΔΙΖΕΤΑΙ, ΔΕΝ ΑΝΑΔΙΠΛΩΝΕΤΑΙ: μια ετικέτα με δύο παραγράφους κείμενο θα έκανε μια
   γραμμή του καταλόγου ψηλότερη από όλες τις άλλες και θα έσπαγε τη σάρωση. */
.sc-eltree-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-eltree-l{font-size:12px;opacity:.7}
.sc-guide-v{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--navy);pointer-events:none;z-index:5}
.sc-guide-h{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--navy);pointer-events:none;z-index:5}
.sc-stage.has-bg{background-position:center;background-repeat:no-repeat;background-size:contain}
.sc-stage.has-bg[style]{background-position:center!important;background-repeat:no-repeat!important;background-size:contain!important}
.sc-zoom{position:absolute;right:10px;bottom:10px;z-index:20;display:flex;flex-direction:column;align-items:stretch;gap:4px;--sc-zw:40px}
/* Λ14 ΓΡΑΜΜΗ ΚΛΙΜΑΚΑΣ. Το πλάτος το ΓΡΑΦΕΙ Η JS (στρογγυλό μήκος × ζουμ), γι' αυτό δεν δηλώνεται
   εδώ. Τα δύο κάθετα «πόδια» είναι η σύμβαση των σχεδίων: δηλώνουν ΠΟΥ αρχίζει και πού τελειώνει
   η μέτρηση — χωρίς αυτά η γραμμή μοιάζει διακοσμητικό υπογράμμισμα. `align-self:flex-end` ώστε να
   μη τεντώνεται στο πλάτος της στοίβας του ζουμ όταν το μήκος βγαίνει μικρό. */
/* 🔴 ΟΧΙ `height:0`: κατέρρεε το κουτί και η γραμμή περνούσε ΜΕΣΑ από το κείμενο («2,0 μ.»
   διαγραμμένο). Το κείμενο κάθεται ΠΑΝΩ από τη βάση, και τα δύο «πόδια» κατεβαίνουν σε όλο το ύψος
   του — δηλαδή αγκύλη, όπως στα σχέδια. Φάνηκε ΜΟΝΟ σε απόδοση: κανένας δομικός έλεγχος δεν βλέπει
   ότι μια γραμμή διασχίζει γράμματα. */
/* Απόφαση 9: η γραμμή έκδοσης στις Ρυθμίσεις. Τα δύο αποτυπώματα σε monospace ώστε να συγκρίνονται
   με το μάτι — proportional γραμματοσειρά κάνει δύο δωδεκάδες hex να μοιάζουν ίδιες. */
.set-ver{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink2)}
.set-ver code{font-family:ui-monospace,"JetBrains Mono",monospace;font-size:12px;
  padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--ink3) 12%,transparent)}
.set-ver-old{color:var(--amber-text);font-weight:700}
.set-ver .btn-plain{margin-left:auto;font-size:12px;padding:4px 10px}
.sc-scalebar{align-self:flex-end;box-sizing:content-box;min-width:14px;
  border-bottom:2px solid var(--ink2);border-left:2px solid var(--ink2);border-right:2px solid var(--ink2);
  padding:1px 3px 3px;margin-bottom:2px;
  font-size:11px;font-weight:700;line-height:1.25;color:var(--ink2);text-align:center;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:color-mix(in srgb,var(--panel) 82%,transparent)}
/* ΜΙΑ ΣΤΗΛΗ, ΕΝΑ ΠΛΑΤΟΣ (αναφορά χρήστη 02/09: «φτιάξε λίγο τα κουτάκια»). Πριν, τα κουμπιά ήταν
   32 px και η ένδειξη ποσοστού 46+ px, οπότε η στοίβα έβγαινε οδοντωτή — τρία στενά κουτιά κι ένα
   φαρδύ στη μέση. Το πλάτος είναι ΕΝΑ (`--sc-zw`) για όλα, και βγαίνει από το πλατύτερο κείμενο που
   μπορεί να εμφανιστεί: το ζουμ κλειδώνει στο 0,04…4, άρα «400 %» — 5 χαρακτήρες στα 12 px bold
   ≈ 36 px, χωράει στα 40 χωρίς να σπάσει. Καμία περίπτωση 1000 %. */
/* ΤΕΤΡΑΓΩΝΑ: το `.btn-plain` της βάσης έχει `min-height:40px`, οπότε το παλιό `height:32px` δεν
   ίσχυε ποτέ — τα κουμπιά ήταν 32×40, ψηλόλιγνα. Το έπιασε ο έλεγχος 138 μετρώντας ύψος, όχι το
   μάτι. Πλάτος = ύψος = `--sc-zw`, και `min-height:0` για να μη ξαναμπεί η βάση από κάτω. */
.sc-zoom .btn-plain{width:var(--sc-zw);height:var(--sc-zw);min-height:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.sc-zoom .sc-zoom-pct{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.1px}
/* HMI value widgets */
.sc-widget{position:absolute;transform:translate(-50%,-50%) translate(var(--sc-dx,0px),var(--sc-dy,0px)) scale(var(--sc-scale,1));background:var(--panel);border:1.5px solid var(--line);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.16);padding:8px 10px;width:max-content;min-width:40px;max-width:340px;user-select:none}
.sc-widget:has(.sc-wg-row.col){min-width:190px}   /* μετρητής/μπάρα/τάση: πλάτος για να μη «σπάσει» το γράφημα */
.sc-widget:has(.sc-multi-wrap){min-width:210px}   /* γράφημα πολλαπλών σειρών */
.sc-widget:has(.sc-wg-row.led){min-width:40px}   /* LED: όσο μικρότερο γίνεται (νικάει τον κανόνα .col) */
.sc-wg-body.grid2{display:grid;grid-template-columns:auto auto;column-gap:12px;row-gap:7px;align-items:center}
.sc-wg-body.grid2 .sc-wg-row{display:contents}   /* κάθε γραμμή δίνει 2 κελιά (όνομα, τιμή) → κοινές στήλες */
.sc-widget.transparent{background:transparent;border:none;box-shadow:none;padding:2px 4px}   /* διαφανές widget: μόνο τιμή+μονάδα, χωρίς πάνελ */
/* ΛΑΒΕΣ ΑΛΛΑΓΗΣ ΜΕΓΕΘΟΥΣ (μόνο σε επεξεργασία): 4 γωνίες παντού + 4 μέσα πλευρών στα τεντωμένα.
   ΑΝΤΙ-ΚΛΙΜΑΚΩΣΗ: η λαβή μένει σταθερή σε px όσο κι αν μεγαλώσει το στοιχείο — χωρίς αυτό, σε
   ×2,5 γινόταν τεράστιο κουτί που έκρυβε το ίδιο το σύμβολο. Το transform-origin είναι πάντα η
   πλευρά όπου κάθεται η λαβή, ώστε η αντι-κλιμάκωση να μην την ξεκολλά από την ακμή. */
/* ΠΙΑΝΕΙ ΚΛΙΚ ΜΟΝΟ ΟΤΑΝ ΦΑΙΝΕΤΑΙ. Οι λαβές είναι αόρατες μέχρι το hover ή την επιλογή, αλλά
   με `opacity: 0` εξακολουθούσαν να ΚΑΤΑΠΙΝΟΥΝ το κλικ: γύρω από κάθε στοιχείο υπήρχε
   δακτύλιος από τέσσερα (ή οκτώ) τετράγωνα 13 px που «έτρωγαν» την επιλογή και το διπλό
   κλικ — σε σύμβολο 44 px αυτό είναι μεγάλο μέρος της επιφάνειάς του (αναφορά χρήστη 20/08:
   «καμιά φορά το διπλό κλικ δεν με βάζει μέσα»). */
.sc-resize{position:absolute;width:13px;height:13px;touch-action:none;z-index:8;pointer-events:none}
.sc-widget:hover .sc-resize,.sc-label:hover .sc-resize,.sc-outline:hover .sc-resize,
.sc-widget.sel .sc-resize,.sc-label.sel .sc-resize,.sc-outline.sel .sc-resize{pointer-events:auto}
/* ΜΟΝΟ ΣΤΟ HOVER Ή ΣΤΟ ΕΠΙΛΕΓΜΕΝΟ. Με μία λαβή ανά στοιχείο, το μόνιμο αχνό γκρι ήταν αθώο· με
   οκτώ, μια οθόνη 20 στοιχείων θα έδειχνε 160 τετραγωνάκια. Η λαβή δεν φεύγει ποτέ ΚΑΤΑ το
   σύρσιμο: ο δείκτης είναι πάνω της, άρα το :hover ισχύει. */
.sc-resize::after{content:"";position:absolute;inset:2px;border-radius:2px;background:var(--panel);
  border:1.5px solid var(--ink2);opacity:0;transition:opacity .12s,border-color .12s}
.sc-widget:hover .sc-resize::after,.sc-label:hover .sc-resize::after,.sc-outline:hover .sc-resize::after,
.sc-widget.sel .sc-resize::after,.sc-label.sel .sc-resize::after,.sc-outline.sel .sc-resize::after{opacity:.85}
.sc-resize:hover::after{opacity:1;border-color:var(--navy)}
.sc-resize.nw,.sc-resize.ne,.sc-resize.se,.sc-resize.sw{transform:scale(calc(1/var(--sc-scale,1)))}
.sc-resize.nw{left:-4px;top:-4px;cursor:nwse-resize;transform-origin:top left}
.sc-resize.ne{right:-4px;top:-4px;cursor:nesw-resize;transform-origin:top right}
.sc-resize.se{right:-4px;bottom:-4px;cursor:nwse-resize;transform-origin:bottom right}
.sc-resize.sw{left:-4px;bottom:-4px;cursor:nesw-resize;transform-origin:bottom left}
.sc-resize.n,.sc-resize.s{left:50%;cursor:ns-resize;transform:translateX(-50%) scale(calc(1/var(--sc-scale,1)))}
.sc-resize.n{top:-4px;transform-origin:top center}
.sc-resize.s{bottom:-4px;transform-origin:bottom center}
.sc-resize.e,.sc-resize.w{top:50%;cursor:ew-resize;transform:translateY(-50%) scale(calc(1/var(--sc-scale,1)))}
.sc-resize.e{right:-4px;transform-origin:right center}
.sc-resize.w{left:-4px;transform-origin:left center}
.sc-wg-title{font-size:calc(11px * var(--sc-fs,1));font-weight:700;color:var(--ink);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-wg-body{display:flex;flex-direction:column;gap:7px}
.sc-wg-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sc-wg-row.col{flex-direction:column;align-items:stretch;gap:3px}
.sc-wg-rowhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-wg-lbl{font-size:calc(10.5px * var(--sc-fs,1));color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sc-wg-num{font-size:calc(13px * var(--sc-fs,1));font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-wg-num.big{font-size:calc(19px * var(--sc-fs,1))}
.sc-wg-spark{display:block;width:100%;height:46px;overflow:visible}
.sc-wg-bar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink3) 18%,transparent);overflow:hidden}
.sc-wg-fill{height:100%;border-radius:4px;transition:width .3s}
.sc-wg-bar.vert{width:9px;height:64px;align-self:center;display:flex;align-items:flex-end}
.sc-wg-bar.vert .sc-wg-fill{width:100%;height:0;transition:height .3s}
.sc-wg-empty{color:var(--ink3);text-align:center;font-size:12px}
/* Ψηφιακό LED πάνελ */
.sc-led{background:#0b0f14;border-radius:3px;padding:1px 5px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:calc(13px * var(--sc-fs,1));letter-spacing:.5px;font-variant-numeric:tabular-nums;text-align:center;align-self:center}
/* Λυχνία κατάστασης */
.sc-wg-row.lamp{align-items:center;gap:8px}
.sc-wg-row.lamp .sp{flex:1}
.sc-lamp{width:14px;height:14px;border-radius:50%;flex:none}
.sc-lamp.off{box-shadow:none!important;opacity:.5}
/* Λυχνία διακόπτη on/off (HMI pilot light): πράσινη+bloom αναμμένη, σκούρος δίσκος σβηστή */
.sc-pilot{width:16px;height:16px;border-radius:50%;flex:none;display:inline-block;box-sizing:border-box;position:relative;transition:box-shadow .2s,background .2s,border-color .2s}
.sc-pilot.off{background:radial-gradient(circle at 35% 30%,#3a4152,#20242e 70%);border:1px solid color-mix(in srgb,var(--ink3) 55%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.sc-pilot.on{background:radial-gradient(circle at 35% 30%,#7bf0a6,#22c55e 62%);border:1px solid #16a34a;box-shadow:0 0 6px 1px color-mix(in srgb,#22c55e 78%,transparent),0 0 13px 3px color-mix(in srgb,#22c55e 42%,transparent),inset 0 1px 2px rgba(255,255,255,.5)}
.sc-pilot-state{font-size:12px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.pin-graphic .sc-pilot{width:40px;height:40px}
/* Καντράν / θερμόμετρο */
.sc-dial{display:block;width:100%;max-width:260px;height:auto;margin:0 auto}
.sc-thermo{display:block;height:150px;width:auto;margin:0 auto}
.sc-dial-tick{fill:var(--ink3);font-size:6px;font-family:'JetBrains Mono',monospace}
.sc-dial-val{font-size:15px;font-weight:700;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.sc-dial-tick.lim{fill:var(--ink);font-weight:700}   /* τιμές ορίων έντονες, ξεχωρίζουν από τις έξτρα */
/* Γράφημα πολλαπλών σειρών */
.sc-multi-wrap{display:flex;flex-direction:column;gap:5px;align-self:stretch}
.sc-multi{display:block;width:100%;height:58px;overflow:visible}
.sc-multi-legend{display:flex;flex-direction:column;gap:2px}
.sc-multi-item{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink2);white-space:nowrap}
.sc-multi-item i{width:9px;height:9px;border-radius:2px;flex:none}
.sc-wgc-rows{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.sc-wgc-row{display:flex;gap:6px;align-items:center}
.sc-wgc-row select{flex:1;min-width:0}
.sc-wgc-row .sc-wgc-pwrap{flex:1;min-width:0;display:flex}
.sc-wgc-row .sc-wgc-pwrap select{flex:1;min-width:0}
.sc-wgc-row .btn-plain{padding:4px 9px;font-size:15px;line-height:1}
.sc-wgc-show{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
/* σφιχτές γραμμές checkbox στον διάλογο widget (το γενικό .check-row έχει 40px για φόρμες) */
.sc-wgc .check-row{min-height:28px;font-size:13px;gap:12px}
/* γραμμή επιλογής (checkbox [+ color swatch]) — wrapper ώστε το label να μη γίνεται block από το .field>label */
/* 2px ήταν πολύ σφιχτό: το πεδίο από πάνω ακουμπούσε την ετικέτα της επόμενης γραμμής
   (αναφορά χρήστη 19/08, «Στροφή» κολλημένη στο πεδίο μεγέθους). */
.sc-wgc-line{display:flex;align-items:center;gap:10px;margin-top:9px}
/* ορατός font picker: input + κυλιόμενη λίστα, κάθε επιλογή στην ΟΨΗ της γραμματοσειράς της */
.sc-fontpick{position:relative}
.sc-fontpick-in{width:100%}
.sc-fontpick-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:230px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.20)}
.sc-fontpick-opt{padding:8px 12px;font-size:16px;line-height:1.2;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.sc-fontpick-opt:hover{background:var(--navy-tint)}
.sc-fontpick-opt.sel{background:var(--navy-tint);font-weight:700}
.sc-wgc-line input[type=color]{width:40px;height:28px;min-height:0;padding:2px;flex:none;cursor:pointer;border-radius:6px}
/* Δομικά στοιχεία καμβά: ετικέτα / πλαίσιο / σύνδεσμος / εξοπλισμός */
.sc-elmenu{display:flex;flex-direction:column;gap:8px}
.sc-elmenu .btn-plain{justify-content:flex-start;gap:8px;padding:10px 12px}
.sc-label{position:absolute;transform:translate(-50%,-50%) scale(var(--sc-scale,1));font-weight:600;white-space:pre-line;text-align:center;user-select:none;color:var(--ink);text-shadow:0 1px 2px color-mix(in srgb,var(--paper) 70%,transparent)}
.sc-outline{position:absolute;border:2px dashed var(--ink3);border-radius:8px;background:transparent;user-select:none}
.sc-outline-title{position:absolute;top:-10px;left:10px;padding:0 6px;font-size:11.5px;font-weight:700;color:var(--ink2);background:var(--paper)}
/* .sc-outline-h αφαιρέθηκε — το outline χρησιμοποιεί πλέον την ενιαία λαβή .sc-resize */
/* Επιλεγμένο στοιχείο του editor. outline (όχι border) ώστε να μην αλλάζει το κουτί — τα widgets
   είναι κεντραρισμένα στο (x,y) και ένα επιπλέον border θα τα μετακινούσε οπτικά.
   Το --navy είναι theme-aware (σκούρο σε φωτεινό θέμα, ανοιχτό σε σκούρο), άρα φαίνεται και στα δύο. */
.sc-widget.sel,.sc-label.sel,.sc-outline.sel{outline:2px solid var(--navy);outline-offset:3px;border-radius:8px}
.sc-alignbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sc-alignbar .btn-plain{padding:3px 9px;font-size:15px;line-height:1.1;min-width:32px;justify-content:center}
.sc-alignbar .sc-selcount{margin-left:6px;white-space:nowrap}
.sc-conn-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* Η ΜΠΡΟΣΤΙΝΗ ΣΤΡΩΣΗ ΣΩΛΗΝΩΝ (`.sc-conn-front`) ΔΕΝ ΕΧΕΙ ΔΙΚΟ ΤΗΣ ΚΑΝΟΝΑ, ΚΑΙ ΕΙΝΑΙ ΑΠΟΦΑΣΗ:
   μπαίνει στο DOM ΜΕΤΑ τα στοιχεία, οπότε η σειρά ζωγραφίσματος αρκεί από μόνη της. Ένα z-index
   εδώ θα ήταν χειρότερο, όχι καλύτερο — τα `.sc-widget` δεν έχουν δικό τους z-index, άρα η
   μπροστινή στρώση θα πήδαγε ΟΛΑ τα στοιχεία ανεξάρτητα από τη σειρά τους και θα ακύρωνε το
   «Εμπρός/Πίσω» της μπάρας. Την κλάση την κρατά μόνο ο εντοπισμός σε ελέγχους/DevTools. */
line.sc-conn{stroke-linecap:round}
/* ΣΩΛΗΝΕΣ. Η κίνηση ροής είναι διακεκομμένη γραμμή που «τρέχει» — ο κλασικός SCADA τρόπος να
   δείξεις ότι περνάει νερό. Το vector-effect κρατά το πάχος σταθερό σε px σε κάθε ζουμ. */
.sc-pipe{stroke-linecap:round;stroke-linejoin:round}
.sc-pipe.flow{stroke-dasharray:10 8;animation:sc-flow 1s linear infinite}
.sc-pipe.flow.rev{animation-direction:reverse}   /* η φορά κίνησης ακολουθεί την κατεύθυνση */
/* ΑΚΙΝΗΤΗ ΡΟΗ (μηδενική παροχή από ροόμετρο). Η κίνηση σταματά ΑΛΛΑ η διακεκομμένη μορφή μένει:
   ο σωλήνας πρέπει να διαβάζεται ως σωλήνας ροής που ΔΕΝ τρέχει, όχι ως συμπαγής σωλήνας. Το
   `animation:none` θα έσβηνε και το `stroke-dasharray` αν ήταν στο ίδιο shorthand — γι' αυτό
   σταματά με `play-state` και όχι με αφαίρεση της κίνησης. */
.sc-pipe.flow.stopped{animation-play-state:paused;opacity:.72}
/* Ένωση κλάδου με άλλον σωλήνα: συμπαγής τελεία. Το χρώμα και το μέγεθος μπαίνουν από το JS,
   ώστε να ακολουθούν το χρώμα και το πάχος του συγκεκριμένου σωλήνα. */
/* Βέλος κατεύθυνσης: CSS τρίγωνο, ώστε να μη ζορίζεται από το παραμορφωμένο viewBox του SVG */
/* Το μέγεθος έρχεται από το JS και είναι ΑΝΑΛΟΓΟ του πάχους του σωλήνα: σταθερό βέλος έχανε τον
   κύριο αγωγό και σκέπαζε τον κλάδο. Οι προεπιλογές είναι δίχτυ αν λείψει η μεταβλητή. */
/* ΛΑΒΗ ΣΥΡΣΙΜΑΤΟΣ ΒΕΛΟΥΣ (μόνο στην επεξεργασία). Το βέλος είναι CSS-τρίγωνο: `width:0;height:0`
   με περιγράμματα, δηλαδή ΜΗΔΕΝΙΚΗ επιφάνεια για το ποντίκι. Η λαβή μπαίνει ως `::before`, κύκλος
   22 px γύρω από το κέντρο, εντελώς αόρατος — ίδιο μοτίβο με την «χοντρή» αόρατη γραμμή του
   σωλήνα πιο κάτω. Το γονικό `.sc-conn-dots` είναι `pointer-events:none`, γι' αυτό ενεργοποιείται
   ΕΔΩ: παιδί που το ξαναδηλώνει δέχεται κανονικά συμβάντα. */
.sc-pipe-arrow.sc-drag{pointer-events:auto;cursor:grab}
.sc-pipe-arrow.sc-drag:active{cursor:grabbing}
.sc-pipe-arrow.sc-drag::before{content:"";position:absolute;left:0;top:0;
  width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%}
.sc-pipe-arrow{position:absolute;width:0;height:0;pointer-events:none;z-index:6;
  border-top:var(--sc-ah,8px) solid transparent;border-bottom:var(--sc-ah,8px) solid transparent;
  border-left:var(--sc-al,14px) solid var(--ink2);
  filter:drop-shadow(0 0 1px var(--panel))}
@keyframes sc-flow{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){.sc-pipe.flow{animation:none}}
/* Η αόρατη «χοντρή» γραμμή που δέχεται το ποντίκι — το γονικό SVG είναι pointer-events:none,
   το ορίζουμε στο ΣΤΟΙΧΕΙΟ. Χωρίς αυτήν, σωλήνας 6px ήταν πρακτικά απίαστος. */
.sc-pipe-hit{pointer-events:stroke;cursor:grab}
.sc-pipe-halo{stroke:var(--navy);opacity:.28}                      /* φωτοστέφανο επιλεγμένου */
.sc-pipe-preview{opacity:.55;stroke-dasharray:8 6}                 /* ζωντανή γραμμή σχεδίασης */
/* Λαβές σημείων σωλήνα: μικρές, λευκές με το χρώμα του σωλήνα στο περίγραμμα */
.sc-pipe-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--panel);border:2px solid var(--ink2);cursor:grab;pointer-events:auto;touch-action:none;z-index:7}
.sc-pipe-dot:hover{transform:scale(1.25)}
/* Αγκυρωμένο άκρο: γεμάτο, χωρίς λαβή σύρσιμου — τη θέση την ορίζει το μηχάνημα */
/* Γεμάτο = αγκυρωμένο. Ο δείκτης είναι grab, ΟΧΙ not-allowed: το σύρσιμο πλέον αποδεσμεύει και
   ξανα-αγκυρώνει αλλού — το «not-allowed» έλεγε ψέματα και ο χρήστης νόμιζε ότι κόλλησε. */
.sc-pipe-dot.anchored{background:var(--navy);border-color:var(--panel);cursor:grab}
.sc-pipe-ghost{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--navy);opacity:.6;pointer-events:none;z-index:7}
.sc-pipe-ghost.snap{width:16px;height:16px;margin:-8px 0 0 -8px;opacity:.35;box-shadow:0 0 0 2px var(--navy)}
/* Στρώμα σχεδίασης: πιάνει ΟΛΑ τα events, ώστε το κλικ πάνω σε μηχάνημα να αγκυρώνει αντί να το επιλέγει */
.sc-draw-layer{position:absolute;inset:0;z-index:12;cursor:crosshair;touch-action:none}
.sc-drawhint{font-size:12px;font-weight:700;color:var(--red-text);white-space:nowrap}
.sc-conn-dots{position:absolute;inset:0;pointer-events:none}
/* z-index 9: ΠΑΝΩ από τις λαβές σημείων (.sc-pipe-dot, z-index 7). Χωρίς αυτό, ένα κουμπί
   ρυθμίσεων που πέφτει κοντά σε λαβή σκεπάζεται και το στοιχείο γίνεται αδιαγράφτο. */
.sc-conn-dot{position:absolute;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;border:2px solid var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;pointer-events:auto;z-index:9}
/* Το ⚙ του σωλήνα: ΛΕΥΚΟ κουμπί με χρωματιστό περίγραμμα και σύμβολο στο χρώμα του σωλήνα.
   Ως συμπαγής σκούρος κύκλος διαβαζόταν σαν κόμβος του σχεδίου, όχι σαν κουμπί, και βάραινε τη
   γραμμή. Το currentColor έρχεται από το inline color που βάζει το scDrawPipeDots. */
.sc-pipe-cfg{width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;background:var(--panel);
  border:1.5px solid currentColor;box-shadow:0 1px 3px rgba(0,0,0,.2);
  opacity:.9;transition:opacity .12s,transform .12s,box-shadow .12s}
.sc-pipe-cfg:hover{opacity:1;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 2px 6px rgba(0,0,0,.28)}
/* ΚΑΡΤΑ ΕΞΟΠΛΙΣΜΟΥ ΣΕ ΜΕΓΕΘΥΝΣΗ. Το padding, το πάχος του πλαισίου και η σκιά είναι ΑΠΟΣΤΑΣΕΙΣ —
   μεγεθύνονταν μαζί με το --sc-scale, οπότε μια δεξαμενή στο 7× είχε ~70px κενό γύρω της και
   πλαίσιο ~10px. Αντισταθμίζονται ώστε να μένουν σταθερά σε px.
   ΤΗ ΓΩΝΙΑ ΟΜΩΣ ΤΗΝ ΑΦΗΝΟΥΜΕ ΝΑ ΜΕΓΑΛΩΝΕΙ: αντισταθμισμένη έπεφτε στο 1px και η δεξαμενή έβγαινε
   η μόνη ΤΕΤΡΑΓΩΝΗ κάρτα της οθόνης. Η στρογγυλότητα είναι ΣΧΗΜΑ, όχι απόσταση — κρατιέται
   αναλογική, ακριβώς όπως το rx του ίδιου του συμβόλου.
   Ισχύει ΜΟΝΟ για τον εξοπλισμό: στα widgets τιμών το padding συνοδεύει κείμενο, μεγαλώνει μαζί. */
.sc-widget.sc-equip{padding:calc(4px / var(--sc-scale,1)) calc(5px / var(--sc-scale,1));
  border-width:calc(1.5px / var(--sc-scale,1));
  box-shadow:0 calc(2px / var(--sc-scale,1)) calc(10px / var(--sc-scale,1)) rgba(0,0,0,.16)}
/* ΤΟ `box-shadow` ΞΑΝΑΜΠΑΙΝΕΙ ΕΔΩ ΕΠΙΤΗΔΕΣ. Ο κανόνας `.sc-widget.transparent` πιο πάνω το
   μηδενίζει, αλλά ο `.sc-widget.sc-equip` από κάτω του το ΞΑΝΑΓΡΑΦΕΙ — ίδια ειδικότητα (0,2,0),
   κερδίζει ο τελευταίος. Αποτέλεσμα: εξοπλισμός δηλωμένος «Διαφανές» κρατούσε τη σκιά της
   κάρτας, δηλαδή ΕΝΑ ΣΤΡΟΓΓΥΛΕΜΕΝΟ ΦΑΝΤΑΣΜΑ πίσω από το σύμβολο — ορατό ακριβώς όταν το
   σύμβολο είναι εικόνα με διαφάνεια, που είναι και η μόνη περίπτωση που κάποιος ζητά διαφάνεια. */
.sc-widget.sc-equip.transparent{padding:calc(2px / var(--sc-scale,1)) calc(3px / var(--sc-scale,1));
  box-shadow:none}
/* ΦΩΤΟΣΤΕΦΑΝΟ ΣΤΟΝ ΤΙΤΛΟ ΧΩΡΙΣ ΠΛΑΙΣΙΟ. Με πλαίσιο, το κείμενο πατά σε `--panel` και διαβάζεται.
   Διαφανές σημαίνει ότι πατά σε ό,τι έχει από κάτω: εικόνα φόντου, νερό δεξαμενής, σκούρο θέμα —
   και το `--ink` γίνεται αόρατο στη μισή σκηνή. Ίδια απόφαση με τα πρότυπα SVG του έργου, που
   βάζουν `paint-order:stroke; stroke:#F7F9FC; stroke-width:4px` σε ΚΑΘΕ `<text>`.
   Ο τόνος βγαίνει από το `--panel`, άρα ακολουθεί το θέμα ΚΑΙ στο σκοτεινό. Τέσσερις σκιές αντί
   για `-webkit-text-stroke`: εκείνο ροκανίζει το εσωτερικό του γράμματος στα μικρά μεγέθη. */
/* 🔴 ΤΟ `position:absolute` ΕΔΩ ΔΕΝ ΕΙΝΑΙ ΑΙΣΘΗΤΙΚΗ — ΚΡΑΤΑ ΤΟΝ ΤΙΤΛΟ ΕΞΩ ΑΠΟ ΤΟ ΚΟΥΤΙ
   ΑΓΚΥΡΩΣΗΣ. Το `scHalfSize` διαβάζει `el.offsetWidth/offsetHeight` για να βρει την ΑΚΜΗ όπου
   δένει ο σωλήνας. Με τον τίτλο ΜΕΣΑ στη ροή, το κουτί παίρνει το πλάτος του ΚΕΙΜΕΝΟΥ: μετρημένο
   σε στιγμιότυπο του χρήστη, «Αντλία Τροφοδοσίας» (~120 px τίτλος, 47 px σύμβολο) άφηνε τον
   σωλήνα **42 px** μακριά, και «Φίλτρο» (~44 px τίτλος) **14 px** — δηλαδή κενό ΑΝΑΛΟΓΟ του
   μήκους του τίτλου. Εκτός ροής, το κουτί ξαναγίνεται το σύμβολο και τα άκρα ακουμπούν.
   Δεύτερο κέρδος: το σύμβολο δεν κατεβαίνει πια κατά το ύψος του τίτλου, άρα οι ΥΠΑΡΧΟΥΣΕΣ
   διαφανείς οθόνες μένουν εικονοστοιχείο-προς-εικονοστοιχείο όπως ήταν πριν τη §8.74.
   Ο θετικός πρόγονος υπάρχει: το `.sc-widget.abs` είναι `position:absolute` (μάθημα 66 — εκεί το
   `absolute` ΧΩΡΙΣ πρόγονο κρέμασε το × στον διάλογο· εδώ ελέγχθηκε ρητά).
   ΜΟΝΟ στο διαφανές: με πλαίσιο ο τίτλος είναι γραμμή του πάνελ και ΠΡΕΠΕΙ να πιάνει χώρο. */
.sc-widget.sc-equip.transparent > .sc-wg-title{
  position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  margin:0 0 3px;pointer-events:none;
  text-shadow:0 1px 0 var(--panel), 0 -1px 0 var(--panel), 1px 0 0 var(--panel), -1px 0 0 var(--panel)}
.sc-equip-body{display:flex;flex-direction:column;align-items:center;gap:3px}
/* Στρέφεται ΜΟΝΟ το σύμβολο — τα κείμενα των τιμών μένουν όρθια, αλλιώς ένα βέλος «κάτω» θα
   γύριζε ανάποδα και τη μέτρηση. */
.sc-equip-svg{width:44px;height:44px;display:block;transform:rotate(var(--sc-rot,0deg))}
/* ΤΕΝΤΩΜΕΝΟ ΣΥΜΒΟΛΟ. Το viewBox 44×44 μεγεθύνεται ανομοιόμορφα, οπότε παχαίνει μαζί και η γραμμή:
   μετρημένο 2 → 8 px σε δεξαμενή 176×132, δηλαδή παχύ μπλε μπλοκ αντί για περίγραμμα διαγράμματος.
   Το non-scaling-stroke ακυρώνει ΜΟΝΟ την κλιμάκωση του viewBox — η ομοιόμορφη μεγέθυνση
   (--sc-scale, CSS transform του γονέα) εξακολουθεί να παχαίνει τη γραμμή, όπως πρέπει. */
.sc-equip-svg.stretched *{vector-effect:non-scaling-stroke}
/* ΠΟΛΥ ΛΕΠΤΟ ΣΥΜΒΟΛΟ: κρύβονται τα εσωτερικά στοιχεία (πλωτή πλάκα, ανάκλαση). Με γραμμή 2 px σε
   κάθε πλευρά, μια λεπτομέρεια 4 px είναι δύο γραμμές που ακουμπούν — συμπαγές μπλε, όχι σχέδιο. */
.sc-equip-svg.thin .sc-detail{display:none}
.sc-equip-val{font-size:calc(13px * var(--sc-fs,1));font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-equip-val.extra{font-size:calc(11.5px * var(--sc-fs,1));font-weight:600}   /* 2η+ τιμή: διακριτικά */
.sc-equip-lab{font-weight:600;opacity:.75}
/* Κουτί σταθερού ύψους: το περιεχόμενο κεντράρεται αντί να κρέμεται στην κορυφή */
.sc-widget.fixed-h{display:flex;flex-direction:column;justify-content:center}
/* ΚΑΤΑΛΟΓΟΣ ΣΧΗΜΑΤΩΝ — δικό μας πάνελ αντί για <select>, ώστε να ανοίγει ΠΑΝΤΑ προς τα κάτω
   (ο browser άνοιγε το native select προς τα πάνω και σκέπαζε τον διάλογο) και να φαίνονται τα σύμβολα. */
/* Γραμμή ρυθμίσεων «Εμφάνιση»: τα ΠΕΔΙΑ στοιχίζονται στη ΒΑΣΗ τους, όχι στην κορυφή της στήλης.
   Με απλό flex (stretch) μια ετικέτα που σπάει σε δύο γραμμές έσπρωχνε το πεδίο της χαμηλότερα και
   η σειρά έβγαινε σκαλωτή. Με flex-end η ευθεία κρατά όσο μακριά κι αν είναι η ετικέτα. */
.sc-appr-row{display:flex;gap:10px;align-items:flex-end}
/* ΠΛΕΓΜΑ ΘΕΣΕΩΝ ΦΥΤΕΥΣΗΣ (λεκάνη DWC): μικρά κουμπιά-τρύπες που ανάβουν όταν η θέση είναι
   φυτεμένη. Σταθερό 22px ανά κελί — με 12×12 θέσεις το πλέγμα μένει 264px, μέσα στον διάλογο. */
/* Προεπισκόπηση συμβόλου με ΔΙΑΦΑΝΕΙΑ: καρό φόντο, αλλιώς πάνω σε λευκό ο χρήστης δεν βλέπει
   καθόλου αν αφαιρέθηκε το φόντο ή όχι. */
.sc-sym-prev.cut{background-image:linear-gradient(45deg,#E4E8F0 25%,transparent 25%,transparent 75%,#E4E8F0 75%),
  linear-gradient(45deg,#E4E8F0 25%,transparent 25%,transparent 75%,#E4E8F0 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;background-color:var(--panel)}
/* ΟΜΑΔΙΚΗ ΑΛΛΑΓΗ ΙΔΙΟΤΗΤΩΝ. Κάθε γραμμή είναι «διακόπτης + πεδίο + σημείωση» σε ΜΙΑ σειρά:
   με 15 δυνατές ιδιότητες, μια στήλη ανά γραμμή θα έκανε τον διάλογο δύο οθόνες ψηλό. Η
   σημείωση («4/6 · διαφέρουν») στοιχίζεται δεξιά και συρρικνώνεται πρώτη. */
/* ══ ΛΕΙΤΟΥΡΓΙΑ ΠΑΡΟΥΣΙΑΣΗΣ (Λ18) ══
   Σε πλήρη οθόνη φεύγουν ΟΛΑ τα εργαλεία και μένει ο καμβάς: η οθόνη τοίχου δεν έχει ποντίκι,
   άρα κάθε κουμπί εκεί είναι σκέτος θόρυβος. Ο επιλογέας οθόνης μένει, γιατί είναι ΠΛΗΡΟΦΟΡΙΑ
   (ποια οθόνη βλέπεις) και σε αυτόματη εναλλαγή αλλάζει μόνος του.
   `:fullscreen` ΚΑΙ κλάση: το ψευδο-στοιχείο δεν υπάρχει σε παλιούς φυλλομετρητές, και η κλάση
   μπαίνει από το `fullscreenchange` — δύο δρόμοι για το ίδιο, ώστε να μη μείνει η οθόνη με
   κρυμμένα εργαλεία αν αποτύχει ο ένας. */
.sc-holder:fullscreen,.sc-holder.presenting{background:var(--paper);padding:0}
.sc-holder:fullscreen .toolbar,.sc-holder.presenting .toolbar{display:none}
.sc-holder:fullscreen .sc-hintrow,.sc-holder.presenting .sc-hintrow{display:none}
.sc-holder:fullscreen .sc-canvas,.sc-holder.presenting .sc-canvas{
  height:100vh;min-height:100vh;border:0;border-radius:0}
/* ΗΜΕΡΕΣ ΩΣ ΤΗ ΣΥΓΚΟΜΙΔΗ. Πιο διακριτικό από την τιμή αισθητήρα — είναι πρόγραμμα, όχι μέτρηση
   — αλλά η ΛΗΞΗ (σήμερα ή πέρασε) παίρνει το χρώμα προειδοποίησης, γιατί τότε θέλει ενέργεια. */
.sc-harvest{font-size:calc(11px * var(--sc-fs,1));font-weight:600;color:var(--ink3)}
.sc-harvest.due{color:var(--amber-text)}
/* Η γραμμή ΕΡΓΑΛΕΙΩΝ: παίρνει όλο το πλάτος, ώστε τα κουμπιά στοίχισης να μη τυλίγουν όσο
   υπάρχει χώρος. Τυλίγει ΜΟΝΟ όταν όντως δεν χωρούν. */
.sc-toolrow{margin-top:6px;flex-wrap:wrap;row-gap:6px}
/* Άδεια γραμμή εργαλείων (καμία επιλογή) δεν πρέπει να αφήνει κενό: το `margin-top` μένει ακόμη
   κι όταν τα παιδιά είναι κρυμμένα, γι' αυτό μηδενίζεται όταν η μπάρα στοίχισης λείπει. */
.sc-toolrow:has(> .hidden:only-child){margin-top:0}
/* ΚΛΕΙΔΩΜΕΝΟ ΣΤΟΙΧΕΙΟ. Διακεκομμένο περίγραμμα ΜΟΝΟ όταν είναι επιλεγμένο: μόνιμο σημάδι σε
   κάθε κλειδωμένο πλαίσιο θα γέμιζε την οθόνη διακεκομμένες γραμμές — και τα κλειδωμένα είναι
   συνήθως τα υπόβαθρα, δηλαδή τα μεγαλύτερα. Ο κέρσορας το λέει ούτως ή άλλως στο hover. */
.sc-widget.locked.sel{outline-style:dashed!important}
.sc-widget.locked.sel::after{content:"🔒";position:absolute;top:-9px;right:-9px;font-size:11px;
  line-height:1;pointer-events:none}
.sc-lockbtn{font-size:13px}
.sc-bulk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-bulk-row>.check-row{flex:0 0 178px;margin:0}
.sc-bulk-row>.meta{flex:1 1 auto;text-align:right;min-width:0}
.sc-bulk-row input[type=number]{width:82px}
.sc-bulk-row input[type=text]{width:150px}
/* Ζεύγος πεδίων (γραμμές×στήλες, πλάτος×ύψος) — δύο κουτιά με «×» ανάμεσα, όχι δύο γραμμές. */
.sc-bulk-pair{display:inline-flex;align-items:center;gap:6px}
.sc-bulk-pair::before{content:""}
.sc-dwc-grid{display:grid;gap:4px;margin-top:8px;justify-content:start}
.sc-dwc-cell{width:22px;height:22px;padding:0;border-radius:5px;border:1.5px solid var(--line);
  background:var(--paper);cursor:pointer;transition:background .1s,border-color .1s}
.sc-dwc-cell:hover{border-color:var(--ink3)}
.sc-dwc-cell.on{background:#4C9A2A;border-color:#2E6318}
/* ΠΡΟΒΛΗΜΑΤΙΚΗ ΘΕΣΗ: χρώμα ΚΑΙ σχήμα (διαγώνιος), γιατί το χρώμα μόνο δεν διαβάζεται από
   όποιον δεν ξεχωρίζει κόκκινο από πράσινο — και το πλέγμα είναι 22 px κελιά. */
.sc-dwc-cell.bad{background:var(--red);border-color:var(--red-text);
  background-image:linear-gradient(45deg,transparent 44%,var(--panel) 44%,var(--panel) 56%,transparent 56%)}
/* Το υπόμνημα δείχνει τα ΙΔΙΑ κελιά σε μικρογραφία — `i`, όχι κουμπιά: δεν πατιούνται. */
.sc-cell-key{display:inline-flex;align-items:center;gap:4px;margin-left:6px}
.sc-cell-key .sc-dwc-cell{width:13px;height:13px;border-radius:3px;pointer-events:none}
.btn-sm{padding:3px 10px;font-size:12px}
.sc-appr-row>div{min-width:0}
.sc-appr-row .meta{display:block;margin-bottom:3px}
.sc-appr-row input{width:100%}
.sc-shape-pick{position:relative}
.sc-shape-btn{display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;text-align:left}
.sc-shape-btn:hover{border-color:var(--navy)}
.sc-shape-prev{display:flex;flex:0 0 auto}
.sc-shape-prev .sc-equip-svg{width:28px;height:28px;transform:none}
.sc-shape-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-shape-caret{color:var(--ink3);flex:0 0 auto}
.sc-shape-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:300px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px}
.sc-shape-search{width:100%;margin-bottom:6px}
.sc-shape-grp{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);margin:8px 2px 4px}
.sc-shape-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:4px}
.sc-shape-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:8px;color:var(--ink);font:inherit}
.sc-shape-item span{font-size:10.5px;line-height:1.15;text-align:center;color:var(--ink2)}
.sc-shape-item .sc-equip-svg{transform:none}
.sc-shape-item:hover{background:var(--navy-tint);border-color:var(--line)}
.sc-shape-item.sel{background:var(--navy-tint);border-color:var(--navy)}
.sc-shape-item.sel span{color:var(--ink);font-weight:700}
/* Εικόνες βιβλιοθήκης: object-fit ώστε μια ορθογώνια φωτογραφία να μη ζορίζεται σε τετράγωνο */
.sc-equip-img{object-fit:contain;display:block}
.sc-shape-item{position:relative}
.sc-shape-del{position:absolute;top:1px;right:3px;width:16px;height:16px;line-height:14px;text-align:center;
  border-radius:50%;font-size:13px;font-weight:700;color:var(--ink3);background:var(--panel);opacity:0;transition:opacity .12s}
.sc-shape-item:hover .sc-shape-del{opacity:1}
.sc-shape-del:hover{color:var(--red-text);background:var(--zone-crit)}
/* ΣΤΗ ΒΙΒΛΙΟΘΗΚΗ ΟΜΑΔΩΝ ΤΟ × ΕΙΝΑΙ ΚΕΛΙ ΤΟΥ ΠΛΕΓΜΑΤΟΣ, ΟΧΙ ΕΠΙΚΑΛΥΨΗ. Το `.sc-shape-del`
   γεννήθηκε για το πλακίδιο σχήματος: `position:absolute` μέσα σε `.sc-shape-item`
   (position:relative) και `opacity:0` που ανοίγει στο `:hover` ΕΚΕΙΝΟΥ. Η γραμμή της
   βιβλιοθήκης είναι `.sc-eltree-r` — ΔΕΝ είναι `.sc-shape-item`, οπότε το × έμενε ΜΟΝΙΜΑ
   αόρατο και τοποθετημένο ως προς τον διάλογο: η διαγραφή ομάδας ήταν απρόσιτη (αναφορά
   χρήστη 31/08, με στιγμιότυπο). Η γραμμή έχει ήδη τρίτη στήλη «auto» — εκεί ανήκει. */
.sc-eltree-r .sc-shape-del{position:static;opacity:1}
.sc-shape-up{width:100%;justify-content:center}
.sc-sym-prev{width:90px;height:90px;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:4px}
.sc-switch-body{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.72}
.sc-geo{background-image:none}
.sc-geo .leaflet-control-attribution{font-size:10px;background:color-mix(in srgb,var(--paper) 82%,transparent)}
/* Μόνιμες ετικέτες τιμών πάνω στον δορυφορικό χάρτη */
.leaflet-tooltip.sc-geo-lbl{background:rgba(11,18,32,.86);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:3px 7px;box-shadow:0 2px 8px rgba(0,0,0,.45);font-size:11px;line-height:1.3;white-space:nowrap;text-align:center}
.leaflet-tooltip.sc-geo-lbl::before{display:none}
.sc-geo-lbl .gl-name{font-weight:700}
.sc-geo-lbl .gl-val{font-family:var(--mono);opacity:.95}
.sc-geo-lbl .gl-val.oob{color:#ff8f8f;font-weight:700;opacity:1}
/* Κάρτα ανά θέση (λίστα αισθητήρων + τιμές) */
.sc-geo-lbl .gc{text-align:left;min-width:150px}
.sc-geo-lbl .gc-h{font-weight:700;font-size:11px;padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.22)}
.sc-geo-lbl .gc-row{display:flex;align-items:center;gap:5px;font-size:10.5px;line-height:1.55;cursor:pointer}
.sc-geo-lbl .gc-row:hover{opacity:.75}
.sc-geo-lbl .gc-dot{width:7px;height:7px;border-radius:50%;flex:none}
.sc-geo-lbl .gc-n{flex:1;white-space:nowrap;padding-right:6px}
.sc-geo-lbl .gc-v{font-family:var(--mono);font-weight:600;white-space:nowrap}
/* Χάρτης: μία κάρτα ανά αισθητήρα (callouts με leader lines) */
.sc-geo-cards{position:absolute;inset:0;pointer-events:none;z-index:640}
.sc-geo-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sc-lead{stroke:#9aa4b8;stroke-width:2;opacity:.9}
.sc-card{position:absolute;pointer-events:auto;cursor:pointer;max-width:108px;box-sizing:border-box;padding:2px;background:rgba(11,18,32,.85);border:1px solid rgba(255,255,255,.22);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.45);font-size:10px;color:#fff}   /* A7 */
.sc-card.oob{border-color:#ff8f8f}
.sc-card .sc-chead{display:flex;align-items:center;gap:5px;font-weight:700;font-size:10.5px;margin-bottom:4px;white-space:nowrap}
.sc-card .sc-cdot{width:8px;height:8px;border-radius:50%;flex:none}
.sc-card .sc-cn{overflow:hidden;text-overflow:ellipsis;max-width:210px}
/* ένα κουτάκι ανά μέτρηση */
.sc-chips{display:flex;flex-direction:column;gap:1px}
.sc-chip{display:flex;align-items:baseline;justify-content:space-between;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:2px;padding:0 3px;line-height:1.3;white-space:nowrap}
.sc-chip.oob{background:rgba(216,0,1,.30);border-color:#ff8f8f}
.sc-chl{font-size:9.5px;opacity:.75;white-space:nowrap}   /* A7 */
.sc-chv{font-family:var(--mono);font-weight:700;font-size:11px;white-space:nowrap}
.sc-chip.oob .sc-chv{color:#ffb3b3}
.sc-geo-count{position:absolute;left:10px;bottom:10px;pointer-events:none;background:rgba(11,18,32,.85);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700}
.sc-mrow{padding:9px 0;border-bottom:1px solid var(--line)}
.sc-mrow:last-child{border-bottom:none}
.sc-mtop{display:flex;align-items:center;gap:9px}
.sc-mtop .sp{flex:1}
.sc-hrow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line2,var(--line))}
.sc-hrow:last-child{border-bottom:none}

/* ============ Προσομοιωτής ============ */
.sim-last{font-size:12px;color:var(--ink2);margin-top:8px;line-height:1.8}

/* dashboard fetch-failure banner + persistent profile icon */
.dash-error{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--crit-line);background:var(--crit-bg);color:var(--red-text);padding:11px 15px;border-radius:var(--r-sm);margin-bottom:14px;font-size:13.5px}
.dash-error .link-btn{margin-left:auto;color:var(--red-text)}
.nav-farm .ic-s{flex:none;color:var(--navy)}

/* print: hide chrome */
@media print{
  nav.rail-nav,.view-head,.toolbar,#toast-zone{display:none!important}
  main.content{margin:0}

  /* ── ΕΚΤΥΠΩΣΗ ΟΘΟΝΗΣ (Λ17) ───────────────────────────────────────────────
     ΚΑΜΙΑ ΡΑΣΤΕΡΟΠΟΙΗΣΗ: το `beforeprint` ταιριάζει τη σκηνή στο παράθυρο (scResetView) και ο
     φυλλομετρητής τυπώνει το ΙΔΙΟ διάνυσμα — καθαρότερο από κάθε PNG και χωρίς βιβλιοθήκη.
     «Αποθήκευση ως PDF» μέσα από τον διάλογο δίνει το αρχείο του φακέλου. */
  .sc-hintrow,.sc-zoom,.sc-guide-v,.sc-guide-h,.sc-marquee,
  .sc-resize{display:none!important}
  .sc-canvas{border:0!important;background:none!important;break-inside:avoid}
  /* ΤΑ ΧΡΩΜΑΤΑ ΕΙΝΑΙ Η ΠΛΗΡΟΦΟΡΙΑ — ζώνες, υγρό, φυτά. Χωρίς αυτό ο φυλλομετρητής
     πετά ΟΛΑ τα φόντα (προεπιλογή «χωρίς γραφικά φόντου») και το διάγραμμα βγαίνει
     άσπρα κουτιά με μαύρα γράμματα — δηλαδή χάνεται ακριβώς ό,τι πάει να δείξει. */
  .sc-canvas,.sc-canvas *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Η ΕΠΙΛΟΓΗ ΔΕΝ ΤΥΠΩΝΕΤΑΙ: είναι κατάσταση του επεξεργαστή, όχι του διαγράμματος. */
  .sc-widget.sel,.sc-label.sel,.sc-outline.sel{outline:0!important}
  /* ΤΟ ΠΛΕΓΜΑ ΕΙΝΑΙ ΕΡΓΑΛΕΙΟ ΣΧΕΔΙΑΣΗΣ, όχι περιεχόμενο: στο χαρτί είναι θόρυβος
     και τρώει μελάνι σε ολόκληρη σελίδα. */
  .sc-stage:not(.has-bg){background-image:none!important}
  /* Η κίνηση ροής στο χαρτί παγώνει σε τυχαίο καρέ — καλύτερα συνεχής γραμμή. */
  .sc-pipe.flow{animation:none!important;stroke-dasharray:none!important}
  @page{size:landscape;margin:10mm}
}

/* ── Καρτέλα αισθητήρα: όλες οι παράμετροι σε ΕΝΑ viewport, σε δύο σειρές ──────────────────
   Κολόνες/σειρές/ύψος μπαίνουν από JS (sensCardFit): εξαρτώνται από το πλήθος παραμέτρων του
   αισθητήρα και από το πού τελειώνει η μπάρα εργαλείων. Τα πλακίδια μοιράζονται ό,τι μείνει,
   οπότε δεν υπάρχει ποτέ scroll.
   Η ζώνη φαίνεται από το φόντο, το χρώμα της τιμής και την κατάσταση — καμία ταινία/κουκκίδα:
   τρία σήματα για το ίδιο πράγμα έκαναν το πλέγμα να φωνάζει. */
/* ΧΩΡΙΣ overflow:hidden στο πλέγμα: το hover ανεβάζει το πλακίδιο 1px, οπότε στην πάνω σειρά
   κοβόταν ολόκληρο το περίγραμμα (και η σκιά σε όλες τις άκρες). Δεν χρειάζεται κόψιμο εδώ — το
   ύψος ορίζεται από JS με γραμμές minmax(0,1fr) και κάθε πλακίδιο κόβει μόνο του το περιεχόμενό του. */
.sens-grid{display:grid;gap:12px}

/* ── ΕΝΑ πλακίδιο μέτρησης (.ms-*) — ίδιο σε Κέντρο Ανάλυσης και Μέτρηση Πεδίου ──────────────
   Πριν υπήρχαν δύο διαφορετικά (.sens-tile στην καρτέλα Αισθητήρα, .pin-tile στην Επισκόπηση) και
   τα ίδια δεδομένα φαίνονταν αλλιώς σε κάθε οθόνη.
   Δομή: .ms-cell = το κουτάκι (.ms-tile) + η οδηγία από ΚΑΤΩ (.ms-instr, μόνο σε παραβίαση).
   Το γραφικό γεμίζει το κουτί ως ΞΕΘΩΡΙΑΣΜΕΝΟ υπόβαθρο, ώστε ο αριθμός να διαβάζεται.
   ΠΡΟΣΟΧΗ: η διάταξη «τιμή στο κέντρο με μεγάλη γραμματοσειρά» ισχύει ΜΟΝΟ στην εφαρμογή — εδώ η
   τιμή μένει εκεί που ήταν. */
/* ΤΟ ΜΕΓΕΘΟΣ (Ρυθμίσεις → data-ovsize) ΙΣΧΥΕΙ ΚΑΙ ΣΤΙΣ ΔΥΟ ΠΡΟΒΟΛΕΣ — ζητήθηκε ρητά: αν ο χρήστης
   διάλεξε «μεσαίο», μεσαία είναι ΚΑΙ τα πλακίδια των «Αριθμών», όχι μόνο των «Γραφικών».
   Τα «Γραφικά» μένουν ένα σκαλί πλατύτερα σε κάθε μέγεθος: το γραφικό θέλει χώρο που ο σκέτος
   αριθμός δεν χρειάζεται. Ο αριθμός μεγαλώνει μόνος του — το .ms-val μετριέται σε cqw, δηλαδή στο
   πλάτος ΤΟΥ ΠΛΑΚΙΔΙΟΥ. «md» = προεπιλογή. */
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
:root[data-ovsize="sm"] .ms-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
:root[data-ovsize="lg"] .ms-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.ms-grid.graphic{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
:root[data-ovsize="sm"] .ms-grid.graphic{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
:root[data-ovsize="lg"] .ms-grid.graphic{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
/* container-type: η σύμπτυξη της κατάστασης σε σκέτο «HH» κρίνεται από το πλάτος ΤΟΥ ΠΛΑΚΙΔΙΟΥ,
   όχι της οθόνης — σε πλατιά οθόνη με πολλές κολόνες τα πλακίδια είναι εξίσου στενά. */
.ms-cell{display:flex;flex-direction:column;min-width:0;min-height:0;container-type:inline-size}
/* Με την οδηγία ΠΑΝΩ από το κουτάκι, το κελί με συναγερμό είναι ψηλότερο από τα υπόλοιπα της
   σειράς. Στοιχίζουμε τα πλακίδια στο ΚΑΤΩ μέρος ώστε οι βάσεις τους να είναι πάντα σε μία ευθεία
   και η οδηγία να «κρέμεται» από πάνω — αλλιώς μια σειρά έμοιαζε ξεχαρβαλωμένη. */
.ms-grid .ms-cell{justify-content:flex-end}
.ms-tile{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:12px 14px 10px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color 160ms var(--ease-out),transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
/* ΤΕΤΡΑΓΩΝΑ, και στις δύο προβολές. Στην καρτέλα αισθητήρα το ύψος το δίνει το JS.
   flex:0 0 auto ΜΑΖΙ με το aspect-ratio: αλλιώς το πλακίδιο με οδηγία ΜΙΚΡΑΙΝΕ — ήταν flex:1 1 auto
   μέσα σε κελί σταθερού ύψους, οπότε η οδηγία έτρωγε το ύψος ΤΟΥ ΠΛΑΚΙΔΙΟΥ αντί να μεγαλώσει το
   κελί. Ακριβώς το πλακίδιο με τον συναγερμό έβγαινε μικρότερο από όλα τα άλλα. */
.ms-grid .ms-tile{aspect-ratio:1/1;flex:0 0 auto}
.ms-tile:hover{border-color:var(--navy);transform:translateY(-1px);box-shadow:0 4px 14px rgba(8,39,104,.10)}
.ms-tile:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* ΙΔΙΑ ΧΡΩΜΑΤΑ ΚΑΙ ΣΤΙΣ ΔΥΟ ΠΡΟΒΟΛΕΣ — πλακίδιο-φανάρι: ΓΕΜΑΤΟ χρώμα ζώνης και λευκά γράμματα,
   όπως η Μέτρηση Πεδίου της εφαρμογής. Η ζώνη διαβάζεται από απόσταση, χωρίς ανάγνωση αριθμού.
   (Παλαιότερα τα «Γραφικά» είχαν απαλό φόντο· ο χρήστης ζήτησε ρητά να είναι ίδια με τα «Αριθμοί».) */
.ms-tile.ok{background:var(--ok-fill);border-color:transparent}
.ms-tile.warn{background:var(--amber-fill);border-color:transparent}
.ms-tile.crit{background:var(--red-fill);border-color:transparent}
.ms-tile.warn.low{background:var(--blue-fill)}
.ms-tile.crit.low{background:var(--blue-deep-fill)}
.ms-tile:is(.ok,.warn,.crit) :is(.ms-name,.ms-sub,.ms-val,.ms-status){color:#fff}
.ms-tile:is(.ok,.warn,.crit) .ms-unit{color:rgba(255,255,255,.85)}
/* Το γραφικό έχει ΔΙΚΟ ΤΟΥ χώρο στη ροή, χωρίς πλαίσιο και χωρίς φόντο: κάθεται απευθείας πάνω στο
   χρώμα του πλακιδίου. Δεν δέχεται ποντίκι — το κλικ ανήκει στο πλακίδιο (οδηγεί στα Διαγράμματα). */
/* padding: ο χώρος που χρειάζονται οι ετικέτες των άκρων όταν βγαίνουν λίγο εκτός viewBox
   (δες overflow:visible παρακάτω). overflow:visible και εδώ, αλλιώς το .ms-gfx θα τις έκοβε. */
.ms-gfx{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;overflow:visible;margin:8px 0 6px;padding:0 10px}
.ms-gfx>*{max-width:100%;max-height:100%}
/* ΠΑΝΩ ΣΕ ΓΕΜΑΤΟ ΧΡΩΜΑ ΖΩΝΗΣ: λευκός ΜΟΝΟ ο δείκτης — η κλίμακα και οι ετικέτες ορίων μένουν.
   Τα scDial/scThermo/bar παίρνουν το λευκό ως όρισμα από το ovGraphic· η ράγα βάφεται από εδώ. */
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .rail-caret{border-top-color:#fff!important}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .rail-whisker{background:#fff;opacity:.75}
/* Η κλίμακα χρειάζεται λίγη διαφάνεια για να μη «λερώνει» το χρώμα, και οι ετικέτες αντίθεση. */
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .rail-track{background:rgba(255,255,255,.28)}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .rail-tick{background:rgba(255,255,255,.55)}
/* Η ΥΓΙΗΣ ΖΩΝΗ ΣΤΑΜΑΤΑ ΝΑ ΕΙΝΑΙ ΓΚΡΙ-ΜΠΛΕ ΠΑΝΩ ΣΕ ΓΕΜΙΣΜΑ (απόφαση 21/08/2026).
   Μετρημένο πριν: η navy-μείξη έβγαινε **1,05:1** πάνω στο πράσινο #00A63F — ίδια φωτεινότητα, άλλη
   απόχρωση, δηλαδή πρακτικά αόρατο σχήμα και «ξένο» χρώμα μέσα στο όργανο.
   ΤΡΕΙΣ ΕΠΙΛΟΓΕΙΣ, ΕΝΑΣ ΑΝΑ ΤΥΠΟ ΣΤΟΙΧΕΙΟΥ, ΚΑΙ Η ΔΙΑΚΡΙΣΗ ΕΙΝΑΙ ΚΡΙΣΙΜΗ: το τόξο του καντράν
   είναι `path` με `fill="none"` και χρώμα στο `stroke` — αν του δοθεί `fill`, **το τόξο γεμίζει και
   γίνεται δίσκος**. Το θερμόμετρο είναι `rect` με `fill`, η ράγα `div` με `background`. */
.ms-tile:is(.ok,.warn,.crit) .ms-gfx rect.sc-band-ok{fill:var(--ok-band)}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx path.sc-band-ok{stroke:var(--ok-band)}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .rail-seg.zk{background:var(--ok-band)}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .rail-lab{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}   /* ίδιο halo με τα SVG: αντίθεση πάνω σε ανοιχτό γέμισμα */
/* ΚΑΝΤΡΑΝ — η «normal» ζώνη κρατά το κανονικό της χρώμα (SC_ZTINT.ok). Δοκιμάστηκε άσπρη και
   επανήλθε κατόπιν αιτήματος. Το class .sc-band-<ζώνη> μένει στο SVG για μελλοντική στόχευση. */
/* ΤΑ ΝΟΥΜΕΡΑ ΤΩΝ ΓΡΑΦΙΚΩΝ: ΣΤΑΘΕΡΑ PX ΟΘΟΝΗΣ, ΟΧΙ ΣΤΑΘΕΡΕΣ ΜΟΝΑΔΕΣ VIEWBOX.
   Η ρίζα του «πολύ μικρά / πολύ μεγάλα»: το font-size των SVG μετριέται σε μονάδες viewBox και
   το SVG τεντώνεται να γεμίσει πλακίδιο που κυμαίνεται από ~200 έως 400+ px — άρα ΚΑΘΕ σταθερός
   αριθμός εδώ είναι λάθος σε κάποιο μέγεθος (6 → 8,6 → 12 → 9,5 δοκιμάστηκαν και απέτυχαν όλα).
   Το JS (msGfxObs/MS_TICK_FS στο app.js) μετρά το πραγματικό κλιμάκωμα κάθε .ms-gfx και γράφει
   τις --ms-fs-dial/--ms-fs-thermo σε μονάδες viewBox ώστε το κείμενο να βγαίνει ΠΑΝΤΑ ~12px
   οθόνης, σε κάθε μέγεθος πλακιδίου. Τα fallbacks κρατούν τα παλιά νούμερα ως την πρώτη μέτρηση.
   Η ράγα είναι HTML — τα px της είναι ήδη px οθόνης και δεν χρειάζεται τίποτα από αυτά. */
/* Μέσα στο πλακίδιο κρύβονται οι ΕΝΔΙΑΜΕΣΕΣ τιμές κλίμακας (χωρίς .lim) και μένουν μόνο τα
   ΤΕΣΣΕΡΑ ΟΡΙΑ — 7 ετικέτες γύρω από τόξο 240° δεν χωρούν σε πλακίδιο 200px με αναγνώσιμο
   μέγεθος. Τα Διαγράμματα και τα SCADA κρατούν την πλήρη κλίμακα. */
.ms-gfx .sc-dial-tick:not(.lim),.ms-gfx .sc-dial-tickline:not(.lim){display:none}
/* Τα SVG ΚΟΒΟΥΝ ό,τι ξεπερνά το viewBox τους (καντράν 128×90, θερμόμετρο 48×104):
   overflow:visible ώστε οι ακριανές ετικέτες να μην κόβονται, και padding στο .ms-gfx ώστε ο
   επιπλέον χώρος να υπάρχει ΜΕΣΑ στο πλακίδιο (το .ms-tile έχει overflow:hidden και θα έκοβε
   ό,τι φτάνει ως την άκρη του). */
.ms-gfx .sc-dial,.ms-gfx .sc-thermo{overflow:visible}
.ms-gfx .sc-dial .sc-dial-tick{font-size:var(--ms-fs-dial,9.5px)}
.ms-gfx .sc-thermo .sc-dial-tick{font-size:var(--ms-fs-thermo,8px)}
.ms-gfx .rail-lab{font-size:15px}                    /* ήταν 11· HTML → px οθόνης, δεν κλιμακώνεται */
/* Λευκά πάνω σε γεμάτο χρώμα ζώνης + διακριτικό σκούρο halo (paint-order:stroke → το
   περίγραμμα πίσω από το γέμισμα): σκέτο λευκό χανόταν όταν η ετικέτα έπεφτε πάνω στο ανοιχτό
   τόξο ζώνης ή σε ανοιχτό γέμισμα πλακιδίου (π.χ. πράσινο ΟΚ). Πάχος ανάλογο του font ώστε το
   halo να κλιμακώνεται μαζί του. */
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .sc-dial-tick{fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.30);stroke-linejoin:round}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .sc-dial .sc-dial-tick{stroke-width:calc(var(--ms-fs-dial,9.5px)*.15)}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .sc-thermo .sc-dial-tick{stroke-width:calc(var(--ms-fs-thermo,8px)*.15)}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx line{stroke:rgba(255,255,255,.6)}
/* Το γραφικό έχει ΔΙΚΟ ΤΟΥ χώρο στη ροή (όχι υπόβαθρο πίσω από την τιμή): αλλιώς χάνει το ύψος
   του και οι εσωτερικές θέσεις της ράγας/του θερμομέτρου, που είναι σε απόλυτα pixel, στριμώχνονται. */
/* Το καντράν και το θερμόμετρο τεντώνονται στον διαθέσιμο χώρο· η ράγα κρατά το φυσικό της ύψος
   και κεντράρεται, γιατί οι εσωτερικές της θέσεις (track/ticks/ετικέτες) είναι σε απόλυτα pixel. */
.ms-gfx .sc-dial{width:100%;height:100%;max-width:none;margin:0}
.ms-gfx .sc-thermo{width:100%;height:100%;margin:0}
/* ΡΑΓΑ ΜΕΣΑ ΣΤΟ ΠΛΑΚΙΔΙΟ — ΜΕΓΑΛΩΜΕΝΗ. Η βασική .rail έχει ΣΤΑΘΕΡΟ ύψος 34px και όλες οι
   εσωτερικές της θέσεις είναι σε απόλυτα pixel, οπότε δεν τεντώνεται μόνη της: έμοιαζε χαμένη
   μέσα σε πλακίδιο 200-400px. Εδώ ξαναγράφονται όλες αναλογικά για ύψος 78px.
   Ο δείκτης πάει ΠΑΝΩ από το track και οι ετικέτες ΚΑΤΩ, ώστε να μη συγκρούονται μεταξύ τους —
   στο μικρό μέγεθος ο δείκτης έπεφτε πάνω στους αριθμούς («16♦4,8»). */
.ms-gfx .pin-rail-wrap{width:100%}
/* ΠΡΟΣΩΠΙΚΗ ΣΕΙΡΑ — ο χρήστης χτίζει διατεταγμένη λίστα τιμών από όποιους αισθητήρες θέλει
   (π.χ. «υγρασία 10cm / 20cm / 30cm» από τρεις διαφορετικούς), όπως τα πλαίσια ενός DSS. */
.ovpick{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:10px 12px;margin:0 0 12px;max-height:min(52vh,480px);overflow:auto}
.ovpick-head{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.ovpick-head .meta{flex:1 1 320px;max-width:64ch}
.ovpick-chosen{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.ovpick-empty{font-size:13px;color:var(--ink3);padding:8px 10px;border:1px dashed var(--line);border-radius:var(--r-sm)}
.ovpick-row{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);cursor:grab}
.ovpick-row.dragging{opacity:.45}
.ovpick-row.dragover{box-shadow:inset 0 2px 0 var(--navy)}
.ovpick-grip{color:var(--ink3);letter-spacing:-2px;line-height:1;flex:none}
.ovpick-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink3);
  min-width:1.6em;text-align:right;flex:none}
.ovpick-par{font-weight:600;color:var(--ink)}
.ovpick-sen{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovpick-x{background:none;border:0;color:var(--ink3);cursor:pointer;font-size:14px;padding:2px 4px;flex:none}
.ovpick-x:hover{color:var(--red-text)}
.ovpick-avail-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 6px;padding-top:8px;border-top:1px solid var(--line)}
.ovpick-grp{margin-bottom:8px}
.ovpick-grp-h{font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:3px}
.ovpick-add{font:inherit;font-size:12.5px;padding:3px 9px;margin:0 6px 5px 0;cursor:pointer;
  border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--navy)}
.ovpick-add:hover{background:var(--navy-tint);border-color:var(--navy)}
.ovpick-info{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--ink2)}
.ovpick-info svg{color:var(--navy);flex:none}
/* ΜΙΑ ΕΥΘΕΙΑ: όλες οι ετικέτες στην ίδια γραμμή (ζητήθηκε ρητά). Η μη-επικάλυψη εξασφαλίζεται
   από το railSolveRow, που σπρώχνει κάθε ετικέτα όσο χρειάζεται σε πραγματικά px. */
.ms-gfx .rail{width:100%;height:78px}
.ms-gfx .rail .rail-track{top:30px;height:18px;border-radius:99px}
.ms-gfx .rail .rail-tick{top:26px;height:26px;width:2px}
.ms-gfx .rail .rail-caret{top:6px;transform:translateX(-9px);
  border-left-width:9px;border-right-width:9px;border-top-width:18px}
.ms-gfx .rail .rail-whisker{top:37px;height:4px;border-radius:2px}
.ms-gfx .rail .rail-lab{top:56px;font-size:18px}
/* ΤΑ ΤΡΙΑ ΜΕΓΕΘΗ ΤΩΝ ΡΥΘΜΙΣΕΩΝ: δεν αρκεί να μεγαλώνει το πλακίδιο — τα ΣΤΟΙΧΕΙΑ μέσα στη ράγα
   είναι σε απόλυτα pixel και θα έμεναν ίδια, δηλαδή αναλογικά μικρότερα σε μεγάλο πλακίδιο. */
:root[data-ovsize="sm"] .ms-gfx .rail{height:62px}
:root[data-ovsize="sm"] .ms-gfx .rail .rail-track{top:24px;height:14px}
:root[data-ovsize="sm"] .ms-gfx .rail .rail-tick{top:21px;height:20px}
:root[data-ovsize="sm"] .ms-gfx .rail .rail-caret{top:5px;transform:translateX(-7px);
  border-left-width:7px;border-right-width:7px;border-top-width:14px}
:root[data-ovsize="sm"] .ms-gfx .rail .rail-whisker{top:29px;height:3px}
:root[data-ovsize="sm"] .ms-gfx .rail .rail-lab{top:44px;font-size:15px}
:root[data-ovsize="lg"] .ms-gfx .rail{height:100px}
:root[data-ovsize="lg"] .ms-gfx .rail .rail-track{top:38px;height:24px}
:root[data-ovsize="lg"] .ms-gfx .rail .rail-tick{top:33px;height:34px;width:3px}
:root[data-ovsize="lg"] .ms-gfx .rail .rail-caret{top:6px;transform:translateX(-12px);
  border-left-width:12px;border-right-width:12px;border-top-width:24px}
:root[data-ovsize="lg"] .ms-gfx .rail .rail-whisker{top:47px;height:5px}
:root[data-ovsize="lg"] .ms-gfx .rail .rail-lab{top:72px;font-size:23px}
/* Το ίδιο για τις ετικέτες των SVG (καντράν/θερμόμετρο): ο ResizeObserver τις κρατά σε σταθερά
   px οθόνης, οπότε στο «lg» θα έμοιαζαν μικρές. Ανεβάζουμε τον στόχο ανά μέγεθος. */
:root[data-ovsize="sm"] .ms-gfx{--ms-fs-target:11px}
:root[data-ovsize="lg"] .ms-gfx{--ms-fs-target:16px}
/* ΜΠΑΡΕΣ: εδώ το χρώμα ΔΕΝ είναι δείκτης πάνω σε κλίμακα — είναι το ίδιο το γέμισμα. Με το λευκό
   που δίνει το ovGraphic (για να φαίνεται η βελόνα του καντράν), το γέμισμα γινόταν λευκό πάνω σε
   σχεδόν διάφανο track και η μπάρα έμοιαζε άδεια λωρίδα. Το track παίρνει ημιδιαφανές ΜΑΥΡΟ ώστε
   το λευκό γέμισμα να διαβάζεται ως αναλογία, σε κάθε χρώμα ζώνης. */
/* ΤΟ ΠΑΧΟΣ ΤΗΣ ΜΠΑΡΑΣ ΑΚΟΛΟΥΘΕΙ ΤΟ ΜΗΚΟΣ ΤΗΣ (αναφορά χρήστη 21/08).
   ΤΟ ΠΡΟΒΛΗΜΑ: το πάχος ήταν καρφωμένο στα 20 px — ίδιο στο «Μικρό», στο «Μεσαίο» και στο
   «Μεγάλο». Δηλαδή η ρύθμιση μεγέθους ΔΕΝ άγγιζε καθόλου τη μπάρα: σε πλακίδιο 340 px το Άζωτο
   και ο Φώσφορος έβγαιναν μια γραμμούλα 20 px στη μέση ενός τετραγώνου ~250 px, ενώ το θερμόμετρο
   και το καντράν δίπλα τους γέμιζαν το κουτί τους. Τα πλακίδια της ίδιας οθόνης δεν έδειχναν
   ομοιόμορφα.
   Η ΛΥΣΗ ΕΙΝΑΙ ΛΟΓΟΣ, ΟΧΙ ΣΤΑΘΕΡΑ: `aspect-ratio` σημαίνει «πάχος = μήκος / 6» ακριβώς, χωρίς να
   χρειάζεται να μαντέψω padding ή μονάδες container — η μπάρα κρατά την ΙΔΙΑ αναλογία σε κάθε
   μέγεθος πλακιδίου, δηλαδή διαβάζεται πάντα ως μπάρα. Ο λόγος 6:1 είναι ΒΑΘΜΟΝΟΜΗΣΗ: πιο χοντρή
   (4:1) πάει προς «κουτί», πιο λεπτή (10:1) ξαναγυρίζει στη γραμμούλα.
   `min-height` = το παλιό 20: σε στενό πλακίδιο η αναλογία δίνει λιγότερο, και δεν υπάρχει λόγος
   να γίνει η μπάρα ΛΕΠΤΟΤΕΡΗ από ό,τι ήταν — το πρόβλημα ήταν το αντίθετο.
   Το `border-radius` γίνεται χάπι (999px) και όχι μισό-του-παλιού-ύψους: με μεταβλητό πάχος κάθε
   σταθερά θα ήταν λάθος στη μισή ζωή της. */
.ms-gfx .sc-wg-bar{width:100%;height:auto;aspect-ratio:6/1;min-height:20px;border-radius:999px}
/* Η ΚΑΤΑΚΟΡΥΦΗ ΔΕΝ ΠΕΙΡΑΧΤΗΚΕ: στα 30 px μέσα σε κουτί ~250 px είναι ήδη 8:1, δεν είναι η
   αναφερθείσα γραμμούλα — και στην ιστοσελίδα κανένα N/P/K δεν είναι `bar_v` (το Κάλιο είναι
   `bar` εδώ· η εφαρμογή αποκλίνει επίτηδες). */
.ms-gfx .sc-wg-bar.vert{width:30px;height:100%;border-radius:15px}
.ms-gfx .sc-wg-bar .sc-wg-fill{border-radius:999px}
.ms-tile:is(.ok,.warn,.crit) .ms-gfx .sc-wg-bar{background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ms-gfx .sc-led{font-size:34px}
.ms-gfx .sc-lamp,.ms-gfx .sc-pilot{width:52px;height:52px}
/* ΔΙΑΤΑΞΗ ΤΗΣ ΕΦΑΡΜΟΓΗΣ: παράμετρος πάνω αριστερά → τιμή στο ΚΕΝΤΡΟ (μεγάλη) → όρια κάτω δεξιά.
   Το κείμενο πάνω από το γραφικό-υπόβαθρο. */
.ms-name,.ms-sub,.ms-val,.ms-status{position:relative;z-index:1}
.ms-name{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;color:var(--ink3)}
.ms-sub{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;margin-top:1px;color:var(--ink2)}
/* margin:auto σε flex column → η τιμή κεντράρεται κατακόρυφα ΚΑΙ οριζόντια στον χώρο που περισσεύει,
   ό,τι ύψος κι αν έχουν όνομα/κατάσταση. Ταμπλόιντ ψηφία ώστε να μη χοροπηδά στη ζωντανή ανανέωση.
   Το μέγεθος κλιμακώνεται με το πλάτος ΤΟΥ ΠΛΑΚΙΔΙΟΥ (cqw), όχι της οθόνης — το τετράγωνο δεν αλλάζει. */
.ms-val{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:auto;flex:0 0 auto;
  font-family:var(--mono);font-size:clamp(46px,calc(15cqw + 12px),120px);font-weight:700;line-height:1;
  color:var(--ink);font-feature-settings:'tnum' 1;white-space:nowrap}
/* Στα «Γραφικά» η τιμή είναι λεζάντα ΚΑΤΩ από το γραφικό (όπως ήταν πάντα), όχι στο κέντρο: το
   κέντρο το κρατά το γραφικό. Χωρίς margin:auto, αλλιώς θα έσπρωχνε το γραφικό εκτός πλακιδίου. */
.ms-tile.gfx .ms-val{margin:0;font-size:clamp(17px,calc(2.4cqw + 10px),26px)}
.ms-unit{font-family:var(--sans);font-size:.34em;font-weight:500;color:var(--ink3);letter-spacing:0}
.ms-status{flex:0 0 auto;align-self:flex-end;text-align:right;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ms-status .ms-code{font-family:var(--mono);letter-spacing:.04em}
.ms-status.ok{color:var(--ok-text)}
.ms-status.warn{color:var(--amber-strong)}
.ms-status.crit{color:var(--red-text)}
.ms-status.warn.low{color:var(--blue-text)}
.ms-status.crit.low{color:var(--blue-deep-text)}
.ms-status.nodata{color:var(--ink3)}
/* ΜΕΤΑ τα παραπάνω επίτηδες: το «λευκά γράμματα σε γεμάτο πλακίδιο» (πιο πάνω) έχει ΙΔΙΑ
   ειδικότητα με το .ms-status.crit.low και έχανε στη σειρά — η κατάσταση ζωγραφιζόταν σκούρα
   μπλε πάνω σε σκούρο μπλε γέμισμα, δηλαδή αόρατη. */
.ms-tile:is(.ok,.warn,.crit) .ms-status:is(.ok,.warn,.crit,.nodata){color:#fff}
/* Στενό πλακίδιο → μένει ο κωδικός («HH»), φεύγει η λέξη. */
@container (max-width:200px){.ms-status .ms-word{display:none}}
/* ΟΔΗΓΙΑ ΣΕ ΣΥΝΑΓΕΡΜΟ — ΠΑΝΩ από το κουτάκι (ζητήθηκε ρητά) και ΚΟΚΚΙΝΗ, να τραβά το μάτι.
   Πριν ήταν από κάτω, σε απαλό γκρι πλαίσιο με χρωματιστή αριστερή ρίγα: διαβαζόταν αφού είχες ήδη
   δει την τιμή, δηλαδή πολύ αργά. Η θέση την ορίζει το DOM (msTile: instr → tile), όχι το CSS.
   ΕΝΑ χρώμα για κάθε παραβίαση, ανεξάρτητα από ζώνη/πλευρά: η οδηγία ΕΙΝΑΙ η προειδοποίηση —
   μια «ήπια» εκδοχή της θα ακύρωνε τον λόγο ύπαρξής της. */
.ms-instr{margin:0 0 6px;padding:8px 10px;font-size:12px;font-weight:600;line-height:1.4;
  color:#fff;background:var(--red-fill);border:none;border-radius:var(--r-sm);
  display:flex;gap:7px;align-items:flex-start}
.ms-instr svg{flex:none;margin-top:1px;color:#fff}
/* Ελεύθερη προβολή: σύρσιμο μεμονωμένων πλακιδίων. */
.ms-grid.free .ms-cell{cursor:grab}
.ms-grid.free .ms-cell.dragging{opacity:.45}
.ms-grid.free .ms-cell.dragover .ms-tile{outline:2px dashed var(--navy);outline-offset:2px}
/* Στενή οθόνη: δύο κολόνες διαβάζονται καλύτερα από τέσσερις — υπερισχύει των inline styles του JS. */
@media (max-width:640px){.sens-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;height:auto!important}}