// Takeover header on admin-ui (canvas "1 · Editor" header). The top bar
// renders inside AdminUiRoot, so colors are admin-ui tokens and follow the
// editor appearance through `is-dark`.

// Loading admin-ui here gives every editor that uses this partial the
// primitives the header needs (Popover, Menu, CopyField, ConfirmDialog).
// Sass emits a module once per build, so an editor that also loads
// admin-ui does not get the CSS twice.
@use '../../admin-ui/styles' as admin-ui-styles;
@use '../../admin-ui/styles/mixins' as admin;
@use 'variables' as *;

$topbar-height: 64px;

.modula-takeover__topbar-root {
	position: relative;
	// Above the workspace, so the header popovers cover the panel and canvas.
	z-index: 20;
	flex-shrink: 0;
}

// Columns line up with the rail, the settings panel and the canvas.
.modula-takeover__topbar {
	display: grid;
	grid-template-columns:
		var(--mod-se-rail-w, #{$mod-se-rail-w})
		var(--mod-se-panel-w, #{$mod-se-panel-w})
		minmax(0, 1fr);
	// As in the canvas, the height is the content and the border comes on
	// top. Inside a border-box 64px the content would be 63px, so every
	// centred icon and label would land on a half pixel.
	box-sizing: content-box;
	height: $topbar-height;
	border-bottom: 1px solid var(--modula-admin-border);
	background: var(--modula-admin-surface);
	color: var(--modula-admin-ink);

	svg {
		display: block;
		flex: none;
	}
}

// --- Back -----------------------------------------------------------------

.modula-takeover__topbar-back {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 16px;
	border-right: 1px solid var(--modula-admin-border);
	background: var(--modula-admin-surface-sunken);
}

.modula-takeover__topbar-exit {
	@include admin.control-label;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	min-height: 32px;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;

	&:hover,
	&:focus {
		color: var(--modula-admin-ink);
	}

	&:focus {
		box-shadow: none;
	}
}

.modula-takeover__topbar-exit-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// --- Save state, history, undo and redo -------------------------------------

.modula-takeover__topbar-history {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	// The trigger's own padding lines its icon up with the panel content.
	padding: 0 23px 0 14px;
	border-right: 1px solid var(--modula-admin-border);
}

.modula-takeover__topbar-history-spacer {
	flex-grow: 1;
}

.modula-takeover__topbar-save-status {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modula-takeover__topbar-history-trigger {
	@include admin.button-reset;
	@include admin.control-label;
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--modula-admin-radius-md);
	color: var(--modula-admin-ink-secondary);
	font-size: var(--modula-admin-text-control);
	white-space: nowrap;

	&.is-error {
		color: var(--modula-admin-danger);
	}

	&.is-busy .modula-takeover__topbar-save-status {
		color: var(--modula-admin-ink-muted);
	}
}

button.modula-takeover__topbar-history-trigger {

	&:hover,
	&[aria-expanded="true"] {
		background: var(--modula-admin-surface-hover);
	}
}

.modula-takeover__topbar-undo-redo {
	@include admin.segment-track;
	flex-wrap: nowrap;
	align-items: center;
	flex: none;
}

.modula-takeover__topbar-undo-redo-btn {
	@include admin.button-reset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 34px;
	border-radius: var(--modula-admin-radius-md);
	color: var(--modula-admin-ink);

	&:disabled {
		opacity: var(--modula-admin-disabled-opacity);
		cursor: default;
	}

	&:hover:not(:disabled) {
		background: var(--modula-admin-surface-raised);
	}
}

.modula-takeover__topbar-undo-redo-sep {
	width: 1px;
	height: 18px;
	background: var(--modula-admin-border-strong);
}

// History popover (today's history jump, restyled).
.modula-takeover__history-popover.modula-admin-popover {
	width: 340px;
	max-width: min(340px, calc(100vw - 32px));
	// Capped at 520px, and at the room Popover measured under the button.
	max-height: min(520px, var(--modula-admin-popover-room, calc(100vh - 120px)));
	padding: 0;
}

.modula-takeover__history-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--modula-admin-border-divider);
}

.modula-takeover__history-heading {
	margin: 0;
	padding: 0;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-card-title);
	font-weight: 500;
	line-height: 1.3;
}

.modula-takeover__history-subtitle {
	margin: 4px 0 0;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
}

.modula-takeover__history-close,
.modula-takeover__embed-close {
	@include admin.button-reset;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	margin: -4px -6px 0 0;
	border-radius: var(--modula-admin-radius-sm);
	color: var(--modula-admin-ink-muted);

	&:hover {
		color: var(--modula-admin-ink);
	}
}

.modula-takeover__history-timeline {
	padding: 10px 12px 12px;
}

.modula-takeover__history-group + .modula-takeover__history-group {
	margin-top: 12px;
}

.modula-takeover__history-group-heading {
	margin: 0 0 6px 4px;
	padding: 0;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.modula-takeover__history-list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;

	// The timeline line behind the nodes.
	&::before {
		content: "";
		position: absolute;
		top: 12px;
		bottom: 12px;
		left: 15px;
		width: 1px;
		background: var(--modula-admin-border);
		pointer-events: none;
	}

	li {
		margin: 0;
	}
}

.modula-takeover__history-entry {
	@include admin.list-button;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 8px 8px 4px;
	border-radius: var(--modula-admin-radius-md);
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-help);
	line-height: 1.35;

	&.is-future {
		color: var(--modula-admin-ink-muted);
	}

	&.is-current {
		@include admin.list-hover;
		cursor: default;
	}
}

.modula-takeover__history-node {
	position: relative;
	z-index: 1;
	flex: none;
	width: 8px;
	height: 8px;
	margin: 5px 0 0 7px;
	border-radius: 50%;
	background: var(--modula-admin-ink-muted);
	box-shadow: 0 0 0 3px var(--modula-admin-surface);

	.is-current & {
		background: var(--modula-admin-ink);
	}

	.is-future & {
		background: var(--modula-admin-border-strong);
	}
}

.modula-takeover__history-entry-body,
.modula-takeover__history-entry-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.modula-takeover__history-entry-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.modula-takeover__history-entry-field {
	font-weight: 600;
}

.modula-takeover__history-entry-diff {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	color: var(--modula-admin-ink-soft);
}

.modula-takeover__history-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modula-takeover__history-swatch {
	display: inline-block;
	flex: none;
	width: 12px;
	height: 12px;
	border: 1px solid var(--modula-admin-border-strong);
	border-radius: 2px;
}

.modula-takeover__history-current {
	flex: none;
	margin-inline-start: auto;
	padding: 1px 8px;
	border-radius: var(--modula-admin-radius-pill);
	background: var(--modula-admin-surface-segment);
	color: var(--modula-admin-ink-secondary);
	font-size: var(--modula-admin-text-caption);
	font-weight: 600;
}

.modula-takeover__history-entry-time {
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
}

.modula-takeover__history-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 12px;
	border-top: 1px solid var(--modula-admin-border-divider);
}

.modula-takeover__history-shortcut {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-caption);
}

.modula-takeover__history-clear {
	@include admin.button-reset;
	flex: none;
	color: var(--modula-admin-danger);
	font-size: var(--modula-admin-text-caption);
	font-weight: 600;

	&:disabled {
		opacity: var(--modula-admin-disabled-opacity);
		cursor: default;
	}

	&:hover:not(:disabled) {
		text-decoration: underline;
	}
}

// --- Title, status, embed ---------------------------------------------------

.modula-takeover__topbar-document {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-width: 0;
	padding: 0 32px 0 34px;
	font-size: var(--modula-admin-text-control);
}

.modula-takeover__topbar-title {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.modula-takeover__topbar-title-heading {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-page-title);
	font-weight: 400;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;

	&.is-placeholder {
		color: var(--modula-admin-ink-muted);
	}
}

.modula-takeover__topbar-rename {
	@include admin.button-reset;
	display: flex;
	flex-shrink: 0;
	margin: -5px;
	padding: 5px;
	border-radius: var(--modula-admin-radius-sm);
	color: var(--modula-admin-ink-muted);

	&:hover {
		color: var(--modula-admin-ink);
	}
}

// Scoped under the root to outrank wp-admin's `input[type=text]` rules.
.modula-admin-ui .modula-takeover__topbar-title-input {
	@include admin.field;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 560px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--modula-admin-radius-md);
	font-size: var(--modula-admin-text-title);
}

.modula-takeover__topbar-document-status {
	display: flex;
	flex-shrink: 0;
	margin-left: 6px;
}

.modula-takeover__topbar-document-status-trigger {
	@include admin.button-reset;
	@include admin.control-label;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 8px 0 10px;
	border-radius: var(--modula-admin-radius-pill);
	background: var(--modula-admin-plan-surface);
	color: var(--modula-admin-plan-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;

	&:disabled {
		opacity: var(--modula-admin-disabled-opacity);
		cursor: default;
	}
}

.modula-takeover__topbar-document-status[data-status="publish"] .modula-takeover__topbar-document-status-trigger {
	background: var(--modula-admin-success-surface);
	color: var(--modula-admin-success-ink);
}

// The canvas pill only draws Published and Draft. Private gets a neutral
// tone so it reads as neither live (green) nor unfinished (Draft's tan).
.modula-takeover__topbar-document-status[data-status="private"] .modula-takeover__topbar-document-status-trigger {
	background: var(--modula-admin-surface-hover);
	color: var(--modula-admin-ink-secondary);
}

.modula-takeover__topbar-document-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--modula-admin-plan-ink);

	&[data-status="publish"] {
		background: var(--modula-admin-success);
	}

	&[data-status="private"] {
		background: var(--modula-admin-ink-muted);
	}
}

// The canvas header has no "+": it borrows the Embed trigger's box, made square.
.modula-takeover__topbar-add-new-sep {
	flex-shrink: 0;
	width: 1px;
	height: 24px;
	margin: 0 6px;
	background: var(--modula-admin-border-strong);
}

.modula-takeover__topbar-add-new {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--modula-admin-button-height);
	height: var(--modula-admin-button-height);
	border: 1px solid var(--modula-admin-border-strong);
	border-radius: var(--modula-admin-radius-lg);
	color: var(--modula-admin-ink);
	text-decoration: none;

	&:hover {
		background: var(--modula-admin-surface-hover);
	}

	// wp-admin's `a:focus` paints a ring and recolors the link on mouse focus;
	// keyboard focus keeps the admin-ui outline.
	&:focus {
		box-shadow: none;
		color: var(--modula-admin-ink);
	}
}

.modula-takeover__topbar-embed-trigger {
	@include admin.button-reset;
	@include admin.control-label;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	height: var(--modula-admin-button-height);
	padding: 0 12px 0 14px;
	border: 1px solid var(--modula-admin-border-strong);
	border-radius: var(--modula-admin-radius-lg);
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);
	white-space: nowrap;

	&:hover,
	&[aria-expanded="true"] {
		background: var(--modula-admin-surface-hover);
	}
}

.modula-takeover__embed-popover.modula-admin-popover {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 540px;
	max-width: min(540px, calc(100vw - 32px));
	padding: 16px 18px 18px;

	// In a short window the panel scrolls; its parts keep their height.
	> * {
		flex-shrink: 0;
	}
}

.modula-takeover__embed-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modula-takeover__embed-heading {
	margin: 0;
	padding: 0;
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-card-title);
	font-weight: 600;
}

.modula-takeover__embed-row {
	display: flex;
	flex-direction: column;
	gap: 6px;

	.modula-admin-copy-field {
		display: flex;
		gap: 8px;
		width: 100%;
	}

	.modula-admin-copy-field__value {
		flex-grow: 1;
		height: var(--modula-admin-button-height);
		padding: 0 12px;
		border: 1px solid var(--modula-admin-border);
		font-family: var(--modula-admin-font-mono);
		font-size: var(--modula-admin-text-caption);
	}
}

.modula-takeover__embed-label {
	color: var(--modula-admin-ink-secondary);
	font-size: 13px;
	font-weight: 500;
}

// The appearance toggle's legacy top-bar variant still uses this size.
.modula-takeover__topbar-icon-btn {
	min-width: $mod-space-28 !important;
	width: $mod-space-28 !important;
	min-height: $mod-space-28 !important;
	height: $mod-space-28 !important;
	line-height: 1 !important;
	padding: 0 !important;
	justify-content: center;
}