/* ========================================================================== Telemix CSS — mobile.css (Shell Mobile + Overlays + Nav) ========================================================================== */ /** * Objetivo * -------- * A camada mobile é explicitamente acionada pelo .is-mobile * (definido no JS por heurística + querystring/localStorage). Assim, * o mesmo HTML serve desktop e mobile sem duplicar markup. * * Pontos chave * ------------ * - Usa grid compacto (header / content / bottom-nav) * - Evita sobreposição com bottom-nav via padding seguro (safe-area) * - Converte tabelas para cartões em breakpoints pequenos (feito em dashboard.css) */ /* ========== Shell Mobile ========== (as regras originais seguem após os aprimoramentos) */ body.is-mobile{ padding-bottom:0; } /* Viewport real em navegadores móveis modernos */ .is-mobile .app { min-height: 100dvh; height: 100dvh; /* fallback */ height: 100svh; /* iOS 15+ */ } /* Conteúdo com espaço para bottom-nav + safe-area */ .is-mobile .content.panel { padding-bottom: calc(56px + var(--safe-bottom)); overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } /* Bottom nav acima de tudo e com safe-area */ .is-mobile .bottom-nav { z-index: var(--z-sticky); padding-bottom: calc(8px + var(--safe-bottom)); } /* Touch: remove highlight azul em iOS / Android */ .is-mobile * { -webkit-tap-highlight-color: transparent; } /* Admin submenu em overlay com z-index alto */ .is-mobile .admin-subnav { z-index: var(--z-overlay); } /* ===== Regras originais (mantidas) ===== */ /* ===== MOBILE SHELL ===== */ .is-mobile .app{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr; grid-template-rows: 56px 1fr 56px; gap: 16px; padding: 8px; } .is-mobile .top.panel{ border-radius: 10px; } .is-mobile .content.panel{ padding: 8px; height: auto; overflow: auto; } /* Seções mais compactas */ .is-mobile .section{ border-radius: 10px; padding: 10px; } /* Esconde gráficos no mobile (caso o template desktop seja carregado por engano) */ .is-mobile #sectionCharts{ display: none; } /* Bottom nav */ .is-mobile .bottom-nav{ position: fixed; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 8px; justify-content: space-between; background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px; padding: 8px; } .is-mobile .bn-btn{ flex: 1; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--card-border); background: #12161e; color: var(--text); font-size: 13px; } .is-mobile .bn-btn.active{ border-color: rgba(122,162,255,.6); box-shadow: 0 0 0 4px rgba(122,162,255,.12) inset; } /* Tabelas em cartões (reforço do seu CSS responsivo) */ .is-mobile #ticketsTable tr{ padding: 10px; } /* Admin submenu overlay */ .is-mobile .admin-subnav{ position: fixed; bottom: 72px; left: 8px; right: 8px; display: none; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px; padding: 8px; } .is-mobile .admin-subnav.open{ display: flex; } .is-mobile .admin-subnav .navbtn{ padding: 10px; border-radius: 8px; border: 1px solid var(--card-border); background: #12161e; color: var(--text); text-align: left; } /* ==== PATCH v2 (mobile shell): mata qualquer overflow-x no content ==== */ .is-mobile .content.panel{ overflow-x: hidden; } /* TV button hidden on mobile */ .is-mobile #btnTV{ display:none; } /* Tickets block: no horizontal scroll */ .is-mobile #ticketsWrap{ overflow-x:hidden; } .is-mobile #ticketsTable{ width:100%; min-width:0; } /* garantia de largura total na página de chamados */ .is-mobile.tickets-page #sectionTickets, .is-mobile.tickets-page #sectionTickets .table-wrap, .is-mobile.tickets-page #sectionTickets .table{ width:100%; } /* Detalhes de chamado/projeto sem overflow lateral */ .is-mobile .ticket-detail, .is-mobile .project-detail-inline{ overflow-x:hidden; width:100%; } /* Subtabs menores com rolagem horizontal */ .is-mobile .ticket-detail .subtabs, .is-mobile .project-detail-inline .subtabs{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap:6px; } .is-mobile .ticket-detail .subtabs .subtab, .is-mobile .project-detail-inline .subtabs .subtab{ font-size:12px; padding:6px 10px; } /* esconde o logo da sidebar no mobile */ .is-mobile .sidebar .logo-row{ display:none; } .is-mobile .sidebar{ padding-top:56px; } /* Tickets & Projects pages: stable flex layout without double scroll */ .is-mobile.is-mobile.tickets-page .content.panel, .is-mobile.projects-page .content.panel{ display:flex; flex-direction:column; overflow:hidden; } /* ====================================================================== MOBILE: Estado 'project-detail-only' - Cópia 1:1 do 'tickets-detail-only' para garantir consistência visual ====================================================================== */ .is-mobile.project-detail-only #sectionProjects { display: none !important; } .is-mobile.project-detail-only .content.panel { display: flex; flex-direction: column; align-items: stretch !important; overflow: hidden; } .is-mobile.project-detail-only #sectionProjectDetail, .is-mobile.project-detail-only #sectionProjectDetail .ticket-detail { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; align-self: stretch; } .is-mobile.project-detail-only #sectionProjectDetail .ticket-detail.panel { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; align-self: stretch !important; padding: var(--space-3); overflow-y: auto; } .is-mobile.project-detail-only #sectionProjectDetail.section { display: block !important; margin-top: var(--space-3); flex: 1 1 auto; min-height: 40vh; max-height: none; /* Remove o limite de altura do CSS de desktop */ } /* Projects carousel: cards adapt to viewport width */ .is-mobile #sectionProjects .project{ flex:0 0 100%; max-width:100%; scroll-snap-align:start; } /* Refactor (fallback): manter container visível e esconder apenas partes pesadas */ .is-mobile.tickets-page #sectionTickets{ display: block; } .is-mobile.tickets-page #ticketsWrap, .is-mobile.tickets-page #ticketsTable, .is-mobile.tickets-page .table-wrap, /* removed: do not hide ticket-detail on mobile by default */ .is-mobile.tickets-page #sectionTicketDetail{ display:none; } /* Tickets summary block ESCONDIDO na aba Chamados (mobile) por padrão */ .is-mobile.tickets-page #ticketsSummaryBlock{ display:none; } .is-mobile.tickets-page .tickets-summary{ display:block !important; } /* === MOBILE PATCH v7: FORCE full-width detail panel on mobile === */ .is-mobile.tickets-page .content.panel{ display:flex; flex-direction:column; align-items:stretch !important; } /* override any generic .panel width like width:min(96vw,900px) */ .is-mobile.tickets-page #sectionTicketDetail .ticket-detail.panel{ width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; align-self: stretch !important; } /* also ensure the #sectionTicketDetail section itself stretches */ .is-mobile.tickets-page #sectionTicketDetail{ width: 100% !important; max-width: 100% !important; align-self: stretch !important; } /* Mobile Tickets: detalhe com padding, rolagem própria e ocupando o resto */ .is-mobile.tickets-page #sectionTicketDetail.section{ margin-top: var(--space-3); } .is-mobile #sectionTicketDetail{ display:none; } .is-mobile.show-detail #sectionTicketDetail{ display:block; } .is-mobile.tickets-page .content.panel{ display:flex; flex-direction:column; align-items:stretch; } .is-mobile.tickets-page #sectionTicketDetail, .is-mobile.tickets-page #sectionTicketDetail .ticket-detail{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; align-self:stretch; } .is-mobile.tickets-page #sectionTicketDetail .ticket-detail{ padding: var(--space-3); min-height: 40vh; max-height: calc(100dvh - var(--space-6) - 40vh); overflow-y:auto; } /* Chamados (mobile): detalhes logo abaixo do resumo, com respiro e preenchimento */ .is-mobile.tickets-page .content.panel{ display:flex; flex-direction:column; align-items:stretch; } .is-mobile.tickets-page #sectionTicketDetail.section{ margin-top: var(--space-3); /* espaço entre resumo e detalhe */ } /* Detalhe ocupa o resto do espaço, com rolagem própria */ .is-mobile.tickets-page #sectionTicketDetail{ flex: 1 1 auto; min-height: 40vh; /* espaço mínimo */ } .is-mobile.tickets-page #sectionTicketDetail .ticket-detail{ padding: var(--space-3); /* padding interno do card de detalhe */ box-sizing: border-box; max-height: calc(100dvh - 40vh - var(--space-6)); /* resto da tela abaixo do resumo */ overflow-y: auto; /* rolagem própria */ } .is-mobile.show-detail #sectionTicketDetail .ticket-detail{display:block;} /* Espaço entre o resumo e o detalhe (mobile) */ .is-mobile.tickets-page #ticketsSummaryBlock{ margin-bottom: var(--space-3); } /* ====================================================================== MOBILE: Estado 'tickets-detail-only' (REATORADO) - Garante que o painel de detalhes ocupe 100% da altura e tenha rolagem interna. ====================================================================== */ .is-mobile.tickets-detail-only .content.panel, .is-mobile.project-detail-only .content.panel { display: flex; flex-direction: column; overflow: hidden; /* O painel principal não rola */ } .is-mobile.tickets-detail-only #sectionTicketDetail, .is-mobile.project-detail-only #sectionProjectDetail { display: flex !important; flex: 1; min-height: 0; } .is-mobile.tickets-detail-only #sectionTicketDetail .ticket-detail.panel, .is-mobile.project-detail-only #sectionProjectDetail .ticket-detail.panel { width: 100%; flex: 1; min-height: 0; /* A rolagem será controlada pelo .td-body e .subtab-panel abaixo */ } /* ====================================================================== MOBILE: Layout da Página de Projetos - Resumo (carrossel) em cima, com altura limitada. - Detalhes do projeto embaixo, preenchendo o resto do espaço e com scroll. ========================================================================== */ .is-mobile.projects-page .content.panel { display: flex; flex-direction: column; overflow: hidden; /* Evita scroll duplo */ } .is-mobile.projects-page #sectionProjects { flex: 0 0 auto; /* Não cresce, não encolhe */ max-height: 45vh; /* Altura máxima para a lista de resumos */ overflow-y: auto; } .is-mobile.projects-page #sectionProjectDetail { flex: 1 1 auto; /* Ocupa o espaço restante */ overflow-y: auto; /* Scroll apenas para os detalhes */ margin-top: var(--space-3); /* Padding entre resumo e detalhes */ padding-bottom: 16px; /* Espaço no final */ } /* Estilo do card de detalhes do projeto, similar ao de chamados */ .is-mobile.projects-page #sectionProjectDetail .project-detail-inline { padding: var(--space-3); box-sizing: border-box; height: 100%; width: 100%; } /* Adiciona a classe .has-internal-scroll ao painel de detalhes */ /* ====================================================================== MOBILE: Posicionamento estático dos logos de fundo ====================================================================== */ body.is-mobile::before { animation: none !important; /* Garante que a animação pare */ background-image: url("../img/telemix.png"), url("../img/emd.png"); background-repeat: no-repeat; background-size: 240px, 200px; /* Tamanhos maiores */ background-position: center 60%, /* Telemix centralizado, 60% do topo */ center 80%; /* EMD centralizado, 80% do topo */ opacity: 0.1; } .is-mobile.tickets-detail-only #sectionTicketDetail .ticket-detail.panel, .is-mobile.project-detail-only #sectionProjectDetail .ticket-detail.panel { /* A rolagem agora é controlada pela classe .has-internal-scroll do dashboard.css */ }