@use '../../admin-ui/styles/mixins' as admin;
@use 'variables' as *;

// Sidebar layout V2 — text rail + settings panel (canvas "1 · Editor": rail
// 112 + panel 400). The rail and the panel chrome render inside the
// sidebar's admin-ui scope, so their colours are admin-ui tokens and follow
// the editor appearance through `is-dark`.
.modula-takeover__sidebar--v2 {
	flex: 0 0 calc(var(--mod-se-rail-w, #{$mod-se-rail-w}) + var(--mod-se-panel-w, #{$mod-se-panel-w}));
	width: calc(var(--mod-se-rail-w, #{$mod-se-rail-w}) + var(--mod-se-panel-w, #{$mod-se-panel-w}));
	max-width: min(calc(var(--mod-se-rail-w, #{$mod-se-rail-w}) + var(--mod-se-panel-w, #{$mod-se-panel-w})),
		100%);
	// The settings column draws the edge, so the canvas starts at
	// rail + panel, under the header's third column.
	border-right: none;
	transition: none;
}

.modula-takeover__sidebar-body--v2 {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.modula-takeover__sidebar-v2-columns {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: visible;
}

.modula-takeover__sidebar-v2-nav-column {
	flex: 0 0 var(--mod-se-rail-w, #{$mod-se-rail-w});
	width: var(--mod-se-rail-w, #{$mod-se-rail-w});
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative;
	z-index: 2;
	overflow: visible;
	transition: none;
	border-right: 1px solid var(--modula-admin-border);
	background: var(--modula-admin-surface-sunken);
	color: var(--modula-admin-ink-muted);
}

.modula-takeover__sidebar-v2-settings-column {
	flex: 0 0 var(--mod-se-panel-w, #{$mod-se-panel-w});
	width: var(--mod-se-panel-w, #{$mod-se-panel-w});
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--modula-admin-border);
	background: var(--modula-admin-surface);
	color: var(--modula-admin-ink);
}

.modula-takeover__sidebar-v2-nav-wrap {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

// Density: the list scrolls under a pinned footer, and short windows get
// shorter rows, so the footer stays reachable.
.modula-takeover__sidebar-v2-nav {
	--modula-takeover-rail-row-height: 42px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 0;
	scrollbar-width: thin;

	@media (max-height: 640px) {
		--modula-takeover-rail-row-height: 36px;
		padding: 12px 0;
	}
}

.modula-takeover__sidebar-v2-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.modula-takeover__sidebar-v2-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.modula-takeover__sidebar-v2-nav-btn {
	@include admin.list-button;
	@include admin.control-label;
	display: flex;
	align-items: center;
	gap: 6px;
	height: var(--modula-takeover-rail-row-height);
	padding: 0 12px 0 16px;
	color: var(--modula-admin-ink-muted);
	font-size: var(--modula-admin-text-control);
	transition: color var(--modula-admin-transition) ease;

	// The canvas rail answers hover with ink only: no list fill, so the
	// active tab never shows a fill under its bar (most visible in dark).
	&:hover {
		background: none;
		color: var(--modula-admin-ink);
	}

	&[aria-current="true"] {
		box-shadow: inset 4px 0 0 var(--modula-admin-ink);
		color: var(--modula-admin-ink);
	}
}

.modula-takeover__sidebar-v2-nav-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// Lite: the lock on a category it locks. The locks line up in one column
// at the rail's right edge, muted on every row (canvas).
.modula-takeover__sidebar-v2-nav-lock {
	display: flex;
	flex-shrink: 0;
	margin-left: auto;
	color: var(--modula-admin-ink-muted);
}

// The appearance menu is the footer's only item.
.modula-takeover__sidebar-rail-footer {
	flex-shrink: 0;
	padding: 0 8px 16px;

	// The trigger spans the rail; the anchor is admin-ui's inline wrapper.
	.modula-admin-popover-anchor {
		display: flex;
	}
}

.modula-takeover__sidebar-rail-appearance {
	@include admin.button-reset;
	@include admin.control-label;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 38px;
	padding: 0 8px;
	border-radius: var(--modula-admin-radius-sm);
	color: var(--modula-admin-ink);
	font-size: var(--modula-admin-text-control);

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

	svg {
		flex-shrink: 0;
	}
}

.modula-takeover__sidebar-rail-appearance-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 960px) {
	.modula-takeover__sidebar--v2 {
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
	}

	.modula-takeover__sidebar-v2-columns {
		flex-direction: column;
	}

	.modula-takeover__sidebar-v2-nav-column {
		flex: 0 0 auto;
		width: 100%;
		max-height: min(40vh, 260px);
		border-right: none;
		border-bottom: 1px solid var(--modula-admin-border);
	}
}

@media (prefers-reduced-motion: reduce) {
	.modula-takeover__sidebar-v2-nav-btn {
		transition: none;
	}
}