// =============================================================
// Video Editor — layout shell
// Scoped under `.godam-video-editor`. Self-contained: does NOT use
// anything from `assets/src/css/_common.scss`, and uses NO hardcoded
// colours — accent comes from the WordPress component accent variable
// (so it follows the admin colour scheme automatically) and neutrals
// are derived from `currentColor`.
// =============================================================

$ve-rail-width: 56px;
$ve-panel-width: 320px;
$ve-config-width: 340px;

$ve-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9) );
$ve-border: #E0E0E0;
$ve-muted: color-mix(in srgb, currentcolor 55%, transparent);
$ve-faint: color-mix(in srgb, currentcolor 5%, transparent);

.godam-video-editor {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	// ---------------------------------------------------------
	// Top bar
	// ---------------------------------------------------------
	&__topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.5rem 1rem;
		border-bottom: 1px solid $ve-border;
	}

	&__title {
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.4;
	}

	// Click-to-edit affordance: the title text is a bare button that reveals a
	// subtle hover background so it reads as editable.
	&__title-button {
		display: block;
		max-width: 32ch;
		margin: 0;
		padding: 0.125rem 0.375rem;
		overflow: hidden;
		font: inherit;
		color: inherit;
		font-size: 1rem;
		font-weight: 600;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 4px;
		line-height: 1;
		cursor: text;

		&:hover {
			background: $ve-faint;
		}

		&:focus-visible {
			outline: none;
			border-color: $ve-accent;
			box-shadow: 0 0 0 1px $ve-accent;
		}
	}

	// Inline title editor. Nested under the topbar so the two-class specificity
	// (0,2,0) beats wp-admin's global `input[type="text"]` rules (0,1,1), which
	// otherwise force a 40px min-height and shift the layout on focus. Its box
	// (line-height, padding and 1px border) mirrors the display button exactly,
	// so switching between view and edit modes never changes the row height.
	&__topbar &__title-input {
		box-sizing: border-box;
		width: 100%;
		max-width: 32ch;
		min-width: 16ch;
		min-height: 0;
		margin: 0;
		padding: 0.125rem 0.375rem;
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.4;
		color: inherit;
		background: var(--wp-components-color-background, #fff);
		border: 1px solid $ve-accent;
		border-radius: 4px;

		&:focus {
			outline: none;
			box-shadow: 0 0 0 1px $ve-accent;
		}
	}

	&__subtitle {
		margin: 0;
		font-size: 0.75rem;
		line-height: 1.4;
		color: $ve-muted;
	}

	&__actions {
		flex: 0 0 auto;
	}

	// ---------------------------------------------------------
	// Stats row
	// ---------------------------------------------------------
	&__stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		border-bottom: 1px solid $ve-border;
	}

	&__stat {
		padding: 0.75rem 1.5rem;

		& + & {
			border-left: 1px solid $ve-border;
		}
	}

	&__stat-label {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		margin: 0;
		font-size: 15px;
		line-height: 1.5;
		color: $ve-muted;

		// Info-icon tooltip on each stat label. Mirrors the analytics page
		// pattern (pages/analytics/Tooltip.js + index.scss), but scoped here
		// because those styles are bound to the analytics/dashboard roots.
		.tooltip-container {
			position: relative;
			display: inline-flex;
			align-items: center;
			cursor: pointer;
		}

		.tooltip-text {
			position: absolute;
			top: 100%;
			left: 0;
			margin-top: 4px;
			visibility: hidden;
			background-color: rgba(0, 0, 0, 0.8);
			color: #fff;
			text-align: left;
			padding: 8px;
			border-radius: 5px;
			min-width: 160px;
			width: max-content;
			max-width: 240px;
			z-index: 100;
			pointer-events: none;
			font-size: 12px;
			font-weight: 400;
			line-height: 1.3;
			opacity: 0;
			transition: opacity 0.2s ease, visibility 0.2s ease;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}

		.tooltip-container:hover .tooltip-text,
		.tooltip-container:focus-within .tooltip-text {
			visibility: visible;
			opacity: 1;
		}
	}

	// The right-most card sits against the viewport edge, so its tooltip would
	// overflow and clip. Open that one leftward instead.
	&__stat:last-child &__stat-label .tooltip-text {
		right: 0;
		left: auto;
	}

	&__stat-value {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5;
	}

	// ---------------------------------------------------------
	// Body grid: rail | panel | stage | config
	// ---------------------------------------------------------
	&__body {
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
	}

	&__rail {
		display: flex;
		flex: 0 0 $ve-rail-width;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 1rem 0;
		border-right: 1px solid $ve-border;
	}

	&__rail-button {
		width: 40px;
		height: 40px;
		color: $ve-muted;
		border-radius: 6px;

		&.components-button.is-pressed {
			color: $ve-accent;
			background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #f2f2f2)) 10%, transparent);
			border: 1px solid color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #f2f2f2)) 20%, transparent);
		}

		&.components-button.is-pressed:hover:not(:disabled) {
			color: $ve-accent;
			background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #f2f2f2)) 16%, transparent);
			border: 1px solid $ve-border;
		}
	}

	&__panel {
		flex: 0 0 $ve-panel-width;
		min-height: 0;
		overflow-y: auto;
		border-right: 1px solid $ve-border;
	}

	&__panel-title {
		margin: 0 0 0.75rem;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.4;
	}

	&__stage {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		min-width: 0;
		overflow-y: auto;
		background: $ve-faint;
	}

	// Holds the video preview; grows to fill the stage and keeps the video
	// centred so the timeline can dock at the bottom.
	&__stage-canvas {
		display: flex;
		flex: 1 1 auto;
		align-items: safe center;
		justify-content: safe center;
		padding: 1rem 0;
		width: 100%;
		min-height: 0;
		overflow: auto;
	}

	// Timeline pinned to the bottom of the stage. Its marker chips float up
	// into the empty space above the track.
	&__timeline-dock {
		flex: 0 0 auto;
		width: 100%;
		margin-top: auto;
		border-top: 1px solid $ve-border;
		z-index: 10;
		background-color: #fff;
		padding: 0.25rem 1.5rem 1rem 1.5rem;
	}

	&__config {
		flex: 0 0 $ve-config-width;
		min-height: 0;
		overflow-y: auto;
		border-left: 1px solid $ve-border;
	}

	&__config-header {
		margin-bottom: 1rem;
		padding: 1rem;
		border-bottom: 1px solid $ve-border;
	}

	&__config-title {
		margin: 0;
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.4;
	}

	&__config-subtitle {
		margin: 0.25rem 0 0;
		font-size: 0.75rem;
		line-height: 1.4;
		color: $ve-muted;
	}

	&__config-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 240px;
		padding: 1rem;
		text-align: center;
	}

	&__config-empty-title {
		margin: 0;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.4;
	}

	&__config-empty-text {
		margin: 0.25rem 0 0;
		font-size: 0.75rem;
		line-height: 1.4;
		color: $ve-muted;
	}

	// ---------------------------------------------------------
	// Video stage player: hide native control bar, keep the
	// centered big-play button as the play affordance.
	// ---------------------------------------------------------
	#easydam-video-player {

		.vjs-control-bar {
			display: none;
		}
	}
}