/* Раздел «Сервера, уведомления, обслуживание».
   Классы взяты из блоков <style> страниц nodes.php,
   notifications-list.php и dev-percent.php.

   Селекторы обёрнуты в .misc-nodes / .misc-notif / .misc-dev по двум
   причинам: в оригинале часть правил висела на голых thead/th/td/tbody,
   а часть имён (.table-scroll, .status-badge, .user-avatar, .muted)
   уже занята общими pages.css и admin.css.

   Раскладку задаёт общий слой (ui.css): шапка .page-head, .stats-grid со
   сводкой, разнокалиберная сетка .bento, пустые состояния и заглушки
   загрузки. Здесь — только специфика раздела. */

/* ===================== ШАПКА СТРАНИЦЫ ===================== */

/* Счётчик загруженного рядом с заголовком: фильтров в этих разделах нет,
   а значит нет и полосы инструментов, куда его обычно кладут. */
.misc-notif .head-meta{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums;
}
.misc-notif .head-meta i{ font-size:12px; opacity:.8 }

/* ================= /nodes — блок <style> из nodes.php ================= */

.misc-nodes .nodes-stats{ margin-bottom:14px }

/* Колонки сетки не сжимаются под содержимое сами: без min-width широкая
   таблица регионов растянула бы свою колонку и сломала пропорции.
   align-items:start — чтобы короткая сводка по регионам не растягивалась
   на всю высоту списка нод: под таблицей из трёх строк оставалось
   полэкрана пустоты. */
.misc-nodes .bento{ align-items:start }
.misc-nodes .bento > *{ min-width:0 }

.misc-nodes .nodes-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:15px;
}

.misc-nodes .nodes-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
/* Заголовок секции — 15px Roboto-Medium. Иконка в синем квадрате отсюда
   убрана: квадрат остаётся только у шапки страницы. */
.misc-nodes .nodes-card-title{
  font-size:15px;
  font-family:Roboto-Medium;
  display:flex;
  align-items:center;
  gap:9px;
}
.misc-nodes .nodes-card-title i{ color:var(--muted); font-size:14px; flex:none }
.misc-nodes .nodes-card-sub{
  font-size:12.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- карточки нод ---------- */

/* align-items:start здесь был ошибкой: у нод разное число строк в теле,
   и карточки в ряду получались разной длины. Ряд ровняем по самой
   высокой — grid-auto-rows:1fr плюс растяжка карточки на всю ячейку. */
.misc-nodes .node-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows:1fr;
}

/* Карточка ноды. Подъём на 2px при наведении убран: в сетке из полутора
   десятков карточек он превращал страницу в батут. Отзыв — фон и рамка. */
.misc-nodes .node-card{
  display:flex; flex-direction:column; gap:9px;
  padding:14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color var(--fast), background var(--fast);
}
.misc-nodes .node-card:hover{
  border-color:var(--border-strong); background:var(--surface-hover);
}

.misc-nodes .node-card-head{
  display:flex; align-items:flex-start; gap:10px;
}
.misc-nodes .node-card-head .status-pill{ margin-left:auto; flex:none }
.misc-nodes .node-card-id{ min-width:0 }
.misc-nodes .node-flag{ font-size:19px; line-height:1.2; flex:none }
.misc-nodes .node-name-code{
  font-family:Roboto-Medium; word-break:break-word;
}
.misc-nodes .node-name-desc{
  font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45;
}

.misc-nodes .node-card-addr{
  display:flex; align-items:center; gap:8px;
  color:var(--text-dim); font-size:12.5px;
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.misc-nodes .node-card-addr i{ color:var(--muted); font-size:12px; flex:none }
/* Порядковый номер строки из таблицы: в карточке он служебный, поэтому
   уходит вправо мелким шрифтом, а не открывает собой карточку. */
.misc-nodes .node-card-num{ margin-left:auto; color:var(--muted); font-size:11.5px; flex:none }

.misc-nodes .node-card-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13px;
}
.misc-nodes .node-card-key{ color:var(--muted); font-size:12.5px }

/* Индикатор состояния: точка того же цвета, что подпись. Пульсирующее
   кольцо у живой ноды убрано — это было свечение, да ещё и на каждой
   карточке сразу; состояние читается по цвету точки и подписи.
   Рамок у бейджей нет: цветная обводка вокруг цветной заливки того же
   тона выглядела второй границей. */
.misc-nodes .status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12.5px;
  border:0;
  white-space:nowrap;
}
.misc-nodes .status-pill::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:currentColor; flex:none;
}
.misc-nodes .status-pill.st-ok{ background:var(--good-soft); color:var(--good) }
.misc-nodes .status-pill.st-warn{ background:var(--warn-soft); color:var(--warn) }
.misc-nodes .status-pill.st-bad{ background:var(--bad-soft); color:var(--bad) }

.misc-nodes .traffic-top{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:12.5px;
}
.misc-nodes .traffic-val{ font-family:Roboto-Medium; font-variant-numeric:tabular-nums }
.misc-nodes .traffic-limit{ color:var(--muted); font-size:11.5px }

.misc-nodes .traffic-bar-track,
.misc-nodes .load-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:var(--surface-3);
  border:1px solid var(--border);
  overflow:hidden;
}
/* Заливка ровная и без свечения: градиент и ореол вокруг каждой полосы
   давали россыпь синего по всей сетке нод. */
.misc-nodes .traffic-bar-fill,
.misc-nodes .load-bar > span{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:var(--accent);
  transition:width .9s var(--ease);
}
/* Заполнение под потолок красится по смыслу, а не по акценту. */
.misc-nodes .traffic-bar-fill.is-warn,
.misc-nodes .load-bar > span.is-warn{ background:var(--warn) }
.misc-nodes .traffic-bar-fill.is-bad,
.misc-nodes .load-bar > span.is-bad{ background:var(--bad) }

/* Полоса загрузки в сводной таблице — та же шкала, но уже. */
.misc-nodes .load-bar{
  max-width:200px;
  margin-top:7px;
}

.misc-nodes .nodes-online{
  font-family:Roboto-Medium;
  font-variant-numeric:tabular-nums;
}

/* ---------- сводка по регионам ---------- */

.misc-nodes .nodes-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.misc-nodes .nodes-summary-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.misc-nodes .nodes-summary-table th,
.misc-nodes .nodes-summary-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  vertical-align:middle;
  text-align:left;
}
.misc-nodes .nodes-summary-table th{
  font-family:Roboto-Medium; font-weight:400;
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.025);
}
.misc-nodes .nodes-summary-table tbody tr{ transition:background var(--fast) }
.misc-nodes .nodes-summary-table tbody tr:hover{ background:rgba(255,255,255,.03) }
.misc-nodes .nodes-summary-table tbody tr:last-child td{ border-bottom:none }

.misc-nodes .nodes-summary-label{ font-family:Roboto-Medium }
.misc-nodes .nodes-summary-sub{
  font-size:12px;
  color:var(--muted);
  margin-left:7px;
}

.misc-nodes .nodes-region-name{
  display:flex;
  align-items:center;
  gap:10px;
}
.misc-nodes .nodes-region-name span.flag{
  font-size:19px;
  line-height:1;
}
.misc-nodes .nodes-region-name span.name{
  font-family:Roboto-Medium;
}
.misc-nodes .nodes-region-name span.servers{
  font-size:11.5px;
  color:var(--muted);
}

/* В узкой колонке сетки таблице регионов тесно: та же информация, но
   плотнее и с переносом названия региона. */
.misc-nodes .nodes-side .nodes-summary-table th,
.misc-nodes .nodes-side .nodes-summary-table td{ padding:10px; font-size:13px }
.misc-nodes .nodes-side .nodes-region-name{ flex-wrap:wrap; gap:4px 8px }
.misc-nodes .nodes-side .load-bar{ max-width:130px }

@media (max-width:520px){
  .misc-nodes .nodes-card{ padding:13px }
  .misc-nodes .node-grid{ grid-template-columns:1fr }
}

/* ======= /notifications-list — блок <style> из notifications-list.php ======= */

.misc-notif .block-wrap{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
/* max-height/overflow-y гасят общий .table-scroll из pages.css:
   там таблица зажата в 360px со своей прокруткой, здесь она должна
   тянуться вниз — иначе не сработает подгрузка по скроллу страницы. */
.misc-notif .table-scroll{
  overflow-x:auto; overflow-y:visible; max-height:none; border-radius:inherit;
}
.misc-notif table.state-table,
.misc-notif table.nodes-table{
  width:100%; border-collapse:collapse; table-layout:auto; font-size:14px; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.misc-notif table.state-table{ min-width:820px }
.misc-notif table.nodes-table{ min-width:820px }
.misc-notif thead{ background:rgba(255,255,255,.025) }
.misc-notif th{
  font-family:Roboto-Medium; font-weight:400;
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}
.misc-notif th,
.misc-notif td{
  padding:12px 14px; text-align:center; vertical-align:middle;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.misc-notif tbody tr{ background:transparent; transition:background var(--fast) }
.misc-notif tbody tr:hover{ background:rgba(255,255,255,.03) }
.misc-notif tbody tr:not(:last-child){ border-bottom:1px solid var(--border) }
/* Заглушка не должна вести себя как строка данных: ни подсветки, ни
   отступов ячейки — их несёт сам блок пустого состояния. */
.misc-notif tbody tr.row-empty:hover{ background:transparent }
.misc-notif tbody tr.row-empty td{ padding:0; white-space:normal }

/* font-weight сбрасывает .status-badge{font-weight:700} из pages.css:
   в оригинале бейдж был обычной насыщенности. */
.misc-notif .status-badge{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:92px; height:26px; padding:0 12px; border-radius:999px;
  font-size:12.5px; font-weight:400;
  border:0;
}
.misc-notif .status-badge::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none;
}
.misc-notif .status-ok{ color:var(--good); background:var(--good-soft) }
.misc-notif .status-bad{ color:var(--bad); background:var(--bad-soft) }
.misc-notif .util-ok{ color:var(--good) }
.misc-notif .util-warn{ color:var(--warn) }
.misc-notif .util-bad{ color:var(--bad) }

/* background-color гасит заливку общего .user-avatar из pages.css —
   там аватар карточки пользователя, 96px с фоном-подложкой. */
.misc-notif .user-avatar{
  width:34px; height:34px; background-color:transparent;
  background-size:cover; background-position:center;
  border-radius:50%; margin:0 auto 8px;
  box-shadow:0 0 0 1px var(--border);
  transition:box-shadow var(--fast);
}
.misc-notif tbody tr:hover .user-avatar{ box-shadow:0 0 0 1px var(--border-strong) }
.misc-notif .link-order-table{
  color:var(--accent); text-decoration:none; transition:color var(--fast);
}
.misc-notif .link-order-table:hover{ color:var(--accent-hover); text-decoration:underline }
.misc-notif .btn-copy{ margin-left:5px; opacity:.6 }

/* Заглушка догрузки повторяет ширины колонок таблицы. */
.misc-notif .skeleton-rows{ border-top:1px solid var(--border) }

@media(max-width: 520px){
  .misc-notif th,
  .misc-notif td{ padding:11px 12px; font-size:13px }
}

/* ============ /dev-percent — блок <style> из dev-percent.php ============ */

.misc-dev .dev-stats{ margin-bottom:14px }

.misc-dev .block-wrap{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
/* Тот же сброс общего .table-scroll, что и на странице уведомлений. */
.misc-dev .table-scroll{
  overflow-x:auto; overflow-y:visible; max-height:none; border-radius:inherit;
}

.misc-dev table.dev-table{
  width:100%; border-collapse:collapse; min-width:760px; color:var(--text);
  font-size:14px; font-variant-numeric:tabular-nums;
}
.misc-dev thead{ background:rgba(255,255,255,.025) }
.misc-dev th{
  font-family:Roboto-Medium; font-weight:400;
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}
.misc-dev th,
.misc-dev td{ padding:12px 14px; text-align:center; white-space:nowrap }
.misc-dev tbody tr{ background:transparent; transition:background var(--fast) }
.misc-dev tbody tr:hover{ background:rgba(255,255,255,.03) }
.misc-dev tbody tr:not(:last-child){ border-bottom:1px solid var(--border) }
.misc-dev tbody tr.row-empty:hover{ background:transparent }
.misc-dev tbody tr.row-empty td{ padding:0; white-space:normal }
.misc-dev .right{ text-align:right }
.misc-dev .muted{ color:var(--muted); font-weight:400 }
.misc-dev .usd-approx{ font-size:12.5px; margin-left:4px }

@media(max-width:520px){
  .misc-dev th,
  .misc-dev td{ padding:11px 12px; font-size:13px }
}