/* ============================================ */
/* SECTION COMPONENTS */
/* ============================================ */

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

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

/* 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; }
}

/* ============================================ */
/* STATUS BADGES (table cells) */
/* ============================================ */

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    min-width: 80px;
}

.status-badge.status-operational {
    background: color-mix(in srgb, var(--layer8d-success) 10%, transparent);
    color: var(--layer8d-success);
}

.status-badge.status-warning {
    background: color-mix(in srgb, var(--layer8d-warning) 10%, transparent);
    color: var(--layer8d-warning);
}

.status-badge.status-critical {
    background: color-mix(in srgb, var(--layer8d-error) 10%, transparent);
    color: var(--layer8d-error);
}

.status-badge.status-offline {
    background: color-mix(in srgb, var(--layer8d-gray-text) 10%, transparent);
    color: var(--layer8d-gray-text);
}

.status-badge.status-maintenance {
    background: color-mix(in srgb, var(--layer8d-info) 10%, transparent);
    color: var(--layer8d-info);
}

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

.tree-view-container {
    background: var(--layer8d-bg-light);
    border: 1px solid var(--layer8d-border);
    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(--layer8d-bg-light);
}

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

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

.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: color-mix(in srgb, var(--layer8d-primary) 10%, transparent);
}

.tree-expand-icon {
    color: var(--layer8d-primary);
    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(--layer8d-primary);
    font-weight: 700;
}

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

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

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

.tree-number {
    color: #ff9800;
}

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

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

.tree-empty {
    color: #a0aec0;
    font-style: italic;
}

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

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