/* Page-wide constellation background. Sits behind every UI panel; major
   opaque containers below are made semi-transparent so the animation
   shows through. Pointer-events disabled so clicks always reach the UI. */

.empty-state-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 20%, #12283a 0%, #0a1420 55%, #05101a 100%);
}

/* Make sure regular page content stacks above the bg. The footer keeps its
   own position:fixed from its inline style — don't override it here. */
body > .genericbody {
    position: relative;
    z-index: 1;
}
.portal-footer {
    z-index: 100000;
}

/* Transparency ladder: let the constellation glow through the main panes.
   Values are intentionally conservative so foreground text/icons remain
   readable. Tune via these alphas if the bg is too loud or too faint. */
body {
    background-color: transparent !important;
}
.body-content {
    background-color: transparent !important;
}
.patient_data {
    background-color: rgba(20, 30, 40, 0.65) !important;
}
.splitleft,
.splitright,
.splitmiddle,
.splitleft_top,
.splitleft_bottom {
    background-color: transparent !important;
}
/* Class-selectors "left" / "right" / "middle" are also applied to split panes. */
.genericbody .left,
.genericbody .right,
.genericbody .middle {
    background-color: transparent !important;
}
.leftcontainer_inner,
.leftcontainer_outer {
    background-color: transparent !important;
}
.toolbar_top {
    background-color: rgba(10, 20, 32, 0.75) !important;
    backdrop-filter: blur(6px);
}
.acchead {
    background: rgba(10, 20, 32, 0.75) !important;
    backdrop-filter: blur(6px);
}
.accpanel {
    background: rgba(15, 24, 34, 0.62) !important;
}
.patientresults {
    background-color: rgba(20, 30, 40, 0.65) !important;
}
.patientresults:hover {
    background-color: rgba(84, 110, 122, 0.82) !important;
}


.empty-state-bg .esb-grid,
.empty-state-bg .esb-orb,
.empty-state-bg .esb-beam,
.empty-state-bg .esb-noise {
    position: absolute;
    inset: 0;
}

.empty-state-bg .esb-grid {
    z-index: 1;
    opacity: 0.14;
    background:
        linear-gradient(rgba(59, 201, 219, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 125, 139, 0.08) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0%, transparent 80%);
    animation: esbGridDrift 24s linear infinite;
}

.empty-state-bg .esb-orb {
    z-index: 3;
    border-radius: 50%;
    filter: blur(12px);
}

.empty-state-bg .esb-orb-a {
    top: 10%;
    left: 9%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, rgba(96, 125, 139, 0.30) 0%, rgba(96, 125, 139, 0.10) 42%, transparent 72%);
    animation: esbOrbDriftA 20s ease-in-out infinite;
}

.empty-state-bg .esb-orb-b {
    top: 58%;
    left: 62%;
    width: 24rem;
    height: 24rem;
    background: radial-gradient(circle, rgba(59, 201, 219, 0.16) 0%, rgba(59, 201, 219, 0.06) 46%, transparent 74%);
    animation: esbOrbDriftB 22s ease-in-out infinite;
}

.empty-state-bg .esb-orb-c {
    top: 18%;
    left: 70%;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(113, 146, 163, 0.24) 0%, rgba(113, 146, 163, 0.08) 48%, transparent 76%);
    animation: esbOrbDriftC 24s ease-in-out infinite;
}

.empty-state-bg .esb-beam {
    z-index: 4;
    inset: auto;
    top: 8%;
    left: 18%;
    width: 66rem;
    height: 14rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 201, 219, 0.10) 18%, rgba(96, 125, 139, 0.16) 52%, transparent 100%);
    filter: blur(30px);
    transform: rotate(-14deg);
    opacity: 0.32;
    animation: esbBeamSweep 20s ease-in-out infinite;
}

.empty-state-bg .esb-noise {
    z-index: 5;
    opacity: 0.12;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.5px),
        radial-gradient(circle at 42% 74%, rgba(59, 201, 219, 0.18) 0 1px, transparent 1.5px),
        radial-gradient(circle at 84% 82%, rgba(96, 125, 139, 0.20) 0 1px, transparent 1.5px);
    background-size: 240px 240px, 300px 300px, 220px 220px, 340px 340px;
    animation: esbParticleShift 32s linear infinite;
}

@keyframes esbGridDrift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-18px, 14px, 0); }
    100% { transform: translate3d(-36px, 28px, 0); }
}

@keyframes esbOrbDriftA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(54px, -18px, 0) scale(1.07); }
}

@keyframes esbOrbDriftB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-62px, 24px, 0) scale(1.12); }
}

@keyframes esbOrbDriftC {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-30px, -38px, 0) scale(0.95); }
}

@keyframes esbBeamSweep {
    0%, 100% { transform: translate3d(-4%, 0, 0) rotate(-14deg); opacity: 0.22; }
    50% { transform: translate3d(7%, 2%, 0) rotate(-12deg); opacity: 0.40; }
}

@keyframes esbParticleShift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-18px, 22px, 0); }
    100% { transform: translate3d(-36px, 44px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .empty-state-bg .esb-grid,
    .empty-state-bg .esb-orb,
    .empty-state-bg .esb-beam,
    .empty-state-bg .esb-noise {
        animation: none !important;
    }
}