/* ============================================================================
   Component: action item ("needs attention")
   ----------------------------------------------------------------------------
   One row of the administrator's work queue: a severity-tinted icon, a count,
   and what to do about it. It appears in two places — the dashboard's "Action
   Needed" panel and the top-bar notification bell (desktop and mobile) — which
   is why the tone lives here rather than in either page.

   The tone arrives as a semantic name from dashboard_actions.py
   (danger / warning / info / neutral) and is resolved to a token here. It was
   previously eleven hex literals in Python, painted inline; those could not
   follow the theme, so the counts measured 2.54-3.76:1 in light mode and
   3.04:1 in dark.

   The count is real text and takes the full-strength status token (>= 5.4:1 in
   light, >= 7.2:1 in dark). The icon takes the same colour: it is redundant
   with the label, so it is decorative, but matching it keeps the row readable
   as one unit.
   ========================================================================== */

.aq-action{ --aq-action-accent: var(--ink-muted); }
.aq-action--danger { --aq-action-accent: var(--danger); }
.aq-action--warning{ --aq-action-accent: var(--warning); }
.aq-action--info   { --aq-action-accent: var(--info); }
.aq-action--success{ --aq-action-accent: var(--success); }
.aq-action--neutral{ --aq-action-accent: var(--ink-muted); }

.aq-action__icon { color: var(--aq-action-accent); }
.aq-action__count{ color: var(--aq-action-accent); font-weight: var(--fw-bold);
                   font-variant-numeric: tabular-nums; }

/* Bell dropdown row: the label shrinks against the trailing count badge at
   whatever width the menu happens to be, instead of a per-call-site pixel cap.
   .text-truncate supplies the ellipsis; min-width:0 is what actually lets a
   flex item shrink below its content width. */
.aq-action-row__label{ flex: 1 1 auto; min-width: 0; }

/* The panel's 4px leading rule. Bootstrap's .border-4 supplies the width; the
   colour was an inline #f59e0b, which stayed the same amber on the dark
   surface. --warning is the theme-aware equivalent. */
.aq-action-panel{ border-color: var(--warning) !important; }

/* -------------------------------------------------- dashboard panel card -- */
.aq-action-card{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
/* Hover was a hardcoded warm tint (#fff7ed) that stayed light in dark mode.
   --surface-2 is the theme-aware equivalent and keeps the count's contrast:
   the status tokens are verified against --surface-2 as well as --surface. */
.aq-action-card:hover{ background: var(--surface-2); border-color: var(--line-interactive); }
.aq-action-card:focus-visible{
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.aq-action-card__body{ flex: 1 1 auto; min-width: 0; }
.aq-action-card__label{
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--ink-muted);
}
.aq-action-card__chevron{ color: var(--ink-muted); flex: 0 0 auto; }
.aq-action .aq-action__icon{ font-size: var(--fs-h3); line-height: 1; flex: 0 0 auto; }