/* ── Badges ───────────────────────────────────────────────────────────── */
/* `white-space: nowrap` because a badge is a chip: it is drawn as one pill with one
   border, and a phrase broken across two lines inside that pill («У / строю» in the
   account page's person tab) reads as two badges with the fill of one. A badge that
   cannot fit its row wraps *as a whole* to the next one — every container that holds
   several is a wrapping flex row. This was stated on `.list-card-top .badge` alone,
   which is simply where it was first noticed. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: .4px; border: 1px solid transparent;
  white-space: nowrap;
}
/* …and the one badge that is not a word. A journal action's own name is a sentence
   («Невірний код двофакторного входу»), and the two surfaces that wear one as a badge
   — the login-history rows and the journal's phone card — have no 234px of row to give
   it: unbroken it simply left the viewport. So a phrase badge wraps inside its pill and
   stays a pill, which is the trade the rule above is not willing to make for a marker.
   Declared here rather than as a nowrap exception per surface, so «is this a word or a
   sentence» is a property of the badge and not of where it happens to sit. */
.badge.phrase { white-space: normal; }
/* Tinted badges derive from a single base colour: a translucent fill, a
   translucent border, and a foreground mixed toward --text so it stays vivid
   on dark and legible on light without per-theme overrides. */
/* Nothing here is keyed by a person's «Стан» any more — that colour comes off the
   catalogue row as inline `--st` (`.badge.status-badge` below). What survives is the
   movement-status enum (planned / in_transit / arrived / awol), the account states, and
   the plain tone names any surface may reach for (`active` / `inactive` / `medical` /
   `danger`). The six selectors that went with the enum — `in_unit`, `hospital`,
   `cancelled`, `leave`, `mission`, `training` — named person states and location kinds
   that no template emits: a location's kind is a `.badge.role`. */
.badge.arrived, .badge.active {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: color-mix(in srgb, var(--ok) 70%, var(--text));
  border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.awol, .badge.blocked, .badge.danger {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: color-mix(in srgb, var(--danger) 78%, var(--text));
  border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
/* Account access states (accounts.User.AccessState): pending shares the warning
   tint below, `active` the --ok one above, `blocked` the danger one. */
.badge.planned, .badge.medical, .badge.pending, .badge.pending-link {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: color-mix(in srgb, var(--warn) 78%, var(--text));
  border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge.in_transit {
  background: color-mix(in srgb, var(--info) 16%, transparent);
  color: color-mix(in srgb, var(--info) 60%, var(--text));
  border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.badge.inactive {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted); border-color: var(--border); }
/* The loudest marker in the app: solid red rather than tinted, so it separates from
   every other badge on the row. Used for a movement recorded as СЗЧ, an overdue one,
   and the `is_awol` flag on the states list. It was called `szch` — a person-status
   code, which is the one thing a class may no longer be named after. */
.badge.alert { background: var(--danger); color: var(--on-accent); border-color: var(--danger); font-weight: 700; }
.badge.status-badge {
  /* A person's «Стан» (registry.PersonStatus): the colour is a hex on the row, handed
     over as the inline `--st` property by the {% status_badge %} tag, since a catalogue
     an operator edits cannot have a rule per code here. Derivation is the same as a tag
     chip's from `--tag` — translucent fill, coloured border, foreground mixed toward
     --text so it reads on both themes. */
  background: color-mix(in srgb, var(--st, var(--muted)) 14%, transparent);
  color: color-mix(in srgb, var(--st, var(--muted)) 72%, var(--text));
  border-color: color-mix(in srgb, var(--st, var(--muted)) 40%, transparent);
}
/* A state flagged «потребує реагування» is filled, not tinted — СЗЧ has always been
   the loudest badge in the app, and now says so by its flag rather than its code. */
.badge.status-badge.strong {
  background: var(--st); color: var(--on-accent); border-color: var(--st); font-weight: 700; }
.badge.role { background: var(--panel-2); color: var(--accent-2); border-color: var(--border); text-transform: uppercase; }
/* No signal of its own — «this fact is simply absent». Distinct from `discharged`,
   which is a state a person is in; this is the grey a marker wears when there is
   nothing to mark (an account with no authenticator yet). */
.badge.neutral { background: transparent; color: var(--muted-2); border-color: var(--border); }
/* A badge that is only a glyph: drop the text padding to keep it square. */
.badge.icon-badge { padding: 3px 6px; }
.badge.icon-badge .icon { width: 13px; height: 13px; }
/* The pending-registrations counter in the account list — a badge that links. */
.badge.pending-link { text-decoration: none; font-weight: 600; }
.badge.pending-link:hover { border-color: var(--warn); }

/* Банер-попередження вгорі картки військовослужбовця у стані, що потребує реагування.
   Named after the `needs_attention` flag that draws it, not after СЗЧ — the same reason
   `.badge.alert` above stopped being `.badge.szch`: the state may be any the operator
   flags that way, and the code that used to carry it can be renamed or removed. */
.alert-attention { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid var(--danger); border-left-width: 4px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-weight: 600; }
.alert-attention .alert-icon { font-size: 18px; line-height: 1.2; }
.alert-attention small { display: block; font-weight: 400; opacity: .85; margin-top: 2px; }