/* =====================================================
   CAPACITOR-OVERRIDES.CSS - GerPay
   Correções de layout para o APK (Capacitor WebView).
   
   Utiliza env(safe-area-inset-*) que retorna 0px em
   browsers normais, mas valores reais em dispositivos
   com notch/status bar (APK Capacitor).
   
   NÃO afeta a versão web/browser (graceful degradation).
   ===================================================== */

/* ==========================================
   1. LOGIN PAGE - Safe Area
   ========================================== */
html.capacitor body.gerpay-login-page {
    /* Push flex container content down to respect status bar */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================
   2. HEADER FIXOS (Produtos / Venda / Relatório)
   Os headers .app-header e .mobile-header têm
   position:fixed e height:60px. O safe-area-inset-top
   precisa ser somado ao padding interno.
   
   O height vira auto para acomodar o padding extra.
   ========================================== */
html.capacitor .app-header,
html.capacitor .mobile-header {
    height: auto !important;
    min-height: 60px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    padding-bottom: 10px !important;
}

/* ==========================================
   3. COMPENSAR BODY PADDING-TOP
   
   Produtos / Venda têm padding-top:60px no body
   para o espaço do header fixo. Com o header agora
   maior, precisamos somar o safe-area.
   
   Utilizamos os seletores especificados de cada CSS 
   de página em vez de um body genérico:
   ========================================== */

/* Relatório: .main-content que não tem padding-top 
   específico precisa compensar pois o header é sticky
   dentro de relatorio_mobile.css */

/* ==========================================
   4. BOTTOM NAVIGATION
   
   PROBLEMA: As páginas Produtos e Venda usam
   <nav class="bottom-nav"> com <a class="nav-item">
   mas NÃO definem CSS para .bottom-nav.
   O .nav-item é estilizado apenas no contexto do
   sidebar, causando conflito.
   
   Solução: Definir nav.bottom-nav aqui com
   estilos idênticos ao dashboard.
   ========================================== */
html.capacitor nav.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 10px 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 15px) + 20px) !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.06);
    z-index: 100;
    min-height: 85px;
}

html.capacitor nav.bottom-nav::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* Itens do bottom nav - .nav-item dentro de nav.bottom-nav
   (sobrescreve estilos do sidebar que usa mesma classe) */
html.capacitor nav.bottom-nav > .nav-item,
html.capacitor nav.bottom-nav > a.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #64748b;
    text-decoration: none;
    font-size: 11px;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.2s;
    /* Reset sidebar styles */
    background: none !important;
    border: none;
    width: auto;
    margin-bottom: 0;
}

html.capacitor nav.bottom-nav > .nav-item i,
html.capacitor nav.bottom-nav > a.nav-item i {
    font-size: 20px;
    width: auto;
    text-align: center;
}

html.capacitor nav.bottom-nav > .nav-item.active,
html.capacitor nav.bottom-nav > a.nav-item.active {
    color: #2563eb;
    background: none !important;
}

html.capacitor nav.bottom-nav > .nav-item.active i,
html.capacitor nav.bottom-nav > a.nav-item.active i {
    transform: scale(1.1);
}

/* Suporte para .bottom-nav-item (usado no Dashboard) */
html.capacitor nav.bottom-nav > .bottom-nav-item,
html.capacitor nav.bottom-nav > a.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #64748b;
    text-decoration: none;
    font-size: 11px;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.2s;
}

html.capacitor nav.bottom-nav > .bottom-nav-item i,
html.capacitor nav.bottom-nav > a.bottom-nav-item i {
    font-size: 20px;
}

html.capacitor nav.bottom-nav > .bottom-nav-item.active,
html.capacitor nav.bottom-nav > a.bottom-nav-item.active {
    color: #2563eb;
}

html.capacitor nav.bottom-nav > .bottom-nav-item.active i,
html.capacitor nav.bottom-nav > a.bottom-nav-item.active i {
    transform: scale(1.1);
}

/* ==========================================
   5. MODAIS - Safe area no topo
   ========================================== */
html.capacitor .modal-overlay,
html.capacitor .mobile-modal-overlay {
    padding-top: env(safe-area-inset-top, 0px);
}

html.capacitor .scanner-modal {
    padding-top: env(safe-area-inset-top, 0px);
}

/* ==========================================
   6. SIDEBAR - Safe area no topo
   ========================================== */
html.capacitor .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
}