/*
 * Orchid shell for jet's left rail (feature flag "jet-orchid-shell").
 *
 * app.js adds body.orchid-shell at boot when the flag is on. Every rule here
 * is scoped to that class, so with the flag off style.css is the whole
 * story. Numbers and colors mirror next/src/components/SideNav.tsx and
 * next/src/lib/layout-metrics.ts: a 60px rail that widens to 200px on hover
 * as an overlay, 44px rows, 17px labels, #585e6e dividers, #2a303a hover,
 * an orange (#ff7143) active icon, and the #c2410c accent button.
 */

/* The rail: fixed 60px, overlay to 200px on hover or keyboard focus. The
   page keeps its 60px margin, so the expansion never reflows content.
   style.css only sets the width under body.mini-navbar; this pins it for
   every page, home included. */
body.orchid-shell .navbar-static-side {
	position: absolute;
	width: 60px;
	z-index: 2001;
	overflow: hidden;
	transition: width 150ms ease-out;
}
body.orchid-shell .navbar-static-side:hover,
body.orchid-shell .navbar-static-side:focus-within {
	width: 200px;
}
body.orchid-shell #page-wrapper {
	margin: 0 0 0 60px;
}

/* Rows */
body.orchid-shell #side-menu {
	padding-bottom: 0;
}
body.orchid-shell #side-menu li {
	position: relative;
	height: 44px;
	flex: none;
	border-bottom: 1px solid #585e6e;
}
body.orchid-shell #side-menu li > a {
	height: 44px;
	padding: 0;
	justify-content: center;
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	transition: background-color 150ms;
}
body.orchid-shell .navbar-static-side:hover #side-menu li > a,
body.orchid-shell .navbar-static-side:focus-within #side-menu li > a {
	padding: 0 16px;
	justify-content: flex-start;
}
body.orchid-shell #side-menu li:hover,
body.orchid-shell #side-menu li > a:focus-visible {
	background: #2a303a;
}
/* Orchid marks the active row with the icon color alone. */
body.orchid-shell #side-menu li.active {
	background: transparent;
}
body.orchid-shell #side-menu li.minimized {
	border-left: 3px solid orange;
}

/* Labels: hidden collapsed, shown expanded. style.css hides .nav-label
   under body.mini-navbar; this owns it for every page. */
body.orchid-shell #side-menu .nav-label {
	display: none;
	flex: 1;
	white-space: nowrap;
}
body.orchid-shell .navbar-static-side:hover #side-menu .nav-label,
body.orchid-shell .navbar-static-side:focus-within #side-menu .nav-label {
	display: inline;
}

/* Inline lucide icons (js/orchid-icons.js). An <i>, not a <span>: style.css
   hides every span inside a collapsed rail's links. The selectors carry
   #side-menu / #left-navigation because style.css sizes the same <i> with
   id-anchored rules (.skin-1 #side-menu li a i, .mini-navbar #side-menu li a i)
   that would otherwise win on specificity. */
body.orchid-shell #side-menu li a .orchid-icon,
body.orchid-shell #side-menu li button .orchid-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	flex: none;
	width: 20px;
	height: 19px;
	margin: 0;
	color: currentColor;
}
body.orchid-shell #side-menu .orchid-icon svg {
	width: 20px;
	height: 19px;
}
body.orchid-shell #left-navigation:hover #side-menu li a .orchid-icon,
body.orchid-shell #left-navigation:focus-within #side-menu li a .orchid-icon {
	margin-right: 10px;
}
body.orchid-shell #side-menu li.active a .orchid-icon {
	color: #ff7143;
}

/* "+ New Record" (li#menu-new outranks the 44px row rule above) */
body.orchid-shell #side-menu li#menu-new {
	height: auto;
	padding: 12px 10px;
	border-bottom: 0;
}
body.orchid-shell #menu-new button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 6px;
	border: 0;
	border-radius: 6px;
	background: #c2410c;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 20px;
	transition: opacity 150ms;
}
body.orchid-shell #menu-new button:hover {
	opacity: 0.9;
}
body.orchid-shell #side-menu li#menu-new .nav-label {
	display: none;
	white-space: nowrap;
}
body.orchid-shell #left-navigation:hover #side-menu li#menu-new .nav-label,
body.orchid-shell #left-navigation:focus-within #side-menu li#menu-new .nav-label {
	display: inline;
}

/* Unread-mail pill: pinned to the corner collapsed, inline at the right
   edge expanded (the label's flex: 1 pushes it there). */
body.orchid-shell #mail-counter {
	position: absolute;
	top: 6px;
	right: 6px;
	margin: 0;
	padding: 3px 6px;
	border-radius: 999px;
	background: #f8ac59;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
body.orchid-shell .navbar-static-side:hover #mail-counter,
body.orchid-shell .navbar-static-side:focus-within #mail-counter {
	position: static;
	margin-left: 8px;
}

/* Orchid's rail has no version footer (!important beats Bootstrap's d-flex). */
body.orchid-shell #sidebar-version {
	display: none !important;
}