/* it-qg-v3.css: the quote generator's editor, on top of it-gen-v3.css (the shell both
   generators share since 25 Sep 2026: toolbar, rail, canvas, panel, review modal, tab bar).
   Only what the quote adds lives here: the theme cards, the list add rows, the preset
   picker, the Simple and Advanced switch, and the rules that keep the sheet on screen laid
   out the way the export lays it out. The document's own look (Tailwind classes, the
   data-qg-tpl themes, .qg-powered) stays in the page's stylesheet. */

/* the sheet is one width everywhere (690px, the PDF's page width) and scales to fit; the
   md: rules are pinned on so a phone shows the same page the file has, not a stacked one */
.ige-canvas .pv-inner{width:690px}
.ige-canvas #live-preview-capture{width:690px;max-width:none;margin:0;border-radius:2px}
.ige-canvas #live-preview-capture .md\:p-8{padding:32px}
.ige-canvas #live-preview-capture .md\:text-\[32px\]{font-size:32px}
.ige-canvas #live-preview-capture .md\:text-\[28px\]{font-size:28px}
.ige-canvas #live-preview-capture .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the same three in the iframe it-sheet-render measures in (690 wide, so md: never matched
   there either) and in the JPG stage, so the file is the page on screen */
.it-shot #live-preview-capture .md\:p-8,#qg-capture-clone .md\:p-8{padding:32px}
.it-shot #live-preview-capture .md\:text-\[32px\],#qg-capture-clone .md\:text-\[32px\]{font-size:32px}
.it-shot #live-preview-capture .md\:text-\[28px\]{font-size:28px}
.it-shot #live-preview-capture .md\:grid-cols-2,#qg-capture-clone .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the touch layer's 44px floor is for controls, not for a bar drawn on the document */
html body .ige-canvas #live-preview-capture .h-10,html body .ige-canvas #live-preview-capture .h-5{min-height:0!important;height:auto!important}
.ige-canvas #live-preview-capture .h-10{height:40px!important}
.ige-canvas #live-preview-capture .h-5{height:20px!important}

/* editor-only rows on the sheet */
.ige-canvas #live-preview-capture .ige-addrow{display:block!important;background:transparent}
.ige-addpair{display:flex;gap:8px}
.ige-canvas #live-preview-capture .ige-addbtn-alt{color:var(--ige-text2);background:#fff;border-color:var(--ige-line2);width:auto;flex:0 0 auto}
.ige-canvas #live-preview-capture .ige-addbtn-alt:hover{background:var(--ige-hover)}
.ige-canvas #live-preview-capture li.ige-ui{display:list-item!important;list-style:none;margin-top:6px}
.ige-canvas #live-preview-capture div.ige-ui{display:block!important}
.ige-canvas #live-preview-capture .ige-addbtn-sm{padding:6px 10px;font-size:12px;width:auto;display:inline-flex}
.ige-canvas #live-preview-capture .ige-addbtn-sm .ige-ic{width:15px;height:15px}
.ige-canvas #live-preview-capture .ige-row-on{background:var(--ige-accent-soft);box-shadow:inset 0 0 0 1px #E8A26F}
.ige-canvas #live-preview-capture [data-f].ige-editing{min-width:3ch;display:inline-block}
/* Simple hides every empty optional field; Advanced shows them all as placeholders */
.ige[data-mode="simple"] .ige-canvas #live-preview-capture .ige-empty[data-opt]{display:none!important}
.ige[data-mode="advanced"] .ige-canvas #live-preview-capture span.ige-empty[data-opt]{display:inline-block}
.ige[data-mode="advanced"] .ige-canvas #live-preview-capture :is(div,p).ige-empty[data-opt]{display:block}
/* a hidden optional placeholder takes its separator dot with it */
.ige[data-mode="simple"] .ige-canvas #live-preview-capture .ige-empty[data-opt]+.text-neutral-300{display:none}
/* the tinted hover on a dark theme still reads */
.ige-canvas #live-preview-capture[data-qg-tpl="midnight"] [data-f]:hover{background:rgba(242,98,7,.18);box-shadow:0 0 0 3px rgba(242,98,7,.18)}
.ige-canvas #live-preview-capture[data-qg-tpl="midnight"] [data-f].ige-editing{background:#1a2029;color:#F2F4F6}

/* the preset picker, anchored under Add from presets */
.ige-presetpop{min-width:300px;max-width:360px}
.ige-presetlist{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto;margin:4px 0 6px}
.ige-presetlist button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--ige-line3);border-radius:8px;padding:8px 10px;color:var(--ige-text)}
.ige-presetlist button:hover{background:var(--ige-accent-bg);border-color:var(--ige-accent-line)}
.ige-presetlist button span{min-width:0}
.ige-presetlist button b{display:block;font-size:12.5px;font-weight:700;line-height:1.3}
.ige-presetlist button small{display:block;font-size:11px;color:var(--ige-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.ige-presetlist button em{font-style:normal;font-size:12px;font-weight:700;color:var(--ige-accent);white-space:nowrap;flex:0 0 auto}

/* Simple and Advanced: a document-detail switch in the label row above the sheet */
.ige-canvas-label{align-items:center}
.ige-modewrap{display:flex;align-items:center;gap:8px}
.ige-mode{display:inline-flex;border:1px solid var(--ige-line2);border-radius:999px;padding:2px;background:#fff}
.ige-mode button{background:transparent;border:0;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:#5b6770;line-height:1.2}
.ige-mode button[aria-pressed="true"]{background:var(--ige-accent-bg);color:var(--ige-accent)}
.ige-mode button:hover{color:var(--ige-accent)}
.ige-modehint{font-size:11px;color:#77838b}
@media (max-width:600px){.ige-canvas-label .ige-modehint{display:none}.ige-canvas-label{gap:8px}.ige-canvas-label>span:first-child{flex:1 1 auto;min-width:0}}

/* Switch to another document type: the toolbar dropdown (30 Sep 2026, #igeSwitchDoc in
   quotegenerator/index.html) now owns #docTypeRow's display/position entirely, scoped there
   at higher specificity. The old ID-level display:none/flex pair used to live here and silently
   beat the dropdown's own opacity/visibility open-state (ID beats class), forcing the menu into
   a permanently-laid-out horizontal row instead of a real closed-by-default dropdown - removed. */

/* theme cards in the Templates panel (26 Sep 2026): each card is a real miniature of the
   quote sheet on that theme (miniQuoteHTML in it-qg-v3.js), laid out 690px wide like the live
   sheet and scaled by --ige-mini-k, which mountTemplateGrid measures from the card's width.
   Same pattern as it-gen-v3.css's .ige-mini / .ige-mini-doc for the invoice generator. */
.qg-mini{position:relative;background:#e6eaec;border:0;border-radius:8px;aspect-ratio:139/186;overflow:hidden;pointer-events:none;isolation:isolate}
.qg-mini .qg-mini-doc{position:absolute!important;left:0!important;top:0!important;width:690px!important;max-width:none!important;margin:0!important;transform-origin:0 0!important;transform:scale(var(--ige-mini-k,.2014))!important;min-height:calc(100% / var(--ige-mini-k,.2014));border-radius:0!important;box-shadow:none!important;overflow:hidden!important}
/* the md: rules pinned on, exactly as .ige-canvas pins them on the live sheet */
.qg-mini .qg-mini-doc .md\:p-8{padding:32px}
.qg-mini .qg-mini-doc .md\:text-\[32px\]{font-size:32px}
.qg-mini .qg-mini-doc .md\:text-\[28px\]{font-size:28px}
.qg-mini .qg-mini-doc .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qg-mini .qg-mini-doc .h-10{height:40px}
.qg-mini .qg-mini-doc .h-5{height:20px}
.ige-tpl-card>.qg-mini~span,.ige-tpl-card>.qg-mini~small{display:none}
.ige-tpl-card small{display:block;margin:0 2px 4px;font-size:11px;color:var(--ige-muted)}
.ige-tpl-card>span:first-of-type+span{margin-bottom:0}

/* accent swatches: white ring on the site orange too */
.ige-sw[data-color="#F26207"]{box-shadow:0 0 0 1px #F3CDB0}

/* the deposit row in Extras */
.ige-depositrow{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.ige-depositrow input[type=range]{flex:1;margin:0}
.ige-depositrow b{min-width:44px;text-align:right;font-size:14px}

/* the print path is the live sheet in place, so the editor's affordances and the scale go */
@media print{
  .ige-canvas .ige-empty,.ige-canvas .ige-ui,.ige-canvas #live-preview-capture :is(div,li).ige-ui,#igeOvl,#ai,.ige-canvas-label{display:none!important}
  .pv-inner{position:static!important;transform:none!important;width:auto!important;left:auto!important}
  .pv-sizer{width:auto!important;height:auto!important}
  .ige-canvas #live-preview-capture{width:auto;margin:0}
}

/* the narrowest phones: the trade name beats the wrench icon and the divider for the room */
@media (max-width:400px){.ige-top .ige-trade>.ige-ic,.ige-top .ige-sep{display:none}}
/* with a panel open on a laptop the sheet reaches the rail's edge, where the shared tips
   bulb sits; the bulb moves into the rail and the rail's foot makes room for it */
@media (min-width:901px){
  body:has(.qge[data-panel-open="1"]) #itp-tip-btn{left:14px!important}
  .qge[data-panel-open="1"] .ige-rail-foot{padding-bottom:74px}
}