/* Коммерческое предложение: одна вёрстка для монтажника (quote.html) и для
   заказчика по ссылке (q.html). Лист всегда светлый — его печатают и шлют. */
.sheet { --q-accent: #1f6b46; max-width: 860px; margin: 0 auto; background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--r-l); padding: 40px 44px; box-shadow: var(--shadow); }
.sheet * { color: inherit; }
.q-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 2px solid var(--q-accent); padding-bottom: 16px; margin-bottom: 20px; }
.q-head h1 { font: 800 24px/1.15 var(--f-display); margin: 4px 0 6px; }
.q-brand { display: flex; align-items: center; gap: 10px; font: 800 18px var(--f-display); color: var(--q-accent) !important; }
.q-brand i { width: 26px; height: 26px; border-radius: 8px; background: var(--q-accent); display: inline-block; position: relative; }
.q-brand i::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.q-meta { font-size: 13px; color: #555 !important; line-height: 1.6; }
.q-meta b { color: #111 !important; }
.q-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.q-table th { text-align: left; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #666 !important; border-bottom: 1px solid #ccc; padding: 8px 6px; }
.q-table td { padding: 9px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.q-table .num { text-align: right; font-family: var(--f-mono); white-space: nowrap; }
.q-table .grp td { font: 700 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--q-accent) !important; padding-top: 14px; border-bottom: 0; }
.q-totals { margin-left: auto; width: min(100%, 360px); margin-top: 18px; font-size: 14px; }
.q-totals div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #eee; }
.q-totals div.grand { border-top: 2px solid var(--q-accent); border-bottom: 0; font: 800 18px var(--f-display); padding-top: 10px; }
.q-foot { margin-top: 28px; font-size: 12.5px; color: #555 !important; line-height: 1.6; border-top: 1px solid #ddd; padding-top: 12px; }
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 auto 16px; max-width: 860px; }
/* Логотип исполнителя вместо фирменного знака приложения. */
.q-logo { max-height: 42px; max-width: 190px; object-fit: contain; display: block; }
/* Место под подпись и печать — то, что на распечатке заполняют от руки. */
.q-sign { display: flex; gap: 40px; margin-top: 34px; page-break-inside: avoid; }
.q-sign > div { flex: 1; font-size: 12.5px; }
.q-sign span { display: block; font: 700 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #666 !important; }
.q-sign .q-sign-line { display: block; height: 1px; background: #999; margin: 26px 0 6px; }
.q-sign-img { display: block; max-height: 54px; max-width: 200px; object-fit: contain; margin: 4px 0 2px; }
.q-sign b { display: block; }
.q-sign small { color: #777 !important; }

/* Печать = PDF: заказчик получает лист А4, а не снимок экрана. Строки не
   рвутся посередине, шапка таблицы повторяется на каждой странице. */
@media print {
  body { background: #fff !important; }
  .topbar, .bottomnav, .foot, .q-actions, .toast, .pwa-install, .pwa-update, .drawer, .modal { display: none !important; }
  .container { padding: 0 !important; max-width: none !important; }
  .sheet { border: 0; box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .q-table thead { display: table-header-group; }
  .q-table tr, .q-totals, .q-foot { page-break-inside: avoid; }
  .q-head { page-break-after: avoid; }
  a[href]::after { content: ""; }
  @page { size: A4; margin: 14mm; }
}
.q-intro { margin: 0 0 14px; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.q-foot { white-space: pre-line; }
.q-valid { display: inline-block; margin-top: 4px; font: 600 12px var(--f-mono); color: var(--q-accent) !important; }
.q-table .q-name b { display: block; }
.q-table .q-spec { display: block; font-size: 12px; color: #666 !important; margin-top: 2px; }
.q-row-media { display: flex; gap: 10px; align-items: flex-start; }
.q-thumb { width: 48px; height: 48px; flex: none; border-radius: 8px; border: 1px solid #eee; object-fit: contain; background: #fff; padding: 3px; }
.q-empty { padding: 24px 6px; color: #777 !important; }
/* On a phone the offer is read, not printed: columns fold instead of scrolling. */
@media (max-width: 640px) {
  .sheet { padding: 22px 16px; border-radius: 14px; }
  .q-head { flex-direction: column; }
  .q-head > div:last-child { text-align: left !important; }
  .q-table thead { display: none; }
  .q-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid #eee; }
  .q-table td { border: 0; padding: 0; }
  .q-table td.q-n { display: none; }
  .q-table td.q-name { grid-column: 1 / -1; }
  .q-table td.q-qty { color: #666 !important; font-size: 12.5px; text-align: left; }
  .q-table td.q-price { display: none; }
  .q-table .grp { display: block; padding: 14px 0 4px; border: 0; }
  .q-thumb { width: 40px; height: 40px; }
  .q-totals { width: 100%; }
}