/* AM – Apparel Designer · editor (GĐ02). Every selector is scoped to amad-. */
.amad-shell.amad-shell--editor .amad-shell__stage { display: block; padding: 0; overflow: hidden; }
.amad-shell.amad-shell--editor .amad-shell__adapter { max-width: none; height: 100%; }
.amad-shell.amad-shell--editor .amad-shell__bar { gap: 8px; }

.amad-shell .amad-ed {
	--amad-toolbar-h: 64px;
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 312px;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-areas: "rail stage panel" "rail stage actions";
	height: 100%;
	min-height: 0;
	background: var(--amad-stage);
	color: var(--amad-ink);
}
.amad-shell .amad-ed button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.amad-shell .amad-ed button:focus-visible { outline: 2px solid var(--amad-accent); outline-offset: 2px; }
.amad-shell .amad-ed svg, .amad-shell .amad-ed__bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* top bar (inside the shell header) */
.amad-shell .amad-ed__bar { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.amad-shell .amad-ed__zones { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--amad-stage); }
.amad-shell .amad-ed__zone-tab { min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font-size: .875rem; font-weight: 600; color: var(--amad-muted); }
.amad-shell .amad-ed__zone-tab.is-active { background: var(--amad-surface); color: var(--amad-accent); box-shadow: 0 1px 2px rgba(27, 34, 48, .15); }
.amad-shell .amad-ed__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; }
.amad-shell .amad-ed__icon-btn:disabled { opacity: .35; cursor: default; }
.amad-shell .amad-ed__icon-btn .amad-ed__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.amad-shell .amad-ed__save { min-width: 64px; font-size: .75rem; color: var(--amad-muted); white-space: nowrap; }
.amad-shell .amad-ed__save.is-error { color: var(--amad-danger); }

/* tool rail */
.amad-shell .amad-ed__rail { grid-area: rail; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: var(--amad-surface); border-right: 1px solid var(--amad-line); }
.amad-shell .amad-ed__tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 6px 4px; border: 0; border-radius: 10px; background: transparent; font-size: .75rem; font-weight: 600; }
.amad-shell .amad-ed__tool:hover { background: var(--amad-accent-soft); color: var(--amad-accent); }

/* stage + garment */
.amad-shell .amad-ed__stage { grid-area: stage; position: relative; isolation: isolate; /* canvas layers never paint over panels/sheets */ min-height: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: contain; }
.amad-shell .amad-ed__garment { position: absolute; transition: transform .15s ease-out; }
.amad-shell .amad-ed svg.amad-ed__fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: none; fill: none; }
.amad-shell .amad-ed__mockup[hidden] { display: none; }
.amad-shell .amad-ed__mockup { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.amad-shell .amad-ed__zone { position: absolute; outline: 1px dashed rgba(47, 74, 158, .55); }
.amad-shell .amad-ed__safe { position: absolute; border: 1px dashed rgba(47, 74, 158, .3); pointer-events: none; }
.amad-shell .amad-ed__objects { position: absolute; inset: 0; overflow: hidden; } /* artwork visually contained by the print area */
.amad-shell .amad-ed__obj { position: absolute; transform-origin: center center; cursor: move; touch-action: none; }
.amad-shell .amad-ed__img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.amad-shell .amad-ed__obj--text { display: flex; align-items: center; }
.amad-shell .amad-ed__obj[hidden] { display: none; }
.amad-shell .amad-ed__text { width: 100%; box-sizing: border-box; white-space: pre-wrap; word-break: break-word; pointer-events: none; }

/* selection: small visual handles, large touch targets */
.amad-shell .amad-ed__sel { position: absolute; box-sizing: border-box; outline: 1.5px solid var(--amad-accent); transform-origin: center center; cursor: move; touch-action: none; }
.amad-shell .amad-ed__sel.is-locked { outline-style: dashed; outline-color: var(--amad-muted); cursor: default; }
.amad-shell .amad-ed__sel.is-locked .amad-ed__handle { display: none; }
.amad-shell .amad-ed__handle { position: absolute; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--amad-accent); border-radius: 50%; background: var(--amad-surface); touch-action: none; }
.amad-shell .amad-ed__handle::after { content: ""; position: absolute; inset: -10px; }
.amad-shell .amad-ed__handle--scale { right: -8px; bottom: -8px; cursor: nwse-resize; }
.amad-shell .amad-ed__handle--rotate { top: -32px; left: 50%; margin-left: -7px; cursor: grab; }
.amad-shell .amad-ed__handle--rotate::before { content: ""; position: absolute; left: 50%; top: 12px; width: 1.5px; height: 18px; margin-left: -.75px; background: var(--amad-accent); }
@media (pointer: coarse) {
	.amad-shell .amad-ed__handle::after { inset: -16px; }
}

.amad-shell .amad-ed__quality { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--amad-surface); box-shadow: 0 1px 3px rgba(27, 34, 48, .15); }
.amad-shell .amad-ed__quality:empty { display: none; }
.amad-shell .amad-ed__quality.is-pass, .amad-shell .amad-ed__dpi.is-pass { color: #10703b; }
.amad-shell .amad-ed__quality.is-warn, .amad-shell .amad-ed__dpi.is-warn { color: #8a5a00; }
.amad-shell .amad-ed__quality.is-block, .amad-shell .amad-ed__dpi.is-block { color: var(--amad-danger); }
.amad-shell .amad-ed__demo { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 999px; background: #fff4e5; color: #7a4b00; font-size: .75rem; font-weight: 600; box-shadow: 0 1px 3px rgba(27, 34, 48, .15); }
.amad-shell .amad-ed__demo[hidden] { display: none; }
.amad-shell .amad-ed__font-sample { margin-top: -4px; padding: 6px 10px; border: 1px dashed var(--amad-line); border-radius: 8px; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.amad-shell .amad-ed__toast { position: absolute; top: 12px; left: 50%; max-width: calc(100% - 24px); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: var(--amad-ink); color: #fff; font-size: .875rem; line-height: 1.4; z-index: 5; }
.amad-shell .amad-ed__toast.is-error { background: var(--amad-danger); }
.amad-shell .amad-ed__toast[hidden] { display: none; }

/* properties / layers / assets panel */
.amad-shell .amad-ed__panel { grid-area: panel; min-height: 0; overflow: auto; padding: 12px 14px; background: var(--amad-surface); border-left: 1px solid var(--amad-line); }
.amad-shell .amad-ed__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.amad-shell .amad-ed__panel-title { margin: 0; font-size: .9375rem; font-weight: 600; }
.amad-shell .amad-ed__panel-close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 1.4rem; line-height: 1; }
.amad-shell .amad-ed__hint { margin: 6px 0; color: var(--amad-muted); font-size: .875rem; }
.amad-shell .amad-ed__props { display: flex; flex-direction: column; gap: 10px; }
.amad-shell .amad-ed__textarea { width: 100%; box-sizing: border-box; min-height: 72px; padding: 8px 10px; border: 1px solid var(--amad-line); border-radius: 8px; font: inherit; font-size: 16px; resize: vertical; }
.amad-shell .amad-ed__field { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .875rem; }
.amad-shell .amad-ed__field-label { color: var(--amad-muted); }
.amad-shell .amad-ed__num { width: 92px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--amad-line); border-radius: 8px; font: inherit; font-size: 16px; }
.amad-shell .amad-ed__select { min-width: 160px; max-width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--amad-line); border-radius: 8px; background: var(--amad-surface); font: inherit; font-size: 16px; }
.amad-shell .amad-ed__color { width: 48px; height: 36px; padding: 0; border: 1px solid var(--amad-line); border-radius: 8px; background: none; }
.amad-shell .amad-ed__seg { display: inline-flex; flex-wrap: wrap; gap: 4px; } /* real font variants can be 4–6 buttons (Asset Library families) */
.amad-shell .amad-ed__seg-btn { min-height: 36px; padding: 0 12px; border: 1px solid var(--amad-line); border-radius: 8px; background: var(--amad-surface); font-size: .875rem; }
.amad-shell .amad-ed__seg-btn.is-active { border-color: var(--amad-accent); background: var(--amad-accent-soft); color: var(--amad-accent); font-weight: 600; }
.amad-shell .amad-ed__dpi { margin: 0; font-weight: 600; font-size: .875rem; }
.amad-shell .amad-ed__obj-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.amad-shell .amad-ed__act { min-height: 34px; padding: 0 10px; border: 1px solid var(--amad-line); border-radius: 8px; background: var(--amad-surface); font-size: .8125rem; }
.amad-shell .amad-ed__act.is-danger { color: var(--amad-danger); border-color: rgba(168, 38, 27, .35); }
.amad-shell .amad-ed__layers, .amad-shell .amad-ed__issues { margin: 0; padding: 0; list-style: none; }
.amad-shell .amad-ed__layer { padding: 8px 0; border-top: 1px solid var(--amad-line); }
.amad-shell .amad-ed__layer.is-selected .amad-ed__layer-name { color: var(--amad-accent); font-weight: 600; }
.amad-shell .amad-ed__layer.is-hidden .amad-ed__layer-name { opacity: .5; }
.amad-shell .amad-ed__layer-name { display: block; width: 100%; margin-bottom: 6px; padding: 0; border: 0; background: none; text-align: left; font-size: .875rem; overflow-wrap: anywhere; }
.amad-shell .amad-ed__assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.amad-shell .amad-ed__asset { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--amad-line); border-radius: 10px; background: var(--amad-surface); }
.amad-shell .amad-ed__asset img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.amad-shell .amad-ed__asset-kind { font-size: .6875rem; color: var(--amad-muted); }
.amad-shell .amad-ed__issue { border-top: 1px solid var(--amad-line); }
.amad-shell .amad-ed__issue-btn { display: block; width: 100%; padding: 10px 0; border: 0; background: none; text-align: left; font-size: .875rem; }
.amad-shell .amad-ed__issue.is-block .amad-ed__issue-btn { color: var(--amad-danger); }
.amad-shell .amad-ed__issue.is-warn .amad-ed__issue-btn { color: #8a5a00; }

/* completion */
.amad-shell .amad-ed__actions { grid-area: actions; padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--amad-surface); border-left: 1px solid var(--amad-line); border-top: 1px solid var(--amad-line); }
.amad-shell .amad-ed__done { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: var(--amad-accent); color: #fff !important; font-weight: 600; }
.amad-shell .amad-ed__done:disabled { opacity: .6; cursor: progress; }

/* mobile: canvas dominant, bottom toolbar, contextual bottom sheet */
@media (max-width: 767px) {
	.amad-shell.amad-shell--editor .amad-shell__title { display: none; }
	.amad-shell.amad-shell--editor .amad-shell__back-label { display: none; }
	.amad-shell .amad-ed__bar { gap: 2px; margin-left: 0; flex: 1; justify-content: space-between; }
	.amad-shell .amad-ed__zone-tab { padding: 0 10px; }
	.amad-shell .amad-ed__save { min-width: 0; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
	.amad-shell .amad-ed {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas: "stage" "rail"; /* GĐ03-B: toolbar = Ảnh · Chữ · Hình · Lớp only */
	}
	.amad-shell .amad-ed__rail { flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 4px calc(env(safe-area-inset-bottom, 0px) + 4px); border-right: 0; border-top: 1px solid var(--amad-line); }
	.amad-shell .amad-ed__tool { flex: 1; min-height: 52px; font-size: .6875rem; }
	.amad-shell .amad-ed__actions { display: none; } /* GĐ03-B: Done moved to the top bar as "Xong" */
	.amad-shell .amad-ed__done { min-height: 44px; padding: 0 14px; font-size: .875rem; }
	.amad-shell .amad-ed__done .amad-ed__label { white-space: nowrap; }
	/* GĐ03-B: compact contextual sheet directly above the measured toolbar (incl. safe area); content scrolls inside. */
	.amad-shell .amad-ed__panel {
		display: none;
		position: absolute; left: 0; right: 0; bottom: var(--amad-toolbar-h);
		max-height: 30vh; max-height: 30dvh; z-index: 6;
		padding: 6px 12px 8px;
		overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
		border-left: 0; border-top: 1px solid var(--amad-line); border-radius: 14px 14px 0 0;
		box-shadow: 0 -6px 18px rgba(27, 34, 48, .14);
	}
	.amad-shell .amad-ed.has-panel .amad-ed__panel { display: block; }
	.amad-shell .amad-ed.is-keyboard .amad-ed__panel { max-height: calc(var(--amad-vvh, 100vh) * .28); }
	.amad-shell .amad-ed__panel-head { margin-bottom: 4px; }
	.amad-shell .amad-ed__panel-close { width: 32px; height: 32px; }
	.amad-shell .amad-ed__props { gap: 6px; }
	.amad-shell .amad-ed__textarea { min-height: 0; padding: 6px 8px; line-height: 1.25; resize: none; }
	.amad-shell .amad-ed__field { min-height: 34px; }
	.amad-shell .amad-ed__select { flex: 1; min-width: 0; min-height: 34px; }
	.amad-shell .amad-ed__num { width: 76px; min-height: 34px; }
	.amad-shell .amad-ed__color { width: 44px; height: 34px; }
	.amad-shell .amad-ed__seg { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
	.amad-shell .amad-ed__seg-btn { flex-shrink: 0; min-height: 34px; padding: 0 10px; }
	.amad-shell .amad-ed__pair { display: flex; gap: 12px; }
	.amad-shell .amad-ed__pair > .amad-ed__field { flex: 1; min-width: 0; }
	.amad-shell .amad-ed__adv { border-top: 1px solid var(--amad-line); }
	.amad-shell .amad-ed__adv-sum { display: flex; align-items: center; min-height: 34px; font-size: .875rem; font-weight: 600; color: var(--amad-accent); cursor: pointer; }
	.amad-shell .amad-ed__adv-body { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
	.amad-shell .amad-ed__font-sample { margin-top: 0; padding: 4px 8px; font-size: 15px; }
	.amad-shell .amad-ed__dpi, .amad-shell .amad-ed__props > .amad-ed__hint { margin: 0; font-size: .8125rem; line-height: 1.3; }
	.amad-shell .amad-ed__obj-actions { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; }
	.amad-shell .amad-ed__act { flex-shrink: 0; min-width: 40px; min-height: 34px; }
	.amad-shell .amad-ed__layer { padding: 6px 0; }

	/* GĐ03-B final: editor-level Done, top-right, separated from undo/redo */
	.amad-shell .amad-ed__xong { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; margin-left: 6px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--amad-accent); color: #fff !important; font-size: .875rem; font-weight: 600; }
	.amad-shell .amad-ed__xong svg { width: 18px; height: 18px; stroke-width: 2.2; }
	.amad-shell .amad-ed__xong .amad-ed__label { white-space: nowrap; }
	.amad-shell .amad-ed__xong:disabled { opacity: .6; cursor: progress; }
	/* room for the View/Zone tabs next to Xong: on narrow phones the "Đã lưu/Đang lưu" text shows only when saving failed */
	@media (max-width: 400px) { .amad-shell .amad-ed__save:not(.is-error) { display: none; } .amad-shell .amad-ed__xong { padding: 0 10px; } }

	/* GĐ03-B final: drag peek — CSS collapse only (panel DOM/state kept); no transition so drag-end measuring is exact */
	.amad-shell .amad-ed__panel-peek { display: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: .875rem; color: var(--amad-accent); }
	.amad-shell .amad-ed.is-peek .amad-ed__panel { max-height: 44px; overflow: hidden; padding-top: 4px; padding-bottom: 4px; cursor: pointer; }
	.amad-shell .amad-ed.is-peek .amad-ed__panel-head { margin-bottom: 0; }
	.amad-shell .amad-ed.is-peek .amad-ed__panel-close { display: none; }
	.amad-shell .amad-ed.is-peek .amad-ed__panel-peek { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }

	/* GĐ03-B final: "Hoàn tất thiết kế?" confirmation sheet */
	.amad-shell .amad-ed__confirm { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(27, 34, 48, .38); }
	.amad-shell .amad-ed__confirm-box { width: 100%; box-sizing: border-box; padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); border-radius: 16px 16px 0 0; background: var(--amad-surface); color: var(--amad-ink); box-shadow: 0 -8px 24px rgba(27, 34, 48, .18); }
	.amad-shell .amad-ed__confirm-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
	.amad-shell .amad-ed__confirm-actions { display: flex; gap: 10px; }
	.amad-shell .amad-ed__confirm-actions button { flex: 1; min-height: 44px; border-radius: 10px; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
	.amad-shell .amad-ed__confirm-stay { border: 1px solid var(--amad-line); background: var(--amad-surface); color: var(--amad-ink); }
	.amad-shell .amad-ed__confirm-go { border: 0; background: var(--amad-accent); color: #fff; }
	.amad-shell .amad-ed__confirm-actions button:focus-visible { outline: 2px solid var(--amad-accent); outline-offset: 2px; }
	.amad-shell .amad-ed__quality { bottom: 8px; left: 8px; }
}

@media (min-width: 768px) { .amad-shell .amad-ed__xong { display: none; } } /* GĐ03-B: Xong is mobile-only; desktop keeps its Hoàn tất column */

/* Generic View/Zone tabs remain usable with multiple canvases on mobile. */
.amad-shell .amad-ed__zones{min-width:0;overflow-x:auto;max-width:55vw;flex-wrap:nowrap;scrollbar-width:thin}
.amad-shell .amad-ed__zone-tab{flex-shrink:0;white-space:nowrap}

.amad-shell.amad-shell--editor { grid-template-columns: minmax(0, 1fr); }
.amad-shell.amad-shell--editor .amad-shell__stage { min-width: 0; }