/* AdNeed Platform (Site 1) — Bill Maker / Invoice Maker (CP12)
   -------------------------------------------------------------------
   Reuses .auth-card--tool / .field-label / .btn / .alert / .tool-note
   from qr-tool.css + adneed.css (same shell as Card Maker/QR Maker) —
   this file only adds what's actually new: the pack/price row, the
   live-search dropdown, the line-item table, and the two print
   layouts (A4 for Invoice Maker, narrow vertical list for Bill
   Maker). Screen and print rules are kept in the same file, gated by
   @media print, so both tools' JS can render into the SAME preview
   element on screen and on paper. */

/* Tool title + AdCredits price/pack pill, side by side — per the "all
   credit prices should show next to the tool name at the top" request,
   the price row now sits inline with the <h1> instead of on its own
   line below it. Wraps to its own line under the title on narrow
   screens rather than squeezing/overlapping it. */
.billing-tool-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 6px;
}
.billing-tool-title-row .qr-tool-title {
  margin: 0;
}
.billing-tool-price-row {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.billing-tool-title-row .billing-tool-price-row {
  margin-bottom: 0;
}

/* ---------- Full-bleed tool layout (Bill Maker / Invoice Maker) ----------
   The generic .auth-card--tool box (shared with QR Maker/Card Maker) is
   left exactly as-is for those tools; this modifier ONLY applies to Bill
   Maker/Invoice Maker (added alongside .auth-card--tool in their own
   markup) so the tool itself uses the full available page width instead
   of sitting inside a narrow centered card, per the "use full screen, not
   a box" request. Spacing is also tightened throughout (see the reduced
   .billing-section / .billing-row / .billing-editor-grid values below) so
   a full-width layout doesn't just mean more empty space between fields. */
.auth-card--tool-full {
  max-width: 1440px;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 14px 14px 40px;
}
@media (min-width: 900px) {
  .auth-card--tool-full { padding: 20px 28px 48px; }
}
/* Invoice Maker / Bill Maker: the outer .auth-wrap still applies its normal
   center-a-boxed-card padding (24px on every side), which on top of
   .auth-card--tool-full's own padding left a lot of dead space down
   both edges for a tool that's meant to run full-bleed. Trim it back
   on this page specifically. */
body.tool-full-bleed .auth-wrap { padding: 10px; }
@media (min-width: 900px) {
  body.tool-full-bleed .auth-wrap { padding: 16px; }
}
body.tool-full-bleed .auth-card--tool-full { padding: 10px 10px 32px; }
@media (min-width: 900px) {
  body.tool-full-bleed .auth-card--tool-full { padding: 14px 18px 40px; }
}
.billing-pack-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EAF6FB;
  border: 1px solid #C7E8F3;
  color: var(--blue-700, #0B5E80);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}
.billing-pack-pill.billing-pack-empty {
  background: #FDECEC;
  border-color: #F5C6C6;
  color: var(--error, #B3261E);
}

/* ---------- Category picker (first run only) ---------- */
.billing-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 10px 0 18px;
}
.billing-category-btn {
  border: 1px solid var(--border, #E2E5EA);
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.billing-category-btn:hover { border-color: #C9791A; }

/* ---------- Layout: form column + printable preview column ---------- */
/* min-width:0 on both tracks is the actual fix for the whole-page side-
   scroll bug: a bare `minmax(320px, 1fr)` still won't let a grid item
   shrink below its CONTENT's intrinsic width (a wide table, a long
   unbreakable value) — only below 320px explicitly. Auto min-size
   traps the grid at content width and pushes the page into horizontal
   scroll instead of wrapping. min-width:0 lets each column actually
   shrink to the grid track and pushes overflow-handling down onto the
   items table itself (see .billing-items-table-wrap below). */
.billing-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}
.billing-editor-grid > * { min-width: 0; }
@media (max-width: 880px) {
  .billing-editor-grid { grid-template-columns: 1fr; }
}

.billing-section {
  margin-bottom: 12px;
}

.billing-row {
  display: flex;
  gap: 8px;
}
.billing-row > * { flex: 1; }

/* ---------- Live-search field ---------- */
.billing-search-field {
  position: relative;
}
.billing-suggest-dropdown {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border, #E2E5EA);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 25, 40, 0.12);
  max-height: 220px;
  overflow-y: auto;
}
.billing-suggest-row {
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid #F0F1F4;
}
.billing-suggest-row:last-child { border-bottom: none; }
.billing-suggest-row:hover,
.billing-suggest-row.active { background: #FFF6E9; }
.billing-suggest-row .billing-suggest-meta {
  color: var(--text-muted, #7B8290);
  font-size: 11.5px;
  margin-left: 6px;
}
.billing-suggest-row .billing-suggest-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #EAF6FB;
  color: var(--blue-700, #0B5E80);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
}

/* ---------- Line-item table (screen) ---------- */
/* No horizontal scroll at ANY width: the table lays out normally down to
   ~600px, then below that each row becomes its own little stacked card
   (table/thead/tbody/tr/td all switched to block) with each field
   labelled from its own data-label attribute, so nothing gets clipped,
   scrolled sideways, or hidden off-screen on a phone. */
.billing-items-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
  table-layout: fixed;
}
.billing-items-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #7B8290);
  padding: 6px 4px;
  border-bottom: 1px solid var(--border, #E2E5EA);
}
.billing-items-table td {
  padding: 6px 4px;
  border-bottom: 1px solid #F0F1F4;
  vertical-align: top;
  max-width: 0; /* forces the fixed-layout column to respect its share instead of growing to its input's content */
}
.billing-items-table input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.billing-items-table input:focus {
  border-color: #C9791A;
  background: #fff;
}

/* Chrome/Android tints autofilled fields (e.g. a remembered customer
   address) with its own blue highlight by default, which looked like a
   layout glitch sitting on top of the form. Force it back to the normal
   field background/text color on every Bill Maker / Invoice Maker input. */
.auth-card--tool-full input:-webkit-autofill,
.auth-card--tool-full input:-webkit-autofill:hover,
.auth-card--tool-full input:-webkit-autofill:focus {
  -webkit-text-fill-color: #14161C;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 9999s ease-in-out 0s;
}
.billing-item-remove {
  background: none;
  border: none;
  color: var(--error, #B3261E);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}
.billing-add-item-btn { margin-top: 8px; width: 100%; justify-content: center; }

@media (max-width: 600px) {
  .billing-items-table, .billing-items-table thead, .billing-items-table tbody {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .billing-items-table th { display: none; }
  .billing-items-table thead { display: none; }
  /* The remove (X) button used to be `position:absolute; top:4px; right:4px`
     inside the card, anchored to the card's own padding box — on a short
     card (one line of "ITEM" label + input right at the top) that put the
     button directly on top of that first row's text instead of clear of
     it, which is the "X sits on top of the Item label" bug. Turning the
     card itself into a column flexbox and pulling the button to the FRONT
     with `order` instead puts it on its own line, right-aligned, above
     every field — normal document flow, so it can never overlap anything
     no matter how tall or short the card's content is. */
  .billing-items-table tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border, #E2E5EA);
    border-radius: 10px;
    padding: 6px 10px 10px;
    margin-bottom: 10px;
    background: #FAFBFC;
  }
  .billing-items-table td {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: none;
    padding: 6px 0;
    width: 100%;
    max-width: 100%;
  }
  .billing-items-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex: 0 0 64px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #7B8290);
  }
  .billing-items-table td.billing-search-field { position: relative; }
  .billing-items-table td.item-amount::before { content: "Amount"; }
  .billing-items-table td.item-amount { font-weight: 700; }
  /* On desktop these inputs sit inside a bordered table (row/column lines
     already make the grid of cells obvious), so a transparent border/
     background reads as "clean", not "broken" — see the base
     .billing-items-table input rule above. That same transparency inside
     THIS card layout left every field with zero visual boundary next to
     its own bold label, which is indistinguishable from plain, non-
     editable text at a glance. Restore a normal, always-visible input
     look here specifically. */
  .billing-items-table input {
    border: 1px solid var(--border, #E2E5EA);
    background: #fff;
  }
  /* Remove cell: own line, pinned right, above the rest of the card. */
  .billing-items-table td:last-child {
    order: -1;
    justify-content: flex-end;
    align-self: stretch;
    padding: 0 0 4px;
    border-bottom: 1px dashed #E7E9ED;
    margin-bottom: 4px;
  }
  .billing-items-table td:last-child::before { content: none; }
  .billing-item-remove {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FDECEC;
    font-size: 16px;
  }
}

.billing-totals {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 13.5px;
}
.billing-totals .billing-grand-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-100, #14161C);
}

.billing-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .billing-actions-row { flex-direction: column; }
  .billing-actions-row .btn { width: 100%; justify-content: center; }
}

/* Invoice Maker (5 buttons: Save/Download/Share/Print/New) and Bill Maker
   (3 buttons) both carry more actions than the shared .floating-action-bar
   default in dashboard.css was ever sized for (that default was built for
   a single Save button). Stacked full-width per the generic mobile rule
   above, 5 buttons alone made the fixed bottom bar roughly 5 rows tall —
   "covering half the screen" on a phone. Scoped to this one combination
   of classes specifically so the shared default elsewhere (onboarding
   wizard's single button, etc.) is untouched. */
@media (max-width: 600px) {
  .billing-actions-row.floating-action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    gap: 8px;
  }
  .billing-actions-row.floating-action-bar .btn {
    width: 100%;
    font-size: 13px;
    padding: 10px 6px;
    white-space: nowrap;
  }
}

/* ---------- Bottom-of-page nav to the standalone library pages ----------
   Saved invoices/bills/products/customers no longer live inline on the
   tool page itself (see /tools/invoice-maker/saved/, /tools/bill-maker/
   saved/, /tools/billing/products/, /tools/billing/customers/) — this is
   just the short, stacked list of links to them at the very bottom. */
.billing-footer-links {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border, #E2E5EA);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.billing-footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border, #E2E5EA);
  border-radius: 10px;
  color: var(--text-100, #14161C);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  background: #fff;
}
.billing-footer-links a:hover { border-color: #C9791A; }
.billing-footer-links a::after {
  content: "→";
  color: var(--text-muted, #7B8290);
  font-weight: 400;
}

/* Reused by the standalone saved-invoices/saved-bills/products/customers
   pages (not just the old inline section this replaced on the tool page
   itself). */
.billing-library-list {
  margin-top: 10px;
  border: 1px solid var(--border, #E2E5EA);
  border-radius: 10px;
}
.billing-library-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #F0F1F4;
  font-size: 13.5px;
  gap: 10px;
}
.billing-library-row:last-child { border-bottom: none; }
.billing-library-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-library-row > span:last-child { flex: none; display: flex; gap: 10px; }
.billing-library-row button {
  background: none;
  border: none;
  color: #C9791A;
  font-weight: 700;
  cursor: pointer;
  font-size: 12.5px;
}

/* Search box atop the standalone saved-invoices/bills/products/customers
   pages — plain client-side filter over the already-loaded list. */
.billing-library-search {
  width: 100%;
  margin: 14px 0 4px;
  box-sizing: border-box;
}

/* Inline edit row — used by the Saved Products / Saved Customers pages
   (products.js/customers.js) so editing doesn't need a separate modal or
   navigation away from the list. */
.billing-library-row--edit {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 14px;
}
.billing-library-row--edit > span:last-child {
  justify-content: flex-end;
}
.billing-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.billing-edit-grid input {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .billing-edit-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   PREVIEW / PRINT — two document shapes, one wrapper element
   (#billingPreview) whose modifier class picks the layout.
   =================================================================== */

.billing-preview-wrap {
  background: #F4F5F7;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  justify-content: center;
  overflow-x: auto; /* only ever kicks in on a genuinely oversized print sheet, never on the sheet's own text content */
}

/* ---- Invoice Maker: A4 portrait sheet ---- */
/* IMPORTANT: no fixed aspect-ratio and no overflow clipping here — a
   real invoice's height depends on how many items it has, and a fixed
   210:297 box at a phone-sized width forced most of a multi-item
   invoice into a tiny scrollable sliver (the "only showing 1 item" and
   "side scrolling" complaints both traced back to this rule). The sheet
   now simply grows as tall as its content needs, keeping only the A4
   WIDTH proportions as a visual cue via min-height. */
.billing-preview--a4 {
  background: #fff;
  width: 100%;
  max-width: 740px; /* closer to a real A4 sheet's on-screen size than the old 620px cap, so it actually reads as "a proper A4 page" instead of a cramped card */
  /* True A4 proportions (210mm : 297mm) as a MINIMUM height for the box's
     own rendered width — short invoices still look like a full page, and
     because this is a ratio (not the old 100vw-based calc, which used the
     whole viewport's width instead of the sheet's own width and produced
     a badly-skewed, way-too-tall box on wide screens) it stays correctly
     proportioned at every screen size. A longer invoice's real content
     height simply grows past this, the normal `height:auto` way. */
  aspect-ratio: 210 / 297;
  height: auto;
  box-shadow: 0 6px 20px rgba(20, 25, 40, 0.15);
  padding: 28px 26px;
  font-size: 12px;
  color: #202430;
  overflow: visible;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .billing-preview--a4 { padding: 16px 14px; font-size: 11.5px; aspect-ratio: auto; }
  .billing-preview-wrap { padding: 10px; }
}
.billing-preview--a4 .biz-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #202430;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.billing-preview--a4 .biz-header img { max-height: 48px; }
.billing-preview--a4 .biz-header h2 { margin: 0 0 4px; font-size: 17px; }
.billing-preview--a4 .doc-title { text-align: right; }
.billing-preview--a4 .doc-title h1 { margin: 0; font-size: 22px; letter-spacing: 0.04em; }
.billing-preview--a4 .parties-row { display: flex; justify-content: space-between; margin-bottom: 14px; gap: 20px; }
.billing-preview--a4 table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.billing-preview--a4 th, .billing-preview--a4 td {
  border: 1px solid #D7DAE0; padding: 6px 8px; font-size: 11.5px; text-align: left;
}
.billing-preview--a4 th { background: #F4F5F7; }
.billing-preview--a4 .totals-block { display: flex; justify-content: flex-end; }
.billing-preview--a4 .totals-block table { width: 240px; }
.billing-preview--a4 .footer-note { margin-top: 20px; font-size: 10.5px; color: #6B7180; }
/* Smaller/lighter than the owner's own notes line above it, and than
   .footer-note itself, so the brand line never competes with the actual
   invoice content — matches the Bill Maker's .bill-brand-footer sizing. */
.billing-preview--a4 .footer-note--brand { margin-top: 4px; font-size: 8.5px; color: #9A9FA8; }
.billing-preview--a4 .footer-note--brand a { color: inherit; text-decoration: underline; }

/* ---- Bill Maker: narrow vertical receipt/list ---- */
.billing-preview--bill {
  background: #fff;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 6px 20px rgba(20, 25, 40, 0.15);
  padding: 18px 16px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #14161C;
}
.billing-preview--bill .biz-name { text-align: center; font-weight: 800; font-size: 15px; margin-bottom: 2px; }
.billing-preview--bill .biz-sub { text-align: center; font-size: 10.5px; color: #4A4F5A; margin-bottom: 8px; }
.billing-preview--bill hr { border: none; border-top: 1px dashed #A8ADB8; margin: 8px 0; }
.billing-preview--bill .bill-meta-row { display: flex; justify-content: space-between; font-size: 10.5px; }
.billing-preview--bill .bill-item-row { display: flex; justify-content: space-between; margin: 3px 0; }
.billing-preview--bill .bill-item-name { flex: 1; padding-right: 6px; }
.billing-preview--bill .bill-item-qty { width: 30px; text-align: right; }
.billing-preview--bill .bill-item-amt { width: 64px; text-align: right; }
.billing-preview--bill .bill-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 13px; margin-top: 6px; }
.billing-preview--bill .bill-footer { text-align: center; font-size: 10.5px; margin-top: 10px; color: #4A4F5A; }
/* Small, tasteful brand line under the owner's own footer note — shown
   on-screen AND on the printed bill (never hidden by @media print,
   unlike the surrounding UI chrome). Deliberately much smaller/lighter
   than .bill-footer so it never reads as competing with the owner's own
   "Thank you" message or the bill's actual content. */
.billing-preview--bill .bill-brand-footer { text-align: center; font-size: 8.5px; margin-top: 4px; color: #9A9FA8; letter-spacing: 0.01em; }

@media print {
  /* The 2-pages-for-a-1-item-invoice bug: `visibility: hidden` on every
     element only hides PAINT — it does nothing to layout. Every hidden
     element (the topbar, the whole form column, the actions row, the
     footer links…) still claimed its normal height, and .auth-wrap's own
     `min-height:100vh` + flex-centering (see adneed.css) added even more
     on top of that. That invisible-but-still-tall leftover document was
     routinely taller than a single A4 sheet, so the browser paginated the
     empty space into a near-blank 2nd printed page even when the actual
     invoice (rendered separately via position:absolute) was one short
     card with a single item. Fix: use `display:none` — which removes an
     element from layout entirely, not just from paint — on everything
     that isn't the invoice sheet, so the printed document's real height
     is exactly the invoice's own height. No absolute positioning needed
     any more either, since nothing tall is left behind to escape. */
  header.dash-topbar,
  #loadingCard, #unconfiguredCard, #signedOutCard, #categoryCard,
  .billing-tool-title-row, .qr-tool-subtitle,
  .billing-tool-price-row,
  #alertBox,
  .billing-form-col,
  .billing-actions-row,
  .tool-note,
  .billing-footer-links,
  #toolCard > a.btn {
    display: none !important;
  }

  html, body { margin: 0; padding: 0; background: #fff; }

  body.tool-full-bleed .auth-wrap,
  .auth-card--tool-full,
  .billing-editor-grid,
  .billing-preview-col,
  .billing-preview-wrap {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    border: none !important;
  }

  .billing-preview--a4 {
    box-shadow: none; max-width: none; width: 210mm; min-height: 297mm; height: auto; aspect-ratio: auto;
    margin: 0 auto; padding: 15mm 14mm; box-sizing: border-box;
  }
  .billing-preview--bill {
    box-shadow: none; max-width: 80mm; width: 80mm; margin: 0 auto;
  }
  @page { size: A4; margin: 0; }
}