/* Admin (super-only) backend chrome. Loaded only by layouts/admin.html.erb,
   so it never bleeds into the public site.

   Palette borrowed from the public site (see application.css):
     EA deep navy  #1a3a6b   sidebar, header
     EA hover navy #15306b   active/hover deepening
     Earth blue    #0084D1   accent: CTA, brand half
     Yellow accent #FFD400   logo ring, active-nav highlight
     Body text     #15306b   matches main site
     Page bg       #f9fafb   matches main site */

.admin-shell {
  display: flex;
  min-height: 100vh;
  background: #f9fafb;
  color: #15306b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Sidebar ── */

.admin-sidebar {
  width: 256px;
  background: #1a3a6b;
  color: #e8eefc;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.admin-sidebar__brand {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.admin-sidebar__brand a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.admin-sidebar__brand .admin-brand__ring {
  display: inline-block;
  width: 18px; height: 18px;
  border: 3px solid #FFD400;
  border-radius: 50%;
}
.admin-sidebar__brand .admin-brand__earth  { color: #0084D1; }
.admin-sidebar__brand .admin-brand__angels { color: #ffffff; }
.admin-sidebar__brand .admin-brand__tag {
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFD400;
  border: 1px solid rgba(255, 212, 0, 0.5);
  border-radius: 4px;
  padding: 2px 6px;
}

.admin-sidebar__nav {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: #cfd9ee;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 120ms, color 120ms;
}

.admin-nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.admin-nav-link.is-active {
  background: #15306b;
  color: #fff;
  border-left: 3px solid #FFD400;
  padding-left: 11px;
}

/* ── Main column ── */

.admin-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-header {
  height: 60px;
  background: #1a3a6b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.admin-header__title {
  font-size: 18px;
  font-weight: 600;
}

/* page_actions slot — Edit / Delete / Back etc. rendered inline in the header. */
.admin-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 16px;
}
.admin-header__actions .admin-btn,
.admin-header__actions form { margin: 0; }

.admin-header__user {
  font-size: 14px;
  color: #cfd9ee;
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-header__user form { display: inline; }

.admin-header__user button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.admin-header__user button:hover { background: rgba(255,255,255,0.10); }

/* Back to front-facing app + circular avatar chip on the admin topbar.
   Replaces the old email + sign-out button pair. Sign-out is available
   from the front-facing settings modal (opened via the avatar). */
.admin-header__back {
  color: #0f172a;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}
.admin-header__back:hover { background: #f1f5f9; color: #0f172a; }
.admin-header__back svg { vertical-align: -3px; margin-right: 6px; }
.admin-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: #e8843c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.admin-header__avatar:hover { filter: brightness(0.92); color: #fff; }
.admin-header__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-header__avatar span { line-height: 1; }

.admin-content { padding: 32px; }

.admin-content__intro {
  margin-bottom: 24px;
  color: #4b5563;
  font-size: 15px;
}
.admin-content__intro strong { color: #15306b; }

/* ── Dashboard cards ── */

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.admin-card {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 120ms, box-shadow 120ms;
}
.admin-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.admin-card__label {
  font-size: 15px;
  color: #6b7280;
  font-weight: 500;
}

.admin-card__count {
  margin-top: 8px;
  font-size: 32px;
  font-weight: 700;
}
.admin-card__count--organizations { color: #0084D1; }
.admin-card__count--campaigns     { color: #1a3a6b; }
.admin-card__count--opportunities { color: #c89800; }

.admin-card__cta {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #0084D1;
}

/* ── Flash ── */

.admin-flash {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}
.admin-flash--notice { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.admin-flash--alert  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ── Generic admin index (used by stub pages) ── */

.admin-empty {
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: #6b7280;
}

/* ── Toolbar row (above tables) ── */

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.admin-toolbar__spacer { flex: 1; }

/* ── Buttons ── */

/* Standardized admin buttons: white / light-grey background with a colored
   label. Neutral shell so every button in the back office feels like the
   same control; the label color signals intent. Applies to link_to and
   button_to alike. */
.admin-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.admin-btn:hover { background: #f3f4f6; color: #0f172a; }

.admin-btn--primary { color: #1d4ed8; }
.admin-btn--primary:hover { background: #eff6ff; color: #1d4ed8; }

.admin-form__row { margin-bottom: 12px; }
.admin-form__checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px;
  margin-top: 6px;
}
.admin-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
}
.admin-form__checkbox input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

.admin-btn--secondary { color: #1a3a6b; }
.admin-btn--secondary:hover { background: #f3f4f6; color: #1a3a6b; }

/* ── Tables ── */

.admin-table-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table thead th {
  text-align: left;
  background: #f8fafc;
  color: #4b5563;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.admin-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.admin-table tbody tr:hover {
  background: #f9fafb;
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table__actions {
  text-align: right;
  white-space: nowrap;
}

.admin-table__actions form { display: inline; margin-left: 12px; }
.admin-table__actions .admin-link { margin-left: 12px; }
.admin-table__actions .admin-link:first-child { margin-left: 0; }

/* ── Links ── */

.admin-link {
  color: #0084D1;
  text-decoration: none;
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}
.admin-link:hover { color: #15306b; text-decoration: underline; }

.admin-link--danger { color: #b91c1c; }
.admin-link--danger:hover { color: #7f1d1d; }

/* ── Pills ── */

.admin-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.admin-pill--ok   { background: #d1fae5; color: #065f46; }
.admin-pill--off  { background: #fee2e2; color: #991b1b; }
.admin-pill--info { background: #dbeafe; color: #1e40af; }

/* ── Inline code (slugs etc.) ── */

.admin-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 1px 6px;
  color: #1f2937;
}

/* ── Card panel (wraps forms / detail blocks) ── */

.admin-card-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Forms ── */

.admin-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 24px;
}

.admin-form__row { display: flex; flex-direction: column; gap: 6px; }
.admin-form__row--wide { grid-column: 1 / -1; }

.admin-form__label {
  font-size: 14px;
  font-weight: 600;
  color: #15306b;
}

.admin-form__input,
.admin-form__select,
.admin-form__textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #15306b;
  transition: border-color 120ms, box-shadow 120ms;
}
.admin-form__input:focus,
.admin-form__select:focus,
.admin-form__textarea:focus {
  outline: none;
  border-color: #0084D1;
  box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.15);
}

.admin-form__textarea { resize: vertical; min-height: 88px; }

/* Filter-row width caps: search stays reasonably wide but not full-page;
   status auto-sizes to its longest option ("Suspended") plus padding. */
.admin-form__input--search   { width: 280px; max-width: 100%; }
.admin-form__select--fit     { width: auto; min-width: 0; padding-right: 32px; }
.admin-form__input--password { width: 320px; max-width: 100%; }

.admin-form__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #15306b;
  cursor: pointer;
}
.admin-form__check input { width: 16px; height: 16px; }

.admin-form__help {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.admin-form__actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ── Errors block ── */

.admin-errors {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #7f1d1d;
}
.admin-errors h3 { margin: 0 0 6px 0; font-size: 14px; font-weight: 700; }
.admin-errors ul { margin: 0; padding-left: 18px; font-size: 14px; }

/* ── Detail view (definition list) ── */

.admin-detail {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admin-detail__grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px 20px;
  margin: 0;
}
.admin-detail__grid dt {
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.admin-detail__grid dd { margin: 0; color: #15306b; font-size: 14px; }
.admin-detail__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.admin-detail__list li { display: flex; align-items: center; gap: 8px; }

.admin-muted { color: #9ca3af; }

/* Sectioned admin forms (Organizations edit/create). Each section is a
   labeled visual block inside the same card-panel. */
.admin-form__section {
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
  margin-top: 18px;
}
.admin-form__section:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.admin-form__section-title {
  margin: 0 0 14px 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1a3a6b;
}
.admin-form__current-image {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.admin-form__file {
  font-size: 14px;
  color: #4b5563;
}

/* ── Campaign detail page (admin/campaigns/show) ─────────────────────────
   Photo hero + headline + meta + funding box + body. The donation
   progress bar will land here later, behind the funding box. */

.campaign-detail {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.campaign-detail__hero {
  position: relative;
  max-height: 360px;
  overflow: hidden;
  background: #0f172a;
}
.campaign-detail__hero-img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
}
.campaign-detail__urgent {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #dc2626;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(220,38,38,0.4);
}

.campaign-detail__header {
  padding: 24px 28px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.campaign-detail__org {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 12px;
}
.campaign-detail__org-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

.campaign-detail__title {
  margin: 0 0 14px 0;
  font-size: 28px;
  font-weight: 800;
  color: #15306b;
  line-height: 1.2;
}

.campaign-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.campaign-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #6b7280;
}

.campaign-detail__funding {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
}
@media (max-width: 720px) { .campaign-detail__funding { grid-template-columns: 1fr; } }

.campaign-detail__goal,
.campaign-detail__impact {
  padding: 20px 28px;
}
.campaign-detail__goal { border-right: 1px solid #e5e7eb; }
@media (max-width: 720px) { .campaign-detail__goal { border-right: 0; border-bottom: 1px solid #e5e7eb; } }

.campaign-detail__goal-label,
.campaign-detail__impact-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 4px;
}
.campaign-detail__goal-value {
  font-size: 30px;
  font-weight: 800;
  color: #0084D1;
  line-height: 1;
}
.campaign-detail__impact-text {
  margin: 0;
  font-size: 14px;
  color: #15306b;
  line-height: 1.45;
}

.campaign-detail__block {
  padding: 22px 28px;
  border-bottom: 1px solid #f3f4f6;
}
.campaign-detail__block-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a3a6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.campaign-detail__block-body {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}
.campaign-detail__block-body p { margin: 0 0 10px; }
.campaign-detail__block-body p:last-child { margin-bottom: 0; }

.campaign-detail__footer {
  padding: 18px 28px 22px;
  background: #fafbfd;
}

/* ── Story 46.6: Audit browsing tab ────────────────────────────────────
   Filter bar + table styling for /admin/audits. Rides on top of the
   shared .admin-table primitive. */
.admin-audit-filters {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.admin-audit-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: end;
}
.admin-audit-filters__row + .admin-audit-filters__row { margin-top: 10px; }
.admin-audit-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-audit-filters__actions {
  display: flex;
  gap: 8px;
  align-items: end;
  margin-left: auto;
}
.admin-audit-filters .admin-form__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-audit-filters .admin-form__select,
.admin-audit-filters .admin-form__input {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  min-width: 160px;
}

.admin-table--audit .admin-table__ts {
  white-space: nowrap;
  font-size: 13px;
  color: #6b7280;
}
.admin-table--audit .admin-table__action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #1e40af;
}
.admin-table--audit .admin-table__subject-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #9ca3af;
  margin-left: 4px;
}
.admin-table--audit .admin-table__meta {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  max-width: 480px;
  overflow-x: auto;
}
.admin-note {
  margin-top: 14px;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}

/* ── Story 47.5: Per-campaign approval trail ───────────────────────────
   Vertical timeline of AdminAudit entries scoped to one campaign. */
.campaign-audit__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.campaign-audit__entry {
  padding: 12px 0;
  border-top: 1px solid #f3f4f6;
}
.campaign-audit__entry:first-child { border-top: 0; padding-top: 0; }
.campaign-audit__when {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 4px;
}
.campaign-audit__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.campaign-audit__action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
}
.campaign-audit__by {
  font-size: 13.5px;
  color: #374151;
}
.campaign-audit__meta {
  margin-top: 6px;
  font-size: 12.5px;
}
.campaign-audit__meta summary {
  cursor: pointer;
  color: #4b5563;
  font-size: 12.5px;
}
.campaign-audit__meta pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
}
.campaign-audit__empty {
  margin: 0;
  font-size: 13.5px;
}

/* ── Stories 47.1 + 47.2: Campaign review queue ────────────────────────
   Approve / reject / request-changes actions inline per row. Both
   reason-driven actions live behind a <details> so the primary CTA
   (Approve) stays visually prominent. */
.admin-table--review-queue td { vertical-align: top; }
.admin-table--review-queue .admin-table__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.admin-inline-form {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f9fafb;
}
.admin-inline-form summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.admin-inline-form form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-btn--danger { color: #dc2626; }
.admin-btn--danger:hover { background: #fef2f2; color: #dc2626; }
.admin-btn--warn { color: #b45309; }
.admin-btn--warn:hover { background: #fffbeb; color: #b45309; }
.admin-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.admin-form__actions .admin-btn { text-decoration: none; }
.admin-pill--warn {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

/* ── Story 46.9 · Users admin table + inline role select ───────────────
   The role dropdown lives directly inside the row so admins can flip a
   role without opening a modal. `disabled` clones the current-user guard
   from the server side so the UI can't even attempt a self-demotion. */
.admin-inline-role {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.admin-inline-role select { min-width: 120px; }
.admin-table--users td { vertical-align: middle; }
.admin-table--users .admin-table__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Story 46.1 · Attention + stat variants of the dashboard cards ─────
   admin-card--attention nudges the Pending-review card toward action;
   admin-card--stat is for non-clickable readonly aggregates. */
.admin-card--attention {
  border-color: #fde68a;
  background: #fffbeb;
}
.admin-card--stat {
  background: #f9fafb;
  cursor: default;
}
.admin-card__count--users        { color: #4338ca; }
.admin-card__count--review       { color: #b45309; }
.admin-card__count--impact       { color: #0f766e; }

/* ── Story 46.3 · Category distribution donut ──────────────────────────
   Inline SVG donut + color-coded legend. No JS chart lib. */
.admin-chart {
  margin-top: 24px;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.admin-chart__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: #1a3a6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-chart__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
}
.admin-chart__svg { width: 200px; height: 200px; }
.admin-chart__legend {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-chart__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.admin-chart__swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
}
.admin-chart__legend-label {
  font-weight: 600;
  color: #111827;
  min-width: 100px;
}
.admin-chart__legend-value {
  color: #6b7280;
  font-size: 13.5px;
}

/* ── Story 46.2 · Revenue line chart ──────────────────────────────── */
.admin-chart__revenue {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}

/* ── Story 46.12 · Transaction investigation modal ────────────────── */
.admin-transactions td.status-pending   { color: #92400e; font-weight: 600; }
.admin-transactions td.status-succeeded { color: #065f46; font-weight: 600; }
.admin-transactions td.status-failed    { color: #b91c1c; font-weight: 600; }
.admin-transactions td.status-refunded  { color: #4b5563; font-weight: 600; }

/* ── Story 47.3 · Campaign performance monitor ────────────────────── */
.perf-progress__bar {
  width: 140px;
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.perf-progress__bar span {
  display: block;
  height: 100%;
  background: #059669;
}

/* ── Story 54.7 · Role × Permission matrix ────────────────────────── */
.admin-role-matrix { overflow-x: auto; margin-top: 12px; }
.admin-table--roles th,
.admin-table--roles td { text-align: center; padding: 8px 10px; font-size: 13px; }
.admin-table--roles th.admin-role-matrix__perm-header,
.admin-table--roles td.admin-role-matrix__perm { text-align: left; max-width: 320px; }
.admin-role-matrix__category td {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left !important;
  padding: 10px 12px;
}
.admin-role-matrix__yes { color: #059669; font-weight: 700; font-size: 15px; }
.admin-role-matrix__no  { color: #d1d5db; }
.admin-role-form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.admin-role-form__perms {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.admin-role-form__perms h3 {
  font-size: 12.5px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 6px;
}
.admin-role-form__perm {
  display: flex;
  gap: 8px;
  align-items: start;
  padding: 4px 0;
  font-size: 13px;
}
.admin-role-form__actions { margin-top: 14px; display: flex; gap: 8px; align-items: center; }

/* ── Story 54.11 · Themes admin ────────────────────────────────────── */
.admin-content__section {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #1a3a6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-theme-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  vertical-align: middle;
  margin-right: 4px;
}
.admin-theme-form__colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
  margin: 8px 0 16px;
}
.admin-theme-form__color { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.admin-theme-form__color span { min-width: 130px; color: #4b5563; }
.admin-theme-form__picker { width: 40px; height: 30px; border: 0; padding: 0; cursor: pointer; }
.admin-theme-form__hex    { width: 90px; padding: 4px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; border: 1px solid #d1d5db; border-radius: 4px; }
.admin-theme-form__attachments { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }

/* Settings tabs — used at /admin/settings/roles + /admin/settings/permissions. */
.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
}
.admin-tab {
  padding: 8px 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 14px;
  text-decoration: none;
}
.admin-tab:hover { background: #f9fafb; text-decoration: none; }
.admin-tab--active { background: #2563eb; color: #ffffff; border-color: #2563eb; }
.admin-tab--active:hover { background: #1d4ed8; color: #ffffff; }

/* Owner Tasks (whiteboard replacement) — admin settings tab */
.owner-tasks__new {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0 16px;
}
.owner-tasks__new .owner-tasks__input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}
.owner-tasks__kind {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
}
.owner-tasks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.owner-tasks__row {
  display: grid;
  grid-template-columns: 24px 24px 1fr auto 32px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.owner-tasks__row--drag-ghost { opacity: 0.4; }
.owner-tasks__row--done .owner-tasks__title input { text-decoration: line-through; color: #9ca3af; }
.owner-tasks__grip {
  cursor: grab;
  color: #9ca3af;
  user-select: none;
  font-size: 18px;
  line-height: 1;
}
.owner-tasks__grip:active { cursor: grabbing; }
.owner-tasks__check { display: contents; }
.owner-tasks__check input[type=checkbox] { width: 18px; height: 18px; }
.owner-tasks__title { display: contents; }
.owner-tasks__title input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
}
.owner-tasks__title input:focus { border-color: #d1d5db; background: #ffffff; outline: none; }
.owner-tasks__kind-form { display: contents; }
.owner-tasks__badge {
  border: none;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.owner-tasks__badge--feature { background: #dbeafe; color: #1d4ed8; }
.owner-tasks__badge--defect  { background: #fee2e2; color: #b91c1c; }
.owner-tasks__delete {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
.owner-tasks__delete:hover { color: #b91c1c; }

/* ── Financial Controller dashboard (Epic 48 restub, 2026-07-25) ───
   Ported from the Figma Make export at tmp/Financial Controller Figma Code/.
   4 gradient KPI tiles + 5 tab panels. All rules scoped under
   .fc-dashboard so nothing leaks into other portals. */
.fc-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fc-dashboard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.fc-dashboard__title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: #111827;
}
.fc-dashboard__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #6b7280;
}
.fc-dashboard__header-actions {
  display: flex;
  gap: 8px;
}

/* Buttons — Financial Controller variants. Reused across the dashboard. */
.fc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
/* Force the browser's `hidden` UA rule to win over the .fc-btn
   display:inline-flex above (same specificity → author-order wins →
   .fc-btn beat [hidden] without this). Needed so fc-tabs can hide
   Prev/Next buttons on boundary tabs. */
.fc-btn[hidden] { display: none; }
.fc-btn--outline {
  color: #374151;
  background: #ffffff;
  border-color: #d1d5db;
}
/* 2026-08-07 · Inverted hover — dark navy fill + white text — so
   outline buttons signal "actionable" clearly on hover. Applies
   platform-wide; disabled buttons are still overridden by the
   default `:disabled` state (opacity + cursor) below. */
.fc-btn--outline:hover {
  background: #1f2937;
  color: #ffffff;
  border-color: #1f2937;
}
.fc-btn--outline:hover svg { stroke: #ffffff; }
.fc-btn--outline:disabled:hover,
.fc-btn--outline[disabled]:hover {
  background: #ffffff;
  color: #374151;
  border-color: #d1d5db;
}
.fc-btn--outline:disabled:hover svg,
.fc-btn--outline[disabled]:hover svg { stroke: currentColor; }
.fc-btn--green {
  color: #ffffff;
  background: #16a34a;
  border-color: #16a34a;
}
.fc-btn--green:hover:not(:disabled) { background: #15803d; }

/* 2026-08-08 · Color-coded row-action variants for the OM dashboard's
   Organization Info / Details / Interview trio. Each fills with a
   distinct brand color at rest and inverts on hover (transparent bg,
   colored text + border) — matches the user's request that the
   buttons carry a clear identity while still hinting at the hover
   affordance. */
/* 2026-08-08 · Color-coded fill variants for the OM dashboard's row
   action trio (and any future surface needing bright pills). Class
   names describe the COLOR, not the role — swapping which button
   uses which color is a view-only change. All three invert on hover
   (fill → white bg + colored text/border/icon). */
.fc-btn--pill-navy {
  color: #ffffff;
  background: #15306b;
  border-color: #15306b;
}
.fc-btn--pill-navy:hover:not(:disabled) {
  background: #ffffff;
  color: #15306b;
  border-color: #15306b;
}
.fc-btn--pill-navy:hover:not(:disabled) svg { stroke: #15306b; }

.fc-btn--pill-blue {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
}
.fc-btn--pill-blue:hover:not(:disabled) {
  background: #ffffff;
  color: #2563eb;
  border-color: #2563eb;
}
.fc-btn--pill-blue:hover:not(:disabled) svg { stroke: #2563eb; }

.fc-btn--pill-orange {
  color: #ffffff;
  background: #ea580c;
  border-color: #ea580c;
}
.fc-btn--pill-orange:hover:not(:disabled) {
  background: #ffffff;
  color: #ea580c;
  border-color: #ea580c;
}
.fc-btn--pill-orange:hover:not(:disabled) svg { stroke: #ea580c; }

.fc-btn--pill-green {
  color: #ffffff;
  background: #16a34a;
  border-color: #16a34a;
}
.fc-btn--pill-green:hover:not(:disabled) {
  background: #ffffff;
  color: #16a34a;
  border-color: #16a34a;
}
.fc-btn--pill-green:hover:not(:disabled) svg { stroke: #16a34a; }
.fc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fc-link {
  color: #15306b;
  text-decoration: none;
  font-weight: 600;
}
.fc-link:hover { text-decoration: underline; }

/* ── Hero KPI tiles ─────────────────────────────────────────────── */
.fc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .fc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fc-kpi-grid { grid-template-columns: 1fr; }
}
.fc-kpi {
  padding: 20px;
  border-radius: 12px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.fc-kpi--green  { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.fc-kpi--blue   { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.fc-kpi--purple { background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%); }
.fc-kpi--orange { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
.fc-kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.fc-kpi__icon { opacity: 0.85; }
.fc-kpi__badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.fc-kpi__label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
}
.fc-kpi__value {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fc-kpi__footnote {
  margin: 8px 0 0;
  font-size: 11px;
  opacity: 0.75;
}

/* 2026-08-09 · Row that hosts .fc-tabs on the left + a page-level
   action button on the right (e.g. OM dashboard's "Invite Organization"
   moved out of the old Organization Management card). */
.fc-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 2026-08-09 · Bumped 12→32px so the tab pill container and the
     right-aligned Invite Organization button have clear breathing
     room, especially when the row wraps on narrow viewports. */
  gap: 32px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ── Tab nav ────────────────────────────────────────────────────── */
.fc-tabs {
  display: flex;
  flex-wrap: wrap;
  /* 2026-08-09 · Was 4px — visually the tabs looked flush with each
     other. Bumped to 8px inner gap + 6px outer padding so the active
     pill has clear breathing room. */
  gap: 8px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: fit-content;
}
.fc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.fc-tab:hover { background: #f3f4f6; }
.fc-tab.is-active {
  background: #15306b;
  color: #ffffff;
}
.fc-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}
.fc-tab__badge--blue   { background: #3b82f6; }
.fc-tab__badge--red    { background: #ef4444; }
.fc-tab__badge--orange { background: #ea580c; }

/* 2026-08-07 · Inline uniqueness check on the Invite modal —
   green ✓ inside the input's right edge when a debounced /email-check
   or /name-check returns available; red ✗ + a short warning line
   below the field when it doesn't. See uniqueness_check_controller.js. */
.uniqueness-check__field {
  position: relative;
}
.uniqueness-check__check,
.uniqueness-check__x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.uniqueness-check__check { color: #059669; }
.uniqueness-check__x     { color: #dc2626; }
.uniqueness-check__field .new-org__input { padding-right: 30px; }
.uniqueness-check__input--invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.uniqueness-check__message {
  margin: 4px 0 0;
  font-size: 12px;
  color: #dc2626;
}

/* 2026-08-07 · IRS Nonprofit Explorer lookup panel on the Invite
   Organization modal. See nonprofit_lookup_controller.js. */
.nonprofit-lookup__button {
  margin-top: 8px;
}
.nonprofit-lookup__results {
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}
.nonprofit-lookup__result {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.nonprofit-lookup__result:last-child { border-bottom: 0; }
.nonprofit-lookup__result:hover     { background: #f9fafb; }
.nonprofit-lookup__result-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.nonprofit-lookup__result-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}
.nonprofit-lookup__empty {
  padding: 8px 12px;
  font-size: 12px;
  color: #6b7280;
}

/* 2026-08-04 · Filter pills — sub-tab-style buttons inside a panel
   that slice the panel's row list by an inline data attribute.
   Currently on the OM Active Organizations panel (All / Verified /
   Admin Approved). See pill_filter_controller.js. */
.ean-pill-row {
  display: flex;
  gap: 8px;
  padding: 0 24px 12px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ean-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #ffffff;
  color: #4b5563;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ean-pill:hover { color: #111827; border-color: #d1d5db; }
.ean-pill.is-active {
  background: #15306b;
  color: #ffffff;
  border-color: #15306b;
}
.ean-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
}
.ean-pill.is-active .ean-pill__count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.ean-pill__count--green { background: #d1fae5; color: #065f46; }
.ean-pill__count--amber { background: #fef3c7; color: #92400e; }
.ean-pill.is-active .ean-pill__count--green,
.ean-pill.is-active .ean-pill__count--amber {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.fc-tab.is-active .fc-tab__badge {
  background: rgba(255, 255, 255, 0.24);
}

/* ── Panels ─────────────────────────────────────────────────────── */
.fc-panel {
  display: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.fc-panel.is-active { display: block; }
.fc-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}
.fc-panel__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.fc-panel__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}
.fc-panel__body {
  padding: 20px 24px;
}
.fc-panel__foot {
  padding: 16px 24px;
  background: #f9fafb;
  border-top: 1px solid #f3f4f6;
  font-size: 12px;
  color: #6b7280;
}
.fc-panel__grid {
  display: grid;
  gap: 16px;
  padding: 20px 24px;
}
.fc-panel__grid--two-col { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .fc-panel__grid--two-col { grid-template-columns: 1fr; }
}
.fc-panel__card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
}
.fc-panel__card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.fc-panel__card-sub {
  margin: 2px 0 12px;
  font-size: 12px;
  color: #6b7280;
}

/* Empty state within a panel */
.fc-empty {
  padding: 32px 16px;
  text-align: center;
  color: #6b7280;
}
.fc-empty__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #374151;
}
.fc-empty__body { margin: 0; font-size: 13px; }

/* Transaction list row */
.fc-tx-list { display: flex; flex-direction: column; gap: 8px; }
/* 2026-08-04 · Force `hidden` attribute to win over `display: flex`
   here (same UA-selector specificity → author-order wins → .fc-tx-row
   beats [hidden] without this). Used by the pill_filter Stimulus
   controller on the OM Active Organizations panel. */
.fc-tx-row[hidden] { display: none; }
.fc-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.fc-tx-row:hover { background: #f9fafb; border-color: #d1d5db; }
.fc-tx-row__donor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}
.fc-tx-row__type {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: #eff6ff;
  color: #15306b;
  border-radius: 999px;
}
.fc-tx-row__campaign {
  margin-top: 2px;
  font-size: 13px;
  color: #4b5563;
}
.fc-tx-row__meta {
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
  display: flex;
  gap: 4px;
}
/* 2026-08-10 · When a row has a Dashboard link (OM portal only),
   switch to a 2-row grid so main+actions stay side-by-side and the
   Dashboard link sits at the true bottom-right of the row — matching
   the "Continue →" position on the onboarding section cards.
   Rows without a Dashboard child keep the original flex layout. */
/* 2026-08-11 · When a row has a bottom-row wrapper (actions + Dashboard),
   stack vertically: name/badges on top, buttons + dashboard on their own
   row below. Solves the "actions overflow the right edge" problem when
   the button set gets long (Review + Funds Matcher + Resend + Log).
   `:not([hidden])` guards the pill_filter's `element.hidden` toggle. */
.fc-tx-row:has(.fc-tx-row__bottom):not([hidden]) {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}
.fc-tx-row:has(.fc-tx-row__bottom) .fc-tx-row__main   { grid-column: 1; }
.fc-tx-row:has(.fc-tx-row__bottom) .fc-tx-row__amount { grid-column: 2; }
.fc-tx-row__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fc-tx-row__bottom .fc-tx-row__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;  /* 2026-10-05 · so .fc-btn--right-break has free space to push against */
}
/* 2026-10-05 · Dashboard moved inline next to Review Application
   (fc-btn--pill-blue), so the far-right standalone link is gone.
   .fc-tx-row__dashboard still exists as a legacy class — kept empty
   as a no-op in case any other row references it (mobile overrides
   in the ≤720px block still key off it). */
.fc-tx-row__dashboard { }
/* 2026-10-05 · Push secondary actions (Log, Snapshot, Delete) to the
   right edge of the row. Applied to the FIRST secondary button; its
   left margin eats the free space between primary CTAs and secondaries. */
.fc-tx-row__actions .fc-btn--right-break { margin-left: auto; }
.fc-tx-row__amount { text-align: right; flex-shrink: 0; }
/* 2026-08-07 · Per-row action buttons on the OM Active Organizations
   list (Organization Info · Details · Interview). Sits after amount,
   right-aligned. Rows are `<div>` (not `<a>`) so nested `<button>` is
   valid — the name inside becomes an explicit link via __name-link. */
.fc-tx-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* 2026-08-09 · Uniform button width in the row-actions strip so
   short-label buttons (Log, 3 letters) don't look tiny next to
   longer ones. Only applies when the row uses the LEGACY horizontal
   layout (no .fc-tx-row__bottom wrapper). Rows using the bottom-row
   layout (2026-08-11+) let buttons keep natural width so they wrap
   cleanly on narrow viewports instead of overflowing off the right. */
.fc-tx-row:not(:has(.fc-tx-row__bottom)) .fc-tx-row__actions .fc-btn { min-width: 180px; }
.fc-tx-row__actions .fc-btn { justify-content: center; }
/* 2026-10-05 · .om-row__dashboard-link custom pill removed. The
   Organization Dashboard link is now rendered inline inside
   .fc-tx-row__actions using the standard fc-btn.fc-btn--pill-blue.fc-btn--sm
   classes — same shape/size as Review Application, blue vs navy. */
.fc-tx-row__name-link {
  color: #111827;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.fc-tx-row__name-link:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.fc-tx-row__value {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #16a34a;
}
.fc-tx-row__status {
  display: inline-flex;
  padding: 2px 8px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  text-transform: uppercase;
}
.fc-tx-row__status--succeeded { background: #dcfce7; color: #14532d; }
.fc-tx-row__status--pending   { background: #fef3c7; color: #78350f; }
.fc-tx-row__status--failed    { background: #fee2e2; color: #7f1d1d; }
.fc-tx-row__status--refunded  { background: #ede9fe; color: #4c1d95; }

/* Revenue by category rows (interim bars, replace with chart in Story 48.2) */
.fc-cat-list, .fc-trend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fc-cat-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 13px;
}
.fc-cat-row__name  { font-weight: 700; color: #111827; }
.fc-cat-row__value { color: #6b7280; }
.fc-cat-row__bar,
.fc-trend-row__bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.fc-cat-row__bar span,
.fc-trend-row__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);
}
.fc-trend-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.fc-trend-row__month { color: #6b7280; font-weight: 600; }
.fc-trend-row__value { color: #111827; font-weight: 700; text-align: right; }

/* Audit trail list */
.fc-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-audit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
}
.fc-audit-row__action { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.fc-audit-row__subject { color: #6b7280; font-family: monospace; font-size: 11px; }
.fc-audit-row__meta { font-size: 11px; color: #9ca3af; display: flex; gap: 4px; }

/* Transaction search + filter form (Story 48.1 restub, 2026-07-25). */
.fc-tx-filter {
  padding: 16px 20px;
  margin: 16px 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-tx-filter__row { display: flex; gap: 12px; align-items: end; }
.fc-tx-filter__row--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .fc-tx-filter__row--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fc-tx-filter__row--grid { grid-template-columns: 1fr; }
}
.fc-tx-filter__search { flex: 1; }
.fc-tx-filter__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 4px;
}
.fc-tx-filter__input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
.fc-tx-filter__input:focus {
  outline: none;
  border-color: #15306b;
  box-shadow: 0 0 0 3px rgba(21, 48, 107, 0.12);
}
.fc-tx-filter__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.fc-tx-filter__count {
  margin-left: auto;
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

/* ==========================================================================
   Campaign Manager restub 2026-07-25 · content-management create tiles.
   Small color-coded "New X" buttons on the CM portal show view. All other
   layout (KPIs, tabs, panels, tx-list, empty states) reuses the .fc-*
   primitives above.
   ========================================================================== */

.cm-create {
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 20px 24px; margin: 0 24px 20px;
}
.cm-create__head { margin-bottom: 16px; }
.cm-create__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #111827; }
.cm-create__sub   { margin: 0; font-size: 14px; color: #6b7280; }
.cm-create__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 900px) {
  .cm-create__grid { grid-template-columns: repeat(4, 1fr); }
}
.cm-create__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px 12px; border-radius: 10px; border: 0;
  color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: filter 0.15s;
}
.cm-create__tile:hover:not(:disabled)  { filter: brightness(0.95); }
.cm-create__tile:disabled { opacity: 0.5; cursor: not-allowed; }
.cm-create__tile--blue    { background: #2563eb; }
.cm-create__tile--purple  { background: #9333ea; }
.cm-create__tile--green   { background: #16a34a; }
.cm-create__tile--orange  { background: #ea580c; }

/* Pending Verifications panel · Figma-parity 2026-07-29
   docs/FigmaCode/EA ADMIN Dashboard /src/app/components/AdminDashboard.tsx:828-892 */

.fc-panel__head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.fc-btn--sm {
  padding: 6px 10px;
  font-size: 12px;
}
.fc-btn--primary {
  color: #ffffff;
  background: #0f172a;
  border-color: #0f172a;
}
.fc-btn--primary:hover:not(:disabled) { background: #1e293b; }

.fc-verify-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px;
}
.fc-verify-row {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  background: #ffffff;
  transition: background 120ms ease;
}
.fc-verify-row:hover { background: #f9fafb; }
.fc-verify-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fc-verify-row__ident {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.fc-verify-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc-verify-row__icon--charity       { background: #dbeafe; color: #2563eb; }
.fc-verify-row__icon--institutional { background: #dbeafe; color: #2563eb; }
.fc-verify-row__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fc-verify-row__name {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}
.fc-verify-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}
.fc-verify-row__badge--type {
  background: #f3f4f6;
  color: #374151;
}
.fc-verify-row__badge--priority-high {
  background: #fee2e2;
  color: #991b1b;
}
.fc-verify-row__badge--priority-medium {
  background: #fef3c7;
  color: #92400e;
}
.fc-verify-row__badge--status {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
}
/* 2026-08-08 · Invitation-state pills on Onboarding Queue rows.
   Three variants keyed off the org's invitation timestamps —
   Accepted (green), Sent (blue), None (gray). Cluster wrapper
   stacks them horizontally with the existing Draft/status pill. */
.fc-verify-row__status-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.fc-verify-row__badge--invite-accepted {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
.fc-verify-row__badge--invite-sent {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
.fc-verify-row__badge--invite-expired {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
/* 2026-08-09 · button_to wraps its button in a <form> which by
   default gets `margin-bottom` from browser UA. Strip so the inline
   Resend button in the status cluster sits flush with sibling pills. */
.fc-verify-row__inline-form { margin: 0; }
.fc-verify-row__badge--invite-none {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.fc-verify-row__meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.fc-verify-row__actions {
  display: flex;
  gap: 8px;
}
.fc-verify-row__actions .fc-btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   EAN Admin — Settings page primitives (Story 46.11 · demo shell)
   Every control on the page is disabled and carries a tooltip pointing at
   the story that would wire it. Palette matches the existing .fc-* set:
     Titles      #111827
     Body        #374151
     Muted       #6b7280
     Border      #e5e7eb  · Hover bg #f3f4f6 · Page bg #f9fafb
     Card radius 12px     · Input radius 8px
   ─────────────────────────────────────────────────────────────────────── */

.ean-settings-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 28px 48px;
  color: #15306b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ean-settings-page__head { margin-bottom: 20px; }
.ean-settings-page__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}
.ean-settings-page__sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
  max-width: 720px;
}

/* Sub-tab nav (pill-style, reuses fc-tabs Stimulus controller) */
.ean-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: fit-content;
}
.ean-settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ean-settings-tab:hover { background: #f3f4f6; }
.ean-settings-tab.is-active { background: #15306b; color: #ffffff; }

/* Panels — hidden by default, one visible at a time */
.ean-settings-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}
.ean-settings-panel.is-active { display: flex; }

/* Cards */
.ean-settings-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ean-settings-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.ean-settings-card__desc {
  margin: 4px 0 4px;
  font-size: 13px;
  color: #6b7280;
}

/* Toggle row: label+hint on the left, control on the right */
.ean-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}
.ean-settings-row--callout {
  padding: 12px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.ean-settings-row__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.ean-settings-row__label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.ean-settings-row__hint {
  font-size: 12px;
  color: #6b7280;
}
.ean-settings-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Sub-section (border-top divider block within a card) */
.ean-settings-subsection {
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}
.ean-settings-subsection__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

/* Field: label + input stacked */
.ean-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ean-settings-field__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.ean-settings-field__hint {
  margin: 0;
  font-size: 11px;
  color: #6b7280;
}

/* Grid layouts */
.ean-settings-grid {
  display: grid;
  gap: 16px;
}
.ean-settings-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
  .ean-settings-grid--2 { grid-template-columns: 1fr; }
}
.ean-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inputs, selects, textareas — all default to disabled styling since the
   whole page is read-only in this shell. */
.ean-settings-input,
.ean-settings-select,
.ean-settings-fee-input,
.ean-settings-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #374151;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.ean-settings-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.ean-settings-input:disabled,
.ean-settings-select:disabled,
.ean-settings-fee-input:disabled,
.ean-settings-textarea:disabled {
  cursor: not-allowed;
  color: #6b7280;
  background: #f3f4f6;
  border-color: #e5e7eb;
}
.ean-settings-fee-input { max-width: 140px; }

/* Checkbox list (accepted cryptocurrencies) */
.ean-settings-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.ean-settings-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  cursor: not-allowed;
}
.ean-settings-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: not-allowed;
}

/* Toggle: styled checkbox → switch appearance */
.ean-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.ean-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ean-toggle__track {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  cursor: not-allowed;
  transition: background 120ms ease;
}
.ean-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease;
}
.ean-toggle input:checked + .ean-toggle__track { background: #15306b; }
.ean-toggle input:checked + .ean-toggle__track::after { transform: translateX(18px); }
.ean-toggle input:disabled + .ean-toggle__track { opacity: 0.75; }

/* Buttons (mirrors .fc-btn tokens but scoped to settings page) */
.ean-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ean-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ean-settings-btn--primary {
  background: #15306b;
  color: #ffffff;
  border-color: #15306b;
}
.ean-settings-btn--primary:hover:not(:disabled) { background: #1a3a6b; }
.ean-settings-btn--outline {
  color: #374151;
  background: #ffffff;
  border-color: #d1d5db;
}
.ean-settings-btn--outline:hover:not(:disabled) { background: #f9fafb; color: #111827; }
.ean-settings-btn--sm { padding: 6px 12px; font-size: 13px; }
.ean-settings-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Badges */
.ean-settings-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ean-settings-badge--green { background: #16a34a; color: #ffffff; }
.ean-settings-badge--muted { background: #f3f4f6; color: #4b5563; }

/* Cryptocurrency configuration sub-card */
.ean-settings-crypto {
  padding: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ean-settings-crypto__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ean-settings-crypto__badge {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ean-settings-crypto__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.ean-settings-crypto__desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.ean-settings-exchange {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
}
.ean-settings-exchange__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ean-settings-exchange__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.ean-settings-exchange__desc {
  margin: 2px 0 0;
  font-size: 11px;
  color: #6b7280;
}
.ean-settings-exchange__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: 13px;
}
.ean-settings-exchange__grid > div {
  display: flex;
  justify-content: space-between;
}
.ean-settings-exchange__label { color: #6b7280; }
.ean-settings-exchange__value { color: #111827; font-weight: 600; }

/* API key rows (integrations tab) */
.ean-settings-api-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ean-settings-api-key__value {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.ean-settings-api-key__meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: #6b7280;
}

/* Third-party integration rows */
.ean-settings-integration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ean-settings-integration__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ean-settings-integration__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ean-settings-integration__icon--blue   { background: #dbeafe; color: #2563eb; }
.ean-settings-integration__icon--purple { background: #ede9fe; color: #7c3aed; }
.ean-settings-integration__icon--orange { background: #ffedd5; color: #ea580c; }
.ean-settings-integration__icon--green  { background: #dcfce7; color: #16a34a; }
.ean-settings-integration__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.ean-settings-integration__desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.ean-settings-integration__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* =========================================================
   Organization Dashboard (Epic 34) — Figma-parity restub 2026-07-29
   docs/FigmaCode/Organization Dashboard/src/app/components/CharityDashboard.tsx
   ========================================================= */

.org-dash-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header + action buttons */
.org-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.org-dash-header__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}
.org-dash-header__sub {
  margin: 4px 0 0;
  font-size: 15px;
  color: #6b7280;
}
/* 2026-08-09 · Was inheriting <small>'s ~11px — hard to read.
   Bumped to a solid 15px so the "under review" note is legible
   without squinting; kept the red for signal. */
.org-dash-header__demo-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: #dc2626;
  font-weight: 500;
}

/* 2026-08-09 · Onboarding CTA banner on the Org Dashboard. Whole
   banner is a clickable link (see .org-dash-cta rules) — mirrors the
   milestone-unlocked shape the user asked for, but with blue palette
   since it's an action-needed prompt, not a success. */
.org-dash-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: #1e40af;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.org-dash-cta:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-1px);
}
.org-dash-cta__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-dash-cta__body { flex: 1; min-width: 0; }
.org-dash-cta__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
}
.org-dash-cta__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1e40af;
}
.org-dash-cta__arrow {
  font-size: 22px;
  font-weight: 700;
  color: #1e40af;
  flex-shrink: 0;
}
.org-dash-cta:hover .org-dash-cta__arrow { transform: translateX(2px); }

/* 2026-10-04 · Funds Matcher variant removed with the feature. */

/* 2026-08-09 · Multi-org switcher chip — inline, compact. Sits
   above the dashboard header when the user has access to more than
   one org (master-admin or multi-org owner). Native <select>
   handles both discoverability (click → full list) and type-ahead
   (letters jump to matching option). */
/* 2026-08-10 · Context-aware back link at top of the Organization
   Dashboard when arriving from OM. Matches ob-page__back styling. */
.org-dash-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}
.org-dash-back:hover { text-decoration: underline; }

.org-dash-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 10px 6px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  width: fit-content;
}
.org-dash-switcher__label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.org-dash-switcher__select {
  padding: 4px 28px 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: #ffffff;
  cursor: pointer;
  max-width: 320px;
}
.org-dash-switcher__select:focus {
  outline: none;
  border-color: #15306b;
  box-shadow: 0 0 0 3px rgba(21, 48, 107, 0.12);
}
.org-dash-switcher__hint {
  font-size: 12px;
  color: #9ca3af;
}
.org-dash-header__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Buttons */
.org-dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.org-dash-btn--primary {
  color: #ffffff;
  background: #030213;
  border-color: #030213;
}
.org-dash-btn--primary:hover:not(:disabled) { background: #1e293b; }
.org-dash-btn--outline {
  color: #374151;
  background: #ffffff;
  border-color: #e5e7eb;
}
.org-dash-btn--outline:hover:not(:disabled) { background: #f9fafb; }
.org-dash-btn--ghost {
  color: #6b7280;
  background: transparent;
  border-color: transparent;
}
.org-dash-btn--ghost:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.org-dash-btn--sm { padding: 4px 10px; font-size: 12px; }
.org-dash-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Organization Profile hero card */
.org-dash-hero {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 640px) { .org-dash-hero { flex-direction: column; } }
.org-dash-hero__avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-dash-hero__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.org-dash-hero__avatar-fallback {
  font-size: 28px;
  font-weight: 600;
  color: #6b7280;
}
.org-dash-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.org-dash-hero__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.org-dash-hero__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}
.org-dash-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
}
.org-dash-hero__bio {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}
.org-dash-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}
@media (max-width: 640px) { .org-dash-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.org-dash-hero__fact-label {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}
.org-dash-hero__fact-value {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* KPI Stats Grid (4-col white cards w/ pastel icon backgrounds) */
.org-dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .org-dash-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .org-dash-stat-grid { grid-template-columns: 1fr; } }
.org-dash-stat {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.org-dash-stat__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.org-dash-stat__label {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}
.org-dash-stat__value {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}
.org-dash-stat__change {
  margin: 0;
  font-size: 12px;
  color: #16a34a;
  font-weight: 500;
}
.org-dash-stat__icon {
  flex-shrink: 0;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-dash-stat__icon--green  { background: #dcfce7; color: #16a34a; }
.org-dash-stat__icon--pink   { background: #fce7f3; color: #db2777; }
.org-dash-stat__icon--blue   { background: #dbeafe; color: #2563eb; }
.org-dash-stat__icon--purple { background: #ede9fe; color: #7c3aed; }

/* Main 2-col: Campaign Management (2/3) + Sidebar (1/3) */
.org-dash-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 1024px) { .org-dash-main { grid-template-columns: 1fr; } }

/* Campaign Management column */
.org-dash-campaigns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.org-dash-campaigns__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.org-dash-campaigns__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.org-dash-campaign {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
}
@media (max-width: 640px) { .org-dash-campaign { flex-direction: column; } }
.org-dash-campaign__media {
  position: relative;
  flex-shrink: 0;
  width: 128px;
  height: 96px;
  background: linear-gradient(135deg, #a5f3fc, #0891b2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-dash-campaign__media-fallback { font-size: 42px; opacity: 0.85; }
.org-dash-campaign__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
}
.org-dash-campaign__badge--urgent    { background: #ef4444; }
.org-dash-campaign__badge--completed { background: #16a34a; }
.org-dash-campaign__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.org-dash-campaign__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}
.org-dash-campaign__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6b7280;
}
.org-dash-campaign__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.org-dash-campaign__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.org-dash-campaign__progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.org-dash-campaign__raised {
  font-weight: 600;
  color: #111827;
}
.org-dash-campaign__goal { color: #6b7280; }
.org-dash-campaign__bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.org-dash-campaign__bar-fill {
  height: 100%;
  background: #030213;
  border-radius: 4px;
  transition: width 300ms ease;
}
.org-dash-campaign__pct {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}
.org-dash-campaign__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Sidebar column (Recent Activity + This Month) */
.org-dash-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.org-dash-activity__title,
.org-dash-quick-stats__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.org-dash-quick-stats__title { font-size: 16px; }
.org-dash-activity__card,
.org-dash-quick-stats {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.org-dash-activity__card {
  display: flex;
  flex-direction: column;
}
.org-dash-activity__row {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}
.org-dash-activity__row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.org-dash-activity__icon {
  flex-shrink: 0;
  padding: 8px;
  border-radius: 8px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-dash-activity__icon--donation   { background: #dcfce7; color: #16a34a; }
.org-dash-activity__icon--milestone  { background: #dbeafe; color: #2563eb; }
.org-dash-activity__icon--completion { background: #ede9fe; color: #7c3aed; }
.org-dash-activity__icon--alert      { background: #fef3c7; color: #d97706; }
.org-dash-activity__text {
  flex: 1;
  min-width: 0;
}
.org-dash-activity__msg {
  margin: 0;
  font-size: 13px;
  color: #111827;
  line-height: 1.5;
}
.org-dash-activity__time {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.org-dash-quick-stats__row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.org-dash-quick-stats__label { color: #6b7280; }
.org-dash-quick-stats__value {
  font-weight: 600;
  color: #111827;
}

/* Ambassadors + Teams panels */
.org-dash-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
}
.org-dash-panel__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.org-dash-panel__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.org-dash-amb-row,
.org-dash-team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}
.org-dash-amb-row__ident {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.org-dash-amb-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ede9fe;
  color: #7c3aed;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.org-dash-amb-row__name-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.org-dash-amb-row__name,
.org-dash-team-row__name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.org-dash-amb-row__meta,
.org-dash-team-row__meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

/* EAN Admin · Platform Overview panel (Figma-parity 2026-07-29) */

.ean-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) { .ean-overview-grid { grid-template-columns: 1fr; } }

.ean-txn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.ean-txn-row {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
}
.ean-txn-row__main { flex: 1; min-width: 0; }
.ean-txn-row__donor-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ean-txn-row__donor { font-weight: 600; font-size: 13px; color: #111827; }
.ean-txn-row__type {
  background: #f3f4f6;
  color: #374151;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  text-transform: lowercase;
}
.ean-txn-row__recipient {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.ean-txn-row__amount-block { text-align: right; flex-shrink: 0; }
.ean-txn-row__amount {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: #16a34a;
}
.ean-txn-row__status {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: #16a34a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
}

.ean-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ean-alert-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  color: #374151;
  cursor: pointer;
  transition: background 120ms ease;
  width: 100%;
}
.ean-alert-btn:hover:not(:disabled) { background: #f9fafb; }
.ean-alert-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.ean-alert-btn--red    { color: #dc2626; border-color: #fecaca; }
.ean-alert-btn--red:hover:not(:disabled)    { background: #fef2f2; }
.ean-alert-btn--orange { color: #ea580c; border-color: #fed7aa; }
.ean-alert-btn--orange:hover:not(:disabled) { background: #fff7ed; }
.ean-alert-btn--neutral { color: #374151; }

.ean-chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}
.ean-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ean-chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ean-chart-legend__dot--blue  { background: #3b82f6; }
.ean-chart-legend__dot--green { background: #10b981; }

.ean-nav-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  background: #f9fafb;
}
.ean-nav-card summary {
  cursor: pointer;
  font-weight: 600;
  color: #374151;
  font-size: 13px;
  list-style: none;
}
.ean-nav-card summary::marker { display: none; }
.ean-nav-card summary::before { content: "▸ "; color: #6b7280; }
.ean-nav-card[open] summary::before { content: "▾ "; }

/* Impact & Compliance · Score Calculator static framework
   (Figma-parity audit quick-win #3 · 2026-07-29) */

.ic-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) { .ic-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ic-pillars-grid { grid-template-columns: 1fr; } }
.ic-pillar-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
}
.ic-pillar-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ic-pillar-card__name { font-size: 14px; font-weight: 600; color: #111827; }
.ic-pillar-card__max  { font-size: 13px; font-weight: 700; }
.ic-pillar-card__desc { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.5; }

.ic-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ic-tier-row {
  display: grid;
  grid-template-columns: 140px 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}
@media (max-width: 640px) {
  .ic-tier-row { grid-template-columns: 1fr; gap: 4px; }
}
.ic-tier-row__badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  justify-self: start;
}
.ic-tier-row__range {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #6b7280;
}
.ic-tier-row__visibility { font-size: 13px; color: #374151; }

/* Impact & Compliance · Impact Scores per-org 6-pillar cards
   (Figma parity port · 2026-07-30). Complements the Score Calculator
   framework above with a spacious per-org card that shows all 6 pillar
   tiles side-by-side. */
.ic-org-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ic-org-card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
}
.ic-org-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.ic-org-card__meta { min-width: 0; flex: 1; }
.ic-org-card__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.ic-org-card__name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.ic-org-card__tier {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ic-org-card__badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  background: #f3f4f6;
  letter-spacing: 0.05em;
}
.ic-org-card__sub { margin: 0; font-size: 13px; color: #6b7280; }
.ic-org-card__score { text-align: right; flex-shrink: 0; }
.ic-org-card__score-value {
  font-size: 36px;
  font-weight: 700;
  color: #2563eb;
  line-height: 1;
}
.ic-org-card__score-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
.ic-org-card__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px) { .ic-org-card__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ic-org-card__pillars { grid-template-columns: 1fr; } }
.ic-pillar-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 8px;
}
.ic-pillar-tile__label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.ic-pillar-tile__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.ic-pillar-tile__max {
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  margin-left: 2px;
}

/* Impact & Compliance · Campaign Approvals inline cards
   (Figma parity port · 2026-07-30). Approve is inline (no reason);
   Reject/Request Changes open Full Review because both carry a
   required message. */
.ic-camp-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ic-camp-card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
}
.ic-camp-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.ic-camp-card__meta { min-width: 0; flex: 1; }
.ic-camp-card__title {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}
.ic-camp-card__title-link { color: inherit; text-decoration: none; }
.ic-camp-card__title-link:hover { color: #2563eb; text-decoration: underline; }
.ic-camp-card__org {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #6b7280;
}
.ic-camp-card__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ic-camp-card__pill {
  padding: 3px 10px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
}
.ic-camp-card__stat { font-size: 13px; color: #6b7280; }
.ic-camp-card__status {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.ic-camp-card__status--pending { background: #fef3c7; color: #78350f; border: 1px solid #fde68a; }
.ic-camp-card__status--changes { background: #ffedd5; color: #7c2d12; border: 1px solid #fed7aa; }
.ic-camp-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ic-camp-card__form { display: inline; margin: 0; }
.ic-camp-card__hint {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  flex-basis: 100%;
}

/* fc-btn success variant — used by the Impact & Compliance Approve
   button (green primary). Sits alongside fc-btn--primary from the
   original financial-controller CSS block. */
.fc-btn--success {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}
.fc-btn--success:hover:not(:disabled) { background: #15803d !important; border-color: #15803d !important; }

/* fc-btn danger variant — used for destructive actions like "Suspend
   Organization" on the Impact & Compliance Fraud Alerts cards. */
.fc-btn--danger {
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}
.fc-btn--danger:hover:not(:disabled) { background: #fee2e2 !important; border-color: #f87171 !important; }
.fc-btn--danger:disabled { color: #9ca3af !important; }

/* Impact & Compliance · Fraud Alerts severity cards
   (Figma parity port · 2026-07-30). Severity color runs along the
   left border of each card so the queue reads at-a-glance. All
   actions are disabled facades pending Epic 57 (Fraud & Moderation
   infra) — the demo data drives the shape. */
.ic-alert-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ic-alert-card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-left-width: 6px;
  border-radius: 10px;
  padding: 16px 20px;
}
.ic-alert-card--critical { border-left-color: #dc2626; background: #fef2f2; }
.ic-alert-card--high     { border-left-color: #ea580c; background: #fff7ed; }
.ic-alert-card--medium   { border-left-color: #d97706; background: #fefce8; }
.ic-alert-card--low      { border-left-color: #2563eb; background: #eff6ff; }
.ic-alert-card__head { margin-bottom: 14px; }
.ic-alert-card__meta { min-width: 0; }
.ic-alert-card__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.ic-alert-card__org {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.ic-alert-card__severity {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid;
}
.ic-alert-card__severity--critical { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.ic-alert-card__severity--high     { background: #ffedd5; color: #7c2d12; border-color: #fdba74; }
.ic-alert-card__severity--medium   { background: #fef9c3; color: #713f12; border-color: #fde68a; }
.ic-alert-card__severity--low      { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }
.ic-alert-card__type-pill {
  padding: 3px 10px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ic-alert-card__desc {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.5;
}
.ic-alert-card__stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}
.ic-alert-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Impact & Compliance · per-org details modal (Figma showDetailsDialog)
   2026-07-31. Reuses .cm-create-modal shell + --flush variant. */
.ic-org-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}
.ic-details__header { margin-bottom: 16px; }
.ic-details__title { margin: 0 0 4px 0; font-size: 18px; font-weight: 700; color: #111827; }
.ic-details__sub { margin: 0; font-size: 13px; color: #6b7280; }
.ic-details__overall {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: linear-gradient(90deg, #eff6ff, #f5f3ff);
  border: 2px solid #bfdbfe;
  border-radius: 12px;
  margin-bottom: 20px;
}
.ic-details__overall-left { min-width: 0; }
.ic-details__overall-label { margin: 0 0 4px 0; font-size: 12px; color: #6b7280; }
.ic-details__overall-row { display: flex; align-items: center; gap: 12px; }
.ic-details__overall-value { font-size: 36px; font-weight: 700; color: #2563eb; line-height: 1; }
.ic-details__overall-tier {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
}
.ic-details__overall-foot { margin: 8px 0 0 0; font-size: 11px; color: #6b7280; }
.ic-details__overall-right { text-align: right; flex-shrink: 0; }
.ic-details__overall-trend { margin: 0; font-size: 12px; color: #9ca3af; font-style: italic; }

.ic-details__section-title { margin: 0 0 12px 0; font-size: 15px; font-weight: 700; color: #111827; }
.ic-details__pillars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ic-details__pillar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}
.ic-details__pillar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ic-details__pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ic-details__pillar-name { margin: 0 0 2px 0; font-size: 14px; font-weight: 600; color: #111827; }
.ic-details__pillar-desc { margin: 0; font-size: 12px; color: #6b7280; }
.ic-details__pillar-right { text-align: right; flex-shrink: 0; }
.ic-details__pillar-score { margin: 0; font-size: 22px; font-weight: 700; line-height: 1; }
.ic-details__pillar-max { font-size: 13px; font-weight: 500; color: #9ca3af; margin-left: 2px; }

.ic-details__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) { .ic-details__stats { grid-template-columns: 1fr; } }
.ic-details__stat {
  padding: 14px;
  border-radius: 10px;
  text-align: center;
}
.ic-details__stat--blue   { background: #eff6ff; }
.ic-details__stat--green  { background: #f0fdf4; }
.ic-details__stat--purple { background: #f5f3ff; }
.ic-details__stat-value { margin: 0 0 4px 0; font-size: 22px; font-weight: 700; line-height: 1; }
.ic-details__stat--blue   .ic-details__stat-value { color: #2563eb; }
.ic-details__stat--green  .ic-details__stat-value { color: #16a34a; }
.ic-details__stat--purple .ic-details__stat-value { color: #7c3aed; }
.ic-details__stat-label { margin: 0; font-size: 12px; color: #6b7280; }

/* ─────────────────────────────────────────────────────────────────
   New Campaign form · Figma parity port
   (docs/FigmaCode/Campaign Manager/src/app/components/CreateCampaign.tsx)
   2026-07-31. Replaces the 4-step wizard on
   /portal/ean-admin/campaigns/{new,edit} with a single-scroll form:
   sticky header (title + Preview/Publish actions), completion progress
   card, 2-col body (main = Basic/Funding/Media cards; sidebar = Tips +
   Required-Fields dots + Pro Tip), collapsed Advanced admin-only
   section at the bottom.
   ───────────────────────────────────────────────────────────────── */
.new-camp {
  max-width: 1200px;
  margin: 0 auto;
}
.new-camp__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.new-camp__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.new-camp__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 120ms;
}
.new-camp__back:hover { background: #f3f4f6; color: #111827; }
.new-camp__title { margin: 0; font-size: 26px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.new-camp__subtitle { margin: 4px 0 0 0; font-size: 14px; color: #6b7280; }
.new-camp__header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.new-camp__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  text-decoration: none;
}
.new-camp__btn--outline {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.new-camp__btn--outline:hover { background: #f9fafb; border-color: #d1d5db; }
.new-camp__btn--primary {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #0f172a;
}
.new-camp__btn--primary:hover:not(:disabled) { background: #1e293b; }
.new-camp__btn--primary:disabled { background: #9ca3af; border-color: #9ca3af; cursor: not-allowed; }

/* Progress card */
.new-camp__progress {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.new-camp__progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #374151;
  margin-bottom: 8px;
}
.new-camp__progress-pct { font-weight: 700; color: #0f172a; }
.new-camp__progress-bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.new-camp__progress-fill {
  height: 100%;
  background: #0f172a;
  border-radius: 999px;
  transition: width 200ms ease;
}

/* 2-col body */
.new-camp__body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .new-camp__body { grid-template-columns: 1fr; }
}

/* Card primitive */
.new-camp__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
}
.new-camp__card-title { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.new-camp__card-sub { margin: 4px 0 18px 0; font-size: 13px; color: #6b7280; }

/* Field primitives (namespaced so they don't collide with .admin-form__*) */
.new-camp__field { margin-bottom: 18px; }
.new-camp__field:last-child { margin-bottom: 0; }
.new-camp__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .new-camp__field-row { grid-template-columns: 1fr; }
}
.new-camp__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}
.new-camp__label + .req,
.new-camp__label .req {
  color: #dc2626;
  margin-left: 2px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
/* When a .req span follows the label, force the input to break to a
   new line — the label + asterisk cluster occupies one row. */
.new-camp__label + .req + input,
.new-camp__label + .req + select,
.new-camp__label + .req + textarea,
.new-camp__label + .req + .new-camp__input-with-icon,
.new-camp__label + .req + trix-editor { display: block; margin-top: 0; }
.new-camp__input,
.new-camp__select,
.new-camp__textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 120ms, box-shadow 120ms;
  box-sizing: border-box;
}
.new-camp__input:focus,
.new-camp__select:focus,
.new-camp__textarea:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.new-camp__textarea { resize: vertical; min-height: 84px; }
.new-camp__help { margin: 6px 0 0 0; font-size: 12px; color: #6b7280; }
.new-camp__counter { margin: 6px 0 0 0; font-size: 12px; color: #6b7280; text-align: right; }
.new-camp__input-with-icon { position: relative; }
.new-camp__input-with-icon .new-camp__field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.new-camp__input-with-icon .new-camp__input { padding-left: 36px; }

/* Sidebar cards */
.new-camp__sidebar { min-width: 0; }
.new-camp__tips { display: flex; flex-direction: column; gap: 14px; }
.new-camp__tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.new-camp__tip-icon { color: #2563eb; flex-shrink: 0; margin-top: 2px; }
.new-camp__tip-title { margin: 0 0 2px 0; font-size: 13px; font-weight: 600; color: #111827; }
.new-camp__tip-body { margin: 0; font-size: 12px; color: #6b7280; line-height: 1.5; }
.new-camp__req-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.new-camp__req-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.new-camp__req-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
  transition: background 120ms;
  flex-shrink: 0;
}
.new-camp__req-dot--ok { background: #16a34a; }
.new-camp__protip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  color: #1e3a8a;
  line-height: 1.5;
}
.new-camp__protip strong { color: #1e40af; }

/* Media grid */
.new-camp__media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .new-camp__media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.new-camp__media-tile {
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.new-camp__media-tile:hover { background: #f3f4f6; border-color: #9ca3af; }
.new-camp__media-tile input[type="file"] { display: none; }
.new-camp__media-tile-label { font-size: 13px; font-weight: 500; }
.new-camp__media-existing {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.new-camp__media-existing img {
  height: 72px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Advanced (admin only) collapsible */
.new-camp__advanced {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.new-camp__advanced summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.new-camp__advanced summary::-webkit-details-marker { display: none; }
.new-camp__advanced summary::after {
  content: "▸";
  color: #6b7280;
  transition: transform 120ms;
}
.new-camp__advanced[open] summary::after { transform: rotate(90deg); }
.new-camp__advanced-sub { margin: 4px 0 0 0; font-size: 12px; color: #6b7280; }
.new-camp__advanced-body { margin-top: 18px; }

/* Campaign type radio chips (kept from prior wizard, restyled) */
.new-camp__type-radios { display: flex; flex-direction: column; gap: 10px; }
.new-camp__type-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
}
.new-camp__type-radio input { margin: 0; }
.new-camp__type-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.new-camp__type-chip--emergency { background: #fee2e2; color: #7f1d1d; }
.new-camp__type-chip--urgent    { background: #fef3c7; color: #78350f; }
.new-camp__type-chip--none      { background: #f3f4f6; color: #374151; }
.new-camp__type-desc { font-size: 12px; color: #6b7280; }

/* Match funding sub-section (Story 09.18 · shown only if emergency) */
.new-camp__match {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  background: #fef2f2;
}
.new-camp__match-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: #7f1d1d;
}
.new-camp__match-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #7f1d1d;
  margin-bottom: 8px;
}

/* Bottom action row */
.new-camp__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  margin-top: 8px;
}
.new-camp__footer-right { display: flex; gap: 8px; align-items: center; }

/* Error list (inherits form error shape) */
.new-camp__errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  color: #7f1d1d;
}
.new-camp__errors h3 { margin: 0 0 6px 0; font-size: 14px; font-weight: 700; }
.new-camp__errors ul { margin: 0; padding-left: 20px; font-size: 13px; }

/* ─────────────────────────────────────────────────────────────────
   Edit/Create Organization form · Figma parity port
   (docs/FigmaCode/Campaign Manager/src/app/components/CharityEditProfile.tsx)
   2026-07-31. Replaces the flat section-stacked form on /admin/
   organizations/{new,edit} with a Figma-parity 3-col layout:
     Header · Back + title + Cancel/Save
     Body 3-col:
       Left (1/3) — Logo + Stats cards
       Right (2/3) — Basic / Contact / Verification / Platform cards
     Footer · Cancel + Save
   Primitives duplicate the .new-camp__* set intentionally so the two
   forms can diverge independently. Refactor into .form-scroll__* if a
   third form ever wants the same shape.
   ───────────────────────────────────────────────────────────────── */
.new-org {
  max-width: 1200px;
  margin: 0 auto;
}
.new-org__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.new-org__header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.new-org__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 120ms;
}
.new-org__back:hover { background: #f3f4f6; color: #111827; }
.new-org__title { margin: 0; font-size: 26px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.new-org__subtitle { margin: 4px 0 0 0; font-size: 14px; color: #6b7280; }
.new-org__header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.new-org__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  text-decoration: none;
}
.new-org__btn--outline {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.new-org__btn--outline:hover { background: #f9fafb; border-color: #d1d5db; }
.new-org__btn--primary {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #0f172a;
}
.new-org__btn--primary:hover:not(:disabled) { background: #1e293b; }
.new-org__btn--primary:disabled { background: #9ca3af; border-color: #9ca3af; cursor: not-allowed; }

.new-org__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .new-org__body { grid-template-columns: 1fr; }
}

.new-org__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
}
.new-org__card-title { margin: 0; font-size: 17px; font-weight: 700; color: #111827; }
.new-org__card-sub { margin: 4px 0 18px 0; font-size: 13px; color: #6b7280; }

.new-org__field { margin-bottom: 18px; }
.new-org__field:last-child { margin-bottom: 0; }
.new-org__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .new-org__field-row { grid-template-columns: 1fr; } }
.new-org__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}
.new-org__label + .req {
  color: #dc2626;
  margin-left: 2px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.new-org__label + .req + input,
.new-org__label + .req + select,
.new-org__label + .req + textarea,
.new-org__label + .req + .new-org__input-with-icon { display: block; margin-top: 0; }
.new-org__input,
.new-org__select,
.new-org__textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 120ms, box-shadow 120ms;
  box-sizing: border-box;
}
.new-org__input:focus,
.new-org__select:focus,
.new-org__textarea:focus {
  outline: none;
  border-color: #0f172a;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.new-org__input:disabled { background: #f9fafb; color: #6b7280; cursor: not-allowed; }
.new-org__textarea { resize: vertical; min-height: 84px; }
.new-org__help { margin: 6px 0 0 0; font-size: 12px; color: #6b7280; }
.new-org__counter { margin: 6px 0 0 0; font-size: 12px; color: #6b7280; text-align: right; }
.new-org__input-with-icon { position: relative; }
.new-org__input-with-icon .new-org__field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.new-org__input-with-icon .new-org__input { padding-left: 36px; }

/* Left-column avatar block */
.new-org__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.new-org__avatar {
  width: 128px;
  height: 128px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.new-org__avatar img { width: 100%; height: 100%; object-fit: cover; }
.new-org__avatar-controls { width: 100%; }
.new-org__file-tile {
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.new-org__file-tile:hover { background: #f3f4f6; border-color: #9ca3af; }
.new-org__file-tile input[type="file"] { display: none; }
.new-org__file-tile-label { font-size: 13px; font-weight: 500; }

/* Stats card rows */
.new-org__stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid #f3f4f6;
}
.new-org__stat-row:last-child { border-bottom: 0; }
.new-org__stat-label { color: #6b7280; }
.new-org__stat-value { font-weight: 600; color: #111827; }
.new-org__stat-value--ok { color: #16a34a; }

/* Verified banner (blue callout at bottom of Legal card) */
.new-org__verified-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #1e3a8a;
  margin-top: 14px;
}
.new-org__verified-banner strong { color: #1e40af; }

.new-org__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  margin-top: 8px;
}
.new-org__footer-right { display: flex; gap: 8px; align-items: center; }
.new-org__errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  color: #7f1d1d;
}
.new-org__errors h3 { margin: 0 0 6px 0; font-size: 14px; font-weight: 700; }
.new-org__errors ul { margin: 0; padding-left: 20px; font-size: 13px; }

/* E-commerce Manager · Overview 2-col grid (Figma-parity quick-win #4 · 2026-07-29)
   Wraps the Recent Orders + Top Products fc-panels side-by-side matching Figma. */
.ec-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ec-overview-grid > section { margin: 0; }
@media (max-width: 900px) { .ec-overview-grid { grid-template-columns: 1fr; } }

/* Ambassador Portal · Welcome Banner + Post Performance
   (Figma-parity audit medium #5 · 2026-07-30)
   AmbassadorDashboard.tsx:202-331 */

.fc-btn--yellow {
  color: #ffffff;
  background: #ca8a04;
  border-color: #ca8a04;
}
.fc-btn--yellow:hover:not(:disabled) { background: #a16207; }

.amb-welcome {
  display: flex;
  gap: 16px;
  padding: 20px;
  margin: 16px 24px 8px;
  border: 2px solid #fef08a;
  border-radius: 12px;
  background: linear-gradient(to right, #fefce8, #fef3c7);
}
.amb-welcome__icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #ca8a04;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.amb-welcome__body { flex: 1; min-width: 0; }
.amb-welcome__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.amb-welcome__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #713f12;
}
.amb-welcome__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ca8a04;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
.amb-welcome__desc {
  margin: 0 0 12px;
  color: #854d0e;
  font-size: 14px;
  line-height: 1.5;
}
.amb-welcome__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.amb-post-perf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amb-post-perf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  transition: background 0.12s;
}
.amb-post-perf-row:hover { background: #f9fafb; }
.amb-post-perf-row__main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.amb-post-perf-row__target {
  margin: 0;
  font-weight: 600;
  color: #111827;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amb-post-perf-row__content {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.amb-post-perf-row__stats {
  display: flex;
  gap: 16px;
  color: #6b7280;
  font-size: 13px;
  flex-shrink: 0;
}
.amb-post-perf-row__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Brand Partner · header identity + Top Products cards
   (Figma-parity audit medium #6 · 2026-07-30) */

.brand-header__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-header__tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
.brand-header__tier--premium { background: #ca8a04; }
.brand-header__tier--gold    { background: #d97706; }
.brand-header__tier--standard { background: #6b7280; }

.brand-top-products {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-top-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f9fafb;
}
.brand-top-product__media {
  position: relative;
  flex-shrink: 0;
}
.brand-top-product__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.brand-top-product__rank {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}
.brand-top-product__main { flex: 1; min-width: 0; }
.brand-top-product__name {
  margin: 0;
  font-weight: 600;
  color: #111827;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-top-product__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.brand-top-product__marketplace {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  font-size: 11px;
  font-weight: 500;
}
.brand-top-product__sku {
  font-size: 11px;
  color: #6b7280;
}
.brand-top-product__stats {
  text-align: right;
  flex-shrink: 0;
}
.brand-top-product__revenue {
  margin: 0;
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}
.brand-top-product__rating {
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* Campaign Manager · pending row inline actions + active row progress
   (Figma-parity audit medium #7 · 2026-07-30) */

.fc-btn--red {
  color: #ffffff;
  background: #dc2626;
  border-color: #dc2626;
}
.fc-btn--red:hover:not(:disabled) { background: #b91c1c; }

/* 2026-07-30 · Campaign Manager review cards — Figma-parity rebuild
   per feedback_no_figma_shortcuts.md. Prior compact primitives
   (cm-pending-row / cm-active-row) replaced with spacious card layout
   matching AdminDashboard.tsx:2280-2380. */

.cm-review-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-review-card {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  transition: background 120ms ease;
}
.cm-review-card:hover { background: #f9fafb; }

.cm-review-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.cm-review-card__main {
  flex: 1;
  min-width: 0;
}
.cm-review-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cm-review-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}
.cm-review-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}
.cm-review-card__badge--category {
  background: #f3f4f6;
  color: #374151;
}
.cm-review-card__badge--priority-high {
  background: #fee2e2;
  color: #b91c1c;
}
.cm-review-card__badge--priority-medium {
  background: #fef3c7;
  color: #92400e;
}
.cm-review-card__meta {
  margin: 3px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}
.cm-review-card__meta svg { color: #9ca3af; flex-shrink: 0; }

.cm-review-card__side {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cm-review-card__side-label {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}
.cm-review-card__side-value {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #16a34a;
  line-height: 1.1;
}
.cm-review-card__side-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  margin-top: 6px;
  text-transform: capitalize;
}
.cm-review-card__side-badge--active {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.cm-review-card__side-badge--draft   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.cm-review-card__side-badge--pending { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
.cm-review-card__side-badge--changes_requested { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }

/* Progress section for Active cards */
.cm-review-card__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.cm-review-card__progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #374151;
}
.cm-review-card__progress-pct {
  font-weight: 600;
  color: #111827;
}
.cm-review-card__bar {
  height: 8px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}
.cm-review-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  border-radius: 999px;
  transition: width 0.3s ease-in-out;
}

/* Full-width action row below the card content */
.cm-review-card__actions {
  display: flex;
  gap: 8px;
}
.cm-review-card__actions .cm-review-btn { flex: 1 1 0; }
.cm-review-card__actions--compact { justify-content: flex-start; }
.cm-review-card__actions--compact .cm-review-btn { flex: 0 0 auto; }

.cm-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: #ffffff;
  color: #374151;
  transition: background 120ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.cm-review-btn--sm { padding: 6px 10px; font-size: 12px; }
.cm-review-btn:hover:not(:disabled) { background: #f3f4f6; }
.cm-review-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cm-review-btn--primary {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.cm-review-btn--primary:hover:not(:disabled) { background: #1e293b; }

.cm-review-btn--outline {
  border-color: #e5e7eb;
}

.cm-review-btn--approve {
  color: #16a34a;
  border-color: #16a34a;
}
.cm-review-btn--approve:hover:not(:disabled) { background: #f0fdf4; }

.cm-review-btn--changes {
  color: #374151;
  border-color: #e5e7eb;
}

.cm-review-btn--reject {
  color: #dc2626;
  border-color: #dc2626;
}
.cm-review-btn--reject:hover:not(:disabled) { background: #fef2f2; }

.cm-review-btn__form {
  display: contents;
  margin: 0;
}

/* Legacy compact primitives — kept below for any external caller
   (empty here). New markup uses .cm-review-card exclusively. */
.cm-pending-list, .cm-active-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cm-pending-row, .cm-active-row {
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
}
.cm-active-row__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  border-radius: 999px;
  transition: width 0.3s ease-in-out;
}

/* Financial Controller · txn row fee/net + Revenue Analytics 4-stat row
   (Figma-parity audit medium #8 · 2026-07-30) */

.fc-tx-row__fee-line {
  margin: 2px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #6b7280;
}
.fc-tx-row__fee-label { text-transform: uppercase; letter-spacing: 0.04em; }
.fc-tx-row__fee-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.fc-tx-row__fee-value--net { color: #16a34a; font-weight: 600; }

.fc-analytics-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 900px) { .fc-analytics-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fc-analytics-stat {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px 16px;
}
.fc-analytics-stat__label {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fc-analytics-stat__value {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.fc-analytics-stat__value--green { color: #16a34a; }
.fc-analytics-stat__hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: #9ca3af;
}

/* Ambassador · Authorized Partnerships subgroups (Figma-parity 2026-07-30)
   AmbassadorDashboard.tsx:333-369 */

.amb-partnerships {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.amb-partnerships__group-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.amb-partnerships__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) { .amb-partnerships__grid { grid-template-columns: 1fr; } }
.amb-partnership-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.amb-partnership-card--stacked { align-items: flex-start; }
.amb-partnership-card__check { flex-shrink: 0; }
.amb-partnership-card--stacked .amb-partnership-card__check { margin-top: 2px; }
.amb-partnership-card__body { min-width: 0; flex: 1; }
.amb-partnership-card__name {
  margin: 0;
  font-weight: 500;
  color: #111827;
  font-size: 14px;
}
.amb-partnership-card__charity {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6b7280;
}

/* Brand Partner · header logo tile + tier + Performance Metrics grid
   (Figma-parity rebuild 2026-07-30 · BrandDashboard.tsx:411-434, 359-405) */

.brand-header .brand-header__identity {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.brand-header__logo-tile {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(to bottom right, #2563eb, #7c3aed);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-header__ident-body { min-width: 0; }
.brand-header__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.brand-header__brand-type {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6b7280;
}

.brand-perf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 768px) { .brand-perf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brand-perf-metric { display: flex; flex-direction: column; gap: 6px; }
.brand-perf-metric__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}
.brand-perf-metric__value {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

/* Financial Controller · Transaction Log spacious card layout
   (Figma-parity rebuild 2026-07-30 · AdminDashboard.tsx:2728-2768) */

.fc-tx-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-tx-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
.fc-tx-card:hover { background: #f9fafb; }
.fc-tx-card__main {
  flex: 1;
  min-width: 0;
}
.fc-tx-card__donor-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.fc-tx-card__donor {
  font-weight: 500;
  color: #111827;
  font-size: 14px;
}
.fc-tx-card__type-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  font-weight: 500;
}
.fc-tx-card__recipient {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}
.fc-tx-card__meta-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  color: #6b7280;
  font-size: 12px;
}
.fc-tx-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fc-tx-card__side {
  text-align: right;
  flex-shrink: 0;
}
.fc-tx-card__amount {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #16a34a;
  line-height: 1.1;
}
.fc-tx-card__status {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}
.fc-tx-card__status--succeeded { background: #16a34a; color: #ffffff; }
.fc-tx-card__status--pending   { background: #ca8a04; color: #ffffff; }
.fc-tx-card__status--failed    { background: #dc2626; color: #ffffff; }
.fc-tx-card__net {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}

/* Campaign Manager · CampaignReviewModal (Figma-parity 2026-07-30)
   Figma source: AdminDashboard.tsx:3117-3519 (CampaignReviewModal)
   Structure: <dialog> element w/ sticky purple gradient header +
   5-tab shell + Card-based per-tab content. */

.cm-review-modal {
  /* Per feedback_modals_centered.md: explicit viewport centering.
     Native <dialog> UA styles anchor top-left in some browsers —
     inset:0 + margin:auto forces true center in both axes. */
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(1152px, 96vw);
  width: 100%;
  max-height: 92vh;
}
.cm-review-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.cm-review-modal__inner {
  background: #ffffff;
  border-radius: 12px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Purple gradient sticky header */
.cm-review-modal__header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 24px;
  background: linear-gradient(to right, #2563eb, #7c3aed);
  color: #ffffff;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cm-review-modal__ident {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.cm-review-modal__logo-tile {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}
.cm-review-modal__ident-body { min-width: 0; }
.cm-review-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.cm-review-modal__charity {
  margin: 4px 0 8px;
  color: rgba(219, 234, 254, 1);
  font-size: 14px;
}
.cm-review-modal__pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cm-review-modal__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cm-review-modal__pill--category      { background: #ffffff; color: #2563eb; }
.cm-review-modal__pill--priority-high   { background: #ef4444; color: #ffffff; }
.cm-review-modal__pill--priority-medium { background: #f59e0b; color: #ffffff; }
.cm-review-modal__pill--verified      { background: #16a34a; color: #ffffff; }
.cm-review-modal__pill--good-standing { background: #dbeafe; color: #1e40af; }
.cm-review-modal__close {
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #ffffff;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.cm-review-modal__close:hover { background: rgba(255, 255, 255, 0.25); }

/* Tab bar */
.cm-review-modal__body { padding: 24px; }
.cm-review-modal__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 24px;
}
@media (max-width: 800px) {
  .cm-review-modal__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cm-review-modal__tab {
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
.cm-review-modal__tab:hover { color: #111827; }
.cm-review-modal__tab.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Tab panels */
.cm-review-modal__panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.cm-review-modal__panel.is-active { display: flex; }

/* Cards inside panels */
.cm-review-modal__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cm-review-modal__card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}
.cm-review-modal__card-sub {
  margin: -12px 0 0;
  font-size: 13px;
  color: #6b7280;
}
.cm-review-modal__grid {
  display: grid;
  gap: 16px;
}
.cm-review-modal__grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-review-modal__grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .cm-review-modal__grid--2col,
  .cm-review-modal__grid--3col { grid-template-columns: 1fr; }
}
.cm-review-modal__label {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cm-review-modal__semibold {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.cm-review-modal__big-value {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}
.cm-review-modal__big-value--green { color: #16a34a; }
.cm-review-modal__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
.cm-review-modal__section { display: flex; flex-direction: column; gap: 6px; }
.cm-review-modal__stack { display: flex; flex-direction: column; gap: 12px; }
.cm-review-modal__desc-box {
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}
.cm-review-modal__placeholder-note {
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

/* Timeline (Campaign Details) */
.cm-review-modal__timeline { display: flex; flex-direction: column; gap: 8px; }
.cm-review-modal__timeline-row {
  border-left: 4px solid #2563eb;
  padding: 10px 14px;
  background: #eff6ff;
  border-radius: 0 8px 8px 0;
}
.cm-review-modal__timeline-phase {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.cm-review-modal__timeline-duration {
  margin: 2px 0 0;
  font-size: 11px;
  color: #6b7280;
}
.cm-review-modal__timeline-activities {
  margin: 6px 0 0;
  font-size: 13px;
  color: #374151;
}

/* Impact tiles (Campaign Details) */
.cm-review-modal__impact-tile {
  padding: 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

/* Performance history tiles (Charity Info) */
.cm-review-modal__perf-tile {
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}
.cm-review-modal__perf-tile--blue   { background: #eff6ff; }
.cm-review-modal__perf-tile--green  { background: #f0fdf4; }
.cm-review-modal__perf-tile--purple { background: #f5f3ff; }
.cm-review-modal__perf-value {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.cm-review-modal__perf-tile--blue   .cm-review-modal__perf-value { color: #2563eb; }
.cm-review-modal__perf-tile--green  .cm-review-modal__perf-value { color: #16a34a; }
.cm-review-modal__perf-tile--purple .cm-review-modal__perf-value { color: #7c3aed; }

/* Fund allocation bars (Financials) */
.cm-review-modal__alloc-list { display: flex; flex-direction: column; gap: 10px; }
.cm-review-modal__alloc-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
}
.cm-review-modal__alloc-pct { color: #2563eb; font-weight: 700; }
.cm-review-modal__alloc-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.cm-review-modal__alloc-bar-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 999px;
}

/* Callout boxes (Financials green / Documents blue) */
.cm-review-modal__callout {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.cm-review-modal__callout--green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #14532d;
}
.cm-review-modal__callout--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.cm-review-modal__callout-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 8px;
}
.cm-review-modal__callout-list {
  margin: 0 0 0 24px;
  padding: 0;
  font-size: 13px;
  line-height: 1.8;
}

/* Projection tiles (Financials) */
.cm-review-modal__proj-tile {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* Documents list */
.cm-review-modal__doc-list { display: flex; flex-direction: column; gap: 8px; }
.cm-review-modal__doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: background 0.12s;
}
.cm-review-modal__doc-row:hover { background: #f9fafb; }
.cm-review-modal__doc-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-review-modal__doc-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cm-review-modal__doc-uploaded {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.cm-review-modal__doc-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Review & Decision tab */
.cm-review-modal__checklist {
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-review-modal__checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
}
.cm-review-modal__textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #f9fafb;
}
.cm-review-modal__decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) { .cm-review-modal__decision-grid { grid-template-columns: 1fr; } }
.cm-review-modal__decision-btn {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  min-height: 84px;
  transition: filter 0.12s, background 0.12s;
  color: inherit;
  text-decoration: none;
}
.cm-review-modal__decision-btn--approve {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.cm-review-modal__decision-btn--approve:hover { background: #15803d; }
.cm-review-modal__decision-btn--changes {
  background: #ffffff;
  color: #d97706;
  border-color: #d97706;
}
.cm-review-modal__decision-btn--changes:hover { background: #fffbeb; }
.cm-review-modal__decision-btn--reject {
  background: #ffffff;
  color: #dc2626;
  border-color: #dc2626;
}
.cm-review-modal__decision-btn--reject:hover { background: #fef2f2; }
.cm-review-modal__form { display: contents; margin: 0; }
.cm-review-modal__deep-link-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

/* Campaign Manager · RequestChangesModal (Figma-parity 2026-07-30)
   Figma source: AdminDashboard.tsx:3521-3678 (RequestChangesModal)
   Structure: <dialog>, orange→red gradient sticky header,
   4-category checkbox cards + comments textarea + blue "What happens
   next?" callout + Cancel / Send action row. */

.cm-changes-modal {
  /* Centered per feedback_modals_centered.md */
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(896px, 96vw);
  width: 100%;
  max-height: 92vh;
}
.cm-changes-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.cm-changes-modal__inner {
  background: #ffffff;
  border-radius: 12px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.cm-changes-modal__header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 24px;
  background: linear-gradient(to right, #f97316, #ef4444);
  color: #ffffff;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cm-changes-modal__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}
.cm-changes-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(255, 237, 213, 1);
}
.cm-changes-modal__close {
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #ffffff;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.cm-changes-modal__close:hover { background: rgba(255, 255, 255, 0.25); }

.cm-changes-modal__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cm-changes-modal__section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cm-changes-modal__section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}
.cm-changes-modal__section-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280;
}

.cm-changes-modal__categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cm-changes-modal__cat-card {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.cm-changes-modal__cat-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.cm-changes-modal__cat-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-changes-modal__issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}
.cm-changes-modal__checkbox {
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
}

.cm-changes-modal__field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.cm-changes-modal__field-help {
  margin: 0 0 8px;
  font-size: 13px;
  color: #6b7280;
}
.cm-changes-modal__textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #ffffff;
  color: #111827;
}
.cm-changes-modal__textarea:focus {
  outline: 2px solid #2563eb;
  outline-offset: -1px;
}

.cm-changes-modal__callout {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e40af;
}
.cm-changes-modal__callout-icon { flex-shrink: 0; margin-top: 2px; }
.cm-changes-modal__callout-title {
  margin: 0 0 4px;
  font-weight: 600;
  color: #1e3a8a;
  font-size: 14px;
}
.cm-changes-modal__callout-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
}

.cm-changes-modal__actions {
  display: flex;
  gap: 12px;
}
.cm-changes-modal__submit-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #ea580c;
  color: #ffffff;
  border: 1px solid #ea580c;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.cm-changes-modal__submit-btn:hover { background: #c2410c; }

/* ── Create Content Modals (shared primitives) ────────────────
   Powers _create_mission_modal (purple), _create_opportunity_modal
   (green), _create_reward_modal (orange). Matches Figma
   CreateContentModals.tsx spacing + gradient headers. All modals
   centered on screen per feedback_modals_centered rule. */
.cm-create-modal {
  width: min(720px, 96vw);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: hidden;
}
.cm-create-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.cm-create-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.cm-create-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 2;
}
.cm-create-modal--purple .cm-create-modal__header { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.cm-create-modal--green  .cm-create-modal__header { background: linear-gradient(135deg, #16a34a, #059669); }
.cm-create-modal--orange .cm-create-modal__header { background: linear-gradient(135deg, #ea580c, #d97706); }
.cm-create-modal--blue   .cm-create-modal__header { background: linear-gradient(135deg, #2563eb, #4f46e5); }

/* Wide variant + floating close X for the Create Campaign modal
   (2026-07-31). The Figma modal (CreateContentModals.tsx →
   CreateCampaignModal) is bigger than the mission/reward modals
   because it embeds the full CreateCampaign form with sidebar. The
   form provides its own header (title + Preview/Publish), so we skip
   .cm-create-modal__header and float a plain close X in the corner. */
.cm-create-modal--wide { width: min(1200px, 96vw); max-width: none; }
.cm-create-modal--flush .cm-create-modal__body { padding: 24px; gap: 0; }
.cm-create-modal__close-float {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 120ms, color 120ms;
}
.cm-create-modal__close-float:hover { background: #f3f4f6; color: #111827; }
.cm-create-modal__frame-loading {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}
.cm-create-modal__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.cm-create-modal__subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin: 4px 0 0;
}
.cm-create-modal__close {
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cm-create-modal__close:hover { background: rgba(255, 255, 255, 0.25); }

.cm-create-modal__body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-create-modal__info {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.cm-create-modal__info--purple { background: #f5f3ff; border-color: #ddd6fe; }
.cm-create-modal__info--green  { background: #f0fdf4; border-color: #bbf7d0; }
.cm-create-modal__info--orange { background: #fff7ed; border-color: #fed7aa; }
.cm-create-modal__info--blue   { background: #eff6ff; border-color: #bfdbfe; }
.cm-create-modal__info svg { flex-shrink: 0; margin-top: 2px; }
.cm-create-modal__info-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px;
}
.cm-create-modal__info-body {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
  line-height: 1.5;
}
.cm-create-modal__info--purple .cm-create-modal__info-title { color: #5b21b6; }
.cm-create-modal__info--green  .cm-create-modal__info-title { color: #166534; }
.cm-create-modal__info--orange .cm-create-modal__info-title { color: #9a3412; }
.cm-create-modal__info--blue   .cm-create-modal__info-title { color: #1e40af; }

.cm-create-modal__grid {
  display: grid;
  gap: 14px;
}
.cm-create-modal__grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-create-modal__grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-create-modal__grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .cm-create-modal__grid--2col,
  .cm-create-modal__grid--3col,
  .cm-create-modal__grid--4col { grid-template-columns: 1fr; }
}

.cm-create-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cm-create-modal__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.cm-create-modal__input,
.cm-create-modal__select,
.cm-create-modal__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  font-family: inherit;
  box-sizing: border-box;
}
.cm-create-modal__input:focus,
.cm-create-modal__select:focus,
.cm-create-modal__textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.cm-create-modal__input:disabled,
.cm-create-modal__select:disabled,
.cm-create-modal__textarea:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}
.cm-create-modal__textarea {
  min-height: 96px;
  resize: vertical;
}
.cm-create-modal__textarea--sm { min-height: 72px; }

.cm-create-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
}
.cm-create-modal__cancel-btn {
  padding: 10px 16px;
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cm-create-modal__cancel-btn:hover { background: #f9fafb; }
.cm-create-modal__submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}
.cm-create-modal__submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cm-create-modal__submit-btn--purple { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.cm-create-modal__submit-btn--green  { background: linear-gradient(135deg, #16a34a, #059669); }
.cm-create-modal__submit-btn--orange { background: linear-gradient(135deg, #ea580c, #d97706); }
.cm-create-modal__submit-btn--blue   { background: linear-gradient(135deg, #2563eb, #4f46e5); }
.cm-create-modal__submit-btn:not(:disabled):hover { opacity: 0.92; }

/* ── Corporate ESG · New Campaign flow ─────────────────────────
   Full-page two-stage flow at /portals/corporate-esg/new-campaign.
   Ports docs/FigmaCode/Corporate ESG Dashboard/src/app/components/
   corporate/CreateCorporateCampaign.tsx. */
.ces-page {
  min-height: 100%;
  background: #f9fafb;
}
.ces-page__header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.ces-page__header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px;
}
.ces-page__header-inner--wide { max-width: 1200px; }
.ces-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.12s;
}
.ces-back-btn:hover { background: #f3f4f6; color: #111827; }
.ces-page__title-row { margin-top: 18px; }
.ces-page__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.ces-page__sub {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 14px;
}
.ces-page__body {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}
.ces-page__body--wide { max-width: 1200px; }

/* ── Stage 1 · type picker ──────────────────────── */
.ces-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) { .ces-type-grid { grid-template-columns: 1fr; } }
.ces-type-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.ces-type-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
.ces-type-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.ces-type-card__icon--boost       { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.ces-type-card__icon--mission     { background: linear-gradient(135deg, #db2777, #dc2626); }
.ces-type-card__icon--partnership { background: linear-gradient(135deg, #16a34a, #059669); }
.ces-type-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.ces-type-card__desc {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
.ces-type-card__example {
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 13px;
}
.ces-type-card__example-label { margin: 0 0 4px; color: #9ca3af; font-size: 12px; }
.ces-type-card__example-value { margin: 0; font-weight: 600; color: #111827; }
.ces-type-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ces-type-card__fact-label { margin: 0 0 2px; color: #9ca3af; font-size: 12px; }
.ces-type-card__fact-value { margin: 0; font-weight: 600; color: #111827; font-size: 13px; }
.ces-type-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}
.ces-type-card__benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ces-type-card__benefit-dot {
  width: 4px;
  height: 4px;
  background: #16a34a;
  border-radius: 50%;
  flex-shrink: 0;
}
.ces-type-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: #111827;
  color: #ffffff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.ces-type-card:hover .ces-type-card__cta { background: #2563eb; }

/* ── Stage 2 · detail form ──────────────────────── */
.ces-form-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.ces-form-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.ces-form-card__head {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}
.ces-form-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.ces-form-card__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}
.ces-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ces-form-field { display: flex; flex-direction: column; gap: 6px; }
.ces-form-label { font-size: 14px; font-weight: 600; color: #374151; }
.ces-form-input,
.ces-form-textarea,
.ces-form-select {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  color: #111827;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
}
.ces-form-textarea { min-height: 100px; resize: vertical; }
.ces-form-input:focus,
.ces-form-textarea:focus,
.ces-form-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ces-form-input:disabled,
.ces-form-textarea:disabled,
.ces-form-select:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}
.ces-form-input-wrap { position: relative; }
.ces-form-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}
.ces-form-input--with-icon { padding-left: 36px; }
.ces-form-help { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.ces-form-grid { display: grid; gap: 16px; }
.ces-form-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ces-form-grid--2col { grid-template-columns: 1fr; } }

.ces-benefits-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.ces-benefits-box__icon { flex-shrink: 0; margin-top: 2px; }
.ces-benefits-box__body { flex: 1; }
.ces-benefits-box__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
}
.ces-benefits-box__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #1e40af;
}
.ces-benefits-box__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ces-benefits-box__bullet {
  width: 6px;
  height: 6px;
  background: #2563eb;
  border-radius: 50%;
  flex-shrink: 0;
}

.ces-form-actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}
.ces-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.12s;
}
.ces-btn--outline {
  background: #ffffff;
  color: #374151;
  border-color: #d1d5db;
}
.ces-btn--outline:hover { background: #f9fafb; }
.ces-btn--primary {
  background: #2563eb;
  color: #ffffff;
}
.ces-btn--primary:not(:disabled):hover { background: #1d4ed8; }
.ces-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Corporate ESG · Full Report page ─────────────────────────
   Full-page port of ESGFullReport.tsx (598 lines). 5 collapsible
   sections using native <details>/<summary>. */
.ces-report__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ces-report__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ces-report__range {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 8px;
}
.ces-report__range-btn {
  padding: 6px 12px;
  border-radius: 6px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s;
}
.ces-report__range-btn:hover { color: #111827; }
.ces-report__range-btn.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ces-report__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ces-report__info-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ces-report__info-icon {
  width: 48px;
  height: 48px;
  background: #2563eb;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ces-report__info-name { margin: 0; font-weight: 600; color: #1e3a8a; }
.ces-report__info-date { margin: 2px 0 0; font-size: 13px; color: #1d4ed8; }
.ces-report__yoy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #16a34a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.ces-report__section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}
.ces-report__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ces-report__section-head::-webkit-details-marker { display: none; }
.ces-report__section-head::marker { display: none; }
.ces-report__section-head:hover { background: #f9fafb; }
.ces-report__section-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.ces-report__chevron {
  color: #6b7280;
  transition: transform 0.15s;
}
.ces-report__section[open] .ces-report__chevron { transform: rotate(180deg); }
.ces-report__section-body {
  padding: 0 24px 24px;
}
.ces-report__section-body--stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Executive Summary */
.ces-report__exec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 720px) { .ces-report__exec-grid { grid-template-columns: 1fr; } }
.ces-report__exec-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ces-report__exec-label { margin: 0; font-size: 13px; color: #6b7280; }
.ces-report__exec-value { margin: 0; font-size: 28px; font-weight: 700; color: #111827; line-height: 1.1; }
.ces-report__exec-sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.ces-report__narrative {
  margin-top: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}
.ces-report__narrative-highlight { color: #16a34a; font-weight: 700; }

/* Pillar card */
.ces-report__pillar-card {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.ces-report__pillar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.ces-report__pillar-name { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.ces-report__pillar-sdg { margin: 2px 0 0; font-size: 13px; color: #6b7280; }
.ces-report__pillar-hours { text-align: right; flex-shrink: 0; }
.ces-report__pillar-hours-value { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.ces-report__pillar-hours-label { margin: 0; font-size: 12px; color: #6b7280; }
.ces-report__pillar-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 720px) { .ces-report__pillar-stats { grid-template-columns: repeat(2, 1fr); } }
.ces-report__pillar-stat-label { margin: 0 0 2px; font-size: 12px; color: #6b7280; }
.ces-report__pillar-stat-value { margin: 0; font-size: 18px; font-weight: 600; color: #111827; }
.ces-report__pillar-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .ces-report__pillar-boxes { grid-template-columns: 1fr; } }
.ces-report__pillar-box {
  background: #f9fafb;
  border-radius: 10px;
  padding: 16px;
}
.ces-report__pillar-box-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.ces-report__pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #4b5563;
}
.ces-report__pillar-list li { display: flex; align-items: center; gap: 8px; }
.ces-report__dot {
  width: 6px;
  height: 6px;
  background: #2563eb;
  border-radius: 50%;
  flex-shrink: 0;
}
.ces-report__pillar-metrics {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.ces-report__pillar-metrics > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ces-report__pillar-metrics dt { margin: 0; color: #6b7280; }
.ces-report__pillar-metrics dd { margin: 0; font-weight: 600; color: #111827; }

/* Department rows */
.ces-report__dept-list { display: flex; flex-direction: column; gap: 12px; }
.ces-report__dept-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 10px;
}
.ces-report__dept-rank {
  width: 32px;
  height: 32px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ces-report__dept-cell { min-width: 0; }
.ces-report__dept-cell--main { flex: 1; }
.ces-report__dept-name { margin: 0; font-weight: 600; color: #111827; }
.ces-report__dept-sub { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.ces-report__dept-label { margin: 0 0 2px; font-size: 12px; color: #6b7280; }
.ces-report__dept-value { margin: 0; font-weight: 600; color: #111827; font-size: 14px; }
.ces-report__dept-value--growth { color: #16a34a; }
.ces-report__dept-row > .ces-report__dept-cell:not(.ces-report__dept-cell--main) { min-width: 100px; }

/* Geographic */
.ces-report__geo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ces-report__geo-icon { flex-shrink: 0; }
.ces-report__geo-body { flex: 1; min-width: 0; }
.ces-report__geo-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.ces-report__geo-region { margin: 0; font-weight: 500; color: #111827; font-size: 14px; }
.ces-report__geo-vols { margin: 0; font-size: 13px; color: #6b7280; }
.ces-report__geo-barwrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ces-report__geo-bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ces-report__geo-bar-fill {
  height: 100%;
  background: #16a34a;
}
.ces-report__geo-hours { font-size: 12px; color: #6b7280; white-space: nowrap; }

/* Partnership card */
.ces-report__partnership {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
}
.ces-report__partnership-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.ces-report__partnership-name { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
.ces-report__partnership-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 12px;
  color: #4b5563;
}
.ces-report__partnership-roi { text-align: right; flex-shrink: 0; }
.ces-report__partnership-roi-value { margin: 0; font-size: 22px; font-weight: 700; color: #16a34a; }
.ces-report__partnership-roi-label { margin: 0; font-size: 12px; color: #6b7280; }
.ces-report__partnership-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) { .ces-report__partnership-stats { grid-template-columns: 1fr; } }

/* ── Corporate ESG · Pillar Detail View ────────────────────────
   Full-page port of PillarDetailView.tsx (1087 lines). Gradient
   hero header per pillar + 6 body sections. */
.ces-pillar__hero {
  color: #ffffff;
  padding: 8px 0 28px;
}
.ces-pillar__hero--pink   { background: linear-gradient(90deg, #db2777, #e11d48); }
.ces-pillar__hero--blue   { background: linear-gradient(90deg, #2563eb, #0891b2); }
.ces-pillar__hero--purple { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.ces-pillar__hero--green  { background: linear-gradient(90deg, #16a34a, #059669); }
.ces-pillar__hero--orange { background: linear-gradient(90deg, #ea580c, #d97706); }
.ces-pillar__hero--yellow { background: linear-gradient(90deg, #ca8a04, #b45309); }
.ces-pillar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 16px;
  margin-bottom: 20px;
  transition: background 0.12s;
}
.ces-pillar__back:hover { background: rgba(255, 255, 255, 0.25); }
.ces-pillar__hero-body { display: flex; flex-direction: column; gap: 10px; }
.ces-pillar__sdg-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
.ces-pillar__hero-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}
.ces-pillar__hero-desc {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
  line-height: 1.5;
  max-width: 720px;
}

.ces-pillar__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ces-pillar__kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) { .ces-pillar__kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.ces-pillar__kpi {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.ces-pillar__kpi-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}
.ces-pillar__kpi-value {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.ces-pillar__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.ces-pillar__card-head {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}
.ces-pillar__card-title { margin: 0; font-size: 17px; font-weight: 700; color: #111827; }
.ces-pillar__card-sub   { margin: 4px 0 0; font-size: 13px; color: #6b7280; }

/* Monthly Trend bar chart */
.ces-pillar__trend {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 24px;
  height: 240px;
}
.ces-pillar__trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
  justify-content: flex-end;
}
.ces-pillar__trend-hours {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}
.ces-pillar__trend-bar {
  width: 100%;
  min-height: 40px;
  border-radius: 8px 8px 0 0;
  transition: opacity 0.15s;
}
.ces-pillar__trend-bar:hover { opacity: 0.85; }
.ces-pillar__trend-bar--pink   { background: #ec4899; }
.ces-pillar__trend-bar--blue   { background: #3b82f6; }
.ces-pillar__trend-bar--purple { background: #8b5cf6; }
.ces-pillar__trend-bar--green  { background: #22c55e; }
.ces-pillar__trend-bar--orange { background: #f97316; }
.ces-pillar__trend-bar--yellow { background: #eab308; }
.ces-pillar__trend-labels { text-align: center; }
.ces-pillar__trend-month { margin: 0; font-size: 12px; font-weight: 500; color: #111827; }
.ces-pillar__trend-vols  { margin: 0; font-size: 11px; color: #6b7280; }

/* 2-col Top Orgs + Geographic */
.ces-pillar__two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1024px) { .ces-pillar__two-col { grid-template-columns: 1fr; } }

.ces-pillar__org-list {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ces-pillar__org-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
}
.ces-pillar__org-rank {
  width: 32px;
  height: 32px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ces-pillar__org-body { flex: 1; min-width: 0; }
.ces-pillar__org-name { margin: 0 0 8px; font-weight: 600; color: #111827; }
.ces-pillar__org-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.ces-pillar__org-stat-label { margin: 0; font-size: 11px; color: #6b7280; }
.ces-pillar__org-stat-value { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
.ces-pillar__org-impact {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #16a34a;
}

.ces-pillar__geo-list {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ces-pillar__geo-row { display: flex; flex-direction: column; gap: 6px; }
.ces-pillar__geo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ces-pillar__geo-city {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #111827;
  font-size: 14px;
}
.ces-pillar__geo-vols { font-size: 13px; color: #6b7280; }
.ces-pillar__geo-barwrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ces-pillar__geo-bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ces-pillar__geo-bar-fill {
  height: 100%;
  border-radius: 999px;
}
.ces-pillar__geo-hours {
  font-size: 11px;
  color: #6b7280;
  width: 84px;
  text-align: right;
  flex-shrink: 0;
}

/* Employee Stories */
.ces-pillar__story-grid {
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .ces-pillar__story-grid { grid-template-columns: 1fr; } }
.ces-pillar__story {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.ces-pillar__story-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ces-pillar__story-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.ces-pillar__story-name { margin: 0; font-weight: 600; color: #111827; }
.ces-pillar__story-dept { margin: 0; font-size: 12px; color: #6b7280; }
.ces-pillar__story-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}
.ces-pillar__story-text {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

/* Upcoming Opportunities */
.ces-pillar__opp-list {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ces-pillar__opp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: border-color 0.12s;
}
.ces-pillar__opp-row:hover { border-color: #93c5fd; }
.ces-pillar__opp-body { flex: 1; min-width: 0; }
.ces-pillar__opp-title { margin: 0 0 6px; font-weight: 600; color: #111827; }
.ces-pillar__opp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}
.ces-pillar__opp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ces-pillar__opp-badge {
  padding: 4px 10px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}
.ces-pillar__opp-badge--pink   { background: #db2777; }
.ces-pillar__opp-badge--blue   { background: #2563eb; }
.ces-pillar__opp-badge--purple { background: #7c3aed; }
.ces-pillar__opp-badge--green  { background: #16a34a; }
.ces-pillar__opp-badge--orange { background: #ea580c; }
.ces-pillar__opp-badge--yellow { background: #ca8a04; }
.ces-pillar__opp-actions .ces-btn { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }

/* Make fc-tx-row usable as a link (pillar list on dashboard) */
.fc-tx-row--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.fc-tx-row--link:hover { background: #f9fafb; }

/* ── Institutional Dashboard · Figma-parity tab content ────────
   Adds panels for Overview (Portfolio Performance + Impact Summary
   + Recent Activity), Portfolio (Active Investments card list),
   Impact Metrics (Category pie + Geographic pins + 10 Pillars),
   Reports (Compliance docs), Transactions (Fund deployments). */
.ins-overview-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .ins-overview-grid { grid-template-columns: 1fr; } }

.ins-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .ins-impact-grid { grid-template-columns: 1fr; } }

.ins-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ins-panel--wide { min-width: 0; }
.ins-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.ins-panel__title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.ins-panel__sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.ins-panel__body { padding: 18px 20px; }
.ins-panel__body--stack { display: flex; flex-direction: column; gap: 12px; }
.ins-panel__head-actions { display: flex; align-items: center; gap: 8px; }

.ins-select {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: #ffffff;
  color: #111827;
}
.ins-select:disabled { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }

.ins-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s;
}
.ins-btn--outline {
  background: #ffffff;
  color: #374151;
  border-color: #d1d5db;
}
.ins-btn--outline:not(:disabled):hover { background: #f9fafb; }
.ins-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ins-search-wrap { position: relative; }
.ins-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.ins-search-input {
  padding: 8px 12px 8px 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  width: 200px;
  background: #ffffff;
}
.ins-search-input:disabled { background: #f9fafb; }

.ins-progress {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0;
}
.ins-progress-bar { height: 100%; background: #2563eb; }

.ins-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ins-badge--secondary { background: #f3f4f6; color: #374151; }
.ins-badge--success   { background: #16a34a; color: #ffffff; }

/* Portfolio Performance bar chart */
.ins-perf-chart {
  min-height: 240px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border-radius: 10px;
  padding: 16px;
}
.ins-perf-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: #4b5563;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ins-perf-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ins-perf-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ins-perf-legend-dot--deployed  { background: #2563eb; }
.ins-perf-legend-dot--committed { background: #7c3aed; }
.ins-perf-legend-note { margin-left: auto; color: #6b7280; }
.ins-perf-bars {
  height: 185px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.ins-perf-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  justify-content: flex-end;
}
.ins-perf-col-stack { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.ins-perf-bar { width: 100%; border-radius: 4px 4px 0 0; }
.ins-perf-bar--deployed  { background: #2563eb; }
.ins-perf-bar--committed { background: rgba(124, 58, 237, 0.7); }
.ins-perf-col-label { font-size: 10px; color: #6b7280; margin-top: 4px; }

/* Impact Summary */
.ins-summary { display: flex; flex-direction: column; gap: 16px; }
.ins-summary-row {}
.ins-summary-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ins-summary-row-label { font-size: 13px; color: #6b7280; }
.ins-summary-row-value { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }

/* Recent Activity */
.ins-activity-list { display: flex; flex-direction: column; gap: 12px; }
.ins-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: background 0.12s;
}
.ins-activity-row:hover { background: #f9fafb; }
.ins-activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ins-activity-icon--deployment { background: #dbeafe; color: #2563eb; }
.ins-activity-icon--impact     { background: #dcfce7; color: #16a34a; }
.ins-activity-icon--commitment { background: #ede9fe; color: #7c3aed; }
.ins-activity-body { flex: 1; min-width: 0; }
.ins-activity-desc { margin: 0; font-weight: 500; color: #111827; }
.ins-activity-date { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.ins-activity-right { text-align: right; flex-shrink: 0; }
.ins-activity-amount { margin: 0 0 2px; font-weight: 700; color: #111827; }
.ins-activity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ins-activity-badge--completed { background: #111827; color: #ffffff; }
.ins-activity-badge--new       { background: #dbeafe; color: #1e40af; }
.ins-activity-badge--pending   { background: #f3f4f6; color: #374151; }

/* Active Investments cards */
.ins-investment-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.ins-investment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ins-investment-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ins-investment-title { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.ins-investment-perf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.ins-investment-impact { margin: 0 0 12px; font-size: 13px; color: #6b7280; }
.ins-investment-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.ins-investment-metric-label { margin: 0 0 2px; font-size: 11px; color: #6b7280; }
.ins-investment-metric-value { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.ins-investment-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ins-investment-actions .ins-btn { flex: 1; justify-content: center; }

/* Impact by Category pie chart */
.ins-pie-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #f0fdf4, #eff6ff);
  border-radius: 10px;
  min-height: 240px;
}
.ins-pie { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.ins-pie-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ins-pie-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ins-pie-total { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.ins-pie-total-label { margin: 0; font-size: 11px; color: #6b7280; }
.ins-pie-legend { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ins-pie-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ins-pie-legend-left { display: flex; align-items: center; gap: 8px; }
.ins-pie-legend-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.ins-pie-legend-name { font-size: 13px; font-weight: 500; color: #111827; }
.ins-pie-legend-right { text-align: right; flex-shrink: 0; }
.ins-pie-legend-amount { margin: 0; font-size: 13px; font-weight: 700; color: #111827; }
.ins-pie-legend-pct { margin: 0; font-size: 11px; color: #6b7280; }
@media (max-width: 720px) { .ins-pie-wrap { flex-direction: column; } }

/* Geographic map */
.ins-geo-map {
  position: relative;
  height: 240px;
  background: linear-gradient(135deg, #dbeafe, #f0f9ff);
  border-radius: 10px;
  overflow: hidden;
}
.ins-geo-pin {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  animation: ins-pin-pulse 2s infinite;
  transform: translate(-50%, -50%);
}
.ins-geo-pin--sm { width: 16px; height: 16px; }
.ins-geo-pin--md { width: 22px; height: 22px; }
.ins-geo-pin--lg { width: 28px; height: 28px; }
.ins-geo-pin--blue   { background: #3b82f6; }
.ins-geo-pin--green  { background: #10b981; }
.ins-geo-pin--purple { background: #a855f7; }
.ins-geo-pin--amber  { background: #f59e0b; }
.ins-geo-pin--cyan   { background: #06b6d4; }
.ins-geo-pin--rose   { background: #f43f5e; }
@keyframes ins-pin-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}
.ins-geo-legend {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
}
.ins-geo-legend-title { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: #111827; }
.ins-geo-legend-items {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #4b5563;
  align-items: center;
}
.ins-geo-legend-items > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ins-geo-legend .ins-geo-pin { animation: none; box-shadow: none; border-width: 2px; }

/* 10 Pillars Alignment */
.ins-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .ins-pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ins-pillar-grid { grid-template-columns: 1fr; } }
.ins-pillar-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.ins-pillar-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}
.ins-pillar-num--amber  { background: #fef3c7; color: #ca8a04; }
.ins-pillar-num--blue   { background: #dbeafe; color: #2563eb; }
.ins-pillar-num--purple { background: #ede9fe; color: #7c3aed; }
.ins-pillar-num--green  { background: #dcfce7; color: #16a34a; }
.ins-pillar-name { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
.ins-pillar-sdg  { margin: 2px 0 4px; font-size: 10px; color: #6b7280; }
.ins-pillar-committed { margin: 0; font-size: 11px; font-weight: 600; color: #6b7280; }

/* Compliance Documents */
.ins-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: background 0.12s;
}
.ins-doc-row:hover { background: #f9fafb; }
.ins-doc-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ins-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ins-doc-icon--blue   { background: #dbeafe; color: #2563eb; }
.ins-doc-icon--green  { background: #dcfce7; color: #16a34a; }
.ins-doc-icon--purple { background: #ede9fe; color: #7c3aed; }
.ins-doc-title { margin: 0; font-weight: 500; color: #111827; }
.ins-doc-generated { margin: 2px 0 0; font-size: 13px; color: #6b7280; }

/* Transaction History */
.ins-tx-list { display: flex; flex-direction: column; }
.ins-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.ins-tx-row:last-child { border-bottom: 0; }
.ins-tx-left { display: flex; align-items: center; gap: 10px; }
.ins-tx-icon {
  width: 32px;
  height: 32px;
  background: #dbeafe;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ins-tx-kind { margin: 0; font-size: 13px; font-weight: 500; color: #111827; }
.ins-tx-date { margin: 2px 0 0; font-size: 11px; color: #6b7280; }
.ins-tx-right { text-align: right; }
.ins-tx-amount { margin: 0 0 2px; font-weight: 600; color: #111827; }

/* ── Institutional Settings page ─────────────────────────────
   Full-page port of InstitutionalSettings.tsx (1116 lines).
   7 tabs + 2 dialogs. All primitives read-only until follow-ups. */
.ins-settings { min-height: 100%; background: #f8fafc; }
.ins-settings__header {
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: #ffffff;
}
.ins-settings__header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}
.ins-settings__header .ces-back-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  margin: 0 0 16px 0;
}
.ins-settings__header .ces-back-btn:hover { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.ins-settings__title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ins-settings__icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #60a5fa, #a855f7);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ins-settings__title { margin: 0; font-size: 22px; font-weight: 700; }
.ins-settings__sub { margin: 2px 0 0; font-size: 13px; color: #bfdbfe; }

.ins-settings__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.ins-settings__tabs {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.ins-settings__tabs .fc-tab { border-radius: 6px; border-bottom: 0; padding: 8px 14px; }
.ins-settings__tabs .fc-tab.is-active {
  background: #111827;
  color: #ffffff;
  border-bottom: 0;
}

.ins-settings-field { display: flex; flex-direction: column; gap: 6px; }
.ins-settings-label { font-size: 13px; font-weight: 600; color: #374151; }
.ins-settings-input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  color: #111827;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
}
.ins-settings-input:disabled { background: #f9fafb; color: #6b7280; cursor: not-allowed; }

.ins-settings-grid { display: grid; gap: 16px; }
.ins-settings-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-settings-grid--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ins-settings-field--wide { grid-column: span 2; }
@media (max-width: 640px) {
  .ins-settings-grid--2col,
  .ins-settings-grid--4col { grid-template-columns: 1fr; }
  .ins-settings-field--wide { grid-column: span 1; }
}

.ins-settings-section-break { padding-top: 20px; border-top: 1px solid #f3f4f6; }
.ins-settings-section-title { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: #111827; }

.ins-settings-logo-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.ins-settings-logo {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #60a5fa, #a855f7);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Verification rows */
.ins-verif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ins-verif-left { display: flex; align-items: center; gap: 12px; }
.ins-verif-check {
  width: 40px;
  height: 40px;
  background: #dcfce7;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ins-verif-title { margin: 0; font-weight: 500; color: #111827; }
.ins-verif-sub { margin: 2px 0 0; font-size: 13px; color: #6b7280; }

/* Team member rows */
.ins-member-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: background 0.12s;
}
.ins-member-row:hover { background: #f9fafb; }
.ins-member-left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ins-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.ins-member-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ins-member-name { margin: 0; font-weight: 500; color: #111827; }
.ins-member-email { margin: 4px 0 2px; font-size: 13px; color: #6b7280; }
.ins-member-meta  { margin: 0; font-size: 12px; color: #9ca3af; }
.ins-member-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Role cards */
.ins-role-card {
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ins-role-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ins-role-name { margin: 0; font-weight: 500; color: #111827; }
.ins-role-desc { margin: 0; font-size: 13px; color: #6b7280; }

/* Notification toggle rows */
.ins-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.ins-toggle-title { margin: 0; font-weight: 500; color: #111827; }
.ins-toggle-sub { margin: 2px 0 0; font-size: 13px; color: #6b7280; }
.ins-2fa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ins-2fa-left { display: flex; align-items: center; gap: 12px; }

/* Switch toggle */
.ins-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.ins-switch input { opacity: 0; width: 0; height: 0; }
.ins-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.2s;
}
.ins-switch-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.ins-switch input:checked + .ins-switch-slider { background: #2563eb; }
.ins-switch input:checked + .ins-switch-slider::before { transform: translateX(18px); }
.ins-switch input:disabled + .ins-switch-slider { cursor: not-allowed; opacity: 0.7; }

/* Security activity */
.ins-settings-activity { display: flex; flex-direction: column; }
.ins-settings-activity-row {
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.ins-settings-activity-row:last-child { border-bottom: 0; }
.ins-settings-activity-action { margin: 0; font-size: 13px; font-weight: 500; color: #111827; }
.ins-settings-activity-meta { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.ins-settings-activity-ip { margin: 2px 0 0; font-size: 12px; color: #9ca3af; }

/* API keys */
.ins-apikey-card { padding: 16px; border: 1px solid #e5e7eb; border-radius: 10px; }
.ins-apikey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ins-apikey-name { margin: 0; font-weight: 500; color: #111827; }
.ins-apikey-created { margin: 2px 0 0; font-size: 13px; color: #6b7280; }
.ins-apikey-key { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ins-apikey-input { font-family: monospace; font-size: 13px; }
.ins-apikey-eye { flex-shrink: 0; padding: 8px; }
.ins-apikey-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}
.ins-apidoc-btn { justify-content: flex-start; width: 100%; }

/* Subscription plan */
.ins-plan-card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.ins-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ins-plan-name { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.ins-plan-sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.ins-plan-active { background: #7c3aed !important; color: #ffffff !important; }
.ins-plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.ins-plan-price-value { font-size: 36px; font-weight: 700; color: #111827; }
.ins-plan-price-per { color: #6b7280; }
.ins-plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.ins-plan-features li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #111827; }
.ins-plan-next { margin: 0; font-size: 13px; color: #6b7280; }

/* Payment methods */
.ins-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ins-payment-left { display: flex; align-items: center; gap: 16px; }
.ins-payment-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
}
.ins-payment-icon--card   { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.ins-payment-icon--crypto { background: linear-gradient(135deg, #f97316, #ca8a04); }
.ins-payment-name { margin: 0; font-weight: 500; color: #111827; }
.ins-payment-sub { margin: 2px 0 0; font-size: 13px; color: #6b7280; }

/* Invoices */
.ins-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ins-invoice-date { margin: 0; font-weight: 500; color: #111827; }
.ins-invoice-amount { margin: 2px 0 0; font-size: 13px; color: #6b7280; }
.ins-invoice-actions { display: flex; align-items: center; gap: 8px; }

/* Danger */
.ins-panel--danger { border-color: #fecaca; }
.ins-panel__title--danger { color: #dc2626; }
.ins-btn--danger {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}
.ins-btn--danger:not(:disabled):hover { background: #b91c1c; }
.ins-btn--ghost {
  background: transparent;
  color: #6b7280;
  border-color: transparent;
  padding: 6px;
}
.ins-btn--ghost:not(:disabled):hover { color: #111827; background: #f3f4f6; }
.ins-btn--primary {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}
.ins-btn--primary:not(:disabled):hover { background: #1f2937; }

/* Extra badge variant */
.ins-badge--primary { background: #111827; color: #ffffff; }

/* Modal dialog */
.ins-dialog {
  width: min(560px, 96vw);
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: hidden;
}
.ins-dialog::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
.ins-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.ins-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}
.ins-dialog__title { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }
.ins-dialog__sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.ins-dialog__close {
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
}
.ins-dialog__close:hover { color: #111827; }
.ins-dialog__body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ins-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #f3f4f6;
}
.ins-dialog__warning {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
}
.ins-dialog__warning-title { margin: 0 0 6px; font-weight: 600; color: #7f1d1d; }
.ins-dialog__warning-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── EAN Admin · Application Review Modal ─────────────────────
   Ports ApplicationReviewModal.tsx (662 lines). 4 tabs, per-type
   content branches, read-only (Story 46.4 wires approve/reject). */
.ean-review-modal {
  width: min(1000px, 96vw);
  /* 2026-08-02 · fixed height (was max-height: 92vh) so the dialog
     stays put across tab switches instead of resizing to each tab's
     content. `.ean-review-modal__body` scrolls internally when a tab
     is taller than the frame. */
  height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
  position: fixed;
  inset: 0;
  margin: auto;
  overflow: hidden;
}
.ean-review-modal::backdrop { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); }
.ean-review-modal__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ean-review-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(90deg, #eff6ff, #f5f3ff);
  border-bottom: 1px solid #e5e7eb;
}
.ean-review-modal__ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ean-review-modal__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 2026-08-08 · 20→24px so the modal title reads as a headline, not
   just slightly-bigger body copy. */
.ean-review-modal__title { margin: 0; font-size: 24px; font-weight: 700; color: #111827; }
.ean-review-modal__badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ean-review-modal__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.ean-review-modal__badge--type      { background: #f3f4f6; color: #374151; }
.ean-review-modal__badge--secondary { background: #f3f4f6; color: #374151; }
.ean-review-modal__badge--priority-high   { background: #ef4444; color: #ffffff; }
.ean-review-modal__badge--priority-medium { background: #f59e0b; color: #ffffff; }
.ean-review-modal__submitted { font-size: 14px; color: #6b7280; }
.ean-review-modal__close {
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.ean-review-modal__close:hover { color: #111827; }
/* 2026-08-07 · Header-right action cluster in edit-mode Invite modal:
   [Resend Invitation button] [× close]. Tiny gap keeps the close
   button visually separate. The resend form (button_to wraps its
   button in a form) is set to inline so it doesn't take a full row. */
.ean-review-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ean-review-modal__resend-form { margin: 0; }
/* 2026-08-08 · Post-save success banner that lives at the top of the
   Edit Organization Info modal body. Sits in an id'd slot the Save
   Changes turbo_stream response replaces. */
.ean-review-modal__flash-slot { min-height: 0; }
.ean-review-modal__saved-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  animation: ea-resend-pulse 400ms ease-out;
}
.ean-review-modal__resend-wrap { display: inline-flex; }
.ean-review-modal__resend-sent {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  animation: ea-resend-pulse 400ms ease-out;
}
@keyframes ea-resend-pulse {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.ean-review-modal__accepted-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
}

/* 2026-08-08 · Activity Log modal — timeline for per-org audit trail. */
.ean-log { list-style: none; margin: 0; padding: 0; }
.ean-log__item {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #f3f4f6;
}
.ean-log__item:last-child { border-bottom: 0; }
.ean-log__dot {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.ean-log__item--blue  .ean-log__dot { background: #dbeafe; color: #1e40af; }
.ean-log__item--green .ean-log__dot { background: #d1fae5; color: #065f46; }
.ean-log__item--gray  .ean-log__dot { background: #f3f4f6; color: #6b7280; }
.ean-log__item--amber .ean-log__dot { background: #fef3c7; color: #92400e; }
.ean-log__body { flex: 1; min-width: 0; }
.ean-log__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ean-log__title {
  font-weight: 700;
  color: #111827;
  font-size: 14px;
}
.ean-log__time {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}
.ean-log__detail {
  margin: 2px 0 0;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.45;
}
.ean-log__actor {
  margin: 4px 0 0;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}
/* 2026-08-11 · Panel-scope log — prepend the org name in front of
   each event title so a cross-org list stays legible. Slightly muted
   so the event title still leads visually. */
.ean-log__scope-org {
  color: #1e293b;
  font-weight: 700;
}
.ean-log__scope-sep {
  color: #94a3b8;
  margin: 0 2px;
}
.ean-log__meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: #6b7280;
}
.ean-log__meta a {
  color: #2563eb;
  text-decoration: none;
}
.ean-log__meta a:hover { text-decoration: underline; }
.ean-log__empty {
  margin: 20px 0;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}
/* Narrow variant so the activity log doesn't take up the whole
   dialog width — it's a text feed, not a form. */
/* 2026-08-11 · Constrain the OUTER dialog width for narrow-variant
   modals (was only capping inner max-width, which left the content
   left-anchored inside a 1000px dialog). Now the whole dialog is
   narrower and stays centered via the base `inset: 0; margin: auto`. */
.ean-review-modal--narrow { width: min(720px, 96vw); }
.ean-review-modal--narrow .ean-review-modal__inner { max-width: none; }

.ean-review-modal__body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }

/* When the inner content is a <form> (Add Organization modal), the
   form itself must be a flex column so .ean-review-modal__body's
   flex:1 + overflow-y:auto actually work — otherwise the form takes
   its natural height and the body can't scroll. Added 2026-07-31. */
.ean-review-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 2026-08-02 · The 4-form wizard rewrite wraps the body inside a
   turbo-frame + a fc-tabs controller div. Both need to pass the
   flex layout through so .ean-review-modal__body can compute a
   bounded height and scroll. Without these, the body grows to
   content height and the whole modal overflows. */
.ean-review-modal__inner > turbo-frame,
.ean-review-modal__inner > turbo-frame > [data-controller~="fc-tabs"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Prevent the page under an open modal from scrolling. Native
   <dialog> UA styles vary by browser on this — force it via :has()
   so any open dialog on the page locks the html scroll. Added
   2026-07-31 with the Add Organization modal. */
html:has(dialog[open]) { overflow: hidden; }
.ean-review-modal__tabs {
  display: flex;
  /* 2026-08-03 · Wrap to a second row (was overflow-x:auto) once we
     grew to 10 tabs — off-screen tabs weren't discoverable. */
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  margin-bottom: 20px;
}
.ean-review-modal__tab {
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.ean-review-modal__tab:hover { color: #111827; }
.ean-review-modal__tab.is-active { background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ean-review-modal__panel { display: none; flex-direction: column; gap: 16px; }
.ean-review-modal__panel.is-active { display: flex; }

.ean-review-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 2026-08-08 · Card titles bumped 15→18px, subs 13→15px. The cards
   are the section anchors inside the OM modals ("1.1 Organization
   Information", "Section 8.1 · Documentation", "Primary Contact");
   they need to read as headings, not as body text. */
.ean-review-card__title { margin: 0; font-size: 18px; font-weight: 700; color: #111827; display: inline-flex; align-items: center; gap: 8px; }
.ean-review-card__sub { margin: -8px 0 0; font-size: 15px; color: #6b7280; }
.ean-review-card__body { margin: 0; font-size: 13px; color: #4b5563; line-height: 1.5; }
.ean-review-card__grid { display: grid; gap: 16px; }
.ean-review-card__grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ean-review-card__grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ean-review-card__grid-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .ean-review-card__grid--2col,
  .ean-review-card__grid--3col { grid-template-columns: 1fr; }
  .ean-review-card__grid-full { grid-column: 1; }
}

/* 2026-08-02 · Checkbox / radio groups for Compliance Section 1
   multi-select (1.2 Org Type, 1.4 Cause Areas) and single-select
   (1.5 Reach, 1.7 Budget) sub-sections of the Add Organization Tab 1. */
.ean-review-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.ean-review-checkbox,
.ean-review-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: #111827;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.ean-review-checkbox:hover,
.ean-review-radio:hover { background: #f9fafb; }
.ean-review-checkbox input:disabled + span { color: #9ca3af; }
.ean-review-radio-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 2026-08-03 · Rank widget (Section 3.2) — one row per priority
   item, label on the left with a numeric select on the right. */
.ean-review-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ean-review-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}
.ean-review-rank-row:last-child { border-bottom: 0; }
.ean-review-rank-label {
  font-size: 13px;
  color: #111827;
  flex: 1;
  min-width: 0;
}
.ean-review-rank-row select { width: 90px; }

/* 2026-08-03 · Rating grid (Sections 3.4, 5.3) — one row per area,
   label on the left with 5 tight radio buttons (1-5) on the right. */
.ean-review-rating-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ean-review-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}
.ean-review-rating-row:last-child { border-bottom: 0; }
.ean-review-rating-label {
  font-size: 13px;
  color: #111827;
  flex: 1;
  min-width: 0;
}
.ean-review-rating-radios {
  display: flex;
  gap: 8px;
}
.ean-review-rating-radio {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
}

@media (max-width: 640px) {
  .ean-review-checkbox-grid { grid-template-columns: 1fr; }
  .ean-review-rating-row,
  .ean-review-rank-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 2026-08-08 · Bumped 12→14px + darkened + bolded. 12px + gray read
   as tertiary text; a form label is a title for its input and needs
   to be legible without squinting. */
.ean-review-field-label { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #374151; }
.ean-review-field-value { margin: 0; font-weight: 500; color: #111827; }
.ean-review-field-sub { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.ean-review-field-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  text-decoration: none;
}
.ean-review-field-link:hover { text-decoration: underline; }
.ean-review-mission { line-height: 1.6; }

.ean-review-stats-row { margin-top: 8px; padding-top: 16px; border-top: 1px solid #f3f4f6; }
.ean-review-stat {
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  background: #eff6ff;
}
.ean-review-stat--blue   { background: #eff6ff; }
.ean-review-stat--green  { background: #f0fdf4; }
.ean-review-stat--purple { background: #f5f3ff; }
.ean-review-stat svg { margin: 0 auto 8px; display: block; }
.ean-review-stat__value { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.ean-review-stat__label { margin: 4px 0 0; font-size: 12px; color: #6b7280; }

.ean-review-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ean-review-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #111827; }

.ean-review-personnel { display: flex; flex-direction: column; gap: 8px; }
.ean-review-personnel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ean-review-verified {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: #16a34a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.ean-review-docs { display: flex; flex-direction: column; gap: 8px; }
.ean-review-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: background 0.12s;
}
.ean-review-doc-row:hover { background: #f9fafb; }
.ean-review-doc-left { display: flex; align-items: center; gap: 12px; }
.ean-review-doc-right { display: flex; align-items: center; gap: 8px; }
/* 2026-08-08 · Required-flag chrome for Compliance Section 8.1 rows.
   Admin (Register modal) sees a checkbox; user-facing surfaces get
   a small red "Required" pill. Row itself gets a subtle amber tint
   when data-required is true so required items stand out at a
   glance in both modes. */
.ean-review-doc-row[data-required="true"] {
  border-color: #fde68a;
  background: #fffbeb;
}
.ean-review-doc-row[data-required="true"]:hover { background: #fef3c7; }
.ean-review-doc-required-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
}
.ean-review-doc-required-toggle:hover { background: #f9fafb; }
.ean-review-doc-required-toggle input { margin: 0; cursor: pointer; }
.ean-review-required-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #dc2626;
  font-weight: 600;
}
/* 2026-08-08 · Required-field asterisk marker. Used inline in label
   text to signal a required input. Kept as a semantic class so a
   color change lands in one spot instead of every field. */
.ean-review-req {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
}
.ean-review-doc-required-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ean-review-icon-btn {
  background: transparent;
  border: 0;
  color: #6b7280;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}
.ean-review-icon-btn:hover { background: #f3f4f6; color: #111827; }
.ean-review-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ean-review-funding { display: flex; flex-direction: column; gap: 8px; }
.ean-review-funding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ean-review-funding-amount { margin: 0; font-size: 18px; font-weight: 700; color: #16a34a; }

.ean-review-refs { display: flex; flex-direction: column; gap: 8px; }
.ean-review-ref-card {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ean-review-ref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ean-review-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 640px) { .ean-review-cert-grid { grid-template-columns: 1fr; } }
.ean-review-cert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  color: #111827;
}

.ean-review-status { display: flex; flex-direction: column; gap: 10px; }
.ean-review-status-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}
.ean-review-status-row svg { margin-top: 2px; flex-shrink: 0; }
.ean-review-status-title { margin: 0; font-weight: 500; color: #14532d; }
.ean-review-status-sub { margin: 2px 0 0; font-size: 13px; color: #166534; }

.ean-review-notes {
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  background: #ffffff;
  color: #111827;
  box-sizing: border-box;
  width: 100%;
}
.ean-review-notes:disabled { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }

.ean-review-card--recommend {
  border: 2px solid #fed7aa;
  background: #fff7ed;
}
.ean-review-recommend-foot { display: flex; align-items: center; gap: 12px; }

.ean-review-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-wrap: wrap;
}
.ean-review-modal__footer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ean-review-reject-btn { color: #dc2626 !important; border-color: #fecaca !important; }
.ean-review-reject-btn:not(:disabled):hover { background: #fef2f2 !important; }
.ean-review-approve-btn {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}
.ean-review-approve-btn:not(:disabled):hover { background: #15803d !important; }

/* ── EAN Admin · SpinToWinAdmin (Panel 5) ─────────────────────
   Ports SpinToWinAdmin.tsx (659 lines). 3 sub-tabs: Prizes /
   Settings / Analytics. All controls disabled — Epic 50. */
.spin-admin { display: flex; flex-direction: column; gap: 20px; }
.spin-admin__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.spin-admin__title { margin: 0; font-size: 20px; font-weight: 700; color: #111827; }
.spin-admin__sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.spin-admin__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}
.spin-admin__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.spin-admin__tab:hover { color: #111827; }
.spin-admin__tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }
.spin-admin__panel { display: none; flex-direction: column; gap: 16px; }
.spin-admin__panel.is-active { display: flex; }

.spin-admin__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) { .spin-admin__stats { grid-template-columns: repeat(2, 1fr); } }
.spin-admin__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.spin-admin__stat-label { margin: 0; font-size: 12px; color: #6b7280; }
.spin-admin__stat-value { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: #111827; }
.spin-admin__stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.spin-admin__stat-icon--yellow { color: #ca8a04; background: #fef9c3; }
.spin-admin__stat-icon--green  { color: #16a34a; background: #dcfce7; }
.spin-admin__stat-icon--blue   { color: #2563eb; background: #dbeafe; }
.spin-admin__stat-icon--purple { color: #7c3aed; background: #ede9fe; }

.spin-admin__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.spin-admin__card-head { padding: 16px 20px; border-bottom: 1px solid #f3f4f6; }
.spin-admin__card-title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.spin-admin__card-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.spin-admin__prizes { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.spin-prize {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.spin-prize__image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.spin-prize__image--halo-points  { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.spin-prize__image--store-credit { background: linear-gradient(135deg, #16a34a, #059669); }
.spin-prize__image--special-item { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.spin-prize__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.spin-prize__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.spin-prize__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spin-prize__name { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.spin-prize__type-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.spin-prize__type-badge--halo-points  { background: #fef9c3; color: #a16207; }
.spin-prize__type-badge--store-credit { background: #dcfce7; color: #15803d; }
.spin-prize__type-badge--special-item { background: #ede9fe; color: #6d28d9; }
.spin-prize__type-badge--muted        { background: #f3f4f6; color: #6b7280; }
.spin-prize__actions { display: flex; gap: 4px; flex-shrink: 0; }
.spin-prize__desc { margin: 0; font-size: 13px; color: #6b7280; }
.spin-prize__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}
.spin-prize__odds {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.spin-prize__odds--green  { color: #16a34a; }
.spin-prize__odds--blue   { color: #2563eb; }
.spin-prize__odds--orange { color: #ea580c; }
.spin-prize__odds--purple { color: #7c3aed; }
.spin-prize__odds--red    { color: #dc2626; }
.spin-prize__weight { font-size: 11px; color: #9ca3af; }
.spin-prize__value { font-weight: 600; color: #111827; }
.spin-prize__progress-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .spin-prize__progress-row { grid-template-columns: 1fr; } }
.spin-prize__progress { display: flex; flex-direction: column; gap: 4px; }
.spin-prize__progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
}
.spin-prize__progress-value { font-weight: 600; color: #111827; }

.spin-admin__settings-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) { .spin-admin__settings-grid { grid-template-columns: 1fr; } }
.spin-admin__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
}
.spin-admin__settings-foot {
  padding: 16px 20px;
  border-top: 1px solid #f3f4f6;
}

.spin-admin__analytics {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 720px) { .spin-admin__analytics { grid-template-columns: 1fr; } }
.spin-admin__big-value { margin: 4px 0 0; font-size: 30px; font-weight: 700; color: #111827; }
.spin-admin__delta { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.spin-admin__delta--up { color: #16a34a; display: inline-flex; align-items: center; gap: 4px; }

.spin-admin__chart-placeholder {
  margin: 20px;
  height: 280px;
  background: linear-gradient(135deg, #f5f3ff, #eff6ff);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6b7280;
}
.spin-admin__chart-title { margin: 0; font-weight: 600; color: #111827; }
.spin-admin__chart-sub { margin: 0; font-size: 13px; color: #6b7280; }

/* ── EAN Admin · Fraud & Moderation (Panel 3) ─────────────────
   Ports AuditDashboard.tsx (808 lines) — volunteer check-in
   fraud detection UI. 3 sub-tabs: Overview / Flagged / Trust
   Scores. All actions disabled — Epic 57 not built. */
.fraud-dash { display: flex; flex-direction: column; gap: 20px; }
.fraud-dash__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fraud-dash__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fraud-dash__sub { margin: 4px 0 0; font-size: 13px; color: #6b7280; }

.fraud-dash__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) { .fraud-dash__stats { grid-template-columns: repeat(2, 1fr); } }
.fraud-dash__stat {
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.fraud-dash__stat-label { margin: 0; font-size: 12px; color: #6b7280; font-weight: 500; }
.fraud-dash__stat-value { margin: 6px 0 4px; font-size: 26px; font-weight: 700; color: #111827; }
.fraud-dash__stat-value--orange { color: #ea580c; }
.fraud-dash__stat-value--blue   { color: #2563eb; }
.fraud-dash__stat-value--red    { color: #dc2626; }
.fraud-dash__stat-sub { margin: 0; font-size: 11px; color: #6b7280; }

.fraud-dash__tabs {
  display: inline-flex;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  gap: 4px;
  align-self: flex-start;
}
.fraud-dash__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 0;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
}
.fraud-dash__tab:hover { color: #111827; }
.fraud-dash__tab.is-active { background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

.fraud-dash__panel { display: none; flex-direction: column; gap: 16px; }
.fraud-dash__panel.is-active { display: flex; }

.fraud-dash__two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .fraud-dash__two-col { grid-template-columns: 1fr; } }

.fraud-dash__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.fraud-dash__card-head { padding: 16px 20px; border-bottom: 1px solid #f3f4f6; }
.fraud-dash__card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fraud-dash__card-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.fraud-dash__card-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.fraud-flag-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}
.fraud-flag-row__body { flex: 1; min-width: 0; }
.fraud-flag-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.fraud-flag-row__user { font-size: 13px; font-weight: 500; color: #111827; }
.fraud-flag-row__reason { margin: 0; font-size: 12px; color: #6b7280; }
.fraud-flag-row__meta { margin: 2px 0 0; font-size: 11px; color: #6b7280; }

.fraud-sev {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
  text-transform: capitalize;
}
.fraud-sev--critical { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.fraud-sev--high     { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.fraud-sev--medium   { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.fraud-sev--low      { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.fraud-sev--none     { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

.fraud-badge-outline {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #4b5563;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.fraud-risk-row {
  padding: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}
.fraud-risk-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.fraud-risk-row__name { margin: 0; font-weight: 500; color: #111827; }
.fraud-risk-row__meta { margin: 2px 0 0; font-size: 11px; color: #6b7280; }
.fraud-risk-row__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fraud-risk-row__stat-label { margin: 0; font-size: 11px; color: #6b7280; }
.fraud-risk-row__stat-value { margin: 2px 0 0; font-weight: 700; }
.fraud-risk-row__stat-value--red { color: #dc2626; }

.fraud-risk-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.fraud-risk-badge--low    { background: #dcfce7; color: #166534; }
.fraud-risk-badge--medium { background: #fef9c3; color: #854d0e; }
.fraud-risk-badge--high   { background: #fee2e2; color: #991b1b; }

.fraud-trust--green  { color: #16a34a; }
.fraud-trust--yellow { color: #ca8a04; }
.fraud-trust--red    { color: #dc2626; }

.fraud-empty {
  text-align: center;
  padding: 24px 16px;
  color: #6b7280;
}
.fraud-empty svg { margin: 0 auto 8px; display: block; }
.fraud-empty p { margin: 0; font-size: 13px; }
.fraud-empty--large { padding: 48px 16px; }
.fraud-empty__title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 4px !important; }

.fraud-dash__health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 720px) { .fraud-dash__health-grid { grid-template-columns: 1fr; } }
.fraud-dash__health-label { margin: 0 0 8px; font-size: 13px; color: #6b7280; }
.fraud-dash__health-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fraud-dash__health-value { font-size: 13px; font-weight: 500; color: #111827; }

.fraud-dash__filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fraud-dash__search { flex: 1; min-width: 260px; }
.fraud-dash__search .ins-search-input { width: 100%; }

.fraud-dash__flagged-list { display: flex; flex-direction: column; gap: 16px; }
.fraud-flagged-card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #ea580c;
  border-radius: 8px;
}
.fraud-flagged-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fraud-flagged-card__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fraud-flagged-card__title { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
.fraud-flagged-card__reason { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: #dc2626; }
.fraud-flagged-card__action { margin: 0; font-size: 13px; color: #6b7280; }
.fraud-flagged-card__actions { display: flex; gap: 8px; flex-shrink: 0; }
.fraud-flagged-card__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}
@media (max-width: 720px) { .fraud-flagged-card__grid { grid-template-columns: repeat(2, 1fr); } }
.fraud-flagged-card__label { margin: 0 0 4px; font-size: 11px; color: #6b7280; }
.fraud-flagged-card__value { margin: 0; font-weight: 500; color: #111827; font-size: 13px; }
.fraud-approve-btn { color: #16a34a !important; border-color: #bbf7d0 !important; }
.fraud-approve-btn:not(:disabled):hover { background: #f0fdf4 !important; }
.fraud-reject-btn { color: #dc2626 !important; border-color: #fecaca !important; }
.fraud-reject-btn:not(:disabled):hover { background: #fef2f2 !important; }

.fraud-dash__trust-list { display: flex; flex-direction: column; gap: 16px; }
.fraud-trust-card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: box-shadow 0.15s;
}
.fraud-trust-card:hover { box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1); }
.fraud-trust-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.fraud-trust-card__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fraud-trust-card__name { margin: 0; font-weight: 600; color: #111827; }
.fraud-trust-card__updated { margin: 0; font-size: 12px; color: #6b7280; }
.fraud-trust-card__score { text-align: right; flex-shrink: 0; }
.fraud-trust-card__score-value { margin: 0; font-size: 32px; font-weight: 700; }
.fraud-trust-card__score-label { margin: 0; font-size: 11px; color: #6b7280; }
.fraud-trust-card__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  font-size: 13px;
}
@media (max-width: 720px) { .fraud-trust-card__grid { grid-template-columns: repeat(2, 1fr); } }
.fraud-trust-card__stat { margin: 0; font-weight: 700; color: #111827; }
.fraud-trust-card__level { margin-top: 16px; }
.fraud-trust-card__level-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* ── Ecommerce Manager · Orders tab (Panel 3) ─────────────────
   Ports OrdersTabContent from EcommerceTabContent.tsx (~266 lines).
   All disabled — Story 49.2 (Order + fulfillment) not built. */
.ecm-orders { display: flex; flex-direction: column; gap: 20px; }
.ecm-orders__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .ecm-orders__stats { grid-template-columns: repeat(2, 1fr); } }
.ecm-orders__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ecm-orders__stat-label { margin: 0; font-size: 12px; color: #6b7280; }
.ecm-orders__stat-value { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: #111827; }
.ecm-orders__stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ecm-orders__stat-icon--blue   { background: #dbeafe; color: #2563eb; }
.ecm-orders__stat-icon--orange { background: #ffedd5; color: #ea580c; }
.ecm-orders__stat-icon--purple { background: #ede9fe; color: #7c3aed; }
.ecm-orders__stat-icon--green  { background: #dcfce7; color: #16a34a; }

.ecm-orders__list-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}
.ecm-orders__list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ecm-orders__list-title { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.ecm-orders__list-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.ecm-orders__list-actions { display: flex; gap: 8px; }

.ecm-orders__search-wrap { position: relative; margin-bottom: 16px; }
.ecm-orders__search-wrap .ins-search-icon { left: 12px; }
.ecm-orders__search-input {
  padding: 10px 12px 10px 36px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  color: #111827;
  width: 100%;
  box-sizing: border-box;
}
.ecm-orders__search-input:disabled { background: #f9fafb; color: #9ca3af; cursor: not-allowed; }

.ecm-orders__cards { display: flex; flex-direction: column; gap: 12px; }
.ecm-order-card {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: background 0.12s;
}
.ecm-order-card:hover { background: #f9fafb; }
.ecm-order-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ecm-order-card__title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ecm-order-card__id { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.ecm-order-card__date { margin: 0; font-size: 12px; color: #6b7280; }
.ecm-order-card__total { text-align: right; flex-shrink: 0; }
.ecm-order-card__total-value { margin: 0; font-size: 22px; font-weight: 700; color: #16a34a; }
.ecm-order-card__total-items { margin: 2px 0 0; font-size: 11px; color: #6b7280; }

.ecm-order-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ecm-order-badge--blue   { background: #dbeafe; color: #1e40af; }
.ecm-order-badge--purple { background: #ede9fe; color: #6d28d9; }
.ecm-order-badge--green  { background: #dcfce7; color: #15803d; }
.ecm-order-badge--red    { background: #fee2e2; color: #991b1b; }
.ecm-order-badge--muted  { background: #ffffff; color: #6b7280; border: 1px solid #d1d5db; }

.ecm-order-card__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #f3f4f6;
}
@media (max-width: 720px) { .ecm-order-card__grid { grid-template-columns: 1fr; } }
.ecm-order-card__field { display: flex; align-items: flex-start; gap: 8px; }
.ecm-order-card__field svg { margin-top: 2px; flex-shrink: 0; }
.ecm-order-card__field-title { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
.ecm-order-card__field-sub { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.ecm-order-card__tracking { color: #2563eb; font-family: monospace; }

.ecm-order-card__actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
  flex-wrap: wrap;
}
.ecm-orders__stat-value--orange { color: #ea580c; }

/* ── Ecommerce Manager · Inventory tab (Panel 4) ────────────── */
.ecm-inventory { display: flex; flex-direction: column; gap: 20px; }
.ecm-inv-items { display: flex; flex-direction: column; gap: 16px; }
.ecm-inv-item {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ecm-inv-item__head { display: flex; gap: 16px; margin-bottom: 16px; }
.ecm-inv-item__image {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ecm-inv-item__image--in-stock  { background: linear-gradient(135deg, #16a34a, #059669); }
.ecm-inv-item__image--low-stock { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.ecm-inv-item__image--out-of-stock { background: linear-gradient(135deg, #dc2626, #ef4444); }
.ecm-inv-item__body { flex: 1; min-width: 0; }
.ecm-inv-item__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ecm-inv-item__name { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.ecm-inv-item__sku { margin: 4px 0 0; font-size: 12px; color: #6b7280; font-family: monospace; }
.ecm-inv-item__total { text-align: right; flex-shrink: 0; }
.ecm-inv-item__total-value { margin: 6px 0 2px; font-weight: 700; color: #111827; }
.ecm-inv-item__total-label { margin: 0; font-size: 11px; color: #6b7280; }

.ecm-stock-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ecm-stock-badge--in-stock     { background: #dcfce7; color: #15803d; }
.ecm-stock-badge--low-stock    { background: #ffedd5; color: #9a3412; }
.ecm-stock-badge--out-of-stock { background: #fee2e2; color: #991b1b; }

.ecm-inv-item__variants {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.ecm-inv-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.ecm-inv-table thead {
  background: #f9fafb;
}
.ecm-inv-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 12px;
}
.ecm-inv-table td {
  padding: 10px 12px;
  border-top: 1px solid #f3f4f6;
  color: #111827;
}
.ecm-inv-warehouse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4b5563;
}
.ecm-inv-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.ecm-inv-stock--low { color: #ea580c; }
.ecm-inv-reorder { color: #6b7280; }
.ecm-inv-adjust-btn { padding: 4px 10px; font-size: 12px; }

/* ── Ecommerce Manager · Analytics tab (Panel 5) ────────────── */
.ecm-analytics { display: flex; flex-direction: column; gap: 20px; }
.ecm-analytics__section-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #111827; }
.ecm-analytics__periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .ecm-analytics__periods { grid-template-columns: 1fr; } }
.ecm-analytics__period {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ecm-analytics__period-label { margin: 0; font-size: 12px; font-weight: 500; color: #6b7280; }
.ecm-analytics__period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #4b5563;
}
.ecm-analytics__period-revenue { font-size: 20px; font-weight: 700; color: #16a34a; }
.ecm-analytics__period-value { font-weight: 600; color: #111827; }

.ecm-analytics__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.ecm-analytics__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  flex-wrap: wrap;
}
.ecm-analytics__card-title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.ecm-analytics__card-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.ecm-analytics__chart-placeholder {
  margin: 20px;
  height: 260px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #6b7280;
}
.ecm-analytics__chart-title { margin: 0; font-weight: 600; color: #111827; }
.ecm-analytics__chart-sub { margin: 0; font-size: 12px; color: #6b7280; }
.ecm-analytics__two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .ecm-analytics__two-col { grid-template-columns: 1fr; } }
.ecm-analytics__list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ecm-top-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ecm-top-product__name { margin: 0; font-size: 13px; font-weight: 600; color: #111827; }
.ecm-top-product__meta { margin: 2px 0 0; font-size: 11px; color: #6b7280; }
.ecm-top-product__right { text-align: right; flex-shrink: 0; }
.ecm-top-product__revenue { margin: 0; font-weight: 700; color: #16a34a; }
.ecm-top-product__conv { margin: 2px 0 0; font-size: 11px; color: #6b7280; }

.ecm-traffic { display: flex; flex-direction: column; gap: 8px; }
.ecm-traffic__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ecm-traffic__source { font-size: 13px; font-weight: 600; color: #111827; }
.ecm-traffic__conv { font-size: 12px; color: #6b7280; }
.ecm-traffic__bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ecm-traffic__count { font-size: 11px; color: #6b7280; min-width: 120px; text-align: right; flex-shrink: 0; }

.ecm-analytics__customer-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 720px) { .ecm-analytics__customer-grid { grid-template-columns: 1fr; } }
.ecm-customer-stat { display: flex; flex-direction: column; gap: 4px; }
.ecm-customer-stat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}
.ecm-customer-stat__value { margin: 4px 0 0; font-size: 30px; font-weight: 700; color: #111827; }
.ecm-customer-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #16a34a;
  margin: 4px 0 0;
}

/* ── Ecommerce Manager · Settings tab (Panel 6) ────────────── */
.ecm-settings { display: flex; flex-direction: column; gap: 16px; }
.ecm-settings__card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.ecm-settings__card-head { padding: 16px 20px; border-bottom: 1px solid #f3f4f6; }
.ecm-settings__card-title { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.ecm-settings__card-sub { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.ecm-settings__card-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ecm-settings__rows { display: flex; flex-direction: column; gap: 10px; }
.ecm-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.ecm-settings__row-left { display: flex; align-items: center; gap: 12px; }
.ecm-settings__row-name { margin: 0; font-weight: 600; color: #111827; }
.ecm-settings__row-sub { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.ecm-settings__row-right { display: flex; align-items: center; gap: 12px; }
.ecm-settings__price { font-weight: 700; color: #111827; }
.ecm-settings__edit-btn { padding: 4px 8px; }
.ecm-settings__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ecm-settings__icon--blue   { background: #dbeafe; color: #2563eb; }
.ecm-settings__icon--green  { background: #dcfce7; color: #16a34a; }
.ecm-settings__icon--purple { background: #ede9fe; color: #7c3aed; }
.ecm-settings__icon--orange { background: #ffedd5; color: #ea580c; }
.ecm-settings__color-row { display: flex; align-items: center; gap: 12px; }
.ecm-settings__color-swatch {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid #d1d5db;
  flex-shrink: 0;
}
.ecm-settings__upload-row { display: flex; gap: 8px; }
.ecm-settings__upload-row .ces-form-input { flex: 1; }

/* ==========================================================================
   2026-08-08 · Organization Manager dashboard · mobile responsive block.
   Fixes: name-vs-status-pill overlap on Onboarding Queue rows, cramped
   button strips, KPI grid that doesn't stack, tabs that overflow. Two
   breakpoints — 900px (tablet) and 560px (narrow phone). Kept scoped to
   the OM surface so other dashboards aren't disturbed.
   ========================================================================== */

@media (max-width: 900px) {
  /* KPI hero grid — stack to 2 across on tablet, 1 across on phone (below). */
  .fc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Onboarding Queue row — status cluster drops under the ident block.
     Prevents "Invitation Expired" pill from ramming into the org name. */
  .fc-verify-row__head {
    flex-direction: column;
    align-items: stretch;
  }
  .fc-verify-row__status-cluster {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* Row action strips wrap onto multiple lines. */
  .fc-verify-row__actions,
  .fc-tx-row__actions {
    flex-wrap: wrap;
  }
  /* 2026-08-09 · Buttons keep their natural width even when the
     strip wraps — was `flex: 1 1 auto` which stretched a wrapped
     button (e.g. Log wrapping to its own line) to full width, so
     the trio looked inconsistent. */
  .fc-verify-row__actions .fc-btn,
  .fc-tx-row__actions .fc-btn {
    flex: 0 0 auto;
  }

  /* Active Organizations row — stack main / amount / actions vertically
     so buttons don't get squeezed off-screen. */
  .fc-tx-row {
    flex-direction: column;
    align-items: stretch;
  }
  .fc-tx-row__amount { text-align: left; }
  .fc-tx-row__actions { justify-content: flex-start; }

  /* 2026-08-11 · Bottom-row rows: on tablet, shrink the button
     min-width so multiple buttons can fit on a single line, and let
     Dashboard drop to its own line if needed. */
  .fc-tx-row:has(.fc-tx-row__bottom):not([hidden]) {
    grid-template-columns: 1fr;
  }
  .fc-tx-row:has(.fc-tx-row__bottom) .fc-tx-row__amount { grid-column: 1; }
  .fc-tx-row__bottom .fc-tx-row__actions .fc-btn { min-width: 0; }

  /* 2026-08-11 · Tablet + phone: STACK the action buttons vertically
     (one per row, full-width) inside the bottom-row wrapper. 4+ buttons
     never fit horizontally on ≤900px viewports without cutoff — stack
     is the only clean solution. */
  .fc-tx-row__bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .fc-tx-row__bottom .fc-tx-row__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .fc-tx-row__bottom .fc-tx-row__actions .fc-btn { width: 100%; justify-content: center; }
  .fc-tx-row__bottom .fc-tx-row__actions form { width: 100%; margin: 0; }
  .fc-tx-row__bottom .fc-tx-row__actions form .fc-btn { width: 100%; }
  .fc-tx-row__dashboard {
    margin-left: 0;
    align-self: flex-end;   /* right-align the Dashboard link even in column layout */
    padding-top: 4px;
  }

  /* Tab bar overflows horizontally instead of wrapping to a stacked mess. */
  .fc-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fc-tabs::-webkit-scrollbar { display: none; }
  .fc-tab { flex-shrink: 0; }
}

@media (max-width: 560px) {
  /* KPI grid → single column on narrow phones. */
  .fc-kpi-grid { grid-template-columns: 1fr; }

  /* 2026-08-09 · Was `flex: 1 1 100%` which forced every button to
     its own full-width row on narrow phones — but a wrapped Log
     button ballooning to 100% next to naturally-sized siblings
     looked inconsistent. Keep natural width; buttons wrap when
     they need to, without stretching. */
  .fc-verify-row__actions .fc-btn,
  .fc-tx-row__actions .fc-btn {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 0;  /* 2026-08-11 · override the 180px floor on phones */
  }

  /* 2026-08-11 · Phone-narrow: buttons STACK vertically (one per row,
     full-width) inside the bottom-row wrapper. Wrap-on-overflow wasn't
     enough — some rows have 4+ buttons and a horizontal wrap of 2+2
     still gets cut on ~400px viewports. Full stack is unambiguous. */
  .fc-tx-row__bottom .fc-tx-row__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .fc-tx-row__bottom .fc-tx-row__actions .fc-btn {
    width: 100%;
    justify-content: center;
  }
  .fc-tx-row__bottom .fc-tx-row__actions form { width: 100%; }
  .fc-tx-row__bottom .fc-tx-row__actions form .fc-btn { width: 100%; }

  .fc-tx-row__dashboard {
    margin-left: 0;
    flex-basis: 100%;
    text-align: right;
    padding-top: 4px;
  }

  /* Tighter card padding — reclaim horizontal room. */
  .fc-verify-row { padding: 12px; }
  .fc-tx-row     { padding: 12px; }

  /* Pending row · title-row keeps wrapping (already flex-wrap) but the
     name gets its own line clearly. */
  .fc-verify-row__title-row { gap: 6px; }

  /* Pill row on Active Organizations tab · scroll horizontally rather
     than reflow into an ugly stack. */
  .ean-pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ean-pill-row::-webkit-scrollbar { display: none; }
  .ean-pill { flex-shrink: 0; }

  /* Modal dialogs — full-viewport on phones so the 3-column form grids
     have room to reflow via the existing responsive grid rules. */
  .ean-review-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }
  .ean-review-modal__inner { max-width: none; }
}

/* ==========================================================================
   2026-08-09 · Branded confirm dialog. Replaces the native browser
   window.confirm() for every data-turbo-confirm / data-confirm across
   the app — see the Turbo.setConfirmMethod hook in application.js.
   ========================================================================== */
.ea-confirm {
  padding: 0;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.28);
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  background: #ffffff;
  color: #111827;
  overflow: hidden;
}
.ea-confirm::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.ea-confirm__inner { padding: 24px; }
.ea-confirm__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.ea-confirm__message {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
}
.ea-confirm__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ea-confirm__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ea-confirm__btn--cancel {
  color: #374151;
  background: #ffffff;
  border-color: #d1d5db;
}
.ea-confirm__btn--cancel:hover {
  background: #1f2937;
  color: #ffffff;
  border-color: #1f2937;
}
.ea-confirm__btn--ok {
  color: #ffffff;
  background: #15306b;
  border-color: #15306b;
}
.ea-confirm__btn--ok:hover {
  background: #0f224e;
  border-color: #0f224e;
}
.ea-confirm__btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ==========================================================================
   2026-08-10 · EA Financial Trust card on the org dashboard hero.
   ========================================================================== */
.ea-trust {
  margin-bottom: 20px;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-top-width: 6px;
}
.ea-trust--a { border-top-color: #16a34a; }
.ea-trust--b { border-top-color: #22c55e; }
.ea-trust--c { border-top-color: #f59e0b; }
.ea-trust--d { border-top-color: #f97316; }
.ea-trust--f { border-top-color: #dc2626; }

.ea-trust__headline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 16px;
}
.ea-trust__eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ea-trust__score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ea-trust__score {
  font-size: 48px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.03em;
}
.ea-trust__denom { font-size: 20px; color: #9ca3af; font-weight: 600; }
.ea-trust__grade {
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ea-trust--a .ea-trust__grade { background: #d1fae5; color: #065f46; }
.ea-trust--b .ea-trust__grade { background: #dcfce7; color: #14532d; }
.ea-trust--c .ea-trust__grade { background: #fef3c7; color: #92400e; }
.ea-trust--d .ea-trust__grade { background: #ffedd5; color: #9a3412; }
.ea-trust--f .ea-trust__grade { background: #fee2e2; color: #991b1b; }
.ea-trust__grade-label { margin: 4px 0 0; font-size: 14px; color: #4b5563; }

.ea-trust__cn { text-align: right; min-width: 180px; }
.ea-trust__cn-stars { margin: 0 0 4px; font-size: 22px; color: #f59e0b; }
.ea-trust__cn-score { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #111827; }
.ea-trust__cn-empty { margin: 0 0 6px; font-size: 13px; color: #9ca3af; }
.ea-trust__cn-link  { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 600; }
.ea-trust__cn-link:hover { text-decoration: underline; }

.ea-trust__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ea-trust__signal {
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
}
.ea-trust__signal-label { margin: 0 0 2px; font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.ea-trust__signal-value { margin: 0 0 2px; font-size: 14px; color: #111827; font-weight: 700; }
.ea-trust__signal-score { margin: 0; font-size: 11px; color: #9ca3af; }

.ea-trust__foot {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
}
.ea-trust__foot a { color: #6b7280; text-decoration: none; }
.ea-trust__foot a:hover { text-decoration: underline; color: #374151; }

/* ── Organization Dashboard · Next-up hint ──────────────────
   2026-09-29 · Ported from /mockups/PM/org_dashboard_mockup.html
   Replaces the two removed CTA banners (Onboarding + Funds Matcher);
   sits between the KPI grid and the dependency tree. */
/* 2026-10-05 · .org-dash-hint / .org-dash-hint__icon / .org-dash-hint__body
   removed with the static hint banner. The dynamic banner uses
   .org-dash-hint-banner (populated by dep-tree-filter controller). */

/* ── Organization Dashboard · Track dependency tree ─────────
   Launch on top, 4 fanned-out tiles below, Impact under Campaign.
   SVG connectors stretch to width; mobile collapses to a stacked
   list and hides the SVGs (each tile carries its own unlock label). */
.org-dash-tracks__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748b; font-weight: 700; margin: 24px 0 12px;
}
.org-dash-tracks { display: flex; flex-direction: column; margin-top: 4px; }
.org-dash-tracks__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.org-dash-tracks__row--root .org-dash-track { grid-column: 2 / 5; }
/* 2026-10-05 · Pin each stage-2 tile to its own column so filter-hidden
   siblings leave empty cells instead of collapsing visible tiles left. */
.org-dash-tracks__row--stage2 .org-dash-track:nth-child(1) { grid-column: 1 / 2; }
.org-dash-tracks__row--stage2 .org-dash-track:nth-child(2) { grid-column: 2 / 3; }
.org-dash-tracks__row--stage2 .org-dash-track:nth-child(3) { grid-column: 3 / 4; }
.org-dash-tracks__row--stage2 .org-dash-track:nth-child(4) { grid-column: 4 / 5; }
.org-dash-tracks__row--stage2 .org-dash-track:nth-child(5) { grid-column: 5 / 6; }
.org-dash-tracks__row--stage3 .org-dash-track { grid-column: 3 / 4; }
/* 2026-10-05 · CTA alignment · Campaign CTA under Campaign Readiness
   (col 3), Opportunity CTA under Volunteer Activation (col 2).
   DOM order kept; grid-column rules swapped. */
.org-dash-tracks__row--stage4 .org-dash-track:nth-child(1) { grid-column: 3 / 4; }
.org-dash-tracks__row--stage4 .org-dash-track:nth-child(2) { grid-column: 2 / 3; }

/* 2026-10-05 · Filtered state · stage-2 + stage-4 rows switch from the
   5-col grid to a centered flex row so the visible tiles cluster in
   the middle. Hidden tiles are display:none and taken out of flow.
   Lines rebuild from measured positions after reflow (JS). */
.org-dash-tracks[data-filtered] .org-dash-tracks__row--stage2,
.org-dash-tracks[data-filtered] .org-dash-tracks__row--stage4 {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.org-dash-tracks[data-filtered] .org-dash-tracks__row--stage2 .org-dash-track,
.org-dash-tracks[data-filtered] .org-dash-tracks__row--stage4 .org-dash-track {
  grid-column: auto;
  flex: 0 1 calc((100% - 56px) / 5);
  min-width: 0;
  max-width: calc((100% - 56px) / 5);
}
.org-dash-track--cta { padding: 12px 14px; min-width: 0; }
.org-dash-track--cta .org-dash-track__icon { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
.org-dash-track--cta .org-dash-track__title { font-size: 14px; }
.org-dash-track--cta .org-dash-track__blurb { font-size: 12px; -webkit-line-clamp: 2; }
.org-dash-track--cta .org-dash-track__meta { font-size: 11px; }
.org-dash-tracks__wires {
  width: 100%; display: block;
  fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-linecap: round;
}
.org-dash-tracks__wires--fanout       { height: 56px; }
.org-dash-tracks__wires--to-contracts { height: 60px; }
.org-dash-tracks__wires--to-ctas      { height: 56px; }
.org-dash-tracks__wires path { vector-effect: non-scaling-stroke; }
.org-dash-tracks__legend {
  margin: 12px 0 0;
  font-size: 12px; color: #64748b;
  display: flex; align-items: center; gap: 6px;
}
.org-dash-tracks__legend svg { flex: 0 0 auto; }

.org-dash-track {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative; overflow: hidden;
  min-width: 0;
}
.org-dash-track::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--track-color, #e2e8f0);
}
.org-dash-track:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  border-color: var(--track-color);
  text-decoration: none;
}
.org-dash-track--current {
  background: linear-gradient(135deg, rgba(30,58,138,0.06), rgba(37,99,235,0.03));
  border-color: rgba(30,58,138,0.25);
}
.org-dash-track--current::before { background: var(--track-color); width: 6px; }
.org-dash-track--locked {
  opacity: 0.85;
  background: #f1f5f9;
  cursor: default;
}
.org-dash-track--locked::before { background: #cbd5e1; }
.org-dash-track--locked:hover { transform: none; box-shadow: none; border-color: #e2e8f0; }
.org-dash-track__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--track-color, #64748b); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex: 0 0 auto;
}
.org-dash-track--locked .org-dash-track__icon { background: #64748b; }
.org-dash-track__body { flex: 1; min-width: 0; }
.org-dash-track__title {
  margin: 0; font-size: 15px; font-weight: 700; color: #0f172a;
  /* 2026-10-05 · Column stack so .org-dash-track__sublabel wraps to
     its own line below the title instead of inline-truncating. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.org-dash-track__sublabel {
  display: block;
  font-weight: 500; color: #64748b; font-size: 13px;
}
.org-dash-track__blurb {
  margin: 3px 0 0; font-size: 13px; color: #64748b;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-dash-track__meta {
  margin-top: 8px; font-size: 12px; color: #64748b;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.org-dash-track__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.org-dash-track__chip--active { background: #fef3c7; color: #d97706; }
.org-dash-track__chip--done   { background: #d1fae5; color: #059669; }
.org-dash-track__chip--lock   { background: #f1f5f9; color: #64748b; }

/* 2026-10-05 · Track filter pills · multi-select above the dep-tree.
   "All" is mutually exclusive with per-track pills. Wiring in
   dep_tree_filter_controller.js. */
.org-dash-track-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 20px 0 14px;
}
.org-dash-track-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: #ffffff; border: 1px solid #cbd5e1;
  color: #475569; font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: background .1s, color .1s, border-color .1s;
}
.org-dash-track-filter:hover { background: #f8fafc; color: #0f172a; }
.org-dash-track-filter.is-active {
  background: #1e3a8a; color: #ffffff; border-color: #1e3a8a;
}
.org-dash-track-filter__chip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chip-color, #94a3b8);
}

/* 2026-10-05 · Stacked hint banners · one per active pill (All →
   Launch; multi-pill → N banners). dep-tree-filter populates on
   every filter change. */
.org-dash-hints { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 8px; }
.org-dash-hints:empty { display: none; }
.org-dash-hint-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px;
  background: #fef9c3; border: 1px solid #fde68a;
  border-radius: 10px; color: #713f12;
  font-size: 14px; line-height: 1.55;
}
.org-dash-hint-banner__icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(180, 83, 9, 0.15); color: #b45309;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 auto;
}
.org-dash-hint-banner__body { flex: 1; min-width: 0; }
.org-dash-hint-banner__body strong { font-weight: 700; }
.org-dash-hint-banner__close {
  flex: 0 0 auto;
  width: 28px; height: 28px; margin: -4px -6px -4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: #713f12; opacity: 0.6; font-size: 20px; line-height: 1;
  border-radius: 6px;
}
.org-dash-hint-banner__close:hover { opacity: 1; background: rgba(180,83,9,0.1); }

/* 2026-10-05 · Kill browser scroll-anchoring on the OD page so pill
   clicks (hiding tiles via display:none) don't trigger a scroll jump
   on top of the JS scroll-pin. */
.org-dash-page { overflow-anchor: none; }

@media (max-width: 720px) {
  .org-dash-tracks__wires { display: none; }
  .org-dash-tracks__row { grid-template-columns: 1fr; }
  .org-dash-tracks__row--root .org-dash-track,
  .org-dash-tracks__row--stage2 .org-dash-track:nth-child(1),
  .org-dash-tracks__row--stage2 .org-dash-track:nth-child(2),
  .org-dash-tracks__row--stage2 .org-dash-track:nth-child(3),
  .org-dash-tracks__row--stage2 .org-dash-track:nth-child(4),
  .org-dash-tracks__row--stage2 .org-dash-track:nth-child(5),
  .org-dash-tracks__row--stage3 .org-dash-track,
  .org-dash-tracks__row--stage4 .org-dash-track:nth-child(1),
  .org-dash-tracks__row--stage4 .org-dash-track:nth-child(2) { grid-column: 1 / -1; }
}