/* ============================================================
   Northdocks Point Cloud Viewer — GodView Brand Styles
   Design tokens mirrored from ND-GodViewWeb (variables.scss)
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* --- Design Tokens --- */
:root {
    --nd-dark-grey: #1a1a1a;
    --nd-medium-grey: #2a2a2a;
    --nd-light-grey: #3a3a3a;
    --nd-text-white: rgba(255, 255, 255, 0.87);
    --nd-text-muted: rgba(255, 255, 255, 0.6);
    --nd-orange: #ff9900;
    --nd-orange-hover: #ffbb56;
    --nd-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nd-font-brand: 'Oswald', sans-serif;
}

/* --- Reset / Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--nd-font-body);
    background-color: var(--nd-dark-grey);
    color: var(--nd-text-white);
}

/* --- Main Potree Container --- */
.potree_container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/* ============================================================
   Navbar Overlay  (GODVIEW brand bar)
   ============================================================ */
#nd-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1.5rem;
    pointer-events: none;
    /* let clicks pass through to viewer */
    background: linear-gradient(to bottom,
            rgba(10, 10, 10, 0.55) 0%,
            rgba(10, 10, 10, 0.0) 100%);
}

/* Brand text — pointer-events auto so it's clickable */
#nd-navbar a,
#nd-navbar .nd-brand {
    pointer-events: auto;
}

.nd-brand {
    font-family: var(--nd-font-brand);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    user-select: none;
}

.nd-brand .brand-god {
    color: #f1f5f9;
}

.nd-brand .brand-view {
    color: var(--nd-orange);
}

/* Tagline under brand on landing */
.nd-brand-tagline {
    font-family: var(--nd-font-brand);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nd-text-muted);
    margin-top: 1px;
    display: block;
}

/* ============================================================
   Info Overlays  (Presentation & Annotation)
   ============================================================ */
.info-overlay {
    position: absolute;
    top: 70px;
    /* clear the navbar */
    right: 16px;
    width: 300px;
    background: rgba(26, 26, 26, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--nd-text-white);
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--nd-font-body);
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

#potree_presentation_info {
    pointer-events: none;
    border-top: 2px solid var(--nd-orange);
}

#annotation_info {
    border-top: 2px solid var(--nd-orange-hover);
}

.overlay-title {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nd-orange);
    letter-spacing: 0.03em;
}

.overlay-description {
    margin: 0;
    font-size: 0.82rem;
    color: var(--nd-text-muted);
    white-space: pre-line;
    line-height: 1.5;
}

/* ============================================================
   Loading Splash  (shown while viewer initialises)
   ============================================================ */
#nd-loading-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--nd-dark-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    transition: opacity 0.5s ease;
}

#nd-loading-splash .splash-logo {
    font-family: var(--nd-font-brand);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    animation: glow 3s ease-in-out infinite alternate;
}

#nd-loading-splash .splash-logo .brand-god {
    color: #f1f5f9;
}

#nd-loading-splash .splash-logo .brand-view {
    color: var(--nd-orange);
}

#nd-loading-splash .splash-tagline {
    font-family: var(--nd-font-brand);
    font-size: clamp(0.65rem, 1.5vw, 0.85rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--nd-text-muted);
}

/* Spinner */
#nd-loading-splash .nd-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--nd-orange);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 10px rgba(255, 153, 0, 0.2));
    }

    to {
        filter: drop-shadow(0 0 28px rgba(255, 153, 0, 0.55));
    }
}

/* Fade-out helper — add .hidden to hide splash */
#nd-loading-splash.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   Potree Sidebar — Custom Section Headings
   ============================================================ */
.nd-sidebar-heading {
    font-size: 1em;
    font-weight: 700;
    margin: 10px 0 4px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 153, 0, 0.35);
    color: var(--nd-orange);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--nd-font-brand, 'Oswald', sans-serif);
}

.nd-sidebar-subheading {
    font-size: 0.82em;
    font-weight: 500;
    margin: 8px 0 4px 0;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================================
   Navbar auto-hide when Potree sidebar is open
   Potree shifts .potree_menu_toggle to left:300px when open,
   so we detect that and hide our navbar overlay.
   ============================================================ */
body.nd-sidebar-open #nd-navbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#nd-navbar {
    transition: opacity 0.2s ease;
}

/* ============================================================
   Potree Sidebar — GodView Retheme
   Matches the offcanvas/sidebar style of ND-GodViewWeb
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
#potree_sidebar_container {
    background-color: var(--nd-dark-grey, #1a1a1a) !important;
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
    font-family: var(--nd-font-body, 'Roboto', sans-serif) !important;
    font-size: 13px !important;
    border-right: 1px solid rgba(255, 153, 0, 0.15) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
}

/* ── Sidebar header (Potree branding row) — now at bottom ─── */
#sidebar_header {
    background-color: var(--nd-medium-grey, #2a2a2a) !important;
    border-top: 1px solid rgba(255, 153, 0, 0.2) !important;
    border-bottom: none !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
}

/* Hide Potree.org / GitHub / version links — keep it clean */
#sidebar_header a {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 10px !important;
    text-decoration: none !important;
}

#sidebar_header a:hover {
    color: var(--nd-orange, #ff9900) !important;
}

/* Language selector */
#sidebar_header span {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 10px !important;
}

/* ── Accordion section headers ────────────────────────────── */
#potree_sidebar_container .accordion>h3,
#potree_sidebar_container .accordion>h3.ui-accordion-header {
    background-color: var(--nd-medium-grey, #2a2a2a) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
    font-family: var(--nd-font-brand, 'Oswald', sans-serif) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

#potree_sidebar_container .accordion>h3:hover,
#potree_sidebar_container .accordion>h3.ui-state-hover {
    background-color: var(--nd-light-grey, #3a3a3a) !important;
    color: var(--nd-orange, #ff9900) !important;
}

#potree_sidebar_container .accordion>h3.ui-accordion-header-active,
#potree_sidebar_container .accordion>h3.ui-state-active {
    background-color: var(--nd-light-grey, #3a3a3a) !important;
    color: var(--nd-orange, #ff9900) !important;
    border-bottom: 1px solid rgba(255, 153, 0, 0.25) !important;
}

/* Accordion expand icon */
#potree_sidebar_container .accordion>h3 .ui-accordion-header-icon,
#potree_sidebar_container .accordion>h3 .ui-icon {
    filter: brightness(0) invert(0.6) !important;
}

#potree_sidebar_container .accordion>h3.ui-state-active .ui-icon {
    filter: brightness(0) saturate(100%) invert(62%) sepia(80%) saturate(700%) hue-rotate(2deg) brightness(110%) !important;
}

/* ── Accordion panel content ──────────────────────────────── */
#potree_sidebar_container .accordion>div,
#potree_sidebar_container .ui-accordion-content {
    background-color: var(--nd-dark-grey, #1a1a1a) !important;
    border: none !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ── All text inside sidebar ──────────────────────────────── */
#potree_sidebar_container,
#potree_sidebar_container label,
#potree_sidebar_container span,
#potree_sidebar_container p,
#potree_sidebar_container div {
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
}

/* ── Buttons (jQuery UI + plain input[type=button]) ─────────*/
#potree_sidebar_container input[type=button],
#potree_sidebar_container .ui-button,
#potree_sidebar_container button:not(#vr_button) {
    background-color: var(--nd-medium-grey, #2a2a2a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
    font-family: var(--nd-font-body, 'Roboto', sans-serif) !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#potree_sidebar_container input[type=button]:hover,
#potree_sidebar_container .ui-button:hover,
#potree_sidebar_container button:not(#vr_button):hover {
    background-color: var(--nd-light-grey, #3a3a3a) !important;
    border-color: rgba(255, 153, 0, 0.4) !important;
    color: var(--nd-orange-hover, #ffbb56) !important;
}

#potree_sidebar_container input[type=button]:active,
#potree_sidebar_container .ui-button.ui-state-active,
#potree_sidebar_container .ui-button-active {
    background-color: rgba(255, 153, 0, 0.15) !important;
    border-color: var(--nd-orange, #ff9900) !important;
    color: var(--nd-orange, #ff9900) !important;
}

/* ── Toggle button set (e.g. Show/Hide, Perspective/Ortho) ── */
#potree_sidebar_container .ui-buttonset .ui-button {
    border-radius: 0 !important;
}

#potree_sidebar_container .ui-buttonset .ui-button:first-child {
    border-radius: 4px 0 0 4px !important;
}

#potree_sidebar_container .ui-buttonset .ui-button:last-child {
    border-radius: 0 4px 4px 0 !important;
}

/* ── Sliders ─────────────────────────────────────────────── */
#potree_sidebar_container .ui-slider {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 4px !important;
    height: 4px !important;
}

#potree_sidebar_container .ui-slider-range {
    background-color: var(--nd-orange, #ff9900) !important;
    border-radius: 4px !important;
}

#potree_sidebar_container .ui-slider-handle {
    background-color: var(--nd-orange, #ff9900) !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
    top: -5px !important;
    cursor: grab !important;
    box-shadow: 0 0 6px rgba(255, 153, 0, 0.4) !important;
}

#potree_sidebar_container .ui-slider-handle:hover {
    background-color: var(--nd-orange-hover, #ffbb56) !important;
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.7) !important;
}

/* ── Select dropdowns ────────────────────────────────────── */
#potree_sidebar_container select {
    background-color: var(--nd-medium-grey, #2a2a2a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    appearance: auto !important;
}

/* ── Checkboxes / radio labels ───────────────────────────── */
#potree_sidebar_container input[type=checkbox],
#potree_sidebar_container input[type=radio] {
    accent-color: var(--nd-orange, #ff9900) !important;
}

/* ── Color pickers (spectrum) ────────────────────────────── */
#potree_sidebar_container .sp-replacer {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
    background: var(--nd-medium-grey, #2a2a2a) !important;
}

/* ── Number inputs ───────────────────────────────────────── */
#potree_sidebar_container input[type=number],
#potree_sidebar_container input[type=text] {
    background-color: var(--nd-medium-grey, #2a2a2a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
}

#potree_sidebar_container input[type=number]:focus,
#potree_sidebar_container input[type=text]:focus {
    outline: none !important;
    border-color: rgba(255, 153, 0, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.15) !important;
}

/* ── Measurement icons toolbar ───────────────────────────── */
#potree_sidebar_container img.potree-icon {
    filter: brightness(0.8) !important;
    transition: filter 0.15s ease !important;
}

#potree_sidebar_container img.potree-icon:hover {
    filter: brightness(1) sepia(1) saturate(3) hue-rotate(5deg) !important;
}

/* ── Scrollbar inside sidebar ────────────────────────────── */
#potree_sidebar_container ::-webkit-scrollbar {
    width: 5px !important;
}

#potree_sidebar_container ::-webkit-scrollbar-track {
    background: var(--nd-dark-grey, #1a1a1a) !important;
}

#potree_sidebar_container ::-webkit-scrollbar-thumb {
    background: rgba(255, 153, 0, 0.3) !important;
    border-radius: 3px !important;
}

#potree_sidebar_container ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 153, 0, 0.6) !important;
}

/* ── Sidebar toggle button ───────────────────────────────── */
.potree_menu_toggle {
    background-color: var(--nd-medium-grey, #2a2a2a) !important;
    border: 1px solid rgba(255, 153, 0, 0.2) !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 8px !important;
    opacity: 0.85 !important;
    transition: opacity 0.15s ease, border-color 0.15s ease !important;
}

.potree_menu_toggle:hover {
    opacity: 1 !important;
    border-color: rgba(255, 153, 0, 0.6) !important;
}

/* ── Scene tree (jstree) ─────────────────────────────────── */
#potree_sidebar_container .jstree-default .jstree-anchor {
    color: var(--nd-text-white, rgba(255, 255, 255, 0.87)) !important;
    font-size: 12px !important;
}

#potree_sidebar_container .jstree-default .jstree-hovered {
    background-color: var(--nd-light-grey, #3a3a3a) !important;
    border-radius: 3px !important;
}

#potree_sidebar_container .jstree-default .jstree-clicked {
    background-color: rgba(255, 153, 0, 0.12) !important;
    color: var(--nd-orange, #ff9900) !important;
    border-radius: 3px !important;
}

/* ── "Tools" accordion active icon tint ─────────────────── */
#potree_sidebar_container .potree-icon-btn {
    filter: invert(0.7) !important;
    transition: filter 0.15s !important;
}

#potree_sidebar_container .potree-icon-btn:hover,
#potree_sidebar_container .potree-icon-btn.active {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) brightness(1.2) !important;
}