/* ============================================================
   Quotes, invoices and agreements: the document itself.
   The same file styles the page in the app, the client's private page and the PDF
   (inlined by Pdf::document), so keep it to what dompdf understands: tables, no grid
   or flex, no CSS variables.
   ============================================================ */

.doc { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 10pt; line-height: 1.35; color: #0c0c0e; }
.doc table { width: 100%; border-collapse: collapse; }
.doc .muted { color: #62626b; }
.doc .mono, .doc .num { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.doc .num { text-align: right; white-space: nowrap; }

.doc-head td { vertical-align: top; }
.doc-logo { height: 28pt; width: auto; }
.doc-from { text-align: right; font-size: 8.5pt; color: #62626b; line-height: 1.4; }
.doc-from strong { color: #0c0c0e; }

.doc-title { margin: 24pt 0 4pt; font-size: 21pt; font-weight: 700; letter-spacing: -0.3pt; line-height: 1.2; }
.doc-title .mono { font-size: 14pt; font-weight: 400; color: #62626b; margin-left: 6pt; }
.doc-subject { margin: 0 0 14pt; font-size: 11pt; }

.doc-meta { margin: 0 0 18pt; }
.doc-meta td { padding: 2pt 14pt 2pt 0; vertical-align: top; font-size: 9pt; line-height: 1.3; }
.doc-label { display: block; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.6pt; color: #62626b; }

.doc-intro, .doc-terms, .doc-notes { margin: 0 0 14pt; white-space: pre-wrap; }

.doc-lines th { text-align: left; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.6pt; color: #62626b; padding: 6pt; border-bottom: 1pt solid #0c0c0e; font-weight: 500; }
.doc-lines tr { page-break-inside: avoid; }
.doc-lines td { padding: 6pt; border-bottom: 0.5pt solid #e4e4de; vertical-align: top; }
.doc-lines .details { display: block; color: #62626b; font-size: 8.5pt; white-space: pre-wrap; margin-top: 2pt; }
.doc-lines .qty { width: 62pt; }
.doc-lines .price, .doc-lines .amount { width: 78pt; }

.doc-totals-wrap { margin: 8pt 0 16pt; }
.doc-totals-wrap td { padding: 0; vertical-align: top; }
.doc-totals-space { width: 52%; }
.doc-totals { width: 100%; }
.doc-totals td { padding: 4pt 6pt; }
.doc-totals .grand td { border-top: 1pt solid #0c0c0e; font-weight: 700; font-size: 11.5pt; padding-top: 7pt; }
.doc-totals .doc-due td { background: #f0ffd1; font-weight: 700; color: #0c0c0e; }

.doc-box { border: 1pt solid #0c0c0e; padding: 10pt 12pt; margin: 0 0 16pt; }
.doc-box.lime { background: #f0ffd1; }
.doc-box h3, .doc h3 { margin: 0 0 6pt; font-size: 10.5pt; }
.doc-box table td { padding: 2pt 12pt 2pt 0; vertical-align: top; }
.doc-box .pay td { width: 50%; line-height: 1.6; }

.doc h2 { font-size: 13pt; margin: 18pt 0 6pt; }
.doc p { margin: 0 0 8pt; }
.doc ul { margin: 0 0 8pt; padding-left: 16pt; }
.doc li { margin-bottom: 3pt; }

.doc-stamp { page-break-inside: avoid; border: 1pt solid #0c0c0e; padding: 10pt 12pt; margin: 18pt 0 0; font-size: 8.5pt; }
.doc-stamp td { padding: 3pt 12pt 3pt 0; vertical-align: top; }
.doc-stamp .hash { font-family: 'JetBrains Mono', monospace; font-size: 7pt; word-break: break-all; }
.doc-void { border: 2pt solid #c4362b; color: #c4362b; padding: 6pt 10pt; font-weight: 700; margin: 0 0 14pt; }

/* ---------- on screen: the document as a sheet of paper ---------- */
.doc-sheet { background: #ffffff; border: 1px solid #e4e4de; border-radius: 12px; padding: clamp(18px, 5vw, 48px); box-shadow: 0 1px 2px rgba(12, 12, 14, 0.04); }
.doc-sheet .doc-totals-space { width: auto; }
.doc-sheet .doc-totals-cell { width: min(100%, 340px); }
@media (max-width: 640px) {
  .doc-sheet .doc-head td { display: block; }
  .doc-sheet .doc-from { text-align: left; margin-top: 12px; }
  .doc-sheet .doc-meta td { display: inline-block; padding-bottom: 8px; }
  .doc-sheet .doc-lines .qty, .doc-sheet .doc-lines .price { display: none; }
}
.doc-card { margin: 8pt 0 0; font-size: 9pt; }
.doc-card a { color: #0c0c0e; word-break: break-all; }