/* app.css — спільний стиль адмінки v2. Палітра і компоненти = стара панель
   (BASE_CSS поверх inline-стилів), зведені в один файл. */
:root{
  --bg:#0b0e14; --card:#151b24; --card2:#1b222d; --mut:#9aa6b8; --line:#242c38;
  --acc:#7c9cff; --acc-soft:rgba(124,156,255,.15);
  --ok:#34d399; --ok-soft:rgba(52,211,153,.14);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14);
  --bad:#f87171; --bad-soft:rgba(248,113,113,.14);
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#e6ebf3;
  background-image:radial-gradient(1200px 520px at 50% -12%,#16203010,transparent),
                   radial-gradient(900px 400px at 100% 0,#1a1030,transparent);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* ---- шапка ---- */
header{padding:16px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:5;
  background:rgba(11,14,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.4)}
/* КРИТИЧНО: класи з display:* (.stalepill, .badge, .pill…) мають ВИЩУ специфічність за
   типовий [hidden]{display:none} браузера, тому елемент з hidden лишався видимим —
   через це пілюля «дані затримуються» світилася завжди. Робимо hidden сильнішим. */
[hidden]{display:none!important}
h1{font-size:17px;margin:0;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
/* заголовок не має ламатися на 3 рядки, коли поруч кнопки діапазонів і навігація */
header>div:first-child{min-width:210px}
h1>.hemo{margin-right:.35em}
.sub{color:var(--mut);font-size:12px}
.wrap{max-width:1100px;margin:0 auto;padding:20px 22px}

/* ---- навігація ---- */
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.navlink{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;color:var(--mut);
  text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap}
.navlink:hover{color:#e6ebf3;background:var(--card2)}
.navlink.active{color:#fff;background:var(--card);box-shadow:inset 0 -2px 0 var(--acc)}
.navlink.logout{margin-left:6px;font-size:16px;color:var(--mut);padding:8px 11px}
.navlink.logout:hover{color:var(--bad);background:var(--bad-soft)}
@media(max-width:560px){.navlink span{display:none}.navlink{padding:9px 11px;font-size:15px}}

/* ---- картки ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.28)}
.card h2{font-size:14px;margin:0 0 12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}

/* ---- таблиці (адаптивні) ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:max-content}
@media(max-width:640px){table{min-width:0}}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mut);font-weight:500;font-size:12px}
td.mono,code{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---- badge/статуси ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge.active{background:var(--ok-soft);color:var(--ok)}
.badge.expired{background:var(--warn-soft);color:var(--warn)}
.badge.banned{background:var(--bad-soft);color:var(--bad)}
.badge.owner{background:var(--acc-soft);color:var(--acc)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}

/* ---- кнопки/інпути + focus-ring (ТВ-пульт) ---- */
button{cursor:pointer;border:1px solid var(--line);background:#1c2430;color:#e8edf4;border-radius:8px;
  padding:7px 12px;font-size:13px}
button,input,select{transition:border-color .15s,background .15s,box-shadow .15s}
button:hover{border-color:var(--acc);background:#212b39}
button.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600;box-shadow:0 4px 14px var(--acc-soft)}
button.primary:hover{filter:brightness(1.06)}
button.danger:hover{border-color:var(--bad);color:var(--bad)}
input,select{background:#222b36;border:1px solid var(--line);color:#e8edf4;border-radius:8px;padding:8px 10px;font-size:13px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}

/* ---- утиліти ---- */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
.muted{color:var(--mut)}
.empty{color:var(--mut);padding:14px;text-align:center}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px;animation:p 1.4s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- KPI-плитки ---- */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px;min-width:128px;flex:1;
  box-shadow:0 8px 22px rgba(0,0,0,.22)}
.stat .k{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:22px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:12px;color:var(--mut);font-weight:400}
.stat.warn{border-color:var(--warn)}.stat.bad{border-color:var(--bad)}.stat.ok{border-color:var(--ok)}

/* ---- health-пілюлі ---- */
.health{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.hpill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;font-size:12px;color:#cdd6e4}
.hpill .d{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 8px var(--bad)}
.hpill.up .d{background:var(--ok);box-shadow:0 0 8px var(--ok-soft)}
.hpill:not(.up){color:var(--bad);border-color:var(--bad-soft)}
.hpill .ms{color:var(--mut);font-size:11px;font-variant-numeric:tabular-nums}

/* ---- індикатор SSE у шапці ---- */
.ssedot{width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block;vertical-align:middle}
.ssedot.on{background:var(--ok);box-shadow:0 0 8px var(--ok-soft)}

/* ---- скелетони ---- */
.skel{background:linear-gradient(90deg,#151b24,#1f2733,#151b24);background-size:200% 100%;
  animation:sh 1.2s ease-in-out infinite;border-radius:7px;height:14px;display:block}
@keyframes sh{to{background-position:-200% 0}}

/* ---- діалог (QR/посилання) ---- */
dialog{background:var(--card);color:#e8edf4;border:1px solid var(--line);border-radius:14px;padding:20px;max-width:420px}
dialog::backdrop{background:rgba(0,0,0,.6)}
.qr{background:#fff;padding:12px;border-radius:10px;display:inline-block;margin:10px 0}
.linkbox{word-break:break-all;background:#0d1015;border:1px solid var(--line);border-radius:8px;padding:10px;
  font-family:ui-monospace,monospace;font-size:12px;margin:8px 0}

/* ---- тости ---- */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:9999;max-width:min(92vw,380px)}
.toast{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;
  padding:11px 14px;font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,.4);animation:tin .25s ease;color:#e6ebf3}
.toast.ok{border-left-color:var(--ok)}.toast.err{border-left-color:var(--bad)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* ---- модалки confirm/prompt ---- */
#mroot{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
#mroot.on{display:flex}
.mbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:420px;width:92vw;
  box-shadow:0 24px 64px rgba(0,0,0,.55);animation:tin .2s ease}
.mbox h3{margin:0 0 6px;font-size:16px}
.mbox p{margin:0 0 14px;color:var(--mut);font-size:13px;line-height:1.5}
.mbox input{width:100%;margin-bottom:14px}
.mbox .row{display:flex;gap:10px;justify-content:flex-end}

/* ---- сторінка логіну ---- */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
  background:radial-gradient(1200px 600px at 50% -10%,#182233 0%,var(--bg) 55%)}
.loginbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 28px;
  width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.loginbox .logo{font-size:34px;text-align:center}
.loginbox .t{font-size:20px;font-weight:700;text-align:center;margin:6px 0 2px}
.loginbox .s{color:var(--mut);font-size:13px;text-align:center;margin-bottom:22px}
.loginbox label{display:block;font-size:12px;color:var(--mut);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.03em}
.loginbox input{width:100%;border-radius:10px;padding:12px 13px;font-size:15px}
.loginbox button{width:100%;margin-top:20px;border:none;background:var(--acc);color:#fff;font-weight:600;
  font-size:15px;border-radius:10px;padding:13px}
.loginbox button:hover{filter:brightness(1.08)}
.loginbox button:disabled{opacity:.6;cursor:default}
.loginbox .err{color:var(--bad);font-size:13px;text-align:center;margin-top:14px;min-height:18px}

/* ---------- телефон ----------
   Панель найчастіше відкривають саме з телефона — коли хтось пише «не грає».
   Тому: меню в один рядок іконками, KPI в дві колонки, менші відступи,
   таблиці лишаються прокручуваними вбік (.tw), а не ламають сторінку. */
@media (max-width: 720px) {
  header { padding: 11px 13px; gap: 10px; }
  header h1 { font-size: 17px; }
  header > div:first-child { min-width: 0; flex: 1 1 100%; }
  .wrap { padding: 13px; }
  .card { padding: 13px; margin-bottom: 13px; border-radius: 10px; }

  /* меню на всю ширину, іконки рівномірно — пальцем не промахнешся */
  .nav { width: 100%; justify-content: space-between; gap: 2px; }
  .navlink { flex: 1; justify-content: center; padding: 10px 8px; font-size: 17px; }
  .navlink.logout { flex: 0 0 auto; margin-left: 0; }

  /* KPI: дві колонки замість гармошки з п'яти */
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { min-width: 0; padding: 10px 12px; }
  .stat .v { font-size: 19px; }
  .stat .k { font-size: 10px; }

  th, td { padding: 8px 8px; font-size: 13px; }
  .ranges { width: 100%; }
  .ranges button { flex: 1; padding: 8px 6px; font-size: 12px; }

  /* поля вводу й кнопки в колонку: у рядку вони стискаються в нечитабельне */
  .row { flex-wrap: wrap; }
  .row > input, .row > select, .row > .grow { flex: 1 1 100%; min-width: 0; }

  .hpill { font-size: 11px; padding: 5px 9px; }
  .netkpi { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
  .netkpi { grid-template-columns: 1fr; }
}