/* ===================================================================
   Billazi — Stylesheet
   =================================================================== */
:root{
  --accent:#6366f1;
  --accent-d:#4f46e5;
  --bg:#eef1f6;
  --panel:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:14px;
}
[data-theme="indigo"]{--accent:#6366f1;--accent-d:#4f46e5;}
[data-theme="emerald"]{--accent:#10b981;--accent-d:#059669;}
[data-theme="rose"]{--accent:#f43f5e;--accent-d:#e11d48;}
[data-theme="amber"]{--accent:#f59e0b;--accent-d:#d97706;}
[data-theme="sky"]{--accent:#0ea5e9;--accent-d:#0284c7;}
[data-theme="slate"]{--accent:#334155;--accent-d:#1e293b;}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;
  transition:background .25s,color .25s;
}
body.app-dark{
  --bg:#0f172a;--panel:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--border:#334155;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.2rem;background:var(--panel);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;flex-wrap:wrap;box-shadow:0 1px 0 var(--border);
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-logo{font-size:1.7rem}
.brand-text h1{font-size:1.15rem;letter-spacing:-.02em}
.brand-text small{color:var(--muted);font-size:.72rem}
.topbar-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}

.theme-swatches{display:flex;gap:.28rem;margin-right:.3rem}
.swatch{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
  background:var(--c);cursor:pointer;transition:transform .12s}
.swatch:hover{transform:scale(1.15)}
.swatch.active{outline:2px solid var(--text);outline-offset:1px}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  padding:.5rem .8rem;border-radius:9px;font-size:.83rem;cursor:pointer;
  font-weight:600;transition:all .15s;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d)}
.btn-secondary{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent}
.btn-sm{padding:.35rem .6rem;font-size:.78rem}
.btn.full{width:100%;margin-bottom:.45rem}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:280px 1fr;gap:1.4rem;
  padding:1.4rem;max-width:1320px;margin:0 auto;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

.panel{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem;box-shadow:var(--shadow);position:sticky;top:76px;
}
@media(max-width:900px){.panel{position:static}}
.panel-title{font-size:.95rem;margin-bottom:.9rem;letter-spacing:-.01em}
.panel-divider{height:1px;background:var(--border);margin:1rem 0}
.field-group{margin-bottom:.85rem}
.field-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:.3rem;font-weight:700}
.input{
  width:100%;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;
  background:var(--bg);color:var(--text);font-size:.85rem;font-family:inherit;
}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.input.file{padding:.35rem;font-size:.75rem}
.row-2{display:grid;grid-template-columns:1fr 90px;gap:.4rem}
.hint{font-size:.72rem;color:var(--muted);margin-top:.8rem;line-height:1.4}

.seg{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.seg-btn{flex:1;padding:.45rem;background:var(--panel);border:none;cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--muted);font-family:inherit}
.seg-btn.active{background:var(--accent);color:#fff}

/* ---------- Invoice document ---------- */
.preview-wrap{display:flex;justify-content:center}
.invoice{
  width:100%;max-width:820px;background:#fff;color:#1f2937;
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:2.4rem 2.6rem;min-height:1000px;
}
.inv-header{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start}
.inv-brand{display:flex;gap:1rem;align-items:flex-start}
.logo-box{width:96px;height:96px;border:2px dashed #d1d5db;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.logo-box img{width:100%;height:100%;object-fit:contain}
.logo-box:not(.has-logo) img{display:none}
.print-render-clone .inv-brand{gap:1rem}
.print-render-clone .inv-brand .from-block:first-child{margin-left:0}
.logo-placeholder{font-size:.72rem;color:#9ca3af;text-align:center}
.from-block .ed{font-size:.85rem}
.from-block .ed:first-child{font-size:1.15rem;font-weight:800;color:#111827}

.inv-title-block{text-align:right;min-width:230px}
.inv-title{font-size:2.1rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.meta-table{margin-left:auto;margin-top:.6rem;font-size:.84rem;border-collapse:collapse}
.meta-table td{padding:.15rem .4rem}
.meta-table td:first-child{color:#6b7280;text-align:right;font-weight:600}
.meta-table td:last-child{text-align:right;min-width:110px}

.inv-parties{display:flex;justify-content:space-between;gap:2rem;margin:2rem 0 1.2rem}
.party{font-size:.86rem;max-width:48%}
.party.right{text-align:right}
.party-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);font-weight:800;margin-bottom:.25rem}
.party .ed:nth-child(2){font-weight:700;font-size:.95rem;color:#111827}

/* items */
.items{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.86rem}
.items thead th{background:var(--accent);color:#fff;padding:.6rem .7rem;text-align:left;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.items thead th:first-child{border-radius:7px 0 0 0}
.items thead th.col-x{border-radius:0 7px 0 0}
.col-qty,.col-rate,.col-amt{text-align:right;width:90px}
.col-x{width:34px}
.items tbody td{padding:.55rem .7rem;border-bottom:1px solid #eef1f4;vertical-align:top}
.items tbody td.num{text-align:right;white-space:nowrap}
.items .it-desc{min-height:1.2em}
.items .it-sub{font-size:.76rem;color:#9ca3af;display:block;min-height:1em}
.del-row{background:transparent;border:none;color:#cbd5e1;cursor:pointer;font-size:1rem}
.del-row:hover{color:#ef4444}

.inv-bottom{display:flex;justify-content:space-between;gap:2rem;margin-top:1.5rem}
.notes-block{max-width:55%;font-size:.82rem}
.notes-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);font-weight:800;margin:.8rem 0 .2rem}
.notes-label:first-child{margin-top:0}
.totals{min-width:280px;border-collapse:collapse;font-size:.9rem;height:fit-content}
.totals td{padding:.4rem .7rem}
.totals td:first-child{color:#6b7280}
.totals td:last-child{text-align:right;font-weight:600;min-width:120px}
.totals .grand td{border-top:2px solid var(--accent);font-size:1.15rem;font-weight:800;
  color:#111827;padding-top:.55rem}
.totals .grand td:first-child{color:var(--accent)}

.inv-footer{margin-top:2.5rem;text-align:center;font-size:.78rem;color:#9ca3af;
  border-top:1px solid #eef1f4;padding-top:1rem}

/* editable */
.ed{outline:none;border-radius:4px;transition:background .12s;min-width:20px;white-space:pre-wrap}
.ed:hover{background:rgba(99,102,241,.05)}
.ed:focus{background:rgba(99,102,241,.10);box-shadow:0 0 0 2px rgba(99,102,241,.25)}
.ed.muted{color:#6b7280}
.ed:empty:before{content:attr(data-ph);color:#c4cad3}

/* ===================================================================
   TEMPLATE VARIANTS — each one restructures the whole document
   =================================================================== */

/* ---------- MODERN (default): accent header + colored table ---------- */
.invoice.tpl-modern .inv-title{color:var(--accent)}

/* ---------- CLASSIC: centered, double-ruled, bordered, serif ---------- */
.invoice.tpl-classic{font-family:Georgia,"Times New Roman",serif;border:2px solid #111827;padding:2.2rem 2.4rem}
.invoice.tpl-classic .inv-header{flex-direction:column;align-items:center;text-align:center;gap:.4rem;
  border-bottom:3px double #111827;padding-bottom:1.3rem}
.invoice.tpl-classic .inv-brand{flex-direction:column;align-items:center;gap:.6rem}
.invoice.tpl-classic .from-block{text-align:center}
.invoice.tpl-classic .inv-title-block{text-align:center;min-width:0;margin-top:.4rem}
.invoice.tpl-classic .inv-title{color:#111827;letter-spacing:.16em;font-weight:700}
.invoice.tpl-classic .meta-table{margin:.5rem auto 0}
.invoice.tpl-classic .meta-table td:first-child{text-align:right}
.invoice.tpl-classic .inv-parties{border-bottom:1px solid #d1d5db;padding-bottom:1rem}
.invoice.tpl-classic .items thead th{background:#111827;color:#fff;border-radius:0;letter-spacing:.04em}
.invoice.tpl-classic .items tbody td{border-bottom:1px solid #d1d5db}
.invoice.tpl-classic .party-label,.invoice.tpl-classic .notes-label{color:#111827;font-weight:700}
.invoice.tpl-classic .totals .grand td{border-top-color:#111827}
.invoice.tpl-classic .totals .grand td:first-child{color:#111827}

/* ---------- MINIMAL: airy, hairline rules, ultra-light title ---------- */
.invoice.tpl-minimal{padding:3rem 3.2rem}
.invoice.tpl-minimal .inv-header{border-bottom:1px solid #e5e7eb;padding-bottom:1.8rem}
.invoice.tpl-minimal .logo-box{border:1px solid #eee}
.invoice.tpl-minimal .inv-title{font-weight:200;letter-spacing:.26em;color:#111827;font-size:1.7rem}
.invoice.tpl-minimal .from-block .ed:first-child{font-weight:600}
.invoice.tpl-minimal .party .ed:nth-child(2){font-weight:600}
.invoice.tpl-minimal .items thead th{background:transparent;color:#9ca3af;border-bottom:1px solid #111827;font-weight:600}
.invoice.tpl-minimal .items tbody td{border-bottom:1px solid #f3f4f6}
.invoice.tpl-minimal .party-label,.invoice.tpl-minimal .notes-label{color:#9ca3af;font-weight:600}
.invoice.tpl-minimal .totals .grand td{border-top:1px solid #111827;color:#111827;font-weight:700}
.invoice.tpl-minimal .totals .grand td:first-child{color:#111827}
.invoice.tpl-minimal .inv-footer{border-top:1px solid #f3f4f6}

/* ---------- BOLD: full-width accent banner + emphasized totals ---------- */
.invoice.tpl-bold{padding:0 2.6rem 2.4rem;overflow:hidden}
.invoice.tpl-bold .inv-header{background:var(--accent);color:#fff;margin:0 -2.6rem 1.8rem;
  padding:2.4rem 2.6rem;align-items:center}
.invoice.tpl-bold .from-block .ed,.invoice.tpl-bold .from-block .muted{color:rgba(255,255,255,.9)}
.invoice.tpl-bold .from-block .ed:first-child{color:#fff}
.invoice.tpl-bold .logo-box{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
.invoice.tpl-bold .logo-placeholder{color:#fff}
.invoice.tpl-bold .inv-title{color:#fff;font-size:2.7rem}
.invoice.tpl-bold .meta-table td:first-child{color:rgba(255,255,255,.85)}
.invoice.tpl-bold .meta-table td:last-child{color:#fff}
.invoice.tpl-bold .items thead th{background:var(--accent)}
.invoice.tpl-bold .totals{background:#f7f8ff;border-radius:12px;padding:.5rem 1rem}
.invoice.tpl-bold .totals .grand td{border-top:2px solid var(--accent);font-size:1.3rem}
.invoice.tpl-bold .party-label,.invoice.tpl-bold .notes-label{color:var(--accent)}

/* ---------- ELEGANT: accent side-stripe + tinted info boxes ---------- */
.invoice.tpl-elegant{border-left:9px solid var(--accent);font-family:Georgia,"Times New Roman",serif}
.invoice.tpl-elegant .inv-header{border-bottom:2px solid var(--accent);padding-bottom:1.3rem}
.invoice.tpl-elegant .inv-title{color:var(--accent);font-weight:400;letter-spacing:.12em}
.invoice.tpl-elegant .inv-parties{margin-top:1.6rem}
.invoice.tpl-elegant .party{background:#faf9fc;border:1px solid #ececf4;border-radius:12px;padding:.9rem 1.1rem;max-width:46%}
.invoice.tpl-elegant .party.right{text-align:left}
.invoice.tpl-elegant .items thead th{background:transparent;color:var(--accent);border-bottom:2px solid var(--accent);border-radius:0}
.invoice.tpl-elegant .items tbody td{border-bottom:1px solid #ececf4}
.invoice.tpl-elegant .party-label,.invoice.tpl-elegant .notes-label{color:var(--accent);font-weight:700}
.invoice.tpl-elegant .totals{background:#faf9fc;border:1px solid #ececf4;border-radius:12px;padding:.6rem 1rem;height:fit-content}
.invoice.tpl-elegant .totals .grand td{border-top:2px solid var(--accent);color:var(--accent)}
.invoice.tpl-elegant .totals .grand td:first-child{color:var(--accent)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
  background:#111827;color:#fff;padding:.7rem 1.2rem;border-radius:10px;font-size:.85rem;
  box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .3s;z-index:100;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Print ---------- */
@media print{
  .topbar,.panel,.no-print,#addItem,.toast{display:none !important}
  body{background:#fff}
  .layout{display:block;padding:0;max-width:none}
  .preview-wrap{display:block}
  .invoice{box-shadow:none;border-radius:0;max-width:none;width:100%;min-height:auto;padding:0}
  @page{margin:10mm 10mm 16mm}
}


/* ===================================================================
   RESPONSIVE — full reflow for tablets & phones
   =================================================================== */

/* Tablets / small laptops */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;padding:1rem;gap:1rem}
  .panel{position:static}
  .preview-wrap{overflow-x:auto}        /* never let the doc clip horizontally */
}

/* Phones (landscape) & small tablets */
@media(max-width:768px){
  .topbar{flex-direction:column;align-items:center;text-align:center;padding:.8rem;gap:.75rem}
  .brand{justify-content:center;text-align:center}
  .brand-text h1{font-size:1.05rem}
  .topbar-actions{width:100%;justify-content:center;gap:.5rem;flex-wrap:wrap;overflow-x:visible;padding-bottom:0}
  .topbar-actions::-webkit-scrollbar{display:none}
  .theme-swatches{margin-right:.1rem;justify-content:center}

  .invoice{padding:1.5rem 1.3rem;min-height:auto}
  .inv-header{flex-direction:column;gap:1.1rem}
  .inv-brand{gap:.8rem}
  .inv-title-block{text-align:left;min-width:0}
  .inv-title{font-size:1.7rem}
  .meta-table{margin-left:0}
  .meta-table td:first-child{text-align:left}
  .meta-table td:last-child{text-align:left}

  .inv-parties{flex-direction:column;gap:1.1rem}
  .party,.party.right{max-width:100%;text-align:left}

  .inv-bottom{flex-direction:column;gap:1.2rem}
  .notes-block{max-width:100%}
  .totals{min-width:0;width:100%}

  /* template-specific mobile padding fixes */
  .invoice.tpl-classic{padding:1.4rem 1.2rem}
  .invoice.tpl-minimal{padding:1.6rem 1.3rem}
  .invoice.tpl-bold{padding:0 1.2rem 1.6rem}
  .invoice.tpl-bold .inv-header{margin:0 -1.2rem 1.3rem;padding:1.5rem 1.2rem;flex-direction:column}
  .invoice.tpl-elegant .party{max-width:100%}
}

/* Phones (portrait) */
@media(max-width:480px){
  .brand-text small{display:none}
  .btn{padding:.45rem .6rem;font-size:.78rem}
  .invoice{padding:1.1rem .9rem}

  /* compact items table so all columns fit on a narrow screen */
  .items{font-size:.74rem}
  .items thead th,.items tbody td{padding:.4rem .3rem}
  .items .col-qty{width:34px}
  .items .col-rate{width:54px}
  .items .col-amt{width:66px}
  .items .col-x{width:24px}
  .items .it-sub{font-size:.68rem}
  .inv-title{font-size:1.5rem}
  .totals td{padding:.35rem .4rem}
  .totals .grand td{font-size:1.05rem}
}


/* ---------- SaaS additions ---------- */
a.brand{text-decoration:none;color:inherit}
.brand-logo{
  width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:1rem;font-weight:900
}
.plan-chip{
  display:inline-flex;align-items:center;justify-content:center;padding:.28rem .5rem;
  border-radius:999px;background:#e5e7eb;color:#475569;font-size:.68rem;font-weight:900;letter-spacing:.06em
}
.plan-chip.pro{background:#fef3c7;color:#92400e}
.pro-type small{display:block;font-size:.58rem;opacity:.8}
.seg-btn{line-height:1.05}
.inline-control{display:flex;gap:.4rem;align-items:center}
.inline-control .input{min-width:0}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.generator-alert{
  max-width:1320px;margin:.85rem auto 0;padding:.75rem 1rem;border:1px solid #86efac;
  background:#f0fdf4;color:#166534;border-radius:10px;font-size:.86rem
}
.generator-alert.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.payment-info{
  margin-top:1.5rem;padding:1rem;border:1px solid #e5e7eb;border-radius:10px;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.8rem;background:#f8fafc
}
.payment-info[hidden]{display:none}
.payment-info strong{display:block;color:var(--accent);margin-bottom:.35rem}
.payment-info img{width:90px;height:90px;object-fit:contain;border:1px solid #e5e7eb;background:#fff;padding:.2rem}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.7);z-index:200;display:grid;place-items:center;padding:1rem
}
.modal-backdrop[hidden]{display:none}
body.modal-open{overflow:hidden}
.auth-prompt{
  width:min(480px,100%);background:#fff;color:#1f2937;border-radius:18px;padding:1.6rem;
  box-shadow:0 24px 70px rgba(0,0,0,.35);position:relative
}
.auth-prompt h2{font-size:1.45rem;margin:.2rem 0 .7rem}
.auth-prompt p{color:#64748b}
.modal-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem!important;font-weight:800;color:var(--accent)!important}
.modal-close{position:absolute;right:.8rem;top:.6rem;border:0;background:transparent;font-size:1.7rem;cursor:pointer;color:#64748b}
.modal-actions{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.modal-actions .btn{text-decoration:none}
@media(max-width:600px){
  .generator-alert{margin:.75rem 1rem 0}
  .payment-info{align-items:flex-start;flex-direction:column}
}
@media print{
  .generator-alert,.modal-backdrop{display:none!important}
  .payment-info{break-inside:avoid}
}
.brand-logo img{width:100%;height:100%;display:block;object-fit:contain}
.brand-logo{width:44px;height:44px;flex:0 0 44px;display:block;font-size:0;background:transparent!important;box-shadow:none!important;padding:0!important}
.brand-logo img{filter:drop-shadow(0 8px 16px rgba(79,70,229,.18))}

/* Stable export layout: logo placeholders are editor-only. */
.print-render-clone .logo-box { border:0 !important; background:transparent !important; }
.print-render-clone .logo-placeholder { display:none !important; }
.print-render-clone .inv-header,
.print-render-clone .inv-parties,
.print-render-clone #itemsTable thead,
.print-render-clone #itemsBody tr,
.print-render-clone .inv-bottom,
.print-render-clone .payment-info,
.print-render-clone .inv-footer { break-inside:avoid; page-break-inside:avoid; }

/* Logo upload outline is editor-only; never include it in generated, downloaded, or printed output. */
.invoice.document-rendering .logo-box,
.print-render-clone .logo-box {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.invoice.document-rendering .logo-placeholder,
.print-render-clone .logo-placeholder {
  display:none !important;
}
.invoice.document-rendering .logo-box:not(.has-logo),
.print-render-clone .logo-box:not(.has-logo) {
  display:none !important;
}
@media print {
  .logo-box { border:0 !important; background:transparent !important; box-shadow:none !important; }
  .logo-placeholder { display:none !important; }
  .logo-box:not(.has-logo) { display:none !important; }
}