/**
 * The left rail (EVQ_App_Shell) and the frame of the plugin's app pages.
 * Loaded on every page the plugin owns; on the themed Répertoire page it
 * also offsets the theme's own layout under `body.evq-has-rail`.
 *
 * Thin by default (icons only, --evq-rail-w) and widens to --evq-rail-w-open
 * while hovered or keyboard-focused. The widened rail *overlays* the page —
 * content is offset by the thin width only — so hovering never reflows the
 * table or the map.
 *
 * Every colour is a theme token (evq-sections-theme.css), so the rail
 * follows dark mode like the rest of the plugin: white ground / grey icons
 * in light, the dark ground / light icons in dark.
 *
 * The rail's <button> items carry the same `all: unset` + `!important`
 * defense as .evq-btn — see CLAUDE.md, "Buttons and the theme's global
 * CSS". They were bare `all: unset` at first and the theme still won.
 */

:root {
	--evq-rail-w: 56px;
	--evq-rail-w-open: 224px;
}

/* --- The rail ------------------------------------------------------------ */

.evq-rail {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var( --evq-rail-w );
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 10px 8px;
	background: var( --evq-bg, #fff );
	color: var( --evq-text, #1f2430 );
	border-right: 1px solid var( --evq-border, #e5e7eb );
	z-index: 900;
	overflow: hidden;
	transition: width 0.16s ease, box-shadow 0.16s ease;
	font-family: inherit;
	font-size: 14px;
}

.evq-rail:hover,
.evq-rail:focus-within {
	width: var( --evq-rail-w-open );
	box-shadow: 12px 0 32px rgba( 0, 0, 0, 0.10 );
}

body.admin-bar .evq-rail {
	top: 32px;
}

.evq-rail-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 40px;
	padding: 0 10px;
	margin-bottom: 8px;
	color: var( --evq-text, #1f2430 );
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
}

.evq-rail-brand-mark {
	flex: 0 0 20px;
	display: inline-flex;
	color: var( --evq-accent, #1B4C96 );
}

.evq-rail-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* <a> and <button> alike. Defended with !important on every property the
   theme's global `button` rule is known to set. */
.evq-rail-item,
.evq-rail-logout {
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	width: 100% !important;
	height: 40px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var( --evq-muted, #6b7280 ) !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	font: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.evq-rail-item:hover,
.evq-rail-item:focus-visible,
.evq-rail-logout:hover,
.evq-rail-logout:focus-visible {
	background: var( --evq-row-hover, #f7f9fc ) !important;
	color: var( --evq-text, #1f2430 ) !important;
	outline: none !important;
}

.evq-rail-item.is-active {
	background: var( --evq-tag-blue-bg, #e8f0fe ) !important;
	color: var( --evq-accent, #1B4C96 ) !important;
}

.evq-rail-icon {
	flex: 0 0 20px;
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.evq-rail-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.12s ease 0.04s;
}

.evq-rail:hover .evq-rail-label,
.evq-rail:focus-within .evq-rail-label,
.evq-rail:hover .evq-rail-brand-name,
.evq-rail:focus-within .evq-rail-brand-name {
	opacity: 1;
}

.evq-rail-brand-name {
	opacity: 0;
	transition: opacity 0.12s ease 0.04s;
}

.evq-rail-bottom {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 8px;
	border-top: 1px solid var( --evq-border, #e5e7eb );
}

/* The theme toggle's icon is text (☾/☀) filled by evq-sections-theme-toggle.js. */
.evq-rail .evq-theme-toggle .evq-theme-toggle-icon {
	font-size: 15px;
	line-height: 1;
}

.evq-rail-account {
	display: flex;
	align-items: center;
	gap: 2px;
}

.evq-rail-account .evq-rail-item {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.evq-rail-avatar {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-left: -1px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --evq-accent, #1B4C96 );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.evq-rail-logout {
	width: 36px !important;
	flex: 0 0 36px !important;
	justify-content: center !important;
	padding: 0 !important;
	display: none !important;
}

.evq-rail:hover .evq-rail-logout,
.evq-rail:focus-within .evq-rail-logout {
	display: flex !important;
}

/* --- Offsetting the page ------------------------------------------------- */

.evq-app-body {
	margin: 0;
	background: var( --evq-bg-page, #fff );
	color: var( --evq-text, #1f2430 );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.evq-app-main {
	margin-left: var( --evq-rail-w );
	min-height: 100vh;
}

/* The themed Répertoire page: its layout is a full-bleed 100vw flex row
   (public-table.css), so the rail's width becomes extra left padding on it
   rather than a margin on <body>, which the theme's own header would ignore. */
body.evq-has-rail:not( .evq-app-body ) .evq-sections-layout {
	padding-left: calc( var( --evq-rail-w ) + 16px );
}

body.evq-has-rail:not( .evq-app-body ) > header,
body.evq-has-rail:not( .evq-app-body ) > footer,
body.evq-has-rail:not( .evq-app-body ) .elementor-location-header,
body.evq-has-rail:not( .evq-app-body ) .elementor-location-footer {
	padding-left: var( --evq-rail-w );
	box-sizing: border-box;
}

/* The bare map pages (fullmap, planner) are their own fixed layout: shift
   the whole page container instead. */
body.evq-has-rail .evq-fullmap-page {
	margin-left: var( --evq-rail-w );
	width: calc( 100vw - var( --evq-rail-w ) );
}

/* --- Dark mode on the themed page -----------------------------------------
   The plugin's dark tokens are scoped to its own components; the theme's
   <body> stayed white around them, which read as broken once the rail (dark
   too) sat beside it. On plugin pages, paint the page ground and inherited
   text with the same tokens. Elementor's own header/footer keep their
   colours — they are the theme's, not ours. */
@media ( prefers-color-scheme: dark ) {
	html:not( [data-evq-theme="light"] ) body.evq-has-rail {
		background: var( --evq-bg-page, #16181b );
		color: var( --evq-text, #e8eaed );
	}
}

html[data-evq-theme="dark"] body.evq-has-rail {
	background: var( --evq-bg-page, #16181b );
	color: var( --evq-text, #e8eaed );
}

/* --- Small screens: the rail becomes a bottom bar ------------------------ */

@media ( max-width: 900px ) {
	:root {
		--evq-rail-w: 0px;
	}

	.evq-rail,
	.evq-rail:hover,
	.evq-rail:focus-within {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px;
		flex-direction: row;
		align-items: center;
		padding: 0 6px;
		border-right: 0;
		border-top: 1px solid var( --evq-border, #e5e7eb );
		box-shadow: none;
	}

	.evq-rail-brand,
	.evq-rail-tour,
	.evq-rail-logout,
	.evq-rail-label,
	.evq-rail-brand-name {
		display: none !important;
	}

	.evq-rail-items {
		flex: 1 1 auto;
		flex-direction: row;
		justify-content: space-around;
	}

	.evq-rail-items li {
		flex: 1 1 0;
	}

	.evq-rail-item {
		justify-content: center !important;
		padding: 0 6px !important;
	}

	.evq-rail-bottom {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		flex-direction: row;
	}

	.evq-app-main,
	body.evq-has-rail .evq-fullmap-page {
		margin-left: 0;
		width: 100%;
		padding-bottom: 60px;
	}

	body.evq-has-rail:not( .evq-app-body ) .evq-sections-layout {
		padding-left: 24px;
		padding-bottom: 84px;
	}
}