:root {
	--track-h: 28px;
	--handle-w: 10px;
	--thumb-bg: rgba(100, 150, 250, 0.35);
	--thumb-bg-hv: rgba(100, 200, 250, 0.35);
/*	--thumb-bg-ac: rgba(250, 150, 250, 0.35);*/
	--thumb-border: rgba(50, 100, 200, 0.9);
	--handle-bg: rgba(50, 100, 200, 0.95);
	--handle-bg-hv: rgba(50, 150, 200, 0.75);
/*	--handle-bg-ac: rgba(250, 150, 250, 0.75);*/
	--track-bg: #e5e7eb; /* neutral-200 */
	--track-border: #cbd5e1; /* neutral-300 */
	--min-thumb-px: 16;
}

.chart-wrap { 
	border: 1px solid #e2e8f0; 
	border-radius: 10px; 
	padding: 12px; 
	background: #fff; 
	box-shadow: 0 1px 2px rgba(0,0,0,.04); 
}

/* Timeline container (track) */
.timeline {
	position: relative;
	height: var(--track-h); 
	background: var(--track-bg); 
	border: 1px solid var(--track-border); 
	border-radius: 8px; 
	margin-top: 12px; 
	user-select: none; 
	overflow: hidden; 
}

/* Background sparkline canvas overlayed under thumb */
.timeline-bg {
	position: absolute;
	inset: 0; 
	pointer-events: none; 
}

/* Thumb block */
.thumb {
	position: absolute; 
	top: 3px; 
	bottom: 3px; 
	left: 0; 
	width: 60px;
	background: var(--thumb-bg);
	border: 1px solid var(--thumb-border);
	border-radius: 6px;
	display: flex; 
	align-items: stretch;
	box-sizing: border-box;
}

/* Handles (linker und rechter Griff)*/
.thumb .handle {
	width: var(--handle-w);
	background: var(--handle-bg);
	display: grid;
	place-items: center;
	cursor: ew-resize;
}
.thumb .handle:hover {
	background: var(--handle-bg-hv);
}
/*.thumb .handle:hover + .handle:active {*/
/*	background: var(--handle-bg-ac);*/
/*}*/

.thumb .handle::after {
	content: "";
	display: block; 
	width: 2px; 
	height: 60%; 
	background: #fff; 
	opacity: .8; 
	border-radius: 1px; 
}

.thumb .middle { 
	flex: 1;
	cursor: pointer;
}

.thumb .middle:active {
	cursor: grabbing;
/*	background: var(--thumb-bg);*/
}
.thumb .middle:hover {
	background: var(--thumb-bg-hv);
}

.hint {
	font-size: 12px;
	color: #475569;
	margin-top: 6px;
}

.overlay {
    position: fixed; /* alles abdecken */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.4);
    cursor: wait;
    z-index: 9999; /* ganz oben */
}

.hidden {
    display: none;
}


#chartCol {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
}



#sqlControl{
	flex: 0 1 auto;
	display: flex;
	flex-flow: row;
}

#leftSqlControl {
	flex: 0 1 auto;
}

#centralSqlControl {
	flex: 1 1 auto;

	display: flex;
	justify-content: center;
}

.chartSelect {
	margin-right: 15px;
	margin-left: 5px;
}

.select-pending {
  border: 2px solid red;
  background-color: #fff0f0;
}

.label-pending {
/*  color: red;*/
  font-weight: bold;
}

#rightSqlControl {
	flex: 0 1 auto;
}



#canvasParent{
	flex: 1;
	min-height: 0;           /* ← verhindert, dass das Kind die Höhe diktiert, und muss in flex-flow-content auch gesetzt werden */
	overflow: hidden;        /* ← optional, falls canvas größer wäre */
	display: flex;
	flex-direction: column;  
}

#canvas{
 	flex: 1;
 	width: 100%;
	height: 100%;
}



#chartPeriodControls {
    flex: 0 1 auto;
}

#iditPeriodEditControls {
    display: flex;
    flex-flow: row;
}

#timeScroll { 
	width: 100%; 
}


/*
#track {
    position: relative;
    height: 16px;
    background: #ddd;
    margin-top: 10px;
    border-radius: 8px;
    user-select: none;
 }
#thumb {
    position: absolute;
    height: 100%;
    background: #666;
    border-radius: 8px;
    cursor: pointer;
}
#thumb:active {
    cursor: pointer;
}
*/

#iditChartFrom,
#iditChartTo {
    flex: 0 1 auto;
}

#iditFromToUpdate {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}