/* ═══════════════════════════════════════════════════════════════════════════
   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 ──────────────────────────────────────────────
   Liquid Glass Minimalism: one accent hue (blue), no rainbow blends. The
   "aurora" ambient field is one hue at very low opacity, not five hues. ── */
:root,
[data-bs-theme="light"] {
    --pos-body-bg: #eaeefb;
    --pos-aurora-1: rgba(79, 70, 229, 0.07);
    --pos-aurora-2: rgba(79, 70, 229, 0.05);
    --pos-aurora-3: rgba(79, 70, 229, 0.04);
    --pos-aurora-4: rgba(79, 70, 229, 0.03);
    --pos-aurora-5: rgba(79, 70, 229, 0.03);

    /* Single-hue accent gradient — tonal blue, used for primary CTAs/icon tiles/headings */
    --pos-gradient-aurora: linear-gradient(115deg, #5b52e8 0%, #4338ca 100%);
    --pos-gradient-primary: linear-gradient(135deg, #5b52e8 0%, #4338ca 100%);
    --pos-gradient-hero: linear-gradient(125deg, #5b52e8 0%, #4338ca 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.22),
        0 40px 90px -34px rgba(67,56,202,0.20);
}

[data-bs-theme="dark"] {
    --pos-body-bg: #060912;
    --pos-aurora-1: rgba(59, 130, 246, 0.10);
    --pos-aurora-2: rgba(59, 130, 246, 0.08);
    --pos-aurora-3: rgba(59, 130, 246, 0.06);
    --pos-aurora-4: rgba(59, 130, 246, 0.05);
    --pos-aurora-5: rgba(59, 130, 246, 0.05);

    --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(59,130,246,0.35),
        0 44px 100px -34px rgba(37,99,235,0.32);
}

/* ── 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)) {
    /* Opt-in decorative refraction pane (place behind text-free content only).
       Never apply to modal backdrops — filter on an ancestor blurs dialog content. */
    .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(20px) saturate(1.4) brightness(1.02);
    -webkit-backdrop-filter: blur(20px) saturate(1.4) brightness(1.02);
}
.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(79,70,229,0.22) !important;
}

/* Topbar + sidebar: deeper frost (chrome — allowed the heavier blur budget) */
.app-topbar {
    backdrop-filter: blur(28px) saturate(1.5) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.02) !important;
}

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

/* ── Accent surfaces ───────────────────────────────────────────────────────── */
/* Gradient-icon tiles & buttons adopt the single-hue accent 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.45),
        0 0 28px -6px rgba(67,56,202,0.32) !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 a quiet neutral surface ─────────────────────────── */
.app-sidebar {
    background:
        var(--pos-glass-sheen),
        var(--pos-gradient-sidebar);
}
.app-sidebar::before {
    background: radial-gradient(circle, rgba(59,130,246,0.30) 0%, rgba(37,99,235,0.14) 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 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(79,70,229,0.30) !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. Primary stays indigo; accent keeps its own teal hue (the 3-hue
   palette added this session) rather than being forced to match primary — this selector used
   to bundle both under a single-hue-only rule from the prior retint, which silently defeated
   the point of having a distinct accent color for money/positive figures. */
.app-badge--primary {
    background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(67,56,202,0.12)) !important;
    color: #4338ca !important;
    border: 1px solid rgba(79,70,229,0.20);
}
[data-bs-theme="dark"] .app-badge--primary { color: #9dc0fb !important; }

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

/* Active sidebar nav: accent-tinted glass pill */
.app-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(37,99,235,0.18)) !important;
    border-color: rgba(96,165,250,0.40) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 2px 14px rgba(59,130,246,0.32),
        0 0 30px -4px rgba(37,99,235,0.30) !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; }
}