/* Topology Responsive - Mobile First */

/* Tablet (768px) */
@media (max-width: 768px) {
    .vlan-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem;
    }

    .vlan-chips {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .vlan-chip {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
    }

    .topology-controls {
        top: 8px;
        right: 8px;
    }

    .zoom-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .topology-legend {
        bottom: 8px;
        left: 8px;
        padding: 0.5rem;
        max-width: 200px;
    }

    .legend-item span {
        font-size: 0.65rem;
    }

    .topology-legend {
        transform: scale(0.85);
        transform-origin: bottom left;
    }

    .node-tooltip {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 40vh;
        border-radius: 16px 16px 0 0;
        overflow-y: auto;
    }

    .dp-sidebar {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .vlan-bar {
        padding: 0.5rem;
    }

    .vlan-bar-title {
        font-size: 0.7rem;
    }

    .vlan-chip {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .vlan-chip-icon {
        font-size: 0.7rem;
    }

    .topology-container {
        height: calc(100vh - 200px);
        min-height: 300px;
    }

    .svg-topology {
        width: 100%;
        height: 100%;
    }

    .topology-controls {
        top: 6px;
        right: 6px;
        gap: 4px;
    }

    .zoom-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        border-radius: 6px;
    }

    .topology-legend {
        display: none;
    }

    /* Show legend toggle on mobile */
    .legend-toggle {
        display: block;
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: rgba(15,23,42,0.9);
        border: 1px solid #1e293b;
        border-radius: 6px;
        padding: 0.3rem 0.6rem;
        color: #94a3b8;
        font-size: 0.7rem;
        cursor: pointer;
        z-index: 5;
    }

    .legend-toggle:hover {
        background: rgba(30,41,59,0.95);
        color: #f8fafc;
    }

    /* Legend popup on mobile */
    .topology-legend.mobile-open {
        display: block;
        position: absolute;
        bottom: 40px;
        left: 8px;
        transform: none;
        z-index: 10;
    }

    .topo-status-indicator {
        bottom: 8px;
        right: 8px;
        left: auto;
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
    }

    /* Device panel full width */
    .dp-sidebar {
        width: 100vw;
        border-radius: 16px 16px 0 0;
        height: 70vh;
        top: 30vh;
    }

    .dp-backdrop {
        background: rgba(0,0,0,0.7);
    }

    /* Touch hints */
    .touch-hint {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(15,23,42,0.9);
        color: #f8fafc;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        font-size: 0.85rem;
        text-align: center;
        z-index: 100;
        animation: hintFade 3s ease forwards;
        pointer-events: none;
    }

    @keyframes hintFade {
        0%, 70% { opacity: 1; }
        100% { opacity: 0; }
    }

    /* Swipe indicator */
    .swipe-hint {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        color: #64748b;
        font-size: 0.7rem;
        animation: swipePulse 2s ease-in-out infinite;
    }

    @keyframes swipePulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
}

/* Desktop enhancements */
@media (min-width: 769px) {
    .legend-toggle {
        display: none;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .topology-container {
        height: calc(100vh - 120px);
    }

    .vlan-bar {
        padding: 0.3rem 0.5rem;
    }

    .vlan-chip {
        padding: 0.25rem 0.4rem;
        font-size: 0.6rem;
    }

    .topology-controls {
        top: 4px;
        right: 4px;
    }

    .zoom-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* Print */
@media print {
    .vlan-bar,
    .topology-controls,
    .topology-legend,
    .topo-status-indicator,
    .legend-toggle {
        display: none !important;
    }

    .topology-container {
        height: auto;
        border: none;
    }

    .svg-topology {
        width: 100%;
        height: auto;
    }
}