/*
© 2025 Sharon Aicler (saichler@gmail.com)

Layer 8 Ecosystem is licensed under the Apache License, Version 2.0.
You may obtain a copy of the License at:

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/* ============================================ */
/* SECTION COMPONENTS */
/* ============================================ */

/* Dashboard Section (iframe container) */
.dashboard-section {
    padding: 0 !important;
}

/* Network Section */
.network-section {
    padding: 0 !important;
}

.network-hero {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    margin: 0 0 30px 0;
    background: linear-gradient(135deg, #0369a1 0%, #0e7490 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.network-content {
    padding: 0 30px 30px 30px;
}

/* Hero Styles (shared by network section) */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-illustration {
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 90%;
    max-width: 1000px;
}

.hero-title {
    font-size: 42px;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: 'Figtree', sans-serif;
    animation: hero-title-entrance 1s ease-out;
}

@keyframes hero-title-entrance {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.95;
    animation: hero-subtitle-entrance 1s ease-out 0.2s both;
}

@keyframes hero-subtitle-entrance {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}

/* Network Link Animation (used in network hero SVG) */
.network-link {
    stroke-dasharray: 10, 5;
    animation: dash-animate 2s linear infinite;
}

@keyframes dash-animate {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -15; }
}

.data-particle {
    animation: particle-flow 4s ease-in-out infinite;
}

@keyframes particle-flow {
    0% { opacity: 0; cy: 80; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; cy: 250; }
}

/* ============================================ */
/* TREE VIEW COMPONENT */
/* ============================================ */

.tree-view-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    padding: 15px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 8px;
}

.tree-view-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tree-view-container::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.tree-view-container::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

.tree-view-container::-webkit-scrollbar-thumb:hover {
    background: var(--noc-cyan);
}

.tree-node {
    margin: 2px 0;
}

.tree-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-radius: 4px;
    white-space: nowrap;
}

.tree-node-header:hover {
    background: rgba(160, 136, 115, 0.12);
}

.tree-expand-icon {
    color: var(--noc-cyan);
    font-size: 10px;
    width: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.tree-expand-icon.expanded {
    transform: rotate(0deg);
}

.tree-expand-icon.tree-no-children {
    opacity: 0;
    cursor: default;
}

.tree-key {
    color: var(--noc-cyan);
    font-weight: 700;
}

.tree-type,
.tree-count {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}

.tree-value {
    color: var(--text-primary);
}

.tree-string {
    color: var(--status-operational);
}

.tree-number {
    color: var(--noc-amber);
}

.tree-boolean {
    color: #9c27b0;
}

.tree-null,
.tree-undefined {
    color: var(--text-muted);
    font-style: italic;
}

.tree-empty {
    color: var(--text-dim);
    font-style: italic;
}

.tree-leaf {
    padding: 4px 8px;
    margin: 2px 0;
}

.tree-children {
    border-left: 1px solid var(--border-subtle);
    margin-left: 10px;
}