@charset "UTF-8";

#sidebarMenu {
	height: 100%;
	position: fixed;
	left: 0;
	width: 310px;
	margin-top: 70px;
	transform: translateX(-310px);
	transition: transform 250ms ease-in-out;
	background: linear-gradient(180deg, var(--tmb-sidebar-top) 0%, var(--tmb-sidebar-bottom) 100%);
	overflow: scroll;
	z-index: 99;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-font-smoothing: subpixel-antialiased !important;
}

#sidebarMenu::-webkit-scrollbar { 
    display: none;
}

.sidebarMenuInner {
	position: relative;
	margin: 0;
	padding: 0 0 100px 0;
	border-top: 1px solid var(--tmb-white-10);
}

.sidebarMenuInner li {
	list-style: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	padding: 20px;
	border-bottom: 1px solid var(--tmb-white-10);
}

.sidebarMenuInner li span.menu-title {
	color: #fff;
	font-size: 21px;
	display: block;
	padding: 0 0 15px 0;
}

.sidebarMenuInner li span {
	display: block;
	font-size: 18px;
	padding: 5px;
	color: var(--tmb-white-50);
}

.sidebarMenuInner li span a {
    color: var(--tmb-white-50);
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease !important;
}

.sidebarMenuInner li span a:hover {
	color: white;
	padding-left: 6px;
}

/* Sport-first nav (TMB_NAV_SPORT_FIRST): highlight the currently-selected sport */
.sidebarMenuInner li span a.sport-active {
	color: #fff;
	padding-left: 6px;
}

/* ------------------------------------------------------------------
   Sport sub-menu (second level of the sport-first nav)

   Desktop: slides out to the RIGHT of the sidebar on hover/focus.
   Mobile:  slides OVER the sidebar when a sport is tapped, with a back button.
   Lives OUTSIDE #sidebarMenu (which is overflow:scroll and would clip it).
   ------------------------------------------------------------------ */

/* The hovered/open sport gets a lighter block that runs flush to the sidebar's
   right edge, so it visually joins the panel that flew out next to it. Hence the
   negative right margin (cancels the li's 20px padding) and the left-only radius. */
.sidebarMenuInner li span.sb-sport-row {
	margin-left: -8px;
	margin-right: -20px;
	padding-left: 8px;
	padding-right: 20px;
	border-radius: 4px 0 0 4px;
	transition: background-color 0.2s ease;
}

.sidebarMenuInner li span.sb-sport-row:hover,
.sidebarMenuInner li span.sb-sport-row.sb-open {
	background-color: var(--tmb-white-10);
}

.sidebarMenuInner li span.sb-sport-row a {
	display: block;
	position: relative;
	padding-right: 18px;
}

/* The block itself is now the hover cue — the extra text nudge every other
   sidebar link does would just make it look like it's shifting inside the block. */
.sidebarMenuInner li span.sb-sport-row a:hover {
	padding-left: 0;
}

.sidebarMenuInner li span.sb-sport-row a.sport-active:hover {
	padding-left: 6px;
}

.sb-chevron {
	display: inline-block !important;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1;
	padding: 0 !important;
	opacity: 0.45;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.sidebarMenuInner li span.sb-sport-row a:hover .sb-chevron,
.sidebarMenuInner li span.sb-sport-row a[aria-expanded="true"] .sb-chevron {
	opacity: 1;
	transform: translateY(-50%) translateX(3px);
}

/* Admin Only (admins alone): a row that opens its panel like a sport row
   (so it shares .sb-sport-row and the chevron), drawn as a section heading. */
.sidebarMenuInner li span.sb-admin-row {
	padding-top: 0;
	padding-bottom: 0;
}
.sidebarMenuInner li span.sb-admin-row a {
	color: #fff;
	font-size: 21px;
}

/* My Dashboards block at the foot of each sport panel: a hairline separating it
   from that sport's normal pages, then the user's own dashboards indented under
   the "My Dashboards" link.

   padding MUST be zeroed, and the selector MUST out-specify `.sb-sub span`
   below. This is a <span>, so it picks up that rule's `padding: 5px`, and
   background-color paints the padding box — so a 1px rule rendered as an 11px
   translucent slab instead of a hairline. `.sb-sub-divider` alone (0,1,0) LOSES
   to `.sb-sub span` (0,1,1), so it has to be qualified like this to win. */
.sb-sub span.sb-sub-divider {
	display: block;
	height: 1px;
	padding: 0;
	margin: 10px 0 8px;
	background-color: var(--tmb-white-10);
}

/* Indentation alone marks these as children — deliberately NO smaller font and
   no dimmer colour, so a dashboard reads as an equal peer of the pages above
   it, just nested. */
.sb-sub .sb-sub-dash a {
	padding-left: 16px;
}

.sb-sub .sb-sub-dash a:hover {
	/* Every other sidebar link nudges 6px on hover; start from the indent so
	   these shift by the same amount rather than jumping back to flush. */
	padding-left: 22px;
}

/* "Dashboards" and "Player Level": headings over Matchup with the member's
   dashboards, and over the player pages, each indented under it at the
   dashboards' 16px (2026-10-17). */
.sb-sub span.sb-sub-group {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--tmb-white-50);
	padding: 14px 5px 4px;
	cursor: default;
}

.sb-sub .sb-sub-child a {
	padding-left: 16px;
}

.sb-sub .sb-sub-child a:hover,
.sb-sub .sb-sub-child a.page-active,
.sb-sub .sb-sub-dash a.page-active {
	padding-left: 22px;
}

#sbFlyout {
	position: fixed;
	top: 70px;
	left: 310px;
	width: 320px; /* 260 until 2026-10-17: the page labels wrapped */
	height: calc(100% - 70px);
	overflow-y: auto;
	/* A shade inside the sidebar's own gradient (its two tokens), so a site that
	   sets the sidebar's colours gets a flyout that runs the same way. */
	background: linear-gradient(180deg, color-mix(in srgb, var(--tmb-sidebar-top), var(--tmb-brand) 6%) 0%, color-mix(in srgb, var(--tmb-sidebar-top), var(--tmb-sidebar-bottom) 77%) 100%);
	border-left: 1px solid var(--tmb-white-10);
	box-shadow: 6px 0 18px var(--tmb-black-20);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-font-smoothing: subpixel-antialiased !important;
}

#sbFlyout::-webkit-scrollbar {
	display: none;
}

#sbFlyout.open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* The sub-menu can never outlive the drawer that owns it. */
input[type="checkbox"].openSidebarMenu:not(:checked) ~ #sbFlyout {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}

.sb-sub {
	display: none;
	padding: 20px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
}

.sb-sub.active {
	display: block;
}

.sb-sub span {
	display: block;
	font-size: 18px;
	padding: 5px;
	color: var(--tmb-white-50);
}

.sb-sub span a {
	color: var(--tmb-white-50);
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: color 0.3s ease, padding-left 0.3s ease;
}

.sb-sub span a:hover {
	color: #fff;
	padding-left: 6px;
}

.sb-sub span a.page-active {
	color: #fff;
	padding-left: 6px;
}

.sb-sub-head {
	padding: 0 0 15px 0;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--tmb-white-10);
}

.sb-sub-title {
	color: #fff !important;
	font-size: 21px;
	display: block;
	padding: 0 !important;
}

/* Back button is a mobile affordance — on desktop the flyout is dismissed by
   moving the mouse away, so showing it there would just be noise. */
/* front.css sets a blanket `button { background-color: #edeced !important }`,
   so every reset here has to shout back at it. */
.sb-back {
	display: none;
	align-items: center;
	width: 100%;
	background: none !important;
	background-color: transparent !important;
	border: 0;
	color: var(--tmb-white-70);
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: left;
	white-space: nowrap;
	padding: 0 0 12px 0;
	margin: 0 !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

.sb-back:hover,
.sb-back:focus {
	background: none !important;
	background-color: transparent !important;
	color: #fff;
	outline: none;
}

.sb-back-icon {
	font-size: 22px;
	line-height: 1;
	margin-right: 6px;
	vertical-align: -3px;
}

.new-label {
	display: inline-block !important;
	background: var(--tmb-bad-8);
	color: #fff !important;
	font-size: 10px !important;
	font-weight: bold;
	padding: 1px 5px !important;
	border-radius: 3px;
	margin-left: 4px;
	margin-right: 4px;
	vertical-align: middle;
	position: relative;
	top: -2px;
	letter-spacing: 0.5px;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
	transform: translateX(0);
}


input[type="checkbox"].openSidebarMenu {
	transition: all 0.3s;
	box-sizing: border-box;
	display: none !important;
}

.sidebarIconToggle {
	transition: all 0.3s;
	box-sizing: border-box;
	cursor: pointer;
	position: fixed;
	z-index: 999999;
	top: 24px;
	left: 25px;
	height: 22px;
	width: 22px;
	display: block !important;
    color: white;
}

.spinner {
	transition: all 0.3s;
	box-sizing: border-box;
	position: absolute;
	height: 3px;
	width: 100%;
	background-color: #fff;
}

.horizontal {
	transition: all 0.3s;
	box-sizing: border-box;
	position: relative;
	float: left;
	margin-top: 3px;
}

.diagonal.part-1 {
	position: relative;
	transition: all 0.3s;
	box-sizing: border-box;
	float: left;
}

.diagonal.part-2 {
	transition: all 0.3s;
	box-sizing: border-box;
	position: relative;
	float: left;
	margin-top: 3px;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle > .horizontal {
	transition: all 0.3s;
	box-sizing: border-box;
	opacity: 0;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
	transition: all 0.3s;
	box-sizing: border-box;
	transform: rotate(135deg);
	margin-top: 8px;
}

input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
	transition: all 0.3s;
	box-sizing: border-box;
	transform: rotate(-135deg);
	margin-top: -9px;
}

.sidebarMenuInner li span.sport-beta-badge {
	display: inline-block;
	font-size: 0.55em;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.03em;
	opacity: 0.75;
	margin-left: 5px;
	padding: 1px 4px;
	border: 1px solid currentColor;
	border-radius: 3px;
	vertical-align: middle;
	color: inherit;
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Add any tablet-specific styles here if needed */
}

/* Mobile styles */
@media (max-width: 767px) {
	#sidebarMenu {
		margin-top: 60px;
		width: 100%;
		max-width: 310px;
	}
	
	.sidebarIconToggle {
		top: 19px;
		left: 16px;
		position: fixed;
		z-index: 999;
	}
	
	/* Optional: Add overlay when menu is open */
	input[type="checkbox"]:checked ~ #sidebarMenu {
		box-shadow: 0 0 0 100vmax var(--tmb-black-45);
	}

	/* Sub-menu takes OVER the drawer instead of sitting beside it, sliding in
	   from the left across the sport list.

	   No page scrim here: the open drawer already paints one (see the
	   :checked ~ #sidebarMenu rule above) and the flyout stacks on top of it,
	   so a second 100vmax shadow just darkens the page twice. */
	#sbFlyout {
		top: 60px;
		left: 0;
		width: 100%;
		max-width: 310px;
		height: calc(100% - 60px);
		border-left: 0;
		box-shadow: none;
		opacity: 1;
		transform: translateX(-100%);
		transition: transform 250ms ease-in-out, visibility 250ms;
	}

	#sbFlyout.open {
		transform: translateX(0);
	}

	.sb-back {
		display: flex;
	}

	/* The chevron reads as "opens a sub-menu" — on mobile that's the only
	   thing tapping a sport does, so keep it at full strength. */
	.sb-chevron {
		opacity: 0.7;
	}
}
/* Utility links at the foot of the sidebar (Account Settings, Admin, Send Feedback, X) */
.sidebarMenuInner li span a .sb-ico {
	display: inline-block;
	width: 1.1em;
	margin-right: 8px;
	text-align: center;
}
.sidebarMenuInner li span a svg.sb-ico-x {
	height: 0.9em;
	vertical-align: -0.05em;
}