/* ===================================================================
   UDM DESIGN-MODI
   Aktiviert via body.udm-design-dezent oder body.udm-design-modern.
   Rein additiv — kein Risiko fuer bestehende Themes.
   =================================================================== */


/* ===================================================================
   SHARED: Animationen (Dezent + Modern)
   =================================================================== */

@keyframes udm-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Einblend-Animationen fuer Cards/Tiles --- */
.udm-design-dezent .udm-hero-card,
.udm-design-dezent .udm-app-tile,
.udm-design-dezent .udm-menu-card,
.udm-design-modern .udm-hero-card,
.udm-design-modern .udm-app-tile,
.udm-design-modern .udm-menu-card {
    animation: udm-fade-up 0.35s ease-out both;
}

/* Gestaffelter Wasserfall-Effekt */
.udm-design-dezent .udm-hero-grid > :nth-child(2),
.udm-design-dezent .udm-card-grid > :nth-child(2),
.udm-design-dezent .udm-app-tile-grid > :nth-child(2),
.udm-design-modern .udm-hero-grid > :nth-child(2),
.udm-design-modern .udm-card-grid > :nth-child(2),
.udm-design-modern .udm-app-tile-grid > :nth-child(2) {
    animation-delay: 0.05s;
}

.udm-design-dezent .udm-hero-grid > :nth-child(3),
.udm-design-dezent .udm-card-grid > :nth-child(3),
.udm-design-dezent .udm-app-tile-grid > :nth-child(3),
.udm-design-modern .udm-hero-grid > :nth-child(3),
.udm-design-modern .udm-card-grid > :nth-child(3),
.udm-design-modern .udm-app-tile-grid > :nth-child(3) {
    animation-delay: 0.1s;
}

.udm-design-dezent .udm-hero-grid > :nth-child(4),
.udm-design-dezent .udm-card-grid > :nth-child(4),
.udm-design-dezent .udm-app-tile-grid > :nth-child(4),
.udm-design-modern .udm-hero-grid > :nth-child(4),
.udm-design-modern .udm-card-grid > :nth-child(4),
.udm-design-modern .udm-app-tile-grid > :nth-child(4) {
    animation-delay: 0.15s;
}

.udm-design-dezent .udm-hero-grid > :nth-child(n+5),
.udm-design-dezent .udm-card-grid > :nth-child(n+5),
.udm-design-dezent .udm-app-tile-grid > :nth-child(n+5),
.udm-design-modern .udm-hero-grid > :nth-child(n+5),
.udm-design-modern .udm-card-grid > :nth-child(n+5),
.udm-design-modern .udm-app-tile-grid > :nth-child(n+5) {
    animation-delay: 0.2s;
}

/* --- Focus-Glow (Primaerfarbe) --- */
.udm-design-dezent *:focus-visible,
.udm-design-modern *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}


/* ===================================================================
   MODERN: Glassmorphism + Gradient-Akzente
   =================================================================== */

/* --- Modal-Backdrop: Frosted Glass --- */
.udm-design-modern .dxbl-modal-back {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(0, 0, 0, 0.25) !important;
}

/* --- Dashboard-Sidebar --- */
.udm-design-modern .udm-dashboard-sidebar {
    background: rgba(var(--bs-body-bg-rgb), 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* --- Hero-Cards --- */
.udm-design-modern .udm-hero-card {
    background: rgba(var(--bs-body-bg-rgb), 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bs-border-color);
}

/* --- App-Tiles --- */
.udm-design-modern .udm-app-tile {
    background: rgba(var(--bs-body-bg-rgb), 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Menu-Cards --- */
.udm-design-modern .udm-menu-card {
    background: rgba(var(--bs-body-bg-rgb), 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- Loading-Panel (bereits halbtransparent — Blur ergaenzen) --- */
.udm-design-modern .udm-page-loading-panel {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Gradient-Akzente: Hover-Glow mit Primaerfarbe --- */
.udm-design-modern .udm-hero-card:hover {
    box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.15);
}

.udm-design-modern .udm-app-tile:hover {
    box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.15);
}

.udm-design-modern .udm-menu-card:hover {
    box-shadow: 0 2px 12px rgba(var(--bs-primary-rgb), 0.12);
}

/* --- Gradient-Akzent auf Card-Borders --- */
.udm-design-modern .udm-menu-card {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.3)) 1;
}