/* Watch History Top Button Placement */
.open-history-modal-btn {
	position: absolute;
	top: 30px;
	right: 290px; /* Positioned dynamically to the left of the Download button */
	background: rgba(28, 231, 131, 0.15);
	color: #fff;
	border: 1px solid rgba(28, 231, 131, 0.35);
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
	z-index: 10;
}

.open-history-modal-btn:hover {
	background: #1ce783;
	color: #111;
	border-color: #1ce783;
	transform: scale(1.03);
}

/* History Modal Customizations */
.history-modal-content {
	max-width: 750px !important;
	max-height: 85vh !important;
	overflow-y: auto !important;
}

.history-modal-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
	overflow-y: visible !important; /* Let modal container handle overflow instead of inner body clipping */
}

.history-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	padding: 10px 15px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.history-view-switcher {
	display: flex;
	gap: 5px;
}

.history-tab-btn {
	background: #111;
	border: 1px solid #444;
	color: #aaa;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: all 0.2s;
}

.history-tab-btn.active, .history-tab-btn:hover {
	background: #1ce783;
	color: #111;
	border-color: #1ce783;
	font-weight: 600;
}

.history-nav-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

.history-nav-btn {
	background: #222;
	border: 1px solid #444;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: background 0.2s;
}

.history-nav-btn:hover {
	background: #333;
	border-color: #1ce783;
}

.history-current-display {
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	min-width: 140px;
	text-align: center;
}

/* Legend Styling */
.history-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	font-size: 0.75rem;
	color: #888;
}

.history-legend-scale {
	display: flex;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.history-legend-scale li {
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

/* Heatmap Grid Frameworks */
.history-calendar-container {
	flex: 1;
	background: #121212;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 15px;
	overflow-y: visible;
}

/* Month Matrix Layout */
.month-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.calendar-weekday-label {
	text-align: center;
	font-size: 0.75rem;
	color: #777;
	font-weight: 600;
	padding-bottom: 6px;
}

.calendar-day-cell {
	aspect-ratio: 1;
	background: #1a1a1a;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 6px;
	font-size: 0.8rem;
	color: #555;
	border: 1px solid rgba(255, 255, 255, 0.02);
	position: relative;
	transition: transform 0.1s;
}

.calendar-day-cell.active-day {
	color: #fff;
}

.calendar-day-cell:hover {
	border-color: rgba(28, 231, 131, 0.5);
	transform: scale(1.05);
	z-index: 2;
}

/* Year Matrix View (GitHub style small grid cells) */
.year-calendar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 15px;
}

.year-month-block {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	padding: 10px;
}

.year-month-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: #ccc;
	margin-bottom: 8px;
}

.year-days-mini-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.mini-day-cell {
	aspect-ratio: 1;
	border-radius: 2px;
	background: #1a1a1a;
}

/* Activity Heatmap Level Intensity Colors */
[data-level="0"] { background: #1a1a1a !important; }
[data-level="1"] { background: #0e3b23 !important; color: #8ef9c2 !important; border-color: #135231 !important; }
[data-level="2"] { background: #117a42 !important; color: #fff !important; }
[data-level="3"] { background: #17b361 !important; color: #fff !important; }
[data-level="4"] { background: #1ce783 !important; color: #111 !important; font-weight: bold; }

.history-summary-stats {
	font-size: 0.85rem;
	color: #888;
	text-align: center;
	padding-top: 5px;
}

/* Date Detail Activity Drawer / List - Expanded naturally without inner scrollbar */
.history-day-details-panel {
	background: #181818;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 15px;
	margin-top: 15px;
	overflow-y: visible;
}

.history-day-details-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1ce783;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.history-watched-item-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #222;
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 8px;
	border: 1px solid rgba(255, 255, 255, 0.03);
	cursor: pointer;
	transition: background 0.2s;
}

.history-watched-item-card:hover {
	background: #2a2a2a;
	border-color: #1ce783;
}

.history-watched-thumb {
	width: 35px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	background: #333;
	flex-shrink: 0;
}

.history-watched-info {
	flex: 1;
	overflow: hidden;
}

.history-watched-name {
	font-size: 0.85rem;
	color: #fff;
	font-weight: 500;
	margin: 0 0 3px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.history-watched-meta {
	font-size: 0.75rem;
	color: #888;
	margin: 0;
}

.calendar-day-cell.selected-cell, .mini-day-cell.selected-cell {
	border-color: #1ce783 !important;
	box-shadow: 0 0 8px rgba(28, 231, 131, 0.4);
}

/* Floating Day Hover Preview Card Container (Spawned globally on document.body) */
.day-hover-popup {
	position: fixed;
	background: #1c1c1c;
	border: 1px solid rgba(28, 231, 131, 0.4);
	border-radius: 8px;
	padding: 10px;
	width: 210px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
	z-index: 9999; /* Highest layer on the page */
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.95);
	transform-origin: bottom center;
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.25s;
}

/* Active State: Opens smoothly from bottom to top */
.day-hover-popup.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* Carrot / Arrow pointer connecting card downwards to the day element */
.day-hover-popup.arrow-bottom::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: #1c1c1c transparent transparent transparent;
}

.day-hover-popup.arrow-bottom::before {
	content: "";
	position: absolute;
	top: calc(100% + 1px);
	left: 50%;
	transform: translateX(-50%);
	border-width: 7px;
	border-style: solid;
	border-color: rgba(28, 231, 131, 0.4) transparent transparent transparent;
	z-index: -1;
}

/* Fallback arrow pointing upwards if popup spawns below */
.day-hover-popup.arrow-top::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #1c1c1c transparent;
}

.day-hover-popup.arrow-top::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 1px);
	left: 50%;
	transform: translateX(-50%);
	border-width: 7px;
	border-style: solid;
	border-color: transparent transparent rgba(28, 231, 131, 0.4) transparent;
	z-index: -1;
}

.day-hover-header {
	font-size: 0.75rem;
	font-weight: 600;
	color: #1ce783;
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
}

.day-hover-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Dynamically grows to fit all entries without a scroll bar */
}

.day-hover-item {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #252525;
	padding: 4px 6px;
	border-radius: 4px;
}

.day-hover-thumb {
	width: 26px;
	height: 36px;
	object-fit: cover;
	border-radius: 2px;
	background: #333;
	flex-shrink: 0;
}

.day-hover-info {
	flex: 1;
	overflow: hidden;
}

.day-hover-title {
	font-size: 0.75rem;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

.day-hover-sub {
	font-size: 0.65rem;
	color: #888;
	margin: 0;
}

/* Ensure calendar day containers allow absolute positioning of the hover card */
.calendar-day-cell, .mini-day-cell {
	position: relative;
}