/* ============================================================
   Geenius.space — invoice generator
   Loads AFTER ../../assets/css/style.css and reuses its tokens,
   buttons, header and footer. Everything here is tool-specific.

   The paper (.paper) deliberately does NOT use theme tokens: it
   is a printed document, so it stays light in dark mode and
   prints the same in both.
   ============================================================ */

.tool-page { background: var(--bg); }

[hidden] { display: none !important; }

/* ---------- header ---------- */
.tool-head { background: var(--card); border-bottom: 3px solid var(--border); }
.tool-head .head-inner { padding-block: 14px; gap: 16px; }
.crumb { margin-right: auto; font-size: 15px; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--pink); }
.crumb span { opacity: .5; margin-inline: 4px; }
.crumb strong { color: var(--ink); font-weight: 700; }
.btn-sm { min-height: 44px; padding: 9px 18px; font-size: 14.5px; border-width: 2.5px; }

/* ---------- hero ---------- */
.tool-hero {
  background: var(--hero); border-bottom: 4px solid var(--border);
  padding-block: clamp(28px, 4vw, 44px) clamp(26px, 3.5vw, 40px);
}
.tool-hero h1 { font-size: clamp(27px, 5.2vw, 58px); font-weight: 900; letter-spacing: -.035em; margin-bottom: 14px; }
.tool-lede { max-width: 620px; margin-bottom: 20px; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.5; opacity: .86; }

/* ---------- layout ---------- */
.tool-main { padding-block: clamp(24px, 3.5vw, 40px) clamp(40px, 5vw, 64px); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 40px; align-items: start; }
.form-col { display: flex; flex-direction: column; gap: 22px; }
/* clears the sticky header rather than the top of the window */
.preview-col { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--head-h) + 20px); }

.tabs-bar, .mobile-bar, .sheet-note { display: none; }

/* ---------- form cards ---------- */
.fcard {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--card); border: 3px solid var(--border); border-radius: 22px;
  padding: clamp(18px, 2.4vw, 24px); box-shadow: var(--shadow);
}
.fcard h2 { font-size: clamp(18.5px, 1.8vw, 21px); font-weight: 800; letter-spacing: -.02em; }
.fcard-sub { margin-top: -8px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

.stack { display: flex; flex-direction: column; gap: 14px; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.field label, .field-label {
  font-family: var(--display); font-size: 12.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.field label i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .8; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea, select {
  width: 100%; min-height: 44px; padding: 10px 13px;
  border: 2px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.4;
}
textarea { resize: vertical; min-height: 64px; }
select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5l6 6 6-6' stroke='%235A5E88' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; }
::placeholder { color: var(--muted); opacity: .62; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
input:disabled { opacity: .45; cursor: not-allowed; }
.field:has(input:disabled) label { opacity: .5; }

.check { display: flex; align-items: center; gap: 11px; margin: 0; }
.check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 0;
  border: 2.5px solid var(--border); border-radius: 7px; background: transparent; cursor: pointer; }
.check input:checked { background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 12.6l4.8 4.6L19.5 7' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.check label { font-size: 15px; color: var(--ink); cursor: pointer; }

/* logo / QR drop zones */
.biz-top, .bank-top { display: flex; gap: 18px; align-items: flex-start; }
.biz-top .stack, .bank-top .stack { flex-grow: 1; min-width: 0; }
.dropzone { position: relative; flex: none; width: 128px; }
.dropzone.dz-sm { width: 118px; }
.dropzone input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100px; cursor: pointer; }
.dropzone input:focus-visible + label { outline: 3px solid var(--pink); outline-offset: 2px; }
.dropzone label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 100px; padding: 8px; border: 3px dashed var(--tease); border-radius: 16px;
  background: var(--bg); color: var(--muted); text-align: center; cursor: pointer;
  font-family: var(--display); font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.dropzone.dz-sm label { height: 118px; }
.dropzone img { max-height: 76px; width: auto; object-fit: contain; }
.dz-clear { display: block; width: 100%; margin-top: 8px; padding: 4px; border: 0; background: none;
  color: var(--muted); font-family: var(--body); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.dz-clear:hover { color: var(--pink); }

/* line items */
.line {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; margin-bottom: 14px;
  border: 2px solid var(--chip-border); border-radius: 16px; background: var(--bg);
}
.line-top { display: flex; align-items: flex-end; gap: 12px; }
.line-top .field { flex-grow: 1; min-width: 0; }
.line-remove {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 2px solid var(--chip-border); border-radius: 12px;
  background: var(--card); color: var(--muted); cursor: pointer;
}
.line-remove:hover { color: var(--pink); border-color: var(--pink); }
.line-nums { display: grid; grid-template-columns: 90px repeat(3, minmax(0, 1fr)); gap: 12px; }
.line-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 2px solid var(--chip-border);
}
.line-total span { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--muted); }
.line-total strong { font-family: var(--display); font-size: 19px; font-weight: 900; }

.add-line {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 48px; padding: 12px 20px; border: 2.5px dashed var(--tease); border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-size: 15.5px; font-weight: 700;
}
.add-line:hover { border-color: var(--pink); color: var(--pink); }

/* totals box */
.totals-box {
  display: flex; flex-direction: column; gap: 8px; margin: 0;
  padding: 16px 18px; border: 2px solid var(--chip-border); border-radius: 14px; background: var(--chip-bg);
}
.totals-box div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.totals-box dt { font-size: 14.5px; color: var(--muted); }
.totals-box dd { margin: 0; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); }
.totals-box .grand { padding-top: 10px; border-top: 2px solid var(--chip-border); }
.totals-box .grand dt { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); }
.totals-box .grand dd { font-size: 26px; font-weight: 900; color: var(--hi); }

/* look */
.templates { display: flex; gap: 18px; }
.templates button { display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-family: var(--display); font-size: 13px; font-weight: 700; }
.templates button[aria-checked="true"] { color: var(--ink); }
.tpl-thumb { display: block; width: 84px; height: 108px; border-radius: 8px; background: #fff;
  border: 2px solid var(--border); }
.templates button[aria-checked="true"] .tpl-thumb { border: 3px solid var(--pink); }
.swatches { display: flex; flex-direction: column; gap: 10px; }
.swatches > div { display: flex; gap: 16px; align-items: center; }
.swatches button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sw); cursor: pointer; }
.swatches button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--sw); }

/* ---------- actions ---------- */
.actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 3px solid var(--border); border-radius: 999px;
  padding: 12px 14px; box-shadow: var(--shadow);
}
.actions .btn { min-height: 52px; padding-inline: 22px; font-size: 16.5px; }
.link-btn { margin-left: auto; margin-right: 8px; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--muted); }
.link-btn:hover { color: var(--pink); }
.noscript { padding: 24px; border: 3px dashed var(--tease); border-radius: 16px; color: var(--muted); }

/* ============================================================
   THE PAPER — fixed light palette, identical on screen and print
   ============================================================ */
.paper {
  --accent: #FF2E88;
  --p-ink: #16193B;
  --p-soft: #5A5E88;
  --p-rule: #ECE7D8;
  --p-tint: #FFFBF0;

  width: 100%; background: #fff; color: var(--p-ink);
  border: 3px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
  padding: 38px 36px 30px; display: flex; flex-direction: column; gap: 22px;
  font-size: 13.5px; line-height: 1.55;
}
.paper h1, .paper h2, .paper h3, .paper strong, .paper th, .paper .amt { font-family: var(--display); }

.p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.p-id { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-logo { width: 46px; height: 46px; border-radius: 13px; background: var(--accent); }
.p-logo.has-img { background: none; width: auto; height: 52px; max-width: 190px; border-radius: 0; }
.p-logo.has-img img { height: 52px; width: auto; object-fit: contain; }
.p-biz-name { font-size: 17px; font-weight: 800; }
.p-biz-lines { font-size: 12.5px; line-height: 1.5; color: var(--p-soft); }
.p-meta { text-align: right; flex: none; }
.p-meta .word { display: block; font-size: 28px; font-weight: 900; letter-spacing: .1em; }
.p-meta dl { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--p-soft); }
.p-meta dl div { display: flex; gap: 6px; justify-content: flex-end; }
.p-meta dt, .p-meta dd { margin: 0; }
.p-meta dd { color: var(--p-ink); }

.p-billto { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--p-tint); border-radius: 8px; }
.p-kick { font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--p-soft); }
.p-billto .nm { font-size: 15px; font-weight: 800; }
.p-billto .ln { font-size: 12.5px; line-height: 1.5; color: var(--p-soft); }

.paper table { width: 100%; border-collapse: collapse; }
.paper th {
  text-align: right; padding-bottom: 8px; border-bottom: 2px solid var(--p-ink);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft);
}
.paper th:first-child, .paper td:first-child { text-align: left; }
.paper td { padding: 11px 0; border-bottom: 1px solid var(--p-rule); font-size: 13.5px; color: var(--p-soft); vertical-align: top; }
.paper td:first-child { color: var(--p-ink); }
.paper td:last-child { text-align: right; font-weight: 600; color: var(--p-ink); }
.paper td:not(:first-child) { text-align: right; white-space: nowrap; }
.paper th:not(:first-child), .paper td:not(:first-child) { padding-left: 14px; }
.paper th:first-child { width: 50%; }

.p-totals { display: flex; justify-content: flex-end; }
.p-totals dl { width: 290px; max-width: 100%; margin: 0; }
.p-totals div { display: flex; justify-content: space-between; gap: 30px; padding: 6px 0; }
.p-totals dt, .p-totals dd { margin: 0; font-family: var(--display); font-size: 13.5px; font-weight: 600; }
.p-totals .grand { margin-top: 8px; padding-top: 12px; gap: 20px; border-top: 2px solid var(--p-ink); }
/* "Quotation total" is long enough to wrap and drag the amount with it */
.p-totals .grand dt, .p-totals .grand dd { white-space: nowrap; }
.p-totals .grand dt { font-size: 16px; font-weight: 900; }
.p-totals .grand dd { font-size: 20px; font-weight: 900; color: var(--accent); }

.p-pay { display: flex; gap: 16px; padding: 16px; background: var(--p-tint); border-radius: 8px; }
.p-pay .lines { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.p-pay .lines span { font-size: 12.5px; line-height: 1.6; }
.p-pay .qr { width: 74px; height: 74px; flex: none; border-radius: 8px; overflow: hidden; }
.p-pay .qr img { width: 100%; height: 100%; object-fit: contain; }

.p-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.p-notes p { font-size: 12px; line-height: 1.55; color: var(--p-soft); white-space: pre-line; }
/* The watermark. On screen it trails the content; in print it is pinned to the
   bottom left of the sheet, where the browser's own footer used to sit. */
.p-made { margin-top: auto; padding-top: 10px; font-size: 10.5px; color: #A8A4B8; text-align: left; }

/* template variants */
.paper.t-classic { padding-top: 32px; }
.paper.t-classic .p-head { flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding-bottom: 18px; border-bottom: 3px double var(--p-ink); }
.paper.t-classic .p-id { align-items: center; }
.paper.t-classic .p-meta { text-align: center; }
.paper.t-classic .p-meta dl div { justify-content: center; }
.paper.t-classic .p-meta .word { letter-spacing: .3em; font-size: 22px; }
.paper.t-classic .p-billto, .paper.t-classic .p-pay { background: none; border: 1px solid var(--p-rule); }

.paper.t-compact { padding: 26px 26px 22px; gap: 14px; font-size: 12.5px; }
.paper.t-compact .p-meta .word { font-size: 22px; }
.paper.t-compact .p-logo { width: 38px; height: 38px; }
.paper.t-compact td { padding: 7px 0; font-size: 12.5px; }
.paper.t-compact .p-billto, .paper.t-compact .p-pay { padding: 10px 12px; }

/* ---------- the outro band ---------- */
.outro {
  border-top: 4px solid var(--border); background: var(--card);
  padding-block: clamp(46px, 5.5vw, 78px); text-align: center;
}
.outro h2 { font-size: clamp(27px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.03em; }
.outro p { max-width: 560px; margin: 16px auto 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; color: var(--muted); }
.outro p:last-child { margin-top: 28px; }

/* ---------- the sheet: the paper drawn exactly as it prints ----------
   A4 at 96dpi is 794px wide and the print margin is 12mm, which is about 45px.
   Render the preview at those numbers and scale the whole thing down, and what
   a phone shows is literally the PDF rather than a phone-shaped approximation
   of it. invoice.js sets the scale and the host height, because CSS cannot
   divide one element's width by another's. */
.sheet-fit { overflow: hidden; width: 100%; }
.sheet-fit .paper,
.sheet-fit .paper.t-classic,
.sheet-fit .paper.t-compact {
  width: 794px; flex: none; transform-origin: top left;
  padding: 45px 45px 52px; border-radius: 0; font-size: 14.7px;
}
.sheet-fit .paper.t-compact { font-size: 13.4px; }
/* a full A4 page, 1123px tall, so the sheet shows the real amount of white
   space below the content and the watermark sits where it will actually print */
.sheet-fit .paper { position: relative; min-height: 1123px; padding-bottom: 60px; }
.sheet-fit .p-made { position: absolute; left: 45px; right: 45px; bottom: 26px; margin: 0; padding: 0; }
.sheet-note { margin-top: -6px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---------- breakpoints ----------
   Every one of these is scoped to `screen`. An A4 page at 12mm margins is about
   718 CSS px, so an unscoped max-width query would fire while printing and give
   the PDF a phone layout. That is exactly the bug that made the preview and the
   download disagree. */
@media screen and (max-width: 1100px) {
  /* minmax(0,...) rather than 1fr: a grid item's automatic minimum is its
     content, and the sheet below is 794px wide on purpose. Without this the
     column refuses to shrink and the whole page scrolls sideways. */
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-col { position: static; min-width: 0; }
}

@media screen and (max-width: 900px) {
  .crumb { display: none; }
  .wide-only { display: none; }   /* the preview is a tab down here, not "on the right" */
  .head-actions { margin-left: auto; }   /* .crumb was the spacer and it is gone */

  /* The bar is the sticky part, bled out to the screen edges and opaque, so the
     form scrolls underneath it instead of showing through the pill. It parks
     directly below the header, whose height main.js keeps in --head-h. */
  .tabs-bar {
    display: block; position: sticky; top: var(--head-h); z-index: 25;
    margin: 0 calc(var(--gutter) * -1) 20px;
    padding: 10px var(--gutter) 12px;
    background: var(--bg);
    border-bottom: 2px solid var(--nav-pill-border);
  }
  .tabs {
    display: flex; gap: 4px; padding: 5px;
    border-radius: 999px; background: var(--nav-pill); border: 2px solid var(--nav-pill-border);
  }
  .tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--muted); }
  .tabs button[aria-selected="true"] { background: var(--ink); color: var(--btn1-fg); }

  .form-col[hidden], .preview-col[hidden] { display: none; }
  .actions { display: none; }
  .tool-main { padding-bottom: 104px; }

  .mobile-bar {
    display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 20;
    padding: 14px var(--gutter) 18px; background: var(--card); border-top: 3px solid var(--border);
  }
  .mobile-bar .btn { flex-grow: 1; }
  .icon-btn { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none;
    border: 2.5px solid var(--border); border-radius: 999px; background: none; color: var(--ink); cursor: pointer; }

  .sheet-note { display: block; }
  .row-2, .line-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz-top, .bank-top { flex-direction: column; }
  .dropzone, .dropzone.dz-sm { width: 100%; }
  /* No paper rules here on purpose. Down here the preview is a scaled A4
     sheet, so it keeps the printed layout at every width. */
}

@media screen and (max-width: 520px) {
  .templates { gap: 12px; }
  .tpl-thumb { width: 64px; height: 84px; }
}

/* ---------- print: the paper, and only the paper ---------- */
@media print {
  /* margin:0 is doing two jobs. It gives the paper its own margins back (as
     padding, below), and it is what makes Chrome and Edge drop their built-in
     header and footer: the date, the page URL and "Page 1 of 1". With no page
     margin there is nowhere for them to print. */
  @page { size: A4; margin: 0; }

  .site-head, .tool-hero, .tabs-bar, .form-col, .actions, .mobile-bar,
  .outro, .site-foot, .skip-link, .sheet-note { display: none !important; }

  html, body { background: #fff !important; }
  .tool-main { padding: 0 !important; }
  .tool-main .wrap { max-width: none; padding: 0; }
  .tool-grid { display: block; }
  .preview-col { display: block; position: static; gap: 0; }
  .preview-col[hidden] { display: block !important; }

  /* undo the scaled sheet: the real page is already A4 */
  #paper-host { overflow: visible; height: auto !important; }

  /* .sheet-fit is on the host whenever the window is under 900px, and its
     rules have to be undone here or they follow the paper onto the page. The
     min-height is the one that bites: a full A4 sheet is 1123px, so the paper
     printed at EXACTLY the page height and the smallest rounding tipped it onto
     a second, blank sheet. On paper the page itself supplies the height. */
  .paper, .paper.t-classic, .paper.t-compact, .sheet-fit .paper {
    width: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: 12mm 12mm 16mm; color: #16193B;
    transform: none !important;
  }
  .paper { font-size: 11pt; }
  .paper.t-compact { font-size: 10pt; }
  .paper, .paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .paper table { break-inside: auto; }
  .paper tr { break-inside: avoid; }
  .p-pay, .p-notes, .p-totals { break-inside: avoid; }

  /* the watermark sits in the bottom margin, where the browser footer was */
  .p-made, .sheet-fit .p-made {
    position: fixed; left: 12mm; right: auto; bottom: 7mm; margin: 0; padding: 0;
  }
}