/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS v2 — premium refractive glass layer
   Loaded last; refines the base glass system with real SVG refraction, a richer
   aurora ambient field, and a thicker, more luminous multi-layer glass lighting
   model. Inspired by modern fintech/AI glass aesthetics.
   ═══════════════════════════════════════════════════════════════════════════ */

.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ── Premium palette refinement ────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    --pos-body-bg: #eaeefb;
    --pos-aurora-1: rgba(99, 102, 241, 0.20);   /* indigo  */
    --pos-aurora-2: rgba(168, 85, 247, 0.18);   /* violet  */
    --pos-aurora-3: rgba(56, 189, 248, 0.16);   /* cyan    */
    --pos-aurora-4: rgba(236, 72, 153, 0.13);   /* pink    */
    --pos-aurora-5: rgba(16, 185, 129, 0.10);   /* emerald */

    /* Refined aurora accent — the signature gradient */
    --pos-gradient-aurora: linear-gradient(115deg, #4f46e5 0%, #7c3aed 32%, #db2777 64%, #0ea5e9 100%);
    --pos-gradient-primary: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 100%);
    --pos-gradient-hero: linear-gradient(125deg, #4f46e5 0%, #7c3aed 45%, #c026d3 75%, #ec4899 100%);

    /* Glass sheen — diagonal specular overlay layered onto glass surfaces */
    --pos-glass-sheen: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 32%, rgba(255,255,255,0) 60%);
    --pos-glass-sheen-strong: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 58%);

    /* Thicker glass: bright top lip + soft bottom inner shade = sense of depth */
    --pos-glass-depth:
        inset 0 1.5px 0 rgba(255,255,255,0.95),
        inset 0 0 0 1px rgba(255,255,255,0.35),
        inset 0 -16px 32px -20px rgba(40,50,90,0.18);
    --pos-glass-elev:
        var(--pos-glass-depth),
        0 2px 6px rgba(30,40,80,0.05),
        0 14px 40px -12px rgba(40,50,90,0.22),
        0 30px 70px -30px rgba(40,50,90,0.30);
    --pos-glass-elev-hover:
        var(--pos-glass-depth),
        0 4px 10px rgba(30,40,80,0.07),
        0 22px 56px -14px rgba(79,70,229,0.28),
        0 40px 90px -34px rgba(124,58,237,0.34);
}

[data-bs-theme="dark"] {
    --pos-body-bg: #060912;
    --pos-aurora-1: rgba(99, 102, 241, 0.28);
    --pos-aurora-2: rgba(168, 85, 247, 0.24);
    --pos-aurora-3: rgba(56, 189, 248, 0.20);
    --pos-aurora-4: rgba(236, 72, 153, 0.18);
    --pos-aurora-5: rgba(16, 185, 129, 0.12);

    --pos-glass-sheen: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 34%, rgba(255,255,255,0) 60%);
    --pos-glass-sheen-strong: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0) 58%);
    --pos-glass-depth:
        inset 0 1.5px 0 rgba(255,255,255,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 -16px 32px -20px rgba(0,0,0,0.55);
    --pos-glass-elev:
        var(--pos-glass-depth),
        0 2px 8px rgba(0,0,0,0.45),
        0 16px 44px -12px rgba(0,0,0,0.62),
        0 34px 80px -30px rgba(0,0,0,0.7);
    --pos-glass-elev-hover:
        var(--pos-glass-depth),
        0 4px 12px rgba(0,0,0,0.5),
        0 24px 60px -14px rgba(99,102,241,0.45),
        0 44px 100px -34px rgba(124,58,237,0.5);
}

/* ── Premium aurora ambient field ──────────────────────────────────────────── */
/* A deeper, multi-layer animated colour field that gives the glass real depth. */
body::before {
    background:
        radial-gradient(ellipse 60% 50% at 12% 8%,  var(--pos-aurora-1) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 88% 16%, var(--pos-aurora-2) 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at 78% 88%, var(--pos-aurora-4) 0%, transparent 62%),
        radial-gradient(ellipse 55% 50% at 16% 84%, var(--pos-aurora-3) 0%, transparent 60%),
        radial-gradient(ellipse 40% 38% at 50% 50%, var(--pos-aurora-5) 0%, transparent 66%) !important;
    animation: auroraDrift 32s ease-in-out infinite alternate !important;
}
body::after {
    background:
        conic-gradient(from 120deg at 30% 20%, var(--pos-aurora-2), transparent 30%, var(--pos-aurora-3) 55%, transparent 80%),
        radial-gradient(ellipse 50% 40% at 65% 30%, var(--pos-aurora-4) 0%, transparent 65%) !important;
    opacity: 0.5;
    animation: auroraDrift 24s ease-in-out infinite alternate-reverse !important;
    animation-delay: -8s !important;
}
/* Fine grain overlay for that premium, tactile texture */
body {
    position: relative;
}
@keyframes auroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(28px, -18px, 0) scale(1.06) rotate(1.2deg); }
    100% { transform: translate3d(-18px, 22px, 0) scale(1.03) rotate(-1deg); }
}

/* ── Real refraction (SVG displacement) on safe, text-free surfaces ─────────── */
@supports (filter: url(#lg-distortion)) {
    /* Modal backdrop: the page visibly bends through the glass behind the dialog.
       Applied to a static (non-animated) overlay so it rasterizes once. */
    .modal-backdrop.show {
        filter: url(#lg-distortion);
    }
    /* Opt-in decorative refraction pane (place behind text-free content only). */
    .lg-refract { filter: url(#lg-distortion); }
    .lg-refract--strong { filter: url(#lg-distortion-strong); }
}

/* ── Thicker, more luminous glass on the core surfaces ──────────────────────── */
.app-card,
.app-stat-card,
.pos-property-card,
.pos-cert-tile,
.public-feature-card,
.pricing-card,
.property-context__tabs,
.pos-filter-bar,
.dash-quick-nav__item {
    background-image: var(--pos-glass-sheen);
    background-repeat: no-repeat;
    box-shadow: var(--pos-glass-elev);
    backdrop-filter: blur(44px) saturate(2.6) brightness(1.05);
    -webkit-backdrop-filter: blur(44px) saturate(2.6) brightness(1.05);
}
.app-card:hover,
.pos-property-card:hover,
.pos-cert-tile:hover,
.public-feature-card:hover,
.pricing-card:hover,
.dash-quick-nav__item:hover {
    box-shadow: var(--pos-glass-elev-hover);
}

/* Modal + heavy panels get the strong sheen and deepest elevation */
.app-modal,
.modal-content,
.dash-hero,
.app-empty-state__icon-wrap {
    background-image: var(--pos-glass-sheen-strong);
    background-repeat: no-repeat;
}
.app-modal,
.modal-content {
    box-shadow:
        var(--pos-glass-depth),
        0 0 0 1px rgba(255,255,255,0.10),
        0 40px 120px -24px rgba(20,24,48,0.55),
        0 0 90px -20px rgba(124,58,237,0.30) !important;
}

/* Topbar + sidebar: deeper frost */
.app-topbar {
    backdrop-filter: blur(48px) saturate(2.6) brightness(1.03) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.6) brightness(1.03) !important;
}

/* Inputs / selects: liquid pills */
.app-input,
.app-select,
.form-control,
.form-select {
    background-image: var(--pos-glass-sheen);
    background-repeat: no-repeat;
}

/* ── Aurora accent surfaces ────────────────────────────────────────────────── */
/* Gradient-icon tiles & buttons adopt the richer aurora ramp. */
.app-stat-card__icon,
.pos-property-card__icon,
.pos-cert-tile__icon,
.pos-ticket-list__icon,
.property-context__icon,
.feature-icon {
    background: var(--pos-gradient-aurora) !important;
    background-size: 220% 220% !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 6px 18px -4px rgba(79,70,229,0.55),
        0 0 28px -6px rgba(124,58,237,0.45) !important;
}
.app-btn--primary {
    background: var(--pos-gradient-aurora) !important;
    background-size: 220% 220% !important;
}

/* Gradient text accents pick up the aurora */
.dash-hero__greeting,
.pos-page-header__title--gradient,
.pos-property-card__rent-value {
    background: var(--pos-gradient-aurora) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: gradientShift 6s ease-in-out infinite;
}

/* ── Sidebar: glass over deep aurora ───────────────────────────────────────── */
.app-sidebar {
    background:
        var(--pos-glass-sheen),
        var(--pos-gradient-sidebar);
}
.app-sidebar::before {
    background: radial-gradient(circle, rgba(99,102,241,0.55) 0%, rgba(124,58,237,0.28) 42%, transparent 72%) !important;
}

/* ── Modern typography refinement ──────────────────────────────────────────── */
.pos-page-header__title,
.dash-hero__greeting,
.pos-home-hero__title,
.auth-hero__title,
h1, h2 {
    letter-spacing: -0.035em;
    font-weight: 800;
}
.pos-page-header__title { font-size: 1.7rem; line-height: 1.1; }
.pos-page-header__subtitle { font-size: 0.95rem; letter-spacing: 0.005em; }
.app-card__title { letter-spacing: -0.015em; }
/* Section eyebrow style for marketing/section intros */
.text-center h2.fw-bold { letter-spacing: -0.03em; }

/* Refined link interactions */
a:not(.app-btn):not(.app-tabs__tab):not(.nav-link):not(.dash-quick-nav__item):not(.pos-property-card):not(.public-feature-card) {
    transition: color var(--pos-duration-fast) var(--pos-ease-out);
}

/* Empty-state icon: floating aurora glass orb */
.app-empty-state__icon-wrap {
    background-image: var(--pos-glass-sheen-strong) !important;
    box-shadow: var(--pos-glass-depth), 0 18px 44px -16px rgba(124,58,237,0.40) !important;
}
.app-empty-state__icon { color: transparent; background: var(--pos-gradient-aurora); -webkit-background-clip: text; background-clip: text; opacity: 1; }

/* Badges: subtle glass lift + aurora primary */
.app-badge--primary,
.app-badge--accent {
    background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(124,58,237,0.14)) !important;
    color: #5b4bd6 !important;
    border: 1px solid rgba(124,58,237,0.20);
}
[data-bs-theme="dark"] .app-badge--primary,
[data-bs-theme="dark"] .app-badge--accent { color: #c4b5fd !important; }

/* Quick-nav icons inherit aurora */
.dash-quick-nav__item .bi {
    background: var(--pos-gradient-aurora) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Active sidebar nav: aurora-tinted glass pill */
.app-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.30), rgba(124,58,237,0.22)) !important;
    border-color: rgba(139,131,255,0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 2px 14px rgba(99,102,241,0.40),
        0 0 30px -4px rgba(124,58,237,0.40) !important;
}

/* ── Reduced transparency / motion guards ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body::before, body::after { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .app-card, .app-stat-card, .app-modal, .modal-content,
    .pos-property-card, .pricing-card, .public-feature-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-image: none !important;
        background-color: var(--pos-glass-bg-heavy) !important;
    }
    .modal-backdrop.show, .dash-hero::before, .pos-home-hero::before { filter: none !important; }
}