:root {
    --sl-cyan: #00eaff;
    --sl-magenta: #ff00a8;
    --sl-purple: #a855f7;
    --sl-bg: #090a10;
    --sl-bg-2: #0b0d17;
    --bs-primary: var(--sl-purple);
    --bs-link-color: var(--sl-cyan);
    --bs-body-bg: var(--sl-bg);
    --bs-body-color: #e6e6f0;
    --bs-border-color: #27293a;
}

/* Background + global */
html, body {
    min-height: 100%
}

body {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(168, 85, 247, .15), transparent 70%),
    radial-gradient(1000px 500px at -10% 20%, rgba(0, 234, 255, .12), transparent 65%),
    linear-gradient(180deg, var(--sl-bg), var(--sl-bg-2));
}

/* Reusable vibes */
.neon-text {
    text-shadow: 0 0 .4rem rgba(168, 85, 247, .8), 0 0 .8rem rgba(255, 0, 168, .35)
}

.neon-border {
    box-shadow: 0 0 0 .1rem rgba(168, 85, 247, .35), 0 0 1.25rem rgba(0, 234, 255, .18) inset;
    border: 1px solid rgba(168, 85, 247, .3) !important
}

.glass {
    background: rgba(15, 17, 30, .55);
    backdrop-filter: blur(6px)
}

.brand-gradient {
    background: linear-gradient(90deg, var(--sl-cyan), var(--sl-magenta) 50%, var(--sl-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero-gradient {
    background: radial-gradient(900px 450px at 20% 10%, rgba(255, 0, 168, .12), transparent 60%),
    radial-gradient(900px 450px at 80% 0%, rgba(0, 234, 255, .10), transparent 60%);
}

/* Navbar tweaks */
.navbar.glass {
    background: rgba(15, 17, 30, .55)
}

.navbar .nav-link {
    color: #cfe4ff
}

.navbar .nav-link:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(58, 167, 255, .9)
}

/* Forms */
.form-label {
    color: #e6e6f0
}

.form-control.glass {
    background: rgba(255, 255, 255, .04);
    color: #eaf2ff
}

.form-control.glass:focus {
    border-color: #3aa7ff;
    box-shadow: 0 0 0 .2rem rgba(58, 167, 255, .25);
    background: rgba(255, 255, 255, .06)
}

.invalid-feedback {
    display: block
}

/* ensure field errors show */

/* ===== SLAMLab Potree encapsulation ===== */

.sl-pview {
    /* The "card" height; tweak as you like */
    height: 70vh;
    position: relative;
    overflow: hidden; /* clip sidebar & toolbar to the glass card */
}

/* Potree expects absolute children; we anchor them to the card */
.sl-pview #potree_render_area,
.sl-pview #potree_sidebar_container {
    position: absolute;
    inset: 0; /* top/right/bottom/left = 0 relative to .sl-pview */
}

/* Sidebar gets a fixed width & scroll inside the card */
.sl-pview #potree_sidebar_container {
    width: 320px; /* adjust to taste */
    right: auto; /* ensure it sticks to the left */
    left: 0;
    overflow: auto; /* scroll within the card, not the page */
    border-right: 1px solid rgba(168, 85, 247, .25);
}

/* Render area occupies the remaining space to the right of the sidebar */
.sl-pview #potree_render_area {
    left: 320px; /* same as sidebar width */
    right: 0;
    top: 0;
    bottom: 0;
}

/* Keep the toolbar inside the card at the very top */
.sl-pview .potree_toolbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10; /* ensure it sits above canvas */
}

/* Optional: tweak Potree UI colors to match your theme */
.sl-pview .potree_toolbar {
    background: rgba(15, 17, 30, .75);
    border-bottom: 1px solid rgba(168, 85, 247, .25);
}

.sl-pview #potree_sidebar_container {
    background: rgba(15, 17, 30, .65);
}