/* returned_prescriptions_html — the queue screen's own rules.
 *
 * Moved from `client_code/returned_prescriptions_html/form_template.yaml`
 * (the old `<style>` block), every rule scoped `:where(.rp-screen)`, which adds
 * zero specificity and so cannot change which rule wins.
 *
 * `.rp-screen` is the wrapping root the conversion added: the old template had
 * TWO top-level nodes (`.rp-container` and `#rp-reject-modal`), and two
 * top-level nodes make Anvil keep its own wrapper as the root. The root itself
 * gets NO rule — it is a plain block child of `main`'s `#spoke-child-forms`,
 * which owns the padding and the scroll, and `.rp-container`'s
 * `max-width: 1200px; margin: 0 auto` still centres inside a full-width block.
 *
 * `.loading-spinner` (consumed by `#rp-list`'s initial state) is NOT here:
 * `theme/assets/spoke/spoke_shared.css` owns it.
 */

:where(.rp-screen) .rp-container { max-width: 1200px; margin: 0 auto; }
:where(.rp-screen) .rp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
:where(.rp-screen) .rp-title { font-size: 22px; font-weight: 600; color: var(--px-accent); }
:where(.rp-screen) .scan-input-bar { display: flex; gap: 8px; align-items: center; }
:where(.rp-screen) .scan-input-input {
  padding: 8px 14px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
  width: 280px; outline: none;
}
:where(.rp-screen) .scan-input-input:focus { border-color: var(--px-accent); box-shadow: 0 0 0 2px rgba(26,35,126,0.15); }
:where(.rp-screen) .rp-filter-select {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
  background: #fff; cursor: pointer;
}
:where(.rp-screen) .rp-count { font-size: 13px; color: #666; }

/* Prescription cards */
:where(.rp-screen) .rp-list { display: flex; flex-direction: column; gap: 8px; }
:where(.rp-screen) .rp-card {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
  transition: box-shadow 0.2s;
}
:where(.rp-screen) .rp-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
:where(.rp-screen) .rp-card.highlight { border-color: var(--px-accent); box-shadow: 0 0 0 2px rgba(26,35,126,0.2); }

:where(.rp-screen) .rp-card-header {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
  padding: 14px 18px; cursor: pointer; align-items: center;
}
:where(.rp-screen) .rp-patient-info { display: flex; flex-direction: column; gap: 2px; }
:where(.rp-screen) .rp-patient-name { font-size: 16px; font-weight: 600; color: #212121; }
:where(.rp-screen) .rp-patient-meta { font-size: 13px; color: #666; }
:where(.rp-screen) .rp-nhs-number { font-family: 'Courier New', monospace; font-weight: 500; }

:where(.rp-screen) .rp-status-badge {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px;
}
:where(.rp-screen) .rp-status-pending { background: #fff3e0; color: #e65100; }
:where(.rp-screen) .rp-status-acknowledged { background: #e8f5e9; color: #2e7d32; }
:where(.rp-screen) .rp-status-rejected { background: #ffebee; color: #c62828; }

:where(.rp-screen) .rp-sla { text-align: right; min-width: 140px; }
:where(.rp-screen) .rp-sla-green { color: #2e7d32; font-size: 13px; }
:where(.rp-screen) .rp-sla-amber { color: #ef6c00; font-size: 13px; font-weight: 600; }
:where(.rp-screen) .rp-sla-red { color: #c62828; font-size: 13px; font-weight: 700; }

/* Expand/collapse detail */
:where(.rp-screen) .rp-card-detail { display: none; padding: 0 18px 14px; border-top: 1px solid #f0f0f0; }
:where(.rp-screen) .rp-card.expanded .rp-card-detail { display: block; }

:where(.rp-screen) .rp-detail-section { margin-top: 12px; }
:where(.rp-screen) .rp-detail-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }

:where(.rp-screen) .rp-items-table { width: 100%; border-collapse: collapse; font-size: 13px; }
:where(.rp-screen) .rp-items-table th { text-align: left; padding: 6px 10px; border-bottom: 2px solid #e0e0e0; color: #555; font-weight: 600; font-size: 12px; }
:where(.rp-screen) .rp-items-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; }
:where(.rp-screen) .rp-items-scroll { overflow-x: auto; }

:where(.rp-screen) .rp-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
:where(.rp-screen) .rp-meta-item { font-size: 13px; }
:where(.rp-screen) .rp-meta-key { color: #888; font-weight: 500; }
:where(.rp-screen) .rp-meta-val { color: #333; }

/* Actions */
:where(.rp-screen) .rp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
:where(.rp-screen) .rp-action-note { flex-basis: 100%; font-size: 12px; color: #666; line-height: 1.4; }
:where(.rp-screen) .rp-btn {
  padding: 8px 18px; border: none; border-radius: 4px; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background 0.2s;
}
:where(.rp-screen) .rp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:where(.rp-screen) .rp-btn-acknowledge { background: #2e7d32; color: #fff; }
:where(.rp-screen) .rp-btn-acknowledge:hover:not(:disabled) { background: #1b5e20; }
:where(.rp-screen) .rp-btn-reject { background: #c62828; color: #fff; }
:where(.rp-screen) .rp-btn-reject:hover:not(:disabled) { background: #b71c1c; }
:where(.rp-screen) .rp-btn-mar { background: var(--px-accent); color: #fff; }
:where(.rp-screen) .rp-btn-mar:hover:not(:disabled) { background: #0d1642; }
:where(.rp-screen) .rp-btn-emar { background: var(--px-info); color: #fff; }
:where(.rp-screen) .rp-btn-emar:hover:not(:disabled) { background: var(--px-info-hover); }
:where(.rp-screen) .rp-emar-sent-badge {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border-radius: 4px; font-size: 13px; font-weight: 600;
  background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7;
}
:where(.rp-screen) .rp-btn-copy {
  background: none; border: 1px solid #ccc; color: #555; padding: 6px 12px;
  font-size: 12px; border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
:where(.rp-screen) .rp-btn-copy:hover { border-color: #888; color: #333; }
:where(.rp-screen) .rp-btn-copy.copied { background: #2e7d32; color: #fff; border-color: #2e7d32; }
:where(.rp-screen) .rp-token-barcode-wrap { flex-basis: 100%; max-width: 100%; overflow-x: auto; }
:where(.rp-screen) .rp-token-barcode { display: block; }

/* Reject modal */
:where(.rp-screen) .rp-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: none; align-items: center;
  justify-content: center; z-index: 9999;
}
:where(.rp-screen) .rp-modal-overlay.visible { display: flex; }
:where(.rp-screen) .rp-modal {
  background: #fff; border-radius: 8px; padding: 24px; width: 90%; max-width: 480px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
:where(.rp-screen) .rp-modal h3 { margin-bottom: 16px; color: #c62828; }
:where(.rp-screen) .rp-modal textarea {
  width: 100%; min-height: 100px; padding: 10px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 14px; resize: vertical; font-family: inherit;
}
/* The two declarations the conversion lifted out of the template's inline
   `style=` attributes, which a template may not carry. Each is written AFTER
   the rule it used to override, and nothing in the app declares `background`
   on `.rp-btn` or on `#rp-reject-cancel`, so file order is enough and no
   second class is needed to win. */
:where(.rp-screen) .rp-modal-intro { margin-bottom: 12px; font-size: 14px; color: #555; }
:where(.rp-screen) .rp-btn-cancel { background: #eee; color: #333; }
:where(.rp-screen) .rp-modal-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }

/* Empty state */
:where(.rp-screen) .rp-empty { text-align: center; padding: 60px 20px; color: #888; font-size: 15px; }

/* Error state — persistent, visually distinct from empty */
:where(.rp-screen) .rp-error {
  text-align: center; padding: 40px 20px;
  background: #fff3f3; border: 1px solid #ffcdd2; border-radius: 8px;
  color: #c62828; font-size: 15px;
}
:where(.rp-screen) .rp-error-msg { margin-bottom: 14px; font-weight: 500; }
:where(.rp-screen) .rp-retry-btn {
  padding: 8px 20px; border: none; border-radius: 4px; font-size: 13px;
  font-weight: 600; cursor: pointer; background: #c62828; color: #fff;
}
:where(.rp-screen) .rp-retry-btn:hover { background: #b71c1c; }

@media (max-width: 768px) {
  :where(.rp-screen) .rp-card-header { grid-template-columns: 1fr; gap: 8px; }
  :where(.rp-screen) .rp-sla { text-align: left; }
  :where(.rp-screen) .scan-input-input { width: 100%; }
  :where(.rp-screen) .rp-header { flex-direction: column; align-items: stretch; }
  :where(.rp-screen) .rp-meta-grid { grid-template-columns: 1fr; }
  :where(.rp-screen) .scan-input-bar { flex-wrap: wrap; }
  :where(.rp-screen) .rp-filter-select { width: 100%; }
  :where(.rp-screen) .scan-input-input, :where(.rp-screen) .rp-filter-select, :where(.rp-screen) .rp-modal textarea { font-size: 16px; }
  :where(.rp-screen) .rp-btn, :where(.rp-screen) .rp-btn-copy { min-height: 44px; }
  :where(.rp-screen) .rp-items-table { min-width: 420px; }
}