:root {

	/* Dimensions */
	--channel-width: 90px;
	--sidebar-width: 19em;

	/* Base Colors */
	--background-color: #1E2328;
	--background-sidebar-color: #282c30;
	--background-submix-color: #47525C;
	--text-color: #d0ced6;
	--text-highlight-color: #fbf8f8;
	--border-color: gray;
	--border-highlight-color: lightgray;

	/* Base Toggle-Button colors */
	--toggle-hover-color: #606a6f;
	--toggle-active-color: #f8f8f8;
	--toggle-checked-color: #ccc;

	/* Mute, Solo & AdHoc Fader colors */
	--mute-color: #4a86e8;
	--mute-highlight-color: #1a45ee;
	--mute-highlight-color-shadow: rgba(0, 95, 252, 0.8);
	--solo-color: #dd5f00b5;
	--solo-highlight-color: #f67c0a;
	--solo-highlight-color-shadow: rgba(255, 102, 0, 0.8);
	--adhoc-color: #ffffff00;
	--adhoc-highlight-color: #d39f27;
	--adhoc-highlight-color-shadow: rgb(122 99 42 / 82%);

	/* Store/Load Button colors */
	--store-color: #f8000085;
	--store-highlight-color: #f80000;
	--store-highlight-color-shadow: rgb(255 0 0 / 82%);
	--load-color: rgba(0, 248, 0, 0.53);
	--load-highlight-color: #00f800;
	--load-highlight-color-shadow: rgb(255 0 0 / 82%);

	/* Meter-colors */
	--meter-red: #f33628;
	--meter-orange: #ff8100;
	--meter-yellow: #d1f000;
	--meter-green: #03ff00;
	--meter-bg-color: #222;
	
	/* EQ-colors */
	--eq-plot-bg: linear-gradient(to right, #400000, #004000, #000040);

	/* Knob-colors */
	--knob-bg-color: #555;
	--knob-border-color: orange;
	--knob-marker-color: #fff;

	/* FX-colors */
	--fx-ring-green: #00ff00;
	--fx-ring-yellow: #ffff00;
	--fx-ring-orange: #ff7f00;
	--fx-ring-red: #ff0000;
	--fx-center-bg: #444;
	--fx-center-border: #00ffa1;
}

* {
	font-family: sans-serif;
	color: var(--text-color);
	font-size: small;
}

body {
	display: flex;
	margin: 0;
	background-color: var(--background-color);
	scrollbar-color: var(--border-color) var(--background-color);
}

html, body {
	height: 100%;
}

summary {
	font-weight: bold;
	overflow: hidden;
}

summary > input {
	float: right;
}

fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 0;
	padding: 0;
}

fieldset > label {
	display: contents;
}

fieldset span:has(input[type="checkbox"]) {
	text-align: right;
}

fieldset output {
	border: 1px solid var(--border-color);
	border-radius: 2px;
}

output {
	font-size: smaller;
	padding: 2px;
}

.toggle-button {
	font-size: small;
	border: 1px solid var(--border-color);
	text-align: center;
	padding: 2px;
}

.toggle-button > input[type="checkbox"] {
	display: none;
}

.toggle-button:hover {
	background-color: var(--toggle-hover-color);
}

.toggle-button:active {
	background-color: var(--toggle-active-color);
}

.toggle-button:has(> input[type="checkbox"]:checked) {
	background-color: var(--toggle-checked-color);
	color: var(--background-color);
}

/* Mute & Solo Buttons */
.toggle-button.mute-button:has(> .mute-checkbox:checked) {
	background-color: var(--mute-color) !important;
	color: var(--text-highlight-color);
}

.toggle-button.solo-button:has(> .solo-checkbox:checked) {
	background-color: var(--solo-color) !important;
	color: var(--text-highlight-color);
}

/* Rec & Play Buttons */
.toggle-button.record-button:has(> .record-checkbox:checked) {
	background-color: red !important;
	color: var(--text-highlight-color);
}

.toggle-button.play-button:has(> .play-checkbox:checked) {
	background-color: green !important;
	color: var(--text-highlight-color);
}

/* Setup Slots & Store Buttons */
.toggle-button.slot-button:has(> .slot-checkbox:checked) {
	background-color: var(--mute-color);
	color: var(--text-highlight-color);
}

.toggle-button.store-button:has(> .store-checkbox:checked) {
	background-color: red;
	color: var(--text-highlight-color);
}

.toggle-button.load-button:has(> .load-checkbox:checked) {
	background-color: greenyellow;
	color: var(--text-highlight-color);
}

/* Highlight if Global Mute/Solo enabled */
body.global-mute-enabled .toggle-button.mute-button:has(> .mute-checkbox:checked) {
	background-color: var(--mute-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--mute-highlight-color-shadow);
}

body.global-solo-enabled .toggle-button.solo-button:has(> .solo-checkbox:checked) {
	background-color: var(--solo-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--solo-highlight-color-shadow);
}

#sidebar {
	background-color: var(--background-sidebar-color);
	border-left: 1px solid var(--border-color);
	overflow-y: auto;
	padding: 4px 0 4px 4px;
	flex: 0 0 var(--sidebar-width);
}

#sidebar > details > :not(:first-child) {
	padding: 4px;
}

#sidebar fieldset {
	row-gap: 4px;
	padding: 4px;
	margin: 0;
}

#connection-icon {
	float: right;
	font-weight: normal;
	font-size: smaller;
}

#connection-icon::after {
	margin-left: 2px;
}

#connection-icon[data-state="connected"]::after {
	content: "\1F7E2";
}

#connection-icon[data-state="failed"]::after {
	content: "\274C";
}

label:has(#connection-type:not([data-value="MIDI"])) ~ .connection-midi {
	display: none;
}

label:has(#connection-type:not([data-value="WebSocket"])) ~ .connection-websocket {
	display: none;
}

#channels {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: auto;
}

#channels > details {
	padding: 4px;
}

/* HACK: it seems display: flex doesn't work properly in <details> */
#channels > details:not([open]) + .channel-strip {
	display: none;
}

#channels > hr {
	margin: 3px 0;
}

.channel-strip {
	flex-basis: 400px;
	display: flex;
	flex-shrink: 1;
	min-height: 200px;
	overflow-x: auto;
	column-gap: 5px;
	padding: 2px 4px;
}

.channel-outer {
	display: flex;
	outline: 1px solid var(--border-color);
	border-radius: 4px;
	overflow: clip;
}

.channel-outer [data-flags]:not(
.channel-outer[data-flags~="input"] [data-flags~="input"],
.channel-outer[data-flags~="output"] [data-flags~="output"],
.channel-outer[data-flags~="playback"] [data-flags~="playback"],
.channel-outer[data-flags~="48v"] [data-flags~="48v"],
.channel-outer[data-flags~="hi-z"] [data-flags~="hi-z"],
.channel-outer[data-flags~="reflevel"] [data-flags~="reflevel"],
.channel-outer[data-flags~="gain"] [data-flags~="gain"],
.channel-outer[data-flags~="autoset"] [data-flags~="autoset"])
{
	display: none;
}

:root:has(#routing-mode > option:checked[value="submix"]) .channel-outer:has(.submix:checked) {
	outline: 2px solid var(--border-highlight-color);
	background-color: var(--background-submix-color);
}

.submix {
	display: none;
}

.channel-outer.channel-right:has(.stereo:checked) {
	display: none;
}

.channel {
	display: flex;
	flex-direction: column;
	width:  var(--channel-width);
}

.channel > * {
	border: 0;
}

.channel > :not(:last-child) {
	border-bottom: 1px solid var(--border-color);
}

.channel:has(.channel-show-settings:not(:checked)) ~ .channel-panel-settings {
	width: 0;
	padding: 0;
	border-left-width: 0;
	overflow: hidden;
}

.channel:has(.channel-show-eq:not(:checked)) ~ .channel-panel-eq {
	width: 0;
	padding: 0;
	border-left-width: 0;
	overflow: hidden;
}

.channel:has(.channel-show-dynamics:not(:checked)) ~ .channel-panel-dynamics {
	width: 0;
	padding: 0;
	border-left-width: 0;
	overflow: hidden;
}

.channel-name-form {
	display: flex;
	flex-direction: column;
}

.channel-name {
	text-align: center;
	font-weight: bold;
	border: 0;
	background-color: var(--background-color);
}

.channel-name:read-only {
	outline: none;
}

.channel-pan {
	text-align: center;
	height: 80px;
	width: 80px;
}

.channel-pan[type="range"] {
	appearance: none;
	border-radius: 4px;
	border: 1px solid green;
	background-color: darkgray;
}

.channel-volume input[type="range"] {
	appearance: none;
	width: 4px;
	border-radius: 6px;
	border: 6px solid darkgray;
	background-color: black
}

.channel-volume input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 54px;
	background: url('../../img/fader_silver.png') no-repeat;
	background-size: 18px 54px;
	background-position: 0 1px;
	transform: translateY(3px);
	margin-left: -18px;
}

.channel-volume input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 54px;
	background: url('../../img/fader_silver.png') no-repeat;
	background-size: 18px 54px;
	background-position: 0 1px;
	transform: translateY(3px);
	margin-left: -18px;
	border: none;
}

input[type=range]:focus {
	outline: none;
}

.channel-mute {
	display: flex;
	justify-content: center;
}

.channel-mute > label {
	border-width: 0;
	padding-block: 1px;
	flex-grow: 1;
}

.channel-mute > label:first-of-type {
	border-right-width: 1px;
}

.channel-meter-value {
	display: flex;
	justify-content: space-evenly;
	margin: 2px 4px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	font-size: 0.75em;
}

.channel-volume {
	display: flex;
	flex-grow: 1;
	min-height: 0;
}

.channel-volume meter {
	min-width: 22%;
	height: auto;
}

.channel-volume meter::-webkit-meter-optimum-value {
	transition: 0.1s inline-size;
	background: linear-gradient(to top,
	var(--meter-green) 0%,
	var(--meter-yellow) 65%,
	var(--meter-red) 100%
	);
}

.channel-volume meter + meter {
	margin-left: 0;
}

.channel-volume meter:not(:only-of-type) {
	block-size: 8px;
}

.channel-volume meter::-webkit-meter-suboptimum-value {
	background: var(--meter-yellow);
}

.channel-volume meter::-webkit-meter-even-less-good-value {
	background: var(--meter-red);
}

.channel-volume meter:-moz-meter-optimum {
	background: var(--meter-green);
}

.channel-volume meter:-moz-meter-sub-optimum {
	background: var(--meter-yellow);
}

.channel-volume meter:-moz-meter-sub-sub-optimum {
	background: var(--meter-red);
}

.channel-volume > :first-child {
	margin-left: auto;
}

.channel-volume > input[type="range"] {
	margin-right: auto;
}

.channel-volume > :where(meter, input[type="range"]) {
	writing-mode: vertical-lr;
	direction: rtl;
	margin: 2px 0;
}

.channel-volume-number {
	text-align: center;
	background-color: var(--background-color);
}

.channel-volume-output {
	text-align: center;
	background-color: var(--background-color);
}

.channel-volume-output option:disabled {
	display: none;
}

.channel-panel-buttons {
	margin-top: auto;
	margin-bottom: 4px;
	width: 1.5em;
}

.channel-panel-buttons .toggle-button {
	display: block;
	border-width: 1px 0 0 1px;
}

.channel-panel-buttons .toggle-button:first-child {
	border-top-left-radius: 4px;
}

.channel-panel-buttons .toggle-button:last-child {
	border-bottom-width: 1px;
	border-bottom-left-radius: 4px;
}

.channel:has(~ .channel-panel-eq :is(.eq, .lowcut):checked) .channel-show-eq-label,
.channel:has(~ .channel-panel-dynamics :is(.dynamics, .autolevel):checked) .channel-show-dynamics-label,
.channel:has(~ .channel-panel-settings :is(.roomeq, .loopback, .crossfeed):checked) .channel-show-settings-label
{
	box-shadow: inset 0 0 1.5em selecteditem;
}

.channel-panel-settings:has(.stereo:not(:checked)) .stereo-field {
		width: 0;
	padding: 0;
	border-left-width: 0;
	overflow: hidden;
}

.channel-panel {
	border-left: 1px solid var(--border-color);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	padding: 4px;
	width: 200px;
	overflow-y: auto;
	min-width: 0;   
	transition: width 0.3s ease,
	            padding 0.3s ease,
	            border-left-width 0.3s ease !important;
	box-sizing: border-box;   
}

.channel-panel fieldset {
	font-size: 0.9em;
}

.eq-plot {
	border: 2px solid;
	border-radius: 8px;
	background: var(--eq-plot-bg);
	box-sizing: border-box;
	width: 100%;
	height: 75px;
}

.roomeq {
	grid-column: 2;
}

.eq-grid {
	stroke: black;
}

.eq-curve {
	fill: none;
	stroke: selecteditem;
	stroke-width: 3;
}

.eq-controls {
	display: grid;
	grid-gap: 1px;
}

.eq-controls output {
	border: 0;
	outline: 1px solid var(--border-color);
}

.eq-controls :is(select, input[type="number"]) {
	outline: 1px solid var(--border-color);
	border: 0;
	background-color: field;
	box-sizing: border-box;
	padding: 1px;
	width: 100%;
}

.eq-controls :is(select, input[type="number"]):focus {
	outline-color: black;
	border: 1px solid black;
	padding: 0;
	z-index: 1;
}

.channel-panel-eq .eq-controls {
	grid-template-columns: 0fr 1fr 1fr 1fr;
}

.channel-panel-eq .eq-controls :nth-child(4n+1) {
	margin-right: 2px;
}

.channel-panel-eq .eq-controls :not(:nth-child(4n+1)) {
	text-align: center;
}

.durec-controls {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-top: 1rem;
}

#durec-time {
	width: 100%;
	margin: 0.5rem 0;
}

.fx-control {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-slider {
	height: 80px;
	width: 20px;
	-webkit-appearance: slider-vertical;
	writing-mode: bt-lr;
}

/* Knob Styling */
.knob-container {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 5px;
}

.knob {
	border-radius: 50%;
	background: var(--knob-bg-color);
	position: relative;
	cursor: pointer;
	box-shadow:
	inset 0 0 10px rgba(0,0,0,0.5),
	0 2px 5px rgba(0,0,0,0.3);
	transform: rotate(-135deg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid var(--knob-border-color);
	min-width: 25px;
	min-height: 25px;
}

.knob::after {
	content: '';
	position: absolute;
	bottom: 2px;
	width: 3px;
	height: 10px;
	background: var(--knob-marker-color);
	border-radius: 2px;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.knob-value {
	font-size: 12px;
	font-weight: bold;
	min-width: 50px;
	text-align: left;
	padding: 5px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

osc-knob {
	border-radius: 50%;
	background: var(--knob-bg-color);
	position: relative;
	cursor: pointer;
	box-shadow:
	inset 0 0 10px rgba(0,0,0,0.5),
	0 2px 5px rgba(0,0,0,0.3);
	transform: rotate(-135deg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 2px solid var(--fx-center-border);
	width:40px;
	height:40px;
	min-width: 25px;
	min-height: 25px;
}

osc-knob::after {
	content: '';
	position: absolute;
	bottom: 2px;
	width: 2px;
	height: 10px;
	background: var(--knob-marker-color);
	border-radius: 2px;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.meter-wrapper {
	width: 10px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	overflow: hidden;
	margin: 2px 4px;
	background: linear-gradient(to top,
	var(--meter-green) 0%,
	var(--meter-yellow) 70%,
	var(--meter-orange) 80%,
	var(--meter-red) 100%);
	position: relative;
}

.meter-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--meter-bg-color);
}

/* FX Styling */
.fx-container {
	position: relative;
	width: 44px;
	height: 44px;
}

.fx-ring {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: conic-gradient(
	from 225deg,
	var(--fx-ring-green) 0deg,
	var(--fx-ring-yellow) 90deg,
	var(--fx-ring-orange) 150deg,
	var(--fx-ring-red) 270deg
	);
	z-index: 1;
}

.fx-mask {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #222;
	clip-path: polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
	transform: rotate(0deg);
	z-index: 2;
}

.fx-center {
	position: absolute;
	width: 35.2px;
	height: 35.2px;
	top: 4.4px;
	left: 4.4px;
	border-radius: 50%;
	background-color: var(--fx-center-bg);
	z-index: 3;
}

.fx-label, .fx-percent {
	position: absolute;
	width: 100%;
	text-align: center;
	color: white;
	font-weight: bold;
	pointer-events: none;
	z-index: 4;
}

.fx-label {
	top: 10px;
	font-size: 12px;
}

.fx-percent {
	top: 24px;
	font-size: 10px;
	color: #ccc;
}


.controlroom-button-group {
	display: flex;
	grid-column: 1 / -1;
	margin: 4px 0;
	gap: 4px;
}

.controlroom-button-group .toggle-button {
	flex: 1;
	border-radius: 4px;
	transition: background-color 0.3s, box-shadow 0.3s;
}

/* M-Button */
.controlroom-button-group .toggle-button:has(#controlroom-muteenable) {
	background-color: var(--mute-color) !important;
}

.controlroom-button-group .toggle-button:has(#controlroom-muteenable:checked) {
	background-color: var(--mute-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--mute-highlight-color-shadow);
	color: var(--text-highlight-color);
}

/* S-Button */
.controlroom-button-group .toggle-button:has(#main-soloenable) {
	background-color: var(--solo-color) !important;
}

.controlroom-button-group .toggle-button:has(#main-soloenable:checked) {
	background-color: var(--solo-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--solo-highlight-color-shadow);
	color: var(--text-highlight-color);
}

/* FdrGrp-Button */
.controlroom-button-group .toggle-button:has(#main-adhocfaderenable) {
	background-color: var(--adhoc-color) !important;
}

.controlroom-button-group .toggle-button:has(#main-adhocfaderenable:checked) {
	background-color: var(--adhoc-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--adhoc-highlight-color-shadow);
	color: var(--text-highlight-color);
}

/* ---Setup Slots--- */
.controlroom-button-group .toggle-button:has(#setup-slotenable) {
	background-color: var(--mute-color) !important;
}
.controlroom-button-group .toggle-button:has(#setup-slotenable:checked) {
	background-color: var(--mute-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--mute-highlight-color-shadow);
	color: var(--text-highlight-color);
}
/* Store-Button */
.controlroom-button-group .toggle-button:has(#store-button) {
	background-color: var(--store-color) !important;
}
.controlroom-button-group .toggle-button:has(#store-button:checked) {
	background-color: var(--store-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--store-highlight-color-shadow);
	color: var(--text-highlight-color);
}
/* Load-Button */
.controlroom-button-group .toggle-button:has(#load-button) {
	background-color: var(--load-color) !important;
}
.controlroom-button-group .toggle-button:has(#load-button:checked) {
	background-color: var(--load-highlight-color) !important;
	box-shadow: 0 0 8px 2px var(--store-highlight-color-shadow);
	color: var(--text-highlight-color);
}
/* Store/Load-Button Effect */
.controlroom-button-group .toggle-button:hover {
	filter: brightness(1.1);
}
.controlroom-button-group .toggle-button:active {
	filter: brightness(0.95);
}

.led-btn {
	padding: 8px 12px;
	margin: 4px;
	border: 1px solid #555;
	border-radius: 4px;
	background-color: #333;
	color: #ddd;
	cursor: pointer;
	transition: all 0.2s ease;
}

.led-btn.active {
	background-color: orange; 
	box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
	color: white;
	border-color: #2E7D32;
}