.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; max-width: 1180px; margin: 0 auto; }
.report-compose { display: grid; gap: 16px; min-width: 0; }
.report-lots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.report-lot { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); text-align: left; }
.report-lot:hover:not(:disabled) { background: var(--light-grey); }
.report-lot:disabled { cursor: not-allowed; opacity: .65; }
.report-lot[data-selected] { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); box-shadow: 0 0 0 1px var(--inglis-blue); }
.report-lot:focus-visible { outline: 3px solid var(--inglis-blue); outline-offset: 2px; }
.report-lot .lot-identity { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.report-lot .lotpick-number { font-weight: 700; color: var(--fg-1); }
.report-lot .lotpick-breeding, .report-damsire { font-size: 12px; overflow-wrap: anywhere; }
.report-damsire { color: var(--fg-muted); }
.report-recipients, .report-options { display: grid; gap: 8px; }
.report-recipient, .report-options > label { display: flex; gap: 11px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--radius-sm); }
.report-recipient input, .report-options input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--inglis-blue); }
.report-recipient input:focus-visible, .report-options input:focus-visible, .notification-options input:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: 2px; }
.report-recipient > span, .report-options label > span { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.report-recipient span span, .report-recipient small, .report-options small { color: var(--fg-muted); font-size: 12px; overflow-wrap: anywhere; }
.report-recipient[data-unavailable], .report-options label[data-unavailable] { opacity: .65; background: var(--light-grey); }
.report-source { font-size: 12px; color: var(--positive, #39734d); }
.report-source.unavailable { color: var(--negative); font-weight: 700; }
.report-note { display: grid; gap: 6px; margin: 8px 0 0; }
.report-note textarea { min-height: 110px; resize: vertical; }
.report-note small { color: var(--fg-muted); font-size: 12px; }
.report-primary-action, .report-send-row, .report-history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-primary-action { margin-top: 18px; }
.report-notice { margin: 0; padding: 12px 14px; border-left: 3px solid var(--inglis-blue); background: var(--inglis-blue-tint); }
.report-history { position: sticky; top: 0; }
.report-side { display: grid; gap: 16px; min-width: 0; }
.report-history-row { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.report-history-row:first-of-type { border-top: 0; }
.report-history-row[data-outcome="failed"], .report-history-row[data-outcome="bounced"] { border-left: 3px solid var(--negative); padding-left: 10px; }
.report-email-draft { min-width: 0; padding: 20px 0; border-top: 1px solid var(--divider); }
.report-email-draft h4 { margin: 0; }
.report-email-draft > p { margin: 4px 0 12px; overflow-wrap: anywhere; }
.report-email-draft .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-weight: 700; }
.report-email-draft input, .report-email-draft textarea { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-weight: 400; }
.report-email-draft textarea { min-height: 220px; resize: vertical; line-height: 1.5; }
.report-email-frame { display: block; width: 100%; height: 520px; min-height: 320px; border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--white); }
.report-retry { border-left: 4px solid var(--negative); }
.report-send-row { padding-top: 16px; border-top: 1px solid var(--divider); }
.report-send-row p { margin: 0; color: var(--fg-muted); font-size: 12px; }
.notification-options { display: grid; gap: 8px; }
.notification-options label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; }
.notification-options input { width: 18px; height: 18px; flex: none; accent-color: var(--inglis-blue); }
.notification-options span { display: flex; flex-direction: column; gap: 3px; }
.notification-options small { color: var(--fg-muted); line-height: 1.4; }
.notification-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Owner reports (23 Sep 2026): choose an owner, then view the full report. */
.report-owners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.report-owner { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md, 8px); background: var(--white);
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.report-owner span, .report-owner small { overflow-wrap: anywhere; color: var(--fg-muted); font-size: 12px; }
.report-owner[data-selected] { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); }
.report-owner:disabled { cursor: not-allowed; opacity: .65; }
.report-owner:focus-visible { outline: 3px solid var(--inglis-blue); outline-offset: 2px; }
.report-owners + .report-lots { margin-top: 14px; }
.report-lots > .report-lot { cursor: default; }
.report-lot .btn { align-self: flex-start; margin-top: 6px; }

.report-view { position: fixed; inset: 0; z-index: 3000; overflow: auto; overscroll-behavior: contain;
  padding: 20px 16px 40px; background: var(--white); color: var(--ink, #1b1f24); }
.report-view:focus { outline: none; }
.report-view-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  max-width: 900px; margin: 0 auto 16px; }
.report-document { max-width: 900px; margin: 0 auto; }
/* The report (owner, 25 Sep 2026): a blue-ruled header, a summary table, then each
   horse under a tinted heading bar with its tables. Colours print as shown. */
.report-doc-head { padding-bottom: 12px; border-bottom: 3px solid var(--inglis-blue); }
.report-doc-kicker { margin: 0; color: var(--fg-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.report-doc-head h2 { margin: 6px 0 4px; color: var(--inglis-blue); }
.report-doc-head p { margin: 4px 0; }
.report-doc-summary, .report-doc-details { margin-top: 24px; }
.report-doc-summary h3, .report-doc-details h3 { margin: 0 0 10px; color: var(--inglis-blue); font-size: 18px; }
.report-doc-unavailable { margin: 8px 0 0; color: var(--fg-muted); font-size: 13px; }
.report-doc-note { margin: 14px 0 0; padding: 10px 14px; background: var(--inglis-blue-tint);
  border-left: 4px solid var(--inglis-blue); white-space: pre-wrap; }
.report-doc-horse { margin-top: 18px; break-inside: avoid-page; }
.report-doc-horse-head { margin: 0 0 6px; padding: 9px 12px; background: var(--inglis-blue-tint);
  border-left: 4px solid var(--inglis-blue); font-size: 15px; }
.report-doc-horse > .muted { margin: 6px 12px; }
.report-doc-table { width: 100%; margin: 6px 0 14px; border-collapse: collapse; font-size: 13px; }
.report-doc-table caption { text-align: left; font-weight: 700; color: var(--inglis-blue); padding: 4px 0; }
/* break-word, not anywhere: "anywhere" lets a column shrink below a whole word, and
   printed buyer names split mid-word ("Coolmor/e"). */
.report-doc-table th, .report-doc-table td { padding: 7px 8px; border-bottom: 1px solid var(--divider);
  text-align: left; vertical-align: top; overflow-wrap: break-word; }
.report-doc-table thead th { background: var(--inglis-blue); color: #fff; font-weight: 600; font-size: 12px; white-space: nowrap; }
.report-doc-table tbody tr:nth-child(even) { background: #F7F8FC; }
/* Not the app's global .num, which is bold in the numeric display face. */
.report-doc-table td.report-num { text-align: center; font-variant-numeric: tabular-nums; }
.report-doc-table tbody th { font-weight: 700; }
.report-doc-lotcell { width: 1%; white-space: nowrap; text-align: center !important; }
.report-doc-breeding { display: block; color: var(--fg-muted); font-size: 12px; }
.report-doc-table tr.report-doc-total { background: var(--inglis-blue-tint); font-weight: 700; }
.report-view, .report-attached-body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* The review shows the report that goes with the email. */
.report-attached { margin-top: 18px; border: 1px solid var(--divider); }
.report-attached > h4 { margin: 0; padding: 10px 14px; background: var(--inglis-blue); color: #fff; font-size: 14px; }
.report-attached > .caption { margin: 8px 14px 0; }
.report-attached-body { padding: 8px 14px 16px; }
/* In the narrower review column the report keeps full-width tables and scrolls
   sideways when it must, rather than squeezing a horse's name to a word a line. */
.report-attached-body { overflow-x: auto; }
.report-doc-horsecell { min-width: 150px; }

/* Printing, or Save as PDF, carries the report alone. Everything that neither
   holds the report nor is part of it is removed, and each element that holds it
   is flattened, so no app layout (fixed heights, overflow, padding) clips the
   report to one page or offsets it. A visibility-only rule printed blank pages:
   the rule hiding the app outranked the one showing the report. */
@media print {
  body:has(.report-view) *:not(:has(.report-view)):not(.report-view):not(.report-view *) {
    display: none !important;
  }
  body:has(.report-view) *:has(.report-view) {
    display: block !important; position: static !important; overflow: visible !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    transform: none !important; background: none !important;
  }
  .report-view { position: static !important; overflow: visible !important; padding: 0 !important; }
  .report-view-actions, .report-view-alert { display: none !important; }
}

@media (max-width: 860px) {
  .report-layout { grid-template-columns: 1fr; }
  .report-history { position: static; }
}

@media (max-width: 600px) {
  .report-lots, .report-owners { grid-template-columns: 1fr; }
  .report-view-actions .btn { flex: 1 1 140px; min-height: 48px; justify-content: center; }
  .report-doc-table { display: block; overflow-x: auto; }
  .report-primary-action, .report-send-row { align-items: stretch; flex-direction: column; }
  .report-primary-action .btn, .report-send-row .btn { width: 100%; min-height: 48px; }
  .report-email-draft { padding: 16px 0; }
  .report-email-draft textarea { min-height: 260px; }
}
.report-mode { margin-bottom: 14px; }
.report-horse-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.report-horse { flex-direction: row; align-items: flex-start; gap: 11px; cursor: pointer; }
.report-horse input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--inglis-blue); }
.report-horse input:focus-visible { outline: 2px solid var(--inglis-blue); outline-offset: 2px; }
.report-horse[data-selected] { border-color: var(--inglis-blue); background: var(--inglis-blue-tint); }
.report-view-alert { margin: 0 0 12px; }