/* Modal styling lives in <wa-dialog>; we render our own header inside the
   dialog body so we can control the X close button's color (the default
   theme rendered it nearly invisible against the surface). The
   `.dialog-backdrop` class is kept as a back-compat marker for callers
   that locate the host with `body.closest('.dialog-backdrop')`, but no
   styling is applied. */

.oppi-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.oppi-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900, #111827);
}

.oppi-dialog-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--gray-500, #6b7280);
  border-radius: 6px;
}

.oppi-dialog-close:hover {
  color: var(--gray-900, #111827);
  background: var(--gray-100, #f3f4f6);
}

.oppi-dialog-body {
  padding: 20px;
}

.oppi-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.dialog-save-btn.is-hidden {
  display: none;
}

.oppi-dialog-loading {
  padding: 16px;
  color: var(--gray-400);
  text-align: center;
}

.oppi-dialog-load-error {
  padding: 16px;
  color: var(--danger-600, red);
}

/* Purchase-order amend/cancel dialogs. */
.po-dialog-line-title {
  margin: 0 0 4px;
}

.po-dialog-muted {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}

.po-dialog-help,
.po-dialog-warning {
  margin: 8px 0 0;
  font-size: 12px;
}

.po-dialog-help,
.po-dialog-kind,
.po-cancel-empty {
  color: var(--wa-color-neutral-50);
}

.po-dialog-kind {
  font-size: 12px;
}

.po-dialog-warning {
  color: var(--wa-color-warning-30);
}

.transfer-issue-blocker {
  color: var(--wa-color-danger-40, #b91c1c);
}

.transfer-issue-warning {
  color: var(--wa-color-warning-30, #92400e);
}

.po-dialog-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--wa-color-danger-30);
}

.po-cancel-blockers {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--wa-color-danger-30);
}

.po-cancel-guidance {
  margin-top: 12px;
  font-size: 13px;
  color: var(--wa-color-neutral-40);
}

.po-cancel-entities {
  margin: 8px 0 0;
  padding-left: 20px;
}

.po-cancel-reason {
  margin-top: 14px;
}

/* WORK-283 Track B — party-create step 1 chooser, extracted from inline
   styles (rubric rule 3/4). The selected state is a `.selected` modifier
   the click handler toggles via classList — no CSSOM style writes. */
.party-create-prompt {
  margin-bottom: 16px;
  color: var(--gray-600);
}

.party-type-options {
  display: flex;
  gap: 12px;
}

.party-type-btn {
  flex: 1;
  padding: 20px 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--gray-0, #fff);
  color: var(--gray-800);
  font-size: 15px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.party-type-btn.selected {
  border-color: var(--wa-color-brand-40, #3b82f6);
  background: var(--wa-color-brand-95, #eff6ff);
}

/* Authorized expense receipt preview, sized without CSP-blocked style attributes. */
.expense-receipt-preview {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}