/* ============================================================
   MOBILE GLOBAL — adaptacao responsiva do sistema Neander
   ============================================================
   Carregado globalmente via template_helper.php.
   Breakpoint mobile: <768px (Bootstrap md).
   Regras especificas de modulo ficam no CSS do proprio modulo.
   ============================================================ */

@media (max-width: 767.98px) {

    /* Anti-zoom iOS: inputs precisam de 16px+ */
    input.form-control,
    select.form-select,
    textarea.form-control,
    .select2-search__field {
        font-size: 16px !important;
    }

    /* Padding lateral do .content mais compacto */
    .content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Header: logo da empresa nao estourar */
    .navbar-logo .logo,
    .navbar-logo .logo-tema-claro,
    .navbar-logo .logo-tema-escuro {
        max-width: 110px;
    }

    /* Versao do sistema some do header (vai no rodape do menu) */
    .navbar-logo small {
        display: none !important;
    }

    /* Notificacoes dropdown: fullscreen abaixo do navbar */
    .notification-dropdown-menu {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        position: fixed !important;
        top: 56px !important;
        bottom: 0 !important;
        height: calc(100vh - 56px) !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .notification-dropdown-menu .card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .notification-dropdown-menu .card-body {
        flex: 1 !important;
        max-height: none !important;
    }

    /* Dropdown do perfil mais largo em mobile */
    .dropdown-profile {
        width: 280px !important;
    }

    /* Paginacao List.js: wrap quando nao couber */
    .listjs-pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    /* Footer da tabela (info + items-per-page + paginacao):
       padrao em todas as listagens do sistema. Empilhar verticalmente. */
    .datatable-wrapper .d-flex.justify-content-between:has([data-list-pagination]) {
        flex-direction: column !important;
        gap: 0.6rem;
        align-items: stretch !important;
        padding: 0.75rem !important;
    }

    .datatable-wrapper .d-flex.justify-content-between:has([data-list-pagination]) > .d-flex {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 0.5rem;
    }

    .datatable-wrapper .d-flex.justify-content-between:has([data-list-pagination]) .col-auto {
        max-width: 100%;
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap;
    }

    .datatable-wrapper .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Toolbar com search-box: alinhar com a tabela de baixo.
       A tabela esta dentro de .card que tem largura 100% do .content.
       Para alinhar, o search-box precisa pegar 100% do .content tambem. */
    .row:has(.search-box) {
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row:has(.search-box) > [class*="col"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Toolbar em mobile vira grid 2x2:
         [botao Adicionar]  [export]
         [.... search-box ........]
       O col-auto vira "transparente" (display:contents) para os
       filhos virarem irmaos diretos da row. */
    .row:has(.search-box) {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "add export"
            "search search";
        gap: 0.5rem;
        align-items: center;
    }

    .row:has(.search-box) > .col {
        grid-area: add;
    }

    .row:has(.search-box) > .col-auto.d-flex {
        display: contents !important;
    }

    .row:has(.search-box) #export-dropdown-container {
        grid-area: export;
        margin: 0 !important;
    }

    .row:has(.search-box) > .col-auto > .search-box,
    .row:has(.search-box) .search-box {
        grid-area: search;
        margin: 0 !important;
    }

    /* Botoes filtros (sino, lupa, etc) que aparecem ao lado do search:
       agrupar com o export na linha 1 */
    .row:has(.search-box) .col-auto.d-flex > .btn,
    .row:has(.search-box) .col-auto.d-flex > button {
        grid-area: export;
    }

    .search-box,
    .search-box form,
    .search-box .form-control,
    .search-box .search-input {
        width: 100% !important;
    }

    /* Nav-pills do formulario de usuario: empilhar 1 por linha em mobile */
    ul#usuarioTabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        overflow: visible !important;
    }

    ul#usuarioTabs > li.nav-item {
        width: 100% !important;
        margin: 0 !important;
    }

    ul#usuarioTabs > li.nav-item > .nav-link {
        width: 100% !important;
        padding: 0.7rem 0.75rem !important;
        font-size: 0.85rem !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Tabelas: scroll horizontal APENAS dentro do .table-responsive.
       NAO usar overflow-x no .content/.datatable-wrapper —
       qualquer overflow num eixo forca o outro a auto, criando
       scroll vertical interno indesejado. */
    .datatable-wrapper {
        max-width: 100%;
    }

    .datatable-wrapper .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        /* Scroll-shadow: gradient fade direito indica mais conteudo.
           background-attachment: local some quando o scroll chega ao fim. */
        background:
            linear-gradient(to right, var(--phoenix-card-bg, #fff) 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0), var(--phoenix-card-bg, #fff) 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-color: var(--phoenix-card-bg, #fff);
        background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .dark .datatable-wrapper .table-responsive {
        background:
            linear-gradient(to right, var(--phoenix-card-bg, #16192c) 30%, rgba(0, 0, 0, 0)),
            linear-gradient(to right, rgba(0, 0, 0, 0), var(--phoenix-card-bg, #16192c) 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-color: var(--phoenix-card-bg, #16192c);
        background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .datatable-wrapper table.table {
        white-space: nowrap;
        margin-bottom: 0;
    }

    /* Hint visual flutuante: aparece em cima da tabela na primeira renderizacao */
    .datatable-wrapper .table-responsive::before {
        content: 'Deslize \2192';
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 2;
        font-size: 0.65rem;
        font-weight: 600;
        color: var(--phoenix-secondary-color, #6e7891);
        background: var(--phoenix-tertiary-bg, #f5f7fa);
        border-radius: 999px;
        padding: 2px 8px;
        pointer-events: none;
        opacity: 0.85;
        animation: tableScrollHint 4s ease-out forwards;
    }

    @keyframes tableScrollHint {
        0%, 70% { opacity: 0.85; }
        100% { opacity: 0; }
    }

    /* Form labels mais compactas */
    .form-label {
        margin-bottom: 0.25rem;
    }

    /* Modal-lg/xl viram fullscreen */
    .modal-lg,
    .modal-xl {
        max-width: 100%;
        margin: 0;
    }

    .modal-lg .modal-content,
    .modal-xl .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: none;
    }

    /* Select2 dropdown caber em mobile */
    .select2-results__options {
        max-height: 50vh !important;
    }

    /* Nav-tabs/pills com scroll horizontal */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
    }

    /* Utilitarios */
    .d-mobile-none { display: none !important; }
    .text-mobile-center { text-align: center !important; }
    .w-mobile-100 { width: 100% !important; }
}

/* Mostrar so em mobile */
@media (min-width: 768px) {
    .d-mobile-only { display: none !important; }
}

/* Cursor pointer em botoes/abas (vale em qualquer tamanho de tela) */
ul#usuarioTabs > li.nav-item > .nav-link {
    cursor: pointer !important;
}

/* SweetAlert em telas muito pequenas */
@media (max-width: 575.98px) {
    .swal2-popup {
        width: 92vw;
        max-width: 92vw;
    }
}