/* /Components/Quote/Dialogs/MyQuotesDialog.razor.rz.scp.css */
.mq[b-xaadkyqjjw]{ display:flex; flex-direction:column; gap:10px; min-width:min(560px, 80vw); }
.mq-search[b-xaadkyqjjw]{ flex:0 0 auto; }
.mq-state[b-xaadkyqjjw]{ display:flex; align-items:center; gap:8px; padding:24px; justify-content:center; color:var(--mud-palette-text-secondary,#73656d); }
.mq-list[b-xaadkyqjjw]{ max-height:min(60vh, 480px); overflow-y:auto; padding:0; }
.mq-item[b-xaadkyqjjw]{ border-bottom:1px solid var(--mud-palette-table-lines,#e9e1e6); }
.mq-row[b-xaadkyqjjw]{ display:flex; flex-direction:column; gap:2px; width:100%; }
.mq-main[b-xaadkyqjjw]{ display:flex; align-items:baseline; gap:8px; }
.mq-no[b-xaadkyqjjw]{ font-weight:700; color:var(--mud-palette-primary,#880e4f); }
.mq-title[b-xaadkyqjjw]{ font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.mq-ver[b-xaadkyqjjw]{ font-size:.7rem; color:var(--mud-palette-text-secondary,#73656d); }
.mq-meta[b-xaadkyqjjw]{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.78rem; color:var(--mud-palette-text-secondary,#73656d); }
.mq-acct[b-xaadkyqjjw]{ background:var(--mud-palette-primary,#880e4f); color:#fff; border-radius:4px; padding:0 5px; font-weight:600; }
.mq-total[b-xaadkyqjjw]{ font-weight:700; color:var(--mud-palette-text-primary,#231b20); }
.mq-sent[b-xaadkyqjjw]{ text-transform:uppercase; font-size:.62rem; letter-spacing:.4px; font-weight:700; color:#2e7d32; border:1px solid #2e7d32; border-radius:4px; padding:0 4px; }
/* /Components/Quote/QuoteEditor.razor.rz.scp.css */
.qe[b-ldy4dk4vln]{ display:flex; flex-direction:column; height:100%; }

/* Open-quote tabs */
.qe-tabs[b-ldy4dk4vln]{ display:flex; align-items:stretch; gap:2px; background:#6d0b3f; padding:0 6px; overflow-x:auto; flex:0 0 auto; }
.qe-tab[b-ldy4dk4vln]{ display:flex; align-items:center; gap:7px; padding:7px 12px; color:rgba(255,255,255,.72); font-size:.8rem; font-weight:500; white-space:nowrap; cursor:pointer; border:0; background:transparent; border-top:3px solid transparent; max-width:230px; }
.qe-tab.on[b-ldy4dk4vln]{ background:var(--mud-palette-background,#f7f4f6); color:var(--mud-palette-text-primary,#231b20); border-top-color:#ffc107; border-radius:6px 6px 0 0; }
.qe-tab-no[b-ldy4dk4vln]{ font-weight:700; }
.qe-tab-title[b-ldy4dk4vln]{ overflow:hidden; text-overflow:ellipsis; }
.qe-dot[b-ldy4dk4vln]{ width:7px; height:7px; border-radius:50%; background:#ffc107; flex:0 0 auto; }
.qe-x[b-ldy4dk4vln]{ font-size:16px; opacity:.6; } .qe-x:hover[b-ldy4dk4vln]{ opacity:1; }
.qe-tab.add[b-ldy4dk4vln]{ color:#fff; font-size:1.1rem; padding:4px 12px; }
.qe-myq[b-ldy4dk4vln]{ margin-left:auto; display:flex; align-items:center; gap:6px; color:#fff; font-size:.78rem; font-weight:600; padding:0 10px; background:transparent; border:0; cursor:pointer; }
.qe-myq .material-symbols-outlined[b-ldy4dk4vln]{ font-size:18px; }

/* Empty state */
.qe-empty[b-ldy4dk4vln]{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--mud-palette-text-secondary,#73656d); }
.qe-empty .material-symbols-outlined[b-ldy4dk4vln]{ font-size:48px; opacity:.4; }
.qe-empty-actions[b-ldy4dk4vln]{ display:flex; gap:10px; }

/* Header */
.qe-head[b-ldy4dk4vln]{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--mud-palette-table-lines,#e9e1e6); flex-wrap:wrap; }
.qe-title-field[b-ldy4dk4vln]{ min-width:220px; flex:0 1 320px; }

/* Add-line bar */
.qe-addbar[b-ldy4dk4vln]{ display:flex; align-items:center; gap:10px; padding:8px 14px; flex-wrap:wrap; border-bottom:1px solid var(--mud-palette-table-lines,#e9e1e6); }
.qe-search[b-ldy4dk4vln]{ min-width:240px; flex:0 1 340px; }
/* Custom typeahead result list (stays open for rapid multi-add). */
.qe-searchbox[b-ldy4dk4vln]{ position:relative; }
.qe-results[b-ldy4dk4vln]{ position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:1200; max-height:340px; overflow-y:auto; padding:4px; }
.qe-result[b-ldy4dk4vln]{ cursor:pointer; padding:5px 8px; border-radius:6px; }
.qe-result:hover[b-ldy4dk4vln]{ background:var(--mud-palette-action-default-hover,rgba(0,0,0,.06)); }
/* Add-product suggestions: a small thumbnail (sourced from the 100px image) for web products, a box icon for
   apostle/imageless ones (mirrors legacy). ItemTemplate content is authored here so the component scope
   applies in the popover. */
.qe-ac-item[b-ldy4dk4vln]{ display:flex; align-items:center; gap:10px; }
.qe-ac-thumb[b-ldy4dk4vln]{ width:34px; height:26px; flex:0 0 auto; object-fit:contain; background:#fff; }
.qe-ac-box[b-ldy4dk4vln]{ display:flex; align-items:center; justify-content:center; font-size:24px;
    color:var(--mud-palette-text-secondary,#9b8e95); }
.qe-ac-text[b-ldy4dk4vln]{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.qe-ac-code[b-ldy4dk4vln]{ font-size:.68rem; font-weight:700; color:var(--mud-palette-text-secondary,#73656d); }
.qe-ac-name[b-ldy4dk4vln]{ font-size:.84rem; white-space:normal; }
.qe-addbtns[b-ldy4dk4vln]{ display:flex; gap:6px; flex-wrap:wrap; }
/* The "+ Add" menu is a child component (MudMenu), so hiding it needs ::deep to reach its rendered root.
   On a wide panel the inline buttons above are used, so the menu is hidden. */
.qe-addbar[b-ldy4dk4vln]  .qe-addmenu{ display:none; }

/* Table area scrolls (the wrapper is in this component's markup, so it carries the scope; the MudTable
   inside is a child component — reach its internals with ::deep). */
/* The MudTable scrolls internally (FixedHeader + Virtualize) via its .mud-table-container, so the wrapper
   itself doesn't scroll — it just provides the flex height the table fills (Height="100%"). */
.qe-tablewrap[b-ldy4dk4vln]{ flex:1; min-height:0; overflow:hidden; position:relative; }
/* Make the MudTable fill the (bounded) wrapper so its inner container becomes a fixed-height scroll area —
   that's what lets the fixed header stick and the rows virtualize (otherwise the table grows to content). */
.qe-tablewrap[b-ldy4dk4vln]  .qe-table{ height:100%; display:flex; flex-direction:column; }
.qe-tablewrap[b-ldy4dk4vln]  .mud-table-container{ flex:1; min-height:0; height:auto; }
/* Drag-reorder: a grip per row, a dim state for the row being dragged, and a magenta drop-line. */
.qe-grip[b-ldy4dk4vln]{ font-size:1.05rem; cursor:grab; color:var(--mud-palette-text-secondary,#9b8e95); vertical-align:middle; touch-action:none; user-select:none; }
.qe-grip:active[b-ldy4dk4vln]{ cursor:grabbing; }
.qe-rownum[b-ldy4dk4vln]{ margin-left:2px; }
/* Drag feedback: a floating CLONE follows the cursor while a row-height GAP shows where it will drop. The gap
   is either the source row's own slot (when not moving) or — once moving — the source collapses and an
   equal-height gap opens at the target, so the total height never changes (no table jump).
   The gap is a faint tint (no coloured border). */
.qe-tablewrap[b-ldy4dk4vln]  tr.qe-gap td{ box-shadow:inset 0 calc(-1 * var(--qe-drop-gap,44px)) 0 rgba(136,14,79,.06); }
.qe-tablewrap[b-ldy4dk4vln]  tr.qe-gap td *{ visibility:hidden; }

.qe-tablewrap[b-ldy4dk4vln]  tr.qe-collapsed{ pointer-events:none; }
.qe-tablewrap[b-ldy4dk4vln]  tr.qe-collapsed td{ padding:0 !important; line-height:0 !important; border:0 !important; }
.qe-tablewrap[b-ldy4dk4vln]  tr.qe-collapsed td *{ display:none !important; }

.qe-tablewrap[b-ldy4dk4vln]  tr.qe-drop-before td{ padding-top:var(--qe-drop-gap,44px) !important;
    box-shadow:inset 0 var(--qe-drop-gap,44px) 0 rgba(136,14,79,.06); }
.qe-tablewrap[b-ldy4dk4vln]  tr.qe-drop-after td{ padding-bottom:var(--qe-drop-gap,44px) !important;
    box-shadow:inset 0 calc(-1 * var(--qe-drop-gap,44px)) 0 rgba(136,14,79,.06); }

/* While dragging, suppress the row hover on the rows underneath (only the floating clone shows the grey). */
.qe-tablewrap.qe-nohover[b-ldy4dk4vln]  .mud-table-row:hover{ background-color:transparent !important; }
/* The floating clone itself is styled inline in QuoteEditor.razor.js (it is created outside this component's
   CSS scope, so a scoped .qe-drag-clone rule here would not match it). */
.qe-reload[b-ldy4dk4vln]{ margin:0 14px 6px; }
.qe-reload-row[b-ldy4dk4vln]{ display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; width:100%; }
.qe-presence[b-ldy4dk4vln]{ font-weight:600; }
.qe-item[b-ldy4dk4vln]{ display:flex; align-items:center; gap:8px; }
/* Centre the Qty / Disc % numeric fields within their (centred) columns. MudNumericField's inner
   .mud-input-control-input-container is display:flex (default flex-start), which left-aligns the input inside
   the control — so reach into the child component with ::deep and centre it too. */
.qe-fieldwrap[b-ldy4dk4vln]{ display:flex; justify-content:center; }
/* MudNumericField's control is wider than its visible input box, which sits at the control's left. Centre
   the box within the control (margin auto), and centre the value text inside the box. */
.qe-fieldwrap[b-ldy4dk4vln]  .mud-input-control{ width:auto; }
.qe-fieldwrap[b-ldy4dk4vln]  .mud-input{ margin-inline:auto; }
.qe-fieldwrap[b-ldy4dk4vln]  input.mud-input-slot{ text-align:center; }
/* Compact (dense) Qty / Disc % boxes: tighter padding + smaller text so the rows stay low. */
.qe-fieldwrap[b-ldy4dk4vln]  .mud-input-slot{ padding-top:4px; padding-bottom:4px; font-size:.82rem; }
.qe-fieldwrap[b-ldy4dk4vln]  .mud-input.mud-input-margin-dense{ margin-top:0; }
/* Per-line multi-buy toggle chip, sat under the (centred) discount field.
   Off = faint outline; on = green filled. */
.qe-mbwrap[b-ldy4dk4vln]{ margin-top:4px; display:flex; justify-content:center; }
.qe-mb[b-ldy4dk4vln]{ display:inline-flex; align-items:center; gap:3px; padding:1px 7px 1px 5px; border-radius:11px;
    border:1px solid var(--mud-palette-table-lines,#d7cdd3); background:transparent; cursor:pointer;
    font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
    color:var(--mud-palette-text-secondary,#9b8e95); line-height:1.5; }
.qe-mb .material-symbols-outlined[b-ldy4dk4vln]{ font-size:14px; }
.qe-mb:hover[b-ldy4dk4vln]{ border-color:#2e7d32; color:#2e7d32; }
.qe-mb.on[b-ldy4dk4vln]{ background:#2e7d32; border-color:#2e7d32; color:#fff; }
.qe-code[b-ldy4dk4vln]{ font-size:.72rem; color:var(--mud-palette-text-secondary,#73656d); font-weight:700; }
.qe-title2[b-ldy4dk4vln]{ font-weight:500; }
.qe-link[b-ldy4dk4vln]{ color:var(--mud-palette-primary,#880e4f); cursor:pointer; text-decoration:none; }
.qe-link:hover[b-ldy4dk4vln]{ text-decoration:underline; }
.qe-ltag[b-ldy4dk4vln]{ font-size:.6rem; text-transform:uppercase; letter-spacing:.4px; color:#fff; border-radius:4px; padding:1px 5px; font-weight:700; }
.qe-ltag:empty[b-ldy4dk4vln]{ display:none; }
.qe-special[b-ldy4dk4vln]{ background:#c62828; } .qe-charge[b-ldy4dk4vln]{ background:#1565c0; } .qe-kit[b-ldy4dk4vln]{ background:#0b8457; }
.qe-comment[b-ldy4dk4vln]{ background:#6c7a89; } .qe-note[b-ldy4dk4vln]{ background:#34495e; } .qe-apostleproduct[b-ldy4dk4vln]{ background:#b8860b; }
/* Inline cost/profit under the price + discount (legacy shows them integrated, not as separate columns). */
.qe-was[b-ldy4dk4vln]{ color:var(--mud-palette-text-secondary,#9b8e95); text-decoration:line-through; font-size:.76rem; margin-right:5px; }
.qe-cost[b-ldy4dk4vln]{ font-size:.72rem; color:var(--mud-palette-text-secondary,#73656d); }
.qe-pf[b-ldy4dk4vln]{ font-weight:700; font-size:.74rem; white-space:nowrap; }
.qe-pf.ok[b-ldy4dk4vln]{ color:#2e7d32; } .qe-pf.low[b-ldy4dk4vln]{ color:#b8860b; } .qe-pf.bad[b-ldy4dk4vln]{ color:#c62828; }
.qe-noitems[b-ldy4dk4vln]{ padding:24px; text-align:center; color:var(--mud-palette-text-secondary,#73656d); }

/* Bottom action toolbar (selection actions) */
.qe-actions[b-ldy4dk4vln]{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 14px; flex:0 0 auto;
    border-top:1px solid var(--mud-palette-table-lines,#e9e1e6); background:var(--mud-palette-surface,#fff); }
.qe-selcount[b-ldy4dk4vln]{ font-size:.78rem; color:var(--mud-palette-text-secondary,#73656d); font-weight:600; margin-right:auto; }

/* Summary */
.qe-summary[b-ldy4dk4vln]{ flex:0 0 auto; border-top:1px solid var(--mud-palette-table-lines,#e9e1e6); padding:10px 14px; background:var(--mud-palette-surface,#fff); }
.qe-sumrow[b-ldy4dk4vln]{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--mud-palette-text-secondary,#73656d); padding:3px 0; }
.qe-sumrow b[b-ldy4dk4vln]{ color:var(--mud-palette-text-primary,#231b20); }
.qe-disc[b-ldy4dk4vln]{ color:#2e7d32; }
.qe-total[b-ldy4dk4vln]{ font-size:1.05rem; font-weight:700; border-top:1px solid var(--mud-palette-table-lines,#e9e1e6); margin-top:4px; padding-top:8px; }
.qe-total b[b-ldy4dk4vln]{ font-size:1.1rem; }
.qe-pfbox[b-ldy4dk4vln]{ display:flex; justify-content:space-between; background:#edf7ed; border-radius:6px; padding:8px 10px; margin-top:8px; font-size:.84rem; }

/* COMPACT layout — driven by the PANEL width (the .qw-body container), not the viewport. When the panel
   is narrow the line table collapses to labelled cards and the header/add-bar stack, so it works even on a
   desktop screen with a narrow docked panel. */
@container qwpanel (max-width: 660px){
    .qe-head[b-ldy4dk4vln]{ flex-direction:column; align-items:stretch; gap:8px; }

    /* Keep the product search + "+ Add" button on ONE row: the search shrinks, the button sits to its right.
       The inline 6-button row is hidden and replaced by the speed-dial. The add-bar is raised into its own
       stacking context so the speed-dial fan opens ON TOP of the line table (not clipped behind it). */
    .qe-addbar[b-ldy4dk4vln]{ flex-wrap:wrap; gap:8px; position:relative; z-index:40; }
    .qe-search[b-ldy4dk4vln]{ flex:1 1 0; min-width:150px; }
    .qe-addbtns[b-ldy4dk4vln]{ display:none; }
    .qe-addbar[b-ldy4dk4vln]  .qe-addmenu{ display:inline-flex; flex:0 0 auto; }

    /* Target MudBlazor's own table classes (with .mud-table-root for specificity) so these beat MudBlazor's
       base table-display rules. Collapses the MudTable into labelled cards. */
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root{ display:block; }
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root tbody{ display:block; }
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-head{ display:none; }
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-row{
        display:block; border:1px solid var(--mud-palette-table-lines,#e9e1e6); border-radius:10px;
        margin:8px 10px; padding:6px 10px; background:var(--mud-palette-surface,#fff);
    }
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-cell{
        display:flex; align-items:center; justify-content:space-between;
        text-align:right !important; padding:4px 0; border:0;
    }
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-cell::before{
        content:attr(data-label); color:var(--mud-palette-text-secondary,#73656d);
        font-size:.7rem; text-transform:uppercase; letter-spacing:.3px; font-weight:700;
        text-align:left; margin-right:10px;
    }
    /* Item cell spans the card width, label hidden */
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-cell[data-label="Item"]{ flex-direction:column; align-items:flex-start; text-align:left !important; }
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-cell[data-label="Item"]::before,
    .qe-tablewrap[b-ldy4dk4vln]  .mud-table-root .mud-table-cell[data-label=""]::before{ display:none; }
}

/* Phone-width panel: the product search takes its OWN full-width row; the "+ Add" menu and the Cost/profit
   toggle wrap onto the row beneath it. The result list still overlays the content below (absolute + z-index),
   so the dropdown hovers over the "+ Add"/toggle row and the line table rather than pushing them down. */
@container qwpanel (max-width: 480px){
    .qe-search[b-ldy4dk4vln]{ flex:1 1 100%; min-width:0; }
    .qe-results[b-ldy4dk4vln]{ z-index:1300; }
}
/* /Components/Quote/QuoteWorkspace.razor.rz.scp.css */
/* Scope wrapper for all MudBlazor markup — layout-neutral (fixed-position children position to the viewport
   regardless), it exists only so the build-scoped MudBlazor CSS (.mud-scope …) has its ancestor. */
.mud-scope[b-wdnvpl7yxm]{ display:contents; }

/* Tab (closed state) — sits on the same edge the panel is docked to / slides from. */
.qw-tab[b-wdnvpl7yxm]{
  position:fixed; z-index:1400; display:flex; align-items:center; gap:6px;
  background:#880e4f; color:#fff; border:0; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.qw-tab:hover[b-wdnvpl7yxm]{ background:#6d0b3f; }
.qw-tab .material-symbols-outlined[b-wdnvpl7yxm]{ font-size:22px; }
.qw-tab-label[b-wdnvpl7yxm]{ font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }

/* Vertical tabs (left/right): stacked icon over rotated label */
.qw-tab-right[b-wdnvpl7yxm], .qw-tab-left[b-wdnvpl7yxm]{ flex-direction:column; padding:14px 6px; top:50%; transform:translateY(-50%); }
.qw-tab-right[b-wdnvpl7yxm]{ right:0; border-radius:10px 0 0 10px; }
.qw-tab-left[b-wdnvpl7yxm]{ left:0; border-radius:0 10px 10px 0; }
.qw-tab-right .qw-tab-label[b-wdnvpl7yxm], .qw-tab-left .qw-tab-label[b-wdnvpl7yxm]{ writing-mode:vertical-rl; transform:rotate(180deg); }

/* Horizontal tabs (top/bottom): icon beside label, centred on the edge */
.qw-tab-top[b-wdnvpl7yxm], .qw-tab-bottom[b-wdnvpl7yxm]{ flex-direction:row; padding:6px 16px; left:50%; transform:translateX(-50%); }
.qw-tab-top[b-wdnvpl7yxm]{ top:0; border-radius:0 0 10px 10px; }
.qw-tab-bottom[b-wdnvpl7yxm]{ bottom:0; border-radius:10px 10px 0 0; }

/* Root overlay layer. No scrim — the panel docks/overlays an edge and the rest of the page stays usable.
   pointer-events:none on the layer so only the panel itself is interactive (and the page beneath stays
   clickable around it). */
.qw-root[b-wdnvpl7yxm]{ position:fixed; inset:0; z-index:1390; pointer-events:none; overflow:hidden; }

/* Panel: positioned at the docked edge; ALWAYS in the DOM and slid in/out via transform. */
.qw-panel[b-wdnvpl7yxm]{
  position:absolute; background:var(--mud-palette-background, #f7f4f6); pointer-events:auto;
  display:flex; flex-direction:column; box-shadow:0 0 30px rgba(0,0,0,.28);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}

/* Dock geometry */
.qw-full   .qw-panel[b-wdnvpl7yxm]{ inset:0; }
.qw-right  .qw-panel[b-wdnvpl7yxm]{ top:0; bottom:0; right:0; width:var(--qw-size,25vw); min-width:320px; max-width:95vw; }
.qw-left   .qw-panel[b-wdnvpl7yxm]{ top:0; bottom:0; left:0;  width:var(--qw-size,25vw); min-width:320px; max-width:95vw; }
.qw-top    .qw-panel[b-wdnvpl7yxm]{ left:0; right:0; top:0;    height:var(--qw-size,33vh); min-height:200px; max-height:95vh; }
.qw-bottom .qw-panel[b-wdnvpl7yxm]{ left:0; right:0; bottom:0; height:var(--qw-size,33vh); min-height:200px; max-height:95vh; }

/* Closed: slide the panel off-screen in its dock direction (so open/close both animate). */
.qw-closed.qw-full   .qw-panel[b-wdnvpl7yxm],
.qw-closed.qw-right  .qw-panel[b-wdnvpl7yxm]{ transform:translateX(102%); }
.qw-closed.qw-left   .qw-panel[b-wdnvpl7yxm]{ transform:translateX(-102%); }
.qw-closed.qw-top    .qw-panel[b-wdnvpl7yxm]{ transform:translateY(-102%); }
.qw-closed.qw-bottom .qw-panel[b-wdnvpl7yxm]{ transform:translateY(102%); }
.qw-open .qw-panel[b-wdnvpl7yxm]{ transform:none; }

/* Splitter handle on the panel's inner edge */
.qw-splitter[b-wdnvpl7yxm]{ position:absolute; z-index:2; background:transparent; }
.qw-splitter:hover[b-wdnvpl7yxm]{ background:rgba(136,14,79,.25); }
.qw-splitter-right[b-wdnvpl7yxm]{ left:-3px; top:0; bottom:0; width:6px; cursor:ew-resize; }
.qw-splitter-left[b-wdnvpl7yxm]{ right:-3px; top:0; bottom:0; width:6px; cursor:ew-resize; }
.qw-splitter-top[b-wdnvpl7yxm]{ bottom:-3px; left:0; right:0; height:6px; cursor:ns-resize; }
.qw-splitter-bottom[b-wdnvpl7yxm]{ top:-3px; left:0; right:0; height:6px; cursor:ns-resize; }

/* Title bar */
.qw-titlebar[b-wdnvpl7yxm]{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:#880e4f; color:#fff; }
.qw-titleicon[b-wdnvpl7yxm]{ font-size:20px; }
.qw-title[b-wdnvpl7yxm]{ font-weight:600; font-size:.95rem; }
.qw-spacer[b-wdnvpl7yxm]{ flex:1; }
.qw-ctl[b-wdnvpl7yxm]{ width:34px; height:34px; border:0; background:transparent; color:#fff; border-radius:8px; cursor:pointer; display:grid; place-items:center; }
.qw-ctl:hover[b-wdnvpl7yxm]{ background:rgba(255,255,255,.16); }
.qw-close:hover[b-wdnvpl7yxm]{ background:#c62828; }
.qw-ctl .material-symbols-outlined[b-wdnvpl7yxm]{ font-size:20px; }

/* "Float to quarter" only makes sense on desktop widths */
@media (max-width:768px){ .qw-float-only[b-wdnvpl7yxm]{ display:none; } }

/* Body — a CSS container so the editor inside can respond to the PANEL's width (not the viewport),
   switching to its compact layout when the panel is narrow regardless of screen size. */
/* min-height:0 lets this flex item be bounded by the panel (not grow to its content), so the editor's line
   table can scroll internally under its fixed header and virtualize. overflow:hidden — the table scrolls, not
   the whole editor. */
.qw-body[b-wdnvpl7yxm]{ flex:1; min-height:0; overflow:hidden; container-type:inline-size; container-name:qwpanel; }
.qw-placeholder[b-wdnvpl7yxm]{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--mud-palette-text-secondary,#73656d); }
.qw-placeholder .material-symbols-outlined[b-wdnvpl7yxm]{ font-size:48px; opacity:.5; }
.qw-muted[b-wdnvpl7yxm]{ font-size:.8rem; }