/* Layout Principal SPA */ .app-container { display: flex; min-height: 100vh; } /* ==== SIDEBAR ==== */ .sidebar { width: 260px; background-color: var(--bg-dark); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform var(--transition-normal); z-index: var(--z-sidebar); /* see style.css z-index hierarchy */ } .sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); } .logo { display: flex; align-items: center; gap: 0.75rem; color: var(--primary-color); } .logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text-bright); } .nav-links { list-style: none; padding: 1rem 0; flex: 1; overflow-y: auto; } .nav-link { display: block; padding: 0.75rem 1.5rem; color: var(--text-muted); font-weight: 500; border-left: 3px solid transparent; transition: all var(--transition-fast); } .nav-link:hover { color: var(--text-bright); background-color: var(--bg-card-hover); } .nav-link.active { color: var(--primary-color); background-color: rgba(46, 160, 67, 0.1); border-left-color: var(--primary-color); } .sidebar-footer { padding: 1.5rem; border-top: 1px solid var(--border-color); } /* ==== CONTEUDO PRINCIPAL ==== */ .main-content { flex: 1; display: flex; flex-direction: column; position: relative; width: 100%; } .topbar { box-sizing: border-box; min-height: 60px; background-color: var(--bg-darker); display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 2rem; /* v2.4.96: removido backdrop-filter:blur(10px). O fundo (--bg-darker) é OPACO, então o blur era 100% invisível — mas, num elemento sticky, o navegador re-borrava o backdrop a CADA frame de scroll (jank pesado no iOS). Tirar = zero mudança visual + scroll bem mais leve. */ flex-wrap: nowrap; overflow: visible; gap: 4px; /* v2.7.71: topbar FIXED (era sticky). Com sticky, ao puxar além do topo (elástica do overscroll) a topbar descia junto e cruzava o back-header (que é fixed) — deixando os cabeçalhos desalinhados. Fixed mantém a topbar pinada no topo; só o conteúdo dá a elástica. O .main-content ganha padding-top (dinâmico em _reflowChrome) pra compensar a topbar sair do fluxo. */ position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); /* see style.css z-index hierarchy */ } /* compensação default da topbar fixa (refinada por _reflowChrome com a altura real) */ .main-content { padding-top: 76px; } /* ── Safe-area (só no app NATIVO) ──────────────────────────────────────────── No app Capacitor o ganha .sp-native (index.html) + o meta viewport tem viewport-fit=cover, então env(safe-area-inset-*) passa a valer. Empurra o CONTEÚDO da topbar pra baixo da status bar / ilha dinâmica (o fundo escuro da topbar cobre a faixa, o logo/hambúrguer descem). _reflowChrome mede a altura real da topbar já com o inset → o padding-top do .main-content se auto-corrige. Na WEB não há .sp-native → regra inerte (zero efeito). */ html.sp-native .topbar { /* o inset reserva ~59px mas a status bar/ilha ocupam menos — puxamos 12px pra cima, o máximo antes de a topbar encavalar no relógio. max() protege sem notch (inset=0). */ padding-top: max(2px, calc(env(safe-area-inset-top, 0px) - 12px)) !important; padding-left: calc(2rem + env(safe-area-inset-left, 0px)); padding-right: calc(2rem + env(safe-area-inset-right, 0px)); } /* Android (targetSdk 36): env(safe-area-inset-top) volta 0 no WebView e o Capacitor já inseta o WebView ABAIXO da status bar de 74px — a topbar NÃO precisa cobrir a status bar (isso é coisa do iOS/notch). Mas o piso de 2px deixava o relógio/rede/ bateria COLADOS no conteúdo do topbar (agora que a faixa da status bar é #111114, a mesma cor do topbar, sumiu a separação e parecia CORTE). Damos uma folga real: 14px quando o inset não é reportado (caso Capacitor-inset), OU o inset de verdade se algum device reportar (edge-to-edge com cutout) — max() cobre os dois. iOS mantém a fórmula com env acima. */ html.sp-android .topbar { /* v4.3.30: 14px→8px — o dono comparou com o iPhone e achou o cabeçalho longe demais do relógio no Android. 8px mantém a separação (faixa da status bar é #111114 = cor do topbar) sem o gap exagerado. */ padding-top: max(env(safe-area-inset-top, 0px), 8px) !important; /* ── PWA INSTALADO (Add to Home Screen, display:standalone) ───────────── No iOS o meta apple-mobile-web-app-status-bar-style=black-translucent deixa a status bar SOBRE o conteúdo; sem safe-area o relógio/rede/bateria encavalam no logo da topbar (bug reportado por quem instalou o app). O ajuste de safe-area da topbar só existia pra .sp-native (app Capacitor) — o PWA não tem essa classe. Escopo :not(.sp-native) pra NÃO mexer no app nativo. Inerte no browser comum (não casa display-mode:standalone) e sem notch (env=0). */ @media (display-mode: standalone) { html:not(.sp-native) .topbar { padding-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important; padding-left: calc(2rem + env(safe-area-inset-left, 0px)) !important; padding-right: calc(2rem + env(safe-area-inset-right, 0px)) !important; } html:not(.sp-native) .main-content { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* respiro no rodapé pra o conteúdo não sumir sob o indicador de home (iPhone sem botão) */ html.sp-native .main-content { padding-bottom: calc(env(safe-area-inset-bottom, 0px)); } /* v4.3.20: modal de login (e outros full-screen) no app NATIVO encavalava o título "Entrar no scoreplace" no relógio/ilha. No mobile o .modal é full-screen (position:fixed;top:0 em responsive.css) e o .modal-header é sticky no topo. DIAGNOSTICADO no simulador: env(safe-area-inset-top) volta 0 no WKWebView pra este contexto (fixed) — por isso um PISO fixo (50px) garante o afastamento; max() usa o inset REAL quando o device o reporta (telas com ilha ~59px). Empurra só o CONTEÚDO do header (o modal segue cobrindo a tela toda, sem a topbar vazar). Inerte na WEB (sem .sp-native). */ html.sp-native .modal-overlay.active .modal { padding-bottom: env(safe-area-inset-bottom, 0px); } html.sp-native .modal-overlay.active .modal-header { padding-top: max(env(safe-area-inset-top, 0px), 50px) !important; } .page-title { display: flex; align-items: center; gap: 0.75rem; } .page-title h1 { font-size: 1.4rem; font-weight: 600; margin: 0; white-space: nowrap; } .page-title svg { width: 48px !important; height: 48px !important; flex-shrink: 0; } .view-container { flex: 1; min-width: 0; padding: 2rem; animation: fadeIn 0.3s ease; } /* ==== RESPONSIVE LAYOUT ==== */ /* Tablet: 768px - 1199px */ @media (min-width: 768px) and (max-width: 1199px) { .sidebar { width: 240px; } .topbar { padding: 0 1.5rem; } .view-container { padding: 1.5rem; } } /* Mobile: max-width 767px */ @media (max-width: 767px) { .app-container { flex-direction: column; } .main-content { flex-direction: column; width: 100%; max-width: 100%; margin: 0; padding: 0; } .view-container { padding: 1rem; } } /* Animações */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* overflow-x moved from .view-container to body — clip on ancestor breaks position:sticky */