/* ==========================================================================
   Invoice Configuration Showcase — Presentation Themes
   --------------------------------------------------------------------------
   Each theme restyles the SAME shared .inv-* invoice markup by re-tuning the
   --inv-* design tokens and a disciplined set of structural rules. The theme
   class lives on the .sc-paper-sheet wrapper, so every token cascades in.
   No markup changes, no external fonts, corners stay square.

   Design discipline (so every template reads as a professional invoice):
     - The masthead keeps the conventional logo/remit-left, INVOICE-meta-right
       layout in every theme EXCEPT Studio (a clean full-width brand banner)
       and Heritage (a tight centered letterhead). No floating empty logo box.
     - Variety comes from typography, section-header treatment, the contract-
       summary layout, and the total — not from scrambling the header.
   ========================================================================== */

/* ==========================================================================
   Theme picker chrome (the bar of swatches in the Explore preview)
   ========================================================================== */
.sc-theme-bar {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 10px; border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: var(--gray-50, #f9fafb);
}
.sc-theme-bar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-theme-bar-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--gray-400, #9ca3af); margin-right: 2px;
}
.sc-theme-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 11px; font-weight: 600; color: var(--gray-600, #4b5563);
    border: 1px solid var(--gray-300, #d1d5db); background: #fff; padding: 3px 9px 3px 4px;
    cursor: pointer;
}
.sc-theme-chip:hover { border-color: var(--gray-400, #9ca3af); }
.sc-theme-chip.active { border-color: var(--primary, #4a6da7); background: var(--primary-bg, #f2f5fa); color: var(--gray-800, #1f2937); }
.sc-theme-chip.active .sc-theme-sw { box-shadow: 0 0 0 1px var(--primary, #4a6da7); }
.sc-theme-sw { display: inline-flex; width: 20px; height: 16px; border: 1px solid rgba(0,0,0,0.12); }
.sc-theme-sw i { display: block; height: 100%; }
.sc-theme-sw i:first-child { width: 58%; }
.sc-theme-sw i:last-child { width: 42%; }
.sc-theme-desc { font-size: 11px; color: var(--gray-500, #6b7280); line-height: 1.4; }
.sc-theme-desc b { color: var(--gray-700, #374151); font-weight: 700; }
@media print { .sc-theme-bar { display: none; } }


/* ==========================================================================
   CLASSIC — house default (navy). No overrides; the shipped look.
   ========================================================================== */
/* .inv-theme-classic intentionally has no rules. */


/* ==========================================================================
   PRECISION — Structural & Civil Engineering (meticulous)
   Conventional masthead. Numbered sections, monospaced figures, hairline
   rules, and the contract balances as a clean metric strip.
   ========================================================================== */
.inv-theme-precision {
    --inv-accent: #1f3a5f; --inv-accent-deep: #142a45; --inv-accent-light: #62789a;
    --inv-ink: #141b26; --inv-text-color: #28313f; --inv-muted-color: #6b7685;
    --inv-border-color: #c6cfda; --inv-border-light: #e6eaf0;
    --inv-panel: #f4f7fa; --inv-accent-tint: #e9f0f8;
    --inv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    counter-reset: invsec;
}
.inv-theme-precision .inv-right,
.inv-theme-precision .inv-meta-value { font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace; letter-spacing: -0.2px; }
.inv-theme-precision .inv-meta-title { letter-spacing: 8px; font-weight: 600; }
.inv-theme-precision .inv-section { counter-increment: invsec; }
.inv-theme-precision .inv-section-header { border-bottom-width: 1px; letter-spacing: 2px; }
.inv-theme-precision .inv-section-header::before {
    content: counter(invsec, decimal-leading-zero) '\2002';
    color: var(--inv-accent-light);
}
.inv-theme-precision .inv-group-header {
    background: transparent; border-left: none;
    border-bottom: 1px solid var(--inv-border-color); padding-left: 2px;
}
.inv-theme-precision .inv-table thead th { background: transparent; color: var(--inv-accent-deep); border-bottom: 1.5px solid var(--inv-accent-deep); }
/* Contract balances → clean metric strip (no box, hairline top/bottom). */
.inv-theme-precision .inv-contract-summary {
    border: none; border-top: 1.5px solid var(--inv-accent-deep); border-bottom: 1px solid var(--inv-border-color);
    background: transparent; max-width: none;
}
.inv-theme-precision .inv-contract-line { border-left: none; padding: 7px 26px 7px 0; }
.inv-theme-precision .inv-contract-value { font-family: ui-monospace, 'SFMono-Regular', 'Consolas', monospace; font-size: 12px; }
.inv-theme-precision .inv-contract-line:last-child .inv-contract-value { color: var(--inv-accent-deep); }


/* ==========================================================================
   ATELIER — Boutique Architecture (understated, editorial)
   Conventional masthead, refined serif, brass hairlines, letter-spaced
   section labels, and the contract balances as a right-aligned dotted ledger.
   ========================================================================== */
.inv-theme-atelier {
    --inv-accent: #9a7b4f; --inv-accent-deep: #6f5836; --inv-accent-light: #b39a72;
    --inv-ink: #22201c; --inv-text-color: #3b382f; --inv-muted-color: #8a8375;
    --inv-border-color: #e3ddcf; --inv-border-light: #efe9dd;
    --inv-panel: #f7f3ea; --inv-accent-tint: #f2ead6;
    --inv-font: Georgia, 'Times New Roman', 'Times', serif;
}
.inv-theme-atelier .inv-cover-page { border-top: 1px solid var(--inv-accent-light); }
.inv-theme-atelier .inv-meta-title { font-weight: 400; letter-spacing: 10px; color: var(--inv-accent-deep); }
.inv-theme-atelier .inv-project-name { font-weight: 400; font-size: 17px; letter-spacing: 0.3px; }
.inv-theme-atelier .inv-section-header { border-bottom: 1px solid var(--inv-accent-light); font-weight: 600; letter-spacing: 3px; }
.inv-theme-atelier .inv-group-header { background: transparent; border-left: 2px solid var(--inv-accent-light); font-weight: 600; }
.inv-theme-atelier .inv-table thead th { background: transparent; border-bottom: 1px solid var(--inv-border-color); letter-spacing: 1px; }
/* Contract balances → right-aligned dotted ledger. */
.inv-theme-atelier .inv-contract-summary {
    flex-direction: column; max-width: 300px; margin: 6px 0 14px auto;
    border: none; background: transparent;
}
.inv-theme-atelier .inv-contract-line {
    flex-direction: row; justify-content: space-between; align-items: baseline; gap: 18px;
    border-left: none; border-bottom: 1px dotted var(--inv-border-color); padding: 4px 0;
}
.inv-theme-atelier .inv-contract-line:last-child { border-bottom: 2px solid var(--inv-accent-light); }
.inv-theme-atelier .inv-contract-value { font-size: 11.5px; }


/* ==========================================================================
   STUDIO — Design / Multidisciplinary Studio (bold & branded)
   A clean full-width brand banner (logo left, INVOICE right), filled section
   bars, contract balances as stat tiles (Remaining filled), a centered total.
   ========================================================================== */
.inv-theme-studio {
    --inv-accent: #0f766e; --inv-accent-deep: #0b544e; --inv-accent-light: #3f9c93;
    --inv-ink: #0f172a; --inv-text-color: #1e293b; --inv-muted-color: #64748b;
    --inv-border-color: #d5dbe2; --inv-border-light: #e8ecf1;
    --inv-panel: #eafaf7; --inv-accent-tint: #d5f0ea;
    --inv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.inv-theme-studio .inv-cover-page { border-top: none; }
.inv-theme-studio .inv-header-row {
    background: var(--inv-accent); color: #fff; padding: 16px 18px; margin-bottom: 16px;
    align-items: center; flex-wrap: wrap; gap: 16px;
}
.inv-theme-studio .inv-remit-to, .inv-theme-studio .inv-remit-attn { color: #fff; }
.inv-theme-studio .inv-logo-placeholder { color: #fff; border-color: rgba(255,255,255,0.6); }
.inv-theme-studio .inv-bill-to { background: rgba(255,255,255,0.14); border-left-color: #fff; color: #fff; }
.inv-theme-studio .inv-bill-to-name { color: #fff; }
.inv-theme-studio .inv-meta-title { color: #fff; font-weight: 800; letter-spacing: 2px; font-size: 26px; }
.inv-theme-studio .inv-meta-label { color: rgba(255,255,255,0.82); }
.inv-theme-studio .inv-meta-value { color: #fff; }
.inv-theme-studio td.inv-meta-total { color: #fff; }
.inv-theme-studio .inv-meta-table tr:last-child td { border-top-color: rgba(255,255,255,0.4); }
.inv-theme-studio .inv-section-header {
    background: var(--inv-accent); color: #fff; border-bottom: none;
    padding: 6px 11px; letter-spacing: 1.4px;
}
.inv-theme-studio .inv-group-header { background: var(--inv-accent-tint); border-left: 4px solid var(--inv-accent); }
.inv-theme-studio .inv-table thead th { background: var(--inv-accent-tint); color: var(--inv-accent-deep); }
.inv-theme-studio .inv-total-row td { background: var(--inv-accent-tint); }
/* Contract balances → stat tiles, Remaining filled. */
.inv-theme-studio .inv-contract-summary { border: none; background: transparent; gap: 8px; max-width: 540px; }
.inv-theme-studio .inv-contract-line { border: 1px solid var(--inv-border-color); background: #fff; padding: 8px 12px; }
.inv-theme-studio .inv-contract-line:last-child { background: var(--inv-accent); border-color: var(--inv-accent); }
.inv-theme-studio .inv-contract-line:last-child .inv-contract-label { color: rgba(255,255,255,0.85); }
.inv-theme-studio .inv-contract-line:last-child .inv-contract-value { color: #fff; }
.inv-theme-studio .inv-final-rule { background: var(--inv-accent-deep); }
.inv-theme-studio .inv-final-amount-row { justify-content: center; gap: 22px; background: var(--inv-accent); border-bottom: none; }
.inv-theme-studio .inv-final-label, .inv-theme-studio .inv-final-amount { color: #fff; }
.inv-theme-studio .inv-final-amount { font-size: 26px; }


/* ==========================================================================
   SLATE — Infrastructure / MEP (utilitarian, high-legibility)
   Conventional masthead. Solid steel section bands, zebra rows, and an
   amber-emphasized Remaining balance. Built to be read fast.
   ========================================================================== */
.inv-theme-slate {
    --inv-accent: #334155; --inv-accent-deep: #1e293b; --inv-accent-light: #64748b;
    --inv-ink: #111827; --inv-text-color: #233240; --inv-muted-color: #5b6673;
    --inv-border-color: #cbd2da; --inv-border-light: #e4e8ed;
    --inv-panel: #eef1f4; --inv-accent-tint: #fdecd9;
    --inv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.inv-theme-slate .inv-cover-page { border-top: 4px solid var(--inv-accent-deep); }
.inv-theme-slate .inv-section-header {
    background: var(--inv-accent-deep); color: #fff; border-bottom: none;
    padding: 6px 11px; letter-spacing: 1.2px;
}
.inv-theme-slate .inv-table thead th { background: var(--inv-accent); color: #fff; border-color: var(--inv-accent); }
.inv-theme-slate .inv-table tbody tr:nth-child(even) td { background: #f6f8fa; }
.inv-theme-slate .inv-group-header { background: var(--inv-panel); border-left: 4px solid var(--inv-accent); }
.inv-theme-slate .inv-meta-total, .inv-theme-slate .inv-final-amount { color: #b45309; }
.inv-theme-slate .inv-contracts-table th:last-child,
.inv-theme-slate .inv-contracts-table tbody td:last-child,
.inv-theme-slate .inv-contracts-table tfoot .inv-total-row td:last-child { color: #b45309; background: var(--inv-accent-tint); }
/* Contract balances → strip with amber Remaining. */
.inv-theme-slate .inv-contract-summary { border: 1px solid var(--inv-accent); border-left-width: 4px; }
.inv-theme-slate .inv-contract-line:last-child { background: var(--inv-accent-tint); }
.inv-theme-slate .inv-contract-line:last-child .inv-contract-label,
.inv-theme-slate .inv-contract-line:last-child .inv-contract-value { color: #b45309; }


/* ==========================================================================
   TERRA — Landscape & Environmental (soft & organic)
   Conventional masthead, muted sage, generous spacing, hairline headers, and
   contract balances as a gentle stacked panel.
   ========================================================================== */
.inv-theme-terra {
    --inv-accent: #5c7a5c; --inv-accent-deep: #455e45; --inv-accent-light: #8aa588;
    --inv-ink: #2b332a; --inv-text-color: #3f4a3d; --inv-muted-color: #7d867a;
    --inv-border-color: #dfe6da; --inv-border-light: #edf1e9;
    --inv-panel: #f2f6ee; --inv-accent-tint: #e6efe0;
    --inv-font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}
.inv-theme-terra .inv-cover-page { border-top: 2px solid var(--inv-accent-light); }
.inv-theme-terra .inv-section { margin-bottom: 30px; }
.inv-theme-terra .inv-section-header { border-bottom: 1px solid var(--inv-accent-light); font-weight: 600; letter-spacing: 1.6px; }
.inv-theme-terra .inv-table th, .inv-theme-terra .inv-table td { padding: 5px 8px; }
.inv-theme-terra .inv-table thead th { background: transparent; border-bottom: 1px solid var(--inv-border-color); color: var(--inv-muted-color); font-weight: 600; }
.inv-theme-terra .inv-group-header { background: var(--inv-panel); border-left: 3px solid var(--inv-accent-light); font-weight: 600; }
.inv-theme-terra .inv-total-row td { background: var(--inv-accent-tint); border-top-color: var(--inv-accent-light); }
/* Contract balances → soft stacked panel. */
.inv-theme-terra .inv-contract-summary {
    flex-direction: column; border: none; background: var(--inv-panel);
    max-width: 320px; padding: 4px 14px; gap: 0;
}
.inv-theme-terra .inv-contract-line {
    flex-direction: row; justify-content: space-between; align-items: baseline;
    border-left: none; border-bottom: 1px solid var(--inv-border-light); padding: 7px 0;
}
.inv-theme-terra .inv-contract-line:last-child { border-bottom: none; }
.inv-theme-terra .inv-contract-line:last-child .inv-contract-value { color: var(--inv-accent-deep); }


/* ==========================================================================
   HERITAGE — Established / Traditional practice (formal & classic)
   A tight centered serif letterhead (the one theme that centers, done
   cleanly), double-ruled centered section headers, and contract balances as a
   right-aligned ledger closed by a double rule.
   ========================================================================== */
.inv-theme-heritage {
    --inv-accent: #7a1f2b; --inv-accent-deep: #5c151f; --inv-accent-light: #9c5a62;
    --inv-ink: #1a1a1a; --inv-text-color: #2a2a2a; --inv-muted-color: #6b6b6b;
    --inv-border-color: #cfcfcf; --inv-border-light: #e6e6e6;
    --inv-panel: #f4f2f0; --inv-accent-tint: #f0e6e7;
    --inv-font: Georgia, 'Times New Roman', 'Times', serif;
}
.inv-theme-heritage .inv-cover-page { border-top: 3px double var(--inv-ink); }
/* Centered letterhead — tightened so the logo/address sit as a composed block. */
.inv-theme-heritage .inv-header-row { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.inv-theme-heritage .inv-header-left { align-items: center; gap: 8px; width: 100%; }
.inv-theme-heritage .inv-remit-to { text-align: center; }
.inv-theme-heritage .inv-logo { margin-bottom: 4px; text-align: center; }
.inv-theme-heritage .inv-logo-placeholder { width: 190px; height: 52px; margin: 0 auto; }
.inv-theme-heritage .inv-bill-to {
    text-align: center; background: transparent; max-width: 320px; margin: 0 auto;
    border-left: none; border-top: 1px solid var(--inv-border-color); border-bottom: 1px solid var(--inv-border-color);
    padding: 6px 16px;
}
.inv-theme-heritage .inv-meta-box { text-align: center; min-width: 0; }
.inv-theme-heritage .inv-meta-title { font-weight: 700; letter-spacing: 6px; color: var(--inv-ink); }
.inv-theme-heritage .inv-meta-table { margin: 4px auto 0; }
.inv-theme-heritage .inv-meta-value { min-width: 120px; }
.inv-theme-heritage .inv-project-info { text-align: center; }
.inv-theme-heritage .inv-project-name { font-weight: 700; font-size: 16px; }
.inv-theme-heritage .inv-section-header {
    border-bottom: 3px double var(--inv-accent); color: var(--inv-ink);
    letter-spacing: 1.8px; text-align: center;
}
.inv-theme-heritage .inv-group-header {
    background: transparent; border-left: none;
    border-bottom: 1px solid var(--inv-border-color); font-weight: 700; padding-left: 2px;
}
.inv-theme-heritage .inv-table thead th { background: transparent; color: var(--inv-ink); border-bottom: 1px solid var(--inv-ink); }
.inv-theme-heritage .inv-total-row td { background: transparent; border-top: 1px solid var(--inv-ink); }
.inv-theme-heritage .inv-meta-total, .inv-theme-heritage .inv-final-amount { color: var(--inv-accent); }
.inv-theme-heritage .inv-final-amount-row { background: transparent; border-bottom: none; border-top: 1px solid var(--inv-ink); }
/* Contract balances → right-aligned ledger closed by a double rule. */
.inv-theme-heritage .inv-contract-summary {
    flex-direction: column; max-width: 280px; margin: 6px 0 14px auto;
    border: none; background: transparent;
}
.inv-theme-heritage .inv-contract-line {
    flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px;
    border-left: none; border-bottom: 1px solid var(--inv-border-color); padding: 3px 0;
}
.inv-theme-heritage .inv-contract-line:last-child { border-bottom: 3px double var(--inv-ink); }