/* v0.11.0 UI: menu caret, quote group blocks, icon buttons with hover labels, drag handles, sticky footers, centered toast. */
nav details>summary:after,nav details[open]>summary:after{content:'';flex:0 0 18px;width:18px;height:18px;margin-left:auto;background:currentColor;-webkit-mask:url(/static/icons/modern/chevron-down.svg) center/contain no-repeat;mask:url(/static/icons/modern/chevron-down.svg) center/contain no-repeat;color:#8d939d;transition:transform .2s ease}
nav details[open]>summary:after{transform:rotate(180deg);color:#79a9ff}

/* Icon buttons show their label as a tooltip on hover/focus. */
.icon-btn,.drag-handle{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#475467}
.icon-btn .solid-icon,.drag-handle .solid-icon,.group-toggle .solid-icon{width:17px;height:17px;flex-basis:17px}
.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--brand);background:#f2f6ff;color:var(--brand)}
.icon-btn.danger{color:#d92d20}.icon-btn.danger:hover,.icon-btn.danger:focus-visible{border-color:#d92d20;background:#fef3f2;color:#d92d20}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;z-index:30;padding:5px 9px;border-radius:6px;background:#1d2433;color:#fff;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;transform:translateX(-50%);pointer-events:none}
.icon-actions{display:flex;gap:6px;margin-left:auto}
.drag-handle[data-tip]:hover::after,.drag-handle[data-tip]:focus-visible::after{top:50%;bottom:auto;left:calc(100% + 6px);transform:translateY(-50%)}
.drag-handle{border-color:transparent;background:transparent;color:#98a2b3;cursor:grab;touch-action:none}
.drag-handle:hover{background:#f2f4f7;color:#475467}
body.is-sorting,body.is-sorting *{cursor:grabbing!important;user-select:none}
.sorting{position:relative;z-index:5;opacity:.92;box-shadow:0 10px 30px #10182833;outline:2px dashed var(--brand)}

/* Quote editor: hạng mục blocks. */
.products-head{align-items:center}
.group-toggle{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:#475467}
.group-toggle:hover{background:#eef4ff;color:var(--brand)}
.group-toggle .solid-icon{transition:transform .2s}
.group-toggle[aria-expanded=false] .solid-icon{transform:rotate(-90deg)}
.card-collapsed #groups,.card-collapsed .products-head~p{display:none}
#groups{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.group-block{border:1px solid #d5dfee;border-radius:12px;background:#fff;overflow:visible}
.group-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #d5dfee;border-radius:12px 12px 0 0;background:#eef4ff}
.group-block.collapsed .group-head{border-bottom:0;border-radius:12px}
.group-block.collapsed .group-body{display:none}
.group-no{min-width:30px;color:var(--brand);font-weight:700;text-align:center}
.group-head input{flex:1 1 260px;max-width:380px;font-weight:700}
.group-type,.group-count{color:#667085;font-size:13px;white-space:nowrap}
.group-count{padding:3px 8px;border-radius:999px;background:#fff}
.group-body{padding:4px 16px 16px}
.group-body .line-editor{margin-top:12px;border:1px solid #eaecf0;border-radius:10px;background:#fcfcfd}
.group-body .line-editor:last-of-type{border-bottom:1px solid #eaecf0}
.line-head{align-items:center;margin-bottom:12px}
.line-head h3{flex:1}
.group-empty{margin:14px 0}
.add-line-btn{display:inline-flex;align-items:center;gap:8px;margin-top:14px}
.add-line-btn .solid-icon{width:16px;height:16px;flex-basis:16px}

/* Sticky, opaque action bars: nothing scrolls visibly underneath. */
.actions{background:#fff;box-shadow:0 -6px 16px #1018280f}
#dialog .preview-actions,#dialog .dialog-actions{position:sticky;bottom:-20px;z-index:4;margin:16px -20px -20px;padding:12px 20px;border-top:1px solid #eaecf0;background:#fff;box-shadow:0 -6px 16px #1018280f}
#dialog .preview-notice{position:sticky;top:-20px;z-index:4}

/* Toasts appear in the middle of the screen. */
#toast{top:50%;right:auto;bottom:auto;left:50%;max-width:min(520px,90vw);padding:16px 24px;border-radius:10px;box-shadow:0 20px 50px #10182840;text-align:center;transform:translate(-50%,-50%)}

/* Roles buttons. */
.role-config:hover,.role-config:focus-visible{border-color:var(--brand);background:var(--brand);color:#fff}

/* Progress tiles: colour by level once they have a number. */
.attention-card .attention-tile.has.in_progress{border-color:#b2ddff;background:#eff8ff;color:#175cd3}.attention-tile.has.in_progress strong{color:#1570ef}
.attention-card .attention-tile.has.pending{border-color:#fedf89;background:#fffaeb;color:#b54708}.attention-tile.has.pending strong{color:#dc6803}
.attention-card .attention-tile.has.completed{border-color:#abefc6;background:#ecfdf3;color:#067647}.attention-tile.has.completed strong{color:#079455}
.attention-card .attention-tile.has.cancelled{border-color:#d0d5dd;background:#f2f4f7;color:#344054}.attention-tile.has.cancelled strong{color:#475467}

/* Media dialog: large file button. */
.media-footer .native-file-row{gap:12px;width:auto;min-width:0}
.media-file-button{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:8px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 20%,transparent)}
.media-file-button:hover{background:var(--brand-hover)}
.media-file-button:focus-within{outline:2px solid var(--brand);outline-offset:3px}
.media-file-button .solid-icon{width:18px;height:18px;flex-basis:18px}
.media-file-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.media-file-name{max-width:260px;overflow:hidden;color:#475467;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.group-head{flex-wrap:wrap}.group-head input{flex-basis:100%;max-width:none;order:5}.media-file-name{max-width:120px}}