/* Linker Bereich extra */
#extra {
    grid-area: extra;
    background: var(--left-extra-bg);
    display: flex;
    flex-direction: column;
}

#left-ex-main p {
    margin: 0;
    padding: 0;
}

/* ------------------  alles zu left ------------------- */
.left-extra-header {
    background-color: var(--sections-header);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--sections-header-border);
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sections-text);
}

.left-extra-row {
    display: flex;
    flex-direction: row;
    gap: 10px; /* Abstand zwischen Feld und Main */
	flex: 1; /* ← macht die Zeile voll hoch */
}

.left-extra-feld {
    width: 20px;        /* oder was du willst */
    background-color: var(--left-extra-field-bg);
    color: white;
    padding: 0px;
	height: 100%;
	position: relative;
	
}

.left-extra-main {
    flex: 1;             /* nimmt den restlichen Platz */
    padding: 5px;
	font-size: 0.7rem;
    line-height: 1.0;      /* engste saubere Zeilenhöhe */
    white-space: pre-wrap; /*normal;*/   /* KEIN pre-line! */
	overflow-y: auto;
	max-height: 100%; /* wichtig */
	min-height: 0; /* Flexbox-Fix */
}

/* Das kleine Trigger-Feld */
#trigger-handle {
    position: absolute;
    top: 100px; /* oder wo du es haben willst */
    left: 0;
    width: 20px;
    height: 60px;
    background: var(--trigger-live-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	
	border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#trigger-handle.inactive {
    background-color: #555;
    opacity: 0.5;
    cursor: default;
    animation: none !important;
}


#trigger-handle:hover {
    background: var(--trigger-live-bg-hoover);
}

#trigger-handle:hover::before {
    background: white;
    box-shadow:
        4px 0 0 white,
        -4px 0 0 white;
}

/* Symbol: drei vertikale Striche */
#trigger-handle::before {
    content: "";
    display: block;
    width: 3px;
    height: 40px;
    background: transparent; /*var(--trigger-live-color); /* linker Strich */
	box-shadow: 
		-4px 0 0 0px var(--trigger-live-color), /* linker Strich */ 
		4px 0 0 0px var(--trigger-live-color); /* rechter Strich */
	
	border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Normaler grüner Puls */
@keyframes triggerPulse {
    0%   { background-color: var(--trigger-live-bg); }
    50%  { background-color: var(--trigger-live-bg-hoover); }
    100% { background-color: var(--trigger-live-bg); }
}

#trigger-handle.trigger-pulse {
    animation: triggerPulse 4s ease-in-out infinite;
}

/* Grüner Flash bei neuen Daten */
@keyframes triggerFlash {
    0%   { background-color: var(--trigger-live-newdata); }
    100% { background-color: var(--trigger-live-bg); }
}

#trigger-handle.trigger-newdata {
    animation: triggerFlash 0.6s ease-out;
}

/* 🔥 Neuer Timeout‑Puls (dezent rot) */
@keyframes triggerTimeoutPulse {
    0%   { background-color: var(--trigger-live-newdata-timeout); }
    50%  { background-color: var(--trigger-live-newdata-timeout); opacity: 0.6; }
    100% { background-color: var(--trigger-live-newdata-timeout); }
}

#trigger-handle.trigger-timeout {
    animation: triggerTimeoutPulse 3s ease-in-out infinite;
}


/* Das große Panel */
#slide-panel {
    position: absolute;
    top: 0;
    left: 20px; /* Startposition: direkt rechts vom Trigger */
    width: 0px; /* Start: unsichtbar */
    height: 100%;
    background: var(--trigger-live-sidepanel-bg);
    overflow: hidden;
    transition: width 0.25s ease;
    z-index: 10;
	border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Wenn offen */
#slide-panel.open {
    width: 700px; /* ausgefahrene Breite */
}

.left-extra-chart {
    padding: 5px;
    margin-top: 10px;
}