/* ============================================================
   VNP — SHARED COMPONENTS  (canonical: /shared-css/components.css)
   Chip, button, and badge systems. Depends on tokens.css — load
   tokens.css BEFORE this file. SYNCED across repos: edit the
   canonical, then copy into each repo's assets/css/. Keep copies
   byte-identical. Page-specific overrides (e.g.
   .reviewer-notes > .btn--text, .location--shared .badge) stay
   inline in each page.
   ============================================================ */

/* =======================================================
   BUTTONS & LINKS (in info-card edit mode + elsewhere)
   ======================================================= */
/* Figma source: file vpbHnXDbr7zcEWfQ5xkEDJ, "button" set @ node 806:12418.
   Styles: primary, secondary, on-dark, tertiary (+ text / text-on-dark,
   folded in from .text-link in a later pass). Size: default (large) +
   .btn--sm. State: default + :disabled / [aria-disabled]. Colors come
   from the --c-action-* semantic tokens in :root. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);          /* 16 / 24 — Figma large */
  border-radius: var(--r-button);          /* 16 */
  border: var(--bw-medium) solid transparent;
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);         /* 600 — one step down from Figma body-bold; reads less heavy */
  font-size: var(--fs-body);               /* 16 */
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Small = same type as large, just tighter vertical padding (8 vs 16). */
.btn--sm {
  padding: var(--s-2) var(--s-5);          /* 8 / 24 */
}

/* Styles (default state) */
.btn--primary {
  background: var(--c-action-primary-surface);
  color: var(--c-action-primary-text);
}
.btn--secondary {
  background: var(--c-action-secondary-surface);
  color: var(--c-action-secondary-text);
  border-color: var(--c-action-secondary-border);
}
.btn--on-dark {
  background: var(--c-surface-page);
  color: var(--c-text-primary);
  border-color: var(--c-border-subtle);
}
.btn--tertiary {
  background: var(--c-action-tertiary-surface);
  color: var(--c-action-tertiary-text);
}
/* Hover — universal darken overlay (filled/outlined styles). */
.btn--primary:hover, .btn--secondary:hover,
.btn--on-dark:hover, .btn--tertiary:hover {
  box-shadow: inset 0 0 0 999px var(--state-hover);
}

/* Inactive / disabled — fills alias border tokens per Figma action/inactive/*. */
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; box-shadow: none; }
.btn--primary:disabled, .btn--primary[aria-disabled="true"],
.btn--secondary:disabled, .btn--secondary[aria-disabled="true"] {
  background: var(--c-action-inactive-surface);
  color: var(--c-action-inactive-text);
  border-color: transparent;
}
.btn--on-dark:disabled, .btn--on-dark[aria-disabled="true"],
.btn--tertiary:disabled, .btn--tertiary[aria-disabled="true"] {
  background: var(--c-action-inactive-surface-on-dark);
  color: var(--c-action-inactive-text-on-dark);
  border-color: transparent;
}

/* Text buttons (Figma primary-text / on-dark-text) — text-only, no box.
   Animated underline wipes in on hover (folded in from the old .text-link);
   these do NOT take the neutral hover overlay. Inherit the .btn base
   (inline-flex, gap, bold, size) and strip the box away. */
.btn--text, .btn--text-on-dark {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.18s ease;
}
.btn--text, .btn--text-on-dark { font-weight: var(--fw-semibold); } /* links read lighter than filled buttons */
.btn--text { color: var(--c-action-text); }                 /* brand-blue */
.btn--text-on-dark { color: var(--c-action-text-on-dark); } /* white, for dark surfaces */
.btn--text--muted { color: var(--c-brand-blue-light); }     /* lighter-blue, lower emphasis */
.btn--text:hover, .btn--text-on-dark:hover { background-size: 100% 1.5px; }
.btn--text:disabled, .btn--text[aria-disabled="true"],
.btn--text-on-dark:disabled, .btn--text-on-dark[aria-disabled="true"] {
  color: var(--c-action-inactive-text); background-image: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn--text, .btn--text-on-dark { transition: none; }
}

/* Filter toggle (toolbar) — neutral .btn that turns blue-tinted when its panel is
   open. Defined after the base, so it wins the border without a specificity hack. */
.btn--filter {
  background: var(--c-surface-page);
  border: var(--bw-default) solid var(--c-border-subtle);
  color: var(--c-text-primary);
}
.btn--filter:hover {
  box-shadow: inset 0 0 0 999px var(--state-hover);
}
.btn--filter--active {
  background: var(--c-brand-blue-tint);
  border-color: var(--c-brand-blue);
  color: var(--c-brand-blue);
}

/* ===== CHIP (status pill) ===== */
/* Chip (status pill) — hugs content, anchored to start of column.
   Figma source: VNP-Michigan-early-vote (file vpbHnXDbr7zcEWfQ5xkEDJ),
   "status-chips" set @ node 806:12485. Variants: unverified,
   change-pending, verified, rejected, inactive. Filter-bar usage adds
   .chip--selectable (interactive mode) — see below. */
.chip {
  display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label); /* Figma "label" token (1.2px on the 11px label) */
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  justify-self: start;
  width: max-content;
}
.chip--unverified {
  background: var(--c-surface-page);
  border: var(--bw-default) solid var(--c-border-default);
  color: var(--c-text-primary);
}
.chip--change-pending {
  background: var(--c-chip-blue-bg);
  color: var(--c-chip-blue-fg);
}
.chip--rejected {
  background: var(--c-chip-red-bg);
  color: var(--c-chip-red-fg);
}
.chip--verified {
  background: var(--c-chip-green-bg);
  color: var(--c-chip-green-fg);
}
.chip--inactive {
  background: var(--c-chip-muted-bg);
  color: var(--c-chip-muted-fg);
}
.chip--received {
  /* New-location-submitted chip — gold, distinct from the blue
     change-pending chip. Mirrors the gold "received" status banner. */
  background: var(--c-chip-gold-bg);
  color: var(--c-chip-gold-fg);
}

/* Selectable mode — the same chip used as a toggle button in the filter
   bar. Adds interactivity only: hover darkens via the universal overlay,
   and when active (aria-pressed) a 2px ring in the chip's own color family
   signals the selection. A transparent medium border reserves the ring's
   space so dimensions never shift between states. Status colors come from
   the shared .chip--<status> rules above — single source of truth. */
.chip--selectable {
  border: var(--bw-medium) solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.chip--selectable:hover {
  box-shadow: inset 0 0 0 999px var(--state-hover);
}
/* Unverified keeps its visible outline even in selectable mode. */
.chip--selectable.chip--unverified { border-color: var(--c-border-default); }
/* Active (pressed) ring, tinted to each status' foreground. */
.chip--selectable[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-text-primary); }
.chip--selectable[aria-pressed="true"].chip--change-pending { box-shadow: 0 0 0 2px var(--c-chip-blue-fg); }
.chip--selectable[aria-pressed="true"].chip--rejected       { box-shadow: 0 0 0 2px var(--c-chip-red-fg); }
.chip--selectable[aria-pressed="true"].chip--verified       { box-shadow: 0 0 0 2px var(--c-chip-green-fg); }
.chip--selectable[aria-pressed="true"].chip--inactive       { box-shadow: 0 0 0 2px var(--c-text-secondary); }
.chip--selectable[aria-pressed="true"].chip--received       { box-shadow: 0 0 0 2px var(--c-chip-gold-fg); }


/* ----- Staff dashboard status set (not-started / in-progress / needs-attention / complete / all) ----- */
.chip--not-started     { background: var(--c-surface-page); border: var(--bw-default) solid var(--c-border-default); color: var(--c-text-primary); }
.chip--in-progress     { background: var(--c-chip-blue-bg);   color: var(--c-chip-blue-fg); }
.chip--needs-attention { background: var(--c-chip-blush-bg); color: var(--c-chip-blush-fg); }
.chip--complete        { background: var(--c-chip-green-bg);  color: var(--c-chip-green-fg); }
.chip--all             { background: var(--c-text-primary); color: var(--c-text-on-dark); }   /* filter "All" only */
.chip--selectable.chip--not-started { border-color: var(--c-border-default); }
.chip--selectable[aria-pressed="true"].chip--in-progress     { box-shadow: 0 0 0 2px var(--c-chip-blue-fg); }
.chip--selectable[aria-pressed="true"].chip--needs-attention { box-shadow: 0 0 0 2px var(--c-chip-blush-fg); }
.chip--selectable[aria-pressed="true"].chip--complete        { box-shadow: 0 0 0 2px var(--c-chip-green-fg); }
/* ===== BADGE (location-type indicator) ===== */
/* =======================================================
   BADGE — circular location-type indicator (dropbox = red, EV = blue).
   Figma source: file vpbHnXDbr7zcEWfQ5xkEDJ, "badge" set @ node 849:14271.
   Size: --sm (25px, filter chips) / --lg (40px, table rows). Type sets the
   tint bg + icon size. Icon fills are baked into the SVG symbols (which
   live in <use> shadow trees). Icon sizes match the Figma spec per
   size × type.
   ======================================================= */
.badge {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  overflow: hidden;
}
.badge--sm { width: 25px; height: 25px; }
.badge--lg { width: 40px; height: 40px; }
.badge--dropbox { background: var(--c-icon-dropbox-bg); }
.badge--ev      { background: var(--c-icon-ev-bg); }
.badge--sm.badge--dropbox svg { width: 10px; height: 12px; }
.badge--sm.badge--ev      svg { width: 12px; height: 12px; }
.badge--lg.badge--dropbox svg { width: 20px; height: 23px; }
.badge--lg.badge--ev      svg { width: 20px; height: 20px; }