/**
 * at-amber Theme - Estate Console
 *
 * Fixed control panel for ambient estate features (desktop only)
 * Version: 1.1
 * Date: 2025-12-11
 * Changelog:
 * - v1.1: Fixed button sizing (60px) and positioning, laptop vertical layout
 * - v1.0: Initial implementation
 */

/* ===== ESTATE CONSOLE CONTAINER ===== */
.estate-console {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 280px;
	height: 130px;
	z-index: 1000;
	background-image: url('/Media/at-amber/estateconsole/estate-console-small.png');
	background-size: 280px 130px; /* Display at 1x (image is 560×260 at 2x) */
	background-repeat: no-repeat;
	background-position: center;
	display: none; /* Hidden by default, shown by JS on desktop */
	pointer-events: none; /* Console background doesn't catch clicks */
}

/* ===== BUTTON CONTAINER ===== */
.estate-console-buttons {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ===== INDIVIDUAL BUTTON SLOTS ===== */
.ec-btn {
	position: absolute;
	width: 60px;
	height: 60px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	pointer-events: all; /* Buttons are clickable */
	transition: transform 0.1s ease;
	outline: none;
}

/* Button positioning (60px buttons, positioned lower to avoid branding text) */
.ec-btn[data-btn="light"] {
	top: 40px;
	left: 35px;
}

.ec-btn[data-btn="music"] {
	top: 40px;
	left: 110px; /* 35 + 60 + 15px spacing */
}

.ec-btn[data-btn="reserved"] {
	top: 40px;
	left: 185px; /* 110 + 60 + 15px spacing */
}

/* ===== BUTTON LAYERS ===== */
/* Layer 1: Border (always stays colored - never grayscale) */
.ec-btn-border {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

/* Layer 2: Icon/Content (gets grayscale when inactive) */
.ec-btn-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: filter 0.3s ease;
	z-index: 1;
}

/* ===== BUTTON STATES ===== */

/* Active state (ON) - full color */
.ec-btn.active .ec-btn-icon {
	filter: none;
}

/* Inactive state (OFF) - grayscale on icon only, border stays colored */
.ec-btn.inactive .ec-btn-icon {
	filter: grayscale(100%);
}

/* Disabled state (reserved button) */
.ec-btn.disabled {
	cursor: not-allowed;
}

.ec-btn.disabled .ec-btn-icon {
	filter: grayscale(100%);
	opacity: 0.5;
}

/* Hover effect (brighten icon slightly) - NOT on disabled */
.ec-btn:not(.disabled):hover .ec-btn-icon {
	filter: brightness(1.15);
}

/* Hover on inactive button - grayscale + brighten */
.ec-btn.inactive:not(.disabled):hover .ec-btn-icon {
	filter: grayscale(100%) brightness(1.15);
}

/* Click effect (scale down briefly) - NOT on disabled */
.ec-btn:not(.disabled):active {
	transform: scale(0.95);
}

/* ===== RESPONSIVE BEHAVIOR ===== */

/* Hide on tablets and mobile (desktop only - matches room lamp behavior) */
@media (max-width: 1023px) {
	.estate-console {
		display: none !important;
	}
}

/* Laptop screens: Vertical button layout, hide console background */
@media (max-width: 1920px) and (min-width: 1024px) {
	.estate-console {
		background-image: none; /* Hide console background on smaller screens */
		width: 70px; /* Just enough for buttons */
		height: 210px; /* 3 buttons (60px each) + 2 gaps (10px each) + padding */
		bottom: 20px;
		right: 20px;
	}

	/* Stack buttons vertically */
	.ec-btn[data-btn="light"] {
		top: 0;
		left: 5px;
	}

	.ec-btn[data-btn="music"] {
		top: 70px; /* 60px button + 10px gap */
		left: 5px;
	}

	.ec-btn[data-btn="reserved"] {
		top: 140px; /* 70 + 60 + 10px gap */
		left: 5px;
	}
}