/**
 * innova8 - responsividade das paginas de listagem
 * ------------------------------------------------
 * Afeta: clientareaproducts, clientareadomains, clientareainvoices,
 *        supportticketslist e qualquer tela que use includes/tablelist.tpl.
 *
 * Carregado DEPOIS de custom.css. Nenhum arquivo do tema foi editado.
 * Depende de listas-responsivas.js (rotulos das colunas).
 */


/* =========================================================================
 * 1. Remove o corte do container
 *
 * custom.css linha 2596: .table-container { overflow: hidden }
 * Isso corta o excedente sem oferecer rolagem. Aqui vira rolagem lateral,
 * que serve de rede de segurança para qualquer tabela nao coberta pelo
 * layout empilhado do item 2.
 * ========================================================================= */

.table-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================================
 * 2. LAYOUT EMPILHADO NO CELULAR
 *
 * Abaixo de 768px cada linha da tabela vira um cartao, e cada celula uma
 * linha "Rotulo: valor". O nome da coluna vem do atributo data-rot, que o
 * listas-responsivas.js copia do cabecalho.
 *
 * Independe da extensao Responsive do DataTables, que nao esta atuando
 * nesta instalacao.
 * ========================================================================= */

@media (max-width: 767px) {

    #tableServicesList,
    #tableDomainsList,
    #tableInvoicesList,
    #tableTicketsList {
        display: block;
        width: 100% !important;
        border: 0;
    }

    #tableServicesList thead,
    #tableDomainsList thead,
    #tableInvoicesList thead,
    #tableTicketsList thead {
        display: none;
    }

    #tableServicesList tbody,
    #tableDomainsList tbody,
    #tableInvoicesList tbody,
    #tableTicketsList tbody {
        display: block;
        width: 100%;
    }

    #tableServicesList tbody > tr,
    #tableDomainsList tbody > tr,
    #tableInvoicesList tbody > tr,
    #tableTicketsList tbody > tr {
        display: block;
        width: 100%;
        margin: 0 0 12px 0;
        padding: 6px 0;
        border: 1px solid #e6e8ec;
        border-radius: 6px;
        background: #fff;
    }

    #tableServicesList tbody > tr > td,
    #tableDomainsList tbody > tr > td,
    #tableInvoicesList tbody > tr > td,
    #tableTicketsList tbody > tr > td {
        display: block;
        width: 100% !important;
        min-height: 0;
        padding: 7px 14px 7px 42% !important;
        position: relative;
        border: 0 !important;
        text-align: left !important;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* nome da coluna */
    #tableServicesList tbody > tr > td:before,
    #tableDomainsList tbody > tr > td:before,
    #tableInvoicesList tbody > tr > td:before,
    #tableTicketsList tbody > tr > td:before {
        content: attr(data-rot);
        position: absolute;
        left: 14px;
        top: 7px;
        width: 36%;
        padding-right: 8px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.5;
        text-transform: uppercase;
        color: #6b7a99;
        white-space: normal;
    }

    /* celulas sem cabecalho (icone, botoes de acao) ocupam a linha toda */
    #tableServicesList tbody > tr > td[data-rot=""],
    #tableDomainsList tbody > tr > td[data-rot=""],
    #tableInvoicesList tbody > tr > td[data-rot=""],
    #tableTicketsList tbody > tr > td[data-rot=""] {
        padding-left: 14px !important;
    }

    #tableServicesList tbody > tr > td[data-rot=""]:before,
    #tableDomainsList tbody > tr > td[data-rot=""]:before,
    #tableInvoicesList tbody > tr > td[data-rot=""]:before,
    #tableTicketsList tbody > tr > td[data-rot=""]:before {
        display: none;
    }

    /* botoes de acao ficam largos e faceis de tocar */
    #tableServicesList tbody > tr > td[data-rot=""] .btn,
    #tableDomainsList tbody > tr > td[data-rot=""] .btn,
    #tableInvoicesList tbody > tr > td[data-rot=""] .btn,
    #tableTicketsList tbody > tr > td .btn {
        display: inline-block;
        margin: 3px 4px 3px 0;
    }

    /* mensagem de tabela vazia nao vira cartao */
    #tableServicesList tbody > tr > td.dataTables_empty,
    #tableDomainsList tbody > tr > td.dataTables_empty,
    #tableInvoicesList tbody > tr > td.dataTables_empty,
    #tableTicketsList tbody > tr > td.dataTables_empty {
        padding: 20px 14px !important;
        text-align: center !important;
    }

    #tableServicesList tbody > tr > td.dataTables_empty:before,
    #tableDomainsList tbody > tr > td.dataTables_empty:before,
    #tableInvoicesList tbody > tr > td.dataTables_empty:before,
    #tableTicketsList tbody > tr > td.dataTables_empty:before {
        display: none;
    }

    /* badges de status nao quebram no meio */
    table.dataTable tbody .status {
        white-space: nowrap;
    }
}


/* =========================================================================
 * 3. Barra de controles: busca, paginacao, "exibir N resultados"
 *
 * Nenhum tratamento para tela estreita no tema: os elementos ficam lado a
 * lado e estouram a largura.
 *
 * NOTA: nao usar overflow:hidden aqui. .listtable e .dataTables_wrapper
 * ficam entre o .table-container e a tabela; cortar neles anula a rolagem
 * do item 1.
 * ========================================================================= */

@media (max-width: 767px) {

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        max-width: 100%;
        text-align: left;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 6px 0 !important;
    }

    .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100% !important;
        max-width: 100%;
    }

    .dataTables_wrapper .dataTables_length select {
        max-width: 120px;
    }

    .dataTables_wrapper .dataTables_paginate .pagination {
        display: flex;
        flex-wrap: wrap;
        margin: 8px 0 0;
    }

    .dataTables_wrapper .dataTables_paginate .pagination > li > a,
    .dataTables_wrapper .dataTables_paginate .pagination > li > span {
        padding: 6px 11px;
    }
}


/* =========================================================================
 * 4. Linhas expandidas, caso a extensao Responsive volte a funcionar
 * ========================================================================= */

table.dataTable > tbody > tr > td.child {
    padding: 0 !important;
    background: #f7f8fa;
}

table.dataTable ul.dtr-details {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 12px 8px;
    list-style: none;
}

table.dataTable ul.dtr-details > li {
    display: block;
    padding: 7px 0;
    border-bottom: 1px solid #e6e8ec;
    white-space: normal;
    word-wrap: break-word;
}

table.dataTable ul.dtr-details > li:last-child {
    border-bottom: 0;
}

table.dataTable ul.dtr-details > li > .dtr-title {
    display: inline-block;
    min-width: 42%;
    padding-right: 10px;
    font-weight: 600;
    color: #6b7a99;
    vertical-align: top;
}