/* Conteúdo interno mobile — admin, membro e páginas públicas
   Apenas @media (max-width: 1023px). Menus não são alterados aqui. */

@media (max-width: 1023px) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
    }

    /* Área de conteúdo principal */
    .dashboard-wrapper,
    .dashboard-inner,
    .main-content-wrapper:not(.index-mobile-home) {
        padding: 1rem !important;
        padding-top: calc(4.25rem + env(safe-area-inset-top, 0px)) !important;
        padding-left: max(1rem, env(safe-area-inset-left, 1rem)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 1rem)) !important;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem)) !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    body.page-index .dashboard-wrapper,
    body.page-index main.index-mobile-home {
        padding-top: 0 !important;
    }

    /* Títulos de página */
    .dashboard-wrapper h1,
    .dashboard-inner h1,
    .main-content-wrapper h1 {
        font-size: 1.35rem !important;
        line-height: 1.3;
    }

    .dashboard-wrapper h2,
    .dashboard-inner h2 {
        font-size: 1.15rem !important;
    }

    /* Cards e blocos */
    .dashboard-wrapper .rounded-lg,
    .dashboard-wrapper .rounded-xl,
    .dashboard-inner .rounded-lg,
    .dashboard-inner .rounded-xl,
    .main-content-wrapper .rounded-lg,
    .main-content-wrapper .rounded-xl {
        border-radius: 0.625rem;
    }

    .dashboard-wrapper .p-6,
    .dashboard-wrapper .p-8,
    .dashboard-inner .p-6,
    .dashboard-inner .p-8 {
        padding: 1rem !important;
    }

    /* Grids → 1 coluna (conteúdo mais legível) */
    .dashboard-wrapper .grid.grid-cols-2,
    .dashboard-wrapper .grid.grid-cols-3,
    .dashboard-wrapper .grid.grid-cols-4,
    .dashboard-wrapper .grid.grid-cols-5,
    .dashboard-wrapper .grid.grid-cols-6,
    .dashboard-inner .grid.grid-cols-2,
    .dashboard-inner .grid.grid-cols-3,
    .dashboard-inner .grid.grid-cols-4,
    .main-content-wrapper .grid.grid-cols-2,
    .main-content-wrapper .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .dashboard-wrapper .grid > [class*="col-span"],
    .dashboard-inner .grid > [class*="col-span"] {
        grid-column: span 1 / span 1 !important;
    }

    /* Flex: cabeçalhos e barras de ação empilham */
    .dashboard-wrapper .flex.flex-wrap,
    .dashboard-inner .flex.flex-wrap {
        gap: 0.625rem;
    }

    .dashboard-wrapper header.flex,
    .dashboard-wrapper .page-header-flex,
    .dashboard-inner > .flex.items-center.justify-between,
    .dashboard-wrapper > .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .dashboard-wrapper header.flex > *,
    .dashboard-wrapper > .flex.items-center.justify-between > * {
        width: 100%;
        max-width: 100%;
    }

    /* Botões e ações */
    .dashboard-wrapper button,
    .dashboard-wrapper .btn,
    .dashboard-wrapper a.rounded-lg,
    .dashboard-inner button,
    .dashboard-inner a.rounded-lg {
        min-height: 44px;
    }

    .dashboard-wrapper .flex.gap-2,
    .dashboard-wrapper .flex.gap-3,
    .dashboard-wrapper .flex.space-x-2,
    .dashboard-wrapper .flex.space-x-3 {
        flex-wrap: wrap;
    }

    /* Formulários */
    .dashboard-wrapper input:not([type="checkbox"]):not([type="radio"]),
    .dashboard-wrapper select,
    .dashboard-wrapper textarea,
    .dashboard-inner input:not([type="checkbox"]):not([type="radio"]),
    .dashboard-inner select,
    .dashboard-inner textarea,
    .main-content-wrapper input:not([type="checkbox"]):not([type="radio"]),
    .main-content-wrapper select,
    .main-content-wrapper textarea {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .dashboard-wrapper textarea,
    .dashboard-inner textarea {
        min-height: 6rem;
    }

    .dashboard-wrapper label,
    .dashboard-inner label {
        display: block;
        margin-bottom: 0.35rem;
    }

    /* Abas horizontais com scroll */
    .dashboard-wrapper [role="tablist"],
    .dashboard-wrapper .flex.overflow-x-auto,
    .config-tabs-scroll,
    .tab-nav-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }

    .dashboard-wrapper [role="tablist"]::-webkit-scrollbar,
    .config-tabs-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Tabelas — scroll horizontal confortável */
    .dashboard-wrapper .overflow-x-auto,
    .dashboard-inner .overflow-x-auto,
    .admin-mobile-table-wrap {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-wrapper table,
    .dashboard-inner table,
    .main-content-wrapper table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8125rem;
    }

    .dashboard-wrapper table thead,
    .dashboard-inner table thead {
        white-space: nowrap;
    }

    .dashboard-wrapper table th,
    .dashboard-wrapper table td,
    .dashboard-inner table th,
    .dashboard-inner table td {
        padding: 0.625rem 0.5rem !important;
        vertical-align: middle;
    }

    /* Modais internos (admin/membro) — estilo bottom sheet */
    .dashboard-wrapper ~ .fixed.inset-0.flex,
    body > .fixed.inset-0.flex.items-center {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0.75rem !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    }

    #login-modal-backdrop {
        align-items: center !important;
        justify-content: center !important;
    }

    .fixed.inset-0 > div,
    .fixed.inset-0 .modal-panel,
    .fixed.inset-0 .bg-gray-800.rounded-lg,
    .fixed.inset-0 .bg-gray-800.rounded-xl,
    .fixed.inset-0 .bg-gray-900.rounded-lg,
    #modal-container,
    .modal-panel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(88dvh, 88vh) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 auto !important;
        border-radius: 1rem 1rem 0.75rem 0.75rem !important;
    }

    /* Imagens e mídia */
    .dashboard-wrapper img,
    .dashboard-inner img,
    .main-content-wrapper img {
        max-width: 100%;
        height: auto;
    }

    /* Limites de largura → tela cheia no mobile */
    .dashboard-wrapper.max-w-6xl,
    .dashboard-wrapper.max-w-7xl,
    .dashboard-wrapper.max-w-\[1600px\],
    .dashboard-inner.max-w-6xl,
    .dashboard-inner.max-w-7xl {
        max-width: 100% !important;
    }

    /* Listas densas */
    .dashboard-wrapper .space-y-6 > * + *,
    .dashboard-inner .space-y-6 > * + * {
        margin-top: 1rem !important;
    }

    /* Filtros empilhados (ex.: usuarios.php) */
    .dashboard-wrapper .grid.gap-3,
    .dashboard-wrapper .grid.gap-4 {
        gap: 0.625rem !important;
    }
}