/* ============================================================
 * mobile-polish.css
 *
 * Ajustes finos pra área do cliente em telas <768px (celulares
 * em portrait/landscape). Auditoria de 10/05/2026 identificou
 * 5 problemas CRITICOS + 8 ALTOS — corrigidos aqui:
 *
 *   1. Sino dropdown com width:360px fixo estourava em <360px
 *   2. Tabs Minha BASE sem scroll horizontal — abas invisíveis
 *   3. Modal com height:100vh ficava atrás do teclado virtual
 *   4. Sidebar links e btn-sm <44px (touch target Apple HIG)
 *   5. Tabelas PJ com ações cortadas em mobile
 *   6. KPI cards padding excessivo empilhando longo
 *   7. Dropdown PJ com min-width:220px estourava <360px
 *   8. Charts ApexCharts com labels cortados/ilegíveis
 *   9. iOS zoom automático em inputs <16px
 *  10. Sidebar 84% em <320px deixava só 60px de conteúdo
 *
 * Carregado em base.html antes de client-area.css.
 * ============================================================ */

/* iOS faz zoom automático ao focar input com font-size < 16px.
 * Forçando 16px nos inputs/textarea/select removemos esse zoom
 * irritante. Usa CSS only — nenhum impacto em desktop. */
@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    input.form-control,
    select.form-control,
    textarea.form-control,
    input.form-select,
    select.form-select,
    .form-control,
    .form-select {
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Touch targets: botoes >= 44x44px (Apple HIG) */
    .btn,
    .btn-sm,
    .sidebar-nav-link,
    .sidebar-nav-sublink,
    .mobile-nav-toggle,
    .sidebar-mobile-toggle {
        min-height: 44px;
        touch-action: manipulation;
    }
    .btn-sm {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    /* Botões só com ícone (editar/excluir nas tabelas) */
    .btn-sm:has(> i.bi:only-child),
    .btn:has(> i.bi:only-child) {
        min-width: 44px;
        padding: 10px;
    }
    /* DataTables 2.x — paginacao em mobile: touch target >= 44x44px.
       Default da lib eh ~30px de altura, dificil de tocar. Cobre
       tambem o nome legado .paginate_button (DataTables 1.x). */
    .dt-container .dt-paging .dt-paging-button,
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
 * Mobile pequeno: <576px
 * ============================================================ */
@media (max-width: 575.98px) {

    /* ── Modais: ocupam tela inteira mas RESPEITAM teclado virtual ──
     * Antes: height:100vh fixo fazia o modal ficar atrás do teclado
     * quando input era focado (form some debaixo do teclado iOS/Android).
     * Agora: height:auto + max-height:100vh permite o modal "encolher"
     * proporcionalmente conforme o teclado abre.
     */
    .modal-dialog {
        max-width: 100%;
        margin: 0;
        height: auto;
        max-height: 100vh;
        max-height: 100dvh; /* dynamic viewport — respeita teclado */
    }
    .modal-content {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        display: flex;
        flex-direction: column;
    }
    .modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Header do modal mais compacto */
    .modal-header {
        padding: 12px 16px;
        flex-shrink: 0;
    }
    .modal-header .modal-title {
        font-size: 1rem;
    }
    .modal-footer {
        flex-shrink: 0;
    }

    /* ── ApexCharts: força altura responsiva e labels legíveis ── */
    .apexcharts-canvas {
        max-height: 280px !important;
    }
    [id*="chart-"], [id*="grafico-"] {
        max-height: 300px;
    }
    .apexcharts-text,
    .apexcharts-tooltip-title,
    .apexcharts-tooltip-text-label,
    .apexcharts-tooltip-text-value {
        font-size: 11px !important;
    }
    .apexcharts-legend-text {
        font-size: 11px !important;
    }

    /* ── Tabelas: scroll horizontal com hint visual ── */
    .table-responsive {
        position: relative;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }
    .table-responsive::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 12px;
        width: 24px;
        pointer-events: none;
        background: linear-gradient(to left, rgba(0,0,0,.08), transparent);
    }
    .table-responsive .table {
        font-size: 0.85rem;
    }
    .table-responsive .table th,
    .table-responsive .table td {
        padding: 6px 8px;
        white-space: nowrap;
    }
    /* Coluna de ações nas tabelas: sticky à direita pra usuário sempre
       conseguir editar/excluir mesmo com scroll horizontal.
       2026-05-19: trocado pra opt-in via classe .has-sticky-actions porque
       a regra global aplicava sticky em tabelas de analise (Orcado/
       Realizado/Diferenca) — la a ultima coluna eh valor, nao acoes, e o
       sticky causava o nome "Diferenca" "andar" sobre a coluna "Realizado"
       no scroll horizontal. */
    .table-responsive .table.has-sticky-actions th:last-child,
    .table-responsive .table.has-sticky-actions td:last-child {
        position: sticky;
        right: 0;
        background: var(--client-card-bg, #ffffff);
        box-shadow: -4px 0 8px rgba(0,0,0,0.04);
    }
    [data-theme="dark"] .table-responsive .table.has-sticky-actions th:last-child,
    [data-theme="dark"] .table-responsive .table.has-sticky-actions td:last-child {
        background: #1f2937;
    }

    /* ── Cards e KPIs: padding reduzido ── */
    .card-body {
        padding: 12px 14px;
    }
    .neg-kpi,
    .kpi-card,
    .minha-base-kpi {
        padding: 10px 12px !important;
    }
    .neg-kpi-row > [class*="col-"],
    .kpi-row > [class*="col-"] {
        margin-bottom: 8px;
    }

    /* ── Forms: labels e inputs mais compactos ── */
    .form-label {
        margin-bottom: 4px;
        font-size: 0.85rem;
    }
    .form-control,
    .form-select {
        padding: 10px 12px;
    }

    /* ── Botões em barra: viram block + full width ── */
    .btn-group-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .btn-group-mobile-stack > .btn {
        width: 100%;
    }

    /* ── Headers compactados ── */
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }
    h3 { font-size: 1.05rem; }
    h4 { font-size: 0.95rem; }

    .topo-dark,
    .neg-topo {
        padding: 14px 16px !important;
    }
    .topo-dark h1,
    .neg-topo h1 {
        font-size: 1.25rem !important;
    }

    /* ── Sidebar do conteúdo (não a navegação): empilha em mobile ── */
    .row > [class*="col-lg-"][class*="col-md-"] {
        margin-bottom: 12px;
    }

    /* ── Sino notif dropdown: nao estoura viewport ──
     * Antes: width:360px fixo cortava em telas <360px. Agora largura
     * proporcional. NAO forcamos position — deixamos Popper (do
     * Bootstrap Dropdown) calcular posicionamento sem briga.
     */
    .sino-dropdown {
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
    }

    /* ── Tabs Minha BASE (B/A/S/E/Objetivos/Eventos): scroll horizontal ──
     * Antes: 4-9 abas em flex sem overflow → últimas viraram invisíveis
     * em <414px. Agora: scroll horizontal com hint, abas nao quebram.
     */
    .minha-base-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        flex-wrap: nowrap !important;
        gap: 6px;
        padding-bottom: 8px;
    }
    .minha-base-tabs > a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ── Dropdown PJ (seletor de empresa): nao estoura viewport ── */
    .pj-empresa-menu {
        min-width: auto !important;
        width: calc(100vw - 24px);
        max-width: 360px;
    }

    /* ── Sidebar mobile drawer: max 260px pra deixar conteudo visivel ──
     * Antes: 84% em Galaxy S20 (320px) = 268px, sobrava ~52px de
     * conteudo, indicando "ainda tem mais embaixo" mal.
     */
    body.sidebar-mobile-open .client-sidebar {
        width: min(84vw, 260px) !important;
    }
}

/* ============================================================
 * Mobile médio: 576-767px (tablets pequenos / celulares landscape)
 * ============================================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    .modal-dialog {
        max-width: 92%;
        margin: 1rem auto;
    }
    .apexcharts-canvas {
        max-height: 340px !important;
    }
}

/* ============================================================
 * Sidebar collapsed mode (992-1199px): touch targets >= 44px
 *
 * Em viewports estreitas mas nao mobile (tablets em portrait,
 * notebooks pequenos), a sidebar fica em modo "icones-only" mas
 * os links ficam com altura ~30-36px — muito pequeno pra toque.
 * ============================================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .client-sidebar .sidebar-nav-link,
    .client-sidebar .sidebar-nav-sublink {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .client-sidebar .sidebar-context-switcher button,
    .client-sidebar .sidebar-pj-switcher .pj-btn {
        min-height: 44px;
    }
}

/* ============================================================
 * Landscape em celulares (height < 500px)
 *
 * Sidebar ganha padding reduzido pra caber mais conteudo na
 * altura limitada do landscape.
 * ============================================================ */
@media (max-height: 500px) and (max-width: 991.98px) {
    .client-sidebar {
        padding: 6px 4px;
    }
    .sidebar-section {
        padding: 4px;
        margin-bottom: 2px;
    }
}

/* ============================================================
 * Hint visual em touch devices: tabela rolável fica visualmente
 * indicada com sombra discreta na borda direita
 * ============================================================ */
@media (hover: none) {
    .table-responsive {
        position: relative;
    }
}