/* ============================================================
   Ajustes do painel para celular (≤ 767px, com alguns ≤ 575px)
   Carregado em todas as páginas (config/settings.php → global.css).
   Regras pequenas e genéricas; o que é específico de uma tela fica
   no blade/CSS daquela tela.
   ============================================================ */

/* ---------- Tabelas largas: pista de rolagem horizontal ----------
   Bootstrap já faz .table-responsive rolar, mas no celular não há
   barra visível e a tabela parece "cortada". A sombra na borda em
   que ainda há conteúdo avisa que dá para arrastar. */
.table-responsive,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--bs-body-bg, #fff) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to left,  var(--bs-body-bg, #fff) 30%, rgba(255, 255, 255, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%,   rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
.table-responsive > .table,
.table-responsive .dt-container,
.overflow-x-auto > * {
    /* A tabela não pode ter fundo próprio, senão tapa a sombra. */
    background: transparent;
}
[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .overflow-x-auto {
    background:
        linear-gradient(to right, var(--bs-body-bg) 30%, rgba(0, 0, 0, 0)),
        linear-gradient(to left,  var(--bs-body-bg) 30%, rgba(0, 0, 0, 0)) 100% 0,
        radial-gradient(farthest-side at 0 50%,   rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Tabelas em que a primeira coluna identifica a linha (nome do plano,
   nome da permissão, profissional): ela fica presa à esquerda enquanto
   o resto rola. Opt-in pela classe. */
@media (max-width: 767.98px) {
    .table-sticky-first > thead > tr > :first-child,
    .table-sticky-first > tbody > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bs-body-bg, #fff);
        box-shadow: 1px 0 0 var(--bs-border-color, #e5e7eb);
    }
    .table-sticky-first > thead > tr > :first-child { z-index: 2; }
}

@media (max-width: 767.98px) {
    /* Toolbar da página: título + ações empilham sem sobrar margem. */
    .app-toolbar .page-title { margin-bottom: .5rem; }
    .card-header { flex-wrap: wrap; }
    .card-header .card-toolbar { flex-wrap: wrap; gap: .5rem; }

    /* Botões soltos em linha (filtros, ações) quebram em vez de vazar. */
    .d-flex.gap-2:not(.flex-nowrap):not(.flex-column),
    .d-flex.gap-3:not(.flex-nowrap):not(.flex-column) {
        flex-wrap: wrap;
    }

    /* Modais ocupam a tela toda, com rolagem interna. */
    .modal-dialog:not(.modal-fullscreen) {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-dialog-scrollable .modal-body { max-height: calc(100vh - 12rem); }

    /* DataTables: paginação e contador em linhas separadas, centralizados. */
    .dt-container .dt-info { display: block; text-align: center; margin-bottom: .5rem; }
    .dt-container .dt-paging { display: flex; justify-content: center; }
    .dt-container .dt-paging .pagination { flex-wrap: wrap; justify-content: center; }
    .dt-container .dt-layout-row:last-child { flex-direction: column; align-items: center; }
}

@media (max-width: 575.98px) {
    /* Cards: menos respiro interno para sobrar largura para o conteúdo. */
    .card .card-body { padding-left: 1.25rem; padding-right: 1.25rem; }
    .card .card-header { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Grupo de botões no topo de página vira coluna, cada botão largo. */
    .page-actions,
    .card-toolbar > .d-flex.align-items-center.gap-2 {
        width: 100%;
    }

    /* Rodapé de formulário: botões lado a lado, largura total. */
    .card-footer .d-flex.justify-content-end { flex-wrap: wrap; gap: .5rem; }
    .card-footer .d-flex.justify-content-end > .btn { flex: 1 1 auto; }

    /* Breadcrumb não vaza: quebra linha. */
    .breadcrumb { flex-wrap: wrap; }
}