/* Base Styles */
body {
    background-color: #1a1a1a;
    color: #d1d5db;
    font-family: 'Google Sans Flex', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #F4E1BA;
}

/* Glassmorphism */
.glass {
    background: rgba(81, 81, 81, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel {
    background: #262626;
    /* Neutral-800 fallback/base */
    border: 1px solid #404040;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #515151;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C9581F;
}

/* Animations */
.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(201, 88, 31, 0.5);
    transform: translateY(-2px);
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 88, 31, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(201, 88, 31, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(201, 88, 31, 0);
    }
}

.pulse-btn {
    animation: pulse-orange 2s infinite;
}

/* Nav Item Active State */
.nav-active {
    background: rgba(201, 88, 31, 0.15);
    border-left: 4px solid #C9581F;
    color: #F4E1BA;
}

/* Chart Config */
canvas {
    max-height: 300px;
}

/* Network Tree Lines */
.tree-line-v {
    position: absolute;
    left: -18px;
    top: 14px;
    bottom: -20px;
    width: 2px;
    background-color: #515151;
}

.last .tree-line-v {
    bottom: auto;
    height: 20px;
}

.tree-line-h {
    position: absolute;
    left: -18px;
    top: 34px;
    width: 18px;
    height: 2px;
    background-color: #515151;
}