/* ================================================================
   PWA.CSS — Modal de instalação PWA
   ================================================================ */

/* 1. OVERLAY (Fundo Escuro) */
#pwa-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 2147483645;
    backdrop-filter: blur(4px);
}

/* 2. MODAL CENTRALIZADO */
#pwa-install-banner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 360px;
    background: #ffffff;
    padding: 24px;
    border-radius: 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 2147483646;
    text-align: center;
    font-family: 'Inter', sans-serif;
    border: none;
}

/* 3. LOGO E TEXTOS */
.pwa-modal-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    display: block;
    border-radius: 20px;
    object-fit: cover;
}

.pwa-modal-title {
    font-size: 22px;
    color: var(--text-color);
    font-weight: 800;
    margin-bottom: 8px;
}

.pwa-modal-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* 4. CARD DE INSTRUÇÕES iOS */
.pwa-ios-card {
    background: #f1f5f9;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 20px;
    text-align: left;
    border: 1px solid var(--border-color);
}

.pwa-ios-step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pwa-ios-step-item:last-child {
    margin-bottom: 0;
}

.step-icon {
    background: #ffffff;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.step-icon img {
    width: 20px;
    height: 20px;
}

.pwa-ios-step-item p {
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

.pwa-ios-step-item strong {
    color: #6366f1;
    font-weight: 700;
}

/* 5. BOTÕES */
.pwa-btn-main {
    width: 100%;
    background: #6366f1;
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pwa-btn-main:active {
    background: #4f46e5;
    transform: scale(0.98);
}

.pwa-btn-link {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin: 8px auto 0;
}

/* 6. TOAST DE ATUALIZAÇÃO DO SW */
#sw-update-toast {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1e293b;
    color: #fff;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    z-index: 2147483647;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    white-space: nowrap;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
    pointer-events: none;
}
#sw-update-toast.sw-toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
#sw-update-toast i {
    color: #818cf8;
    font-size: 16px;
    flex-shrink: 0;
}
#sw-update-btn {
    background: #6366f1;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
#sw-update-btn:active { background: #4f46e5; }
#sw-update-dismiss {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    line-height: 1;
}

/* 7. TOAST DE FEEDBACK */
.pwa-toast {
    position: fixed;
    /* Inclui safe-area-inset-bottom para iPhone X+ (home bar) */
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-color, #060606);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    z-index: 2147483647;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    animation: pwaToastIn 0.3s ease, pwaToastOut 0.3s ease 2.7s forwards;
    /* Sem delay de toque */
    touch-action: manipulation;
}

@keyframes pwaToastIn {
    from { opacity: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    to   { opacity: 1; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes pwaToastOut {
    from { opacity: 1; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
    to   { opacity: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* 7. RESPONSIVIDADE MOBILE */
@media (max-width: 480px) {
    #pwa-install-banner {
        width: 92%;
        padding: 20px 18px;
        /* Safe area inferior para phones com home bar */
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px;
    }

    .pwa-modal-logo {
        width: 64px;
        height: 64px;
    }

    .pwa-modal-title {
        font-size: 19px;
    }

    .pwa-btn-main {
        min-height: 48px;
    }
}

/* ================================================================
   MOBILE SCALING — App Principal (app.html)
   Estratégia: CSS transform scale para encolher layout desktop
   em telas pequenas, mantendo toda a estrutura intacta.
   ================================================================ */

/*
 * Referência: o layout foi desenhado para ~1200px de largura.
 * Em telas menores aplicamos scale proporcional para que o conteúdo
 * caiba sem quebrar o layout. O body/html passam a ter overflow
 * visível apenas quando o scale está ativo.
 */

/* Variável de fallback para o scale — sobrescrita via JS se necessário */
:root {
    --app-scale: 1;
    --app-scale-origin: top left;
}

@media (max-width: 1199px) and (min-width: 769px) {
    /* Tablets/landscape phone: scale calculado via pwa-scale.js */
    .page-app .app-container {
        transform-origin: top left;
        transform: scale(var(--app-scale, 0.667));
        width: calc(100vw / var(--app-scale, 0.667));
        height: calc(100vh / var(--app-scale, 0.667));
    }

    .page-app {
        overflow: hidden;
        max-width: 100vw;
    }
}

@media (max-width: 768px) {
    /*
     * Mobile: o layout encolhe via transform scale.
     * A largura de referência é 1200px; o scale é proporcional à viewport.
     * Exemplo: tela de 390px → scale = 390/1200 ≈ 0.325
     * O JS em pwa-scale.js pode sobrescrever --app-scale dinamicamente.
     */
    .page-app .app-container {
        transform-origin: top left;
        transform: scale(var(--app-scale, 0.325));
        width: calc(100vw / var(--app-scale, 0.325));
        height: calc(100vh / var(--app-scale, 0.325));
    }

    /* Overflow hidden SOMENTE no app, nunca no index/login */
    .page-app {
        overflow: hidden;
        max-width: 100vw;
    }
}

/* ================================================================
   SAFE AREA — iPhone X+ (notch, home bar)
   Aplicadas ao wrapper externo que não é afetado pelo scale
   ================================================================ */

/* O body recebe o padding de safe-area para que o .app-container
   não fique cortado pelo notch ou home indicator */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        body {
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
    }
}

/* ================================================================
   MODAIS MOBILE-FRIENDLY (< 768px)
   Apenas modais de cadastro — não afeta modais de visão/relatório.
   ================================================================ */

@media (max-width: 768px) {
    /*
     * Os modais de cadastro devem ser mobile-friendly (não escalonados),
     * pois são acionados pelo usuário e precisam de inputs acessíveis.
     * Eles são renderizados fora do .app-container (position:fixed)
     * então NÃO são afetados pelo scale.
     * Garantimos aqui que inputs tenham tamanho adequado ao toque.
     */

    /* --- Base de todos os modais em mobile --- */
    .modal-content {
        width: 96% !important;
        max-width: 100% !important;
        margin: 8px auto !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 16px !important;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* max-height sobrescrito pela seção MODAL BASE — SAFE AREA abaixo */
    }

    /* --- Modais pequenos (sm/md) ocupam mais da tela --- */
    .modal-sm,
    .modal-md {
        width: 96% !important;
        max-width: 96% !important;
    }

    /* --- Inputs: tamanho mínimo para evitar zoom automático iOS --- */
    .modal-body input,
    .modal-body select,
    .modal-body textarea,
    #modal-adicionar-usuario .modal-body input,
    #modal-editar-usuario .modal-body input,
    #modal-editar-categoria .modal-body input,
    #modal-editar-cartao .modal-body input,
    #modal-alterar-senha .modal-body input,
    #modal-adicionar-usuario .modal-body select,
    #modal-editar-usuario .modal-body select,
    #modal-editar-categoria .modal-body select,
    #modal-editar-cartao .modal-body select,
    #modal-alterar-senha .modal-body select {
        font-size: 16px !important;      /* Evita zoom automático iOS */
        min-height: 44px !important;     /* Área de toque mínima */
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }

    .modal-body textarea {
        min-height: 80px !important;
    }

    /* --- Labels maiores --- */
    .modal-body label,
    #modal-adicionar-usuario .modal-body label,
    #modal-editar-usuario .modal-body label,
    #modal-editar-categoria .modal-body label,
    #modal-editar-cartao .modal-body label,
    #modal-alterar-senha .modal-body label {
        font-size: 14px !important;
        margin-bottom: 6px;
    }

    /* --- Botões de ação no footer dos modais --- */
    .modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .modal-footer .btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }

    /* --- Botão fechar: aumentar área de toque --- */
    .close {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.3rem !important;
    }

    /* --- Modal de reservas: layout empilhado em mobile --- */
    .nova-reserva-inline {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .nova-reserva-inline input[type="text"],
    .nova-reserva-inline input[type="number"],
    .nova-reserva-inline input[type="date"] {
        font-size: 16px !important;
        min-height: 44px !important;
        height: 44px !important;
        width: 100% !important;
        flex: 1 1 calc(50% - 8px) !important;
    }

    .nova-reserva-inline input[type="text"] {
        flex: 1 1 100% !important;
    }

    .btn-add-reserva,
    .btn-add-objetivo {
        height: 44px !important;
        width: 44px !important;
        min-width: 44px !important;
    }

    /* --- Modal de cartão: linha de campos empilhada --- */
    .form-row-cartao {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* --- Modais de usuário/categoria/cartão/senha --- */
    #modal-adicionar-usuario .modal-body,
    #modal-editar-usuario .modal-body,
    #modal-editar-categoria .modal-body,
    #modal-editar-cartao .modal-body,
    #modal-alterar-senha .modal-body {
        max-height: calc(70dvh - env(safe-area-inset-top, 0px)) !important;
        padding: 16px !important;
    }

    #modal-adicionar-usuario .modal-footer,
    #modal-editar-usuario .modal-footer,
    #modal-editar-categoria .modal-footer,
    #modal-editar-cartao .modal-footer,
    #modal-alterar-senha .modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #modal-adicionar-usuario .modal-footer .btn,
    #modal-editar-usuario .modal-footer .btn,
    #modal-editar-categoria .modal-footer .btn,
    #modal-editar-cartao .modal-footer .btn,
    #modal-alterar-senha .modal-footer .btn {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }
}

/* ================================================================
   TOUCH E USABILIDADE GERAL (app.html em mobile)
   ================================================================ */

@media (max-width: 768px) {
    /* Área de toque mínima para todos os botões de ação */
    .btn,
    button,
    [role="button"] {
        min-height: 36px; /* base desktop — não forçar 44px em tudo, só ações primárias */
    }

    /* Botões primários de ação: 44x44px */
    .btn-primary,
    .btn-danger,
    .btn-success,
    .btn-pagar,
    .btn-editar,
    .btn-excluir,
    .header-icon-btn,
    #btn-nova-despesa,
    #btn-nova-receita {
        min-height: 44px !important;
    }

    /* Cursor pointer explícito em elementos clicáveis */
    .nav-link,
    .btn,
    button,
    [role="button"],
    .close,
    .modal-header,
    label[for],
    .avatar-container,
    .checkbox-container {
        cursor: pointer;
    }

    /* Esconder hover-only elements que ficam inacessíveis em touch */
    .avatar-edit-icon {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================================================
   SCROLLBAR — ocultar em mobile para ganhar espaço visual
   ================================================================ */

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* ================================================================
   MODAIS DE RECEITA E DESPESA — FORMULÁRIOS MOBILE-FRIENDLY
   Os modais de receita/despesa têm grids de campos (form-row-grid,
   form-row-inline) que precisam virar coluna única em mobile.
   ================================================================ */

@media (max-width: 768px) {
    /* Grid de campos (valor + data, etc.) → coluna única */
    .form-row-grid,
    .form-row-inline,
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Todos os campos do grid ocupam 100% */
    .form-row-grid .form-group,
    .form-row-inline .form-group,
    .form-row .form-group,
    .form-group.campo-valor,
    .form-group.campo-data {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Inputs, selects e textareas dentro de modais: anti-zoom iOS + toque mínimo */
    .modal-body input[type="text"],
    .modal-body input[type="number"],
    .modal-body input[type="date"],
    .modal-body input[type="email"],
    .modal-body input[type="password"],
    .modal-body input[type="tel"],
    .modal-body input[type="search"],
    .modal-body select,
    .modal-body textarea {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Checkbox inline (replicar/parcelar): empilhar em mobile */
    .checkboxes-inline {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .checkbox-inline {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px !important;
    }

    /* Container descrição + botão de anexos */
    .descricao-anexos-container {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .descricao-anexos-container .btn-anexar {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    /* Linha de opções inline de categorias/cartões */
    .form-group-flex,
    .form-inline {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Tags de categoria: permitir scroll horizontal em mobile */
    .categorias-container,
    .tags-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    /* Seletor de categoria inline */
    .categoria-select-inline {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ================================================================
   INDEX.HTML (LOGIN) — SAFE AREA para barra de status iOS
   A página de login já é responsiva mas precisa respeitar notch.
   ================================================================ */

@supports (padding: env(safe-area-inset-top)) {
    /* Navbar da landing */
    .landing-nav {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Hero section no mobile: garantir que não fique atrás do notch */
    @media (max-width: 768px) {
        .hero-section {
            padding-top: calc(env(safe-area-inset-top, 0px) + 60px);
        }

        /* Botão flutuante / CTA que pode estar na área do home indicator */
        .btn-hero-cta,
        .btn-mobile-login {
            margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        }
    }
}

/* ================================================================
   APP.HTML — SAFE AREA na barra inferior (home indicator iPhone X+)
   Garante que o footer da sidebar e os modais não fiquem cortados.
   ================================================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        /* Sidebar footer não fica atrás do home indicator */
        .sidebar-footer {
            padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)) !important;
        }

        /* Content area bottom padding para não ficar atrás do home bar */
        .content-area {
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
    }
}

/* ================================================================
   MODAL BASE — SAFE AREA
   O .modal-body base usa 100vh sem env(); corrigir para dvh + safe-area
   ================================================================ */

@media (max-width: 768px) {
    .modal-body {
        max-height: calc(100dvh - 200px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Modal de detalhes do mês (grande) */
    #modal-detalhes-mes .modal-body {
        max-height: calc(90dvh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Modal de confirmação posicionado no centro vertical real */
    #modal-exclusao-receita .modal-content,
    #modal-confirmacao-exclusao-despesa .modal-content {
        margin: max(5dvh, calc(env(safe-area-inset-top, 0px) + 20px)) auto !important;
    }
}

/* ================================================================
   MODAL RECEITA — CORREÇÕES MOBILE ESPECÍFICAS
   O receita.css usa font-size:14px e 100vh; corrigir aqui com !important
   para garantir anti-zoom iOS (mín. 16px) e altura real (dvh).
   ================================================================ */

@media (max-width: 768px) {
    /* Anti-zoom iOS: font-size mínimo 16px em todos os inputs do modal receita */
    #modal-nova-receita .modal-body input[type="text"],
    #modal-nova-receita .modal-body input[type="number"],
    #modal-nova-receita .modal-body input[type="date"],
    #modal-nova-receita .modal-body select {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* dvh em vez de 100vh para respeitar barra do browser */
    #modal-nova-receita .modal-content {
        min-height: 100dvh !important;
    }

    #modal-nova-receita .modal-body {
        max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Modal lancamento despesas */
    .modal-lancamento .modal-body {
        max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Inputs do modal de despesa: anti-zoom iOS */
    .modal-lancamento input[type="text"],
    .modal-lancamento input[type="number"],
    .modal-lancamento input[type="date"],
    .modal-lancamento select,
    .modal-lancamento textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }
}

/* ================================================================
   TOUCH: ESTADOS ATIVOS — feedback visual imediato no toque
   (substitui :hover que não funciona em touch)
   ================================================================ */

@media (hover: none) and (pointer: coarse) {
    /* Botões: feedback de toque via :active */
    .btn:active,
    button:active,
    [role="button"]:active {
        opacity: 0.75;
        transform: scale(0.97);
        transition: transform 0.1s ease, opacity 0.1s ease;
    }

    /* Nav links na sidebar */
    .nav-link:active {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* Remover efeito hover translateY em botões (causa jitter em touch) */
    .btn:hover:not(:disabled) {
        transform: none;
        box-shadow: none;
    }

    /* Modal header: desabilitar drag em touch para não conflitar com scroll */
    .modal-header {
        cursor: default !important;
        touch-action: manipulation;
    }

    /* Feedback de toque no botão fechar */
    .close:active {
        background: rgba(255, 255, 255, 0.4) !important;
        transform: scale(0.92);
    }

    /* Cards e itens de lista clicáveis */
    .mes-card:active,
    .reserva-card:active,
    .nav-link:active,
    .info-row:active {
        opacity: 0.7;
    }
}

/* ================================================================
   OVERSCROLL — Prevenir scroll da página atrás dos modais (iOS)
   ================================================================ */

@media (max-width: 768px) {
    .modal-body {
        overscroll-behavior: contain;
    }

    /* Prevenir scroll do body quando modal está aberto.
       Nota: position:fixed causaria pulo de scroll — usar apenas overflow:hidden.
       O scroll já é bloqueado no layoutGeral.css (html, body { overflow: hidden }). */
    body.modal-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

/* ================================================================
   APP-CONTAINER — Usar dvh em mobile para altura real da viewport
   (evita que o footer fique atrás da barra do browser no iOS Safari)
   ================================================================ */

@media (max-width: 768px) {
    /*
     * O layoutGeral.css define height: 100vh no .app-container.
     * Em iOS Safari, 100vh inclui a barra do browser → conteúdo fica cortado.
     * 100dvh usa a altura disponível real (dynamic viewport height).
     * Subtraímos as safe-areas porque o body já tem padding para elas.
     */
    .app-container {
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Main content: mesma altura para que o layout interno não extrapole */
    .main-content {
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
}

/* ================================================================
   BOTÃO FECHAR — Garantir área de toque mínima 44x44px
   ================================================================ */

@media (max-width: 768px) {
    .close {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.4rem !important;
        /* Área de toque aumentada sem afetar layout visual */
        position: relative;
    }

    /* Aumentar área de toque sem mudar aparência visual */
    .close::after {
        content: '';
        position: absolute;
        inset: -4px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ================================================================
   INPUT DATE — Corrigir aparência nativa em iOS
   ================================================================ */

@media (max-width: 768px) {
    .modal-body input[type="date"] {
        /* iOS: mostrar o input date nativo sem clipping */
        -webkit-appearance: none;
        appearance: none;
        min-height: 44px !important;
        padding-right: 8px !important;
    }

    /* Garantir que selects nativos sejam acessíveis no iOS:
       Removemos apenas o estilo nativo do sistema operacional (appearance: none)
       e adicionamos padding para a seta customizada.
       Não sobrescrevemos background-color para não quebrar o tema. */
    .modal-body select {
        -webkit-appearance: none;
        appearance: none;
        padding-right: 32px !important;
    }
}

/* ================================================================
   SCROLL HORIZONTAL — Prevenir overflow lateral em mobile
   ================================================================ */

@media (max-width: 768px) {
    /* Evitar que conteúdo escalonado cause scrollbar horizontal (somente no app) */
    .page-app {
        overflow-x: hidden !important;
    }

    /* Tabelas dentro de modais: scroll horizontal suave */
    .modal-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }
}