/* Service Quote Builder: layout on top of /assets/base.css tokens. The print rules for the quote document are at the bottom. */
[hidden] { display: none !important; }
.flush { margin-top: 0; }
section[id] { scroll-margin-top: 12px; }
/* A long unbroken word (a name, a link) wraps instead of pushing the page sideways. */
.wrap p, .wrap dd, .wrap dt, .wrap h2, .wrap [role="status"], .wrap [role="alert"] { overflow-wrap: anywhere; }
.card h3 { margin: 18px 0 6px; font-size: 16px; }
.card .row { margin-bottom: 8px; }
.card form { margin: 0; }

.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.jump a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }

.warnbox { position: sticky; top: 8px; z-index: 5; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--surface); color: var(--warn); font-weight: 600; }
.warn-text { color: var(--warn); }
.card p.warn-text { color: var(--warn); }

/* Form fields: a label above each control, two columns where the width allows. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 10px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field.end { justify-content: flex-end; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field input, .field select { min-height: 42px; }
.field.end button { width: 100%; }
input[aria-invalid="true"] { border-color: var(--warn); outline: 2px solid var(--warn); outline-offset: 0; }

/* Lists: services, line items and saved quotes share one card layout. */
.list { list-style: none; padding: 0; margin: 8px 0; }
.list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: start; }
.list .t { font-weight: 600; overflow-wrap: anywhere; }
.list .amt { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list .meta { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.list .acts { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.list .acts button, .list .acts select { min-height: 32px; padding: 2px 8px; font-size: 13px; }
.list .acts select { width: auto; max-width: 100%; }
.list .acts input.qty { width: 6em; min-height: 32px; padding: 2px 8px; }
#quote-list li[data-status="accepted"] { box-shadow: inset 4px 0 0 var(--accent); }
#quote-list li[data-status="declined"] { box-shadow: inset 4px 0 0 var(--warn); }

/* Live totals under the line items. */
.totals { margin: 12px 0; padding: 10px 12px; background: var(--chip); border-radius: 10px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.totals .grand { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 20px; font-weight: 700; }
.totals .grand dt { color: var(--ink); }

/* The printable quote lives outside the page wrapper and is hidden on screen. */
.print-only { display: none; }
@page { margin: 16mm; }
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #444; --line: #bbb; --accent: #000; --accent-ink: #fff; --chip: #eee; }
  html, body { background: #fff; color: #000; }
  body { font-size: 11pt; line-height: 1.4; }
  .no-print { display: none !important; }
  .print-only { display: block; }
  #print-view { color: #000; overflow-wrap: anywhere; }
  #print-view p { margin: 0 0 2pt; }
  .pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24pt; margin-bottom: 18pt; }
  .pv-name { font-size: 16pt; font-weight: 700; overflow-wrap: anywhere; }
  .pv-meta { text-align: right; }
  .pv-meta h1 { font-size: 22pt; margin: 0 0 4pt; line-height: 1.1; }
  .pv-for { margin-bottom: 14pt; }
  .pv-label { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.06em; color: #444; }
  .pv-strong { font-size: 13pt; font-weight: 700; overflow-wrap: anywhere; }
  .pv-table, .pv-totals { border-collapse: collapse; }
  .pv-table { width: 100%; }
  .pv-table thead { display: table-header-group; }
  .pv-table th { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.05em; color: #444; border-bottom: 1.5pt solid #000; padding: 4pt 6pt; }
  .pv-table td { border-bottom: 0.5pt solid #bbb; padding: 5pt 6pt; vertical-align: top; overflow-wrap: anywhere; }
  .pv-table tr, .pv-totals tr { break-inside: avoid; }
  .pv-table .num, .pv-totals .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pv-totals { width: 55%; margin: 10pt 0 0 auto; }
  .pv-totals td { padding: 3pt 6pt; border: 0; }
  .pv-totals .grand td { border-top: 1.5pt solid #000; font-size: 13pt; font-weight: 700; padding-top: 5pt; }
  .pv-notes { margin-top: 18pt; white-space: pre-wrap; overflow-wrap: anywhere; break-inside: avoid; }
  .pv-fine { margin-top: 10pt; font-size: 9.5pt; color: #444; white-space: pre-wrap; overflow-wrap: anywhere; break-inside: avoid; }
}

/* Mobile control and English fallback layer. */
button, .jump a, .list .acts button, .list .acts select, .list .acts input.qty, .field input, .field select { min-height: 44px; min-width: 44px; }
input, select, textarea, .list .acts select { font-size: 16px; }
.wrap, .card, .list li, .list .t { min-width: 0; }
@media (max-width: 380px) { .fields { grid-template-columns: 1fr; } .list li { grid-template-columns: minmax(0, 1fr); } .list .amt { text-align: start; white-space: normal; overflow-wrap: anywhere; } }

/* Shared picker inherits 14px; this app keeps form controls readable without zoom. */
.wrap .language-control select { font-size: 16px; min-height: 44px; min-width: 44px; }