/*
 * TR Tech — раскладка страницы. Всё оформление — дизайн-система CRM (design/tr-system.css);
 * здесь только каркас, как в <style> страниц CRM (simulators-v2 и др.), и то, чего в системе нет.
 */
:root { --tr-header-h: 72px; }

.app-shell { display: none; flex-direction: column; min-height: 100vh; }
.app-shell.show { display: flex; }
.app-body { display: flex; flex: 1; }
.tt-page { flex: 1; min-width: 0; }
.tt-page-inner { max-width: 1520px; margin: 0 auto; padding: 28px 32px 60px; }   /* по центру, как у Кирилла: на широком экране не растягивается */

@media (max-width: 900px) {
  .tr-sidebar { display: none; }
  .tt-page-inner { padding: 20px 16px 40px; }
}

/* Вход */
.tt-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tt-login[hidden] { display: none; }
.tt-login-card { width: 100%; max-width: 380px; }
.tt-login-error { min-height: 18px; margin: 10px 0 4px; font-size: 12px; color: var(--tr-red); }
.tt-login-btn { width: 100%; justify-content: center; }

/* Заголовок страницы — как у Кирилла: «Мониторинг серверов» с красным словом */
.tt-title-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.tt-title { font-size: 28px; font-weight: 800; color: var(--tr-text); margin: 0; }
.tt-title em { font-style: normal; color: var(--tr-red); }
.tt-title-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tt-updated {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--tr-text-dim);
}
.tt-updated b { color: var(--tr-red); font-weight: 700; }

/* Панель фильтров */
.tt-filters {
  display: grid; grid-template-columns: 180px 1fr 150px; gap: 14px;
  align-items: end; margin: 20px 0;
}
@media (max-width: 720px) { .tt-filters { grid-template-columns: 1fr; } }

/* Таблица */
.tt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.tt-dot--on  { background: var(--tr-green); box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.tt-dot--off { background: var(--tr-red);   box-shadow: 0 0 0 3px rgba(204,0,0,.15); }
.tt-pill {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.12); color: var(--tr-text-sub);
}
.tt-pill--blue { border-color: rgba(96,165,250,.35); color: #93c5fd; }
.tt-pill--violet { border-color: rgba(167,139,250,.35); color: #c4b5fd; }
.tt-temp { color: var(--tr-yellow); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.tt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.tt-num { color: var(--tr-text-dim); width: 36px; }
.tt-players-on { color: var(--tr-green); font-weight: 700; }

.tt-empty { text-align: center; padding: 28px; color: var(--tr-text-dim); }

/* ── Лаунчеры ─────────────────────────────────────────── */
.tt-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .tt-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tt-grid-5 { grid-template-columns: 1fr 1fr; } }

.tt-filters.tt-filters--4 { grid-template-columns: 170px 1fr 170px 150px; }
@media (max-width: 900px) { .tt-filters.tt-filters--4 { grid-template-columns: 1fr 1fr; } }

.tt-group { margin-top: 26px; }
.tt-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 4px 10px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tt-group-head h2 { font-size: 16px; font-weight: 800; color: var(--tr-text); margin: 0; }
.tt-group-meta { font-size: 12px; color: var(--tr-text-dim); }
.tt-group-meta b { color: var(--tr-text); font-weight: 700; }
.tt-group-meta .tt-ok { color: var(--tr-green); }
.tt-group-meta .tt-blue { color: #60a5fa; }

/* Строки плотнее, чем в обычной таблице */
.tr-table.tt-compact td { padding: 7px 12px; }
.tr-table.tt-compact th { padding: 8px 12px; }
.tt-compact tr.tt-row-off td { opacity: .5; }
.tt-sub { font-size: 10px; color: var(--tr-text-dim); font-weight: 500; }
.tt-dim { color: var(--tr-text-dim); }
.tt-bad { color: var(--tr-red); font-weight: 700; }
.tt-pill--green { border-color: rgba(74,222,128,.35); color: var(--tr-green); }

.tt-chip-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 -6px; font-size: 13px; color: var(--tr-text-sub);
}
.tt-chip-row b { color: var(--tr-text); }

/* Клубы в сайдбаре: название и «онлайн/всего» справа */
.tt-clubs-nav .tt-club-item { justify-content: space-between; }
.tt-clubs-nav .tt-club-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-clubs-nav .tt-club-item em { font-style: normal; font-size: 11px; color: var(--tr-text-dim); flex-shrink: 0; }

/* ── Телеметрия ───────────────────────────────────────── */
.tt-filters.tt-filters--tele { grid-template-columns: 150px 220px 1fr 150px; }
@media (max-width: 900px) { .tt-filters.tt-filters--tele { grid-template-columns: 1fr 1fr; } }
.tt-dot--idle { background: rgba(255,255,255,.18); }
.tt-nowrap { white-space: nowrap; }
.tt-ellipsis { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-note { margin-top: 10px; font-size: 12px; color: var(--tr-text-dim); }