/* Payment instructions are private operational notes, not settlement details. */
#admin .payment-rider-note,
.payment-rider-note-modal .payment-rider-note {
  margin-top: 16px; padding: 15px; border: 1px solid #c9d9ef; border-left: 4px solid #4978b6;
  border-radius: 12px; background: #f6f9fe; color: #203953; min-width: 0;
}
#admin .payment-rider-note [hidden], .payment-rider-note-modal [hidden] { display: none !important; }
.payment-rider-note-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-rider-note-heading > div { display: grid; gap: 4px; }
.payment-rider-note-heading b { color: #203953; font-size: 14px; }
.payment-rider-note-heading small { color: #596d86; font-size: 11px; line-height: 1.5; }
#admin .payment-work-card .payment-rider-note .payment-rider-note-text,
.payment-rider-note-modal .payment-rider-note-text {
  margin: 12px 0 0; padding: 12px; border: 1px solid #dce5f1; border-radius: 8px;
  background: #fff; color: #18334f; font-size: 13px; font-weight: 650; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto;
}
.payment-rider-note-editor { margin-top: 12px; }
.payment-rider-note-editor label { display: block; margin: 0 0 6px; color: #27425f; font-size: 12px; font-weight: 800; }
.payment-rider-note-editor textarea { display: block; width: 100%; box-sizing: border-box; min-height: 112px; resize: vertical; padding: 12px; border: 1px solid #afc5e2; border-radius: 8px; background: #fff; color: #18334f; font: inherit; font-size: 13px; line-height: 1.65; }
.payment-rider-note-editor textarea:focus { outline: 2px solid #91b8ec; outline-offset: 2px; }
.payment-rider-note-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.payment-rider-note-editor-footer > div { display: flex; gap: 7px; }
.payment-rider-note-editor-footer small { color: #596d86; font-size: 11px; }
.payment-rider-note .rider-action { margin: 0; flex: 0 0 auto; }
.payment-rider-note-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: #596d86; font-size: 11px; line-height: 1.6; }
.payment-rider-note-status.is-error { color: #a32d2d; }
.payment-rider-note-status.is-success { color: #176a47; }
.payment-rider-note-reference { display: block; margin-top: 9px; color: #596d86; font-size: 11px; line-height: 1.6; }
.payment-rider-note-modal { width: min(100%, 620px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.payment-rider-note-modal .payment-rider-note { margin-top: 0; }
.payment-rider-note-modal .modal-heading p { overflow-wrap: anywhere; }
#admin .held-dashboard-row:has(.payment-rider-note-summary),
#admin .held-payment-row:has(.payment-rider-note-summary),
#admin .paid-payment-row:has(.payment-rider-note-summary) { flex-wrap: wrap; }
#admin .held-dashboard-main,
#admin :is(.held-payment-row, .paid-payment-row) > .held-payment-identity { flex: 1 1 220px; max-width: 100%; }
#admin .held-dashboard-main small,
#admin :is(.held-payment-row, .paid-payment-row) > .held-payment-identity span { word-break: keep-all; overflow-wrap: anywhere; line-height: 1.6; }
#admin .held-dashboard-side,
#admin :is(.held-payment-row, .paid-payment-row) > .held-payment-actions { max-width: 100%; }
#admin .held-dashboard-side > div { flex-wrap: wrap; }
#admin :is(.held-dashboard-side, .held-payment-actions) .rider-action { white-space: nowrap; }
#admin .payment-rider-note-summary { flex: 1 0 100%; grid-column: 1 / -1; min-width: 0; padding: 12px; border: 1px solid #dce5f1; border-radius: 9px; background: #f6f9fe; }
#admin .payment-rider-note-summary > b { display: block; color: #45617e; font-size: 11px; }
#admin .payment-rider-note-summary > p { margin: 7px 0 9px; color: #203953; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.65; max-height: 180px; overflow-y: auto; }
#admin .payment-rider-note-summary .rider-action { margin: 0; }
/* The older payment-card theme uses !important white text for all descendants.
   Keep this correction limited to the new private note panel and its controls. */
#workspace-work-card #workspace-payment-note .payment-rider-note-heading b,
#workspace-work-card #workspace-payment-note .payment-rider-note-editor label,
.payment-rider-note-modal .payment-rider-note-heading b,
.payment-rider-note-modal .payment-rider-note-editor label { color: #203953 !important; }
#workspace-work-card #workspace-payment-note .payment-rider-note-heading small,
#workspace-work-card #workspace-payment-note .payment-rider-note-reference,
#workspace-work-card #workspace-payment-note .payment-rider-note-editor-footer small,
#workspace-work-card #workspace-payment-note .payment-rider-note-status,
#workspace-work-card #workspace-payment-note .payment-rider-note-status span { color: #52657e !important; }
#workspace-work-card #workspace-payment-note #workspace-payment-note-text,
.payment-rider-note-modal .payment-rider-note-text { color: #18334f !important; background: #fff !important; border-color: #dce5f1 !important; }
#workspace-work-card #workspace-payment-note textarea,
.payment-rider-note-modal .payment-rider-note textarea { color: #18334f !important; background: #fff !important; border-color: #afc5e2 !important; }
#workspace-work-card #workspace-payment-note .rider-action,
.payment-rider-note-modal .payment-rider-note .rider-action { color: #234d85 !important; background: #eaf2ff !important; border: 1px solid #b6cbe8 !important; }
#workspace-work-card #workspace-payment-note .rider-action.edit,
.payment-rider-note-modal .payment-rider-note .rider-action.edit { color: #fff !important; background: #285fad !important; border-color: #285fad !important; }
#workspace-work-card #workspace-payment-note .payment-rider-note-status.is-error span,
.payment-rider-note-modal .payment-rider-note-status.is-error span { color: #a32d2d !important; }
#workspace-work-card #workspace-payment-note .payment-rider-note-status.is-success span,
.payment-rider-note-modal .payment-rider-note-status.is-success span { color: #176a47 !important; }
@media (max-width: 560px) {
  #admin .payment-rider-note, .payment-rider-note-modal .payment-rider-note { padding: 12px; }
  .payment-rider-note-modal { padding: 18px; }
  .payment-rider-note-editor-footer { align-items: flex-start; flex-direction: column; }
  .payment-rider-note-editor-footer > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100% !important; gap: 8px; }
  .payment-rider-note-editor-footer button { width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; }
  .payment-rider-note-heading .rider-action { min-height: 40px !important; }
}