/* Интерфейс дежурной смены. Тёмная и светлая темы переключаются
   атрибутом на body — как требует задание. */
*{box-sizing:border-box;margin:0}
:root{
  --a:#2f81f7;--ok:#2dd4a7;--warn:#f5a524;--err:#ff6b6b;--nodata:#8b95a7;
  --ease:cubic-bezier(.32,.72,0,1);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
body[data-theme=dark]{
  --bg:#080b10;--bg2:#0f141c;--bg3:#18202b;--fg:#eef2f8;--mut:#8b95a7;
  --line:rgba(255,255,255,.08);--glass:rgba(15,20,28,.82);
  --shadow:0 18px 46px -26px rgba(0,0,0,.9);--shadow-s:0 2px 10px rgba(0,0,0,.35);
  --glow:radial-gradient(1100px 420px at 12% -12%,rgba(47,129,247,.11),transparent 70%);
}
body[data-theme=light]{
  --bg:#f2f5f9;--bg2:#fff;--bg3:#eaeef5;--fg:#0f1720;--mut:#5a6675;
  --line:rgba(15,23,32,.10);--glass:rgba(255,255,255,.85);
  --shadow:0 16px 40px -28px rgba(15,23,32,.45);--shadow-s:0 1px 4px rgba(15,23,32,.08);
  --glow:radial-gradient(1100px 420px at 12% -12%,rgba(47,129,247,.09),transparent 70%);
}
body::before{content:"";position:fixed;inset:0;background:var(--glow);pointer-events:none;z-index:0}
main,.top{position:relative;z-index:1}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);line-height:1.5;font-size:15px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--a);text-decoration:none}

.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-wrap:wrap;
  gap:12px 20px;padding:0 20px;min-height:62px;background:var(--glass);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.logo{font-weight:800;letter-spacing:-.025em;white-space:nowrap;font-size:15.5px}
.logo i{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--mut);letter-spacing:.02em}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs{position:relative;min-width:0;flex:0 1 auto;background:var(--bg3);border:1px solid var(--line);border-radius:13px;padding:3px;gap:2px}
.tabs button{position:relative;z-index:1;padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
  color:var(--mut);white-space:nowrap;transition:color .25s var(--ease),transform .12s var(--ease)}
.tabs button:hover{color:var(--fg)}
.tabs button:active{transform:scale(.96)}
.tabs button.on{color:var(--fg)}
.tabs .pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:10px;background:var(--bg2);
  box-shadow:var(--shadow-s);transition:transform .4s var(--ease),width .4s var(--ease);z-index:0;opacity:0}
.top__r{display:flex;align-items:center;gap:12px;margin-left:auto}
.age{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap}
/* переключатель темы: две кнопки с едущей плашкой, как в системных настройках */
.theme{position:relative;display:inline-flex;background:var(--bg3);border:1px solid var(--line);
  border-radius:11px;padding:3px}
.theme button{position:relative;z-index:1;width:34px;height:28px;display:grid;place-items:center;
  border-radius:8px;color:var(--mut);transition:color .25s var(--ease)}
.theme button[aria-pressed=true]{color:var(--fg)}
.theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .pill{position:absolute;top:3px;left:3px;width:34px;height:28px;border-radius:8px;background:var(--bg2);
  box-shadow:var(--shadow-s);transition:transform .38s var(--ease);z-index:0}
body[data-theme=light] .theme .pill{transform:translateX(34px)}

main{padding:20px;max-width:1500px;margin:0 auto;min-width:0}
h2{font-size:19px;font-weight:750;letter-spacing:-.01em;margin-bottom:12px}
.muted{color:var(--mut)}
.mono{font-family:var(--mono)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpis>*{min-width:0}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:17px;padding:17px 18px;
  box-shadow:var(--shadow-s);transition:transform .25s var(--ease),box-shadow .25s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi b{display:block;font-size:31px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:12.5px;color:var(--mut);margin-top:7px}
.kpi.ok b{color:var(--ok)}.kpi.warn b{color:var(--warn)}.kpi.err b{color:var(--err)}.kpi.nodata b{color:var(--nodata)}

.cols{display:grid;grid-template-columns:290px 1fr;gap:16px;margin-top:16px;align-items:start}
/* без этого широкая таблица растягивает колонку грида и ломает мобильную вёрстку */
.cols>*{min-width:0}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
@media(max-width:880px){
  .top{padding:9px 14px 10px}
  .tabs{order:3;flex:0 0 100%;width:100%}
}
@media(max-width:640px){
  main{padding:14px}
  .logo i{display:none}
  .kpi b{font-size:24px}
  .drawer__panel{padding:16px}
}

.panel{background:var(--bg2);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-s)}
.panel__h{padding:14px 16px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mut);display:flex;justify-content:space-between;gap:10px}
.panel__b{padding:6px 0}

.reg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;
  font-size:14px;cursor:pointer;transition:background .15s}
.reg:hover{background:var(--bg3)}
.reg s{text-decoration:none;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle}
.h-ok{color:var(--ok)}.h-degraded{color:var(--warn)}.h-alarm{color:var(--err)}.h-nodata{color:var(--nodata)}
.bg-ok{background:var(--ok)}.bg-degraded{background:var(--warn)}.bg-alarm{background:var(--err)}.bg-nodata{background:var(--nodata)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-weight:700;
  position:sticky;top:0;background:var(--bg2);z-index:1}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--bg3)}
tbody tr td:first-child{position:relative}
tbody tr:hover td:first-child::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:var(--a)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.tablewrap{overflow:auto;max-height:70vh}

.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:7px;
  border:1px solid var(--line);color:var(--mut)}
.chip.alarm{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent)}
.chip.degraded{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:17px;padding:18px;box-shadow:var(--shadow-s);
  transition:transform .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-2px);border-color:rgba(127,140,160,.32)}
.card h3{font-size:15px;font-weight:700}
.card p{font-size:13px;color:var(--mut);margin-top:6px}

.chart{width:100%;height:150px;display:block}
.chart .line{fill:none;stroke:var(--a);stroke-width:1.8}
.chart .area{fill:color-mix(in srgb,var(--a) 14%,transparent)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart text{fill:var(--mut);font-size:10px;font-family:var(--mono)}

.ev{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13.5px;align-items:center}
.ev:last-child{border-bottom:0}
.ev s{text-decoration:none;font-family:var(--mono);font-size:12px;color:var(--mut)}

.drawer[hidden]{display:none}
.drawer{position:fixed;inset:0;z-index:60}
.drawer__bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(760px,100%);background:var(--bg);
  border-left:1px solid var(--line);overflow-y:auto;padding:22px;animation:slide .32s var(--ease)}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer__close{position:absolute;top:16px;right:18px;font-size:22px;color:var(--mut)}

/* видеостена: только состояние, читается с пяти метров */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.wall__cell{border-radius:14px;padding:16px;border:1px solid var(--line);background:var(--bg2)}
.wall__cell b{display:block;font-size:16px;font-weight:750;letter-spacing:-.01em}
.wall__cell span{display:block;font-size:12px;color:var(--mut);margin-top:4px}
.wall__cell.s-alarm{background:color-mix(in srgb,var(--err) 22%,var(--bg2));border-color:var(--err)}
.wall__cell.s-degraded{background:color-mix(in srgb,var(--warn) 20%,var(--bg2));border-color:var(--warn)}
.wall__cell.s-nodata{background:color-mix(in srgb,var(--nodata) 20%,var(--bg2));border-color:var(--nodata)}
body.wallmode .top .tabs{display:none}
.wallexit{grid-column:1/-1;justify-self:start;font-size:13px;font-weight:600;color:var(--mut);
  padding:8px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:4px}
.wallexit:hover{color:var(--fg);border-color:var(--fg)}

/* подсказка: наводишь на знак вопроса — объясняет, что означает показатель */
.hint{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--line);color:var(--mut);font-size:9.5px;font-weight:700;cursor:help;
  margin-left:6px;vertical-align:middle;transition:.2s;flex:0 0 auto;user-select:none;font-style:normal}
.hint:hover,.hint.on{color:var(--fg);border-color:var(--fg)}
/* подсказка позиционируется от окна, а не от родителя: так её не режет
   ни панель со скруглением, ни прокрутка таблицы, и она не растягивает страницу */
.hint::after{content:attr(data-hint);position:fixed;left:var(--hl,-999px);top:var(--ht,0);
  transform:translate(-50%,-100%) translateY(5px);width:max-content;max-width:min(290px,calc(100vw - 26px));
  padding:10px 13px;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);font-size:12.5px;font-weight:400;line-height:1.5;text-align:left;
  letter-spacing:normal;text-transform:none;white-space:normal;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .26s var(--ease);z-index:80}
.hint::before{content:"";position:fixed;left:var(--hcx,-999px);top:var(--hcy,0);width:9px;height:9px;
  background:var(--bg2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:translate(-50%,-50%) rotate(45deg);opacity:0;pointer-events:none;transition:opacity .18s;z-index:81}
.hint.below::after{transform:translate(-50%,0) translateY(-5px)}
.hint.below::before{border:0;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.hint:hover::after,.hint.on::after{opacity:1;transform:translate(-50%,-100%)}
.hint.below:hover::after,.hint.below.on::after{opacity:1;transform:translate(-50%,0)}
.hint:hover::before,.hint.on::before{opacity:1}

.empty{padding:34px 16px;text-align:center;color:var(--mut);font-size:14px}
.bar{height:6px;border-radius:99px;background:var(--bg3);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--a)}