/* Оболочка хаба (этап 6, вариант А «Боковая колонка»): инструменты слева, всегда под рукой.
   Подключается к любой странице инструмента (shell.js). Все классы с префиксом hub-,
   переменные --hub-*: у страниц инструментов свои стили, и оболочка в них не лезет. */
:root{
  --hub-bg:#fbfbf9; --hub-line:#e0dfda; --hub-ink:#1c1c1a; --hub-muted:#6b6b66; --hub-off:#706f69;
  --hub-accent:#1f5c4a; --hub-accent-soft:#e6efe9; --hub-hover:#f0efeb; --hub-panel:#fff;
  --hub-err:#a32a24; --hub-err-soft:#fbeceb; --hub-err-line:#e8b4b0; --hub-field:#c9c7c0;
  --hub-shadow:0 6px 18px rgba(28,28,26,.12);
}
/* Только светлая тема - как у страниц инструментов (аудит 24.09.2026). */
.hub-nav :where(a,button):focus-visible,.hub-modal :where(input,button):focus-visible,
.hub-toast button:focus-visible{outline:2px solid var(--hub-accent);outline-offset:2px}
.hub-compact .hub-item:focus-visible{outline-offset:-2px}
body.hub-body{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;margin:0}
body.hub-body.hub-compact{grid-template-columns:64px minmax(0,1fr)}
.hub-main{min-width:0}

.hub-nav{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;
  padding:20px 12px;background:var(--hub-bg);border-right:1px solid var(--hub-line);
  font:14px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--hub-ink);z-index:20}
.hub-brand{display:flex;align-items:baseline;gap:8px;padding:0 10px 18px;color:var(--hub-ink);text-decoration:none}
.hub-brand svg{align-self:center}
.hub-brand b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.hub-brand span{font-size:12px;color:var(--hub-muted)}
.hub-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;color:var(--hub-ink);
  text-decoration:none;white-space:nowrap}
.hub-item:hover{background:var(--hub-hover)}
.hub-item.on{background:var(--hub-accent-soft);color:var(--hub-accent);font-weight:550}
.hub-item.soon{color:var(--hub-off);cursor:default}
.hub-item.soon:hover{background:none}
.hub-item{min-width:0}
.hub-label{min-width:0;white-space:normal;line-height:1.3}   /* длинное название переносится, а не режется */
.hub-item svg{flex:none}
.hub-sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hub-muted);padding:14px 10px 6px}
.hub-grow{flex-grow:1}
/* кто вошёл: значок, имя, под ним логин; «Сменить пароль» и «Выйти» — строкой ниже, под именем */
.hub-me{border-top:1px solid var(--hub-line);margin-top:10px;padding:12px 10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;position:relative}
.hub-ava{width:30px;height:30px;border-radius:50%;background:var(--hub-accent);color:#fff;border:0;padding:0;
  font:600 13px/30px "Segoe UI",system-ui,sans-serif;text-align:center;flex:none;cursor:pointer}
.hub-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.hub-who b,.hub-who span{overflow-wrap:anywhere}
.hub-who b{font-size:13px;font-weight:550}
.hub-who span{font-size:12px;color:var(--hub-muted)}
.hub-link{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--hub-accent);text-decoration:underline;cursor:pointer}
.hub-me .hub-acts{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:2px 14px;padding-left:40px;box-sizing:border-box}

/* Внутри инструмента колонка сужается до значков - место отдаётся работе. */
.hub-compact .hub-nav{padding:18px 0;align-items:center}
.hub-compact .hub-brand{padding:0 0 16px}
.hub-compact .hub-brand b,.hub-compact .hub-brand span,.hub-compact .hub-label,
.hub-compact .hub-sec span,.hub-compact .hub-who,.hub-compact .hub-acts{display:none}
/* вместо заголовка «Администрирование» — тонкая черта */
.hub-compact .hub-sec{width:32px;padding:0;margin:10px 0 8px;border-top:1px solid var(--hub-line)}
.hub-compact .hub-item{width:40px;height:40px;padding:0;justify-content:center}
.hub-compact .hub-me{border-top:0;padding:10px 0 0;justify-content:center}
.hub-menu{position:absolute;left:52px;bottom:0;min-width:200px;background:var(--hub-bg);border:1px solid var(--hub-line);
  border-radius:9px;box-shadow:var(--hub-shadow);padding:10px 12px;display:flex;flex-direction:column;gap:6px;z-index:30}
.hub-menu b{font-size:13px}
.hub-menu span{font-size:12px;color:var(--hub-muted)}

.hub-modal{position:fixed;inset:0;background:rgba(28,28,26,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.hub-modal form{background:var(--hub-panel);color:var(--hub-ink);border-radius:10px;padding:22px 24px;width:400px;max-width:92vw;
  display:flex;flex-direction:column;gap:6px;font:14px/1.45 "Segoe UI",system-ui,sans-serif;box-shadow:var(--hub-shadow)}
.hub-modal h2{margin:0 0 6px;font-size:17px;font-weight:600}
.hub-modal .hub-dlg-text{margin:0 0 6px;color:var(--hub-ink);line-height:1.5}
.hub-modal label{font-size:12px;color:var(--hub-muted);margin-top:8px}
.hub-modal input{padding:8px 10px;border:1px solid var(--hub-field);border-radius:7px;font:inherit;background:var(--hub-panel);color:var(--hub-ink)}
.hub-modal .hub-row{display:flex;gap:10px;align-items:center;margin-top:14px}
.hub-modal button{font:inherit;padding:8px 14px;border-radius:7px;border:1px solid var(--hub-line);background:var(--hub-panel);color:var(--hub-ink);cursor:pointer}
.hub-modal button.hub-primary{background:var(--hub-accent);border-color:var(--hub-accent);color:#fff;font-weight:500}
.hub-modal button.hub-danger{background:var(--hub-err);border-color:var(--hub-err);color:#fff;font-weight:500}
.hub-modal button:disabled{opacity:1;background:var(--hub-bg);border-color:var(--hub-line);color:var(--hub-muted);cursor:progress}
.hub-modal .hub-msg{font-size:12.5px;color:var(--hub-err);min-height:0}
.hub-modal .hub-msg:not(:empty){margin-top:6px}

/* сообщения в углу: ошибка висит, «готово» уходит само */
.hub-toasts{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:min(440px,calc(100vw - 40px))}
.hub-toast{display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 14px;border-radius:9px;border:1px solid var(--hub-line);
  background:var(--hub-panel);color:var(--hub-ink);box-shadow:var(--hub-shadow);font:13.5px/1.45 "Segoe UI",system-ui,sans-serif}
.hub-toast svg{flex:none;margin-top:2px}
.hub-toast span{flex:1 1 auto}
.hub-toast.error{border-color:var(--hub-err-line);background:var(--hub-err-soft);color:var(--hub-err)}
.hub-toast.ok svg{color:var(--hub-accent)}
.hub-toast button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;padding:0 4px}
.hub-toast .hub-toast-act{font-weight:600;text-decoration:underline;white-space:nowrap}
.hub-toast .hub-toast-x{opacity:.75;line-height:0;padding:2px}
.hub-toast .hub-toast-x:hover{opacity:1}

@media (max-width:760px){
  body.hub-body,body.hub-body.hub-compact{grid-template-columns:minmax(0,1fr)}
  .hub-nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px;border-right:0;border-bottom:1px solid var(--hub-line)}
  .hub-brand{padding:0 8px 0 0}
  .hub-sec,.hub-grow,.hub-label,.hub-who{display:none}
  .hub-item{padding:6px 8px}
  .hub-me{border-top:0;margin:0 0 0 auto;padding:0;flex-wrap:nowrap}
  .hub-me .hub-acts{flex:none;padding-left:0}
}