body {
    background-color: #1f1f1f;
    color: #ffffff!important;
}

/* Scrollbar für Dark Mode verschönern */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1f1f1f;
}
::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 10px;
}

/* Toast */
@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out;
}



/* Container für das gesamte EKG */
.pulse-wrapper {
    display: flex;
    flex-direction: column;
        flex: none;
}

/* Die obere Reihe mit den 24 Säulen */
.pulse-bar-row {
    display: flex;
    align-items: flex-end;
    gap: 2px; /* Dezenter Abstand zwischen 3h-Blöcken */
}

.pulse-block {
    flex: none;
    width: 15px;
    display: flex;
    flex-direction: column;
}

.pulse-bar {
    display: flex;
    flex-direction: column-reverse; 
    height: 96px;
    width: 15px;
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 2px;
    overflow: hidden;
}

.pulse-segment {
    flex: 1; /* Der Browser verteilt die 96px nun exakt auf 12 x 8px */
    width: 100%;
    border-bottom: 4px solid #111827; /* Deine dark:border-gray-900 */

 
    transition: all 0.1s ease-in-out;
    outline: 2px solid transparent;
    outline-offset: -2px; /* Verhindert, dass die Outline das Layout verschiebt */
    position: relative;
    z-index: 1;
}

/* Verhindert, dass das unterste Segment die Rundung optisch stört */
.pulse-segment:first-child {
    border-bottom: 0;
}
/* Die Zeitachse darunter */
.pulse-timeline {
    position: relative;
    height: 20px;
    margin-top: 6px;
}

.monitor-pulse-container{
transition: filter 0.3s ease;
}
.monitor-pulse-container:hover .pulse-segment {
    filter: grayscale(80%);
    opacity: 0.4;
}

/* 3. Das aktuell gehoverte Segment hervorheben */
.monitor-pulse-container .pulse-segment:hover {
    filter: grayscale(0%);
    opacity: 1;
    z-index: 10;

}

/* 4. Tooltip Grafikfehler-Fix */
#pulse-tooltip-element {
    /* Verhindert, dass der Tooltip vom Container abgeschnitten wird */
    position: fixed !important; 
    z-index: 9999 !important;
    pointer-events: none;
    white-space: nowrap;
    /* Schatten für bessere Lesbarkeit auf dunklem Grund */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

/* Fix für den Pfeil: Flowbite nutzt oft zu kleine Offsets */
[data-popper-arrow], [data-popper-arrow]::before {
    background-color: inherit;
}


/* Volle Farben (Aktiv) */
.bg-ok      { background-color: #2ecc71; } 
.bg-error   { background-color: #e74c3c; }

/* Muted wegen Uhrzeit (Tag ist aber ein Arbeitstag) */
/* Etwas heller, signalisiert: "Pause" */
.bg-muted-time-ok    { background-color: #a2e4b8; opacity: 0.5; } 
.bg-muted-time-empty { background-color: #f0f0f0; } 

/* Muted wegen Wochentag (Wochenende/Freier Tag) */
/* Etwas dunkler oder bläulich-grau, signalisiert: "Off-Day" */
.bg-muted-day-ok     { background-color: #95a5a6; opacity: 0.4; }
.bg-muted-day-empty  { background-color: #d1d8e0; opacity: 0.6; }

#pulse-tooltip-element {
    min-width: 220px; /* Verhindert das Flackern bei Textänderung */
    white-space: nowrap;
}