/* Минимальный CSS для TG WebApp dashboard.
   Использует TG-переменные (var(--tg-theme-...)) с fallback на light scheme. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--tg-theme-bg-color, #f5f6f8);
  color: var(--tg-theme-text-color, #1c1c1e);
  font-size: 14px;
  padding: 12px;
}
header { margin-bottom: 12px; }
header h1 { font-size: 18px; font-weight: 600; }
.muted { color: var(--tg-theme-hint-color, #888); font-size: 12px; }

nav {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--tg-theme-section-separator-color, #ddd);
}
nav button {
  background: transparent;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--tg-theme-text-color, #1c1c1e);
  border-bottom: 2px solid transparent;
  font: inherit;
}
nav button.active {
  border-bottom-color: var(--tg-theme-link-color, #2481cc);
  color: var(--tg-theme-link-color, #2481cc);
}
.tab { display: none; }
.tab.active { display: block; }

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.actions button {
  background: var(--tg-theme-button-color, #2481cc);
  color: var(--tg-theme-button-text-color, #fff);
  border: none;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.list { display: flex; flex-direction: column; gap: 8px; }
.card {
  background: var(--tg-theme-secondary-bg-color, #fff);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tg-theme-section-separator-color, #e5e5ea);
}
.card .row1 { display: flex; justify-content: space-between; gap: 8px; }
.card .id { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; }
.card .meta { font-size: 11px; color: var(--tg-theme-hint-color, #888); margin-top: 4px; }
.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.badge.running { background: #d1fadf; color: #036b3a; }
.badge.idle { background: #e0e7ff; color: #1e3a8a; }
.badge.blocked { background: #ffe4cc; color: #9a3412; }
.badge.killed { background: #fee2e2; color: #7f1d1d; }
.badge.headless { background: #ede9fe; color: #5b21b6; }

footer {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--tg-theme-section-separator-color, #ddd);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  body { background: #1c1c1e; color: #f5f5f7; }
  .card { background: #2c2c2e; border-color: #3a3a3c; }
}