/* ── Advanced Customization Styles ── */

/* ═══════════════════════════════════════
   HEADING STYLES
   ═══════════════════════════════════════ */
[data-ui-heading-style="gradient"] .content-wrapper h1,
[data-ui-heading-style="gradient"] .content-wrapper h2,
[data-ui-heading-style="gradient"] .content-wrapper h3,
[data-ui-heading-style="gradient"] .content-wrapper .card-title {
    background: linear-gradient(135deg, var(--dg-primary), var(--dg-secondary, var(--dg-primary-light)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-ui-heading-style="glow"] .content-wrapper h1,
[data-ui-heading-style="glow"] .content-wrapper h2,
[data-ui-heading-style="glow"] .content-wrapper h3,
[data-ui-heading-style="glow"] .content-wrapper .card-title {
    text-shadow: 0 0 12px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.4);
}

[data-ui-heading-style="underline-accent"] .content-wrapper h1,
[data-ui-heading-style="underline-accent"] .content-wrapper h2,
[data-ui-heading-style="underline-accent"] .content-wrapper h3,
[data-ui-heading-style="underline-accent"] .content-wrapper .card-title {
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--dg-primary);
    display: inline-block;
}

[data-ui-heading-style="shadow-depth"] .content-wrapper h1,
[data-ui-heading-style="shadow-depth"] .content-wrapper h2,
[data-ui-heading-style="shadow-depth"] .content-wrapper h3,
[data-ui-heading-style="shadow-depth"] .content-wrapper .card-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(255, 255, 255, 0.06);
}
[data-bs-theme="light"] [data-ui-heading-style="shadow-depth"] .content-wrapper h1,
[data-bs-theme="light"] [data-ui-heading-style="shadow-depth"] .content-wrapper h2,
[data-bs-theme="light"] [data-ui-heading-style="shadow-depth"] .content-wrapper h3,
[data-bs-theme="light"] [data-ui-heading-style="shadow-depth"] .content-wrapper .card-title {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08), -1px -1px 0 rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════
   BUTTON STYLES
   ═══════════════════════════════════════ */
[data-ui-button-style="gradient"] .btn-primary,
[data-ui-button-style="gradient"] .btn-success,
[data-ui-button-style="gradient"] .btn-info {
    background: linear-gradient(135deg, var(--dg-primary), var(--dg-primary-light, var(--dg-primary))) !important;
    border: none;
}

[data-ui-button-style="glass"] .btn-primary,
[data-ui-button-style="glass"] .btn-success,
[data-ui-button-style="glass"] .btn-info {
    background: rgba(var(--dg-primary-rgb, 105, 108, 255), 0.2) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--dg-primary-rgb, 105, 108, 255), 0.35) !important;
    color: var(--dg-primary) !important;
}

[data-ui-button-style="outline-glow"] .btn-primary,
[data-ui-button-style="outline-glow"] .btn-success,
[data-ui-button-style="outline-glow"] .btn-info {
    background: transparent !important;
    border: 2px solid var(--dg-primary) !important;
    color: var(--dg-primary) !important;
    box-shadow: 0 0 10px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.25);
}

[data-ui-button-style="neon"] .btn-primary,
[data-ui-button-style="neon"] .btn-success,
[data-ui-button-style="neon"] .btn-info {
    background: transparent !important;
    border: 2px solid var(--dg-primary) !important;
    color: var(--dg-primary) !important;
    box-shadow: 0 0 6px var(--dg-primary), inset 0 0 6px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.15);
    text-shadow: 0 0 6px var(--dg-primary);
}

/* ═══════════════════════════════════════
   CARD STYLES
   ═══════════════════════════════════════ */
[data-ui-card-style="glass"] .card {
    background: rgba(var(--dg-card-bg-rgb, 40, 42, 66), 0.55) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="light"] [data-ui-card-style="glass"] .card {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-ui-card-style="bordered"] .card {
    border: 1px solid var(--dg-primary) !important;
    box-shadow: none !important;
}

[data-ui-card-style="shadow-lg"] .card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border: none !important;
}
[data-bs-theme="light"] [data-ui-card-style="shadow-lg"] .card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

[data-ui-card-style="neon-border"] .card {
    border: 1px solid var(--dg-primary) !important;
    box-shadow: 0 0 8px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.3), inset 0 0 8px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.05) !important;
}

/* ═══════════════════════════════════════
   TOPBAR STYLES
   ═══════════════════════════════════════ */
[data-ui-topbar-style="glass"] .gw-topbar,
[data-ui-topbar-style="glass"] .layout-navbar {
    background: rgba(var(--dg-card-bg-rgb, 40, 42, 66), 0.5) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-bs-theme="light"] [data-ui-topbar-style="glass"] .gw-topbar,
[data-bs-theme="light"] [data-ui-topbar-style="glass"] .layout-navbar {
    background: rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-ui-topbar-style="gradient"] .gw-topbar,
[data-ui-topbar-style="gradient"] .layout-navbar {
    background: linear-gradient(135deg, var(--dg-bg-start), var(--dg-bg-end, var(--dg-bg-start))) !important;
}

[data-ui-topbar-style="transparent"] .gw-topbar,
[data-ui-topbar-style="transparent"] .layout-navbar {
    background: transparent !important;
    backdrop-filter: none;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
[data-bs-theme="light"] [data-ui-topbar-style="transparent"] .gw-topbar,
[data-bs-theme="light"] [data-ui-topbar-style="transparent"] .layout-navbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════
   FONT SIZES
   ═══════════════════════════════════════ */
[data-ui-font-size="small"] .content-wrapper { font-size: 0.85rem; }
[data-ui-font-size="large"] .content-wrapper { font-size: 1.1rem; }

/* ═══════════════════════════════════════
   SIDEBAR WIDTHS
   ═══════════════════════════════════════ */
[data-ui-sidebar-width="narrow"] .gw-sidebar,
[data-ui-sidebar-width="narrow"] .layout-menu {
    width: 220px !important;
}

[data-ui-sidebar-width="wide"] .gw-sidebar,
[data-ui-sidebar-width="wide"] .layout-menu {
    width: 300px !important;
}

/* ═══════════════════════════════════════
   SEASONAL UI CORNER PATCHES
   No overflow:hidden — avoids clipping
   ═══════════════════════════════════════ */
[data-ui-seasonal]:not([data-ui-seasonal="none"]) .card::after,
[data-ui-seasonal]:not([data-ui-seasonal="none"]) .gw-sidebar::after,
[data-ui-seasonal]:not([data-ui-seasonal="none"]) .layout-menu::after,
[data-ui-seasonal]:not([data-ui-seasonal="none"]) .gw-topbar::after,
[data-ui-seasonal]:not([data-ui-seasonal="none"]) .layout-navbar::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
    transition: opacity 0.4s;
}

/* Snowfall – icy blue top-right */
[data-ui-seasonal="snowfall"] .card::after,
[data-ui-seasonal="snowfall"] .gw-topbar::after,
[data-ui-seasonal="snowfall"] .layout-navbar::after {
    top: -30px; right: -30px;
    background: radial-gradient(circle, rgba(173,216,230,0.5) 0%, transparent 70%);
}
[data-ui-seasonal="snowfall"] .gw-sidebar::after,
[data-ui-seasonal="snowfall"] .layout-menu::after {
    top: -30px; left: -30px;
    background: radial-gradient(circle, rgba(173,216,230,0.4) 0%, transparent 70%);
}

/* Rain – steel-blue top-left */
[data-ui-seasonal="rain"] .card::after,
[data-ui-seasonal="rain"] .gw-topbar::after,
[data-ui-seasonal="rain"] .layout-navbar::after {
    top: -30px; left: -30px;
    background: radial-gradient(circle, rgba(100,149,237,0.4) 0%, transparent 70%);
}
[data-ui-seasonal="rain"] .gw-sidebar::after,
[data-ui-seasonal="rain"] .layout-menu::after {
    top: -30px; left: -30px;
    background: radial-gradient(circle, rgba(100,149,237,0.3) 0%, transparent 70%);
}

/* Fireflies – warm yellow bottom-right */
[data-ui-seasonal="fireflies"] .card::after,
[data-ui-seasonal="fireflies"] .gw-topbar::after,
[data-ui-seasonal="fireflies"] .layout-navbar::after {
    bottom: -30px; right: -30px;
    background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, transparent 70%);
}
[data-ui-seasonal="fireflies"] .gw-sidebar::after,
[data-ui-seasonal="fireflies"] .layout-menu::after {
    bottom: -30px; right: -10px;
    background: radial-gradient(circle, rgba(255,215,0,0.25) 0%, transparent 70%);
}

/* Sakura – pink top-right */
[data-ui-seasonal="sakura"] .card::after,
[data-ui-seasonal="sakura"] .gw-topbar::after,
[data-ui-seasonal="sakura"] .layout-navbar::after {
    top: -30px; right: -30px;
    background: radial-gradient(circle, rgba(255,182,193,0.45) 0%, transparent 70%);
}
[data-ui-seasonal="sakura"] .gw-sidebar::after,
[data-ui-seasonal="sakura"] .layout-menu::after {
    top: -30px; left: -30px;
    background: radial-gradient(circle, rgba(255,182,193,0.35) 0%, transparent 70%);
}

/* Autumn leaves – warm orange bottom-left */
[data-ui-seasonal="autumn-leaves"] .card::after,
[data-ui-seasonal="autumn-leaves"] .gw-topbar::after,
[data-ui-seasonal="autumn-leaves"] .layout-navbar::after {
    bottom: -30px; left: -30px;
    background: radial-gradient(circle, rgba(212,101,47,0.4) 0%, transparent 70%);
}
[data-ui-seasonal="autumn-leaves"] .gw-sidebar::after,
[data-ui-seasonal="autumn-leaves"] .layout-menu::after {
    bottom: -30px; left: -30px;
    background: radial-gradient(circle, rgba(212,101,47,0.3) 0%, transparent 70%);
}

/* Bubbles – aqua top-left */
[data-ui-seasonal="bubbles"] .card::after,
[data-ui-seasonal="bubbles"] .gw-topbar::after,
[data-ui-seasonal="bubbles"] .layout-navbar::after {
    top: -30px; left: -30px;
    background: radial-gradient(circle, rgba(0,210,211,0.35) 0%, transparent 70%);
}
[data-ui-seasonal="bubbles"] .gw-sidebar::after,
[data-ui-seasonal="bubbles"] .layout-menu::after {
    top: -30px; left: -30px;
    background: radial-gradient(circle, rgba(0,210,211,0.25) 0%, transparent 70%);
}

/* Stars – pale gold top-right */
[data-ui-seasonal="stars"] .card::after,
[data-ui-seasonal="stars"] .gw-topbar::after,
[data-ui-seasonal="stars"] .layout-navbar::after {
    top: -30px; right: -30px;
    background: radial-gradient(circle, rgba(255,255,200,0.3) 0%, transparent 70%);
}
[data-ui-seasonal="stars"] .gw-sidebar::after,
[data-ui-seasonal="stars"] .layout-menu::after {
    top: -30px; right: -10px;
    background: radial-gradient(circle, rgba(255,255,200,0.2) 0%, transparent 70%);
}

/* Confetti – purple-pink bottom-right */
[data-ui-seasonal="confetti"] .card::after,
[data-ui-seasonal="confetti"] .gw-topbar::after,
[data-ui-seasonal="confetti"] .layout-navbar::after {
    bottom: -30px; right: -30px;
    background: radial-gradient(circle, rgba(166,108,255,0.35) 0%, transparent 70%);
}
[data-ui-seasonal="confetti"] .gw-sidebar::after,
[data-ui-seasonal="confetti"] .layout-menu::after {
    bottom: -30px; right: -10px;
    background: radial-gradient(circle, rgba(166,108,255,0.25) 0%, transparent 70%);
}

/* ═══════════════════════════════════════
   LIGHT MODE OVERRIDES
   Boost opacity & darken tones for visibility
   on light backgrounds
   ═══════════════════════════════════════ */

/* Seasonal corner patches – more vivid on light */
[data-bs-theme="light"] [data-ui-seasonal]:not([data-ui-seasonal="none"]) .card::after,
[data-bs-theme="light"] [data-ui-seasonal]:not([data-ui-seasonal="none"]) .gw-sidebar::after,
[data-bs-theme="light"] [data-ui-seasonal]:not([data-ui-seasonal="none"]) .layout-menu::after,
[data-bs-theme="light"] [data-ui-seasonal]:not([data-ui-seasonal="none"]) .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal]:not([data-ui-seasonal="none"]) .layout-navbar::after {
    opacity: 0.55;
}

[data-bs-theme="light"] [data-ui-seasonal="snowfall"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="snowfall"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="snowfall"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(100,170,210,0.45) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="rain"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="rain"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="rain"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(60,110,200,0.35) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="fireflies"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="fireflies"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="fireflies"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(220,180,20,0.35) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="sakura"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="sakura"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="sakura"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(220,120,160,0.4) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="autumn-leaves"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="autumn-leaves"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="autumn-leaves"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(190,90,30,0.35) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="bubbles"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="bubbles"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="bubbles"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(0,170,180,0.3) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="stars"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="stars"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="stars"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(160,120,200,0.3) 0%, transparent 70%);
}

[data-bs-theme="light"] [data-ui-seasonal="confetti"] .card::after,
[data-bs-theme="light"] [data-ui-seasonal="confetti"] .gw-topbar::after,
[data-bs-theme="light"] [data-ui-seasonal="confetti"] .layout-navbar::after {
    background: radial-gradient(circle, rgba(200,70,100,0.3) 0%, transparent 70%);
}

/* Neon effects – softer on light backgrounds */
[data-bs-theme="light"] [data-ui-button-style="neon"] .btn-primary,
[data-bs-theme="light"] [data-ui-button-style="neon"] .btn-success,
[data-bs-theme="light"] [data-ui-button-style="neon"] .btn-info {
    box-shadow: 0 0 4px var(--dg-primary), inset 0 0 4px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.08);
    text-shadow: none;
}

[data-bs-theme="light"] [data-ui-card-style="neon-border"] .card {
    box-shadow: 0 0 6px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.2), inset 0 0 6px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.03) !important;
}

[data-bs-theme="light"] [data-ui-button-style="outline-glow"] .btn-primary,
[data-bs-theme="light"] [data-ui-button-style="outline-glow"] .btn-success,
[data-bs-theme="light"] [data-ui-button-style="outline-glow"] .btn-info {
    box-shadow: 0 0 8px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.15);
}

[data-bs-theme="light"] [data-ui-heading-style="glow"] .content-wrapper h1,
[data-bs-theme="light"] [data-ui-heading-style="glow"] .content-wrapper h2,
[data-bs-theme="light"] [data-ui-heading-style="glow"] .content-wrapper h3,
[data-bs-theme="light"] [data-ui-heading-style="glow"] .content-wrapper .card-title {
    text-shadow: 0 0 10px rgba(var(--dg-primary-rgb, 105, 108, 255), 0.25);
}

/* ═══════════════════════════════════════
   ANIMATED BACKGROUND THEMES
   ═══════════════════════════════════════ */

/* Aurora Dream — shifting purple/blue aurora */
[data-ui-bg-anim="aurora"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(124, 92, 255, .18), transparent),
        radial-gradient(ellipse 70% 50% at 75% 60%, rgba(92, 184, 255, .14), transparent),
        radial-gradient(ellipse 60% 40% at 50% 80%, rgba(200, 80, 240, .1), transparent);
    animation: auroraShift 12s ease-in-out infinite alternate;
}
@keyframes auroraShift {
    0%   { opacity: .6; filter: hue-rotate(0deg); transform: scale(1); }
    50%  { opacity: .9; filter: hue-rotate(20deg); transform: scale(1.05); }
    100% { opacity: .7; filter: hue-rotate(-15deg); transform: scale(1.02); }
}

/* Neon Pulse — pulsing neon grid lines */
[data-ui-bg-anim="neon-grid"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 45, 120, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 200, 255, .04) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: neonPulse 4s ease-in-out infinite alternate;
}
@keyframes neonPulse {
    0%   { opacity: .3; background-size: 80px 80px; }
    50%  { opacity: .7; background-size: 85px 85px; }
    100% { opacity: .4; background-size: 80px 80px; }
}

/* Ocean Wave — flowing wave gradients */
[data-ui-bg-anim="ocean"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 40% at 10% 90%, rgba(24, 180, 232, .16), transparent),
        radial-gradient(ellipse 80% 50% at 90% 40%, rgba(52, 216, 154, .1), transparent);
    animation: oceanFlow 10s ease-in-out infinite alternate;
}
@keyframes oceanFlow {
    0%   { transform: translateY(0) scaleX(1); opacity: .5; }
    33%  { transform: translateY(-3%) scaleX(1.02); opacity: .8; }
    66%  { transform: translateY(1%) scaleX(.98); opacity: .65; }
    100% { transform: translateY(-1%) scaleX(1.01); opacity: .7; }
}

/* Sunset Blaze — warm shifting blaze */
[data-ui-bg-anim="sunset"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 20% 80%, rgba(255, 107, 53, .18), transparent),
        radial-gradient(ellipse 60% 60% at 80% 20%, rgba(255, 192, 48, .12), transparent),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 64, 80, .08), transparent);
    animation: sunsetBlaze 8s ease-in-out infinite alternate;
}
@keyframes sunsetBlaze {
    0%   { opacity: .5; filter: hue-rotate(0deg); }
    50%  { opacity: .85; filter: hue-rotate(10deg); }
    100% { opacity: .6; filter: hue-rotate(-8deg); }
}

/* Galaxy Shift — cosmic purple swirl */
[data-ui-bg-anim="galaxy"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 60% at 25% 25%, rgba(200, 80, 240, .18), transparent),
        radial-gradient(ellipse 50% 50% at 75% 70%, rgba(80, 184, 255, .14), transparent),
        radial-gradient(ellipse 40% 40% at 50% 40%, rgba(255, 100, 200, .08), transparent);
    animation: galaxyShift 14s ease-in-out infinite alternate;
}
@keyframes galaxyShift {
    0%   { opacity: .5; transform: rotate(0deg) scale(1); }
    25%  { opacity: .8; transform: rotate(2deg) scale(1.04); }
    50%  { opacity: .65; transform: rotate(-1deg) scale(1.02); }
    75%  { opacity: .85; transform: rotate(1deg) scale(1.06); }
    100% { opacity: .6; transform: rotate(0deg) scale(1); }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    [data-ui-bg-anim]::before {
        animation: none !important;
    }
}