/**
 * @file responsive.css
 * @description Media queries para layouts mobile e touch do Superchart.
 *
 * Contém:
 *  - @media (max-width: 740px): menu mobile, leftbar horizontal, etc.
 *  - @media (hover: none): torna .panel-close sempre visível em touch
 *
 * Depende de: variables.css, topbar.css, panels.css, components.css
 */

/* ── Mobile layout ──────────────────────────────────────── */

@media (max-width: 740px) {
    .brand { min-width: auto; }

    .workspace {
        flex-direction: column;
    }

    .leftbar {
        width: auto;
        height: auto;
        flex-direction: row;
        justify-content: flex-start;
    }

    .controls {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
    }

    /* Hide heatmap toggle on small screens */
    #toggleHeatmap {
        white-space: nowrap;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        padding: 8px 10px;
        display: none;
    }

    #mobileMenuBtn {
        display: inline-flex;
    }

    /* Collapse controls-menu into a dropdown on mobile */
    .controls-menu {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        width: min(560px, calc(100vw - 24px));
        padding: 10px;
        border-radius: 12px;
        border: 1px solid var(--panel-border);
        background: var(--popover-bg);
        box-shadow: var(--shadow);
        backdrop-filter: blur(10px);
        z-index: 60;
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        max-height: calc(100vh - 86px);
    }

    .controls-menu.open {
        display: flex;
    }

    .controls-menu .menu-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        flex: 1 1 auto;
        overflow: auto;
        padding-right: 2px;
    }

    .controls-menu .menu-section {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
    }

    .controls-menu .menu-divider {
        display: block;
        height: 1px;
        background: rgba(255,255,255,0.08);
        width: 100%;
        margin: 2px 0;
    }

    .controls-menu .menu-footer {
        margin-top: auto;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.08);
        justify-content: center;
    }
}

/* ── Touch devices: always show panel-close ────────────── */

@media (hover: none) {
    .panel-label .panel-close {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        pointer-events: auto;
    }
}