/**
 * Mod-Panel: Preset-Layouts (nicht nur Farben).
 * Nutzt --mp-accent auf .mp-root (Dashboard setzt per inline style).
 * Wird auch vom Server-Render (Puppeteer) eingelesen — bei Änderungen
 * bleibt backend/mod-panel/card-template.js synchron (liest diese Datei ein).
 */

/* —— Discord: linker Streifen, flache Karten —— */
.mp-root.mp-variant-discord .mp-inner {
    position: relative;
    padding-left: 100px;
}
.mp-root.mp-variant-discord .mp-inner::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 48px;
    bottom: 48px;
    width: 8px;
    border-radius: 4px;
    background: var(--mp-accent, #5865f2);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mp-accent) 45%, transparent);
}
.mp-root.mp-variant-discord .mp-kpi {
    border-radius: calc(10px * var(--mp-kpi-scale, 1));
    background: rgba(0, 0, 0, calc(0.58 * var(--mp-kpi-fill, 1)));
    border: 1px solid rgba(255, 255, 255, calc(0.06 * min(1, var(--mp-kpi-fill, 1) + 0.35)));
    box-shadow: none;
}
.mp-root.mp-variant-discord .mp-chip {
    border-radius: calc(8px * var(--mp-action-chip-scale, 1));
    padding: calc(12px * var(--mp-action-chip-scale, 1)) calc(18px * var(--mp-action-chip-scale, 1));
}
.mp-root.mp-variant-discord .mp-footer {
    border-radius: 10px;
}

/* —— Neon: Scanline, Glow —— */
.mp-root.mp-variant-neon .mp-overlay {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, calc(0.11 * var(--mp-overlay-strength, 1))) 2px,
            rgba(0, 0, 0, calc(0.11 * var(--mp-overlay-strength, 1))) 4px
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, calc(0.38 * var(--mp-overlay-strength, 1))) 0%,
            rgba(13, 2, 33, calc(0.78 * var(--mp-overlay-strength, 1))) 100%
        );
    backdrop-filter: blur(var(--mp-overlay-blur, 0px));
    -webkit-backdrop-filter: blur(var(--mp-overlay-blur, 0px));
}
.mp-root.mp-variant-neon .mp-kpi {
    border: 1px solid color-mix(in srgb, var(--mp-accent) 55%, transparent);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, calc(0.45 * var(--mp-kpi-fill, 1))),
        0 0 32px color-mix(in srgb, var(--mp-accent) 32%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--mp-accent) 22%, transparent);
    background: rgba(0, 0, 0, calc(0.52 * var(--mp-kpi-fill, 1)));
}
.mp-root.mp-variant-neon .mp-kpi-value {
    text-shadow:
        0 0 22px color-mix(in srgb, var(--mp-accent) 55%, transparent),
        0 2px 10px rgba(0, 0, 0, 0.45);
}
.mp-root.mp-variant-neon .mp-chip {
    border-color: color-mix(in srgb, var(--mp-accent) 48%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mp-accent) 18%, transparent);
}

/* —— Minimal: offene Fläche, Linien —— */
.mp-root.mp-variant-minimal .mp-kpi {
    background: transparent;
    border: none;
    border-bottom: 3px solid rgba(255, 255, 255, calc(0.14 * var(--mp-kpi-fill, 1)));
    border-radius: 0;
    box-shadow: none;
    padding-left: 4px;
    padding-right: 4px;
}
.mp-root.mp-variant-minimal .mp-title {
    font-weight: 300;
    letter-spacing: 0.05em;
}
.mp-root.mp-variant-minimal .mp-strip {
    gap: 10px;
}
.mp-root.mp-variant-minimal .mp-chip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, calc(0.18 * var(--mp-chip-fill, 1)));
    border-radius: 4px;
}
.mp-root.mp-variant-minimal .mp-footer {
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, calc(0.14 * var(--mp-footer-fill, 1)));
    border-radius: 0;
    padding-left: 4px;
}

/* —— Light: helle Karten —— */
.mp-root.mp-variant-light .mp-overlay {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, calc(0.52 * var(--mp-overlay-strength, 1))) 0%,
        rgba(0, 0, 0, calc(0.18 * var(--mp-overlay-strength, 1))) 55%,
        rgba(0, 0, 0, calc(0.42 * var(--mp-overlay-strength, 1))) 100%
    );
    backdrop-filter: blur(var(--mp-overlay-blur, 0px));
    -webkit-backdrop-filter: blur(var(--mp-overlay-blur, 0px));
}
.mp-root.mp-variant-light .mp-kpi {
    background: rgba(255, 255, 255, calc(0.9 * var(--mp-kpi-fill, 1)));
    border: 1px solid rgba(0, 0, 0, calc(0.08 * min(1, var(--mp-kpi-fill, 1) + 0.15)));
    box-shadow: 0 10px 28px rgba(0, 0, 0, calc(0.12 * var(--mp-kpi-fill, 1)));
}
.mp-root.mp-variant-light .mp-kpi-label,
.mp-root.mp-variant-light .mp-kpi-hint {
    opacity: 0.72;
}
.mp-root.mp-variant-light .mp-chip {
    background: rgba(255, 255, 255, calc(0.78 * var(--mp-chip-fill, 1)));
    border-color: rgba(0, 0, 0, calc(0.1 * min(1, var(--mp-chip-fill, 1) + 0.12)));
}
.mp-root.mp-variant-light .mp-footer {
    background: rgba(255, 255, 255, calc(0.85 * var(--mp-footer-fill, 1)));
    border-color: rgba(0, 0, 0, calc(0.08 * min(1, var(--mp-footer-fill, 1) + 0.12)));
}

/* —— Dark: tiefer Schatten (Standard-Look leicht verstärkt) —— */
.mp-root.mp-variant-dark .mp-kpi {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.38);
}