/* Toolbar login dropdown — the subset of mod_bt_login's style2.0.css the #btl
 * DOM still needs (bt_login removed in Phase 2; core mod_login now renders
 * inside the same #btl ids). The per-style sheets (css/styles/*.css) carry the
 * site's colour/icon tweaks for these ids and load later in the chain. */

#btl {
	position: relative;
}
#btl .btl-panel {
	overflow: hidden;
}
#btl .btl-panel > span {
	display: inline-block;
	height: 26px;
	line-height: 28px;
	padding: 0 18px;
	cursor: pointer;
	width: auto;
	margin: 2px 0;
	border-radius: 3px;
	/* custom.css sets a background-image caret/icon on these spans but not the
	 * repeat/position — mod_bt_login's style2.0.css used to. Without this the
	 * profile caret TILES across the (wide) user-name span = a row of arrows. */
	background-repeat: no-repeat;
}
#btl .btl-panel > #btl-panel-profile {
	/* match live (style2.0.css:68-70): single caret pinned top-right, with the
	 * right padding that keeps it clear of the name — without it the 26px caret
	 * sits on top of the text (the per-style rule only leaves 6px on the right). */
	background-position: top right;
	padding-right: 30px;
}
#btl .btl-panel > span.active {
	opacity: 0.8;
}

/* Drop-down panel. Open/close is a `.open` class toggle on #btl (js/template.js);
 * animated with opacity+transform+visibility rather than display:none/block so the
 * transition can actually run. visibility (0s, delayed to the end on close) keeps
 * the closed panel unfocusable/unclickable the way display:none did, while opacity
 * fades and the panel slides+scales out of the caret (top-right origin). */
#btl-content > .btl-content-block {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 9999;
	background: #ffffff;
	border: 1px solid #dddddd;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	padding: 10px 20px 15px;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.13s ease-out, transform 0.13s ease-out, visibility 0s linear 0.13s;
}
#btl.open #btl-content > .btl-content-block {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition: opacity 0.13s ease-out, transform 0.13s ease-out, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	#btl-content > .btl-content-block,
	#btl.open #btl-content > .btl-content-block {
		transition: visibility 0s;
		transform: none;
	}
}
#btl-content #btl-content-login {
	width: 200px;
}
/* The inputs were fixed at 104px inside a 240px panel, leaving a wide empty gutter
 * on the right ("too wide"). Narrow the panel (above) and let the field fill it:
 * flex the .input-prepend so the icon add-on keeps its width and the input takes
 * the rest. align-items:stretch also keeps the add-on and input the same height. */
#btl-content-login .input-prepend {
	display: flex;
	width: 100%;
}
#btl-content-login .input-prepend > input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
/* mod_login marks its field labels `.element-invisible` (joomla.css hides them
 * with display:none), but Bootstrap 2's `.form-inline label{display:inline-block}`
 * (the login form is .form-inline) re-shows them, so the "Username"/"Password"
 * labels take width INSIDE the icon add-on. The two words differ by ~2px, which
 * pushed the username and password inputs slightly out of line. Hide them for
 * real — kept in the a11y tree (visually-hidden, not display:none) — so each
 * add-on is icon-width only and both inputs align. */
#btl-content label.element-invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* BS2's `.add-on` uses 5px top/bottom padding but `input` uses 6px, so the icon
 * box renders 2px shorter (36px) than the input (38px) and its bottom edge sits a
 * couple pixels above the input's — a visible height step where they meet. Match
 * the add-on's vertical padding to the input's (left/right untouched, so the
 * add-on stays icon-width and the inputs keep their alignment). */
#btl-content .add-on {
	padding-top: 6px;
	padding-bottom: 6px;
}
#btl-content #btl-content-profile {
	min-width: 180px;
}
#btl-content h3 {
	margin: 5px 0 10px;
	font-size: 16px;
}
#btl-content .control-group {
	margin-bottom: 8px;
}
#btl-content ul.unstyled {
	margin: 8px 0 0;
	list-style: none;
}
#btl-content ul.unstyled li a {
	font-size: 12px;
	color: #888888;
}
#btl-content ul.unstyled li a:hover {
	text-decoration: underline;
}
#btl-content .btl-buttonsubmit {
	text-align: center;
	padding-top: 5px;
	border-top: 1px dotted #c4c4c4;
	margin-top: 10px;
}

/* On phones the absolute panel hangs off-screen right of the collapsed
 * toolbar; pin it to the viewport instead. */
@media (max-width: 480px) {
	#btl-content > .btl-content-block {
		position: fixed;
		left: 10px;
		right: 10px;
		top: 60px;
	}
	#btl-content #btl-content-login {
		width: auto;
	}
}