/* Оболочка приложения: вход, верхняя панель, навигация, статус связи, уведомления. Владелец — T0. */
html,body{height:100%}
body{overflow:hidden}
/* #root должен иметь высоту окна: иначе height:100% у вложенных блоков «растягивается» по содержимому,
   внутренние области прокрутки (.viewroot, .admbody) не работают, а body с overflow:hidden обрезает низ страницы. */
#root{height:100%; height:100dvh}
.app{height:100%; display:flex; flex-direction:column}
.topbar{flex:none; min-width:0; overflow:hidden; gap:12px}
.topbar>*{flex-shrink:0}
.topbar .flex1{flex:1 1 0; min-width:0}
.topbar .brand .name{font-weight:800; font-size:17px}
.topbar .section{font-size:16px; font-weight:700; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex-shrink:1; min-width:0; padding-left:12px; border-left:1px solid var(--edge)}
.burger{font-size:20px; line-height:1; padding:8px 12px}

/* Выдвижное меню разделов */
.drawer-ov{position:fixed; inset:0; z-index:40; background:rgba(15,11,8,.55)}
.drawer{position:fixed; top:0; left:0; bottom:0; z-index:41; width:min(300px,86vw); background:var(--panel);
  border-right:1px solid var(--edge); box-shadow:4px 0 24px rgba(0,0,0,.3); display:flex; flex-direction:column;
  overflow-y:auto; animation:drawer-in .16s ease}
.drawer[hidden],.drawer-ov[hidden]{display:none}
@keyframes drawer-in{from{transform:translateX(-12px); opacity:.6} to{transform:none; opacity:1}}
.drawer-head{padding:18px 18px 14px; border-bottom:1px solid var(--edge); display:flex; flex-direction:column; gap:3px}
.drawer-head b{font-size:16px; color:var(--cream)}
.drawer-head span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.nav{display:flex; flex-direction:column; gap:4px; padding:10px}
.nav a{color:var(--cream); text-decoration:none; border-radius:var(--radius); padding:13px 14px; font-size:16px; font-weight:700}
.nav a:hover,.nav a:focus-visible{background:var(--inset)}
.nav a.on{background:var(--accent); color:var(--accent-ink)}
#view{flex:1; min-height:0; overflow:hidden; position:relative}
.appfoot{flex:none; padding:3px 16px; font-size:11px; line-height:16px; color:var(--dim); border-top:1px solid var(--edge); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.login .appver{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:11px; color:var(--dim)}
@media print{.appfoot,.login .appver{display:none}}
#view>.viewroot{height:100%; overflow-y:auto}
.conn{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); white-space:nowrap}
.conn i{width:10px; height:10px; border-radius:50%; background:var(--ok); display:inline-block}
.conn[data-state="offline"] i{background:var(--late); animation:blink 1s infinite}
.conn[data-state="offline"]{color:var(--late); font-weight:700}
@keyframes blink{50%{opacity:.3}}
.usermenu{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--dim)}
.usermenu b{color:var(--cream)}

.login{position:relative; height:100%; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg)}
.login form{width:min(380px,100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:14px}
.login h1{font-size:22px; font-weight:800}
.login .sub{color:var(--dim); font-size:14px; margin-top:-8px}
.login .err{color:var(--late); font-size:14px; min-height:20px}
.login .solid{width:100%}
.login .remember{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--dim)}
.login .remember input{width:18px; height:18px}

.toasts{position:fixed; right:16px; bottom:16px; z-index:70; display:flex; flex-direction:column; gap:8px; max-width:min(420px,92vw)}
.toast{background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left-width:1px; border-radius:var(--radius);
  padding:12px 14px; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.25); animation:rise .2s ease}
.toast.error{border-color:var(--late)}
.toast.ok{border-color:var(--ok)}
.stub{padding:40px; color:var(--dim); text-align:center; font-size:16px}
.badge.src-halar{background:var(--halar); color:#333333}
.badge.src-gandpie{background:var(--gandpie); color:#fff}
.badge.src-telegram{background:var(--tg); color:#fff}
.badge.src-email{background:var(--mail); color:#fff}
.badge.src-manual{background:#6b6b6b; color:#fff}
/* Шапка сжимается без горизонтальной прокрутки: сначала прячутся подписи, потом второстепенное. */
@media (max-width:1100px){.topbar .lbl,.usermenu .uname{display:none}}
@media (max-width:860px){.topbar .brand .sub,.conn>span{display:none}}
@media (max-width:640px){.topbar{gap:8px; padding:0 10px}.topbar .brand,.topbar .clock{display:none}.topbar .section{border-left:0; padding-left:0}}