/* מאגר המשפכים: העיצוב של הדמיה V5 שאושרה ב-15.10.2026 */
/* מפת קווים: ערוץ = קו, צעד = תחנה. תפריט צד נקי מימין, ראש מסך עם שם ואייקון אחד, כרטיס תחנה: הנוסח, ושני קישורים שקטים לפרטים ולתובנות */
:root{
  --bg:#FCFCFE;--ink:#23253A;--dim:#6A6D82;--sep:#ECEDF3;--panel:#FFFFFF;--panelbd:#ECEDF3;--field:#F6F6FA;--fieldbd:#E3E4EC;
  --btn:#FFFFFF;--btnbd:#E3E4EC;--btnp:#23253A;--btnpink:#FFFFFF;--tagink:#1F2033;--sel:#23253A;--r:18px;
  --sh:0 14px 40px rgba(35,37,58,.10);--shsm:0 2px 8px rgba(35,37,58,.06);
  --font:"Noto Sans Hebrew","Segoe UI",Arial,sans-serif;color-scheme:light}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);direction:rtl;overflow:hidden;font-variant-numeric:tabular-nums}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.side{position:absolute;top:0;bottom:0;right:0;width:236px;background:#F6F6FA;z-index:9;display:flex;flex-direction:column;transition:transform .2s ease-out}
body.closed .side{transform:translateX(100%)}
.side-h{display:flex;align-items:center;gap:4px;padding:16px 16px 8px}
.side-h b{flex:1;font:600 15px var(--font)}
.side nav{flex:1;overflow:auto;padding:4px 10px 10px}
.grp{margin-top:14px}
.gname{font:500 12px var(--font);color:#4F5266;padding:0 8px 4px}
.it{display:block;width:100%;text-align:right;border:0;background:none;border-radius:10px;padding:7px 10px;font:500 14px/1.35 var(--font);color:var(--ink)}
.it:hover{background:#ECEDF3}
.it.on{background:#FFFFFF;box-shadow:var(--shsm);font-weight:600}
.it.sub{padding-inline-start:22px;font-size:13px;color:#4F5266}
.it.todo{color:#7C7F93}
.side-f{padding:10px 12px 14px}
.side-f button.newf{width:100%;border:1px dashed #C9CBD8;background:none;border-radius:12px;padding:8px;font:500 14px var(--font);color:#4F5266}
.side-f button.newf:hover{color:var(--ink);border-color:var(--dim)}
.side-f .clone-form{flex-direction:column;margin:0}
.side-f .clone-form small{font-size:12px;color:var(--dim)}
.main{position:absolute;top:0;bottom:0;left:0;right:236px;transition:right .2s ease-out}
body.closed .main{right:0}
.ib{display:inline-grid;place-items:center;width:36px;height:36px;border:0;background:none;color:var(--dim);border-radius:50%;padding:0;position:relative}
.ib:hover{color:var(--ink);background:#F1F2F7}
.ib svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib .n{position:absolute;top:2px;left:2px;min-width:15px;height:15px;border-radius:8px;background:var(--ink);color:#FFFFFF;font:600 10px/15px var(--font);text-align:center;padding:0 3px;box-sizing:border-box}
.openside{display:none}
body.closed .openside{display:inline-grid}
.empty{position:absolute;inset:69px 0 0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--dim)}
.empty b{display:block;font:600 18px var(--font);color:var(--ink);margin-bottom:6px}
.head{position:absolute;top:0;inset-inline:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--sep);display:flex;align-items:center;gap:6px;padding:12px 20px;flex-wrap:wrap}
.head .nm{flex:1;min-width:200px}
.head h1{margin:0;font:600 22px/1.2 var(--font);text-wrap:balance}
.head p{margin:2px 0 0;font-size:13px;color:var(--dim)}
.btn{border:1px solid var(--btnbd);background:var(--btn);color:var(--ink);padding:8px 14px;border-radius:999px;font:500 14px var(--font)}
.btn.p{background:var(--btnp);color:var(--btnpink);border-color:var(--btnp)}
.stage{position:absolute;top:69px;inset-inline:0;bottom:0;overflow:hidden;cursor:grab;touch-action:none}
.stage.pan{cursor:grabbing}
.world{position:absolute;top:0;left:0;transform-origin:0 0;direction:ltr}
.zone{position:absolute;top:16px;text-align:center;direction:rtl}
.zone b{display:block;font:600 16px/1.2 var(--font)}
.zone span{font-size:12.5px;color:var(--dim)}
.lbl{position:absolute;direction:rtl;text-align:center;font:500 13px/1.3 var(--font);cursor:pointer;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lbl.miss{color:var(--dim)}
.lbl.on{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font:600 13.5px/1 var(--font);color:var(--tagink);white-space:nowrap}
.world .tag{position:absolute;direction:rtl}
svg.lines .hit{cursor:copy}
svg.lines .tap{cursor:pointer}
.dock{position:absolute;right:16px;bottom:16px;display:flex;background:var(--panel);border:1px solid var(--panelbd);border-radius:999px;z-index:4;box-shadow:var(--shsm);padding:2px}
.dock button{border:0;background:none;min-width:38px;height:34px;font:500 14px var(--font);padding:0 10px;border-radius:999px}
.dock button:hover{background:var(--field)}
.legend{position:absolute;right:16px;bottom:60px;z-index:4;font-size:12.5px;color:var(--dim);display:flex;gap:14px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 32px)}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* כרטיס התחנה */
.sign{position:absolute;left:16px;top:85px;max-height:calc(100% - 101px);width:min(420px,calc(100% - 32px));background:var(--panel);border:1px solid var(--panelbd);border-radius:22px;box-shadow:var(--sh);display:flex;flex-direction:column;z-index:6;overflow:hidden;animation:sin .2s ease-out}
@keyframes sin{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
.sign .top{display:flex;align-items:center;gap:8px;padding:16px 18px 0}
.sign .when{font:500 13px var(--font);color:var(--dim)}
.sign .x{margin-inline-start:auto;border:0;background:none;color:var(--dim);font-size:22px;line-height:1;width:34px;height:34px;border-radius:50%}
.sign .x:hover{background:var(--field);color:var(--ink)}
.sign .body{overflow:auto;padding:10px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.sign h2{margin:0;font:600 20px/1.3 var(--font);text-wrap:balance}
.sign h2[contenteditable]{outline:0;border-bottom:1px dashed var(--fieldbd)}
.sign textarea{width:100%;box-sizing:border-box;border:0;background:var(--field);border-radius:14px;padding:14px 16px;font:400 15.5px/1.75 var(--font);min-height:200px;resize:vertical;direction:rtl}
.sign textarea:focus{outline:0;background:#FFFFFF;box-shadow:0 0 0 1px #DADBE6}
.sign .cnt{font:500 12.5px var(--font);color:var(--dim);margin-top:-6px;text-align:left}
.sign .links{display:flex;gap:4px;margin-top:2px}
.sign .links button{border:0;background:none;border-radius:999px;padding:6px 12px;font:500 13.5px var(--font);color:var(--dim)}
.sign .links button:hover{color:var(--ink)}
.sign .links button.on{background:#F1F2F7;color:var(--ink)}
.sign .pane{font-size:14px}
.sign .pane dl{margin-top:2px}
.sign .addlink{border:0;background:none;padding:8px 0 0;font:500 13.5px var(--font);color:var(--dim)}
.sign .addlink:hover{color:var(--ink)}
.sign .flag{align-self:flex-start;font:600 12.5px var(--font);background:#FFF1C2;color:#5C4A00;border-radius:999px;padding:4px 10px}
.sign details{border-top:1px solid var(--sep);padding-top:10px}
.sign summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font:600 14px var(--font)}
.sign summary::-webkit-details-marker{display:none}
.sign summary::before{content:"";width:7px;height:7px;border-inline-start:2px solid var(--dim);border-bottom:2px solid var(--dim);rotate:45deg;transition:rotate .15s ease-out;margin-inline-start:2px}
.sign details[open] summary::before{rotate:-45deg}
.sign summary span{font-weight:400;color:var(--dim)}
.sign dl{display:grid;grid-template-columns:76px 1fr;gap:6px 10px;margin:10px 0 0;font-size:14px;line-height:1.55}
.sign dt{color:var(--dim)}
.sign dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sign select{border:1px solid var(--fieldbd);background:var(--field);border-radius:10px;padding:3px 8px}
.ins ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ins li{background:var(--field);border-radius:12px;padding:8px 12px;font-size:14px;line-height:1.55}
.ins-who{display:block;font-size:12px;color:var(--dim)}
.ins-empty{margin:10px 0 0;font-size:13.5px;color:var(--dim)}
.ins-add,.clone-form,.pop{display:flex;gap:6px;margin-top:10px}
.ins-add input,.clone-form input,.pop input{flex:1;min-width:0;border:1px solid var(--fieldbd);background:var(--field);border-radius:999px;padding:7px 12px;font:14px var(--font)}
.ins-add button,.clone-form button,.pop button{border:0;background:var(--btnp);color:var(--btnpink);border-radius:999px;padding:7px 14px;font:500 14px var(--font)}
.pop{position:absolute;z-index:7;background:var(--panel);border:1px solid var(--panelbd);border-radius:18px;box-shadow:var(--sh);padding:10px;margin:0;direction:rtl;flex-wrap:wrap;max-width:calc(100% - 32px)}
.toast{position:fixed;bottom:22px;left:50%;translate:-50% 0;background:var(--ink);color:#FFFFFF;border-radius:999px;padding:10px 18px;font:500 14px var(--font);z-index:60}
@media (max-width:760px){.main{right:0!important}.side{box-shadow:-8px 0 30px rgba(35,37,58,.15)}.openside{display:inline-grid}.head{padding:10px 14px}.head h1{font-size:19px}.legend{display:none}.sign{top:auto;bottom:16px;max-height:70%}}

/* מסך הכניסה */
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;padding:24px}
.login .box{text-align:center;display:grid;gap:18px;justify-items:center}
.login h1{margin:0;font:600 26px var(--font)}
.login p{margin:0;color:var(--dim);font-size:15px;max-width:34ch}
.login .err{color:#B42318;font-weight:500}
.gbtn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--btnbd);background:#FFFFFF;border-radius:999px;padding:11px 22px;font:500 15px var(--font);color:var(--ink);text-decoration:none;box-shadow:var(--shsm)}
.gbtn:hover{background:var(--field)}
.side-f .admin{display:block;text-align:center;margin-top:8px;font:500 13px var(--font);color:#4F5266;text-decoration:none}
.side-f .admin:hover{color:var(--ink)}
.sign textarea[readonly]{background:#FAFAFC}
.loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--dim);font:500 15px var(--font)}

/* מפת המערכות והחיבורים בכרטיס התחנה */
.it.sysmap{font-weight:600;margin-top:4px}
.hub{position:absolute;text-align:center;font:600 15px var(--font);color:var(--ink);direction:rtl}
.lbl .sl{display:block;font:400 12px var(--font);color:var(--dim)}
.sign .origin{margin:-4px 0 0;font-size:13px;color:var(--dim)}
.sign .origin a,.sign dd a{color:var(--ink)}
.sign .mets{display:flex;gap:8px;flex-wrap:wrap}
.sign .mets span{background:var(--field);border-radius:12px;padding:6px 10px;font-size:12.5px;color:var(--dim);display:grid}
.sign .mets b{font:600 16px var(--font);color:var(--ink)}
.sign .sysst{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
.sign .sysst i{width:9px;height:9px;border-radius:50%;flex:none}
.sign .sysact{display:flex;gap:8px;flex-wrap:wrap}
.sign .sysact .btn{text-decoration:none;color:var(--ink)}
.steplist{display:grid;gap:4px}
.steplist button{border:0;background:var(--field);border-radius:12px;padding:8px 12px;text-align:right;font:500 14px var(--font);color:var(--ink)}
.steplist button:hover{background:#ECEDF3}
.steplist small{display:block;font-weight:400;font-size:12px;color:var(--dim)}
.refnote { color: var(--dim); font-size: .92em; }

/* V6: בנק אלמנטים, כלי בכרטיס התחנה ומסך ההקמה (מההדמיה שאושרה) */
/* בנק האלמנטים: מגירה בתחתית המפה */
.bankbtn{position:absolute;left:16px;bottom:16px;z-index:5;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--panelbd);background:var(--panel);border-radius:999px;padding:8px 16px;font:600 14px var(--font);box-shadow:var(--shsm)}
.bankbtn:hover{border-color:#C9CBD8}
.bankbtn i{width:9px;height:9px;border-radius:3px;background:var(--ink);rotate:45deg}
.bank{position:absolute;inset-inline:0;bottom:0;z-index:5;background:var(--panel);border-top:1px solid var(--panelbd);box-shadow:0 -10px 30px rgba(35,37,58,.08);padding:12px 20px 16px;animation:up .2s ease-out}
@keyframes up{from{translate:0 20px;opacity:0}to{translate:0 0;opacity:1}}
.bank-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bank-h b{font:600 15px var(--font)}
.bank-h span{font-size:13px;color:var(--dim);flex:1}
.bank-g{display:flex;flex-wrap:wrap;gap:12px 26px;max-height:40vh;overflow:auto}
.bgrp{flex:none}
.bgrp small{display:block;font:500 12px var(--font);color:#4F5266;margin:0 2px 6px}
.bgrp div{display:flex;gap:6px;flex-wrap:wrap}
.el{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--fieldbd);background:var(--field);border-radius:12px;padding:7px 11px;font:500 13.5px/1.2 var(--font);cursor:grab;user-select:none;touch-action:none;text-align:right}
.el:hover{background:#FFFFFF;border-color:#C9CBD8}
.el i{width:10px;height:10px;border-radius:50%;flex:none}
.el em{font-style:normal;font-size:11.5px;color:var(--dim)}
.ghost{position:fixed;z-index:80;pointer-events:none;box-shadow:var(--sh);background:#FFFFFF;translate:-50% -60%;cursor:grabbing}
.dropcol{position:absolute;top:60px;background:rgba(35,37,58,.045);border-radius:14px;pointer-events:none}
.droplane{position:absolute;height:34px;border-radius:999px;pointer-events:none}
body.bankopen .legend,body.bankopen .dock,body.bankopen .bankbtn{display:none}
body.bankopen .sign{max-height:calc(100% - 101px - 190px)}
/* הכלי בכרטיס התחנה */
.meter{display:flex;align-items:center;gap:8px;margin-top:-6px;font:500 12.5px var(--font);color:var(--dim)}
.meter .bar{flex:1;height:4px;border-radius:2px;background:var(--field);overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:2px;background:#8D92A0}
.meter.over{color:#B3261E}.meter.over .bar i{background:#D14343}
.tools{display:flex;gap:6px;flex-wrap:wrap}
.tools .btn{padding:6px 12px;font-size:13.5px}
.est{align-self:flex-start;font:600 12px var(--font);border-radius:999px;padding:3px 10px;background:#F1F2F7;color:#4F5266}
.est.ok{background:#E3F4EA;color:#1F6B41}.est.wait{background:#FFF1C2;color:#5C4A00}
.ask{background:var(--field);border-radius:14px;padding:10px 12px;font-size:13.5px;line-height:1.6}
.ask b{display:block;font-size:12.5px;color:var(--dim);font-weight:500;margin-bottom:2px}
.need{display:flex;gap:6px;flex-wrap:wrap}
.need span{font:500 12.5px var(--font);border:1px dashed #C9CBD8;border-radius:10px;padding:5px 10px;color:#4F5266}
/* מסך ההקמה */
.launch .sum{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}
.launch .sum b{font:600 20px var(--font);color:var(--ink);display:block}
.lsys{border-top:1px solid var(--sep);padding-top:10px}
.lsys h3{margin:0 0 6px;font:600 14.5px var(--font);display:flex;gap:8px;align-items:center}
.lsys h3 span{font-weight:400;font-size:12.5px;color:var(--dim)}
.lrow{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.lrow .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow i{width:9px;height:9px;border-radius:50%;flex:none}
.est.review{background:#FFF1C2;color:#5C4A00}.est.err{background:#FDE7E7;color:#B3261E}
@media (max-width:760px){.head{flex-wrap:nowrap}.head .nm{min-width:0}.head h1,.head p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.whenf{display:flex;align-items:center;gap:8px;font:500 13px var(--font);color:var(--dim)}
.whenf input{flex:1;min-width:0;border:1px solid var(--fieldbd);background:var(--field);border-radius:10px;padding:6px 10px;font:14px var(--font);color:var(--ink)}