/* ============================================================
   MOBILE FIXES — Consolidador Fiscal v1
   Carregado APOS dashboard.css; sobrescreve para mobile <= 768.
   Foco: tap targets 44px, fontes >=12px, sub-tabs com indicador,
   action-bars stickadas, KPI cards otimizados.
   ============================================================ */

/* ── 1. TAP TARGETS — minimo 44x44 (Apple HIG / WCAG 2.5.5) ── */
@media (max-width: 768px) {
    /* Sidebar nav-links */
    .sidebar .nav-link,
    #sidebar .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .sidebar .nav-link.sidebar-group-title,
    #sidebar .nav-link.sidebar-group-title {
        min-height: 36px;  /* group titles podem ser menores */
    }

    /* Hamburger / mobile header buttons — 44x44 */
    .mobile-header-btn,
    #sidebarToggleBtn,
    button[onclick*="toggleSidebar"] {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px;
        height: 44px;
    }

    /* Botoes regulares — minimo 44 de altura, exceto btn-sm explicito.
       !important porque algumas toolbars usam .py-1 utilitario que vence. */
    .btn:not(.btn-sm):not(.btn-xs):not(.btn-icon-sm):not(.btn-compact) {
        min-height: 44px !important;
    }
    .btn-sm:not(.btn-icon-sm) {
        min-height: 38px;  /* btn-sm fica em 38 (estava ~31) */
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    /* Sub-tabs (nav-tabs) — minimo 44 + padding maior */
    .nav-tabs .nav-link {
        min-height: 44px;
        padding: 0.65rem 0.85rem !important;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
    }

    /* Form controls — input/select com 44, incluindo input-group-text para alinhar */
    .form-control:not(.form-control-sm),
    .form-select:not(.form-select-sm),
    .input-group:not(.input-group-sm) > .input-group-text {
        min-height: 44px;
    }
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .input-group-text {
        min-height: 38px;
    }

    /* Close buttons em modais — ampliar SOMENTE area de toque, sem escalar icone */
    .btn-close {
        padding: 0.85rem !important;
        background-origin: content-box;
        background-size: 1em 1em;
    }

    /* Dropdown menu items — opt-out via .dropdown-menu-compact em filtros densos */
    .dropdown-menu:not(.dropdown-menu-compact) .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ── 2. FONT SIZES — minimo 12px legivel em mobile ── */
@media (max-width: 768px) {
    /* Sub-titulos da sidebar */
    .sidebar small,
    #sidebar small,
    .mobile-header-subtitle {
        font-size: 0.78rem !important;  /* ~12.5px */
    }
    /* Badges "NOVO" / micro tags */
    .badge {
        font-size: 0.72rem !important;
        padding: 0.35em 0.55em !important;
    }
    /* Helper texts dentro de cards */
    .card-body small.text-muted,
    .card-body .small {
        font-size: 0.78rem !important;
    }
    /* Tabelas — body */
    .table tbody td,
    .table tbody th {
        font-size: 0.85rem;
    }
    /* Form labels */
    .form-label {
        font-size: 0.875rem;
    }
}

/* ── 3. SUB-TABS — indicador visual de scroll horizontal ── */
@media (max-width: 768px) {
    .nav-tabs.flex-nowrap.overflow-auto {
        position: relative;
        scroll-snap-type: x proximity;
        scroll-padding: 0 1rem;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs.flex-nowrap.overflow-auto .nav-item {
        scroll-snap-align: start;
    }
    /* Wrapper com fade indicators (precisa div pai com .nav-tabs-scroll-wrapper) */
    .nav-tabs-scroll-wrapper {
        position: relative;
    }
    .nav-tabs-scroll-wrapper::before,
    .nav-tabs-scroll-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 24px;
        pointer-events: none;
        z-index: 2;
    }
    .nav-tabs-scroll-wrapper::before {
        left: 0;
        background: linear-gradient(to right, var(--bs-body-bg, #fff), transparent);
    }
    .nav-tabs-scroll-wrapper::after {
        right: 0;
        background: linear-gradient(to left, var(--bs-body-bg, #fff), transparent);
    }
}

/* ── 4. KPI CARDS — layout otimizado mobile ── */
@media (max-width: 575.98px) {
    /* KPI cards em 2 colunas no mobile (override row-cols-1) */
    .row.row-cols-2 > [class^="col-"],
    .row.row-cols-2 > [class*=" col-"] {
        margin-bottom: 0.5rem;
    }
    /* card-metric — reduzir padding interno */
    .card-metric .card-body {
        padding: 0.75rem !important;
    }
    /* KPI numero principal */
    .card-metric h5,
    .card-metric .h5,
    .card-metric h4 {
        font-size: 1.05rem;
        line-height: 1.2;
    }
    .card-metric .metric-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }
}

/* ── 5. ACTION BARS — sticky bottom em mobile (form actions) ── */
@media (max-width: 768px) {
    .action-bar-mobile-sticky {
        position: sticky;
        bottom: 0;
        background: var(--bs-body-bg, #fff);
        padding: 0.75rem !important;
        margin: 0 -1rem -1rem -1rem !important;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        z-index: 10;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    }
}

/* ── 6. TABLES — melhor scroll experience em mobile ── */
@media (max-width: 768px) {
    .table-responsive,
    .cf-table-scroll-wrapper {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    /* Indicador visual de "tem mais" via pseudo-elemento — nao colide com striping */
    .table-responsive {
        position: relative;
    }
    .table-responsive::after {
        content: "";
        position: sticky;
        right: 0;
        top: 0;
        bottom: 0;
        width: 16px;
        display: block;
        background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
        pointer-events: none;
    }
}

/* ── 7. MODAIS — fullscreen em mobile pequeno ── */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0;
        max-width: 100%;
        min-height: 100dvh;  /* dvh evita problema com teclado virtual iOS */
    }
    .modal-content {
        border-radius: 0;
        min-height: 100dvh;
    }
    .modal-body {
        padding: 1rem !important;
    }
    .modal-footer {
        padding: 0.75rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ── 8. CHARTS — altura minima decente em mobile ── */
@media (max-width: 768px) {
    canvas[id*="hart"], canvas[id*="grafico"] {
        min-height: 220px;
    }
}

/* ── 9. SAFE AREAS — iPhone notch / home indicator ── */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        body {
            padding-bottom: env(safe-area-inset-bottom);
        }
        .mobile-header {
            padding-top: env(safe-area-inset-top);
        }
    }
}

/* ── 10. SCROLL SUAVE em ancoras (respeita prefers-reduced-motion / WCAG 2.3.3) ── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ── 11. FOCUS visivel em mobile (acessibilidade teclado bluetooth) ── */
@media (max-width: 768px) {
    .btn:focus-visible,
    .nav-link:focus-visible,
    .form-control:focus-visible {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }
}