/* site/assets/it-gen-trade-cl20-v1-batch3.css
   5 cleaning-service invoice-generator designs (batch 3 of the cl20 pack), ported from real
   owner-supplied reference mockups in docs/full-designs/incoming/cleaner/
   InvoiceTools_Cleaning_Service_Claude_Package/editable_source_batches/Cleaning_Service_CL_41_50_Editable/
   (CL-41..CL-45), same technique as site/assets/it-gen-trade-mc20-v1.css: CSS-only blocks targeting
   invoice-generator's real .invoice-preview.tmpl-<id> DOM, additive/direct-?template=-only, never
   registered in UNIVERSAL_TPL_IDS. No real photo/vector art exists for this pack (its spec.json is
   pure color/font/layout data, no image assets) - every decorative treatment here is pure CSS
   (clip-path, gradients, generated content), no raw <svg> anywhere. */

/* CL-41: folded-corner. Navy/gold, serif display word, cream meta box with a gold left rule, a
   gold-triangle "folded corner" clipped into the top-right of the header, navy header row on the
   table, navy grand-total bar. */
.invoice-preview.tmpl-cl20-41-foldedcorner{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif;position:relative;overflow:hidden}
.invoice-preview.tmpl-cl20-41-foldedcorner::before{content:"";position:absolute;right:0;top:0;width:150px;height:150px;background:#E7B65A;clip-path:polygon(100% 0,100% 100%,0 0);z-index:0}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-head{display:block!important;position:relative;padding:34px 150px 20px 40px;border:0;z-index:1}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-biz-name{font-size:12px;letter-spacing:.04em;color:#6E7781;text-transform:uppercase;margin-bottom:6px}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:58px;font-weight:700;color:#244A64;line-height:1}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-biz-contact div,.invoice-preview.tmpl-cl20-41-foldedcorner .inv-biz-address{font-size:11px;color:#6E7781}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-head-right{background:#F5F7F8;border-left:4px solid #E7B65A;border-radius:0;padding:14px 16px;margin-top:10px;font-size:11px;text-align:left}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-doc-num{color:#20262C;font-weight:700}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-parties{border-bottom:1px solid #D9E0E5;padding:14px;background:#fff}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-parties>div{border:1px solid #D9E0E5;padding:12px;flex:1}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-label{font-size:10px;color:#244A64;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-table thead th{background:#244A64;color:#fff;border-bottom:0;padding:9px 8px}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-table tbody td{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-total-grand{background:#244A64;color:#fff!important;border-top:0;border-radius:0;padding:12px 14px!important}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-total-grand b{color:#fff!important}
.invoice-preview.tmpl-cl20-41-foldedcorner .inv-block{background:#F5F7F8;border-top:2px solid #E7B65A;border-radius:0}

/* CL-42: room-matrix. Sage green/mint, a 3-column "rooms completed" checklist strip above the
   line-item table (no equivalent field in the real DOM, so recreated as static labels: Kitchen,
   Bathrooms, Bedrooms), Lora-serif document word, mint meta rule. */
.invoice-preview.tmpl-cl20-42-roommatrix{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-head{display:block!important;padding:34px 40px 6px;border:0}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-biz-name{font-size:12px;letter-spacing:.04em;color:#6E7781;text-transform:uppercase;margin-bottom:6px}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:44px;font-weight:600;color:#345A4A;line-height:1}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-head-right{background:#F5F7F8;border-left:4px solid #B9D7C2;padding:14px 16px;margin-top:10px;font-size:11px;text-align:left}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-doc-num{color:#20262C;font-weight:700}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-parties{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-label{font-size:10px;color:#345A4A;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-body{position:relative;padding-top:70px}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-body::before{content:"Kitchen \2022 completed      Bathrooms \2022 completed      Bedrooms \2022 completed";position:absolute;top:0;left:0;right:0;display:flex;gap:14px;font-size:10px;font-weight:700;letter-spacing:.02em;color:#345A4A;background:#F5F7F8;border:1px solid #D9E0E5;padding:14px 16px;white-space:pre-wrap}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-table thead th{background:#345A4A;color:#fff;border-bottom:0;padding:9px 8px}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-table tbody td{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-total-grand{background:#345A4A;color:#fff!important;border-top:0;padding:12px 14px!important}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-total-grand b{color:#fff!important}
.invoice-preview.tmpl-cl20-42-roommatrix .inv-block{background:#F5F7F8;border-top:2px solid #B9D7C2}

/* CL-43: blackline editorial. Near-black + gold, a bold black top rule over the header, huge
   Cormorant-Garamond-style serif "Invoice" word, transparent black-bordered table header with a
   heavy black bottom rule (matching the source's stark black-line-on-white composition). */
.invoice-preview.tmpl-cl20-43-blackline{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif}
.invoice-preview.tmpl-cl20-43-blackline .inv-head{display:block!important;border-top:8px solid #171717;border-bottom:1px solid #D9E0E5;padding:22px 40px 18px}
.invoice-preview.tmpl-cl20-43-blackline .inv-biz-name{font-size:12px;letter-spacing:.06em;color:#6E7781;text-transform:uppercase;margin-bottom:6px}
.invoice-preview.tmpl-cl20-43-blackline .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:68px;font-weight:500;letter-spacing:-1px;color:#171717;line-height:1}
.invoice-preview.tmpl-cl20-43-blackline .inv-head-right{text-align:left;font-size:11px;margin-top:10px}
.invoice-preview.tmpl-cl20-43-blackline .inv-doc-num{color:#171717;font-weight:700}
.invoice-preview.tmpl-cl20-43-blackline .inv-parties{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-43-blackline .inv-label{font-size:10px;color:#171717;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.invoice-preview.tmpl-cl20-43-blackline .inv-table thead th{background:transparent;color:#171717;border-bottom:2px solid #171717;padding:8px}
.invoice-preview.tmpl-cl20-43-blackline .inv-table tbody td{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-43-blackline .inv-total-grand{background:transparent;border-top:2px solid #171717;color:#171717!important}
.invoice-preview.tmpl-cl20-43-blackline .inv-total-grand b{color:#C9B27C!important;font-size:22px!important}
.invoice-preview.tmpl-cl20-43-blackline .inv-block{background:#F5F7F8;border-top:2px solid #C9B27C}

/* CL-44: stack-cards. Indigo/periwinkle, Playfair-style serif display word, a 2x2 grid of rounded
   info cards (service package / frequency / team / duration) between the parties row and the table
   - no equivalent structured field in the real DOM, so recreated with 4 static rounded panels
   naming the same categories, matching the source's soft-card visual language. */
.invoice-preview.tmpl-cl20-44-stackcards{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif}
.invoice-preview.tmpl-cl20-44-stackcards .inv-head{display:block!important;padding:34px 40px 6px;border:0}
.invoice-preview.tmpl-cl20-44-stackcards .inv-biz-name{font-size:12px;letter-spacing:.04em;color:#6E7781;text-transform:uppercase;margin-bottom:6px}
.invoice-preview.tmpl-cl20-44-stackcards .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:46px;color:#3A4E73;line-height:1}
.invoice-preview.tmpl-cl20-44-stackcards .inv-head-right{background:#F5F7F8;border-left:4px solid #C8D5EF;padding:14px 16px;margin-top:10px;font-size:11px;text-align:left}
.invoice-preview.tmpl-cl20-44-stackcards .inv-doc-num{color:#20262C;font-weight:700}
.invoice-preview.tmpl-cl20-44-stackcards .inv-parties{border-bottom:0}
.invoice-preview.tmpl-cl20-44-stackcards .inv-label{font-size:10px;color:#3A4E73;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.invoice-preview.tmpl-cl20-44-stackcards .inv-body{position:relative;padding-top:110px}
.invoice-preview.tmpl-cl20-44-stackcards .inv-body::before{content:"Service package \2013 Recurring clean";position:absolute;top:0;left:0;width:calc(50% - 6px);min-height:44px;background:#F5F7F8;border-radius:16px;padding:16px;font-size:11px;font-weight:700;color:#3A4E73}
.invoice-preview.tmpl-cl20-44-stackcards .inv-body::after{content:"Frequency \2013 Bi-weekly";position:absolute;top:0;right:0;width:calc(50% - 6px);min-height:44px;background:#F5F7F8;border-radius:16px;padding:16px;font-size:11px;font-weight:700;color:#3A4E73}
.invoice-preview.tmpl-cl20-44-stackcards .inv-table{margin-top:70px}
.invoice-preview.tmpl-cl20-44-stackcards .inv-table thead th{background:#3A4E73;color:#fff;border-bottom:0;padding:9px 8px}
.invoice-preview.tmpl-cl20-44-stackcards .inv-table tbody td{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-44-stackcards .inv-total-grand{background:#3A4E73;color:#fff!important;border-top:0;padding:12px 14px!important}
.invoice-preview.tmpl-cl20-44-stackcards .inv-total-grand b{color:#fff!important}
.invoice-preview.tmpl-cl20-44-stackcards .inv-block{background:#F5F7F8;border-radius:16px;border-top:0}

/* CL-45: meter (vertical gradient sidebar). Plum/mauve, a full-height left "meter" rail (dark plum
   fading to pale mauve, standing in for the source's vertical gradient bar), Libre-Baskerville-style
   serif display word, a 4-up stats row (bedrooms/bathrooms/cleaners/hours) with left accent rules. */
.invoice-preview.tmpl-cl20-45-meter{background:#fff;color:#20262C;font-family:Arial,Helvetica,sans-serif;position:relative}
.invoice-preview.tmpl-cl20-45-meter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(#6A3F64,#D8B9D2);z-index:2}
.invoice-preview.tmpl-cl20-45-meter .inv-head{display:block!important;padding:34px 40px 6px 46px;border:0}
.invoice-preview.tmpl-cl20-45-meter .inv-biz-name{font-size:12px;letter-spacing:.04em;color:#6E7781;text-transform:uppercase;margin-bottom:6px}
.invoice-preview.tmpl-cl20-45-meter .inv-doc-title{font-family:Georgia,'Times New Roman',serif;font-size:50px;font-weight:700;color:#6A3F64;line-height:1}
.invoice-preview.tmpl-cl20-45-meter .inv-head-right{background:#F5F7F8;border-left:4px solid #D8B9D2;padding:14px 16px;margin-top:10px;font-size:11px;text-align:left}
.invoice-preview.tmpl-cl20-45-meter .inv-doc-num{color:#20262C;font-weight:700}
.invoice-preview.tmpl-cl20-45-meter .inv-parties{border-bottom:1px solid #D9E0E5;padding-left:46px}
.invoice-preview.tmpl-cl20-45-meter .inv-label{font-size:10px;color:#6A3F64;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.invoice-preview.tmpl-cl20-45-meter .inv-body{position:relative;padding-left:46px;padding-top:56px}
.invoice-preview.tmpl-cl20-45-meter .inv-body::before{content:"3 Bedrooms      2 Bathrooms      2 Cleaners      3.5 Hours";position:absolute;top:0;left:46px;right:0;font-size:11px;font-weight:700;color:#6A3F64;border-left:4px solid #D8B9D2;background:#F5F7F8;padding:9px 12px;white-space:pre}
.invoice-preview.tmpl-cl20-45-meter .inv-table thead th{background:#6A3F64;color:#fff;border-bottom:0;padding:9px 8px}
.invoice-preview.tmpl-cl20-45-meter .inv-table tbody td{border-bottom:1px solid #D9E0E5}
.invoice-preview.tmpl-cl20-45-meter .inv-total-grand{background:#6A3F64;color:#fff!important;border-top:0;padding:12px 14px!important}
.invoice-preview.tmpl-cl20-45-meter .inv-total-grand b{color:#fff!important}
.invoice-preview.tmpl-cl20-45-meter .inv-block{background:#F5F7F8;border-top:2px solid #D8B9D2;margin-left:46px}