/* Перенесено из макета Claude Design «Единый каталог.html»; значения — макета, правки отмечены комментарием. */
/* ─── Stats ──────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.stat-label {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-delta {
  font-size: 12px;
  margin-top: 8px;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 4px;
}
.stat-delta.up { color: var(--ok-fg); }
.stat-delta.warn { color: var(--warn-fg); }
.stat-delta.err { color: var(--err-fg); }

.stat-spark {
  position: absolute;
  right: 14px; top: 14px;
  width: 60px; height: 24px;
  color: var(--ink-4);
  opacity: .5;
}

/* ─── Generic card ──────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.card-head .head-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.card-body { padding: 18px; }

/* ─── Dashboard ──────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.dash-grid .span-2 { grid-column: span 2; }
.dash-grid .span-3 { grid-column: span 3; }
.dash-grid .span-4 { grid-column: span 4; }

.system-status .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.system-status .row:last-child { border-bottom: none; }
.ss-label { color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ss-pulse { width: 8px; height: 8px; border-radius: 50%; }
.ss-pulse.ok { background: var(--ok-dot); box-shadow: 0 0 0 3px rgba(74,140,84,.15); }
.ss-pulse.warn { background: var(--warn-dot); box-shadow: 0 0 0 3px rgba(184,134,42,.15); }
.ss-pulse.err { background: var(--err-dot); box-shadow: 0 0 0 3px rgba(184,71,46,.15); }
.ss-value { font-family: 'JetBrains Mono', monospace; color: var(--ink-3); font-size: 12px; }

.activity-feed { display: flex; flex-direction: column; }
.activity-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.activity-row:last-child { border-bottom: none; }
.activity-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.activity-text { color: var(--ink-2); }
.activity-text strong { color: var(--ink); font-weight: 600; }
.activity-time { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
  background: var(--surface-2);
  color: var(--ink-3);
}
.empty-state .es-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 14px; }

/* ─── Stores screen ──────────────────────────────────── */
.stores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.store-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.store-card .sc-head {
  display: flex; align-items: flex-start; gap: 12px;
}
.sc-icon-big {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.sc-name { font-weight: 700; font-size: 15px; margin: 0 0 2px; }
.sc-domain {
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.sc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc-stat .v {
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sc-stat .l {
  font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 2px;
}
.sc-meta { font-size: 12px; color: var(--ink-3); }
.sc-meta strong { color: var(--ink-2); font-weight: 600; }
.sc-actions { display: flex; gap: 6px; margin-top: auto; }

.spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.role-chip {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-chip.admin { background: #ede5d6; color: #6a531e; }

/* ─── Цвет-метки магазинов — палитра из окна «Подключить магазин» макета (COLORS) ── */
.site-c0 { background: #4a5d8a; }
.site-c1 { background: #b8862a; }
.site-c2 { background: #2e5b35; }
.site-c3 { background: #7a2a4f; }
.site-c4 { background: #4a3a6b; }
.site-c5 { background: #2a5b7a; }
.site-c6 { background: #7a4a2a; }
.site-c7 { background: #3d3a37; }

/* Метка администратора в тёмной теме: в макете жёсткие светлые цвета. */
@media (prefers-color-scheme: dark) {
  .role-chip.admin { background: var(--warn-bg); color: var(--warn-fg); }
}

/* ─── Адаптив карточек — достроен в Пульте ─────────────────────────────────── */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dash-grid .span-2 { grid-column: span 4; }
  .stores-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stats { gap: 8px; margin-bottom: 16px; }
  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 22px; }
  .stores-grid { grid-template-columns: 1fr; }
}