/* ============================================================
   SIGWEB MOBILE - Interface Otimizada para Aplicativo
   Desenvolvido para experiência mobile profissional
   ============================================================ */

/* Detectar se é mobile/app */
/* NOTA: (pointer: coarse) removido — impedia que o modo desktop do navegador mobile funcionasse */
@media screen and (max-width: 768px), 
       screen and (max-height: 600px) {
    
    /* ============================================================
       RESET E BASE MOBILE
       ============================================================ */
    
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    body {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
        overscroll-behavior: none;
    }
    
    /* ============================================================
       HEADER MOBILE - Compacto e Funcional
       ============================================================ */
    
    #sigwebHeader {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 0 8px !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: linear-gradient(135deg, #0d3b66 0%, #1a5a8a 100%) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    }
    
    #sigwebHeader .header-logo {
        font-size: 18px !important;
        font-weight: 700 !important;
        flex-shrink: 0;
    }
    
    /* Esconder navegação desktop */
    #sigwebHeader .header-nav {
        display: none !important;
    }
    
    /* Header right - simplificado */
    #sigwebHeader .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    #sigwebHeader .header-right #userInfo {
        display: none !important;
    }
    
    #sigwebHeader .header-right .connection-status {
        display: none !important;
    }
    
    #sigwebHeader .header-right #darkModeToggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ============================================================
       MAPA - TELA CHEIA
       ============================================================ */
    
    #map {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        z-index: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Controles do Leaflet */
    .leaflet-control-container .leaflet-top.leaflet-left {
        top: 10px !important;
        left: 10px !important;
    }
    
    .leaflet-control-zoom {
        margin: 0 !important;
        border: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
        border-radius: 12px !important;
        overflow: hidden;
    }
    
    .leaflet-control-zoom a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 20px !important;
        background: white !important;
    }
    
    /* Esconder controles desnecessários no mobile */
    .leaflet-control-scale,
    .leaflet-control-minimap,
    .leaflet-control-layers {
        display: none !important;
    }
    
    /* ============================================================
       PAINEL DE CAMADAS - SLIDE UP MOBILE
       ============================================================ */
    
    #customLayerPanel {
        position: fixed !important;
        bottom: 70px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 60vh !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 9000 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
        background: white !important;
    }
    
    #customLayerPanel.mobile-open {
        transform: translateY(0) !important;
    }
    
    #customLayerPanel .panel-header {
        padding: 16px 20px !important;
        border-bottom: 1px solid #e0e0e0;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    #customLayerPanel .panel-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
    }
    
    #customLayerPanel .basemaps-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    
    #customLayerPanel .basemap-btn {
        padding: 12px 4px !important;
        font-size: 11px !important;
    }
    
    #customLayerPanel .basemap-icon {
        font-size: 24px !important;
    }
    
    /* ============================================================
       FERRAMENTAS LATERAIS - ESCONDER E MOVER PARA BOTTOM BAR
       ============================================================ */
    
    #extraToolsPanel {
        display: none !important;
    }
    
    #leftSidebar {
        display: none !important;
    }
    
    #sidebarToggleBtn {
        display: none !important;
    }
    
    /* ============================================================
       BARRA INFERIOR MOBILE - NAVEGAÇÃO PRINCIPAL
       ============================================================ */
    
    .mobile-bottom-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 70px !important;
        background: white !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 8px !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        box-shadow: 0 -2px 20px rgba(0,0,0,0.1) !important;
        z-index: 9998 !important;
        border-top: 1px solid #e0e0e0;
    }
    
    .mobile-bottom-bar .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        min-width: 60px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .mobile-bottom-bar .nav-item:active {
        background: rgba(13, 59, 102, 0.1) !important;
        transform: scale(0.95) !important;
    }
    
    .mobile-bottom-bar .nav-item.active {
        color: #0d3b66 !important;
    }
    
    .mobile-bottom-bar .nav-item .nav-icon {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-bottom-bar .nav-item .nav-label {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #666 !important;
    }
    
    .mobile-bottom-bar .nav-item.active .nav-label {
        color: #0d3b66 !important;
    }
    
    /* ============================================================
       FAB - BOTÃO DE AÇÃO FLUTUANTE
       ============================================================ */
    
    .mobile-fab {
        position: fixed !important;
        bottom: 90px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #0d3b66 0%, #1a5a8a 100%) !important;
        color: white !important;
        font-size: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(13, 59, 102, 0.4) !important;
        z-index: 9000 !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-fab:active {
        transform: scale(0.9) !important;
    }
    
    .mobile-fab-menu {
        position: fixed !important;
        bottom: 160px !important;
        right: 16px !important;
        display: none;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 8999 !important;
    }
    
    .mobile-fab-menu.open {
        display: flex !important;
    }
    
    .mobile-fab-menu .fab-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        background: white !important;
        border-radius: 25px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        border: none !important;
    }
    
    .mobile-fab-menu .fab-item:active {
        background: #f5f5f5 !important;
        transform: scale(0.95) !important;
    }
    
    .mobile-fab-menu .fab-item .fab-icon {
        font-size: 20px !important;
    }
    
    .mobile-fab-menu .fab-item .fab-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        white-space: nowrap !important;
    }
    
    /* ============================================================
       MODAIS MOBILE - FULL SCREEN / BOTTOM SHEET
       ============================================================ */
    
    /* Modal overlay genérico */
    .modal-overlay-mobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 10000 !important;
        display: none;
    }
    
    .modal-overlay-mobile.open {
        display: block !important;
    }
    
    /* Modais como Bottom Sheet */
    .goto-modal,
    .buffer-modal,
    #iptuModal,
    #itbiModal,
    #reportModal,
    #memorialModal,
    #alvaraModal,
    #ouvidoriaAdminModal,
    #historyModal,
    #adminPanel,
    .ouvidoria-admin-modal {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 20px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 10001 !important;
        overflow-y: auto !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.2) !important;
    }
    
    .goto-modal.active,
    .buffer-modal.active,
    #iptuModal.active,
    #itbiModal.active,
    #reportModal.active,
    #memorialModal.active,
    #alvaraModal.active,
    #ouvidoriaAdminModal.active,
    #historyModal.active,
    #adminPanel.active,
    .ouvidoria-admin-modal.active {
        transform: translateY(0) !important;
    }
    
    /* Handle do bottom sheet */
    .goto-modal::before,
    .buffer-modal::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
    }
    
    /* Modal de IPTU/ITBI - ajustes */
    #iptuModal .modal-content,
    #itbiModal .modal-content {
        max-height: 75vh !important;
        overflow-y: auto !important;
    }
    
    /* ============================================================
       BARRA DE BUSCA MOBILE
       ============================================================ */
    
    .mobile-search-bar {
        position: fixed !important;
        top: 64px !important;
        left: 8px !important;
        right: 8px !important;
        height: 48px !important;
        background: white !important;
        border-radius: 24px !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.15) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 16px !important;
        z-index: 8000 !important;
        gap: 12px !important;
    }
    
    .mobile-search-bar input {
        flex: 1 !important;
        border: none !important;
        outline: none !important;
        font-size: 15px !important;
        background: transparent !important;
    }
    
    .mobile-search-bar .search-icon {
        font-size: 20px !important;
        color: #999 !important;
    }
    
    .mobile-search-bar .search-clear {
        font-size: 18px !important;
        color: #999 !important;
        cursor: pointer !important;
        display: none;
    }
    
    .mobile-search-bar .search-clear.visible {
        display: block !important;
    }
    
    /* ============================================================
       PAINEL DE ATRIBUTOS MOBILE
       ============================================================ */
    
    #attributePanel {
        position: fixed !important;
        bottom: 70px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-height: 50vh !important;
        border-radius: 20px 20px 0 0 !important;
        z-index: 9500 !important;
        transform: translateY(100%);
        transition: transform 0.3s ease !important;
    }
    
    #attributePanel.mobile-open {
        transform: translateY(0) !important;
    }
    
    /* ============================================================
       COORDENADAS MOBILE
       ============================================================ */
    
    #coordinateDisplay {
        position: fixed !important;
        bottom: 78px !important;
        left: 8px !important;
        right: auto !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
        background: rgba(0,0,0,0.7) !important;
        color: white !important;
        z-index: 8500 !important;
    }
    
    /* ============================================================
       BUSCA GLOBAL MOBILE
       ============================================================ */
    
    .global-search-overlay {
        padding: 0 !important;
    }
    
    .global-search-box {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        padding: 56px 16px 16px !important;
    }
    
    .global-search-input {
        font-size: 16px !important;
        padding: 14px !important;
    }
    
    /* ============================================================
       LOADING E TOASTS
       ============================================================ */
    
    #toastContainer {
        bottom: 80px !important;
        left: 16px !important;
        right: 16px !important;
    }
    
    .toast {
        font-size: 14px !important;
        padding: 14px 18px !important;
    }
    
    /* ============================================================
       FILTROS E CONTROLES DIVERSOS
       ============================================================ */
    
    /* Stats badge */
    .stats-badge-floating {
        display: none !important;
    }
    
    /* Quick filters */
    .quick-filters-panel {
        position: fixed !important;
        top: 120px !important;
        left: 8px !important;
        right: 8px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* ============================================================
       MENU HAMBÚRGUER MOBILE
       ============================================================ */
    
    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255,255,255,0.2) !important;
        border: none !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 20px !important;
    }
    
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 9999 !important;
        display: none;
    }
    
    .mobile-menu-overlay.open {
        display: block !important;
    }
    
    .mobile-menu-drawer {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        background: white !important;
        z-index: 10000 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: -4px 0 20px rgba(0,0,0,0.2) !important;
    }
    
    .mobile-menu-drawer.open {
        transform: translateX(0) !important;
    }
    
    .mobile-menu-header {
        padding: 20px !important;
        background: linear-gradient(135deg, #0d3b66 0%, #1a5a8a 100%) !important;
        color: white !important;
    }
    
    .mobile-menu-header h3 {
        margin: 0 0 8px !important;
        font-size: 18px !important;
    }
    
    .mobile-menu-header p {
        margin: 0 !important;
        font-size: 13px !important;
        opacity: 0.8 !important;
    }
    
    .mobile-menu-items {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
    
    .mobile-menu-item {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 4px !important;
        cursor: pointer !important;
        transition: background 0.2s ease !important;
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        text-align: left !important;
    }
    
    .mobile-menu-item:active {
        background: #f5f5f5 !important;
    }
    
    .mobile-menu-item .menu-icon {
        font-size: 22px !important;
    }
    
    .mobile-menu-item .menu-label {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #333 !important;
    }
    
    .mobile-menu-divider {
        height: 1px !important;
        background: #e0e0e0 !important;
        margin: 12px 0 !important;
    }
    
    .mobile-menu-footer {
        padding: 16px 20px !important;
        border-top: 1px solid #e0e0e0 !important;
    }
    
    .mobile-menu-footer .logout-btn {
        width: 100% !important;
        padding: 14px !important;
        background: #f44336 !important;
        color: white !important;
        border: none !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    
    /* ============================================================
       AJUSTES PARA DARK MODE MOBILE
       ============================================================ */
    
    body.dark-mode .mobile-bottom-bar {
        background: #1e1e1e !important;
        border-top-color: #333 !important;
    }
    
    body.dark-mode .mobile-bottom-bar .nav-label {
        color: #aaa !important;
    }
    
    body.dark-mode .mobile-search-bar {
        background: #2d2d2d !important;
    }
    
    body.dark-mode .mobile-search-bar input {
        color: white !important;
    }
    
    body.dark-mode .mobile-menu-drawer {
        background: #1e1e1e !important;
    }
    
    body.dark-mode .mobile-menu-item .menu-label {
        color: #eee !important;
    }
    
    body.dark-mode .mobile-fab-menu .fab-item {
        background: #2d2d2d !important;
    }
    
    body.dark-mode .mobile-fab-menu .fab-label {
        color: #eee !important;
    }
    
    body.dark-mode #customLayerPanel {
        background: #1e1e1e !important;
    }
    
    /* ============================================================
       ANIMAÇÕES
       ============================================================ */
    
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    @keyframes slideDown {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
}

/* ============================================================
   BOTÃO MODO DESKTOP - Destaque no mobile
   ============================================================ */

@media screen and (max-width: 768px) {

    #desktopModeToggle {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: linear-gradient(135deg, #2196F3, #1565C0) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 7px 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(33,150,243,0.5) !important;
        white-space: nowrap !important;
    }

    #desktopModeToggle::after {
        content: " Desktop";
        font-size: 12px;
        font-weight: 600;
    }

    #desktopModeToggle:active {
        transform: scale(0.96) !important;
    }
}

/* ============================================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================================ */

@media screen and (max-height: 450px) and (orientation: landscape) {
    #sigwebHeader {
        height: 48px !important;
    }
    
    #map {
        top: 48px !important;
        bottom: 56px !important;
    }
    
    .mobile-bottom-bar {
        height: 56px !important;
    }
    
    .mobile-bottom-bar .nav-item .nav-icon {
        font-size: 20px !important;
    }
    
    .mobile-bottom-bar .nav-item .nav-label {
        font-size: 9px !important;
    }
}