/* site/assets/it-gen-trade-cl20-v1-batch2.css
   5 cleaner (cleaning service) invoice-generator designs, built the same way as
   site/assets/it-gen-trade-mc20-v1.css (direct ?template= addressing only, registered
   in TEMPLATES, never UNIVERSAL_TPL_IDS). Source: docs/full-designs/incoming/cleaner/
   InvoiceTools_Cleaning_Service_Claude_Package/editable_source_batches/
   Cleaning_Service_CL_31_40_Editable/CL-36..CL-40. Unlike the mc20 pack, this batch's
   source spec.json has no photo/art asset at all (pure color/font/layout data) - every
   decorative treatment below is recreated with plain CSS (gradients, clip-path, borders,
   generated ::before/::after content), no image references, no raw <svg. */

/* CL-36 - Room tiles invoice: serif "Invoice" wordmark beside a surface-tint meta box with
   an accent left border, then a 6-tile rounded room checklist grid (Kitchen/Living/Bedrooms/
   Bathrooms/Dining/Hallways, each with a check mark) recreated as decorative chips above the
   parties row, primary-green table header and grand total. */
.invoice-preview.tmpl-cl20-36-roomtiles{background:#fff;color:#1F2933;font-family:'DM Sans',Arial,sans-serif}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-head{display:flex!important;justify-content:space-between;align-items:flex-start;padding:30px 40px 0;border:0}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-biz-name{font-size:11px;color:#6B7280;letter-spacing:.02em}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-doc-title{font-family:'Lora',Georgia,'Times New Roman',serif;font-size:52px;color:#245C4A;font-weight:600;margin-top:6px;line-height:1}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-head-right{background:#F4F7F7;border-left:4px solid #A8D5BA;padding:11px 13px;font-size:11px;min-width:220px}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-doc-num{font-size:12px;color:#1F2933}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-body{position:relative;padding-top:10px}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-body::before{content:"Kitchen ✓  ·  Living ✓  ·  Bedrooms ✓  ·  Bathrooms ✓  ·  Dining ✓  ·  Hallways ✓";display:block;background:#F4F7F7;border-radius:14px;padding:12px 16px;margin:0 0 16px;font-size:10px;text-align:center;color:#245C4A;letter-spacing:.03em}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-parties{border:0;gap:12px}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-bill-to,.invoice-preview.tmpl-cl20-36-roomtiles .inv-details{border:1px solid #D9E0E5;padding:12px 13px}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-label{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#245C4A}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-table thead tr{background:#245C4A;color:#fff}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-table th{font-size:10px;text-transform:none}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-totals{border:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-total-grand{background:#245C4A;color:#fff}
.invoice-preview.tmpl-cl20-36-roomtiles .inv-total-grand b{color:#fff!important;font-size:16px!important}

/* CL-37 - Navy corner statement: an oversized navy diagonal clip-path corner panel (a right-
   angled clipped triangle folding in from the top-right) holding the invoice number/due date in
   white, a bold condensed navy "Invoice" wordmark left of it with room reserved for the corner,
   navy table header, navy grand total, amber accent rule above payment details. */
.invoice-preview.tmpl-cl20-37-cornerstatement{background:#fff;color:#1F2933;font-family:Arial,Helvetica,sans-serif}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-head{display:block!important;position:relative;padding:30px 220px 20px 40px;min-height:150px;border:0}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-head::before{content:"";position:absolute;top:0;right:0;width:230px;height:150px;background:#0B2342;clip-path:polygon(36% 0,100% 0,100% 100%,0 36%)}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-head-right{position:absolute;top:26px;right:16px;width:190px;text-align:right;color:#fff;font-size:10px;z-index:1}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-doc-num{color:#fff;font-size:13px;font-weight:700}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-biz-name{font-size:11px;color:#6B7280}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-doc-title{font-size:20px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-top:4px}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-parties{border:0;gap:12px}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-bill-to,.invoice-preview.tmpl-cl20-37-cornerstatement .inv-details{border:1px solid #D9E0E5;padding:12px 13px}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-label{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#0B2342}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-table thead tr{background:#0B2342;color:#fff}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-table th{font-size:10px;text-transform:none}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-totals{border:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-total-grand{background:#0B2342;color:#fff}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-total-grand b{color:#fff!important;font-size:16px!important}
.invoice-preview.tmpl-cl20-37-cornerstatement .inv-block{border-top:2px solid #FFB703!important;border-left:0!important;border-right:0!important;border-bottom:0!important;padding-top:10px!important}

/* CL-38 - Monoline specialty care: a plain thin-ruled header (no fill, no color, a light
   bottom border) with a large serif "Invoice" wordmark set in a warm taupe-and-charcoal
   monoline palette, a 4-column specialty-service band (Upholstery/Rugs/Mattresses/Stain care)
   recreated as thin-bordered chips, restrained charcoal table header and total (no bright
   fills anywhere - the whole design reads as quiet/editorial, not colorful). */
.invoice-preview.tmpl-cl20-38-monoline{background:#fff;color:#1F2933;font-family:'Inter',Arial,sans-serif}
.invoice-preview.tmpl-cl20-38-monoline .inv-head{display:flex!important;justify-content:space-between;align-items:flex-end;padding:30px 40px 14px;border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-38-monoline .inv-biz-name{font-size:11px;color:#6B7280}
.invoice-preview.tmpl-cl20-38-monoline .inv-doc-title{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-size:60px;font-weight:500;color:#2D2D2D;margin-top:8px;line-height:1}
.invoice-preview.tmpl-cl20-38-monoline .inv-head-right{font-size:11px;text-align:right;color:#6B7280}
.invoice-preview.tmpl-cl20-38-monoline .inv-doc-num{color:#2D2D2D;font-size:12px}
.invoice-preview.tmpl-cl20-38-monoline .inv-body{position:relative;padding-top:14px}
.invoice-preview.tmpl-cl20-38-monoline .inv-body::before{content:"Upholstery   Rugs   Mattresses   Stain care";display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px;font-size:9px;text-align:center;color:#2D2D2D}
.invoice-preview.tmpl-cl20-38-monoline .inv-parties{border:0;gap:12px}
.invoice-preview.tmpl-cl20-38-monoline .inv-bill-to,.invoice-preview.tmpl-cl20-38-monoline .inv-details{border:1px solid #D9E0E5;padding:12px 13px}
.invoice-preview.tmpl-cl20-38-monoline .inv-label{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#2D2D2D}
.invoice-preview.tmpl-cl20-38-monoline .inv-table thead tr{background:#2D2D2D;color:#fff}
.invoice-preview.tmpl-cl20-38-monoline .inv-table th{font-size:10px;text-transform:none}
.invoice-preview.tmpl-cl20-38-monoline .inv-totals{border:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-38-monoline .inv-total-grand{background:#2D2D2D;color:#fff}
.invoice-preview.tmpl-cl20-38-monoline .inv-total-grand b{color:#fff!important;font-size:16px!important}
.invoice-preview.tmpl-cl20-38-monoline .inv-block{border-top:2px solid #B8A58A!important;border-left:0!important;border-right:0!important;border-bottom:0!important;padding-top:10px!important}

/* CL-39 - Mint service timeline: a soft mint-to-white gradient header block with a thick teal
   left border rule, then a 5-step dotted progress track (Booked/Arrived/Cleaned/Checked/
   Complete, each a filled teal dot linked by a mint connector line) recreated above the parties
   row - the one design in this batch with a genuinely different decorative mechanic (a status
   track, not a badge/chip grid). Teal table header and grand total. */
.invoice-preview.tmpl-cl20-39-timeline{background:#fff;color:#1F2933;font-family:'Manrope',Arial,sans-serif}
.invoice-preview.tmpl-cl20-39-timeline .inv-head{display:block!important;background:linear-gradient(90deg,#F4F7F7,#fff);border-left:8px solid #2E6F6A;padding:22px 28px;border-top:0;border-right:0;border-bottom:0}
.invoice-preview.tmpl-cl20-39-timeline .inv-biz-name{font-size:11px;color:#6B7280}
.invoice-preview.tmpl-cl20-39-timeline .inv-doc-title{font-size:48px;color:#2E6F6A;font-weight:700;margin-top:4px}
.invoice-preview.tmpl-cl20-39-timeline .inv-head-right{font-size:10px;color:#6B7280;margin-top:4px}
.invoice-preview.tmpl-cl20-39-timeline .inv-doc-num{color:#2E6F6A;font-size:11px}
.invoice-preview.tmpl-cl20-39-timeline .inv-body{position:relative;padding-top:16px}
.invoice-preview.tmpl-cl20-39-timeline .inv-body::before{content:"";display:block;height:2px;background:#BFE3D8;margin:8px 40px 18px;position:relative}
.invoice-preview.tmpl-cl20-39-timeline .inv-body::after{content:"Booked   ●   Arrived   ●   Cleaned   ●   Checked   ●   Complete";display:block;text-align:center;font-size:9px;color:#2E6F6A;letter-spacing:.04em;margin:-30px 0 14px}
.invoice-preview.tmpl-cl20-39-timeline .inv-parties{border:0;gap:12px}
.invoice-preview.tmpl-cl20-39-timeline .inv-bill-to,.invoice-preview.tmpl-cl20-39-timeline .inv-details{border:1px solid #D9E0E5;padding:12px 13px}
.invoice-preview.tmpl-cl20-39-timeline .inv-label{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#2E6F6A}
.invoice-preview.tmpl-cl20-39-timeline .inv-table thead tr{background:#2E6F6A;color:#fff}
.invoice-preview.tmpl-cl20-39-timeline .inv-table th{font-size:10px;text-transform:none}
.invoice-preview.tmpl-cl20-39-timeline .inv-totals{border:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-39-timeline .inv-total-grand{background:#2E6F6A;color:#fff}
.invoice-preview.tmpl-cl20-39-timeline .inv-total-grand b{color:#fff!important;font-size:16px!important}
.invoice-preview.tmpl-cl20-39-timeline .inv-block{border-top:2px solid #BFE3D8!important;border-left:0!important;border-right:0!important;border-bottom:0!important;padding-top:10px!important}

/* CL-40 - Editorial band system: a full-bleed plum top band holding the business name and a
   large Playfair serif "Invoice" wordmark in white, then a 3-column meta strip beneath it
   (Invoice no. / Issue date / Due date) recreated as chips each with a thick lilac top border
   on a light surface tint - a genuinely different composition from the other 4 (color-blocked
   band up top rather than a plain white head). Plum table header and grand total. */
.invoice-preview.tmpl-cl20-40-bandsystem{background:#fff;color:#1F2933;font-family:'Nunito Sans',Arial,sans-serif}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-head{display:block!important;background:#4A3B5C;color:#fff;padding:22px 40px;border:0}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-biz-name{font-size:11px;color:#E5DCEA}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-doc-title{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-size:52px;color:#fff;margin-top:4px}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-head-right{color:#fff;font-size:11px}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-doc-num{color:#fff;font-size:12px}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-body{position:relative;padding-top:14px}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-body::before{content:"Invoice · issue date · due date on file";display:grid;place-items:center;background:#F4F7F7;border-top:7px solid #D4B5D8;padding:10px 12px;margin:0 0 14px;font-size:9px;color:#4A3B5C}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-parties{border:0;gap:12px}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-bill-to,.invoice-preview.tmpl-cl20-40-bandsystem .inv-details{border:1px solid #D9E0E5;padding:12px 13px}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-label{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#4A3B5C}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-table thead tr{background:#4A3B5C;color:#fff}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-table th{font-size:10px;text-transform:none}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-totals{border:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-total-grand{background:#4A3B5C;color:#fff}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-total-grand b{color:#fff!important;font-size:16px!important}
.invoice-preview.tmpl-cl20-40-bandsystem .inv-block{border-top:2px solid #D4B5D8!important;border-left:0!important;border-right:0!important;border-bottom:0!important;padding-top:10px!important}