/**
 * Glassmorphism e blobs animados para o shell do app (carregado em base.html).
 * Páginas que estendem base herdam .glass-panel e o fundo sem login-page no dark.
 */

html.dark body:not(.login-page) {
    background-color: #0f172a !important;
}

.bg-shape {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    animation: float 20s infinite alternate ease-in-out;
    pointer-events: none;
}

/* Variáveis definidas em .app-glass-backdrop; temas em base.html / classes abaixo */
.app-glass-backdrop {
    --blob-shape-1: color-mix(in srgb, var(--tenant-login-accent, #6366f1) 20%, transparent);
    --blob-shape-2: rgba(139, 92, 246, 0.15);
    --blob-shape-3: rgba(16, 185, 129, 0.1);
}

/* cor_nav: três tons harmônicos a partir da cor do tenant */
.app-glass-backdrop.glass-blobs-tenant-nav {
    --blob-shape-1: color-mix(in srgb, var(--tenant-nav-color) 22%, transparent);
    --blob-shape-2: color-mix(in srgb, var(--tenant-nav-color) 14%, #a855f7 38%, transparent);
    --blob-shape-3: color-mix(in srgb, var(--tenant-nav-color) 12%, #14b8a6 42%, transparent);
}

/* Sem cor_nav: paletas por área (alinhadas aos ícones / fallback Tailwind) */
.app-glass-backdrop.glass-blobs-page-blue {
    --blob-shape-1: color-mix(in srgb, #3b82f6 22%, transparent);
    --blob-shape-2: color-mix(in srgb, #60a5fa 16%, transparent);
    --blob-shape-3: color-mix(in srgb, #2563eb 12%, #6366f1 28%, transparent);
}

.app-glass-backdrop.glass-blobs-page-amber {
    --blob-shape-1: color-mix(in srgb, #eab308 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #facc15 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #ca8a04 12%, #f59e0b 30%, transparent);
}

.app-glass-backdrop.glass-blobs-page-orange {
    --blob-shape-1: color-mix(in srgb, #f97316 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #fb923c 15%, transparent);
    --blob-shape-3: color-mix(in srgb, #ea580c 12%, #fbbf24 25%, transparent);
}

.app-glass-backdrop.glass-blobs-page-red {
    --blob-shape-1: color-mix(in srgb, #ef4444 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #f87171 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #dc2626 12%, #f43f5e 22%, transparent);
}

.app-glass-backdrop.glass-blobs-page-cyan {
    --blob-shape-1: color-mix(in srgb, #06b6d4 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #22d3ee 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #0891b2 12%, #38bdf8 28%, transparent);
}

.app-glass-backdrop.glass-blobs-page-green {
    --blob-shape-1: color-mix(in srgb, #22c55e 20%, transparent);
    --blob-shape-2: color-mix(in srgb, #4ade80 14%, transparent);
    --blob-shape-3: color-mix(in srgb, #16a34a 12%, #10b981 30%, transparent);
}

.app-glass-backdrop.glass-blobs-page-indigo {
    --blob-shape-1: color-mix(in srgb, #6366f1 22%, transparent);
    --blob-shape-2: color-mix(in srgb, #818cf8 15%, transparent);
    --blob-shape-3: color-mix(in srgb, #4f46e5 12%, #a855f7 26%, transparent);
}

.shape-1 {
    width: 600px;
    height: 600px;
    background: var(--blob-shape-1);
    top: -200px;
    left: -200px;
}

.shape-2 {
    width: 500px;
    height: 500px;
    background: var(--blob-shape-2);
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

.shape-3 {
    width: 400px;
    height: 400px;
    background: var(--blob-shape-3);
    top: 40%;
    left: 30%;
    animation-delay: -10s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -50px) rotate(10deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Escopo no shell logado para não sobrescrever .glass-panel do login (login.css). */
#content-wrapper.app-shell-glass .glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark #content-wrapper.app-shell-glass .glass-panel {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

#content-wrapper.app-shell-glass .glass-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.1);
}

.dark #content-wrapper.app-shell-glass .glass-panel:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Listas / painéis grandes: sem translate no hover */
#content-wrapper.app-shell-glass .glass-panel.glass-panel--no-hover-lift:hover {
    transform: none;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

.dark #content-wrapper.app-shell-glass .glass-panel.glass-panel--no-hover-lift:hover {
    transform: none;
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}