/* ==========================================================================
   Accounts page — fleet-problem strip, per-row security meter, attention list
   and the fleet-health card. Proportions copied from the reference mockup's own
   .alert-strip / .attention-item / .health-card, re-expressed
   in this file's --color-* tokens (the mockup's palette is the same one, so
   nothing needed re-deriving — only the token names changed).
   ========================================================================== */
.alert-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 76%, var(--color-warning-bg));
  border-radius: var(--radius-lg, 16px);
  padding: 0.7rem 0.8rem;
}
.alert-strip-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.alert-strip-icon .icon { width: 1.05rem; height: 1.05rem; }
.alert-strip-copy { min-width: 0; }
.alert-strip-copy b { display: block; font-size: 0.8rem; }
.alert-strip-copy span { display: block; color: var(--color-text-muted); font-size: 0.7rem; margin-top: 0.15rem; }
@media (max-width: 560px) {
  .alert-strip { grid-template-columns: auto minmax(0, 1fr); }
  .alert-strip .btn { grid-column: 1 / -1; justify-content: center; }
}

/* flex-column + margin (а не grid-gap): при закрытии карточка плавно схлопывается по
   высоте вместе с отступом, без «зависшего» gap-пробела. */
.attention-list { display: flex; flex-direction: column; }
.attention-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-muted);
  padding: 0.65rem;
  padding-right: 2.2rem;      /* место под крестик (для описания/кнопок ниже него) */
  overflow: hidden;
  transition: height 0.22s ease, opacity 0.18s ease,
              margin 0.22s ease, padding 0.22s ease, border-width 0.22s ease;
}
.attention-item:last-child { margin-bottom: 0; }
/* Заголовок отдельно отодвигаем от крестика: он на той же высоте, что и крестик, и
   именно его текст перекрывался. */
.attention-title { padding-right: 1.5rem; }
/* Крестик «убрать это уведомление» — в правом верхнем углу, кружок-обводка БЕЗ заливки,
   ярче на наведении. */
.attention-dismiss {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.attention-dismiss:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text-faint) 14%, transparent);
  border-color: var(--color-text-muted);
}
.attention-dismiss .icon { width: 0.85rem; height: 0.85rem; }
/* Схлопывание при закрытии — высоту/отступы/границу гасит JS инлайном (нужна стартовая
   высота в px), здесь только прозрачность и запрет кликов. */
.attention-item.is-dismissing { opacity: 0; pointer-events: none; }
/* Следующая карточка «подъезжает снизу», когда закрыли верхнюю. */
.attention-item.is-reveal { animation: attention-reveal 0.24s ease; }
@keyframes attention-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .attention-item.is-reveal { animation: none; } }
.attention-icon {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.attention-icon .icon { width: 0.9rem; height: 0.9rem; }
.attention-icon-danger { color: var(--color-danger-text); background: var(--color-danger-bg); }
.attention-icon-warning { color: var(--color-warning-text); background: var(--color-warning-bg); }
.attention-icon-info { color: var(--color-blue); background: color-mix(in srgb, var(--color-blue) 15%, transparent); }
.attention-title { display: block; font-size: 0.78rem; line-height: 1.3; }
.attention-desc { margin: 0.2rem 0 0; color: var(--color-text-muted); font-size: 0.7rem; line-height: 1.4; }
.attention-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }

.health-top { display: flex; align-items: center; gap: 0.8rem; }
/* Score ring — the filled arc is the score itself, fed in as --health-score from
   the template (the only per-user value here, so it stays inline rather than
   spawning 100 utility classes). */
.health-score {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  background: conic-gradient(var(--color-accent) 0 var(--health-score, 0%), var(--color-surface-muted) var(--health-score, 0%) 100%);
}
.health-score-fair { background: conic-gradient(var(--color-warning) 0 var(--health-score, 0%), var(--color-surface-muted) var(--health-score, 0%) 100%); }
.health-score-poor { background: conic-gradient(var(--color-danger) 0 var(--health-score, 0%), var(--color-surface-muted) var(--health-score, 0%) 100%); }
.health-score::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--color-surface);
  border-radius: 50%;
}
.health-score strong { position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.1rem; }

.metric-list { display: grid; gap: 0.55rem; margin-top: 0.85rem; }
.metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.metric-row b { font-size: 0.72rem; color: var(--color-text); }
.metric-track {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--color-surface-muted);
  border-radius: 99px;
  overflow: hidden;
}
.metric-track span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }

/* Small rounded-square series/legend marker — chart legends and status legends,
   deliberately a square (not the round .node-dot) so it never reads as a "live" signal. */
.legend-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* Donut + its legend side by side (donut fixed-width, legend fills the rest) —
   matches the reference's own .donut-layout instead of stacking them. */
.donut-layout { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 0.875rem; }
@media (max-width: 480px) {
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
}

/* Small muted icon chip in front of a card's own <h2> — every card gets a
   quiet visual anchor instead of just floating text as its heading. */
.card-title { display: flex; align-items: center; gap: 0.5rem; }
.card-title-icon {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}
.card-title-icon .icon { width: 0.9rem; height: 0.9rem; }

.chip-violet { background: var(--color-primary-bg); color: var(--color-primary-hover); }
/* Anything that identifies a real Telegram entity — a phone number, a
   proxy host:port, a session/user id, a timestamp — reads as data, not
   prose, so it gets the mono face. */
.font-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Visible only when focused — lets keyboard users jump past the sidebar */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.75rem;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  transition: top var(--transition-base) var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* Consistent, visible keyboard focus everywhere (mouse clicks stay quiet) */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}