/* Printed document layouts (public/js/core/print-layout-apply.js): the wrapper .play around an A4 document (.edoc) or the 80 mm receipt (.rcpt).
   play-<style>, play-size-<s|m|l>, play-no-<field> (a field the company hid), --play-accent (the chosen colour). Loaded by admin.html and pos.html. */
.play { --play-accent: #6f4e37; }
.play .edoc-head { border-bottom-color: var(--play-accent); }
.play .edoc-title h1, .play .edoc-coname { color: var(--play-accent); }
.play .edoc-lines th { border-bottom-color: var(--play-accent); }
.play .edoc-trow.grand { border-top-color: var(--play-accent); }
.play-footer { margin-top: 14px; padding-top: 8px; border-top: 1px solid #d6cfc7; font-size: 10.5px; color: #444; text-align: center; white-space: normal; }

/* text size */
.play-size-s .edoc { font-size: 10.5px; }
.play-size-l .edoc { font-size: 13.5px; }
.play-size-l .edoc-lines th { font-size: 11.5px; }
.play-size-s .rcpt, .play-size-s .receipt { font-size: 11px; }
.play-size-l .rcpt, .play-size-l .receipt { font-size: 13.5px; }

/* styles */
.play-compact .edoc-head { padding-bottom: 8px; margin-bottom: 9px; }
.play-compact .edoc-parties { gap: 8px; margin-bottom: 9px; }
.play-compact .edoc-box { padding: 5px 8px; }
.play-compact .edoc-lines th, .play-compact .edoc-lines td { padding: 3px 5px; }
.play-compact .edoc-logo { width: 44px; height: 44px; }
.play-boxed .edoc-head { background: var(--play-accent); color: #fff; padding: 12px 14px; border-radius: 6px; border-bottom: 0; }
.play-boxed .edoc-head .edoc-coname, .play-boxed .edoc-head .edoc-title h1, .play-boxed .edoc-head .edoc-small, .play-boxed .edoc-head .edoc-ids, .play-boxed .edoc-head .edoc-no { color: #fff; }
.play-boxed .edoc-logo { background: #fff; border-radius: 6px; padding: 3px; }
.play-boxed .edoc-box { border: 1.5px solid var(--play-accent); }
.play-boxed .edoc-lines { border: 1.5px solid var(--play-accent); }
.play-boxed .edoc-lines th { background: color-mix(in srgb, var(--play-accent) 14%, #fff); }
.play-boxed .edoc-totals { border: 1.5px solid var(--play-accent); border-radius: 6px; padding: 8px 10px; }

/* hidden fields: A4 */
.play-no-logo .edoc-logo { display: none; }
.play-no-company-details .edoc-co .edoc-small:not(.edoc-ids) { display: none; }
.play-no-company-ids .edoc-co .edoc-ids { display: none; }
.play-no-partner-details .edoc-parties > .edoc-box:first-child .edoc-small:not(.edoc-ids) { display: none; }
.play-no-partner-ids .edoc-parties > .edoc-box:first-child .edoc-ids { display: none; }

/* hidden fields: receipt (the register's pos/receipt.js and the back office reprint admin/print.js mark the parts) */
.play-no-company-details .r-co-details { display: none; }
.play-no-company-ids .r-co-ids { display: none; }
.play-no-order-type .r-track > span, .play-no-order-type .r-order-type { display: none; }
.play-no-cashier .r-cashier { display: none; }
.play-no-customer .r-customer { display: none; }
.play-no-line-details .r-l2 { display: none; }
.play-no-payments .r-payments { display: none; }
.play-no-notes .r-note { display: none; }

/* the live preview of the settings page: a paper sheet scaled to fit */
.play-preview { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; overflow: auto; max-height: 78vh; }
.play-paper { background: #fff; color: #1b1b1b; box-shadow: 0 2px 14px rgba(0, 0, 0, .14); margin: 0 auto; }
.play-paper.a4 { width: 210mm; min-height: 240mm; padding: 12mm; zoom: var(--play-zoom, .62); }
.play-paper.receipt { width: 80mm; padding: 2mm 0; }

/* Settings > Printed documents (public/js/admin/print-layouts-page.js) */
.play-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.play-type { display: grid; gap: 2px; text-align: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; }
.play-type small { font-size: 12px; line-height: 1.3; }
.play-type.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.play-type-sel { display: none; width: 100%; margin-bottom: 12px; }
.play-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.play-form { display: grid; gap: 12px; }
.play-card { display: grid; gap: 12px; padding: 14px 16px; }
.play-card h3 { margin: 0; font-size: 15px; }
.play-seg { flex-wrap: wrap; }
.play-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.play-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.play-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.play-swatch.on { box-shadow: 0 0 0 2px var(--ink, #111); }
.play-colours input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.play-fields { display: grid; gap: 8px; }
.play-field { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.play-field input { width: 18px; height: 18px; accent-color: var(--accent); }
.play-field.locked { cursor: default; }
.play-lock { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.play-side { position: sticky; top: calc(var(--stick, 0px) + 8px); display: grid; gap: 8px; }
.play-side-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
@media (max-width: 1100px) { .play-paper.a4 { --play-zoom: .5; } }
@media (max-width: 900px) {
  .play-grid { grid-template-columns: minmax(0, 1fr); }
  .play-side { position: static; }
}
@media (max-width: 720px) {
  .play-types { display: none; }
  .play-type-sel { display: block; }
  .play-paper.a4 { --play-zoom: .42; }
  .play-preview { padding: 8px; max-height: none; }
}