/**
 * OZARK ORACLE - Visualization Page Styles
 * Page-specific CSS for 3D maps, charts, and fullscreen visualizations
 *
 * Used by: nexus.html, etc.
 * Requires: quantum-theme.css loaded first
 */

/* === FULLSCREEN VISUALIZATION LAYOUT === */

.viz-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--black);
    z-index: var(--z-base);
}

.viz-plot {
    width: 100%;
    height: 100%;
}

/* === OVERLAY UI (floats over visualization) === */

.viz-overlay-top {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-content);
    text-align: center;
    pointer-events: none;
}

.viz-overlay-top h1 {
    font-size: var(--text-xl);
    margin-bottom: var(--sp-xs);
    pointer-events: auto;
}

.viz-overlay-stats {
    display: flex;
    gap: var(--sp-md);
    justify-content: center;
    pointer-events: auto;
}

.viz-stat {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--sp-xs) var(--sp-md);
    backdrop-filter: blur(5px);
}

.viz-stat-value {
    color: var(--gold);
    font-weight: 700;
    font-size: var(--text-lg);
}

.viz-stat-label {
    color: var(--silver-dark);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === SIDEBAR CONTROLS === */

.viz-sidebar {
    position: fixed;
    top: 60px;
    right: 0;
    width: 280px;
    height: calc(100vh - 60px);
    background: rgba(0, 0, 0, 0.85);
    border-left: 1px solid var(--glass-border-dim);
    backdrop-filter: blur(10px);
    z-index: var(--z-content);
    padding: var(--sp-lg);
    overflow-y: auto;
    transition: transform var(--ease-normal);
}

.viz-sidebar.collapsed {
    transform: translateX(100%);
}

.viz-sidebar-toggle {
    position: fixed;
    right: 10px;
    top: 70px;
    z-index: calc(var(--z-content) + 1);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--glass-border);
    color: var(--gold);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
}

.viz-sidebar h3 {
    font-size: var(--text-sm);
    color: var(--gold);
    margin-bottom: var(--sp-md);
}

.viz-sidebar .form-group {
    margin-bottom: var(--sp-md);
}

.viz-sidebar select,
.viz-sidebar input {
    width: 100%;
    font-size: var(--text-sm);
    padding: var(--sp-xs) var(--sp-sm);
}

/* === LEGEND === */

.viz-legend {
    position: fixed;
    bottom: 60px;
    left: var(--sp-lg);
    z-index: var(--z-content);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--glass-border-dim);
    border-radius: var(--radius-md);
    padding: var(--sp-md);
    backdrop-filter: blur(5px);
    max-width: 250px;
}

.viz-legend h4 {
    font-size: var(--text-xs);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--sp-sm);
}

.viz-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xs);
    font-size: var(--text-sm);
    color: var(--silver);
}

.viz-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

/* === NODE INFO PANEL === */

.viz-node-info {
    position: fixed;
    bottom: 60px;
    right: var(--sp-lg);
    z-index: var(--z-content);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--sp-lg);
    backdrop-filter: blur(10px);
    max-width: 350px;
    display: none;
}

.viz-node-info.visible {
    display: block;
}

.viz-node-info h3 {
    color: var(--gold);
    margin-bottom: var(--sp-sm);
}

/* === LAYER CONTROLS === */

.layer-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-xs) 0;
    cursor: pointer;
    color: var(--silver);
    font-size: var(--text-sm);
}

.layer-toggle input[type="checkbox"] {
    width: auto;
    accent-color: var(--gold);
}

/* === NAVIGATION BUTTONS (in-viz) === */

.viz-nav {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--sp-sm);
    z-index: var(--z-content);
}

.viz-nav .btn {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    font-size: var(--text-sm);
    padding: var(--sp-xs) var(--sp-md);
}

/* === NEXUS GLOBE MAP CONTAINER === */

#map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* === UI OVERLAY LAYER === */

.ui-layer {
    position: fixed;
    z-index: var(--z-sticky);
    pointer-events: none;
}

.interactive {
    pointer-events: auto;
}

/* === NEXUS CONTROLS SIDEBAR === */

#controls {
    top: 68px;
    left: 20px;
    width: 260px;
    bottom: 20px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid var(--glass-border-dim);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-sm);
    overflow-y: auto;
}

.panel-section {
    padding: 15px;
    border-bottom: 1px solid var(--glass-border-dim);
}

.panel-title {
    color: var(--gold);
    font-size: var(--text-sm);
    margin-bottom: 10px;
    font-weight: bold;
}

/* === LAYER TOGGLE BUTTONS === */

.layer-group {
    margin-bottom: 8px;
}

.layer-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 1px solid var(--silver-faint);
    color: var(--silver);
    padding: 6px 10px;
    cursor: pointer;
    text-align: left;

    font-size: var(--text-xs);
    margin-bottom: 4px;
    transition: all var(--ease-fast);
}

.layer-btn:hover {
    border-color: var(--silver-darker);
    background: rgba(255, 255, 255, 0.05);
}

.layer-btn.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold);
}

.layer-count {
    font-size: var(--text-xs);
    opacity: 0.6;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    margin-right: 8px;
    display: inline-block;
}

/* Color classes for layer dots */
.dot-gold { background: var(--gold); }
.dot-cyan { background: #00FFFF; }
.dot-red { background: #FF4444; }
.dot-magenta { background: #FF00FF; }
.dot-white { background: var(--white); }
.dot-purple { background: #9370DB; }
.dot-gray { background: var(--silver-dark); }
.dot-green { background: #00FF88; }
.dot-blue { background: #4488FF; }

/* === SETTINGS TOGGLES === */

.toggle-row {
    display: flex;
    align-items: center;
    margin-top: 5px;
    cursor: pointer;
}

.toggle-checkbox {
    margin-right: 8px;
    accent-color: var(--gold);
}

.toggle-label {
    font-size: var(--text-xs);
    color: var(--silver-dark);
}

/* === NODE MODAL (Connection Detail Panel) === */

#node-modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: var(--z-top);
    backdrop-filter: blur(4px);
    display: none;
}

#node-modal-bg.visible {
    display: block;
}

#node-modal {
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 0;
    width: 420px;
    background: var(--black-light);
    border-left: 1px solid var(--glass-border-dim);
    z-index: calc(var(--z-top) + 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#node-modal[hidden] {
    display: none;
}

#node-modal-header {
    padding: 12px 15px;
    border-bottom: 1px solid var(--black-lighter);
    flex-shrink: 0;
}

#node-modal-header h2 {
    color: var(--gold);
    font-size: var(--text-lg);
    margin: 0 0 4px 0;
}

#node-modal-header .meta {
    color: var(--silver-darker);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-dossier-btn {
    display: inline-block;
    margin-top: 6px;
    background: var(--gold);
    color: var(--black);
    padding: 4px 12px;
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-dossier-btn:hover {
    background: var(--white);
    color: var(--black);
}

#node-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.node-note {
    color: var(--silver-darker);
    font-size: var(--text-xs);
    margin-top: 4px;
}

/* === CONNECTION LIST ITEMS === */

.conn-section-title {
    color: var(--silver-faint);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 15px 4px;
    border-bottom: 1px solid var(--black-card);
    position: sticky;
    top: 0;
    background: var(--black-light);
}

.conn-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    border-bottom: 1px solid var(--black-lighter);
    font-size: var(--text-sm);
}

.conn-item:hover {
    background: rgba(255, 215, 0, 0.03);
}

.conn-name {
    color: var(--silver);
    flex: 1;
}

.conn-name a {
    color: var(--silver);
    text-decoration: none;
}

.conn-name a:hover {
    color: var(--gold);
}

.conn-type {
    color: var(--silver-faint);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 8px;
    white-space: nowrap;
}

.conn-type.social { color: #4488ff; }
.conn-type.political { color: #FF4444; }
.conn-type.financial { color: var(--gold); }
.conn-type.mentor { color: #00cc88; }
.conn-type.legal { color: #ff8844; }
.conn-type.intelligence { color: #00ffff; }
.conn-type.doj_evidence { color: #ff00ff; }

.conn-count {
    color: var(--silver-dark);
    font-size: var(--text-sm);
    padding: 8px 15px;
}

/* === CLUSTER EXPANSION IN MODAL === */

.cluster-node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 15px;
    border-bottom: 1px solid var(--black-lighter);
    font-size: var(--text-sm);
}

.cluster-node:hover {
    background: rgba(255, 215, 0, 0.03);
}

.cluster-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    margin-right: 8px;
    flex-shrink: 0;
}

.cluster-node-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.cluster-node-link {
    color: var(--silver);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cluster-node-link:hover {
    color: var(--gold);
}

.cluster-link-count {
    cursor: pointer;
}

/* === SLIDESHOW CONTROLS === */

#slideshow-controls {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-modal) + 1);
    background: rgba(0, 0, 0, 0.95);
    padding: 12px 25px;
    border: 1px solid var(--gold);
    display: flex;
    gap: 15px;
    align-items: center;
}

.slide-btn {
    background: var(--black-card);
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 8px 18px;
    cursor: pointer;

    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slide-btn:hover {
    background: var(--gold);
    color: var(--black);
}

.slide-btn.active {
    background: var(--gold);
    color: var(--black);
}

.slide-progress {
    color: var(--gold);
    font-size: var(--text-sm);
    min-width: 80px;
    text-align: center;
}

.slide-name {
    color: var(--silver);
    font-size: var(--text-xs);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === LOADING SCREEN === */

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    z-index: calc(var(--z-modal) + 500);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#loading .loading-text {
    color: var(--gold);
    font-size: var(--text-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* === MOBILE RESPONSIVE === */

@media (max-width: 768px) {
    .viz-sidebar {
        width: 100%;
        height: auto;
        max-height: 50vh;
        top: auto;
        bottom: 50px;
        border-left: none;
        border-top: 1px solid var(--glass-border-dim);
        transform: translateY(100%);
    }

    .viz-sidebar.open {
        transform: translateY(0);
    }

    .viz-overlay-top h1 {
        font-size: var(--text-base);
    }

    .viz-overlay-stats {
        flex-wrap: wrap;
        gap: var(--sp-xs);
    }

    .viz-stat {
        padding: var(--sp-xs) var(--sp-sm);
        font-size: var(--text-sm);
    }

    .viz-legend {
        bottom: auto;
        top: 60px;
        left: var(--sp-sm);
        max-width: 180px;
        font-size: var(--text-xs);
    }

    .viz-node-info {
        left: var(--sp-sm);
        right: var(--sp-sm);
        bottom: 50px;
        max-width: none;
    }

    .viz-nav {
        bottom: 55px;
    }

    .viz-nav .btn {
        font-size: var(--text-xs);
        padding: var(--sp-xs) var(--sp-sm);
    }

    /* Controls sidebar scrollable on mobile */
    #controls {
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100vh - 90px);
    }

    /* Nexus modal full-width on mobile */
    #node-modal {
        width: 100%;
        left: 0;
    }

    /* Slideshow controls adapt to mobile */
    #slideshow-controls {
        bottom: 15px;
        left: 5px;
        right: 5px;
        transform: none;
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .slide-btn {
        padding: 6px 12px;
        font-size: var(--text-xs);
    }

    .slide-name {
        max-width: 120px;
        font-size: var(--text-xs);
    }
}

/* === D3 NETWORK GRAPH (Epstein Network etc.) === */

.d3-graph {
    width: 100vw;
    height: 100vh;
}

/* Node base styles */
.d3-node {
    cursor: pointer;
}

/* Node category colors */
.d3-node--core { fill: #FF0000; }
.d3-node--handler-oligarch { fill: #FF0000; }
.d3-node--associate { fill: #FFA500; }
.d3-node--elite { fill: #FFA500; }
.d3-node--property { fill: #00CED1; }
.d3-node--location { fill: #00CED1; }
.d3-node--witness { fill: #90EE90; }
.d3-node--person { fill: #C0C0C0; }
.d3-node--institution { fill: #9370DB; }
.d3-node--event { fill: #FF00FF; }
.d3-node--placeholder { fill: #666666; }
.d3-node--unknown { fill: #555555; }

/* Link styles */
.d3-link {
    stroke-opacity: 0.6;
}

.d3-link--confirmed {
    stroke: #C0C0C0;
}

.d3-link--unconfirmed {
    stroke: #666;
    stroke-dasharray: 5,5;
}

/* Node labels */
.d3-node-label {
    font-size: var(--text-xs);
    fill: #C0C0C0;
    pointer-events: none;
}

/* Info panel */
.d3-info-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--glass-border, rgba(192, 192, 192, 0.5));
    padding: 20px;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    display: none;
    z-index: var(--z-content, 10);
}

.d3-info-panel.visible {
    display: block;
}

.d3-info-panel h2 {
    margin-top: 0;
    color: var(--white, #FFFFFF);
}

.d3-metadata {
    margin-top: 10px;
    font-size: var(--text-sm);
}

.d3-metadata-key {
    color: var(--gold, #FFA500);
}

/* D3 network legend */
.d3-legend {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--glass-border, rgba(192, 192, 192, 0.5));
    padding: 15px;
    z-index: var(--z-content, 10);
}

.d3-legend h3 {
    margin-top: 0;
    color: var(--silver, #C0C0C0);
    font-size: var(--text-sm, 14px);
}

.d3-legend-item {
    margin: 5px 0;
    display: flex;
    align-items: center;
}

.d3-legend-color {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: var(--radius-circle, 50%);
}

.d3-legend-color--core { background: #FF0000; }
.d3-legend-color--handler { background: #FF0000; }
.d3-legend-color--associate { background: #FFA500; }
.d3-legend-color--elite { background: #FFA500; }
.d3-legend-color--property { background: #00CED1; }
.d3-legend-color--location { background: #00CED1; }
.d3-legend-color--witness { background: #90EE90; }
.d3-legend-color--person { background: #C0C0C0; }
.d3-legend-color--institution { background: #9370DB; }
.d3-legend-color--event { background: #FF00FF; }
.d3-legend-color--placeholder { background: #666666; }

.d3-legend-stats {
    margin-top: 15px;
    font-size: var(--text-xs);
    color: var(--silver, #C0C0C0);
}

/* D3 network mobile responsive */
@media (max-width: 768px) {
    .d3-info-panel {
        top: auto;
        bottom: 50px;
        left: 10px;
        right: 10px;
        max-width: none;
        max-height: 40vh;
    }

    .d3-legend {
        max-width: 180px;
        padding: 10px;
        font-size: var(--text-xs, 12px);
    }

    .d3-legend-color {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }

    .d3-node-label {
        font-size: var(--text-2xs);
    }
}