/* Design Tokens & Animations */
:root {
    --primary: #131b2e;
    --secondary: #0058be;
    --action-gradient: linear-gradient(135deg, #0058be 0%, #2170e4 100%);
    --bg-gradient: linear-gradient(135deg, #f0f4f9 0%, #ffffff 100%);
    
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.4);
    --error: #ef4444;
    --error-glow: rgba(239, 68, 68, 0.5);
    
    --surface: rgba(255, 255, 255, 0.85);
    --surface-dark: rgba(19, 27, 46, 0.85);
    --outline: #e2e8f0;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Glassmorphic Map Overlays (Transparansi Ditingkatkan) */
.map-panel {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 88, 190, 0.08);
    color: #1e293b !important;
    transition: all 0.3s ease;
}

/* Otomatisasi Mode Gelap untuk Map Panel */
body.dark .map-panel {
    background: rgba(19, 27, 46, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
}

body.dark .map-panel h3,
body.dark .map-panel h4,
body.dark .map-panel p,
body.dark .map-panel span {
    color: #e2e8f0 !important;
}

body.dark .map-panel #statActiveNodes,
body.dark .map-panel #statLatency,
body.dark .map-panel #statStabilityText {
    color: #38bdf8 !important; /* Highlight cyan di mode gelap */
}

/* Scrollbar customization */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 88, 190, 0.15);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 88, 190, 0.3);
}

/* Blinking beacons for nodes */
.pulse-green {
    box-shadow: 0 0 0 0 var(--success-glow);
    animation: pulse-green 2s infinite;
}
.pulse-red {
    box-shadow: 0 0 0 0 var(--error-glow);
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--success-glow);
    }
    70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--error-glow);
    }
    70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Custom Marker CSS styling for Leaflet */
.leaflet-div-icon {
    background: transparent !important;
    border: none !important;
}

.node-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid var(--success);
    color: var(--success);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark .node-icon-wrapper {
    background: rgba(19, 27, 46, 0.45);
}

.node-icon-wrapper.down {
    border-color: var(--error);
    color: var(--error);
}

.node-icon-wrapper:hover {
    transform: scale(1.15);
}

/* Leaflet Line pulse effects */
.cable-path {
    stroke-dasharray: 8, 4;
    animation: dash 30s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -1000;
    }
}

/* Leaflet customization overrides */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    padding: 4px !important;
}

.remote-hover-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.remote-hover-tooltip::before {
    display: none !important;
}

.remote-hover-card {
    width: 210px;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    font-family: 'Inter', sans-serif !important;
}

body.dark .remote-hover-card,
.dark .remote-hover-card {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.remote-hover-card .remote-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
}

body.dark .remote-hover-card .remote-title,
.dark .remote-hover-card .remote-title {
    color: #ffffff !important;
}

.remote-hover-card .remote-ip {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
}

body.dark .remote-hover-card .remote-ip,
.dark .remote-hover-card .remote-ip {
    color: #94a3b8 !important;
}

.remote-hover-card .remote-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #0058be;
    background: #0058be;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.remote-hover-card .remote-button.stop {
    border-color: #f97316;
    background: #ea580c;
}

.leaflet-bar {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.leaflet-bar a {
    border-bottom: 1px solid var(--outline) !important;
}
.leaflet-bar a:last-child {
    border-bottom: none !important;
}

/* Clear top header for Leaflet control positioning */
.leaflet-top {
    top: 80px !important;
}

/* Badge Live Monitoring Adaptif */
.live-badge {
    background: rgba(0, 88, 190, 0.1) !important;
    color: #0058be !important;
    border: 1px solid rgba(0, 88, 190, 0.15) !important;
}

body.dark .live-badge {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

/* Tooltip panjang kabel di peta */
.cable-tooltip {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1e293b !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    font-family: 'Mono', monospace, sans-serif !important;
    padding: 2px 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body.dark .cable-tooltip {
    background: rgba(19, 27, 46, 0.8) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Blue highlight glow for active remote access APs */
.node-icon-wrapper.remote-active {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
}

.pulse-blue {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    animation: pulse-blue 1.5s infinite;
}

@keyframes pulse-blue {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Collapsible HUD Animations */
#hudPanelsContainer {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#hudPanelsContainer.collapsed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
    margin-bottom: -4px; /* Pull the button down slightly when collapsed */
}

/* Custom high-contrast visible hand cursor for Leaflet map in Light & Dark modes */
.leaflet-grab {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%23000000' stroke-width='1.5' d='M9 2c-.6 0-1 .4-1 1v7c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V5c0-.6-.4-1-1-1s-1 .4-1 1v6c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V8c0-.6-.4-1-1-1s-1 .4-1 1v8c0 3.3 2.7 6 6 6h4c3.3 0 6-2.7 6-6V9c0-.6-.4-1-1-1s-1 .4-1 1v3c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V6c0-.6-.4-1-1-1s-1 .4-1 1v5c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V3c0-.6-.4-1-1-1z'/%3E%3C/svg%3E") 8 2, grab !important;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%23000000' stroke-width='1.5' d='M9 6c-.6 0-1 .4-1 1v3c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V8c0-.6-.4-1-1-1s-1 .4-1 1v3c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7v-1c0-.6-.4-1-1-1s-1 .4-1 1v6c0 3.3 2.7 6 6 6h4c3.3 0 6-2.7 6-6v-6c0-.6-.4-1-1-1s-1 .4-1 1v2c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V8c0-.6-.4-1-1-1s-1 .4-1 1v3c0 .3-.1.5-.3.7-.2.2-.5.3-.7.3s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.7V7c0-.6-.4-1-1-1z'/%3E%3C/svg%3E") 8 6, grabbing !important;
}