/* Shtatka SSP server interface.  The look (shell, navigation, header, panels, tables, buttons, fields) comes from LOCAL's own style sheet
   (local.css is a copy of src/static/style.css, kept identical by a test); this file adds ONLY what the server has and LOCAL does not:
   dialogs, toasts, the structure tree, the scheme cells, form grids, tabs.  Colours below are LOCAL's. */
:root{--s-line:#24384b;--s-text:#e9f2fb;--s-muted:#9fb1c2;--s-accent:#2469e8;--s-warn:#f2a51a;--s-bad:#e65151;--s-ok:#26a269;--s-field:#0c1d2e;--s-field-line:#284158}
#update-banner{background:#2a2316;border-bottom:1px solid var(--s-warn);padding:8px 14px;color:var(--s-text);position:sticky;top:0;z-index:70}
#app{min-height:100vh}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.card{background:linear-gradient(#102235,#0e1f31);border:1px solid var(--s-line);border-radius:10px;padding:18px;margin-bottom:14px}
.err{color:var(--s-bad)}
.login-wrap{max-width:380px;margin:12vh auto;padding:0 16px}.login-wrap .card{display:grid;gap:10px}.login-wrap h2{margin:0 0 4px}
.tiles{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:14px}.tile{background:linear-gradient(#102235,#0e1f31);border:1px solid var(--s-line);border-radius:8px;padding:12px 16px;min-width:130px;color:var(--s-muted)}.tile b{display:block;font-size:24px;color:#edf6ff}.tile.bad b{color:var(--s-bad)}
.tree ul{list-style:none;padding-left:20px;margin:2px 0}.tree li>span{cursor:default}.tree li{margin:3px 0}
.acts{margin-left:10px;font-size:12px}.acts a{margin-right:9px}
.ph{width:28px;height:35px;object-fit:cover;border-radius:4px;vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover{background:#133050}table.compact th,table.compact td{padding:3px 8px;font-size:13px}
.stabs{display:flex;gap:4px;margin:6px 0 14px;border-bottom:1px solid var(--s-line);flex-wrap:wrap}.stabs a{padding:8px 15px;border-radius:7px 7px 0 0;color:var(--s-muted);text-decoration:none}.stabs a.on{background:#102235;color:#fff;border:1px solid var(--s-line);border-bottom-color:#102235}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.field{display:flex;flex-direction:column;gap:3px}.field.wide{grid-column:1/3}.field span{color:var(--s-muted);font-size:12px}
.field input,.field select,.field textarea{width:100%}.field input[type=checkbox]{width:auto;align-self:flex-start}
.modal-bg{position:fixed;inset:0;background:rgba(3,9,16,.76);display:flex;align-items:flex-start;justify-content:center;padding:5vh 12px;overflow:auto;z-index:50}
.dlg{background:linear-gradient(#102235,#0e1f31);border:1px solid var(--s-line);border-radius:10px;width:min(560px,100%);box-shadow:0 12px 40px rgba(0,0,0,.55);color:var(--s-text)}.dlg.wide{width:min(980px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--s-line)}.modal-head .x{border:0;background:none;font-size:22px;line-height:1;color:var(--s-muted);cursor:pointer;position:static}
.modal-body{padding:14px 16px;max-height:70vh;overflow:auto}.modal-err{padding:0 16px;min-height:0}.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--s-line)}
#toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:60}.toast{background:#123b2a;border:1px solid #2f7a49;border-radius:8px;padding:8px 14px;max-width:420px;color:#e9f2fb}.toast.err{background:#4a1f26;border-color:var(--s-bad)}.toast.warn{background:#4a3612;border-color:var(--s-warn)}
.cardhead{display:flex;gap:16px;margin-bottom:10px}.photo{width:120px;height:150px;object-fit:cover;border-radius:8px;background:#0c1d2e}.photo.none{display:flex;align-items:center;justify-content:center;color:var(--s-muted);font-size:12px}
.picker select{width:100%;margin-bottom:8px}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.scheme .lvl{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0;align-items:stretch}.scheme .lvl>span{width:16px;align-self:center}
.cell{background:#0c1d2e;border:1px solid var(--s-line);border-radius:8px;padding:5px 8px;min-width:128px;max-width:190px;display:flex;flex-direction:column;gap:1px;font-size:12px}.cell.free{border-style:dashed;color:var(--s-muted)}.cell img.ph{width:36px;height:45px;margin-bottom:2px}
.notice.danger{border-color:var(--s-bad)}.notice.warning{border-color:var(--s-warn)}
.dep-bar{height:8px;border-radius:5px;background:#0a1826;border:1px solid #1c3248;overflow:hidden;margin:6px 0 10px}.dep-bar i{display:block;height:100%;background:linear-gradient(90deg,#1f9d63,#2fd18a)}.dep-bar.over i{background:linear-gradient(90deg,#d98b17,#f2a51a)}
.dep-roles{width:100%;margin-top:8px;font-size:12px}.dep-roles th,.dep-roles td{padding:5px 8px}.dep-roles td.num,.dep-roles th.num{text-align:center}.dep-roles .code{font-weight:700;display:block}.dep-roles .code+small{color:var(--s-muted)}.dep-roles .bad{color:#ff8d94}
@media(max-width:760px){.grid,.two{grid-template-columns:1fr}.field.wide{grid-column:auto}}

.access-editor h4{margin:14px 0 4px}.access-editor h5{margin:12px 0 5px;color:var(--s-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dept-checks{display:flex;flex-wrap:wrap;gap:6px}.dept-check{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--s-line);background:#0c1d2e;border-radius:8px;padding:6px 11px;cursor:pointer}.dept-check:has(input:checked){border-color:#2469e8;background:#123b6b;color:#fff}
.perm-row{display:flex;flex-wrap:wrap;gap:6px}button.perm,span.perm{border:1px solid var(--s-line);background:#0c1d2e;color:var(--s-muted);border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer;display:inline-block}
.perm.on{background:#123b6b;border-color:#2469e8;color:#fff}.perm.add{background:#123b2a;border-color:#26a269;color:#baf0d3}.perm.deny{background:#4a1f26;border-color:#e65151;color:#ffc2c7;text-decoration:line-through}
.dep-tab{min-width:120px}

/* the screens before the work (login, change of a temporary password) */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(280px,38%) 1fr;background:radial-gradient(1200px 600px at 80% -10%,#10304f 0%,transparent 60%),linear-gradient(#07111d,#0a1a2c)}
.auth-side{padding:34px 34px 30px;border-right:1px solid #183047;background:linear-gradient(#07111d,#08192a 55%,#061321);display:flex;flex-direction:column;gap:46px}
.auth-points{margin-top:auto;color:#a9bccd}.auth-points b{display:block;font-size:18px;color:#f0f7fd;margin-bottom:8px}.auth-points p{margin:0 0 14px;line-height:1.5}
.auth-points ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}.auth-points li{padding-left:22px;position:relative;font-size:13px}.auth-points li:before{content:"✓";position:absolute;left:0;color:#2fd18a;font-weight:700}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px;gap:14px}
.auth-card{width:min(440px,100%);background:linear-gradient(#102235,#0e1f31);border:1px solid #24384b;border-radius:14px;padding:30px 30px 24px;box-shadow:0 22px 60px rgba(0,0,0,.45)}
.auth-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,#1c4a7a,#10294a);border:1px solid #2f6aa8;margin-bottom:14px}
.auth-card h1{margin:0 0 6px;font-size:23px}.auth-lead{margin:0 0 20px;color:#9fb1c2;line-height:1.5}
.af{display:block;margin-bottom:14px}.af>span{display:block;font-size:12px;color:#9fb1c2;margin-bottom:5px;font-weight:600}
.af input{width:100%;height:42px;padding:0 12px;font-size:15px;background:#0c1d2e;border:1px solid #284158;border-radius:9px;color:#eaf5ff}.af input:focus{outline:none;border-color:#2469e8;box-shadow:0 0 0 3px rgba(36,105,232,.25)}
.pw{position:relative}.pw input{padding-right:44px}.eye{position:absolute;right:4px;top:4px;width:34px;height:34px;border:0;border-radius:7px;background:transparent;color:#7f93a6;font-size:16px;cursor:pointer}.eye:hover{background:#15304a}.eye.on{color:#4e9fff}
.auth-err{margin:0 0 12px;padding:10px 12px;border-radius:9px;background:#4a1f26;border:1px solid #e65151;color:#ffd0d4;font-size:13px}.auth-caps{margin:-6px 0 12px;color:#f2a51a;font-size:12px}
.auth-btn{width:100%;height:44px;font-size:15px;font-weight:600;border-radius:10px;margin-top:4px;color:#fff;border:1px solid #3b82f6;background:linear-gradient(#2f7bf0,#1f5fd0);cursor:pointer;box-shadow:0 6px 18px rgba(36,105,232,.35)}.auth-btn:hover:not(:disabled){background:linear-gradient(#3a86ff,#2468e0)}.auth-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;background:#16324f;border-color:#244a70}
.auth-help{margin:18px 0 0;font-size:12.5px;color:#7f93a6;text-align:center}.auth-help a{color:#6aa8f0;cursor:pointer}.auth-foot{margin:0;font-size:12px;color:#5f7488}
.meter{height:6px;border-radius:4px;background:#0a1826;border:1px solid #1c3248;overflow:hidden;margin:-4px 0 10px}.meter i{display:block;height:100%;width:0;transition:width .2s}
.meter i.weak{background:#e65151}.meter i.good{background:#f2a51a}.meter i.strong{background:#2fd18a}
.rules{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:12.5px}.rules li{color:#7f93a6;padding-left:20px;position:relative}
.rules li:before{content:"○";position:absolute;left:0;color:#47607a}.rules li.ok{color:#bde8d0}.rules li.ok:before{content:"✓";color:#2fd18a;font-weight:700}
@media(max-width:820px){.auth-page{grid-template-columns:1fr}.auth-side{display:none}.auth-main{justify-content:flex-start;padding-top:8vh}}
.dl .sum{margin-top:10px;font-size:12px;word-break:break-all}.dl code{background:#0a1826;border:1px solid #1c3248;border-radius:6px;padding:2px 6px}.dl-btn{padding:10px 18px;font-weight:600;text-decoration:none}

/* ---- devices ---- */
.device-code { font: 700 2rem/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; text-align: center; padding: 18px 12px; margin: 10px 0 14px; border-radius: 12px; background: #eef3f8; color: #14233b; border: 1px dashed #7d92aa; user-select: all; }
.device-code.small { display: inline-block; font-size: 1.05rem; padding: 6px 10px; margin: 0; letter-spacing: .12em; }
.nav-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #d9534f; color: #fff; font-size: .75rem; text-align: center; }
.nav-count[hidden] { display: none; }
.pw-show { font: 700 1.05rem/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; padding: 6px 10px; border-radius: 8px; background: #eef3f8; color: #14233b; user-select: all; }

/* ---- a server screen inside LOCAL's interface ---- */
html.embed body { background: transparent; }
.embed-main { min-width: 0; }
.embed-main .content { padding: 24px; }

/* users: the access editor (blocks) and the person's card */
.ab{border:1px solid var(--s-line);border-radius:10px;background:#0b1b2b;padding:12px 14px;margin:0 0 12px}
.ab-head{display:flex;gap:10px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}.ab-field{display:flex;flex-direction:column;gap:3px;flex:1 1 260px}.ab-field span,.ab-label{color:var(--s-muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.ab-label{margin:6px 0 5px}.ab-perms{margin-top:10px;border-top:1px dashed var(--s-line);padding-top:8px}.ab-perms summary{cursor:pointer;list-style:none}.ab-perms summary::-webkit-details-marker{display:none}
.ab-perms summary::before{content:'▸ ';color:var(--s-muted)}.ab-perms[open] summary::before{content:'▾ '}.ab-sum{font-weight:600}.perm-legend{margin:8px 0 2px;line-height:2}
.ud-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.ud-name{font-size:18px;font-weight:700}.ud-chips{margin-left:auto}
.ud-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#2469e8,#1b8fd8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}.ud-avatar.sm{width:34px;height:34px;font-size:12px}
.ud-section{border:1px solid var(--s-line);border-radius:10px;padding:10px 14px 4px;margin:0 0 12px;background:#0c1d2e}.ud-section h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--s-muted)}
.ud-danger{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{display:inline-block;border:1px solid var(--s-line);border-radius:999px;padding:1px 9px;font-size:11px;color:var(--s-muted)}.chip.ok{border-color:#26a269;color:#baf0d3;background:#123b2a}.chip.off{border-color:#6b7280;color:#cbd5e1}.chip.err{border-color:#e65151;color:#ffc2c7;background:#4a1f26}
.notice.err{border:1px solid #e65151;background:#3a1a20;color:#ffc2c7;border-radius:8px;padding:8px 12px;margin:0 0 12px}
.users-table td{vertical-align:middle}.users-table td.act{text-align:right}
@media (max-width:640px){.ud-chips{margin-left:0}.ab-head{align-items:stretch}}

/* modern controls for the server's own screens (buttons, fields); everything here has zero specificity, so any more specific rule of a component still wins */
:root{color-scheme:dark}
:where(.content,.dlg,.modal-bg,.login-wrap,.card,.ud-section,.access-editor,main) :where(button:not(.perm):not(.x):not(.eye):not(.dep-tab):not(.nav-folder-toggle)){
  font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;padding:8px 16px;border-radius:9px;border:1px solid #30475c;background:linear-gradient(#17324b,#11283b);color:#dbe9f5;
  cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:background .14s,border-color .14s,transform .14s,box-shadow .14s}
:where(.content,.dlg,.modal-bg,.login-wrap,.card,.ud-section,.access-editor,main) :where(button:not(.perm):not(.x):not(.eye):not(.dep-tab):not(.nav-folder-toggle):hover){
  background:linear-gradient(#1d3d5c,#163450);border-color:#4a6d8c;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.35)}
:where(.content,.dlg,.modal-bg,.login-wrap,.card,.ud-section,.access-editor,main) :where(button:not(.perm):not(.x):not(.eye):not(.dep-tab):not(.nav-folder-toggle):active){transform:none;box-shadow:none}
button.primary{background:linear-gradient(#2d83f2,#2268ce);border-color:#3d8bf0;color:#fff}button.primary:hover{background:linear-gradient(#3b90ff,#2573dc);border-color:#5aa0ff}
button.danger{background:linear-gradient(#3a1d26,#2e161d);border-color:#7d3340;color:#ffc2c7}button.danger:hover{background:linear-gradient(#d95762,#bd3f4a);border-color:#e46771;color:#fff}
button.green{background:linear-gradient(#27b77b,#169762);border-color:#2ac182;color:#fff}
button:disabled,button[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
button:focus-visible,a.btn:focus-visible{outline:2px solid #5aa0ff;outline-offset:2px}
td button,td .act button,.row button{padding:6px 13px;font-size:12px}
.modal-foot button{min-width:96px}
:where(.content,.dlg,.modal-bg,.login-wrap,.card,.ud-section,.access-editor,main) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea){
  font-family:inherit;font-size:14px;color:#eaf5ff;background:#0c1d2e;border:1px solid #284158;border-radius:9px;padding:8px 11px;transition:border-color .14s,box-shadow .14s}
:where(.content,.dlg,.modal-bg,.login-wrap,.card,.ud-section,.access-editor,main) :where(select){padding-right:30px;cursor:pointer}
:where(input,select,textarea):focus{outline:none;border-color:#2d83f2;box-shadow:0 0 0 3px rgba(45,131,242,.25)}
:where(input,textarea)::placeholder{color:#6f8aa3}
input[type=checkbox],input[type=radio]{accent-color:#2d83f2;width:16px;height:16px}
.field span,.ab-field span{font-size:12px;color:var(--s-muted)}