/* Ajustes para celular e tablet.
   Tudo fica dentro de media query, então nada aqui muda a tela no desktop (>= 992px). */

/* ==========================================================
   Tablet e celular (< 992px)
   ========================================================== */
@media (max-width: 991.98px) {

    /* wrapper criado pelo responsivo-mobile.js em volta das tabelas que não tinham .table-responsive */
    .tabela-rolagem-mobile {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        /* tabela com margem lateral + width 100% sobrava alguns pixels e criava rolagem à toa */
        .tabela-rolagem-mobile > .table.m-1 {
            width: calc(100% - .5rem);
        }

        .tabela-rolagem-mobile > .table.m-2 {
            width: calc(100% - 1rem);
        }

        .tabela-rolagem-mobile > .table.m-3 {
            width: calc(100% - 2rem);
        }

    /* o app-content-header do layout é vazio, só ocupa espaço no topo */
    .app-main > .app-content-header {
        display: none;
    }

    .app-content > .container-fluid {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .app-content-header h1 {
        font-size: 1.4rem;
    }

    /* paginação do PagedList com muitas páginas estourava a largura */
    .pagination {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    /* botões do card-tools quebram linha em vez de vazar o card */
    .card-header > .card-tools {
        max-width: 100%;
        text-align: right;
    }

    /* botões que quebram linha não ficam grudados um no outro */
    .card-header .btn:not(.input-group .btn, .btn-group .btn, .btn-tool),
    .card-footer .btn:not(.input-group .btn, .btn-group .btn),
    .modal-body .btn:not(.input-group .btn, .btn-group .btn) {
        margin-top: .125rem;
        margin-bottom: .125rem;
    }

    /* grupos de opções (ex.: "Ordenar por" em Compras) quebram linha em vez de vazar a tela */
    .btn-group {
        flex-wrap: wrap;
    }

        .btn-group > .btn {
            flex: 1 1 auto;
        }

    /* campo de busca não pode sumir espremido pelos botões do input-group */
    .input-group > input.form-control:not([type]),
    .input-group > input.form-control[type="text"],
    .input-group > input.form-control[type="search"] {
        min-width: 9rem;
    }

    /* abas numa faixa só, rolando de lado, em vez de quebrar em 3-4 linhas e empurrar o conteúdo */
    .nav-tabs:not(.flex-column) {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

        .nav-tabs:not(.flex-column) .nav-item {
            flex-shrink: 0;
        }

    .nav-tabs .nav-link {
        padding: .4rem .65rem;
        white-space: nowrap;
    }

    /* dropdowns do topo (notificações/opções) cabem na tela */
    .app-header .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    /* FullCalendar: toolbar quebra linha no celular */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.15rem;
    }

    .card-body img,
    .modal-body img {
        max-width: 100%;
    }
}

/* ==========================================================
   rwd-table (telasmartphone.css): modo cartão vale abaixo de 1024px
   ========================================================== */
@media (max-width: 1023.98px) {

    /* botões de várias ações na mesma célula quebram linha em vez de vazar */
    .rwd-table td {
        flex-wrap: wrap;
        gap: .25rem;
        font-size: .8125rem;
    }

    /* célula sem rótulo (geralmente a de botões) não precisa reservar espaço pro rótulo */
    .rwd-table td:not([data-th])::before,
    .rwd-table td[data-th=""]::before {
        display: none;
    }

    .rwd-table td:not([data-th]),
    .rwd-table td[data-th=""] {
        justify-content: center;
    }

    /* texto longo quebrava pra fora da tela por causa do nowrap */
    .rwd-table td > span {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ==========================================================
   Celular (< 768px)
   ========================================================== */
@media (max-width: 767.98px) {

    .card-body {
        padding: .75rem;
    }

    /* cabeçalho com título + busca/botões quebra linha em vez de espremer o título */
    .modal-header {
        padding: .75rem;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .modal-body {
        padding: .75rem;
    }

    .modal-title {
        font-size: 1.05rem;
    }

    /* botões do rodapé do modal ocupam a largura, fica mais fácil de acertar com o dedo */
    .modal-footer > .btn {
        flex: 1 1 auto;
    }

    .breadcrumb {
        font-size: .85rem;
        margin-bottom: .25rem;
    }

    /* para elementos com largura fixa em % (ex.: style="width:30%") que ficam minúsculos no celular */
    .largura-total-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* tabela-mobile: cada linha vira um cartão com "rótulo em cima, valor embaixo".
       O rótulo vem do data-th da célula; quando não tem, o responsivo-mobile.js copia do thead. */
    table.tabela-mobile,
    table.tabela-mobile > tbody,
    table.tabela-mobile > tfoot,
    table.tabela-mobile > tbody > tr,
    table.tabela-mobile > tfoot > tr,
    table.tabela-mobile > tbody > tr > td,
    table.tabela-mobile > tbody > tr > th,
    table.tabela-mobile > tfoot > tr > td,
    table.tabela-mobile > tfoot > tr > th {
        display: block;
        width: 100%;
    }

    /* sem nada clicável o cabeçalho só repetiria os rótulos que já estão no cartão */
    table.tabela-mobile:not(.thead-interativo) > thead {
        display: none;
    }

    /* com ordenação/selecionar todos ele continua visível como "chips".
       O fundo do Bootstrap fica nas células; como os th viram chips, o thead assume o fundo (table-dark etc.) */
    table.tabela-mobile.thead-interativo > thead {
        display: block;
        background-color: var(--bs-table-bg);
        border-radius: .5rem;
        margin-bottom: .5rem;
    }

        table.tabela-mobile > thead > tr {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            padding: .5rem;
        }

            table.tabela-mobile > thead > tr > th {
                display: block;
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
                border: 1px solid rgba(128, 128, 128, .45);
                padding: .2rem .6rem;
                border-radius: 999px;
                background-color: transparent;
                font-size: .8rem;
                white-space: nowrap;
            }

                /* faixa de título/botão que ocupava a largura toda continua assim, sem cara de chip */
                table.tabela-mobile > thead > tr > th.th-titulo-mobile {
                    flex-basis: 100%;
                    border: 0;
                    border-radius: 0;
                    padding: .25rem;
                    white-space: normal;
                    font-size: inherit;
                }

                /* th-vazio-mobile é marcado pelo responsivo-mobile.js (th só com espaços não pega no :empty) */
                table.tabela-mobile > thead > tr > th:empty,
                table.tabela-mobile > thead > tr > th.th-vazio-mobile,
                table.tabela-mobile > thead > tr.th-vazio-mobile {
                    display: none;
                }

    table.tabela-mobile > tbody > tr {
        border: 1px solid #dee2e6;
        border-radius: .5rem;
        margin-bottom: .75rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    }

        /* registro que ocupa mais de uma linha (ex.: compra com 3 linhas): continua-mobile emenda com a linha de baixo */
        table.tabela-mobile > tbody > tr.continua-mobile {
            margin-bottom: 0;
            border-bottom: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            box-shadow: none;
        }

            table.tabela-mobile > tbody > tr.continua-mobile + tr {
                border-top: 1px dashed #dee2e6;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

        table.tabela-mobile > tbody > tr > td,
        table.tabela-mobile > tbody > tr > th,
        table.tabela-mobile > tfoot > tr > td,
        table.tabela-mobile > tfoot > tr > th {
            text-align: left !important;
            white-space: normal !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            border: 0;
            border-bottom: 1px solid rgba(0, 0, 0, .06);
            padding: .45rem .75rem;
        }

            table.tabela-mobile > tbody > tr > td:last-child {
                border-bottom: 0;
            }

            /* célula vazia só ocuparia uma faixa em branco no cartão */
            table.tabela-mobile > tbody > tr > td:empty {
                display: none;
            }

            table.tabela-mobile > tbody > tr > td[data-th]:not([data-th=""])::before,
            table.tabela-mobile > tfoot > tr > td[data-th]:not([data-th=""])::before {
                content: attr(data-th);
                display: block;
                font-size: .7rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .3px;
                opacity: .65;
                margin-bottom: .15rem;
            }

            table.tabela-mobile > tbody > tr > td .btn:not(.input-group .btn, .btn-group .btn) {
                margin-top: .125rem;
                margin-bottom: .125rem;
            }
}

/* ==========================================================
   Celular pequeno (< 576px)
   ========================================================== */
@media (max-width: 575.98px) {

    /* fotos dos cards de salas/veículos têm 274px fixos no style; no celular cada card ocupava a tela inteira */
    img.card-img-top[style*="274px"] {
        height: 180px !important;
    }

    /* modal grande vira tela cheia no celular, senão sobra uma faixa inútil nas bordas */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: none;
        margin: 0;
        min-height: 100%;
    }

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

        /* no scrollable o Bootstrap desconta a margem da altura; sem margem tem que ocupar tudo */
        .modal-dialog.modal-lg.modal-dialog-scrollable,
        .modal-dialog.modal-xl.modal-dialog-scrollable {
            height: 100%;
        }
}

/* ==========================================================
   Celular com tela de toque: botões maiores e campos com 16px
   (o Safari dá zoom em qualquer input com fonte menor que 16px)
   ========================================================== */
@media (max-width: 767.98px) and (pointer: coarse) {
    /* btn-sm tem ~31px de altura, pouco pra acertar com o dedo */
    .btn-sm:not(.btn-tool) {
        --bs-btn-padding-y: .4rem;
        --bs-btn-padding-x: .7rem;
    }

    .form-control,
    .form-select,
    .select2-container .select2-selection,
    .select2-container .select2-search__field {
        font-size: 16px;
    }
}