/* =============================================================================
   MOBILE FIXES — correções defensivas pra mobile/celular.
   Carregado POR ULTIMO no head — sobrescreve regras anteriores quando
   necessario. Todas as regras estao em @media query, entao DESKTOP NAO E
   AFETADO. Reversivel removendo o <link> em head.php.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Telas <= 768px (tablet pequeno + mobile)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* === BASE === */
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* === LAYOUT GERAL === */
    /* Forca conteudo a respeitar viewport (impede scroll horizontal global) */
    .main, .section, .panel, .container { max-width: 100% !important; box-sizing: border-box; }

    /* === GRIDS === */
    /* Grids que ainda nao foram cobertos no responsive.css principal */
    .grid-5, .grid-6 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .grid-3-1, .grid-1-3 { grid-template-columns: 1fr !important; }

    /* === KPI CARDS === */
    /* Cards de KPI (.kpi-card) ficam menores em mobile pra caber mais por linha */
    .kpi-card {
        padding: 10px !important;
        min-height: auto !important;
    }
    .kpi-value { font-size: 1.4rem !important; line-height: 1.1 !important; }
    .kpi-label { font-size: .55rem !important; letter-spacing: .03em !important; }
    .kpi-change { font-size: .58rem !important; }
    .tap-hint { font-size: .55rem !important; }

    /* === TABELAS === */
    /* Toda tabela ganha scroll horizontal automatico em mobile.
       Wrappa com .table-wrap se quiser mais explicito; aqui pegamos
       direto qualquer table dentro de .panel ou .section */
    .panel table, .section table, table.prod-table, table.audit-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    .panel table th, .panel table td,
    .section table th, .section table td {
        font-size: .65rem !important;
        padding: 6px 8px !important;
    }

    /* === BOTÕES (touch target minimo 40px) === */
    button, .btn, .auth-btn, .prod-btn, .prod-add-btn, .prod-modal-close, .op-filter-btn {
        min-height: 40px !important;
    }
    /* Botoes inline pequenos mantém tamanho mas garantem clicabilidade */
    .prod-item-btn, .icon-btn { min-width: 36px !important; min-height: 36px !important; }

    /* === INPUTS / FORMS === */
    /* iOS zooma quando input < 16px. Forca 16px em mobile pra evitar */
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="tel"], input[type="date"], input[type="time"], input[type="search"],
    input[type="month"], textarea, select {
        font-size: 16px !important; /* anti-zoom iOS */
    }

    /* === MODAIS === */
    /* Modais genericas — wrapper centralizado quebra em mobile */
    .modal-overlay, .prod-modal-overlay, .he-modal-overlay {
        padding: 8px !important;
        align-items: flex-start !important;
    }
    /* Conteudo do modal ocupa quase tela toda */
    .prod-modal, .he-modal, .modal-content {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        margin: 8px auto !important;
    }
    .prod-modal-body, .modal-body {
        max-height: calc(90vh - 80px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* === CHARTS === */
    /* Charts (Chart.js) precisam de altura definida pra renderizar em mobile */
    .chart-wrap, .chart-container {
        height: 240px !important;
        max-height: 240px !important;
    }
    .chart-wrap canvas, .chart-container canvas {
        max-width: 100% !important;
        height: 100% !important;
    }

    /* === NAV / TABS === */
    /* Nav scroll horizontal sem stretching */
    .nav-tabs-wrap, .tab-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* === HEADER / FILIAL BAR === */
    /* Greeting muito grande no mobile */
    .greeting h1 { font-size: 1.1rem !important; }
    .greeting p { font-size: .68rem !important; }

    /* === PANELS === */
    .panel { padding: 12px !important; margin-bottom: 8px !important; }
    .panel-header { gap: 6px !important; flex-wrap: wrap !important; }
    .panel-title { font-size: .82rem !important; }
    .panel-badge { font-size: .58rem !important; padding: 2px 6px !important; }

    /* === TEAM GRID (lista colaboradores) === */
    .team-list, .prod-list { padding: 6px !important; }
    .team-item, .prod-item { padding: 8px !important; gap: 6px !important; }
    .team-item-name { font-size: .75rem !important; }
    .team-item-meta, .prod-item-meta { font-size: .6rem !important; line-height: 1.4 !important; }

    /* === FORMS LAYOUT === */
    /* Forms com colunas viram empilhados */
    .team-form-row, .form-row, .ficha-form-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* === BARS, AVATARS === */
    .span-avatar, .team-item-avatar, .prod-item-avatar {
        width: 32px !important; height: 32px !important; min-width: 32px !important;
        font-size: .6rem !important;
    }

    /* === OVERLAYS DE OVERLAY DENTRO DE OVERLAY === */
    /* Garantir que overlays criados dinamicamente nao tenham margem fixa */
    [id$="Overlay"]:not([id="appWrapper"]),
    [id$="Ov"] {
        padding: 8px !important;
    }
}

/* ---------------------------------------------------------------------------
   2. Telas <= 480px (celulares)
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {

    /* === GRIDS COM 4 COLUNAS — virar 2 ou 1 === */
    .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .grid-3 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

    /* KPI cards menores ainda */
    .kpi-card { padding: 8px !important; }
    .kpi-value { font-size: 1.2rem !important; }

    /* Top bar quebra em duas linhas */
    .top-bar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .top-bar > * { width: 100% !important; }
    .top-bar button.prod-add-btn { width: auto !important; align-self: flex-end !important; }

    /* Painéis em quadrados (ex: ninebox) */
    .ninebox { gap: 4px !important; }
    .ninebox-cell { padding: 8px !important; min-height: 60px !important; }
    .ninebox-count { font-size: 1.2rem !important; }
    .ninebox-label { font-size: .58rem !important; }

    /* === MODALS FULL-SCREEN em telas pequenas === */
    .prod-modal, .he-modal, .modal-content {
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .modal-overlay, .prod-modal-overlay, .he-modal-overlay {
        padding: 0 !important;
    }

    /* === FILIAL BAR E NAV === */
    .filialBar { padding: 6px 8px !important; flex-wrap: wrap !important; gap: 4px !important; }

    /* === TEXTOS PEQUENOS — bump pra legibilidade === */
    .kpi-change.up::before, .kpi-change.down::before { display: none !important; }

    /* === LISTA DE EVENTOS / RISCOS / SPAN === */
    .span-item, .risk-item, .pulse-question {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .span-info { width: 100% !important; }
    .span-ratio { align-self: flex-end !important; }

    /* === SAFE AREA (notch iPhone) === */
    body { padding-top: env(safe-area-inset-top, 0) !important; }
    .filialBar { padding-top: calc(6px + env(safe-area-inset-top, 0)) !important; }
}

/* ---------------------------------------------------------------------------
   3. Touch-only (sem hover) — desabilita estados :hover que ficam "presos"
   --------------------------------------------------------------------------- */
@media (hover: none) {
    .panel:hover, .kpi-card:hover, button:hover { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   4. Landscape pequeno (celular deitado)
   --------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .modal-overlay, .prod-modal-overlay {
        align-items: stretch !important;
    }
    .prod-modal, .modal-content {
        max-height: 100vh !important;
    }
}

/* ---------------------------------------------------------------------------
   5a. CRITICO iOS — safe-area-inset-top no header
   --------------------------------------------------------------------------- */
/* mobile.css linha 17 define `.header { padding: 0 .75rem !important }` que
   ANULA o `padding-top: env(safe-area-inset-top)` de responsive.css. Resultado:
   barra de status do iPhone (44pt em modelos com notch/Dynamic Island)
   SOBREPOE o header. Hamburger e logo ficam parcial/totalmente atras da
   status bar — toques sao capturados pelo iOS (gesto da status bar), nao
   pela pagina. Solucao: re-aplicar padding-top safe-area com !important +
   aumentar altura total do header + ajustar body padding-top + posicao do
   filialBar. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .header {
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        padding-bottom: 0 !important;
        height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    }
    body {
        padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important;
    }
    #filialBar {
        top: calc(50px + env(safe-area-inset-top, 0px)) !important;
    }
    /* Bottom navigation bar — ja usa safe-area-inset-bottom em mobile.css,
       mas garantimos aqui defensivamente */
    .mob-bottom-nav, .mob-bnav {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* ---------------------------------------------------------------------------
   5. Touch targets do header (Apple HIG: minimo 44x44 pra iOS)
   Aplica em mobile/tablet (até 768px) e em qualquer dispositivo touch
   (hover:none). Hamburger (#nodusHamb) criado dinamicamente pelo
   mobile-nav.js nao tem CSS dedicado em outro lugar — definir tudo aqui.
   --------------------------------------------------------------------------- */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    /* Botoes de icone do header (sino + tema) — sobrescreve 40px do
       responsive.css e 6px padding do mobile.css pra alcancar 44x44.
       SVG com pointer-events:none pra clicks nunca serem interceptados. */
    .hdr-icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, .15);
    }
    .hdr-icon-btn svg { display: block; pointer-events: none; }
    .hdr-icon-btn svg * { pointer-events: none; }

    /* Hamburger menu (#nodusHamb) — criado por mobile-nav.js, sem CSS
       proprio. Estilo: 44x44, transparente, branco, sem hover do desktop.
       position: relative + z-index garante stacking acima de elementos
       irmaos (.header-brand img); pointer-events: auto blinda contra
       qualquer parent que tenha desabilitado. SVG com pointer-events: none
       pra cliques na area da seta SEMPRE bubblearem pro button onclick. */
    #nodusHamb {
        position: relative;
        z-index: 5;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin-right: 4px;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: #fff !important;
        cursor: pointer;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, .15);
        -webkit-appearance: none;
        appearance: none;
        transition: background .15s;
        flex-shrink: 0;
    }
    #nodusHamb:active { background: rgba(255, 255, 255, .15); }
    #nodusHamb svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        display: block;
        pointer-events: none;
    }
    #nodusHamb svg path,
    #nodusHamb svg line { pointer-events: none; }

    /* Area do avatar — sobrescreve gap 3px / padding 2px do mobile.css
       pra dar uma area de toque maior em volta do circulo do avatar */
    .hdr-avatar-area {
        min-height: 44px !important;
        padding: 4px 8px !important;
        gap: 6px !important;
        align-items: center;
        display: flex;
        border-radius: 22px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, .12);
    }
    .hdr-avatar-area:active { background: rgba(255, 255, 255, .08); }
    .hdr-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: .72rem !important;
        flex-shrink: 0;
    }
}