/* sources/css/player_props.css */

body.player_props_mode #schedule tr.pp_market_filtered_out
{
	display: none !important;
}

/* Team header rows (head1 but NOT head1prop) */
body.player_props_mode #schedule td.head1:not(.head1prop),
body.player_props_mode #schedule td.head1:not(.head1prop) + td.head1x
{
	background-color: #2c5aa0 !important;
	background: #2c5aa0 !important;
	font-weight: bold !important;
}

body.player_props_mode #schedule .team
{
	left: var(--playerLeft) !important;
	text-align: center !important;
}

body.player_props_mode #schedule .separator
{
	left: 183px !important;
	background: #0000006b !important;
}

body.player_props_mode #schedule .headTD2
{
	margin-left: 1.5em;
	font-style: italic;
	font-weight: 400;
}

/* Undo the italic look for TEAM header label (header10001 + header10002) */
body.player_props_mode #header10001 .headTD2,
body.player_props_mode #header10002 .headTD2
{
	margin-left: 0 !important;
	font-style: normal !important;
	font-weight: bold !important;
}

body.player_props_mode #schedule .time,
body.player_props_mode #schedule .gnum,
body.player_props_mode #schedule .score
{
	display: none !important;
}

body.player_props_mode #header_container
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-left: 1em;
	column-gap: 1em !important;
}

body.player_props_mode #header_container .logo
{
	order: 0;
}

body.player_props_mode #items_menu
{
	order: 1 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	display: flex !important;
	align-items: center;
	column-gap: 0.5em;
}

body.player_props_mode #market_menu
{
	order: 2;
	margin-right: 0 !important;
	margin-top: 0 !important;
}

body.player_props_mode #main_menu,
body.player_props_mode #toggle,
body.player_props_mode .hamburger
{
	display: none !important;
}

body.player_props_mode #league_menu > :not(.logo)
{
	display: none !important;
}

body.player_props_mode #shortcut_items > li > span:not(#clear_all_button)
{
	display: none !important;
}

body.player_props_mode #shortcut_items
{
	margin-block: 0.5em !important;
}

body.player_props_mode #shortcut_menu
{
	order: 2 !important;
}

#sort_icon
{
	width: 30px;
	height: 30px;
	background-color: currentColor;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z'/%3E%3C/svg%3E");
	mask-image: -webkit-mask-image;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-size: contain;
	mask-size: contain;

	cursor: pointer;
    transition: filter 250ms ease-in-out;

	position: relative;
	display: inline-block;
	order: 1;
}

[data-theme="light"] #sort_icon
{
	background-color: black;
}

[data-theme="dark"] #sort_icon
{
	background-color: white;
}

#sort_icon:hover
{
    filter: invert(46%) sepia(9%) saturate(3320%) hue-rotate(177deg) brightness(97%) contrast(85%);
}

#sort_flyout
{
	position: absolute;
	z-index: 9999;

	top: calc(100% + 3px);

	/* keep your desired horizontal offset here permanently */
	left: 687px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	/* stronger “fade down” feeling */
	transform: translateY(-8px) scale(0.98);
	transform-origin: top left;

	transition: opacity 140ms ease-out,
	            transform 160ms ease-out,
	            visibility 0ms linear 160ms;
}

#sort_flyout .sort_panel
{
	position: relative;

	background: #4a5467;
	border-radius: 10px;

	min-width: 110px;
	height: 61px;

	padding: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.45);

	z-index: 5;
}

[data-theme="light"] #sort_flyout .sort_panel
{
	background: #526fac;
}

#sort_flyout .sort_panel::before
{
	content: "";
	position: absolute;

	left: 18px;
	top: -10px;

	width: 0;
	height: 0;

	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #4a5467; /* same as bubble */
}

[data-theme="light"] #sort_flyout .sort_panel::before
{
	border-bottom: 10px solid #526fac;
}

#sort_icon:hover + #sort_flyout,
#sort_flyout:hover
{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translateY(0) scale(1);

	transition: opacity 140ms ease-out,
	            transform 160ms ease-out,
	            visibility 0ms linear 0ms;
}

#sort_flyout .sort_hover_bridge
{
	position: absolute;

	/* bridge the gap from icon down into panel */
	top: -18px;      /* extends upward above the panel */
	left: -12px;     /* widen the hover capture area */
	right: -12px;
	height: 24px;    /* the “forgiveness” zone */

	/* invisible but hoverable */
	background: transparent;
}

/* =========================
   DARK MODE OVERRIDES
========================= */
/* =========================================
   DARK MODE: PANEL + TRIANGLE (BORDERED)
   Triangle is a rotated square, so border is perfect.
========================================= */

[data-theme="dark"] #sort_flyout .sort_panel
{
	background: #0c1c30;
	border: 0.5px solid #ffffffbf !important;
	box-shadow: 0 0 10px rgba(0,0,0,.55);
	position: relative;
}

/* kill the old border-triangle approach in dark mode */
[data-theme="dark"] #sort_flyout .sort_panel::before,
[data-theme="dark"] #sort_flyout .sort_panel::after
{
	content: none !important;
}

/* new triangle "nub" with proper border */
[data-theme="dark"] #sort_flyout .sort_panel .sort_nub
{
	position: absolute;
	top: -7px;          /* how far it sticks out */
	left: 18px;         /* inset from left (keeps corner radius visible) */

	width: 14px;
	height: 14px;

	background: #0c1c30;
	border-left: 0.5px solid #ffffffbf;
	border-top: 0.5px solid #ffffffbf;

	transform: rotate(45deg);

	/* ensure it sits above the panel background but looks seamless */
	z-index: 2;
}

/* optional: hide the extra border where nub meets panel
   (prevents a double-thick seam on some displays) */
[data-theme="dark"] #sort_flyout .sort_panel .sort_nub_cover
{
	position: absolute;
	top: 0;
	left: 12px;
	width: 40px;
	height: 8px;
	background: #0c1c30;
	z-index: 1;
}

[data-theme="light"] #player_props_sort_list > li
{
	color: white;
}

[data-theme="light"] #player_props_sort_list > li:hover
{
	background-color: #5799ff;
}

#player_props_sort_list
{
	list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0em;
	font-size: 0.95em;
}

#player_props_sort_list > li
{
    display: flex;
    align-items: center;
    column-gap: 1.25em;
    padding: 6px;
    font-size: 0.9em;
}

.green-circle 
{
	height: 12px;
    width: 12px;
    background-color: #00ed00 !important;
    border-radius: 50%;
    border: 1.25px solid white;
    display: inline-block;
}

#pp_markets_dropdown_list
{
	max-height: 600px;
	overflow: scroll;
}