/*
 * Utilitários responsivos compartilhados pelas telas internas (layouts.app).
 *
 * .page-compact  envolve o conteúdo de uma tela: reduz títulos, espaçamentos e botões.
 * .table-cards   numa <table>: no celular cada linha vira um cartão. Cada <td> mostra o
 *                rótulo de data-label; data-primary destaca a célula principal (sem rótulo)
 *                e data-actions alinha os botões no rodapé do cartão.
 */

.page-compact h2,
.page-compact .h2 {
    font-size: 1.35rem;
    margin-bottom: 0;
}

.page-compact h3,
.page-compact .h3 {
    font-size: 1.15rem;
}

.page-compact .card {
    border-radius: 14px;
}

.page-compact .table {
    margin-bottom: 0;
}

.page-compact .table > :not(caption) > * > * {
    padding: 8px 10px;
    vertical-align: middle;
}

.page-compact .table thead th {
    font-size: 0.82rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .page-compact h2,
    .page-compact .h2 {
        font-size: 1.1rem;
    }

    .page-compact .row.mb-4,
    .page-compact .mb-4 {
        margin-bottom: 10px !important;
    }

    .page-compact .card.mb-3 {
        margin-bottom: 10px !important;
    }

    .page-compact .card-body,
    .page-compact .card-body.p-4 {
        padding: 12px !important;
    }

    .page-compact .btn {
        font-size: 0.88rem;
    }

    /* 16px evita o zoom automático do iOS ao focar o campo */
    .page-compact .form-control,
    .page-compact .form-select {
        font-size: 16px;
    }

    /* ---- tabela -> cartões ---- */
    .table-cards,
    .table-cards > tbody,
    .table-cards > tbody > tr,
    .table-cards > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .table-cards > thead {
        display: none;
    }

    /* com o thead oculto sobra a borda superior escura do Bootstrap */
    .table-cards > tbody {
        border-top: none !important;
    }

    /* coluna flex para a célula principal (data-primary) subir ao topo do cartão, esteja onde estiver na tabela */
    .table-cards > tbody > tr {
        display: flex;
        flex-direction: column;
        padding: 9px 12px;
        margin-bottom: 8px;
        border: 1px solid #e3e8ee;
        border-radius: 12px;
        /* !important: o layout também carrega o Bootstrap 4, cujo table-striped pinta o <tr> */
        background: #fff !important;
        --bs-table-accent-bg: transparent;
    }

    .table-cards > tbody > tr:last-child {
        margin-bottom: 0;
    }

    .table-cards > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 2px 0 !important;
        border: none;
        background: none !important;
        box-shadow: none !important;
        font-size: 0.88rem;
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .table-cards > tbody > tr > td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        text-align: left;
        color: #6c757d;
    }

    .table-cards > tbody > tr > td:not([data-label])::before {
        display: none;
    }

    .table-cards > tbody > tr > td[data-primary] {
        order: -1;
        display: block;
        padding-bottom: 4px !important;
        font-size: 0.98rem;
        font-weight: 700;
        text-align: left;
    }

    .table-cards > tbody > tr > td[data-actions] {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 7px !important;
    }

    .table-cards > tbody > tr > td[colspan] {
        display: block;
        text-align: center;
    }

    /* células vazias ("-") não ocupam uma linha do cartão */
    .table-cards > tbody > tr > td[data-empty] {
        display: none;
    }
}

/*
 * .page-fill  a tela ocupa a altura da janela e só a lista rola por dentro.
 *             Dentro dela, .page-fill-body marca o cartão que cresce; a .table-responsive
 *             desse cartão é a área rolável. --page-offset = espaço vertical que o layout
 *             já consome (padding do .content): 40px no desktop, 78px no celular.
 */
@media (min-height: 520px) {
    .page-fill {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--page-offset, 40px));
        height: calc(100dvh - var(--page-offset, 40px));
    }

    .page-fill > * {
        flex-shrink: 0;
    }

    .page-fill > .page-fill-body {
        flex: 0 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .page-fill > .page-fill-body > .card,
    .page-fill > .card.page-fill-body {
        min-height: 0;
    }

    .page-fill .page-fill-body .card-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .page-fill .page-fill-body .card-body > * {
        flex-shrink: 0;
    }

    .page-fill .page-fill-body .table-responsive {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-fill .page-fill-body thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
        box-shadow: inset 0 -1px 0 #dee2e6;
    }
}

@media (max-width: 767.98px) and (min-height: 520px) {
    .page-fill {
        height: calc(100vh - var(--page-offset-mobile, 78px));
        height: calc(100dvh - var(--page-offset-mobile, 78px));
    }
}

@media (max-width: 767.98px) {
    /* no cartão o rótulo já diz o que é; o ícone decorativo só desalinha a linha */
    .table-cards > tbody > tr > td[data-label] > i.bi {
        display: none;
    }

    .page-compact .page-link {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
}

/* data-nowrap: datas, telefones e documentos não quebram linha na tabela (desktop) */
@media (min-width: 768px) {
    .table-cards > tbody > tr > td[data-nowrap] {
        white-space: nowrap;
    }
}

/*
 * .form-grid  num <form>: os .form-group viram uma grade (3 por linha no desktop, 2 no tablet,
 *             1 no celular). .fg-half mantém dois campos curtos lado a lado no celular;
 *             .fg-wide ocupa duas colunas. Títulos, alertas e botões ocupam a linha inteira.
 */
.form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px 14px;
}

.form-grid > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.form-grid > .form-group {
    grid-column: span 4;
    margin-bottom: 0 !important;
}

.form-grid > .form-group.fg-wide {
    grid-column: span 8;
}

.form-grid > h4,
.form-grid > h5 {
    margin: 6px 0 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e3e8ee;
    font-size: 1rem;
    font-weight: 700;
}

.form-grid > h4:first-of-type,
.form-grid > h5:first-of-type {
    margin-top: 0;
}

.form-grid .form-label {
    margin-bottom: 3px;
    font-size: 0.86rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .form-grid > .form-group,
    .form-grid > .form-group.fg-wide {
        grid-column: span 6;
    }
}

@media (max-width: 767.98px) {
    .form-grid {
        gap: 8px 10px;
    }

    .form-grid > .form-group,
    .form-grid > .form-group.fg-wide {
        grid-column: 1 / -1;
    }

    .form-grid > .form-group.fg-half {
        grid-column: span 6;
    }

    /* formulário longo: o botão de enviar fica sempre à vista no rodapé */
    .form-grid > button[type="submit"] {
        position: sticky;
        bottom: 8px;
        z-index: 5;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    }

    .form-grid > h4,
    .form-grid > h5 {
        margin-top: 2px;
        font-size: 0.92rem;
    }

    .form-grid .form-label {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}

/*
 * .page-flush  para telas que zeram o padding do layout (.content { padding: 0 !important }):
 *              no desktop não há nada a descontar da altura; no celular só o topo (62px).
 */
.page-flush {
    --page-offset: 0px;
    --page-offset-mobile: 62px;
    padding-top: 16px;
    padding-bottom: 16px;
}

@media (max-width: 767.98px) {
    .page-flush {
        padding-top: 0;
        padding-bottom: 12px;
    }

    /* cabeçalho da tela: título e botão na mesma linha, sem o botão quebrar em duas */
    .page-compact .btn-lg {
        padding: 7px 12px;
        font-size: 0.88rem;
    }

    .table-cards > tbody > tr > td[data-actions] .btn-group {
        flex-wrap: wrap;
    }

    .table-cards > tbody > tr > td img {
        max-width: 44px;
        height: auto;
    }
}

/* paginação com muitas páginas quebra linha em vez de estourar a largura */
.page-compact .pagination {
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .page-compact .pagination {
        justify-content: center;
    }
}

/*
 * .form-grid também reconhece campos sem a classe .form-group: um <div> (com ou sem .mb-3)
 * cujo primeiro filho é o <label>. .form-grid-2 usa duas colunas, para cartões estreitos.
 */
.form-grid > .mb-3:has(> label:first-child),
.form-grid > div:not([class]):has(> label:first-child) {
    grid-column: span 4;
    margin-bottom: 0 !important;
}

.form-grid > br {
    display: none;
}

.form-grid label {
    margin-bottom: 3px;
    font-size: 0.86rem;
    font-weight: 600;
}

.form-grid.form-grid-2 > .form-group,
.form-grid.form-grid-2 > .mb-3:has(> label:first-child),
.form-grid.form-grid-2 > div:not([class]):has(> label:first-child) {
    grid-column: span 6;
}

@media (max-width: 991.98px) {
    .form-grid > .mb-3:has(> label:first-child),
    .form-grid > div:not([class]):has(> label:first-child) {
        grid-column: span 6;
    }
}

@media (max-width: 767.98px) {
    .form-grid > .mb-3:has(> label:first-child),
    .form-grid > div:not([class]):has(> label:first-child),
    .form-grid.form-grid-2 > .form-group,
    .form-grid.form-grid-2 > .mb-3:has(> label:first-child),
    .form-grid.form-grid-2 > div:not([class]):has(> label:first-child) {
        grid-column: 1 / -1;
    }

    .form-grid > .fg-half,
    .form-grid.form-grid-2 > .fg-half {
        grid-column: span 6 !important;
    }
}