/**
 * Responsive Styles
 * Media queries for mobile and tablet devices
 */

@media (max-width: 768px) {
    .import-export-bar {
        flex-wrap: wrap;
    }

    .diagram {
        flex-direction: column;
        gap: 40px;
    }

    .cable {
        width: 4px;
        height: 100px;
        padding: 0 40px;
        margin: -3px 0;
    }

    .cable-line {
        width: 4px;
        height: 100%;
        background: var(--primary);
    }

    .cable:hover .cable-line {
        width: 6px;
    }

    .cable.selected .cable-line {
        width: 6px;
    }

    .cable-info {
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
    }

    .cable-arrow {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -10px;
        transform: translateX(-50%);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 10px solid var(--primary);
    }
}