/* Client portal: quotes, invoices, deliverables (admin, status, quote and invoice pages only).
   Uses ONLY the tokens from theme.css, so it follows the C2 theme in light and dark mode.
   The print block at the end turns the quote and invoice pages into clean 1-2 page
   documents for the browser's "Save as PDF". No transitions here (motion rules: site.css). */

/* --- Shared pieces --------------------------------------------------------------- */
.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.portal-admin { margin-top: var(--space-5); }
/* Let the request list and detail panel shrink on phones (wide tables scroll inside them). */
.admin-layout > * { min-width: 0; }
.portal-block { margin: var(--space-5) 0; padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.portal-block > h3, .portal-block > .h3 { margin-top: 0; }
.portal-h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: var(--heading-weight); margin: 0 0 var(--space-3); }
.portal-item {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.portal-item > :last-child { margin-bottom: 0; }
.portal-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.portal-item-head .mono { font-weight: 600; }
.portal-amount { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.portal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.portal-actions .button { min-height: 44px; }
.portal-table { min-width: 28rem; }
.portal-files { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.portal-files li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.portal-file-name { overflow-wrap: anywhere; flex: 1 1 12rem; }

/* Status chips: colour is never the only signal (the chip text says the status). */
.badge.status-accepted, .badge.status-paid { background: var(--color-success-bg); border-color: var(--color-success); }
.badge.status-sent, .badge.status-unpaid, .badge.status-draft { background: var(--color-warning-bg); border-color: var(--color-warning); }
.badge.status-declined, .badge.status-expired, .badge.status-superseded, .badge.status-void { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Small inline forms (validity date, invoice, mark paid, upload) */
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0 var(--space-3); margin: var(--space-3) 0 0; }
.inline-form .field { flex: 1 1 12rem; min-width: 0; margin-bottom: var(--space-3); }
.inline-form input, .inline-form select { max-width: 100%; }
.inline-form > .button { margin-bottom: var(--space-3); min-height: 44px; }
.inline-form > [role="status"] { flex-basis: 100%; }

/* --- Admin: quote builder ---------------------------------------------------------- */
.builder {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.builder-items { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.builder-item { border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0; min-width: 0; }
.builder-item legend { font-weight: 700; padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.builder-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: 1fr; }
.builder-add { display: flex; flex-wrap: wrap; align-items: end; gap: 0 var(--space-3); }
.builder-add .field { flex: 1 1 16rem; margin-bottom: var(--space-3); }
.builder-add .button { margin-bottom: var(--space-3); min-height: 44px; }
.builder textarea { width: 100%; }
.totals { margin: var(--space-3) 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-accent-soft); }
.totals .data-table { font-size: 0.9rem; }
.totals-line { margin: var(--space-2) 0; }
.totals .alert { margin: var(--space-3) 0 0; }
.totals .alert ul { margin: 0; padding-left: 1.2rem; }
@media (min-width: 40rem) {
  .builder-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* --- Admin: notify client manually ------------------------------------------------- */
.notify-list > .notify-box {
  border: var(--border-width) solid var(--color-warning);
  background: var(--color-warning-bg);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.notify-meta { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.notify-meta dt { font-weight: 600; color: var(--color-text-muted); }
.notify-meta dd { margin: 0; overflow-wrap: anywhere; }
.notify-box textarea { width: 100%; font-family: var(--font-mono); font-size: 0.85rem; background: var(--color-surface); }

/* --- Client status page ------------------------------------------------------------- */
.status-card .portal-block { margin-top: var(--space-5); }
.portal-respond { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-surface-alt); }
.portal-respond .form { margin-bottom: var(--space-3); }
.decline summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--color-link); font-weight: 600; }
.decline[open] summary { margin-bottom: var(--space-3); }

/* --- Printable documents (quote and invoice) ------------------------------------ */
.doc-container { max-width: 54rem; }
.doc-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.doc-toolbar .button { min-height: 44px; }
.doc-sheet {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: var(--space-5) var(--space-4);
  font-size: 0.97rem;
  line-height: 1.55;
}
.doc-sheet p { margin: 0 0 var(--space-2); }
.doc-banner { font-weight: 700; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border-strong); margin-bottom: var(--space-4) !important; }
.doc-banner.is-draft, .doc-banner.is-sample { background: var(--color-warning-bg); border-color: var(--color-warning); }
.doc-banner.is-paid { background: var(--color-success-bg); border-color: var(--color-success); }
.doc-banner.is-muted { background: var(--color-surface-alt); }
.doc-head { display: grid; gap: var(--space-4); grid-template-columns: 1fr; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 2px solid var(--color-accent); }
.doc-from { display: flex; gap: var(--space-3); align-items: flex-start; }
.doc-logo { flex: none; width: 44px; height: 44px; border-radius: 10px; }
.doc-company { font-family: var(--font-heading); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 1.3rem; margin: 0 0 var(--space-1) !important; }
.doc-small { font-size: 0.85rem; color: var(--color-text-muted); }
.doc-title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); margin: 0 0 var(--space-2); color: var(--color-accent); }
.doc-meta { display: grid; gap: 0 var(--space-3); margin: 0; font-size: 0.9rem; }
.doc-meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-2); }
.doc-meta dt { color: var(--color-text-muted); }
.doc-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.doc-parties { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-bottom: var(--space-3); }
.doc-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-1) !important; }
.doc-strong { font-weight: 700; }
.doc-section { margin-top: var(--space-4); }
.doc-h { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2); }
.doc-text p { margin-bottom: var(--space-2); }
.doc-list { margin: 0 0 var(--space-2); padding-left: 1.2rem; }
.doc-list li { margin-bottom: var(--space-1); }
.doc-table-wrap { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 30rem; }
.doc-table th, .doc-table td { padding: var(--space-2) var(--space-2); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; text-align: left; }
.doc-table thead th { font-size: 0.8rem; color: var(--color-text-muted); border-bottom: var(--border-width) solid var(--color-border-strong); }
.doc-table th.num, .doc-table td.num { text-align: right; }
.doc-table tfoot th { text-align: right; font-weight: 600; color: var(--color-text-muted); }
.doc-table tfoot tr.doc-total th, .doc-table tfoot tr.doc-total td { color: var(--color-text); font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--color-text); border-bottom: 0; }
.doc-instructions { white-space: pre-line; font-family: var(--font-mono); font-size: 0.9rem; padding: var(--space-2) var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.doc-disclaimer { font-size: 0.85rem; color: var(--color-text-muted); }
.doc-accept { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }

@media (min-width: 40rem) {
  .doc-sheet { padding: var(--space-6) var(--space-6); }
  .doc-head { grid-template-columns: 1fr auto; align-items: start; }
  .doc-title-block { text-align: left; min-width: 16rem; }
  .doc-parties { grid-template-columns: 1fr 1fr; }
}

/* --- Print: "Save as PDF" gives a clean 1-2 page US Letter document ----------------- */
@page { size: letter; margin: 14mm 14mm 16mm; }
@media print {
  /* Always print the light colours, even when the screen is in dark mode. */
  html:root:not([data-print]) {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f4eff2;
    --color-text: #241f22;
    --color-text-muted: #574e55;
    --color-border: #e6dfe6;
    --color-border-strong: #8a8190;
    --color-accent: #4a3d9c;
    --color-link: #4a3d9c;
    --color-accent-soft: #ece8f8;
    --color-success: #2a6a3c;
    --color-success-bg: #eaf4ec;
    --color-warning: #7d4a0c;
    --color-warning-bg: #fbf0dc;
    --page-bg-image: none;
    --hero-bg-image: none;
    --card-shadow: none;
    color-scheme: light;
  }
  body { background: #fff; font-size: 10.5pt; }
  .site-header, .site-footer, .skip-link, .no-print, .doc-toolbar, noscript { display: none !important; }
  main, .section, .doc-page, .doc-container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .doc-sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 10pt; line-height: 1.45; }
  .doc-head { grid-template-columns: 1fr auto; align-items: start; }
  .doc-parties { grid-template-columns: 1fr 1fr; }
  .doc-title { font-size: 22pt; }
  .doc-section { margin-top: 10pt; }
  .doc-table { min-width: 0; font-size: 9.5pt; }
  .doc-table-wrap { overflow: visible; }
  .doc-table tr, .doc-head, .doc-banner, .doc-accept, .doc-pay { break-inside: avoid; }
  .doc-h { break-after: avoid; }
  .doc-banner, .doc-instructions, .doc-table tfoot tr.doc-total td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}

/* On phones, tables marked .stack-sm turn each row into a small card, so nothing hides off-screen. */
@media (max-width: 600px) {
  .stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stack-sm, .stack-sm tbody, .stack-sm tr, .stack-sm td { display: block; width: 100%; }
  .stack-sm tr { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
  .stack-sm td { border: 0; padding: 0.2rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: right; }
  .stack-sm td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--color-text-muted); text-align: left; }
  .stack-sm td.stack-action { justify-content: flex-start; padding-top: 0.4rem; }
}