/**
 * Glass Button Effect – j-glass
 * UIKit 3 / YOOtheme Pro
 *
 * Aktivierung: uk-button-* + Klasse "j-glass"
 * Für Container: j-glass am Eltern-Element → Buttons innen werden erkannt.
 *
 * Architektur (v4):
 *  – SVG-Filter wird inline IN den Button injiziert (gleich wie React GlassSurface)
 *  – backdrop-filter auf dem Button-Element selbst (nicht ::before)
 *  – ::before = Farb-Tint (aus übernommener background-color)
 *  – ::after  = Glanzlinie oben (+ gradient wenn background-image vorhanden)
 */

/* ==========================================================================
   Farbdefinitionen pro UIKit Button-Variante
   (HSL-Glasfarbe für Border und Glow-Effekte)
   ========================================================================== */

.uk-button.j-glass {
    --jg-hue: 220;
    --jg-sat: 20%;
    --jg-lit: 100%;
    --jg-alpha: 0.60;
    --jg-blur: 11px;
    --jg-border: rgba(255, 255, 255, 0.30);
    --jg-shadow-out: rgba(17, 17, 26, 0.10);
    --jg-shadow-in: rgba(255, 255, 255, 0.25);
    --jg-radius: inherit;
    --jg-tint-opacity: 1;

    /* Backdrop-Filter via CSS-Variable (identisch zu React .glass-surface--svg) */
    /* JS setzt: --jg-filter-id, --jg-backdrop-blur, --jg-saturation            */
    --jg-filter-id: none;
    --jg-backdrop-blur: 0px;
    --jg-saturation: 1;
}

.uk-button-primary.j-glass {
    --jg-hue: 215;
    --jg-sat: 70%;
    --jg-lit: 55%;
    --jg-border: hsla(215, 70%, 75%, 0.40);
}

.uk-button-secondary.j-glass {
    --jg-hue: 260;
    --jg-sat: 50%;
    --jg-lit: 55%;
    --jg-border: hsla(260, 50%, 80%, 0.40);
}

.uk-button-danger.j-glass {
    --jg-hue: 5;
    --jg-sat: 75%;
    --jg-lit: 55%;
    --jg-border: hsla(5, 75%, 75%, 0.40);
}

.uk-button-default.j-glass {
    --jg-hue: 0;
    --jg-sat: 0%;
    --jg-lit: 100%;
    --jg-border: rgba(255, 255, 255, 0.35);
}

.uk-button-text.j-glass,
.uk-button-link.j-glass {
    --jg-hue: 0;
    --jg-sat: 0%;
    --jg-lit: 100%;
    --jg-tint-opacity: 0.4;
}

/* ==========================================================================
   Basisstruktur
   ========================================================================== */

.uk-button.j-glass {
    position: relative;
    overflow: hidden;
    z-index: 0;
    /* Border wird per JS via insertRule entfernt (schlägt theme !important) */
    /* Zusätzlicher CSS-Fallback: */
    border: none !important;
    outline: none !important;
}

/*
 * SVG-Klasse: backdrop-filter via CSS-Variable anwenden.
 * Identisch zu React GlassSurface:
 *   .glass-surface--svg {
 *     backdrop-filter: var(--filter-id) blur(var(--glass-frost)) saturate(var(--glass-saturation));
 *   }
 *
 * --jg-filter-id       = url(#j-glass-f1)  (wird per JS gesetzt)
 * --jg-backdrop-blur   = 0px               (= React backgroundOpacity default 0)
 * --jg-saturation      = 1                 (= React saturation default 1)
 */
.uk-button.j-glass.j-glass--svg {
    backdrop-filter: var(--jg-filter-id) blur(var(--jg-backdrop-blur)) saturate(var(--jg-saturation));
    -webkit-backdrop-filter: var(--jg-filter-id) blur(var(--jg-backdrop-blur)) saturate(var(--jg-saturation));
}

/* Fallback: Premium CSS Glassmorphism (für iOS/Safari) */
.uk-button.j-glass.j-glass--fallback {
    backdrop-filter: blur(var(--jg-backdrop-blur)) saturate(var(--jg-saturation)) brightness(1.05);
    -webkit-backdrop-filter: blur(var(--jg-backdrop-blur)) saturate(var(--jg-saturation)) brightness(1.05);
}

.uk-button.j-glass.j-glass--fallback::before {
    /* Simulierte gebrochene Kante (Refraktion) */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15),
        0 4px 16px 0 var(--jg-shadow-out) !important;
}

.uk-button.j-glass.j-glass--fallback::after {
    /* Diagonaler Licht-Verlauf für 3D-Volumen */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.1) 100%) !important;
}

/* ==========================================================================
   Inline SVG-Filter (von JS injiziert)
   Klasse j-glass-filter-svg wird per JS am SVG gesetzt.
   ========================================================================== */

.j-glass-filter-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Unsichtbar – enthält nur Filterdefinitionen */
    pointer-events: none;
    z-index: -1;
    overflow: visible;
    /* Kein Clipping – filter-Primitives dürfen überragen */
}

/* ==========================================================================
   ::before – Background Layer
   Enthält das original background (color + image) + Glanzlinie.
   JS injiziert per [data-j-glass-filter="..."]::before die tatsächliche Farbe/
   den Gradienten direkt als CSS-Regel (kein CSS-Var nötig).
   Basis-Fallback hier: UIKit-Variante als HSL-Tint.
   ========================================================================== */

.uk-button.j-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--jg-radius);
    z-index: -1;
    /* Background-Layer (hinter Text) */

    /* Fallback-Tint (UIKit-Variante) – wird per JS überschrieben */
    background: hsl(var(--jg-hue) var(--jg-sat) var(--jg-lit) / var(--jg-alpha));

    box-shadow:
        inset 0 1px 0 0 var(--jg-shadow-in),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.10),
        0 4px 16px 0 var(--jg-shadow-out),
        0 8px 24px 0 var(--jg-shadow-out);

    border: none;
    pointer-events: none;

    transition:
        background 0.28s ease,
        box-shadow 0.28s ease,
        opacity 0.28s ease;
}

/* ==========================================================================
   ::after – Strukturell (kein Background)
   Kein visueller Background. JS setzt background: none !important via
   [data-j-glass-filter="..."]::after.
   Wird hier als sauberer Fallback definiert.
   ========================================================================== */

.uk-button.j-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--jg-radius);
    z-index: -1;
    /* Über Background-Layer, unter Text/Icons */
    background: none;
    /* Kein background – per JS bestätigt */
    pointer-events: none;
}

/* ==========================================================================
   Hintergrundfarben/-bilder:
   JS injiziert in #j-glass-overrides folgende Regeln:
     [sel]            → background:none, border:none
     [sel]::before    → Glanzlinie + original bg (image oder color) + opacity
     [sel]::after     → background:none (bestätigt)
   ========================================================================== */


/* ==========================================================================
   Text / Icons – immer ganz oben
   z-index:3 – über ::before (1) und ::after (2)
   ========================================================================== */

.uk-button.j-glass>*:not(.j-glass-filter-svg) {
    position: relative;
    z-index: 3;
}

/* ==========================================================================
   Hover – Platzhalter für Erweiterungen
   ========================================================================== */

/* Standard-Hover: ::before kräftiger */
.uk-button.j-glass:hover::before {
    box-shadow:
        inset 0 1px 0 0 var(--jg-shadow-in),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.10),
        0 4px 24px 4px hsl(var(--jg-hue) var(--jg-sat) var(--jg-lit) / 0.20),
        0 8px 32px 0 var(--jg-shadow-out);
    
    /* Global Hover: tintOpacity auf 0.9 */
    opacity: 0.9 !important;
}

/* Hover mit background-image: ::before kräftiger (Opacity erhöhen) */
.uk-button.j-glass.j-glass--has-bgimg:hover::before,
.uk-button.j-glass.j-glass--has-bg:hover::before {
    opacity: calc(var(--jg-tint-opacity, 0.6) + 0.10);
}

/* Hover mit background-color: Opacity erhöhen */
.uk-button.j-glass.j-glass--has-bg:hover::before {
    opacity: calc(var(--jg-tint-opacity, 0.6) + 0.10);

    /* PLATZHALTER: Glow-Box-Shadow basierend auf --jg-bg-color */
    /* box-shadow: 0 0 20px 4px var(--jg-bg-color); */
}

/* ==========================================================================
   Active / Focus
   ========================================================================== */

.uk-button.j-glass:active::before {
    /* PLATZHALTER: Eindrück-Effekt */
    /* transform: scale(0.98); */
    box-shadow:
        inset 0 2px 6px 0 rgba(0, 0, 0, 0.18),
        inset 0 1px 0 0 var(--jg-shadow-in);
}

.uk-button.j-glass:focus-visible {
    outline: 2px solid hsl(var(--jg-hue) var(--jg-sat) 70%);
    outline-offset: 3px;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .uk-button.j-glass {
        --jg-alpha: 0.18;
        --jg-border: rgba(255, 255, 255, 0.18);
        --jg-shadow-in: rgba(255, 255, 255, 0.15);
        --jg-tint-opacity: 0.15;
    }
}

/* ==========================================================================
   Fallback: backdrop-filter nicht unterstützt
   ========================================================================== */

@supports not (backdrop-filter: blur(1px)) {
    .uk-button.j-glass::before {
        background: hsl(var(--jg-hue) var(--jg-sat) var(--jg-lit) / calc(var(--jg-alpha) + 0.25));
        box-shadow:
            inset 0 1px 0 0 var(--jg-shadow-in),
            0 4px 16px 0 var(--jg-shadow-out);
    }

    .uk-button.j-glass.j-glass--has-bg::before {
        background: var(--jg-bg-color);
        opacity: calc(var(--jg-tint-opacity, 0.6) + 0.20);
    }
}