@use 'variables' as *;
@use 'auxiliary-panel';

.modula-takeover__shell {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	color: var(--mod-se-shell-ink);
}

// AdminUiScope's root (sidebar, canvas toolbar, device pill, fields) never
// takes part in layout; tokens and type still inherit through it.
.modula-admin-ui.modula-takeover__admin-ui-scope {
	display: contents;
}

/* Redesign: stage beside sidebar; optional AuxiliaryPanel column. */
.modula-takeover__shell--redesign-topbar-only,
.modula-takeover__shell--redesign-sidebar {

	/* Canvas column under the app topbar: toolbar chrome, then padded stage/artboard. */
	.modula-takeover__canvas-column {
		flex: 1;
		min-width: 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		overflow: hidden;
	}

	/*
	 * The canvas's stage: dark in both appearances, the gallery renders on it.
	 * No text colour here, so the frontend render keeps its own; chrome drawn
	 * on the stage, and a gallery's default text outside the image
	 * (`resolveBelowImagePreviewTextColor`), read the stage inks.
	 */
	.modula-takeover__redesign-stage {
		--modula-takeover-stage-bg: #{$mod-takeover-stage-bg};
		--modula-takeover-stage-ink: #{$mod-takeover-stage-ink};
		--modula-takeover-stage-ink-muted: #{$mod-takeover-stage-ink-muted};
		flex: 1;
		min-height: 0;
		min-width: 0;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: $mod-takeover-canvas-gap;
		padding: $mod-space-32;
		box-sizing: border-box;
		background: var(--modula-takeover-stage-bg);
		/* Keep canvas content inside the stage, off the toolbar. */
		overflow: hidden;
	}

	/* Positions the device pill over the artboard. */
	.modula-takeover__preview-column {
		position: relative;
		flex: 1;
		min-width: 0;
		min-height: 0;
	}

	/*
	 * Artboard: desktop = flush to stage (no raised paper / inset).
	 * Tablet/mobile keep device frames unless the editor clears them for its
	 * canvas content (`device-canvas-on-stage`, _device-frame.scss); each
	 * editor styles its own canvas body.
	 */
	.modula-takeover__preview-card {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	.modula-takeover__preview-card:has(> .modula-takeover__preview-wrap:not(.modula-takeover__preview-wrap--tablet):not(.modula-takeover__preview-wrap--mobile)) {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}

	.modula-takeover__aux-panel {
		/* Keep room for the previewer — same scale as sorting aux. */
		flex: 0 0 min(320px, 36vw);
		width: min(320px, 36vw);
		max-width: 420px;
		min-width: 0;
		align-self: stretch;
	}
}