/* ============================================================================
 * Dashboard KPI-HUD – Komponenten-Stylesheet
 * ============================================================================
 *
 * Eigenständige Styles für die KPI-Box (HomeView + AnalyticsView).
 *
 * Strukturierung dieses Files:
 *   1) Layout & Spacing der Containerviews
 *   2) Basis: .dashboard-kpi-bar (Card-Variante / AnalyticsView)
 *   3) KPI-Items (Icons, Werte, Labels, Separator)
 *   4) Animationen (Slide-In)
 *   5) View-Indicator (Pagination Dots) – Legacy AnalyticsView
 *   6) HUD-Variante (.dashboard-kpi-hud) – HomeView + AnalyticsView
 *   7) Segmented Control (Offen/Geplant/Gesamt)
 *   8) Progressive Reduction (Scroll-Komprimierung)
 * ============================================================================ */


/* --- 1) Layout & Spacing der Containerviews -------------------------------- */

/* Die KPI-HUD wird in den globalen `#header-kpi-host`-Container im
 * `.app-header` montiert (siehe ui.js → mountHeaderKpiHud).
 * Damit liegt die KPI-Box innerhalb des `position: fixed`-Headers und
 * nutzt automatisch dessen volle Viewport-Breite – ganz ohne
 * box-shadow/clip-path-Bleed-Hack oder negativen Margin.
 *
 * Die Container-Views (#dashboard-view / #analytics-view) müssen daher
 * KEIN spezielles Margin/Padding-Reset mehr für die KPI-HUD bekommen –
 * der Header übernimmt die volle Breite, der Content darunter behält
 * sein normales Padding aus `.app-main`.
 */
#header-kpi-host .dashboard-kpi-bar {
    margin-top: 0 !important;
}


/* --- 2) Basis: .dashboard-kpi-bar (Card-Variante / AnalyticsView) ---------- */

.dashboard-kpi-bar {
    background: var(--c-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-l);
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: var(--spacing-m);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}


/* --- 3) KPI-Items ---------------------------------------------------------- */

.kpi-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-s);
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.kpi-separator {
    width: 1px;
    background: var(--c-primary);
    opacity: 0.3;
    margin: 0 var(--spacing-m);
    align-self: stretch;
}

.kpi-icon {
    font-size: 2rem;
    color: var(--c-primary);
}

.kpi-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kpi-value {
    /* Eine Stufe kleiner als zuvor (1.75rem → 1.5rem),
       damit die Zahl unter dem Icon nicht so dominant wirkt
       und besser zum Label-Text darunter passt. */
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text-dark);
    line-height: 1;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.kpi-total {
    font-size: 0.55em;
    font-weight: 600;
    color: var(--c-text-light);
    margin-left: 0.35rem;
}

.kpi-label {
    font-size: 0.85rem;
    color: var(--c-text-light);
    font-weight: 500;
    white-space: normal;
}

.kpi-label small {
    font-size: 0.75rem;
    display: block;
}


/* --- 4) Animationen (Slide-In) -------------------------------------------- */

@keyframes kpi-slide-in-left {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes kpi-slide-in-right {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

.kpi-item.kpi-slide-in-left  { animation: kpi-slide-in-left  0.3s ease-out; }
.kpi-item.kpi-slide-in-right { animation: kpi-slide-in-right 0.3s ease-out; }


/* --- 5) View-Indicator (Pagination Dots) – Legacy AnalyticsView ----------- */

.kpi-view-indicator {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.kpi-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--c-text-light);
    opacity: 0.3;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.kpi-indicator-dot.active {
    opacity: 1;
    background-color: var(--c-primary);
}

#dashboard-view .kpi-view-indicator {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

#dashboard-view .kpi-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-border, #e5e7eb);
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

#dashboard-view .kpi-indicator-dot.active {
    background: var(--c-primary, #7B4BDE);
    transform: scale(1.3);
}


/* ============================================================================
 * --- 6) HUD-Variante (.dashboard-kpi-hud) ---------------------------------
 * ============================================================================
 *
 * Die KPI-HUD wird in den `#header-kpi-host`-Container im `.app-header`
 * montiert (siehe ui.js → mountHeaderKpiHud). Da der Header bereits
 * `position: fixed; left: 0; right: 0` ist und die volle Viewport-Breite
 * einnimmt, bekommt die KPI-Box automatisch die volle Breite – ganz ohne
 * den früheren `box-shadow: 0 0 0 100vmax`-Bleed-Hack und negativen
 * Margin. Die Höhe des Headers wird per JS in `--app-header-height`
 * geschrieben (ResizeObserver), sodass `.app-main` sein padding-top
 * automatisch anpasst.
 * ============================================================================ */


/* --- 6.1) HUD-Container --------------------------------------------------- */

#header-kpi-host .dashboard-kpi-bar.dashboard-kpi-hud {
    position: relative;
    color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0 !important;

    margin: 0 !important;
    padding: 0.75rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;

    /* Glasmorphism-konform: Statt opaker Vollfarbe ein dezenter
       transparenter Layer in Theme-Farbe. So „durchschimmert" der
       Header-Glas-Hintergrund (mit backdrop-filter) bis hierher und die
       KPI-Bar wirkt als integraler Teil der Glas-Oberfläche – nicht als
       separater Block.
       Subtiler vertikaler Gradient erzeugt Tiefe und einen weichen
       Übergang zur unteren Glaskante des Headers. */
    background: linear-gradient(
        180deg,
        rgba(var(--theme-primary), 0.0) 0%,
        rgba(var(--theme-primary), 0.08) 100%
    );
    /* Dezente Trennlinie zwischen Header-Top und KPI-Bereich –
       rein als optischer Separator, nicht als Wand. */
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    transition:
        max-height 0.35s ease,
        opacity 0.35s ease,
        padding 0.35s ease,
        margin 0.35s ease,
        background 0.4s ease;
    max-height: 320px;
    opacity: 1;
    overflow: hidden;
}

/* Schimmer-Highlight innerhalb der KPI-HUD: zarte horizontale
   Lichtreflexion am oberen Rand, die den Glaseffekt verstärkt. */
#header-kpi-host .dashboard-kpi-bar.dashboard-kpi-hud::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

/* Der Host-Container selbst trägt keine Hintergrund-/Layout-Logik.
 * Wenn keine KPI-HUD aktiv ist, kollabiert er auf 0 Höhe. */
#header-kpi-host {
    width: 100%;
}

#header-kpi-host[data-active="false"] {
    height: 0;
    overflow: hidden;
}


/* --- 6.2) HUD-Inhalts-Overrides (Metriken weiß) -------------------------- */

.dashboard-kpi-hud .kpi-metrics {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.dashboard-kpi-hud .kpi-item {
    flex: 1 1 0;
    gap: 0.25rem;
}

.dashboard-kpi-hud .kpi-icon,
.dashboard-kpi-hud .kpi-value {
    color: #ffffff;
}

.dashboard-kpi-hud .kpi-label,
.dashboard-kpi-hud .kpi-label small {
    color: rgba(255, 255, 255, 0.85);
}

.dashboard-kpi-hud .kpi-separator {
    background: rgba(255, 255, 255, 0.35);
    opacity: 1;
}


/* --- 7) Segmented Control (Offen/Geplant/Gesamt) ------------------------- */

.kpi-segmented-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.kpi-segment {
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.kpi-segment:hover {
    color: #ffffff;
}

.kpi-segment.is-active {
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-primary);
    font-weight: 600;
}


/* --- 8) Progressive Reduction beim Scrollen ------------------------------ */

/* KPI-HUD beim Scrollen komplett ausblenden.
 * Der `--app-header-height`-Wert wird per ResizeObserver in ui.js
 * automatisch angepasst, sobald die KPI-HUD ein- oder ausgeblendet wird.
 * Damit kollabiert der Header sauber auf seine Originalhöhe und
 * `.app-main` zieht sein padding-top automatisch nach oben. */
.app-shell.is-scrolled #header-kpi-host .dashboard-kpi-bar.dashboard-kpi-hud {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}