/* Small overrides only; Tailwind (CDN) does the rest.
   Colours: AI #20B1CE, human action #F2A245, PayPal #404040, everything else black/white/grey. */
:root {
  --ai: #20B1CE;
  --human: #F2A245;
  --human-tint: rgba(242, 162, 69, 0.15);
  --paypal: #404040;
}

.card-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.ai-dot { width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: var(--ai); display: inline-block; }
.ai-text { color: #0f7f96; }
.human-tint { background: var(--human-tint); }

/* Progress bar */
.step { border-top: 4px solid #e5e7eb; padding-top: 0.35rem; color: #6b7280; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem;
  border-radius: 9999px; border: 1px solid #d1d5db; font-size: 0.75rem; margin-right: 0.2rem; }
.step.done { border-top-color: #111827; color: #111827; }
.step.done .step-num { background: #111827; border-color: #111827; color: #fff; }
.step.current { border-top-color: var(--human); color: #111827; font-weight: 600; }
.step.current .step-num { background: var(--human); border-color: var(--human); color: #fff; }
.step[data-step="1"].current { border-top-color: var(--ai); }
.step[data-step="1"].current .step-num { background: var(--ai); border-color: var(--ai); }
.step[data-step="5"].current { border-top-color: var(--paypal); }
.step[data-step="5"].current .step-num { background: var(--paypal); border-color: var(--paypal); }
.step-who { color: var(--ai); font-weight: 400; }

/* Buttons and fields */
.btn { border-radius: 0.375rem; padding: 0.4rem 0.8rem; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-plain { background: #fff; border-color: #d1d5db; color: #111827; }
.btn-plain:hover:not(:disabled) { background: #f3f4f6; }
.btn-ai { background: #fff; border-color: var(--ai); color: #0f7f96; }
.btn-ai:hover:not(:disabled) { background: rgba(32, 177, 206, 0.08); }
.btn-paypal { background: var(--paypal); color: #fff; }
.btn-paypal:hover:not(:disabled) { background: #262626; }
.field { display: flex; flex-direction: column; gap: 0.2rem; color: #374151; }
.input { border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.3rem 0.5rem; background: #fff; color: #111827; }
.input:focus, .btn:focus-visible { outline: 2px solid var(--human); outline-offset: 1px; }

/* Flags */
.flags-box { background: var(--human-tint); border: 1px solid var(--human); }

/* Journal table */
.journal th, .journal td { border-bottom: 1px solid #e5e7eb; padding: 0.3rem 0.35rem; font-size: 13px; text-align: left; white-space: nowrap; }
.journal th { font-weight: 600; color: #374151; background: #f9fafb; }
.journal td.num { text-align: right; }

/* Grid */
.ag-theme-quartz { --ag-font-size: 12px; --ag-cell-horizontal-padding: 8px; --ag-header-height: 34px;
  --ag-wrapper-border-radius: 6px; --ag-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.ag-theme-quartz .ag-cell-wrap-text { line-height: 1.35; padding-top: 6px; padding-bottom: 6px; word-break: normal; }
.cell-category { background: var(--human-tint); }
.edited-marker { display: block; font-size: 10px; line-height: 1.2; color: #9a5a0c; font-weight: 600; }
.ag-cell.cell-num { text-align: right; }

/* Errors that stop a payment: the one place red is used */
.approve-error { color: #b91c1c; font-size: 0.875rem; font-weight: 500; }
.config-warning { color: #b91c1c; background: #fef2f2; border: 1px solid #fca5a5; }