/* ============================================================
   DETECTA V3.3 - MOBILE
   Aplicado apenas em telas <= 768px
   ============================================================ */

#mobile-menu-btn,
#mobile-menu-overlay,
#mobile-bottom-bar {
    display: none;
}

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* ============================
       SIDEBAR MOBILE
       ============================ */

    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -290px !important;

        width: 280px !important;
        height: 100dvh !important;

        z-index: 5000 !important;

        transition: left 0.25s ease;

        box-shadow:
            5px 0 20px rgba(0,0,0,0.55);
    }

    #sidebar.mobile-open {
        left: 0 !important;
    }

    #logo-area {
        padding: 12px 10px !important;
    }

    #logo {
        width: 75px !important;
    }

    #logo-area h2 {
        margin-top: 4px !important;
        font-size: 18px !important;
    }

    #logo-area span {
        font-size: 10px !important;
    }

    #sidebar h3 {
        padding: 9px 15px !important;
        font-size: 12px !important;
    }

    #sidebar hr {
        margin: 5px 10px !important;
    }

    .menu-item {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }


    /* ============================
       OVERLAY ESCURO DO MENU
       ============================ */

    #mobile-menu-overlay {
        display: block;

        position: fixed;
        inset: 0;

        background: rgba(0,0,0,0.50);

        z-index: 4900;

        opacity: 0;
        visibility: hidden;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease;
    }

    #mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* ============================
       TOPBAR
       ============================ */

    #topbar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        height: 52px !important;

        z-index: 4000 !important;

        padding:
            0 10px
            0 56px !important;

        font-size: 14px !important;
    }

    #satinfo {
        font-size: 11px !important;
    }


    /* ============================
       BOTÃO HAMBÚRGUER
       ============================ */

    #mobile-menu-btn {
        display: flex;

        position: fixed;

        top: 7px;
        left: 8px;

        width: 38px;
        height: 38px;

        align-items: center;
        justify-content: center;

        z-index: 6000;

        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 7px;

        background: rgba(15,23,42,0.92);

        color: white;

        font-size: 25px;
        line-height: 1;

        cursor: pointer;

        box-shadow:
            0 2px 8px rgba(0,0,0,0.35);
    }


    /* ============================
       MAPA
       ============================ */

    #map {
        position: fixed !important;

        top: 52px !important;
        left: 0 !important;
        right: 0 !important;

        bottom: 104px !important;

        width: 100% !important;
    }


    /* ============================
       TIMELINE
       ============================ */

    #timeline {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;

        bottom: 54px !important;

        height: 50px !important;

        z-index: 3500 !important;

        font-size: 11px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        justify-content: flex-start !important;

        padding:
            0 10px !important;
    }


    /* ============================
       PLAYER GOES
       ============================ */

    #goes-player {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;

        bottom: 112px !important;

        min-width: 0 !important;
        max-width: none !important;

        z-index: 4200 !important;

        padding: 7px !important;
    }

    .goes-player-title {
        font-size: 10px !important;
        gap: 5px !important;
        margin-bottom: 4px !important;
    }

    .goes-player-controls {
        display: grid !important;

        grid-template-columns:
            repeat(5, 1fr);

        gap: 4px !important;
    }

    .goes-player-controls button {
        width: 100% !important;
        height: 32px !important;

        padding: 0 4px !important;

        font-size: 0 !important;
    }

    #goes-step-prev::after {
        content: "◀";
        font-size: 15px;
    }

    #goes-play::after {
        content: "▶";
        font-size: 15px;
    }

    #goes-pause::after {
        content: "❚❚";
        font-size: 13px;
    }

    #goes-stop::after {
        content: "■";
        font-size: 13px;
    }

    #goes-step-next::after {
        content: "▶";
        font-size: 15px;
    }

    #goes-frame-counter {
        grid-column:
            1 / -1;

        width: 100% !important;

        margin: 1px 0 0 0 !important;

        font-size: 10px !important;
    }


    /* ============================
       LEAFLET
       ============================ */

    .leaflet-control-zoom {
        margin-top: 10px !important;
    }

    .leaflet-control-attribution {
        max-width: 170px;

        font-size: 7px !important;

        overflow: hidden;
    }


    /* ============================
       BARRA INFERIOR
       ============================ */

    #mobile-bottom-bar {
        display: flex;

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        height: 54px;

        z-index: 4500;

        background:
            rgba(15,23,42,0.96);

        border-top:
            1px solid rgba(255,255,255,0.15);

        box-shadow:
            0 -3px 10px rgba(0,0,0,0.40);
    }

    .mobile-bottom-btn {
        flex: 1;

        border: none;

        border-right:
            1px solid rgba(255,255,255,0.08);

        background: transparent;

        color: white;

        font-size: 10px;
        font-weight: 600;

        padding: 4px 2px;

        cursor: pointer;

        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 2px;
    }

    .mobile-bottom-btn .mobile-icon {
        font-size: 19px;
        line-height: 20px;
    }

    .mobile-bottom-btn:active,
    .mobile-bottom-btn.mobile-active {
        background: #25C7A8;
        color: #0F172A;
    }


    /* ============================
       CELULAR PEQUENO
       ============================ */

    @media (max-width: 390px) {

        #topbar {
            font-size: 12px !important;
        }

        #satinfo {
            font-size: 9px !important;
        }

        .mobile-bottom-btn {
            font-size: 9px;
        }

        .mobile-bottom-btn .mobile-icon {
            font-size: 17px;
        }
    }


    /* ============================
       MODO PAISAGEM
       ============================ */

    @media (orientation: landscape)
           and (max-height: 500px) {

        #topbar {
            height: 44px !important;
        }

        #mobile-menu-btn {
            top: 4px;
            width: 35px;
            height: 35px;
        }

        #map {
            top: 44px !important;
            bottom: 50px !important;
        }

        #timeline {
            display: none !important;
        }

        #mobile-bottom-bar {
            height: 50px;
        }

        #goes-player {
            bottom: 58px !important;
        }
    }
}



/* ============================================================
   CORREÇÃO PLAYER GOES - MOBILE
   ============================================================ */

@media (max-width: 768px) {

    #goes-player {
        position: fixed !important;

        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 112px !important;

        width: auto !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: 105px !important;

        min-width: 0 !important;
        max-width: none !important;

        padding: 7px 9px !important;

        overflow: hidden !important;

        border-radius: 8px !important;

        z-index: 4200 !important;
    }

    .goes-player-title {
        height: 20px !important;
        margin: 0 0 5px 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        font-size: 10px !important;
    }

    .goes-player-controls {
        display: flex !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        height: 34px !important;

        gap: 4px !important;
    }

    .goes-player-controls button {
        flex: 1 !important;

        width: auto !important;
        min-width: 0 !important;

        height: 34px !important;

        padding: 0 !important;
    }

    #goes-frame-counter {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 4px !important;

        width: 100% !important;

        margin: 0 !important;

        text-align: center !important;

        font-size: 10px !important;
    }

}