/* ====================================
   RESPONSIVE / MOBILE OVERRIDES
   ====================================
   Contiene ESCLUSIVAMENTE adattamenti per schermi piccoli.
   Il CSS desktop resta nei file originali (style.css,
   main-menu.css, guanxi-statusbar.css).
   Caricato per ultimo in index.html: vince sulle media query
   mobile esistenti a parita' di specificita'.
   ==================================== */

@media (max-width: 900px) {

    /* --------------------------------
       NAVBAR GLOBALE (statusbar condivisa)
       Layout compatto a 2 righe: brand+logout / search.
       Le pill meta (Profilo/Ruolo) sono nascoste su mobile.
       -------------------------------- */
    #main-menu-slot .gx-statusbar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand logout"
            "search search";
        gap: 6px;
        padding: 6px 8px;
    }

    #main-menu-slot .gx-statusbar__meta {
        display: none;
    }

    #main-menu-slot .gx-statusbar__search {
        width: 100%;
        justify-self: stretch;
    }

    /* 16px minimo: evita lo zoom automatico dell'input su iOS */
    #main-menu-slot .gx-statusbar__search input {
        font-size: 16px;
    }

    /* --------------------------------
       NAVBAR NATIVA DEL SITO (.gx-main-menu)
       Riga 1: brand + azioni. Riga 2: link in striscia
       scrollabile orizzontalmente (nessuna navbar duplicata).
       -------------------------------- */
    .gx-main-menu-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "nav nav";
        gap: 6px 10px;
        padding: 8px 12px;
    }

    .gx-brand {
        grid-area: brand;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gx-actions {
        grid-area: actions;
        justify-content: flex-end;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .gx-actions::-webkit-scrollbar {
        display: none;
    }

    .gx-actions button,
    .gx-actions .gx-home-link-btn {
        flex: 0 0 auto;
        padding: 6px 9px;
    }

    .gx-nav {
        grid-area: nav;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .gx-nav::-webkit-scrollbar {
        display: none;
    }

    .gx-nav .gx-link {
        flex: 0 0 auto;
    }

    /* --------------------------------
       CANVAS 3D
       Il canvas e' in flusso sotto le navbar: su mobile usa
       solo l'altezza realmente disponibile, non tutto 100vh.
       --gx-menu-stack-height e' mantenuta da main-menu.js.
       -------------------------------- */
    #three-canvas {
        height: calc(100vh - var(--gx-menu-stack-height, 92px));
    }

    /* --------------------------------
       CAMERA NAVIGATION
       .home-dashboard-toggle su mobile occupa tutta la fascia
       bassa (bottom: 12px, altezza 48px): la toolbar camera
       viene sollevata sopra di essa.
       !important necessario: lo stile base di #camera-navigation
       e' iniettato a runtime da scene.js dopo questo foglio.
       -------------------------------- */
    #camera-navigation {
        bottom: 76px !important;
    }
}