/*
 * Админка статуса. Токены (цвета, --s = 12px, --radius) берутся из status.css.
 * Ритм: 12px между соседними блоками, 24px перед группой/заголовком. Скругления: 24px и полные.
 */
.adm-body { background: var(--bg); }

/* ── Каркас: меню слева, содержимое справа ─────────────── */
.adm { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100dvh; }
.adm-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s); padding: var(--s); border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
.adm-brand { display: flex; flex-direction: column; gap: var(--s); padding: var(--s); }
.adm-brand img { height: 1.75rem; width: auto; align-self: flex-start; }
.adm-brand span { font-size: 0.8125rem; color: var(--zinc-500); }
.admin-nav { display: flex; flex-direction: column; gap: var(--s); }
.adm-group { display: flex; flex-direction: column; gap: 0.125rem; }
.adm-group-title { padding: 0 var(--s); margin-bottom: var(--s); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zinc-500); }
.adm-link { display: flex; align-items: center; gap: var(--s); width: 100%; height: 2.5rem; padding: 0 var(--s); border: 0; border-radius: 9999px; background: none; color: var(--zinc-400); font-size: 0.9375rem; text-align: left; cursor: pointer; transition: color 300ms, background-color 300ms, transform 300ms; }
.adm-link:hover { color: var(--fg); background: rgb(255 255 255 / 0.04); }
.adm-link:active { transform: scale(0.97); }
.adm-link.on { color: var(--fg); background: var(--zinc-800); }
.adm-link.sm { height: 2.25rem; font-size: 0.875rem; }
.adm-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ico { flex: none; }
.adm-badge { flex: none; min-width: 1.5rem; padding: 0 0.375rem; border-radius: 9999px; background: var(--bad); color: #000; font-size: 0.75rem; font-style: normal; font-weight: 600; line-height: 1.25rem; text-align: center; }
.adm-side-foot { margin-top: auto; padding-top: var(--s); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.125rem; }
.adm-side-foot form { margin: 0; }
.adm-user { padding: 0 var(--s); margin-bottom: var(--s); font-size: 0.8125rem; color: var(--zinc-500); overflow: hidden; text-overflow: ellipsis; }
.adm-scrim { display: none; }

.adm-main { min-width: 0; }
.adm-top { display: flex; align-items: flex-start; gap: var(--s); padding: var(--s2) var(--s2) 0; max-width: 64rem; }
.adm-title { min-width: 0; }
.adm-title h1 { margin: 0; font-size: 1.5rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -0.01em; }
.adm-lead { margin: 0; color: var(--zinc-400); font-size: 0.9375rem; max-width: 46rem; }
.adm-menu { display: none; flex: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); color: var(--fg); cursor: pointer; }
.adm-content { display: flex; flex-direction: column; gap: var(--s); padding: var(--s2); max-width: 64rem; }

/* ── Вход ──────────────────────────────────────────────── */
.adm-login { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s); }
.adm-login-logo img { height: 2.25rem; width: auto; display: block; }
.adm-login-card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: var(--s); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.adm-login-card h1 { margin: 0; font-size: 1.375rem; font-weight: 600; }
.adm-login-card label { display: flex; flex-direction: column; gap: var(--s); font-size: 0.8125rem; color: var(--zinc-400); }
.adm-login-card input { height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 9999px; background: var(--bg); color: var(--fg); font-size: 1rem; outline: none; transition: border-color 300ms; }
.adm-login-card input:focus { border-color: var(--zinc-500); }
.adm-login-card .btn { height: 2.75rem; }

/* ── Уведомление об итоге действия ─────────────────────── */
.adm-toast { position: fixed; top: var(--s); right: var(--s); z-index: 50; max-width: min(26rem, calc(100vw - 1.5rem)); margin: 0; box-shadow: 0 8px 32px rgb(0 0 0 / 0.5); background-color: var(--zinc-900); animation: adm-toast 6s ease forwards; }
@keyframes adm-toast { 0% { opacity: 0; transform: translateY(-0.5rem); } 6% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ── Обзор ─────────────────────────────────────────────── */
.adm-hero { display: flex; align-items: center; gap: var(--s); padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.adm-hero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-hero strong { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.adm-hero span { font-size: 0.875rem; color: var(--zinc-300); }
.adm-hero-dot { flex: none; width: 0.75rem; height: 0.75rem; margin: 0 0.375rem; border-radius: 9999px; background: var(--zinc-500); box-shadow: 0 0 0 6px rgb(113 113 122 / 0.15); }
.adm-hero.tone-ok .adm-hero-dot { background: var(--ok); box-shadow: 0 0 0 6px rgb(52 211 153 / 0.15); }
.adm-hero.tone-warn .adm-hero-dot { background: var(--warn); box-shadow: 0 0 0 6px rgb(251 191 36 / 0.15); }
.adm-hero.tone-bad .adm-hero-dot { background: var(--bad); box-shadow: 0 0 0 6px rgb(248 113 113 / 0.18); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s); }
.adm-stat { display: flex; flex-direction: column; gap: var(--s); padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: background-color 300ms, border-color 300ms; }
.adm-stat:hover { background: var(--zinc-900); border-color: var(--zinc-600); }
.adm-stat span { font-size: 0.8125rem; color: var(--zinc-400); }
.adm-stat strong { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.adm-stat strong small { font-size: 0.875rem; font-weight: 400; color: var(--zinc-500); }
.adm-stat.bad strong { color: var(--bad); }
.adm-actions { display: flex; flex-wrap: wrap; gap: var(--s); }
.adm-actions .btn { gap: var(--s); }
.adm-h2 { margin: var(--s) 0 0; font-size: 1rem; font-weight: 600; color: var(--zinc-300); }
.adm-empty { display: flex; align-items: center; justify-content: center; gap: var(--s); padding: var(--s2); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--zinc-400); text-align: center; }
.adm-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.adm-attn li { display: flex; align-items: center; gap: var(--s); padding: var(--s); border-top: 1px solid var(--line); font-size: 0.9375rem; }
.adm-attn li:first-child { border-top: 0; }
.adm-attn li > span:nth-child(2) { flex: 1; min-width: 0; }
.adm-attn a { flex: none; color: var(--zinc-400); font-size: 0.875rem; transition: color 300ms; }
.adm-attn a:hover { color: var(--fg); }
.attn-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--zinc-500); }
.attn-bad .attn-dot { background: var(--bad); } .attn-warn .attn-dot { background: var(--warn); } .attn-info .attn-dot { background: #60a5fa; }
.adm-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.adm-row { display: flex; align-items: center; gap: var(--s); padding: var(--s); border-top: 1px solid var(--line); }
.adm-row:first-child { border-top: 0; }
.adm-row-title { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row-title:hover { text-decoration: underline; }
.adm-row-meta { flex: none; font-size: 0.8125rem; color: var(--zinc-400); }
.adm-row form { margin: 0; }

/* ── Кнопки ────────────────────────────────────────────── */
.btn.sm { height: 2rem; padding: 0 0.875rem; font-size: 0.875rem; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
.btn.ghost, summary.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--zinc-800); }

/* ── Инциденты ─────────────────────────────────────────── */
.adm-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s); margin-bottom: var(--s); }
.adm-toolbar-actions { display: flex; align-items: center; gap: var(--s); flex-wrap: wrap; }
.adm-new-btn { position: relative; }
.adm-new-btn > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s); cursor: pointer; }
.adm-new-btn > summary::-webkit-details-marker { display: none; }
.adm-new-btn[open] > summary { margin-bottom: 0; }
.adm-new-dialog { margin-top: var(--s); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 40px rgb(0 0 0 / 0.5); }
.adm-filter { display: flex; flex-wrap: wrap; gap: var(--s); }
.adm-filter a { display: inline-flex; align-items: center; gap: var(--s); height: 2.25rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 9999px; color: var(--zinc-400); font-size: 0.9375rem; transition: color 300ms, background-color 300ms; }
.adm-filter a:hover { color: var(--fg); }
.adm-filter a.on { color: var(--fg); background: var(--zinc-800); }
.adm-filter a span { min-width: 1.25rem; padding: 0 0.375rem; border-radius: 9999px; background: rgb(255 255 255 / 0.08); font-size: 0.75rem; line-height: 1.25rem; text-align: center; }

.adm-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s); padding: var(--s); border: 1px solid var(--line); border-radius: 9999px; background: rgba(39, 39, 42, 0.4); margin-bottom: var(--s); }
.adm-bulk-actions { display: flex; align-items: center; gap: var(--s); }
.adm-select-all { font-size: 0.875rem; color: var(--zinc-300); font-weight: 500; cursor: pointer; }
.adm-select-item { display: inline-flex; align-items: center; justify-content: center; margin-right: var(--s); cursor: pointer; }
.adm-select-item input, .adm-select-all input { width: 1.125rem; height: 1.125rem; accent-color: #38bdf8; cursor: pointer; }

.adm-inc-list { display: flex; flex-direction: column; gap: var(--s); }
.adm-inc { padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: var(--s2); }
.adm-inc:target { border-color: var(--zinc-500); }
.adm-inc-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s); }
.adm-inc-head strong { flex: 1; min-width: 12rem; font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.adm-inc-meta { margin-top: var(--s); font-size: 0.875rem; color: var(--zinc-400); }
.adm-inc-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s); margin-top: var(--s2); padding-top: var(--s); border-top: 1px solid var(--line); }
.adm-inc-actions .inline-actions { display: flex; gap: var(--s); margin: 0; }
.adm-pop > summary { cursor: pointer; }
.adm-pop[open] { flex: 1 1 100%; order: 5; }
.adm-pop[open] > summary { margin-bottom: var(--s); }
.adm-pop .form { margin: 0; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }

.adm-failures-box { margin: var(--s) 0; padding: var(--s); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(0, 0, 0, 0.25); }
.adm-field-title { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--zinc-300); margin-bottom: var(--s); }
.adm-failures { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s); }
.adm-check-item { display: flex; align-items: center; gap: var(--s); font-size: 0.8125rem; color: var(--zinc-300); cursor: pointer; }
.adm-check-item input { accent-color: #38bdf8; cursor: pointer; }
.adm-del-linked { margin-top: var(--s); font-size: 0.75rem; color: var(--zinc-400); }

/* ── Сервисы ───────────────────────────────────────────── */
.adm-svc-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.adm-svc { border-top: 1px solid var(--line); }
.adm-svc:first-child { border-top: 0; }
.adm-svc.off > summary { opacity: 0.6; }
.adm-svc > summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--s); padding: var(--s); cursor: pointer; list-style: none; transition: background-color 300ms; }
.adm-svc > summary::-webkit-details-marker { display: none; }
.adm-svc > summary:hover, .adm-svc[open] > summary { background: rgb(255 255 255 / 0.03); }
.adm-svc.child > summary { padding-left: calc(var(--s) * 3); }
.adm-svc-main { display: flex; flex-direction: column; min-width: 0; }
.adm-svc-main strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-svc-sub { font-size: 0.8125rem; color: var(--zinc-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-svc-tags { display: flex; flex-wrap: wrap; gap: var(--s); }
.adm-svc-state .pill { min-width: 0; }
.adm-svc-body { display: flex; flex-direction: column; gap: var(--s); padding: var(--s); border-top: 1px solid var(--line); background: var(--bg); }
.adm-svc-body .check-form { margin: 0; }
.adm-id { margin: 0; font-size: 0.8125rem; color: var(--zinc-500); }

/* ── Серверы: таблица с правкой на месте ───────────────── */
.adm-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.adm-trow { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr) 6rem auto; align-items: center; gap: var(--s); margin: 0; padding: var(--s); border-top: 1px solid var(--line); }
.adm-trow.head { border-top: 0; padding-top: var(--s); padding-bottom: var(--s); color: var(--zinc-500); font-size: 0.8125rem; }
.adm-trow input { height: 2.25rem; min-width: 0; padding: 0 var(--s); border: 1px solid var(--line); border-radius: 9999px; background: var(--bg); color: var(--fg); font-size: 0.9375rem; outline: none; transition: border-color 300ms; }
.adm-trow input:focus { border-color: var(--zinc-500); }
.adm-trow .actions { gap: var(--s); flex-wrap: nowrap; }

/* ── Остальные разделы: единый вид ─────────────────────── */
.adm-content h2.section { margin: var(--s) 0 0; font-size: 1rem; font-weight: 600; color: var(--zinc-300); }
.adm-content .hint { margin: 0; color: var(--zinc-400); font-size: 0.875rem; max-width: 52rem; }
.adm-content .form { margin: 0; }
.adm-content .card.event, .adm-content .card.form { margin: 0; }
.adm-content details.edit > summary { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 9999px; color: var(--zinc-300); cursor: pointer; transition: background-color 300ms; list-style: none; }
.adm-content details.edit > summary:hover { background: var(--zinc-800); }
.adm-content details.edit[open] > summary { margin-bottom: var(--s); }
.adm-content details.adm-new > summary { border: 0; background: #fff; color: #000; height: 2.5rem; padding: 0 1rem; font-weight: 500; }
.adm-content details.adm-new > summary:hover { background: var(--zinc-300); }
.adm-content .form input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 2.25rem; height: 1.375rem; padding: 0; border: 1px solid var(--line); border-radius: 9999px; background: var(--zinc-800); position: relative; cursor: pointer; transition: background-color 300ms, border-color 300ms; }
.adm-content .form input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--zinc-400); transition: transform 300ms, background-color 300ms; }
.adm-content .form input[type="checkbox"]:checked { background: rgb(52 211 153 / 0.25); border-color: rgb(52 211 153 / 0.5); }
.adm-content .form input[type="checkbox"]:checked::after { transform: translateX(0.875rem); background: var(--ok); }
.adm-content .form label.chk { gap: var(--s); }

/* ── Адаптив ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: fixed; z-index: 40; top: 0; left: 0; width: min(18rem, 86vw); transform: translateX(-102%); transition: transform 300ms; }
  .adm.open .adm-side { transform: none; box-shadow: 0 0 48px rgb(0 0 0 / 0.7); }
  .adm-scrim { position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / 0.6); }
  .adm.open .adm-scrim { display: block; }
  .adm-menu { display: inline-flex; }
  .adm-top { padding: var(--s) var(--s) 0; }
  .adm-content { padding: var(--s); }
  .adm-svc > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-svc-tags { grid-column: 1 / -1; order: 3; }
  .adm-svc.child > summary { padding-left: calc(var(--s) * 2); }
  .adm-trow { grid-template-columns: minmax(0, 1fr) 5rem; }
  .adm-trow.head { display: none; }
  .adm-trow .actions { grid-column: 1 / -1; }
  .adm-trow > code { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .adm-hero { flex-wrap: wrap; }
  .adm-hero > div { flex: 1 1 calc(100% - 2.5rem); }
  .adm-hero .btn { flex: 1 1 100%; }
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-stat strong { font-size: 1.25rem; }
  .adm-row { flex-wrap: wrap; }
  .adm-row-meta { order: 3; flex-basis: 100%; }
  .adm-inc-head strong { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .adm-toast { animation: none; } }