/* ------------------------------------------------------------------------
   rustat cam — дизайн-система веб-морд камеры и сервера.

   Приборная панель в духе веб-морды Netcraze Hopper: узкая навигационная рама,
   белые панели с капсовыми заголовками, таблицы «подпись — значение», сегментные
   шкалы. Палитра рустатовская (нейтрали n0..n10, синий p3/p4, красный red3),
   шрифт Roboto — тот же, что у Hopper.

   ⚠️ Основная тема СВЕТЛАЯ. Тёмная идёт следом за системной настройкой и не
   является «настоящей»: на ней легко потерять контраст, поэтому каждый цвет в ней
   переопределяется явно, а не наследуется.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/Roboto-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/Roboto-Bold.woff2') format('woff2');
}

:root {
  --n0:  #FFFFFF; --n1: #F7F9FA; --n2: #EBEEF0; --n3: #E3E6E8;
  --n4:  #D7DBDE; --n5: #CDD1D4; --n6: #ADB0B2; --n7: #8F9294;
  --n8:  #6F7173; --n9: #454747; --n10: #313233;
  --p1: #EBF2F7; --p2: #70A4C9; --p3: #4086B8; --p4: #196BA6; --p5: #0D5385;
  --red3: #F24949; --red4: #E50000;
  --green: #1F9D55; --amber: #C8880D;

  --bg:      var(--n1);
  --rail:    var(--n0);
  --panel:   var(--n0);
  --panel-2: var(--n1);
  --line:    var(--n3);
  --line-2:  var(--n4);

  --t-hi:   var(--n10);      /* значения, заголовки */
  --t:      var(--n9);       /* основной текст */
  --t-dim:  var(--n8);       /* подписи */
  --t-mute: var(--n7);       /* служебное */

  --acc:    var(--p3);
  --acc-2:  var(--p4);
  --ok:     var(--green);
  --warn:   var(--amber);
  --bad:    var(--red3);

  --sh:   0 0 20px rgba(50, 51, 51, .05);
  --sh-2: 0 2px 10px rgba(50, 51, 51, .09);
  --r: 10px; --r-s: 6px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #10171D;
    --rail:    #0C1217;
    --panel:   #18212A;
    --panel-2: #1E2833;
    --line:    #27333E;
    --line-2:  #3A4753;

    /* ⚠️ На тёмной теме текст раньше сливался с фоном — держим высокий контраст:
       значения почти белые, подписи не темнее #9AA5AE. */
    --t-hi:   #F4F7F9;
    --t:      #D4DAE0;
    --t-dim:  #9AA5AE;
    --t-mute: #7C8892;

    --acc:    #4E9AD1;
    --acc-2:  #7FB9E4;
    --ok:     #4ECB7B;
    --warn:   #E0B341;
    --bad:    #FF6B6B;

    --sh:   none;
    --sh-2: none;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* ⚠️ Свой display у класса перебивает браузерное [hidden] — гасим жёстко и один раз. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--t);
  font: 13px/1.45 'Roboto', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; border: 0; background: none; }
button { cursor: pointer; }
a { color: var(--acc); text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- каркас */
.app { display: grid; grid-template-columns: 56px 1fr; height: 100%; }

.rail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px;
}
.rail button {
  width: 56px; height: 48px;
  display: grid; place-items: center; color: var(--t-mute);
  position: relative;
  transition: color .15s, background-color .15s;
}
.rail button:hover { color: var(--t-hi); background: var(--n1); }
.rail button.on { color: var(--acc); background: var(--p1); }
/* активный раздел отмечен полосой слева, как в Hopper */
.rail button.on::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
                          width: 3px; border-radius: 0 2px 2px 0; background: var(--acc); }
.rail .sp { flex: 1; }
@media (prefers-color-scheme: dark) {
  .rail button:hover { background: var(--panel); }
  .rail button.on { background: rgba(78,154,209,.16); }
}

.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.top {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--p5); }
.brand svg { height: 15px; width: auto; }
.brand b { font-weight: 700; letter-spacing: .16em; font-size: 11px; text-transform: uppercase;
           color: var(--t-hi); }
@media (prefers-color-scheme: dark) { .brand { color: var(--acc-2); } }
.top .sp { flex: 1; }
.top .meta { font-size: 12px; color: var(--t-dim); }

.view { flex: 1; overflow: auto; padding: 16px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); align-items: start; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; }
.c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 1100px) { .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; } }

/* ----------------------------------------------------------------- панель */
.p {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
}
.p > h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-hi);
  padding: 13px 16px 11px;
  display: flex; align-items: center; gap: 10px;
}
.p > h2 .sp { flex: 1; }
.p .body { padding: 0 16px 16px; }
.p .body.flush { padding: 0; }

/* --------------------------------------------------------- строки данных */
.rows { display: grid; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.rows.boxed { border: 1px solid var(--line); border-radius: var(--r-s); }
.rows.boxed .row { padding: 9px 12px; }
.row .k { color: var(--t-dim); }
.row .sp { flex: 1; }
.row .v { color: var(--t-hi); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- сегментная шкала */
/* Делениями, а не сплошной заливкой: уровень читается боковым зрением. */
.meter { display: flex; gap: 2px; height: 8px; }
.meter i { flex: 1; background: var(--n3); border-radius: 1px; transition: background-color .2s; }
.meter i.on { background: var(--acc); }
.meter i.on.w { background: var(--warn); }
.meter i.on.b { background: var(--bad); }
@media (prefers-color-scheme: dark) { .meter i { background: var(--line-2); } }

.cores { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.core { display: grid; gap: 5px; justify-items: center; }
.core .bar { width: 100%; height: 38px; background: var(--n2); border-radius: 3px;
             position: relative; overflow: hidden; }
.core .bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--acc);
               transition: height .25s var(--ease); }
.core .bar i.w { background: var(--warn); }
.core .bar i.b { background: var(--bad); }
.core span { font-size: 10px; color: var(--t-mute); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .core .bar { background: var(--panel-2); } }

/* ------------------------------------------------------------- статусы */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--n2); color: var(--t-dim);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok  { color: var(--green); background: rgba(31,157,85,.1);  border-color: rgba(31,157,85,.3); }
.pill.rec { color: var(--red4);  background: rgba(242,73,73,.1);  border-color: rgba(242,73,73,.32); }
.pill.rec::before { animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (prefers-color-scheme: dark) {
  .pill { background: var(--panel-2); }
  .pill.ok { color: var(--ok); background: rgba(78,203,123,.12); }
  .pill.rec { color: var(--bad); background: rgba(255,107,107,.14); }
}

/* ------------------------------------------------------------- кнопки */
.btn {
  padding: 9px 15px; border-radius: var(--r-s);
  background: var(--n0); color: var(--t-hi);
  border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 700;
  transition: background-color .15s, border-color .15s, transform .12s var(--ease);
}
.btn:hover:not(:disabled) { background: var(--n1); border-color: var(--n6); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.wide { width: 100%; }
.btn.go   { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.go:hover:not(:disabled) { background: var(--acc-2); border-color: var(--acc-2); }
.btn.stop { background: var(--red3); border-color: var(--red3); color: #fff; }
.btn.stop:hover:not(:disabled) { background: var(--red4); border-color: var(--red4); }
@media (prefers-color-scheme: dark) {
  .btn { background: var(--panel-2); }
  .btn:hover:not(:disabled) { background: #26313C; border-color: #47555F; }
  .btn.go:hover:not(:disabled) { background: #5EA8DC; }
}

.seg { display: inline-flex; background: var(--n2); border-radius: var(--r-s);
       padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg button {
  padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 700;
  color: var(--t-dim); transition: background-color .15s, color .15s;
}
.seg button:hover { color: var(--t-hi); }
.seg button.on { background: var(--n0); color: var(--acc-2); box-shadow: var(--sh-2); }
.seg.dense button { padding: 5px 10px; font-size: 12px; }
@media (prefers-color-scheme: dark) {
  .seg { background: var(--panel-2); }
  .seg button.on { background: var(--acc); color: #fff; }
}

.field { display: flex; align-items: center; gap: 8px; }
.field input {
  width: 88px; padding: 7px 10px; border-radius: var(--r-s);
  background: var(--n0); border: 1px solid var(--line-2);
  color: var(--t-hi); font-variant-numeric: tabular-nums;
}
.field input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--p1); }
.field .unit { font-size: 12px; color: var(--t-mute); }
@media (prefers-color-scheme: dark) {
  .field input { background: var(--panel-2); }
  .field input:focus { box-shadow: 0 0 0 3px rgba(78,154,209,.2); }
}

/* --------------------------------------------------------------- видео */
.stage { background: #0B0F12; border-radius: var(--r-s); overflow: hidden; position: relative;
         aspect-ratio: 3.39 / 1; display: grid; place-items: center; }
.stage video, .stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage .idle { position: absolute; inset: 0; display: grid; place-items: center;
               color: #8A949C; font-size: 13px; }
.stage .tag { position: absolute; top: 10px; left: 10px; }

/* -------------------------------------------------------------- список */
.list { display: grid; }
.item { padding: 11px 16px; display: flex; align-items: center; gap: 12px;
        border-bottom: 1px solid var(--line); transition: background-color .15s; }
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--n1); }
.item.on { background: var(--p1); }
.item .t { color: var(--t-hi); font-size: 13px; }
.item .s { font-size: 12px; color: var(--t-mute); font-variant-numeric: tabular-nums; }
.item .sp { flex: 1; }
@media (prefers-color-scheme: dark) {
  .item:hover { background: var(--panel-2); }
  .item.on { background: rgba(78,154,209,.14); }
}

.icon-btn { width: 32px; height: 32px; border-radius: var(--r-s); display: grid; place-items: center;
            color: var(--t-mute); transition: color .15s, background-color .15s; }
.icon-btn:hover { color: var(--t-hi); background: var(--n2); }
.icon-btn.bad:hover { color: #fff; background: var(--red3); }

.empty { padding: 26px 16px; text-align: center; color: var(--t-mute); font-size: 13px; }

/* --------------------------------------------------------------- тост */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 14px);
  background: var(--n10); color: var(--n0);
  padding: 10px 18px; border-radius: 20px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
  box-shadow: var(--sh-2); z-index: 50;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--red4); }
@media (prefers-color-scheme: dark) {
  .toast { background: var(--panel-2); color: var(--t-hi); border: 1px solid var(--line-2); }
}