/*
 * MlimiPrepay CRM - list table sizing.
 *
 * The AdminLTE defaults (16px text, 12px cell padding) are generous for the
 * kind of table this back-office shows: a farmer row carries a number, a name,
 * a phone, an account number and a status, and there are up to eleven columns.
 * At anything under about 1200px that pushed the whole page sideways.
 *
 * This tightens the list tables and lets DataTables' Responsive extension
 * collapse the columns that do not fit into an expandable row, rather than
 * forcing a horizontal scrollbar on the page.
 */

/* ------------------------------------------------ compact list tables */

table#list {
    font-size: 0.8125rem;
    width: 100% !important;
}

table#list > thead > tr > th {
    padding: 0.45rem 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

table#list > tbody > tr > td,
table#list > tbody > tr > th {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}

table#list small {
    font-size: 0.7rem;
    line-height: 1.2;
}

table#list .badge {
    font-size: 0.7rem;
    font-weight: 600;
}

/* Long UUID-ish references must wrap rather than widen the table. */
table#list code {
    font-size: 0.72rem;
    word-break: break-all;
}

/* The action control is the widest thing in most rows; shrink it. */
table#list .btn-sm,
table#list .btn {
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.4;
}

/* ------------------------------------------------ responsive collapse */

/* The expand/collapse control DataTables injects. */
table#list.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table#list.dtr-inline.collapsed > tbody > tr > th:first-child::before {
    top: 50%;
    transform: translateY(-50%);
    box-shadow: none;
    background-color: #007bff;
    height: 0.9rem;
    width: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.7rem;
}

/* Rows hidden into the child row, shown as label/value pairs. */
table#list + .dtr-details,
table#list .dtr-details {
    width: 100%;
}
table#list .dtr-details li {
    padding: 0.2rem 0 !important;
    border-bottom: 1px solid #f2f2f2;
}
table#list .dtr-title {
    min-width: 120px;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #6c757d;
}

/* ------------------------------------------------ wrapper chrome */

/* DataTables' own controls, scaled to match. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.8125rem;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    font-size: 0.8125rem;
    padding: 0.15rem 0.4rem;
}
.dataTables_wrapper .paginate_button {
    padding: 0.2rem 0.5rem !important;
}

/* A card should never be the reason the page scrolls sideways. */
.content-wrapper .container-fluid,
.card-body {
    max-width: 100%;
}

/* Narrow screens: let a stubborn table scroll inside its own card rather
   than dragging the whole page with it. */
@media (max-width: 767.98px) {
    .card-body > .dataTables_wrapper {
        overflow-x: auto;
    }
    table#list {
        font-size: 0.78rem;
    }
}

/* ------------------------------------------------ detail tables */

/* Read-only tables on the view/billing screens, same visual weight. */
.table-sm > tbody > tr > td,
.table-sm > thead > tr > th {
    padding: 0.35rem 0.5rem;
}