/* transformando o Grid do ZK em "Cards" em telas pequenas */
/* aplicando transformação para telas médias e abaixo, conforme medida do Bootstrap */
/* arpfreitas@uem.br */
@media only screen and (max-width: 767.98px) {

    /* remove ajustes personalizados de responsividade do Grid com barra de rolagem horizontal, caso tenha */
    .responsive-grid-sm > .z-grid,
    .responsive-grid-md > .z-grid {
        min-width: unset;
    }

    /* esconde o header do Grid */
    .z-grid-header {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* transforma table/thead/tbody/tr/td em blocos empilhados */
    .z-grid-body table, thead, tbody, th, td, tr {
        display: block;
        float: left; /* ie9 fix */
        width: 100%;
        clear: both;
    }

    /* container = ".card" do Bootstrap */
    .z-grid-body tr {
        background-color: var(--bs-card-bg, #fff);
        border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, .175));
        border-radius: var(--bs-card-border-radius, .75rem) !important;
        /*box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);  "shadow-sm" */
        overflow: hidden;
        margin-bottom: 1.5rem !important;
        transition: box-shadow .15s ease-in-out;
    }

    /* container = ".card" [hover] */
    .z-grid-body tr:hover {
        /*box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);  leve elevação ao passar o mouse */
    }

    /* cada td = item de um ".list-group-flush" dentro do card */
    .z-grid-body td, .z-grid-body th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        border: none;
        padding: .0rem 1rem !important;
        text-align: right !important;
    }

    /* botões: remove a borda do último campo do card, alinha à direita */
    .z-grid-body tr td:last-child {
        border-bottom: none;
        justify-content: space-between;
        padding: .0rem 0.3rem .0rem 1rem !important; /* puxa os botões um pouco mais para a direita */
    }

    /* label */
    .z-grid-body td:before {
        content: attr(data-label);
        text-align: left;
        /*flex-shrink: 0; força não quebrar linha */
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color, #6c757d); /* label discreto, estilo "text-muted" */
        padding: 12px 16px;
    }

    /* opcional: destaca a primeira coluna como "título" do card (como um card-header) */
    .z-grid-body tr td:first-child {
        background-color: var(--bs-tertiary-bg, #f8f9fa);
        font-weight: 600;
        font-size: 1rem;
    }

    /* esconde o label - colocar a classe em algum filho do td */
    .z-grid-body tr td:has(.table_to_card_esconde_label_do_td)::before {
        display: none;

    }

    /* se o útimo item nao tiver label, entao alinha para à direita (botões?) */
    .z-grid-body tr td:last-child:has(.table_to_card_esconde_label_do_td) {
        justify-content: end!important;
    }


    /* td do penúltimo item alinhado justificado */
    .z-grid-body tr td:nth-last-child(2) {
        text-align: justify !important;
    }
}

/* ajuste para esconder o label do botão em tela grande */
@media (min-width: 767.98px) {
    .table_to_card_esconde_texto_do_botao {
        font-size: 0!important;
        height: 36px;
        line-height: 24px;
        min-height: 24px;
        vertical-align: middle !important;
    }
    .table_to_card_esconde_texto_do_botao i::before {
        font-size: 1rem !important;
        vertical-align: middle !important;
    }
    .table_to_card_esconde_texto_do_botao::after {
        font-size: 1rem !important;
        vertical-align: middle !important;
    }
}