/* Admin component styles — colors all reference brand_tokens.css custom
   properties so future per-program theming is a scoped override. */

/* ---------- Avatar ---------- */
.admin-avatar--sm { width: 24px; height: 24px; font-size: 10px; letter-spacing: 0; }
.admin-avatar--md { width: 32px; height: 32px; font-size: 12px; letter-spacing: 0.02em; }
.admin-avatar--lg { width: 40px; height: 40px; font-size: 14px; letter-spacing: 0.02em; }

/* ---------- Status pill ---------- */
.admin-status-pill--active        { background: var(--zw-green-50);  color: var(--zw-green-900); }
.admin-status-pill--active  .admin-status-pill__dot  { background: var(--zw-green-700); }

.admin-status-pill--inactive      { background: var(--bg-3);         color: var(--fg-3); }
.admin-status-pill--inactive .admin-status-pill__dot { background: var(--fg-3); }

.admin-status-pill--pending       { background: #fff3dc;             color: #8a5a00; }
.admin-status-pill--pending .admin-status-pill__dot  { background: var(--zw-sun); }

.admin-status-pill--error         { background: #fdecec;             color: #8a1f1f; }
.admin-status-pill--error   .admin-status-pill__dot  { background: var(--zw-danger); }

/* ---------- Tag pill ---------- */
.admin-tag-pill--blue    { background: var(--zw-blue-50);  color: var(--zw-blue-800); }
.admin-tag-pill--green   { background: var(--zw-green-50); color: var(--zw-green-900); }
.admin-tag-pill--sun     { background: #fff3dc;            color: #8a5a00; }
.admin-tag-pill--clay    { background: #fbe7df;            color: #8a3a1f; }
.admin-tag-pill--sky     { background: #e4f4fa;            color: #1f4a5e; }
.admin-tag-pill--moss    { background: #ebf0e3;            color: #2f4424; }
.admin-tag-pill--neutral { background: var(--bg-3);        color: var(--fg-2); }

/* ---------- Progress bar ---------- */
.admin-progress-bar__track { background: var(--zw-line-2); }
.admin-progress-bar--blue    .admin-progress-bar__fill { background: var(--zw-blue-700); }
.admin-progress-bar--green   .admin-progress-bar__fill { background: var(--zw-green-700); }
.admin-progress-bar--neutral .admin-progress-bar__fill { background: var(--fg-3); }

/* ---------- Table ---------- */
.admin-table__th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
}
.admin-table__th--right    { text-align: right; }
.admin-table__th--center   { text-align: center; }

.admin-table__th--number,
.admin-table__td--number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}

.admin-table__sort-button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-transform: inherit;
  letter-spacing: inherit;
}
.admin-table__sort-button:hover { color: var(--fg-1); }
.admin-table__sort-icon        { color: var(--fg-3); opacity: 0.7; }
.admin-table__sort-button:hover .admin-table__sort-icon { color: var(--fg-2); opacity: 1; }

.admin-table__td        { font-size: 14px; color: var(--fg-1); vertical-align: middle; }
.admin-table__td--right { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table__td--center{ text-align: center; }

.admin-table__data-row             { transition: background-color 120ms var(--ease-out); }
.admin-table__data-row:hover       { background: var(--bg-2); }

.admin-table__checkbox {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-1);
  border-radius: 4px;
  background: var(--zw-surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.admin-table__checkbox:hover   { border-color: var(--zw-blue-700); }
.admin-table__checkbox:checked { background: var(--zw-blue-700); border-color: var(--zw-blue-700); }
.admin-table__checkbox:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 1.75px solid #fff;
  border-bottom: 1.75px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}