/* ============================================================
   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:#B45309;
  --amber-strong:#8F4207;
  --zone-warn:#F5E7CF;
  --ok:#1E7A45;
  /* 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:#E3A54B;
  --amber-strong:#EDBE79;
  --zone-warn:#3E3117;
  --ok:#4CC282;
  --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}
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}
.pin-grid>.pin-tile{animation:osFadeUp .3s var(--ease-out) both}
.pin-grid>.pin-tile:nth-child(2){animation-delay:.03s}
.pin-grid>.pin-tile:nth-child(3){animation-delay:.06s}
.pin-grid>.pin-tile:nth-child(4){animation-delay:.09s}
.pin-grid>.pin-tile:nth-child(5){animation-delay:.12s}
.pin-grid>.pin-tile: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)}
.stw.warn{color:var(--amber)}
.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-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)}
.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)}
.comp-chip.c-warn .n{color:var(--amber)}
.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}
.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);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 .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: πάντα «φωτεινό θέμα» — στιγμιότυπο του πραγματικού προϊόντος ---- */
.lh-demo{
  background:#fff;color:#131A26;border-radius:12px;
  box-shadow:0 10px 24px rgba(3,10,30,.35);
  padding:12px 16px;max-width:500px;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:70px;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:#1E7A45}
.lhd-w .val.warn{color:#B45309}
.lhd-w .lbl{font-size:11px;color:#5A6577;white-space:nowrap}
.lhd-merc{transform-origin:22px 68px;animation:lhd-temp 6s ease-in-out infinite alternate}
@keyframes lhd-temp{to{transform:scaleY(1.05)}}
.lhd-needle{transform-origin:50px 52px;animation:lhd-sway 9s ease-in-out infinite alternate}
@keyframes lhd-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.lhd-rail{position:relative;width:100%;max-width:118px;height:20px}
.lhd-track{position:absolute;left:0;right:0;top:8px;height:6px;border-radius:99px;overflow:hidden;display:flex}
.lhd-track span{height:100%;flex:none}
.lhd-caret{position:absolute;top:-1px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid #B45309;transform:translateX(-50%)}
.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,.lhd-merc,.lhd-needle{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);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}
.dlg-foot{display:flex;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 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}
.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}
.st2-table{width:100%;border-collapse:collapse;font-size:13px}
.st2-table th,.st2-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);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:hover{background:var(--paper)}
.st2-empty{text-align:center;color:var(--ink3);font-style:italic;padding:28px}
.st2-mini{font:inherit;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--navy);cursor:pointer;margin-left:6px}
.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}
.st2-lim-tbl td:first-child,.st2-lim-tbl th:first-child{text-align:left;font-weight:600;white-space:nowrap;padding-left:10px}
.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}
.pin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}   /* Αριθμοί: αρχικό (συμπαγές) μέγεθος */
.pin-grid.graphic{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}                 /* Γραφικά: μεγάλα tiles */
/* Μέγεθος γραφικών Επισκόπησης (Ρυθμίσεις): ΜΟΝΟ η προβολή «Γραφικά»· τα «Αριθμοί» (.pin-grid χωρίς .graphic) μένουν ως έχουν. «md» = default */
:root[data-ovsize="sm"] .pin-grid.graphic{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
:root[data-ovsize="sm"] .pin-graphic{height:160px}
:root[data-ovsize="sm"] .pin-graphic .sc-thermo{height:155px}
:root[data-ovsize="sm"] .pin-graphic .sc-dial{max-width:210px}
:root[data-ovsize="lg"] .pin-grid.graphic{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
:root[data-ovsize="lg"] .pin-graphic{height:280px}
:root[data-ovsize="lg"] .pin-graphic .sc-thermo{height:270px}
:root[data-ovsize="lg"] .pin-graphic .sc-dial{max-width:360px}
.pin-tile{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:border-color 140ms var(--ease-out)}
.pin-tile:hover{border-color:var(--navy)}
.pin-tile.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.pin-tile.crit{border-color:var(--crit-line);background:var(--crit-bg)}
.pin-tile.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.pin-name{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;color:var(--ink2);line-height:1.3;min-height:2.6em}
.pin-name .ldot{margin-top:3px;flex:none}
.pin-val{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--ink);margin-top:6px;font-feature-settings:'tnum' 1}
/* Αριθμοί: λίγο πιο τετράγωνα κουτάκια, με τη μέτρηση κεντραρισμένη */
.pin-grid:not(.graphic) .pin-tile{aspect-ratio:1/1;display:flex;flex-direction:column}
.pin-grid:not(.graphic) .pin-val{flex:1;display:flex;align-items:center;justify-content:center;margin-top:0}
.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)}
.pin-status.warn{color:var(--amber-strong)}
.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}
.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{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;touch-action:none;cursor:grab;
  background-color:var(--paper);
  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:40px 40px}
.sc-canvas.has-bg{background-image:none}
.sc-canvas.panning{cursor:grabbing}
/* pannable/zoomable layer: badges (θέσεις σε %) + προαιρετικό φόντο· ο μετασχηματισμός εδώ */
.sc-stage{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
/* οδηγοί στοίχισης κατά το σύρσιμο widget (μαγνητικό κούμπωμα σε γραμμές άλλων στοιχείων) */
.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;gap:5px}
.sc-zoom .btn-plain{width:32px;height:32px;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)}
/* 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: μόνο τιμή+μονάδα, χωρίς πάνελ */
/* λαβή αλλαγής μεγέθους (μόνο σε επεξεργασία)· αντι-κλιμάκωση ώστε να μένει σταθερή σε μέγεθος ανεξαρτήτως --sc-scale */
/* διακριτική «λαβή» αλλαγής μεγέθους: διαγώνιες γραμμές στην κάτω-δεξιά γωνία (σαν textarea grip),
   αχνή by default, εντονότερη στο hover· αντι-κλιμάκωση ώστε να μένει σταθερή ανεξαρτήτως --sc-scale */
/* μεγαλύτερο, ευκολότερο hit target (24px τετράγωνο, όλο clickable)· το «grip» σχεδιάζεται στο ::after */
.sc-resize{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;cursor:nwse-resize;touch-action:none;z-index:8;
  transform:scale(calc(1/var(--sc-scale,1)));transform-origin:bottom right}
.sc-resize::after{content:"";position:absolute;right:3px;bottom:3px;width:15px;height:15px;
  background:repeating-linear-gradient(135deg,var(--ink2) 0 2px,transparent 2px 5px);
  -webkit-clip-path:polygon(100% 0,100% 100%,0 100%);clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.5;transition:opacity .12s}
.sc-widget:hover .sc-resize::after,.sc-label:hover .sc-resize::after,.sc-outline:hover .sc-resize::after{opacity:.85}
.sc-resize:hover::after{opacity:1}
.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 */
.sc-wgc-line{display:flex;align-items:center;gap:10px;margin-top:2px}
/* ορατός 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:nowrap;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 */
.sc-conn-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
line.sc-conn{stroke-linecap:round}
.sc-conn-dots{position:absolute;inset:0;pointer-events:none}
.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}
.sc-equip-body{display:flex;flex-direction:column;align-items:center;gap:3px}
.sc-equip-svg{width:44px;height:44px;display:block}
.sc-equip-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.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}
}

/* ── Καρτέλα αισθητήρα: όλες οι παράμετροι σε ΕΝΑ viewport, σε δύο σειρές ──────────────────
   Κολόνες/σειρές/ύψος μπαίνουν από JS (sensCardFit): εξαρτώνται από το πλήθος παραμέτρων του
   αισθητήρα και από το πού τελειώνει η μπάρα εργαλείων. Τα πλακίδια μοιράζονται ό,τι μείνει,
   οπότε δεν υπάρχει ποτέ scroll.
   Η ζώνη φαίνεται από το φόντο, το χρώμα της τιμής και την κατάσταση — καμία ταινία/κουκκίδα:
   τρία σήματα για το ίδιο πράγμα έκαναν το πλέγμα να φωνάζει. */
.sens-grid{display:grid;gap:12px;overflow:hidden}
.sens-tile{
  position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:14px 16px 12px;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);
}
.sens-tile.ok{border-color:var(--ok-line);background:var(--ok-bg)}
.sens-tile.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.sens-tile.crit{border-color:var(--crit-line);background:var(--crit-bg)}
.sens-tile:hover{border-color:var(--navy);transform:translateY(-1px);box-shadow:0 4px 14px rgba(8,39,104,.10)}
.sens-tile:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.st-name{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
/* Η τιμή δεσπόζει: κλιμακώνεται με το πλάτος του πλακιδίου, με ταμπλόιντ αριθμούς ώστε να μη
   χοροπηδά όταν αλλάζουν ψηφία στη ζωντανή ανανέωση. */
.st-val{display:flex;align-items:baseline;gap:6px;margin-top:6px;flex:0 0 auto;
  font-family:var(--mono);font-size:clamp(26px,3.1vw,44px);font-weight:700;line-height:1.02;
  color:var(--ink);font-feature-settings:'tnum' 1;white-space:nowrap}
.st-unit{font-family:var(--sans);font-size:clamp(11px,0.95vw,14px);font-weight:500;color:var(--ink3);letter-spacing:0}
/* max-height: χωρίς αυτό το sparkline τεντωνόταν σε 250px και το γέμισμα γινόταν συμπαγές μπλοκ */
.sens-tile .sc-wg-spark{flex:1 1 auto;width:100%;min-height:22px;height:auto;margin:12px 0 10px}
.st-status{flex:0 0 auto;margin-top:auto;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink3)}
.st-status.ok{color:var(--ok)}
.st-status.warn{color:var(--amber)}
.st-status.crit{color:var(--red-text)}
/* Στενή οθόνη: δύο κολόνες διαβάζονται καλύτερα από τέσσερις — υπερισχύει των 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;overflow:visible}}