/* One-screen invoice builder: Views/Generator/Index.cshtml + assets/js/livepreview.js
   1200px and up: builder + live preview rail; Design mode swaps the builder for the design panel and a big preview.
   Below 1200px: builder full width, a bottom bar opens the preview + design panel as a sheet.
   px only: #fontstylesheet sets html { font-size } page-wide whenever the font pairing changes. */

/* logged in (_LayoutAuth): the Webflow wrapper classes aren't styled there */
.gen-main.gen-auth { max-width: 1200px; margin: 0 auto; padding: 20px 24px 48px !important; } /* the anon page's width: wider only grew the empty gap between the 816px builder and the rail */

/* toolbar */
.gen-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.gen-toolbar-left, .gen-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gen-mode { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 2px solid #eee; border-radius: 999px; }
.gen-mode a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; color: #222; font-size: 16px; font-weight: bold; line-height: 1; text-decoration: none; white-space: nowrap; }
.gen-mode a.active { background: #222; color: #fff; }
.gen-mode a:not(.active):hover { background: #f2f2f4; color: #222; }
.gen-mode-hint { font-size: 14px; color: #666; margin-left: 4px; }

.gen-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 1px solid #d6d7de; border-radius: 8px; background: #fff; color: #000b0f; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.gen-btn:hover, .gen-btn:focus { border-color: #9a9ca8; color: #000b0f; text-decoration: none; }
.gen-btn-primary, .gen-btn-primary:focus { background: #000b0f; border-color: #000b0f; color: #fff; }
.gen-btn-primary:hover, .gen-btn-primary.active { background: #2b2f36; border-color: #2b2f36; color: #fff; }
.gen-btn-icon { width: 44px; padding: 0; justify-content: center; }
.gen-btn.unsaved, .gen-btn.saving { border-color: #d6d7de; }

.gen-notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; margin-bottom: 16px; background: #fff; border: 1px solid #e4e4e8; border-radius: 10px; font-size: 14px; }

/* workspace */
/* the builder column is never wider than its 816px sheet, so the sheet, the cards under it and the Edit/Design toggle
   share their edges at every width (a wider column centered the sheet and left the cards and toggle sticking out).
   spare width becomes gutter before the rail, which stays on the toolbar's right edge */
.gen-workspace { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.gen-editor { flex: 0 1 816px; min-width: 0; }
#divInvoiceEdit > .doc-html { margin: 0 auto; }

/* 25%: the builder gets ~15% more width than the old 400px rail left it (731 -> its full 816px sheet at 1440 wide).
   no max-height: the preview always shows the whole invoice, never a scrollbar of its own. a rail taller than the window sticks
   by its bottom instead of its top (--gen-rail-top, livepreview.js stickRail) so the end of a long invoice is reachable */
.gen-rail { flex: 0 0 25%; min-width: 0; position: sticky; top: var(--gen-rail-top, 16px); display: flex; flex-direction: column; gap: 12px; }
.gen-rail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.gen-rail-title { font-weight: bold; font-size: 16px; }
.gen-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #dff3e8; color: #155c3b; font-size: 12px; font-weight: 600; }
.gen-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1f9d62; }
.gen-rail-hint { display: none; font-size: 14px; color: #666; }
.gen-rail-actions { margin-left: auto; display: flex; gap: 6px; }
.gen-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #d6d7de; border-radius: 8px; background: #fff; color: #000b0f; font-size: 14px; cursor: pointer; }
.gen-icon-btn:hover { border-color: #9a9ca8; }
.gen-zoom, .gen-sheet-close, .gen-sheet-foot { display: none; }

.gen-rail-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 20px; }
.gen-preview { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: #e6e7ec; border-radius: 16px; padding: 12px; }
/* block, not docflows' wrapping flex column: a flex line grows to the 816px page and the fit math feeds back to scale 1 */
.gen-preview .doc-html { display: block; max-width: none; margin: 0; }
.gen-preview .doc-html > li { width: 100%; }
.gen-preview .invoice-preview { background: #fff; cursor: pointer; }
.gen-preview.zoom-full { overflow: auto; }
.gen-preview.zoom-full .doc-html { width: max-content; }

/* where a click in the preview will land */
.gen-workspace.mode-design #divInvoicePreview .invoice-preview :is(.header .left-side, .header .right-side, .invoice-top > div, .product-lines, .invoice-totals, .terms):hover { outline: 2px solid #8d95f0; outline-offset: 3px; border-radius: 2px; }

/* edit mode: design shortcuts under the rail */
.gen-dock { flex: none; display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 6px; }
.gen-dock-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: inherit; cursor: pointer; }
.gen-dock-row:hover { background: #f4f4f6; }
.gen-dock-icon { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #f4f4f6; display: flex; align-items: center; justify-content: center; font-size: 17px; overflow: hidden; }
.gen-dock-icon.gen-dock-thumb { height: 52px; background: #fff; border: 1px solid #e4e4e8; border-radius: 4px; }
.gen-dock #imgInvoiceTemplate { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover; object-position: top; }
.gen-dock .gen-dock-aa { font-family: Georgia, serif; font-size: 19px; }
.gen-dock-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.gen-dock-text small { font-size: 12px; color: #666; }
.gen-dock-text b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-dock-action { flex: none; font-size: 14px; font-weight: 600; color: #3f49b8; }

/* design mode (desktop) */
.gen-design { display: none; }
.gen-workspace.mode-design .gen-editor { display: none; }
.gen-workspace.mode-design .gen-rail { flex: 1 1 auto; position: static; max-height: none; }
.gen-workspace.mode-design .gen-rail-body { align-items: flex-start; }
.gen-workspace.mode-design .gen-design { display: block; flex: 0 0 340px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.gen-workspace.mode-design .gen-preview { overflow: visible; padding: 24px; }
.gen-workspace.mode-design .gen-dock, .gen-workspace.mode-design .gen-expand { display: none; }
.gen-workspace.mode-design .gen-rail-hint { display: inline; }

/* design panel */
.gen-design { background: #fff; border-radius: 16px; padding: 8px; }
.gen-design-title { font-size: 20px; font-weight: bold; padding: 10px 12px 6px; }
.gen-sec + .gen-sec { border-top: 1px solid #ececf0; }
.gen-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: inherit; cursor: pointer; }
.gen-sec-head small { display: block; font-size: 12px; color: #666; }
.gen-sec-head b { display: block; font-size: 15px; }
.gen-sec-head .fa-chevron-right { transition: transform .2s; }
.gen-sec.open .gen-sec-head { background: #f4f4f6; }
.gen-sec.open .gen-sec-head .fa-chevron-right { transform: rotate(90deg); }
.gen-sec-body { display: none; padding: 12px 8px 16px; }
.gen-sec.open .gen-sec-body { display: block; }
.gen-design-foot { padding: 12px; margin-top: 4px; border-top: 1px solid #ececf0; }
.gen-design-foot .gen-btn { width: 100%; justify-content: center; }

/* template grid (moved in from #divModalInvoiceTemplate) */
#designTemplatePicker .form-select-wrapper { display: block; }
#designTemplatePicker .form-select-wrapper > div:first-child { display: none; }
#designTemplatePicker .form-select-templates { display: block; margin: 0 0 12px; }
#designTemplatePicker .form-select-dropdown { display: block; width: 100%; margin: 0; }
#designTemplatePicker .rw { margin: 0; }
#designTemplatePicker .invoice-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; text-align: left; }
#designTemplatePicker .invoice-templates a,
#designTemplatePicker .invoice-templates a.filtered { display: none; margin: 0; padding: 4px; border: 2px solid transparent; border-radius: 8px; background: #f4f4f6; }
#designTemplatePicker .invoice-templates a.filtered { display: block; }
#designTemplatePicker .invoice-templates a:hover { border-color: #b9bcc8; }
#designTemplatePicker .invoice-templates a.selected { border-color: #000b0f; background: #fff; }
#designTemplatePicker .invoice-templates img { display: block; width: 100%; margin: 0; border: 0; border-radius: 4px; }

/* font list (moved in from #divModalFontPairing) */
#designFontPicker .logos-list { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 0; }
#designFontPicker .logos-list li { flex: none; margin: 0; padding: 6px; border: 2px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; }
#designFontPicker .logos-list li:hover { background: #f4f4f6; }
#designFontPicker .logos-list li.active { border-color: #000b0f; }
#designFontPicker .logo-wrapper { padding: 0; }
#designFontPicker .logo-mode-select { display: none; }
#designFontPicker .logos-list img { max-width: 100%; }

/* logo */
.gen-upload { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 20px 12px; border: 1.5px dashed #b9bcc8; border-radius: 12px; background: #fafafc; color: #000b0f; font-size: 15px; font-weight: 600; cursor: pointer; }
.gen-upload i { font-size: 20px; }
.gen-upload small { font-size: 12px; font-weight: normal; color: #666; }
.gen-field-label { display: block; font-size: 13px; color: #666; margin: 14px 0 6px; }
.gen-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: #f0f0f4; border-radius: 10px; }
.gen-seg button { flex: 1 1 auto; min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: #555; font-size: 14px; font-weight: 600; cursor: pointer; }
.gen-seg button.active { background: #fff; color: #000b0f; box-shadow: 0 1px 2px rgba(0, 11, 15, .15); }
.gen-check { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 8px 0 0; font-size: 15px; font-weight: normal; }
.gen-check input { width: 18px; height: 18px; margin: 0; }

/* autosize switches these to overflow:scroll at fractional display scaling (150%: 0.67px borders) though the height fits */
#divInvoiceEdit textarea.free-form, #divInvoiceEdit textarea.client-notes, #divInvoiceEdit textarea.Description { overflow-y: hidden !important; }

/* builder header: title, number/dates, Bill To / Payable To (the sheet only; the preview renders the real template).
   one text size and field height, labels centred on their boxes, equal columns, and the address boxes stretch to the
   height of the number/date stack so the block's top and bottom edges line up */
#divInvoiceEdit .inv-builder .body { padding-top: 24px; }
#divInvoiceEdit .inv-builder .invoice-top { padding-bottom: 36px; font-size: 14px; } /* textareas inherit it (inv-builder.css); phones had 11px */
#divInvoiceEdit .invoice-top input.input-field { height: 40px; margin: 0; padding: 0 10px; border: 1px solid #aaa; border-radius: 4px; font-size: 14px; font-weight: 400; line-height: 20px; }
/* one line (40px, like the inputs) growing as lines are typed; in the 3-column layout as tall as the details stack */
#divInvoiceEdit .invoice-top textarea.free-form { min-height: 40px; margin: 0; padding: 9px 10px; border: 1px solid #aaa; line-height: 20px; }
#divInvoiceEdit .invoice-top .input-field::placeholder { color: #9a9ca8; }
#divInvoiceEdit .invoice-top .left-side table { border-collapse: separate; border-spacing: 0 8px; margin: -8px 0; } /* the spacing's outer 8px cancelled: first/last box flush with the column */
#divInvoiceEdit .invoice-top .left-side td { padding: 0; vertical-align: middle; }
#divInvoiceEdit .invoice-top .left-side td.section-header { width: 104px; padding-right: 8px; line-height: 1.25; }
#divInvoiceEdit .invoice-top td.gen-date { position: relative; }
#divInvoiceEdit .invoice-top td.gen-date input.input-field { padding-right: 32px; }
#divInvoiceEdit .invoice-top td.gen-date::after { content: "\f133"; font-family: "Font Awesome 6 Pro"; font-weight: 300; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: #8a8c96; pointer-events: none; }
#divInvoiceEdit .invoice-top .section-header { line-height: 21px; }
/* columns follow the sheet's own width (container queries), not the window: details | Bill To | Payable To when there's
   room for a date beside its label, details on their own row above the two address boxes below that, one column on phones.
   order/width/margins undo inv-builder.css's <=760px stacking, which put Payable To first */
#divInvoiceEdit .inv-builder .body { container-type: inline-size; }
#divInvoiceEdit .inv-builder .invoice-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
#divInvoiceEdit .inv-builder .invoice-top > div { width: auto !important; padding-right: 0; margin-bottom: 0; order: 0; }
#divInvoiceEdit .invoice-top .center-side, #divInvoiceEdit .invoice-top .right-side { display: flex; flex-direction: column; gap: 6px; }
#divInvoiceEdit .invoice-top .center-side > .section-header, #divInvoiceEdit .invoice-top .right-side > .section-header { flex: none; }
#divInvoiceEdit .invoice-top .left-side > div:first-child { display: none; }
@container (min-width: 440px) {
    #divInvoiceEdit .inv-builder .invoice-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #divInvoiceEdit .invoice-top .left-side { grid-column: 1 / -1; }
    #divInvoiceEdit .invoice-top .left-side table { max-width: 360px; }
}
@container (min-width: 640px) {
    #divInvoiceEdit .inv-builder .invoice-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
    #divInvoiceEdit .invoice-top .left-side { grid-column: auto; }
    #divInvoiceEdit .invoice-top .left-side table { max-width: none; }
    #divInvoiceEdit .invoice-top .left-side > div:first-child { display: block; height: 27px; } /* the label row over Bill To / Payable To (21px + 6px gap) */
    /* as tall as the details stack (3 x 40px + 2 x 8px). a min-height, not flex-grow: autosize measured the stretched box,
       kept that as its height, and the boxes then held each other tall in the narrower layouts */
    #divInvoiceEdit .invoice-top textarea.free-form { min-height: 136px; }
}

/* document title: plain text until hovered or focused, its text on the labels' left edge */
#divInvoiceEdit .inv-builder #Title { margin-left: -11px; padding: 4px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
#divInvoiceEdit .inv-builder #Title:hover { border-color: transparent; background: #f4f4f6; }
#divInvoiceEdit .inv-builder #Title:focus { border-color: #aaa; background: #fff; }

/* editor: where a preview click landed */
.gen-flash { outline: 3px solid #bdc4ff !important; outline-offset: 6px; border-radius: 4px; }

/* editor totals: discount, payments and currency live here now */
.gen-link { padding: 0; border: 0; background: none; color: #3f49b8; font-weight: 600; text-decoration: none; cursor: pointer; }
.gen-link:hover { color: #2a3290; text-decoration: underline; }
/* inv-builder.css puts the table at margin-left 50%: with these controls it ran past the sheet's right edge on narrower
   sheets (85px at 768 wide). auto keeps the same spot when it fits and grows the table leftward when it doesn't */
#divInvoiceEdit .invoice-totals { margin-left: auto; margin-right: 0; }
#divInvoiceEdit .invoice-totals .gen-cell-controls { white-space: nowrap; padding-right: 10px; }
#divInvoiceEdit .invoice-totals .gen-cell-controls .gen-seg { display: inline-flex; flex-wrap: nowrap; vertical-align: middle; padding: 2px; }
#divInvoiceEdit .invoice-totals .gen-cell-controls .gen-seg button { height: 28px; min-width: 30px; padding: 0 6px; }
#divInvoiceEdit .invoice-totals #DiscountValue { display: inline-block; width: 64px; height: 32px; margin: 0; padding: 2px 6px; text-align: right; vertical-align: middle; }
#divInvoiceEdit .invoice-totals .gen-remove { width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #888; vertical-align: middle; cursor: pointer; }
#divInvoiceEdit .invoice-totals #CurrenciesId { display: inline-block; width: auto; height: 34px; margin: 0; padding: 2px 28px 2px 8px; font-size: 14px; vertical-align: middle; }
.gen-payments-list { text-align: right; font-size: 13px; padding-top: 6px; }
.gen-payments-list label { font-weight: bold; margin-right: 6px; }
.gen-payments-list > div { display: inline-block; margin-left: 12px; }

/* below the sheet: getting paid, admin */
.gen-card { background: #fff; border-radius: 12px; padding: 20px 24px; margin-top: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, .06); }
.gen-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.gen-card-title { font-size: 18px; font-weight: bold; }
.gen-card-sub { font-size: 14px; color: #666; margin-top: 2px; }
.gen-paychips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gen-paychip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 12px; border: 1px solid #d6d7de; border-radius: 999px; background: #fff; }
.gen-paychip input { width: 16px; height: 16px; margin: 0; accent-color: #000b0f; }
.gen-paychip label { margin: 0; cursor: pointer; font-size: 14px; }
.gen-paychip:has(input:checked) { border-color: #000b0f; background: #f4f4f6; }
.gen-paychip a { display: none; color: #d93036; }
.gen-paychip input:checked + label + a.notenabled { display: inline-flex; }
.gen-payopts { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 10px; }
.gen-payopts label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-size: 15px; font-weight: normal; }
.gen-payopts input { width: 16px; height: 16px; margin: 0; }
/* anon: Venmo / Cash App / Zelle handles (livepreview.js) */
.gen-paymethods { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.gen-paymethods[hidden] { display: none; }
.gen-pm { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; align-items: start; padding: 14px; border: 1px solid #e4e4e8; border-radius: 10px; background: #fff; }
.gen-pm[hidden], .gen-pm-add button[hidden] { display: none; }
.gen-pm-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #eef0ff; color: #2a3290; font-weight: 700; font-size: 17px; }
.gen-pm-badge svg { display: block; width: 20px; height: 20px; } /* Venmo / Cash App brand icons; Zelle keeps its letter */
.gen-pm-badge i { font-size: 20px; line-height: 1; } /* PayPal (fab fa-paypal) */
.gen-pm-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gen-pm-body label { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; }
.gen-pm-field { display: flex; align-items: center; height: 44px; border: 1px solid #aaa; border-radius: 4px; background: #fff; overflow: hidden; }
.gen-pm-field:focus-within { border-color: #000b0f; box-shadow: 0 0 0 1px #000b0f; }
.gen-pm-prefix { padding-left: 10px; color: #565b5d; font-size: 16px; }
.gen-pm-field input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0 10px 0 2px; border: 0; border-radius: 0; box-shadow: none; outline: 0; background: transparent; font-size: 16px; color: #000b0f; } /* beats Site.css input[type=text] (12px on phones); 16px: no iOS zoom */
.gen-pm-field input[type="text"]:first-child { padding-left: 10px; }
.gen-pm-help { font-size: 13px; line-height: 18px; color: #565b5d; }
.gen-pm.invalid .gen-pm-field { border-color: #b42318; }
.gen-pm.invalid .gen-pm-help { color: #b42318; }
.gen-pm-remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #565b5d; font-size: 16px; cursor: pointer; }
.gen-pm-remove:hover { background: #f4f4f6; color: #000b0f; }
.gen-pm-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gen-pm-add button { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px 0 10px; border: 1px solid #d6d7de; border-radius: 999px; background: #fff; color: #000b0f; font-size: 14px; font-weight: 500; cursor: pointer; }
.gen-pm-add button:hover { border-color: #000b0f; }
.gen-getpaid-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding: 14px 16px; background: #f4f4f6; border-radius: 10px; font-size: 15px; }
.gen-admin .rw { margin: 10px 0 0; }

/* share / history: one click back */
.gen-panel-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }

.gen-mobile-bar, .gen-sheet-backdrop { display: none; }

@media screen and (max-width: 1199px) {
    .gen-mode-hint { display: none; }
    .gen-workspace { display: block; }
    /* no rail: toolbar, notices, sheet and cards form one column the sheet's width, edges lined up */
    .gen-toolbar, .gen-notice, .gen-workspace { max-width: 816px; margin-left: auto; margin-right: auto; }
    .gen-rail { display: none; }
    .gen-workspace.mode-design .gen-editor { display: block; } /* stays behind the sheet */
    .gen-editor { padding-bottom: 100px; } /* room for the bar */

    .gen-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; align-items: center; gap: 14px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0, 11, 15, .12); }
    body.gen-typing .gen-mobile-bar, body.gen-sheet-open .gen-mobile-bar { display: none; }
    .gen-bar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .gen-bar-text small { font-size: 13px; color: #666; }
    .gen-bar-text b { font-size: 20px; }

    /* the sheet */
    body.gen-sheet-open .gen-sheet-backdrop { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1039; background: rgba(0, 11, 15, .45); }
    body.gen-sheet-open .gen-workspace.mode-design .gen-rail { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: 48px; z-index: 1040; width: 100%; max-width: 760px; max-height: none; margin: 0 auto; padding: 10px 12px 0; gap: 8px; background: #fff; border-radius: 20px 20px 0 0; }
    body.gen-sheet-open .gen-workspace.mode-design .gen-rail-body { flex-direction: column; align-items: stretch; gap: 10px; }
    body.gen-sheet-open .gen-workspace.mode-design .gen-preview { order: 1; flex: 1 1 55%; overflow-y: auto; padding: 10px; }
    body.gen-sheet-open .gen-workspace.mode-design .gen-preview.zoom-full { overflow: auto; }
    body.gen-sheet-open .gen-workspace.mode-design .gen-design { order: 2; flex: 0 1 auto; max-height: 40%; position: static; overflow-y: auto; padding: 0; border-radius: 0; }
    body.gen-sheet-open .gen-design-title, body.gen-sheet-open .gen-design-foot, body.gen-sheet-open .gen-rail-hint { display: none !important; }
    body.gen-sheet-open .gen-zoom, body.gen-sheet-open .gen-sheet-close { display: inline-flex; }
    body.gen-sheet-open .gen-sheet-foot { display: flex; flex: none; gap: 10px; padding: 6px 0 calc(14px + env(safe-area-inset-bottom)); }
    .gen-sheet-foot .gen-btn { flex: 1 1 0; justify-content: center; }
    #designTemplatePicker .invoice-templates { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

@media screen and (max-width: 600px) {
    .gen-main.gen-auth { padding: 12px 12px 48px !important; }
    .gen-toolbar { margin-bottom: 12px; }
    .gen-toolbar-left { width: 100%; }
    .gen-mode { width: 100%; }
    .gen-mode a { flex: 1 1 0; justify-content: center; padding: 0 10px; }
    .gen-hide-sm { display: none; }
    .gen-toolbar-right { width: 100%; }
    .gen-toolbar-right > .gen-btn { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
    .gen-card { padding: 16px; }
    .gen-paymethods { grid-template-columns: minmax(0, 1fr); }
    .gen-pm { padding: 12px; gap: 10px; }
    .invoice-share { padding: 20px 16px; margin-bottom: 40px; } /* was 50px 70px: a 174px preview on a phone */
}