/* =========================================
   TH CELLS THAT HAVE AN EVENT HUB
========================================= */
th.has_event_hub
{
	position: relative;
	overflow: visible;
}

.has_event_hub
{
	position: relative;
}

/* When an event hub is open for this TH, hide the indicator tab */
th.event_hub_active .event_hub_indicator
{
	opacity: 0;
	pointer-events: none;
	animation: none;
}


/* =========================================
   EVENT HUB INDICATOR TAB (RIGHT EDGE)
   CLOSED STATE:
     - tab hugs right border
     - triangle on LEFT side, pointing into cell
========================================= */

.event_hub_indicator 
{
    position: absolute;
    right: 0;
    height: 70%;
    width: 10%;
    min-width: 15px;
    /* background-color: var(--menu-bg-color); */
    background-color: var(--utility-blue-color) !important;
    border: 1px solid #a3a3a3;
    border-right: 0;
	border-radius: 8px 0 0 8px;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.9) 2px, transparent 2.2px),
		radial-gradient(circle, rgba(255, 255, 255, 0.9) 2px, transparent 2.2px),
		radial-gradient(circle, rgba(255, 255, 255, 0.9) 2px, transparent 2.2px);
	background-repeat: no-repeat;
	background-position:
		50% calc(50% - 8px),
		50% 50%,
		50% calc(50% + 8px);
	background-size: 4px 4px, 4px 4px, 4px 4px;
	cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scaleX(1);
    transform-origin: right center;
    transition: opacity 150ms ease-out;
    top: 50%;
}

/* Closed triangle: LEFT edge, pointing into the cell */
.event_hub_indicator::before
{
	content: "";
	position: absolute;
	top: 50%;
	left: -9px;
	width: 0;
	height: 0;
	transform: translateY(-50%);

	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 10px solid var(--utility-blue-color) !important; /* same color as tab */
}

.event_hub_indicator::after
{
	content: "";
	position: absolute;
	top: 50%;
	left: -11px;
	width: 0;
	height: 0;
	transform: translateY(-50%);

	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 11px solid #a3a3a3;
	z-index: -1;
}

/* Show the tab on hover of the whole cell + subtle bounce */
.has_event_hub:hover .event_hub_indicator
{
	opacity: 1;
	pointer-events: auto;
	animation: event_hub_indicator_pulse 420ms ease-out 2;
}

.static_event_hub_indicator
{
	opacity: 1;
	pointer-events: auto;
}

/* Subtle width/bounce animation */
@keyframes event_hub_indicator_pulse
{
	0% {
		transform: translateY(-50%) scaleX(1);
	}
	40% {
		transform: translateY(-50%) scaleX(1.05);
	}
	100% {
		transform: translateY(-50%) scaleX(1);
	}
}


/* =========================================
   GLOBAL EVENT HUB FLYOUT (MENU BUBBLE)
   - positioned via JS so the bubble sits
     INSIDE the cell, with its right edge
     just left of the cell border
   - triangle lives on the RIGHT edge of the bubble,
     pointing toward the cell border
========================================= */

#event_hub_flyout
{
	position: fixed;
	z-index: 9999;
	display: none;
	pointer-events: auto;
	top: 0;
	left: 0;
}

.event_hub_panel
{
	position: absolute;
	top: 50%;
	left: 0;

	transform: translateY(-50%) translateX(0) scale(0.9);
	transform-origin: right center;

	/* background: var(--menu-bg-color); */
	background: var(--utility-blue-color) !important;
	border: 1px solid #a3a3a3;
	border-radius: 6px;
	padding: 6px 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.45);

	opacity: 0;
	pointer-events: none;

	display: grid;
	grid-template-columns: repeat(3, auto);
	column-gap: 10px;
	row-gap: 4px;

	transition: opacity 170ms ease-out 40ms,
	            transform 200ms ease-out 40ms;
}

/* Open triangle: RIGHT edge of bubble, pointing toward the cell border */
.event_hub_panel::after
{
	content: "";
	position: absolute;
	top: 50%;
	right: -10px;
	width: 0;
	height: 0;
	transform: translateY(-50%);

	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid var(--utility-blue-color) !important; /* same as bubble */
}

.event_hub_panel::before
{
	content: "";
	position: absolute;
	top: 50%;
	right: -11px;
	width: 0;
	height: 0;
	transform: translateY(-50%);

	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 11px solid #a3a3a3;
	z-index: -1;
}

/* When flyout is open, show the bubble + its triangle */
#event_hub_flyout.open .event_hub_panel
{
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0) scale(1);
}


/* =========================================
   EVENT HUB ITEMS
========================================= */

.event_hub_item
{
	background: transparent;
	border: 0;
	padding: 2px 4px;
	color: #ffffff;
	font-size: 11px;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
}

.event_hub_item:hover
{
	background: rgba(255, 255, 255, 0.13);
}


/* =========================================
   ICONS (unchanged)
========================================= */

.icon-info-circle {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.icon-bell {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.icon-palette {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/><path d='M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.icon-pp
{
	text-decoration: underline;
}

.icon-plus-circle {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.icon-dash-circle
{
	width: 16px;
	height: 16px;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/></svg>");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

[data-theme="light"] .event_hub_indicator
{
	background-color: #6f7b8f;
	border: 0;
}

[data-theme="light"] .event_hub_indicator::before
{
	border-right-color: #6f7b8f;
}

[data-theme="light"] .event_hub_indicator::after
{
	border-right-color: #6f7b8f;
}

[data-theme="light"] .event_hub_panel
{
	background: #4a5467;
}

[data-theme="light"] .event_hub_panel::after
{
	border-left-color: #4a5467;
}

[data-theme="light"] .event_hub_panel::before
{
	border-left-color: #4a5467;
}

[data-theme="light"] #event_hub_flyout.open .event_hub_panel
{
	border-color: #ffffff;
}

[data-theme="light"] #event_hub_flyout.open .event_hub_panel::before
{
	border-left-color: #ffffff;
}


#event_hub_highlight_container
{
    display: none;
	visibility: hidden;
    flex-wrap: wrap;
	justify-content: flex-start;
	grid-column: 1 / -1;
	justify-self: center;
    width: 11.5rem;
    row-gap: 0.7rem;
    column-gap: 0.75rem;
	padding: 7px 0px;
	font-size: 0.8em;
}


#EH_default_highlight_module 
{ 
	flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.EH_preset_module
{
	width: 3rem;
    height: 1.75rem;
    border: 1.5px solid white;
    border-radius: 5px;
    box-shadow: 1px 1px 5px -3px #00000091, 0px 0px 2px -1px #00000075;
	cursor: pointer;
}

.EH_preset_module:hover>div.close-button
{
	opacity: 0.5;
}

#EH_color_picker_container
{
	display: flex;
    justify-content: center;
    position: relative;
    flex-basis: 100%;
}

#EH_color_picker_label
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#event_hub_add_to_view_container
{
	display: none;
	visibility: hidden;
	flex-wrap: wrap;
	grid-column: 1 / -1;
	justify-self: center;
	font-size: 0.8rem;
}

#event_hub_add_to_view_list
{
    height: 11em;
    width: 9em;
    flex-basis: 100%;
}

#event_hub_add_to_view_list > li
{
	color: var(--primary-font-color) !important;
}

#event_hub_add_to_view_submit_button
{
	flex-basis: 100%;
	font-size: 0.7rem !important;
}

[data-theme="light"] #event_hub_add_to_view_container_close_button, 
[data-theme="light"] #event_hub_highlight_container_close_button
{
	background-color: var(--primary-bg-color);
    opacity: 1;
    box-shadow: -0.5px 1px 3px 0px #83838359;
}

[data-theme="dark"] #event_hub_add_to_view_container_close_button, 
[data-theme="dark"] #event_hub_highlight_container_close_button
{
	background-color: var(--primary-font-color);
    opacity: 1;
    box-shadow: -0.5px 1px 3px 0px #83838359;
}