/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.badge--profit {
  color: var(--color-profit);
  background: var(--color-profit-soft);
}

.badge--loss {
  color: var(--color-loss);
  background: var(--color-loss-soft);
}

.badge--neutral {
  color: var(--color-text-secondary);
  background: var(--color-surface-hover);
}

.badge--accent {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.badge--warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

/* Settings -> Data: label/value status list for Backup and Sync. */
.data-status {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--space-3) var(--space-5);
  margin: 0;
  font-size: var(--fs-footnote);
}

.data-status dt {
  color: var(--color-text-secondary);
}

.data-status dd {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.data-status__meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.data-status__meter .mini-bar {
  flex: 0 0 120px;
}

.mini-bar__fill.is-warning {
  background: var(--color-warning);
}

@media (max-width: 560px) {
  .data-status {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .data-status dd + dt {
    margin-top: var(--space-3);
  }
}

/* An inline text action inside running copy (e.g. "Forget token"). */
.link-button {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}


/* An account's name with its colour dot (TJ.Components.UI.accountTagHtml,
   audit Etap 6.4). --acct is the account's colour token: identity, never
   direction. */
/* Plain inline text, not inline-flex: a table cell that truncates with an
   ellipsis (the compact phone row) cannot truncate inside an atomic box -
   it clipped the separator after the name instead. */
.acct-tag {
  display: inline;
}

.acct-tag__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 2px;
  background: var(--acct);
  vertical-align: 0.05em;
}

/* The account filter row (TJ.Components.AccountFilter, audit Etap 6.5).
   The pill-toggle scrolls sideways when the accounts outgrow the width. */
.acct-filter-row {
  display: flex;
  min-width: 0;
}

.acct-filter .pill-toggle__opt {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Inside a tab's content (the Planner's Challenges tab) it is the first
   thing in the slot, not a flex child of .view-container with its gap. */
[data-tab-content] > .acct-filter-row {
  margin-bottom: var(--space-5);
}

/* On a phone the account filter is a main navigation choice: full 44px
   touch targets, taller than the other pill toggles on purpose. */
@media (max-width: 700px) {
  .acct-filter .pill-toggle__opt {
    min-height: 44px;
  }
}