/* ==========================================================
   Invoice Generator editor — the premium layout (.ig), on top of the shared
   invoice.css. Only the site's tokens (app.css :root) are used, so the dark
   theme, contrast and RTL follow the rest of the site. The preview is the
   PDF template itself, on white paper in either theme.
   ========================================================== */
.ig{--ig-accent:var(--ink);--ig-ring:color-mix(in srgb,var(--ink) 16%,transparent);--ig-soft:color-mix(in srgb,var(--ink) 4%,var(--surface))}
.ig .inv-wrap{max-width:1360px}

/* ---------- Heading and notes ---------- */
.ig-head{margin:8px 0 16px}
.ig-head h1{margin:10px 0 6px}
.ig-head .lede{max-width:680px;margin:0}
.ig-banner{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 14px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:14px}
.ig-banner svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.ig-banner a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- The toolbar: type, design, colour, and the button ---------- */
.ig-toolbar{position:sticky;top:76px;z-index:20;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;
  margin:0 0 18px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:0 1px 2px rgba(20,24,31,.04),0 10px 30px rgba(20,24,31,.07)}
.ig-tool{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;padding:0;margin:0}
.ig-tool-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0}
.ig .ig-type{min-width:170px;font-weight:600}

.ig-design-list{display:flex;gap:8px;flex-wrap:wrap}
.ig-design{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:5px 5px 4px;border-radius:10px;border:1px solid transparent}
.ig-design:hover{background:var(--ig-soft)}
.ig-design.is-on{border-color:var(--ink);background:var(--ig-soft)}
.ig-design:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.ig-design-name{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.ig-design.is-on .ig-design-name{color:var(--ink)}

/* Each design drawn small: enough to tell them apart at a glance. */
.ig-thumb{position:relative;display:block;width:46px;height:60px;border-radius:4px;background:#fff;
  box-shadow:0 0 0 1px rgba(20,24,31,.12),0 2px 6px rgba(20,24,31,.08);overflow:hidden}
.ig-thumb i{position:absolute;display:block}
.ig-thumb i:nth-child(4){left:7px;right:7px;bottom:9px;height:14px;
  background:repeating-linear-gradient(#d9dbe0 0 2px,transparent 2px 5px)}
.ig-thumb-classic i:nth-child(1){left:7px;top:7px;width:15px;height:3px;background:#1c1c1c}
.ig-thumb-classic i:nth-child(2){left:7px;right:7px;top:15px;height:1.5px;background:var(--t)}
.ig-thumb-classic i:nth-child(3){left:7px;right:7px;top:24px;height:4px;background:var(--t)}
.ig-thumb-modern i:nth-child(1){left:0;top:0;bottom:0;width:4px;background:var(--t)}
.ig-thumb-modern i:nth-child(2){right:6px;top:7px;width:14px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--t) 22%,#fff)}
.ig-thumb-modern i:nth-child(3){left:9px;right:6px;top:24px;height:1.5px;background:var(--t)}
.ig-thumb-minimal i:nth-child(1){left:15px;right:15px;top:8px;height:3px;background:#1c1c1c}
.ig-thumb-minimal i:nth-child(2){left:7px;right:7px;top:17px;height:1px;background:#1c1c1c}
.ig-thumb-minimal i:nth-child(3){left:7px;right:7px;top:25px;height:1px;background:#9a9a9a}
.ig-thumb-compact i:nth-child(1){left:5px;right:5px;top:5px;height:12px;border:1px solid #c5c8cf;border-radius:1px;
  background:linear-gradient(90deg,transparent 32%,#c5c8cf 32% 34%,transparent 34% 66%,#c5c8cf 66% 68%,transparent 68%)}
.ig-thumb-compact i:nth-child(2){left:5px;right:5px;top:21px;height:3px;background:var(--t)}
.ig-thumb-compact i:nth-child(3){left:5px;right:5px;top:27px;height:1px;background:#d9dbe0}
.ig-thumb-bold i:nth-child(1){left:0;right:0;top:0;height:16px;background:var(--t)}
.ig-thumb-bold i:nth-child(2){left:6px;top:6px;width:14px;height:3px;background:#fff}
.ig-thumb-bold i:nth-child(3){right:6px;bottom:26px;width:16px;height:6px;border-radius:1px;background:#1c1c1c}

.ig-swatches{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-height:32px}
.ig-swatch{position:relative;width:26px;height:26px;border-radius:50%;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .12s}
.ig-swatch:hover{transform:scale(1.08)}
.ig-swatch.is-on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.ig-swatch:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.ig-swatch-custom{background:conic-gradient(#ef4444,#f59e0b,#84cc16,#10b981,#06b6d4,#6366f1,#d946ef,#ef4444);overflow:hidden}
.ig-swatch-custom input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}

.ig-go{margin-inline-start:auto;align-items:flex-end}
.ig-primary{display:inline-flex;align-items:center;gap:8px;font-size:15px!important;padding:12px 22px!important;border-radius:10px!important;
  box-shadow:0 1px 2px rgba(20,24,31,.12),0 6px 16px rgba(20,24,31,.16)}
.ig-primary svg{width:18px;height:18px}
.ig-cost{font-size:12px;color:var(--muted);max-width:260px;text-align:end;line-height:1.35}

/* ---------- The two columns ---------- */
.ig .ig-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px}
.ig .ig-form{gap:18px}

/* ---------- Numbered sections ---------- */
.ig-section{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:20px 22px 10px;margin:0;min-width:0;
  box-shadow:0 1px 2px rgba(20,24,31,.03)}
.ig-section-head{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.ig-section-head h2{font-family:var(--font-head);font-size:17px;font-weight:600;margin:0;color:var(--ink);letter-spacing:-.01em}
.ig-step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:13px;font-weight:700;
  background:var(--ink);color:var(--paper);font-variant-numeric:tabular-nums}

/* Fields: calmer borders, a clear focus ring. */
.ig .inv-field>span:first-child{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.ig input[type=text],.ig input[type=email],.ig input[type=date],.ig select,.ig textarea{
  border-color:var(--line);background:var(--surface);border-radius:9px;min-height:40px;transition:border-color .12s,box-shadow .12s}
.ig input[type=text]:hover,.ig input[type=email]:hover,.ig input[type=date]:hover,.ig select:hover,.ig textarea:hover{border-color:var(--line-2)}
.ig input:focus,.ig select:focus,.ig textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ig-ring)}
.ig .inv-readonly{border-style:dashed}
.ig-unit{font-weight:600;color:var(--muted);font-size:13px}

/* ---------- 1. Your business, with its logo ---------- */
.ig-logo{display:flex;gap:16px;align-items:center;margin:0 0 16px;padding:14px;border:1px dashed var(--line-2);border-radius:14px;background:var(--ig-soft)}
.ig-logo-drop{flex:0 0 auto;display:grid;place-items:center;gap:4px;width:150px;height:80px;border-radius:10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;text-align:center;padding:8px;transition:border-color .12s}
.ig-logo-drop:hover,.ig-logo-drop:focus-within{border-color:var(--ink);color:var(--ink)}
.ig-logo-drop svg{width:24px;height:24px}
.ig-logo-drop.has-logo{background:#fff}
.ig-logo-drop img{max-width:100%;max-height:64px;object-fit:contain}
.ig-logo-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.ig-logo-title{font-weight:600;font-size:14px;color:var(--ink)}
.ig-logo-actions{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px}
.ig-link{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ig-link-danger{color:var(--err)}

/* ---------- 4. Items: description across, figures beneath ---------- */
.ig .ig-lines{gap:8px}
.ig .inv-line-head{display:none}
.ig .inv-cell-label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.ig .inv-line{grid-template-columns:minmax(64px,.55fr) minmax(90px,.9fr) minmax(150px,1.5fr) minmax(92px,.85fr) auto;
  grid-template-areas:"desc desc desc desc act" "qty price tax amount act";
  gap:10px 10px;padding:12px 12px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.ig .inv-line:hover,.ig .inv-line:focus-within{border-color:var(--line-2);box-shadow:0 4px 14px rgba(20,24,31,.06)}
.ig .ig-lines.no-tax .inv-line{grid-template-columns:minmax(64px,.6fr) minmax(90px,1fr) minmax(92px,.9fr) auto;
  grid-template-areas:"desc desc desc act" "qty price amount act"}
.ig .inv-line .c-desc input{font-weight:600}
.ig .inv-line .c-amount{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:0;
  font-family:var(--font-head);font-size:15px;font-weight:600}
.ig .inv-line .c-amount bdi{display:flex;align-items:center;min-height:40px}
.ig .inv-line .c-act{flex-direction:column;justify-content:flex-start;gap:4px;padding-inline-start:4px;border-inline-start:1px solid var(--line)}
.ig .inv-icon{width:28px;height:28px;border-color:transparent;background:transparent}
.ig .inv-icon:hover:not(:disabled){border-color:var(--line-2);background:var(--ig-soft)}
.ig-tax{display:flex;gap:6px;align-items:center}
.ig-tax select{flex:1 1 auto;min-width:0}
.ig .inv-rate{flex:0 0 74px;gap:3px}
.ig .inv-rate input{text-align:end}
.ig .inv-rate b{font-weight:600;color:var(--muted)}
.ig-lines-foot{margin-top:14px!important}

.ig .ig-totals{max-width:360px;margin:18px 0 6px auto;padding:14px 16px;border-radius:12px;background:var(--ig-soft);border:1px solid var(--line);gap:6px}
.ig .ig-totals .strong{font-family:var(--font-head);font-size:19px;border-top-color:var(--line-2);padding-top:9px;margin-top:4px}

/* ---------- 5. The rarely needed: one fold, clearly labelled ---------- */
.ig-more{margin:2px 0 12px;border-top:1px solid var(--line);padding-top:10px}
.ig-more summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-2);padding:4px 0;margin-bottom:8px}

/* ---------- Getting the PDF (also in the toolbar) ---------- */
.ig-get{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px;border-radius:16px;
  background:var(--ig-soft);border:1px solid var(--line)}

/* ---------- The preview: paper on a desk, kept in view ---------- */
.ig .ig-preview{top:250px}
.ig-preview-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;font-size:13px}
.ig-live{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.ig-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.ig-preview-meta{color:var(--muted);font-weight:600}
.ig-desk{max-height:calc(100vh - 300px);min-height:420px;overflow:auto;overscroll-behavior:contain;padding:18px;border-radius:18px;background:linear-gradient(180deg,var(--sunken),color-mix(in srgb,var(--sunken) 70%,var(--line)));border:1px solid var(--line)}
.ig .ig-paper{border-radius:3px;box-shadow:0 1px 3px rgba(20,24,31,.12),0 18px 40px rgba(20,24,31,.16)}

/* ---------- Narrower screens ---------- */
@media (max-width:1100px){
  .ig-go{margin-inline-start:0;align-items:flex-start;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center}
  .ig-cost{text-align:start}
}
@media (max-width:860px){
  .ig-toolbar{position:static;padding:12px 14px}
  .ig-desk{max-height:none;min-height:0}
  .ig .ig-grid{grid-template-columns:1fr}
  .ig .ig-preview{top:auto}
  .ig-section{padding:16px 16px 6px}
  .ig .inv-line{grid-template-columns:1fr 1fr;grid-template-areas:"desc desc" "qty price" "tax tax" "amount act"}
  .ig .ig-lines.no-tax .inv-line{grid-template-columns:1fr 1fr;grid-template-areas:"desc desc" "qty price" "amount act"}
  .ig .inv-line .c-act{flex-direction:row;justify-content:flex-end;border:0;padding:0;align-self:end}
  .ig .inv-line .c-amount{align-items:flex-start}
  .ig-logo{flex-direction:column;align-items:flex-start}
}

/* Fields in a row line up on their inputs, whatever their labels' length. */
.ig .inv-row{align-items:end}

/* ---------- The design gallery (17 designs: a button, then a grid) ---------- */
.ig-design-pick{position:relative}
.ig-current{display:flex;align-items:center;gap:10px;font:inherit;cursor:pointer;padding:5px 12px 5px 5px;min-height:46px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink);text-align:start}
.ig-current:hover,.ig-current[aria-expanded=true]{border-color:var(--ink)}
.ig-current img{width:40px;height:34px;object-fit:cover;object-position:top;border-radius:5px;box-shadow:0 0 0 1px var(--line)}
.ig-current-name{font-weight:700;font-size:14px}
.ig-current-change{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ig-current-change svg{width:15px;height:15px}
.ig-gallery{position:absolute;top:calc(100% + 10px);inset-inline-start:0;z-index:40;width:min(860px,calc(100vw - 48px));
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:16px;max-height:min(70vh,640px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(20,24,31,.22)}
.ig-gallery-item{display:flex;flex-direction:column;gap:7px;cursor:pointer;padding:6px;border-radius:12px;border:2px solid transparent}
.ig-gallery-item img{width:100%;height:auto;aspect-ratio:240/210;object-fit:cover;object-position:top;border-radius:6px;
  background:#fff;box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(20,24,31,.08);transition:transform .15s,box-shadow .15s}
.ig-gallery-item:hover img{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 10px 22px rgba(20,24,31,.14)}
.ig-gallery-item span{font-size:13px;font-weight:600;color:var(--ink-2);text-align:center}
.ig-gallery-item.is-on{border-color:var(--ink)}
.ig-gallery-item.is-on span{color:var(--ink)}
.ig-gallery-item:focus-within{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:860px){.ig-gallery{position:fixed;inset:auto 12px 12px 12px;top:auto;width:auto;max-height:70vh}}

/* ---------- The status bar: where this invoice lives, and "New invoice" ---------- */
.ig-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin:0 0 14px;padding:10px 12px 10px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ig-bar-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--ink-2);min-width:0}
.ig-bar-status svg{width:18px;height:18px;flex:0 0 auto;color:var(--ok)}
.ig-bar-status a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ig-bar-actions{display:flex;flex-wrap:wrap;gap:8px}
.ig-bar-actions .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px}
.ig-new{border-color:var(--ink)!important;color:var(--ink)!important;font-weight:700}
.ig-new svg{width:16px;height:16px}

/* ---------- Sections that fold to one line ---------- */
.ig-fold-head{flex-wrap:wrap}
.ig-fold-head h2{flex:0 0 auto}
.ig-summary{flex:1 1 160px;min-width:0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-fold-btn{margin-inline-start:auto;font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 14px;cursor:pointer}
.ig-fold-btn:hover{border-color:var(--ink)}
.ig-section.is-folded{padding-bottom:16px}
.ig-section.is-folded .ig-section-head{margin-bottom:0}
.ig-section.is-folded .ig-step{background:var(--sunken);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}


/* ---------- After the button: a card that floats in view wherever the visitor is ---------- */
.ig-toast{position:fixed;z-index:60;inset-inline:0;bottom:max(18px,env(safe-area-inset-bottom));margin-inline:auto;width:min(560px,calc(100% - 32px));box-sizing:border-box;
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-inline-start:4px solid var(--ink-2);box-shadow:0 2px 6px rgba(20,24,31,.12),0 18px 44px rgba(20,24,31,.22);
  animation:ig-toast-in .22s ease-out}
.ig-toast p{margin:0;flex:1;font-size:14px;line-height:1.4}
.ig-toast > svg{width:22px;height:22px;flex:none}
.ig-toast .btn{flex:none;white-space:nowrap}
.ig-toast.is-ok{border-inline-start-color:var(--ok)}
.ig-toast.is-ok > svg{color:var(--ok)}
.ig-toast.is-err{border-inline-start-color:var(--err)}
.ig-toast.is-err > svg{color:var(--err)}
.ig-toast-x{flex:none;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.ig-toast-x:hover{background:var(--sunken);color:var(--ink)}
.ig-spin{flex:none;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--ink);animation:ig-spin .8s linear infinite}
@keyframes ig-spin{to{transform:rotate(360deg)}}
@keyframes ig-toast-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.ig-toast{animation:none}.ig-spin{animation-duration:2.4s}}
/* The app's own "new version" card sits in the same spot; the invoice comes first, the update is offered again on the next page. */
body:has(.ig-toast) .cv-pwa-toast{display:none}
@media (max-width:520px){.ig-toast{flex-wrap:wrap}.ig-toast p{flex-basis:calc(100% - 70px)}}

/* ---------- The sample's "make it yours" note ---------- */
.ig-sample{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin:0;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--warn) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));font-size:14px;color:var(--ink)}
.ig-sample .btn{padding:7px 14px;font-size:13px}