/**
 * Responsive tables.
 *
 * Two layers:
 *   1. A no-JS baseline that keeps any wide table inside its own horizontal
 *      scroll area instead of stretching the page.
 *   2. A stacked "card" layout for the document tables (Date / Document Title /
 *      View / Download) on phones, so long titles wrap in full instead of being
 *      cut off. Cells are tagged by js/responsive-tables.js.
 */

/* --------------------------------------------------------------------------
   1. Baseline: nothing overflows the page
   -------------------------------------------------------------------------- */

.form-tabel-etx-col {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cbk-table-scroll {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* DataTables-driven statistics tables keep their own markup - just let the
   generated wrapper scroll rather than push the page sideways. */
.dataTables_wrapper {
    max-width: 100%;
}

.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper > .row > div > table,
.dataTables_wrapper > table {
    max-width: 100%;
}

@media only screen and (max-width: 900px) {
    .dataTables_wrapper > table,
    .dataTables_wrapper > .row > div > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   2. Stacked cards for document tables on phones
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    .form-tabel-etx-col.cbk-rtable-wrap {
        overflow: visible;
        border-top-width: 6px;
    }

    table.cbk-rtable {
        display: block;
        width: 100%;
        min-width: 0;
        border: 0;
    }

    table.cbk-rtable > thead {
        display: none;
    }

    /* A single full-width header cell is a section caption, not column labels,
       so it stays visible above the cards. */
    table.cbk-rtable > thead.cbk-thead-caption {
        display: block;
    }

    table.cbk-rtable > thead.cbk-thead-caption tr,
    table.cbk-rtable > thead.cbk-thead-caption th {
        display: block;
        width: auto !important;
        padding: 14px 16px !important;
        border: 0 !important;
        text-align: left !important;
        font-size: 16px;
        line-height: 1.4;
    }

    table.cbk-rtable > tbody {
        display: block;
        width: 100%;
    }

    table.cbk-rtable > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        width: 100%;
        padding: 14px 16px;
        border: 0 !important;
        border-bottom: 1px solid #00C8FF !important;
    }

    table.cbk-rtable > tbody > tr:last-child {
        border-bottom: 0 !important;
    }

    table.cbk-rtable > tbody > tr > td {
        display: block;
        flex: 1 1 100%;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Column name above the value, for any cell that is not self-explanatory. */
    table.cbk-rtable > tbody > tr > td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-family: "Lexend", "Poppins", sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #6B7280;
    }

    /* Date reads as a card eyebrow - the value speaks for itself. */
    table.cbk-rtable > tbody > tr > td.cbk-cell-date {
        font-family: "Lexend", "Poppins", sans-serif;
        font-size: 13px !important;
        font-weight: 600;
        line-height: 1.3;
        color: #194C9F;
        text-transform: none !important;
    }

    table.cbk-rtable > tbody > tr > td.cbk-cell-date::before,
    table.cbk-rtable > tbody > tr > td.cbk-cell-title::before {
        content: none;
    }

    table.cbk-rtable > tbody > tr > td.cbk-cell-title {
        font-family: "Poppins", sans-serif;
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.45;
        color: #000;
    }

    /* Action buttons share one row and split the width evenly. */
    table.cbk-rtable > tbody > tr > td.cbk-cell-action {
        flex: 1 1 calc(50% - 5px);
        margin-top: 4px;
    }

    table.cbk-rtable > tbody > tr > td.cbk-cell-action::before {
        content: none;
    }

    table.cbk-rtable > tbody > tr > td.cbk-cell-action > .btn,
    table.cbk-rtable > tbody > tr > td.cbk-cell-action > a {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        font-size: 14px !important;
    }

    /* Loading / empty / "no documents found" rows. */
    table.cbk-rtable > tbody > tr > td[colspan] {
        flex: 1 1 100%;
        text-align: center !important;
    }

    table.cbk-rtable > tbody > tr > td[colspan]::before {
        content: none;
    }

    /* The starred label badge trails the title instead of floating away, at a
       size that does not open a gap when it wraps onto its own line. */
    table.cbk-rtable > tbody > tr > td .label-star {
        float: none;
        display: inline-block;
        vertical-align: middle;
        width: 36px;
        height: 35px;
        margin-left: 8px;
    }

    table.cbk-rtable > tbody > tr > td .label-star .label-text {
        font-size: 11px;
    }
}