/* ==========================================================================
   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 / .security-mini / .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; }
}

/* Row-level rotation progress. Grey when the account never started rotating,
   violet→green while in flight, solid green only once it's actually secured —
   a half-filled bar must never read the same as a finished one. */
.security-mini {
  margin-top: 0.45rem;
  height: 4px;
  border-radius: 99px;
  background: var(--color-surface);
  overflow: hidden;
}
.security-mini span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.security-mini-done span { background: var(--color-accent); }
.security-mini-none { background: color-mix(in srgb, var(--color-danger) 18%, var(--color-surface)); }

.attention-list { display: grid; gap: 0.5rem; }
.attention-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-muted);
  padding: 0.65rem;
}
.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);
}