/*
 * ══════════════════════════════════════════════
 *  INFRA.CSS — Estilos do Painel de Infraestrutura
 * ══════════════════════════════════════════════
 *
 *  Propósito : Estilização completa do planejador de rede CapCode de alta
 *              fidelidade. Contém a barra de controle lateral, barra inferior,
 *              cabeamento estruturado neon, escala dBm, legenda e cards de KPI.
 */

/* ── Ajustes do Painel e Layout de Colunas ────── */
.panel-body {
    padding: 16px 20px 20px;
    box-sizing: border-box;
}

.infra-planner-main {
    height: 100%;
}

.infra-planner-container {
    height: 340px;
    position: relative;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 
        inset 0 0 35px rgba(0, 0, 0, 0.9),
        0 4px 20px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s;
}

.infra-planner-container:hover {
    border-color: rgba(14, 165, 233, 0.15) !important;
}

/* ── Barra Lateral de Navegação CapCode (Glass) ─ */
.capcode-nav-sidebar {
    transition: all 0.3s ease;
}

.nav-icon-btn {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-icon-btn:hover {
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.08);
}

.nav-icon-btn.active {
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.15);
    box-shadow: inset 0 0 4px rgba(14, 165, 233, 0.2);
}

/* ── Canvas do Mapa ───────────────────────────── */
.infra-map-canvas {
    position: relative;
    height: 100%;
}

/* ── SVG Blueprint / CAD Grid ─────────────────── */
.blueprint-svg {
    opacity: 0.95;
    mix-blend-mode: screen;
}

/* ── Cabeamento Estruturado Neon ─────────────── */
#cable-ap1, #cable-ap2, #cable-ap3 {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.4));
}

#cable-ap1.active, #cable-ap2.active, #cable-ap3.active {
    stroke-dashoffset: 0;
    opacity: 0.7;
    animation: cable-flow 25s linear infinite;
}

@keyframes cable-flow {
    to {
        stroke-dashoffset: -100;
    }
}

/* ── Leader Lines (Linhas Conectoras) ─────────── */
.leader-lines-svg {
    z-index: 5;
}

.leader-lines-svg path[id^="leader-"] {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    opacity: 0;
}

.leader-lines-svg path[id^="leader-"].active {
    stroke-dashoffset: 0;
    opacity: 0.8;
}

/* ── Zonas do Heatmap (Sinal WiFi) ────────────── */
.heatmap-zone {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    filter: blur(16px);
    transition: 
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
        opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.heatmap-zone.active {
    opacity: 0.85;
}

/* Gradientes Radiais de Cobertura dBm realistas */
.heatmap-zone-1 {
    background: radial-gradient(circle, 
        rgba(16, 185, 129, 0.58) 0%, 
        rgba(16, 185, 129, 0.44) 30%, 
        rgba(234, 179, 8, 0.28) 55%, 
        rgba(249, 115, 22, 0.14) 75%, 
        rgba(239, 68, 68, 0.05) 88%, 
        transparent 100%
    );
}

.heatmap-zone-2 {
    background: radial-gradient(circle, 
        rgba(14, 165, 233, 0.58) 0%, 
        rgba(14, 165, 233, 0.4) 30%, 
        rgba(168, 85, 247, 0.24) 55%, 
        rgba(239, 68, 68, 0.08) 80%, 
        transparent 100%
    );
}

.heatmap-zone-3 {
    background: radial-gradient(circle, 
        rgba(16, 185, 129, 0.52) 0%, 
        rgba(16, 185, 129, 0.36) 35%, 
        rgba(234, 179, 8, 0.24) 60%, 
        rgba(239, 68, 68, 0.03) 85%, 
        transparent 100%
    );
}

/* ── Nós de Equipamento (AP Nodes) ────────────── */
.ap-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    z-index: 10;
}

.ap-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #09090b;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary-light);
    font-size: 9px;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, border-color 0.3s, color 0.3s;
}

.ap-node:hover .ap-core {
    transform: scale(1.25);
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.7);
}

.ap-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(14, 165, 233, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: ap-ring-pulse 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes ap-ring-pulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ── Direct Map Tags (Super Premium & Minimalist) ─ */
.map-label-tag {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 2.5px;
    padding: 1.5px 4px;
    background: rgba(9, 9, 11, 0.88);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 5.5px;
    font-family: var(--font-heading), sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    z-index: 12;
    opacity: 0;
    transform: translateY(5px);
    transition: 
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease,
        border-color 0.3s;
    pointer-events: none;
}

.map-label-tag.active {
    opacity: 1;
    transform: translateY(0);
}

.tag-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 3px #38bdf8;
    flex-shrink: 0;
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Green dot for active status/firewall */
.map-label-tag.active-green {
    border-color: rgba(16, 185, 129, 0.3);
}

.map-label-tag.active-green .tag-dot {
    background: #10b981;
    box-shadow: 0 0 4px #10b981;
}

/* ── Legenda de Cobertura (Scale Bar) ─────────── */
.heatmap-scale {
    font-size: 5.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 11;
}

.scale-bar {
    width: 45px;
    height: 3px;
    border-radius: 1.5px;
    background: linear-gradient(90deg, #10b981 0%, #eab308 50%, #f97316 75%, #ef4444 100%);
}

.scale-label {
    font-family: var(--font-mono);
}

/* ── Barra de Ferramentas CAD Inferior ────────── */
.capcode-tools-bar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.7);
    transition: all 0.4s ease;
}

.capcode-tools-bar span.iconify {
    font-size: 8px;
    cursor: pointer;
    transition: color 0.2s;
}

.capcode-tools-bar span.iconify:hover {
    color: #38bdf8;
}

/* ── Sidebar de Serviços Ativos (Direita) ──────── */
.infra-planner-sidebar {
    height: 340px;
}

.sidebar-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sidebar-list::-webkit-scrollbar {
    width: 2px;
}

.sidebar-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 1px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4.5px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    color: rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
}

.sidebar-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: background-color 0.4s, box-shadow 0.4s;
    flex-shrink: 0;
}

.sidebar-name {
    font-size: 7.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-subtext {
    font-size: 5.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-status {
    font-size: 5.5px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
    padding: 1px 3px;
    border-radius: 2px;
    transition: color 0.4s, background-color 0.4s;
}

/* Estados Ativos aplicados dinamicamente via JS */
.sidebar-item.active {
    color: var(--color-white);
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.25);
}

.sidebar-item.active .sidebar-dot {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.sidebar-item.active .sidebar-status {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

/* ── Cards de KPI de Telemetria (Celular Style) ── */
.kpi-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kpi-card:hover {
    border-color: rgba(56, 189, 248, 0.22);
    box-shadow: 
        0 6px 16px rgba(0,0,0,0.65),
        0 0 8px rgba(14, 165, 233, 0.1);
    transform: translateY(-1px);
}

.kpi-label {
    letter-spacing: 0.04em;
}

.kpi-sublabel {
    letter-spacing: 0.02em;
}