/* ПерфТест — контур. Токены и метрики — по референсу страниц 1С (Страницы_1С_референс.html).
   Компоненты, специфичные для 1С (карточки сценариев, кольцо прогресса, фильтры-чипы),
   не переносились: им нет источника данных на сайте. */

html{
  --pf-bg:#FBF8FF; --pf-sunken:#F7F3FF; --pf-surface:#FFFFFF; --pf-raised:#F3EEFC;
  --pf-line:#E6E1F0; --pf-line-strong:#9C8AC6;
  --pf-fg:#1B1A21; --pf-fg-2:#45424F; --pf-fg-3:#6B6879;
  --pf-accent:#6A4CF6; --pf-accent-bg:#EDE8FF; --pf-on-accent:#FFFFFF;
  --pf-ok:#0F7A4F; --pf-ok-bg:#E2F5EC; --pf-ok-line:#0F7A4F;
  --pf-warn:#8A5A00; --pf-warn-bg:#FDF3E0;
  --pf-bad:#B3261E; --pf-bad-bg:#FBE6E5; --pf-bad-line:#F0C9C5;
  --pf-info:#1F5FA8; --pf-info-bg:#E3EFFC;
  --pf-hover:#F6F2FF; --pf-side-bg:#FFFFFF; --pf-side-fg:#3A3A45;
  --pf-scrim:rgba(27,26,33,.42);
  --pf-shadow-tile:0 12px 26px -20px rgba(0,0,0,.55);
  --pf-shadow-bar:0 8px 20px rgba(6,7,10,.18);
}
/* тёмная тема — значения из референса (были подобраны вручную, теперь эталонные) */
html.pf-dark{
  --pf-bg:#292D36; --pf-sunken:#232730; --pf-surface:#363A44; --pf-raised:#40444E;
  --pf-line:#4B4F59; --pf-line-strong:#A8ACB8;
  --pf-fg:#EDF0F7; --pf-fg-2:#B6BAC5; --pf-fg-3:#ACB0BC;
  --pf-accent:#C0A4FF; --pf-accent-bg:#3E3466; --pf-on-accent:#171226;
  --pf-ok:#63E3AB; --pf-ok-bg:#2B4A3D; --pf-ok-line:#3ACB93;
  --pf-warn:#F5C273; --pf-warn-bg:#4A3D26;
  --pf-bad:#FF9689; --pf-bad-bg:#4E3036; --pf-bad-line:#6E444A;
  --pf-info:#94C6FF; --pf-info-bg:#2E3E5C;
  --pf-hover:#484D56; --pf-side-bg:#20242C; --pf-side-fg:#C2C6D2;
  --pf-scrim:rgba(0,0,0,.6);
  --pf-shadow-tile:0 12px 26px -6px rgba(0,0,0,.55);
  --pf-shadow-bar:0 10px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--pf-bg); color:var(--pf-fg);
  font:14px/1.5 'Segoe UI',Roboto,Arial,sans-serif;
  padding-left:272px; padding-bottom:34px; min-height:100vh; overflow-x:hidden;
}
a{color:var(--pf-accent);text-decoration:none}
.mono{font-family:'Cascadia Mono',Consolas,'Courier New',monospace}

/* ---------- боковое меню ---------- */
.side{
  position:fixed; left:0; top:0; bottom:0; width:272px; z-index:50;
  background:var(--pf-side-bg); color:var(--pf-side-fg);
  padding:16px 14px; box-sizing:border-box;
  overflow-y:auto; overflow-x:hidden;
  /* полосы прокрутки в панели не показываем: колесо/тач продолжают работать */
  scrollbar-width:none; -ms-overflow-style:none;
}
.side::-webkit-scrollbar{width:0;height:0}
.side > *{min-width:0}
.side .logo{display:flex;align-items:center;padding:8px 8px 16px}
.side .mark{width:36px;height:36px;margin-right:11px;flex:0 0 auto}
.side .mark svg{width:100%;height:100%;display:block}
.side .logo b{display:block;color:var(--pf-fg);font-size:15px;font-weight:600;letter-spacing:-.01em}
.side .logo span{display:block;margin-top:2px;font-size:11.5px;color:var(--pf-fg-3)}

/* кнопка сворачивания: фиксирована у края меню (не обрезается панелью) */
.nav-btn{
  position:fixed; top:12px; left:260px; width:24px; height:24px;
  border-radius:50%; background:var(--pf-raised); color:var(--pf-side-fg);
  border:1px solid var(--pf-line); cursor:pointer; padding:0; z-index:60;
  font:600 12px 'Segoe UI',Arial,sans-serif; line-height:20px;
  transition:background .04s,border-color .04s,left .18s;
}
body.pf-collapsed .nav-btn{left:48px}
.nav-btn:hover{background:var(--pf-hover);border-color:var(--pf-line-strong)}

.sec-h{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font:600 12px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pf-fg-2); padding:14px 12px 8px; border:0; background:none; cursor:pointer; text-align:left;
  transition:color .04s;
}
.sec-h:hover{color:var(--pf-fg)}
.sec-h .chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform .15s}
/* Свёрнутая секция прячет ВСЁ, кроме своего заголовка: раньше правило было
   .sec.closed .nav-i — и секция «Сервер» (внутри плитка .side-stand, а не ссылки)
   не сворачивалась: класс переключался, а скрывать было нечего. */
.sec.closed > :not(.sec-h){display:none}
.sec.closed .chev{transform:rotate(-45deg)}

.nav-i{
  display:flex;align-items:center;gap:10px;
  color:var(--pf-side-fg);font-size:14px;line-height:20px;padding:8px 12px;
  border-radius:8px;margin-bottom:2px;
  transition:background .04s,color .04s;
}
.nav-i:hover{background:var(--pf-hover);color:var(--pf-fg)}
.nav-i.active{background:var(--pf-accent-bg);color:var(--pf-accent);box-shadow:inset 2px 0 0 var(--pf-accent)}
.nav-i svg{width:16px;height:16px;flex:0 0 auto}
.nav-i .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.side-stand{
  margin:10px 2px 0;padding:12px 12px 10px;border:1px solid var(--pf-line);border-radius:8px;
  background:var(--pf-sunken);
}
.ss-h{font-size:12px;font-weight:600;color:var(--pf-fg-2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ss-h .ss-dot{width:7px;height:7px;border-radius:50%;background:var(--pf-fg-3)}
.ss-h.ok .ss-dot{background:var(--pf-ok)}
.ss-h.warn .ss-dot{background:var(--pf-warn)}
.ss-h.bad .ss-dot{background:var(--pf-bad)}
.ss-r{font-size:12px;line-height:14px;padding:3px 0}
.ss-r span{display:block;color:var(--pf-fg-3);text-transform:uppercase;letter-spacing:.04em;font-size:9.5px}
.ss-r b{display:block;color:var(--pf-side-fg);font-weight:600;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-r b.warn{color:var(--pf-warn)} .ss-r b.bad{color:var(--pf-bad)} .ss-r b.ok{color:var(--pf-ok)}
.side-foot{margin-top:16px;border-top:1px solid var(--pf-sunken);padding:12px 12px 4px;font-size:12px;color:var(--pf-fg-2);overflow:hidden}
.side-foot div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pf-fg-3);margin-right:6px}
.side-foot .dot.ok{background:var(--pf-ok)} .side-foot .dot.warn{background:var(--pf-warn)} .side-foot .dot.bad{background:var(--pf-bad)}

body.pf-collapsed{padding-left:76px}
body.pf-collapsed .side{width:60px;padding:16px 8px}
body.pf-collapsed .logo{justify-content:center;padding:6px 0 14px}
body.pf-collapsed .logo-t,body.pf-collapsed .sec-h,body.pf-collapsed .side-stand,body.pf-collapsed .side-foot{display:none}
body.pf-collapsed .nav-i{width:34px;height:34px;padding:0;margin:0 auto 6px;justify-content:center;box-shadow:none}
body.pf-collapsed .nav-i .nm{display:none}

/* ---------- шапка ---------- */
.bar{position:sticky;top:0;z-index:40;background:var(--pf-surface);border-bottom:1px solid var(--pf-line)}
.bar-in{display:flex;align-items:center;gap:14px;padding:10px 20px;flex-wrap:wrap}
.crumbs{display:flex;align-items:baseline;gap:10px;min-width:0}
.crumbs b{font-size:15px;font-weight:600}
.crumbs .sub{font-size:12.5px;color:var(--pf-fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.upd{font-size:12px;color:var(--pf-fg-3)}
.btn{
  appearance:none;font:600 14px 'Segoe UI',Arial,sans-serif;
  border:1px solid var(--pf-line);background:var(--pf-raised);color:var(--pf-fg);
  border-radius:8px;padding:8px 12px;cursor:pointer;
  transition:background .04s,border-color .04s,color .04s;
}
.btn:hover:not(:disabled){background:var(--pf-hover);border-color:var(--pf-line-strong)}
.btn.primary{background:var(--pf-accent);border-color:var(--pf-accent);color:var(--pf-on-accent);font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--pf-accent);border-color:var(--pf-accent);filter:brightness(1.06)}
.btn.icon{padding:8px 10px}
.btn:disabled{opacity:.5;cursor:default}
.field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--pf-fg-3)}
.field input,.field select{
  border:1px solid var(--pf-line);border-radius:8px;background:var(--pf-surface);color:var(--pf-fg);
  padding:7px 9px;font:14px 'Segoe UI',Arial,sans-serif;min-width:120px;
}
.field input:focus,.field select:focus{outline:2px solid var(--pf-accent-bg);border-color:var(--pf-line-strong)}

/* ---------- контент ---------- */
.wrap{min-width:0}
.view{padding:16px 16px 40px;max-width:1500px;width:100%;margin:0 auto}
h1{font-size:20px;margin:0 0 4px;font-weight:600}
.lead{margin:0 0 16px;color:var(--pf-fg-2);max-width:110ch}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:14px}
.tile{
  grid-column:span 3;background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:16px;padding:16px;min-width:0;position:relative;
  transition:background .04s,border-color .04s,box-shadow .04s;
}
.tile:hover,.card:hover{border-color:var(--pf-line-strong);background:var(--pf-hover);box-shadow:var(--pf-shadow-tile)}
.tile.span-2{grid-column:span 2} .tile.span-3{grid-column:span 3}
.tile.span-4{grid-column:span 4} .tile.span-6{grid-column:span 6}
.tile.span-12{grid-column:span 12}
.lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pf-fg-2);font-weight:600;margin-bottom:4px}
.big{font-size:32px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin-top:8px;font-family:Consolas,'Courier New',monospace}
.big small{font-size:12px;font-weight:400;color:var(--pf-fg-3);font-family:'Segoe UI',Arial,sans-serif}
.sub{font-size:12px;color:var(--pf-fg-3);margin-top:3px}
.card{background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:16px;padding:16px;grid-column:span 12;min-width:0;transition:background .04s,border-color .04s,box-shadow .04s}
.card h2{font-size:16px;margin:0 0 10px;font-weight:600}
.card h2 .hint{font-weight:400;font-size:12px;color:var(--pf-fg-3);margin-left:8px}
.card.span-4{grid-column:span 4} .card.span-6{grid-column:span 6}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left}
td{padding:8px 12px;border-bottom:1px solid var(--pf-line);vertical-align:top;overflow-wrap:anywhere}
th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pf-fg-2);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--pf-line);overflow-wrap:anywhere}
tbody tr{transition:background .04s}
tbody tr:hover{background:var(--pf-raised)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{color:var(--pf-fg-2);font-size:14px;padding:12px 2px}

/* бейдж — как .badge в референсе: без рамки, фон raised, кегль 12/600 */
.chip{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:4px 8px;font-size:12px;font-weight:600;color:var(--pf-fg-2);
  background:var(--pf-raised);white-space:nowrap;
}
.chip.ok{background:var(--pf-ok-bg);color:var(--pf-ok)}
.chip.warn{background:var(--pf-warn-bg);color:var(--pf-warn)}
.chip.bad{background:var(--pf-bad-bg);color:var(--pf-bad)}
.chip.info{background:var(--pf-info-bg);color:var(--pf-info)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{color:var(--pf-ok)} .warn{color:var(--pf-warn)} .bad{color:var(--pf-bad)} .dim{color:var(--pf-fg-3)}
.banner{
  display:flex;gap:10px;align-items:flex-start;border:1px solid var(--pf-bad-line);background:var(--pf-bad-bg);
  color:var(--pf-bad);border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px;
}
.banner.info{border-color:var(--pf-line);background:var(--pf-info-bg);color:var(--pf-info)}
.bar-meter{height:7px;border-radius:999px;background:var(--pf-raised);overflow:hidden;margin-top:8px}
.bar-meter i{display:block;height:100%;background:var(--pf-accent);border-radius:999px}
.bar-meter i.ok{background:var(--pf-ok)} .bar-meter i.warn{background:var(--pf-warn)} .bar-meter i.bad{background:var(--pf-bad)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:14px;border-bottom:1px dashed var(--pf-line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--pf-fg-3)}

/* ---------- палитра команд (собственная реализация вместо 1С-овской) ---------- */
.scrim{position:fixed;left:0;top:0;right:0;bottom:0;background:var(--pf-scrim);z-index:90;padding-top:12vh}
.scrim[hidden]{display:none}
.pal{width:560px;max-width:92%;margin:0 auto;background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:12px;overflow:hidden;box-shadow:var(--pf-shadow-bar)}
.pal input{width:100%;box-sizing:border-box;border:0;background:transparent;color:var(--pf-fg);font:16px 'Segoe UI',Arial,sans-serif;padding:16px;border-bottom:1px solid var(--pf-line);outline:none}
.pal ul{list-style:none;margin:0;padding:6px;max-height:46vh;overflow:auto}
.pal li{padding:8px 12px;border-radius:8px;font-size:14px;cursor:pointer;color:var(--pf-fg-2);display:flex;justify-content:space-between;gap:12px}
.pal li .k{color:var(--pf-fg-3);font-size:12px}
.pal li.sel{background:var(--pf-accent-bg);color:var(--pf-fg)}
.pal .tip{font-size:12px;color:var(--pf-fg-2);padding:8px 16px;border-top:1px solid var(--pf-line)}
.pal-h{font-size:15px;font-weight:600;padding:14px 16px;border-bottom:1px solid var(--pf-line)}
.pal-body{padding:14px 16px;max-height:52vh;overflow:auto}
.pal-body .lead{max-width:none}
.pal-foot{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--pf-line)}
.pal-foot input{flex:1;min-width:120px;border:1px solid var(--pf-line);border-radius:8px;background:var(--pf-surface);color:var(--pf-fg);padding:8px 10px;font:14px 'Segoe UI',Arial,sans-serif;outline:none}
.pal-foot input:focus{border-color:var(--pf-line-strong);outline:2px solid var(--pf-accent-bg)}

/* ---------- нижняя строка ---------- */
.stat{
  position:fixed;left:272px;right:0;bottom:0;z-index:30;
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  background:var(--pf-surface);border-top:1px solid var(--pf-line);
  padding:8px 16px;font-size:14px;color:var(--pf-fg-2);
  overflow:hidden;
}
.stat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pf-collapsed .stat{left:60px}

@media (max-width:1100px){
  body{padding-left:0}
  .side{transform:translateX(-100%);transition:transform .18s}
  body.pf-open .side{transform:none}
  .nav-btn{left:8px}
  body.pf-open .nav-btn{left:260px}
  .bar-in{padding-left:44px}
  .stat{left:0;font-size:12px}
  .tile,.tile.span-2,.tile.span-3,.tile.span-4,.tile.span-6,.card.span-4,.card.span-6{grid-column:span 12}
  .big{font-size:26px}
}

/* очень узкое окно: второстепенные колонки скрываем , ширину колонок фиксируем,
   чтобы таблица не расширяла страницу и не появлялось горизонтальной прокрутки */
@media (max-width:760px){
  .opt{display:none}
  table{table-layout:fixed;width:100%}
  th,td{overflow-wrap:anywhere;hyphens:auto}
}