/**
 * TeachVic Jobs — the portal drawer (1.56.1).
 *
 * Ben, 30 Sep: on a narrow window the navy sidebar stacked above the page and
 * pushed everything down. Now, on every portal (recruiter, candidate,
 * school), below 1150px — and in the Meeting room at any width — the sidebar
 * folds to a 64px rail on the left (», the initial, MENU) and opens OVER the
 * page as an overlay. « , the backdrop or Esc closes it.
 *
 * Only with the script (html.tvx-pd-js, set inline by templates/portal-rail.php);
 * without it the old stacked layout stays, so the sidebar is never lost.
 * Own prefix (tvx-pd): the theme's mobile menu already uses .tvx-drawer.
 */

.tvx-pd-rail,
.tvx-pd-close,
.tvx-pd-scrim { display: none; }

/* ------------------------------------------------------------------ */
/* Drawer mode. Written twice: the room (any width), then narrow windows. */
/* ------------------------------------------------------------------ */

html.tvx-pd-js .tvx-pd-shell--always {
	grid-template-columns: 64px minmax(0, 1fr) !important;
	gap: 20px;
}
html.tvx-pd-js .tvx-pd-shell--always > * { grid-column: 2; }
html.tvx-pd-js .tvx-pd-shell--always > .tvx-pd-rail { grid-column: 1; grid-row: 1; display: flex; }
html.tvx-pd-js .tvx-pd-shell--always > [data-tvx-pd-side] { grid-column: auto; }
html.tvx-pd-js .tvx-pd-shell--always [data-tvx-pd-side] {
	position: fixed !important;
	z-index: 10001;
	top: var(--tvx-pd-top, 96px);
	left: 16px;
	width: min(300px, calc(100vw - 32px));
	max-height: calc(100vh - var(--tvx-pd-top, 96px) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(7, 26, 60, .35);
	transform: translateX(calc(-100% - 32px));
	visibility: hidden;
	transition: transform .2s ease, visibility 0s linear .2s;
}
html.tvx-pd-js .tvx-pd-shell--always.is-pd-open [data-tvx-pd-side] {
	transform: none;
	visibility: visible;
	transition: transform .2s ease;
}
html.tvx-pd-js .tvx-pd-shell--always [data-tvx-pd-side] .tvx-rec__side { position: static; }
html.tvx-pd-js .tvx-pd-shell--always .tvx-pd-close { display: flex; }

@media (max-width: 1150px) {
	html.tvx-pd-js .tvx-pd-shell {
		grid-template-columns: 64px minmax(0, 1fr) !important;
		gap: 20px;
	}
	html.tvx-pd-js .tvx-pd-shell > * { grid-column: 2; }
	html.tvx-pd-js .tvx-pd-shell > .tvx-pd-rail { grid-column: 1; grid-row: 1; display: flex; }
	html.tvx-pd-js .tvx-pd-shell > [data-tvx-pd-side] { grid-column: auto; }
	html.tvx-pd-js .tvx-pd-shell [data-tvx-pd-side] {
		position: fixed !important;
		z-index: 10001;
		top: var(--tvx-pd-top, 96px);
		left: 16px;
		width: min(300px, calc(100vw - 32px));
		max-height: calc(100vh - var(--tvx-pd-top, 96px) - 16px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 18px;
		box-shadow: 0 30px 80px rgba(7, 26, 60, .35);
		transform: translateX(calc(-100% - 32px));
		visibility: hidden;
		transition: transform .2s ease, visibility 0s linear .2s;
	}
	html.tvx-pd-js .tvx-pd-shell.is-pd-open [data-tvx-pd-side] {
		transform: none;
		visibility: visible;
		transition: transform .2s ease;
	}
	html.tvx-pd-js .tvx-pd-shell [data-tvx-pd-side] .tvx-rec__side { position: static; }
	html.tvx-pd-js .tvx-pd-shell .tvx-pd-close { display: flex; }
}

@media (max-width: 640px) {
	html.tvx-pd-js .tvx-pd-shell,
	html.tvx-pd-js .tvx-pd-shell--always {
		grid-template-columns: 48px minmax(0, 1fr) !important;
		gap: 12px;
		padding-left: 10px !important;
		padding-right: 12px !important;
	}
	.tvx-pd-rail { padding: 10px 0 14px !important; gap: 12px !important; border-radius: 14px !important; }
	.tvx-pd-rail__btn, .tvx-pd-rail__avatar { width: 34px !important; height: 34px !important; }
}

/* ------------------------------------------------------------------ */
/* The rail, the close button, the backdrop                             */
/* ------------------------------------------------------------------ */

.tvx-pd-rail {
	position: static; /* 1.59.2 (Ben, 1 Oct): portal side panels stay in place on the page */
	top: var(--tvx-pd-top, 98px);
	align-self: start;
	background: #0B2A5C;
	border-radius: 18px;
	box-shadow: 0 22px 50px rgba(7, 26, 60, .14);
	padding: 16px 0 20px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tvx-pd-rail__btn,
.tvx-pd-close {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid rgba(159, 192, 240, .4);
	background: transparent;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.tvx-pd-rail__btn { display: flex; }
.tvx-pd-rail__btn:hover,
.tvx-pd-close:hover { background: rgba(159, 192, 240, .16); }
.tvx-pd-rail__btn:focus-visible,
.tvx-pd-close:focus-visible { outline: 2px solid #F6A02A; outline-offset: 2px; }
.tvx-pd-rail__avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #1B4A96;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
}
.tvx-pd-rail__menu {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: .2em;
	color: #9FC0F0;
}
.tvx-pd-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 32px;
	height: 32px;
	font-size: 15px;
}

.tvx-pd-scrim {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(7, 26, 60, .38);
}
.tvx-pd-scrim.is-on { display: block; }
html.tvx-pd-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	html.tvx-pd-js [data-tvx-pd-side] { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* 5 Oct 2026: the recruiter portal's bar                               */
/* ------------------------------------------------------------------ */

/*
 * design-handoff-admin-dashboard: when the recruiter sidebar folds away, it
 * leaves a navy bar across the top (avatar, name, role line, Menu) and not a
 * rail down the side. The same drawer opens from it. Only the recruiter
 * portal's rail is given a name (templates/portal-rail.php); the candidate
 * and school portals, and the Meeting room, keep the rail.
 */
.tvx-pd-rail__who,
.tvx-pd-rail__btn-text { display: none; }

@media (max-width: 1150px) {
	html.tvx-pd-js .tvx-pd-shell:has(> .tvx-pd-rail--bar) {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px;
	}
	html.tvx-pd-js .tvx-pd-shell:has(> .tvx-pd-rail--bar) > * { grid-column: 1; }
	html.tvx-pd-js .tvx-pd-shell > .tvx-pd-rail--bar {
		grid-column: 1;
		grid-row: 1;
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 12px 16px !important;
		border-radius: 18px !important;
	}
	.tvx-pd-rail--bar .tvx-pd-rail__avatar { order: 1; width: 36px !important; height: 36px !important; }
	.tvx-pd-rail--bar .tvx-pd-rail__who { order: 2; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
	.tvx-pd-rail--bar .tvx-pd-rail__name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.tvx-pd-rail--bar .tvx-pd-rail__role { font-family: ui-monospace, Menlo, monospace; font-size: 9px; letter-spacing: .16em; color: #F6A02A; }
	.tvx-pd-rail--bar .tvx-pd-rail__btn {
		order: 3;
		width: auto !important;
		height: auto !important;
		min-height: 44px;
		padding: 0 18px;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 600;
	}
	.tvx-pd-rail--bar .tvx-pd-rail__btn-text { display: inline; }
	.tvx-pd-rail--bar .tvx-pd-rail__btn-chev,
	.tvx-pd-rail--bar .tvx-pd-rail__menu { display: none; }
}

@media (max-width: 640px) {
	html.tvx-pd-js .tvx-pd-shell:has(> .tvx-pd-rail--bar) { grid-template-columns: minmax(0, 1fr) !important; padding-left: 14px !important; padding-right: 14px !important; }
}