/*
 * history.css
 * Pfad: fe-auslastungsmonitor/assets/history.css
 *
 * Animationen + theme-aware Styles für die History-Seite.
 * Wird von Dash automatisch geladen (assets/-Ordner).
 *
 * Enthält:
 * - hist-pulse           → pulsierender Dot im Live-Monitor-Button
 * - hist-skeleton-pulse  → Skeleton-Loader Animation
 * - .hist-player         → Player-Panel (theme-aware: hell im Light-Mode,
 *                          dunkel im Dark-Mode)
 */

/* ────────────────────────────────────────────────────────────────────────── */
/* Animationen                                                                */
/* ────────────────────────────────────────────────────────────────────────── */

/* Pulsierender Dot im "Zum Live-Monitor"-Button */
@keyframes hist-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.7);
    }
}

/* Skeleton-Loader Shimmer-Animation */
@keyframes hist-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ────────────────────────────────────────────────────────────────────────── */
/* PLAYER-PANEL — theme-aware via CSS-Variablen                               */
/*                                                                            */
/* Light-Mode (Default):                                                      */
/*   - Heller Hintergrund (var(--mantine-color-body))                         */
/*   - Dunkle Uhrzeit (mantine-text)                                          */
/*   - Mittlere Trenner und Track                                             */
/*                                                                            */
/* Dark-Mode (data-mantine-color-scheme="dark"):                              */
/*   - Dunkler Gradient (bewährtes "Filmstreifen"-Look)                       */
/*   - Weiße Uhrzeit                                                          */
/* ────────────────────────────────────────────────────────────────────────── */

.hist-player {
    /* Light-Defaults */
    --hist-player-bg-1:       #FAFBFC;
    --hist-player-bg-2:       #F4F7FA;
    --hist-player-border:     rgba(225, 9, 21, 0.30);
    --hist-player-clock:      #1A1D23;
    --hist-player-clock-glow: 0 1px 6px rgba(225, 9, 21, 0.20);
    --hist-player-divider:    rgba(0, 0, 0, 0.10);
    --hist-player-track-bg:   rgba(0, 0, 0, 0.10);
    --hist-player-btn-color:  #1A1D23;
    --hist-player-btn-hover:  rgba(0, 0, 0, 0.06);

    background: linear-gradient(
        135deg,
        var(--hist-player-bg-1) 0%,
        var(--hist-player-bg-2) 100%
    );
    border: 1px solid var(--hist-player-border);
}

/* Dark-Mode Overrides */
:where([data-mantine-color-scheme="dark"]) .hist-player {
    --hist-player-bg-1:       #1A1D23;
    --hist-player-bg-2:       #2C313C;
    --hist-player-border:     rgba(225, 9, 21, 0.40);
    --hist-player-clock:      #FFFFFF;
    --hist-player-clock-glow: 0 2px 12px rgba(225, 9, 21, 0.35);
    --hist-player-divider:    rgba(255, 255, 255, 0.15);
    --hist-player-track-bg:   rgba(255, 255, 255, 0.18);
    --hist-player-btn-color:  rgba(255, 255, 255, 0.85);
    --hist-player-btn-hover:  rgba(255, 255, 255, 0.08);
}

/* Uhrzeit — nutzt die theme-aware CSS-Variable */
.hist-player-clock {
    color: var(--hist-player-clock) !important;
    text-shadow: var(--hist-player-clock-glow);
}

/* Trenner zwischen Uhrzeit und Buttons */
.hist-player-divider {
    background: var(--hist-player-divider) !important;
}

/* Skip-Back / Skip-Forward Buttons */
.hist-player-btn {
    color: var(--hist-player-btn-color) !important;
}
.hist-player-btn:hover {
    background: var(--hist-player-btn-hover) !important;
}

/* Slider-Track BG (nur der Hintergrund, nicht der rote Bar) */
.hist-player .mantine-Slider-track::before {
    background: var(--hist-player-track-bg) !important;
}