/*
 * terrarium.css
 * Styles for the terrarium 3D point cloud viewer
 *
 * Covers: Pannellum grid hotspots (Task 1A), directional nav overlay (Task 1B),
 * status display, canvas cursor states
 *
 * Location: /Library/WebServer/Documents/Canemah/projects/ecoSPLAT/viewer/css/
 * Author: M. Hamilton / Claude collaboration
 * Date: February 2026
 */

/* ============================================================
   Terrarium grid hotspots -- Pannellum overlay (Task 1A)
   ============================================================

   Pannellum creates per hotspot:
   <div class="pnlm-hotspot-base grid-hotspot grid-available|grid-pending">
       <div class="pnlm-sprite pnlm-info"></div>
       <span class="pnlm-tooltip">
           <div class="grid-tooltip">...</div>
       </span>
   </div>
   ============================================================ */

/* Hide default Pannellum sprite icon */
.grid-hotspot .pnlm-sprite {
    display: none;
}

/* Base marker -- positioned by Pannellum transforms */
.grid-hotspot {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-round);
    margin-left: -11px;
    margin-top: -11px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

/* Available cell -- has point cloud, clickable */
.grid-hotspot.grid-available {
    background: var(--accent);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 8px var(--accent-glow);
    cursor: pointer;
}
.grid-hotspot.grid-available:hover {
    transform: scale(1.3);
    box-shadow: 0 0 14px var(--accent), 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Pending cell -- perspective image only, no point cloud */
.grid-hotspot.grid-pending {
    background: transparent;
    border: 2px solid var(--text-dim);
    opacity: 0.5;
}
.grid-hotspot.grid-pending:hover {
    opacity: 0.75;
    border-color: var(--text-secondary);
}

/* Tooltip container -- override Pannellum defaults */
.grid-hotspot .pnlm-tooltip {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
}
.grid-hotspot:hover .pnlm-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Tooltip content */
.grid-tooltip {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(6, 7, 13, 0.9);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
}

.grid-tooltip-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-bright);
    letter-spacing: 1px;
}

.grid-tooltip-ring {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.grid-tooltip-hint {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--accent);
    margin-top: 2px;
}

/* Pannellum tooltip arrow -- hide for grid hotspots */
.grid-hotspot .pnlm-tooltip::before,
.grid-hotspot .pnlm-tooltip::after {
    display: none !important;
}

/* ============================================================
   Directional navigation overlay (Task 1B)
   ============================================================

   3x3 grid positioned bottom-right of the terrarium viewport.
   Thumbnail images of adjacent grid cells at cardinal positions.
   Center shows current cell label + acts as "back to panorama".
   ============================================================ */

.terrarium-nav {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 60;
    display: grid;
    grid-template-columns: 80px 60px 80px;
    grid-template-rows: 60px 60px 60px;
    gap: 4px;
    pointer-events: auto;
}

/* Arrow thumbnail containers */
.terrarium-nav-arrow {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    background: var(--bg-deep);
}
.terrarium-nav-arrow:hover {
    border-color: var(--accent);
    transform: scale(1.08);
}
.terrarium-nav-arrow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Up/down arrows: narrower to match center column */
.terrarium-nav-up,
.terrarium-nav-down {
    width: 60px;
    height: 60px;
    justify-self: center;
}

/* Pending cells -- no point cloud, dim and non-interactive */
.terrarium-nav-arrow.nav-pending {
    opacity: 0.85;
    cursor: pointer;
    border-color: var(--text-dim);
}
.terrarium-nav-arrow.nav-pending:hover {
    border-color: var(--accent);
    transform: scale(1.08);
}
/* Center cell -- current position indicator + back button */
.terrarium-nav-center {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 2px solid var(--accent);
    background: rgba(6, 7, 13, 0.8);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.terrarium-nav-center:hover {
    background: rgba(230, 126, 34, 0.15);
}

.terrarium-nav-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 1px;
}

.terrarium-nav-ring {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================
   Terrarium viewport styles
   ============================================================ */

/* WebGL canvas fills the terrarium container */
#terrarium canvas {
    cursor: grab;
}
#terrarium canvas:active {
    cursor: grabbing;
}

/* Terrarium status readout -- sidebar */
#terrarium-status {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-bright);
}

/* Measurement readout in sidebar */
#terrarium-measure {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--accent);
}