/*
 * Shared compact table UI.
 * Keep table presentation here so every authenticated Blade view inherits it.
 */
.main-content {
    --table-row-height: 2.5rem;
    --table-viewport-height: clamp(18rem, calc(100vh - 25.5rem), 34rem);
    --table-border-color: #e9edf2;
    --table-heading-bg: #f7f9fc;
    --table-heading-color: #667085;
    --table-body-color: #344054;
    --table-accent: #159e96;
}

/* Table cards */
.main-content .card:has(.table-responsive),
.main-content .card:has(.dataTables_wrapper) {
    overflow: hidden;
    border: 1px solid rgba(25, 43, 69, .08);
    border-radius: .8rem;
    box-shadow: 0 6px 20px rgba(28, 43, 67, .06);
}

.main-content .card:has(.table-responsive)>.card-header,
.main-content .card:has(.dataTables_wrapper)>.card-header {
    padding: .75rem 1rem;
}

.main-content .card:has(.table-responsive)>.card-body,
.main-content .card:has(.dataTables_wrapper)>.card-body {
    padding: .75rem;
}

/* A compact viewport sized for a header and ten standard rows. */
.main-content .table-responsive,
.main-content .dataTables_scrollBody {
    width: 100%;
    height: auto !important;
    max-height: var(--table-viewport-height) !important;
    overflow: auto !important;
    scrollbar-gutter: stable;
    scrollbar-width: auto !important;
    scrollbar-color: #7b8ba1 #edf2f7 !important;
}
.main-content .dataTables_scrollBody::-webkit-scrollbar {
    width: 4px;
    height: 6px;
}

.main-content .table-responsive::-webkit-scrollbar-thumb,
.main-content .dataTables_scrollBody::-webkit-scrollbar-thumb {
    min-height: 2.75rem;
    border: 3px solid #edf2f7;
    border-radius: 999px;
    background: #7b8ba1 !important;
}

.main-content .table-responsive::-webkit-scrollbar-thumb:hover,
.main-content .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: #56667d !important;
}

/* Bootstrap, report, and feature-specific tables share the same density. */
.main-content .table-responsive>table,
.main-content table.table,
.main-content table.reports-table,
.main-content table[class$="-table"] {
    margin-bottom: 0;
    color: var(--table-body-color);
    font-size: .75rem;
    line-height: 1.3;
}

.main-content .table-responsive table thead,
.main-content .dataTables_scrollHead table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.main-content .table-responsive table thead th,
.main-content .dataTables_scrollHead table thead th,
.main-content table.table thead th,
.main-content table.reports-table thead th,
.main-content table[class$="-table"] thead th {
    padding: .55rem .7rem !important;
    border-bottom: 1px solid var(--table-border-color) !important;
    background: var(--table-heading-bg) !important;
    color: var(--table-heading-color) !important;
    font-size: .65rem !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-content .table-responsive table tbody td,
.main-content table.table tbody td,
.main-content table.reports-table tbody td,
.main-content table[class$="-table"] tbody td {
    height: var(--table-row-height);
    padding: .48rem .7rem !important;
    border-bottom: 1px solid var(--table-border-color);
    color: var(--table-body-color);
    font-size: .75rem !important;
    line-height: 1.3;
    vertical-align: middle;
}

.main-content .table-responsive table tbody tr:last-child td {
    border-bottom: 0;
}

.main-content .table-responsive table tbody tr {
    transition: background-color .15s ease;
}

.main-content .table-responsive table tbody tr:hover {
    background: #f6fbfb;
}

.main-content .table-responsive td p,
.main-content .table-responsive td span:not(.badge):not(.material-icons),
.main-content .table-responsive td a:not(.btn) {
    font-size: inherit !important;
    line-height: inherit;
}

.main-content table .text-xxs {
    font-size: .65rem !important;
}

.main-content .table-responsive td p {
    margin-bottom: 0;
}

/* Keep media thumbnails from making an otherwise compact row oversized. */
.main-content .table-responsive tbody img:not(.avatar):not(.avatar-sm):not(.avatar-md):not(.avatar-lg) {
    width: 1.75rem !important;
    height: 1.75rem !important;
    max-width: 1.75rem;
    max-height: 1.75rem;
    object-fit: cover;
    border: 1px solid #e1e7ee;
    border-radius: .4rem;
}

.main-content .table-responsive tbody a.image-unavailable {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px dashed #d8dee8;
    border-radius: .4rem;
    color: #98a2b3;
    background: #f8fafc;
}

.main-content .table-responsive tbody a.image-unavailable::after {
    content: "—";
    font-size: .7rem;
}

.main-content .table-responsive .badge {
    padding: .3rem .5rem;
    font-size: .62rem;
}

.main-content .table-responsive .btn,
.main-content .table-responsive button:not(.page-link) {
    min-height: 1.75rem;
    padding: .3rem .55rem;
    font-size: .68rem;
    line-height: 1.1;
}

/* jQuery DataTables controls */
.main-content .dataTables_wrapper {
    padding: .75rem;
    color: var(--table-heading-color);
    font-size: .72rem;
}

.main-content .dataTables_wrapper .dataTables_length,
.main-content .dataTables_wrapper .dataTables_filter,
.main-content .dataTables_wrapper .dataTables_info,
.main-content .dataTables_wrapper .dataTables_paginate {
    margin: 0 0 .6rem;
    font-size: .7rem;
}

.main-content .dataTables_wrapper .dataTables_length select,
.main-content .dataTables_wrapper .dataTables_filter input {
    min-height: 1.9rem;
    padding: .3rem .5rem;
    border: 1px solid #d8dee8;
    border-radius: .4rem;
    background: #fff;
    font-size: .7rem;
}

.main-content .dataTables_wrapper .dataTables_paginate .paginate_button,
.main-content .pagination .page-link {
    min-width: 1.9rem;
    min-height: 1.9rem;
    margin: 0 .1rem;
    padding: .35rem .55rem !important;
    border: 1px solid #e1e6ed !important;
    border-radius: .4rem !important;
    font-size: .68rem;
    line-height: 1.1;
}

.main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.main-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.main-content .pagination .page-item.active .page-link {
    border-color: var(--table-accent) !important;
    background: var(--table-accent) !important;
    color: #fff !important;
}

@media (max-width: 767.98px) {

    .main-content .card:has(.table-responsive)>.card-body,
    .main-content .card:has(.dataTables_wrapper)>.card-body,
    .main-content .dataTables_wrapper {
        padding: .5rem;
    }

    .main-content .table-responsive table tbody td,
    .main-content table.table tbody td,
    .main-content table.reports-table tbody td,
    .main-content table[class$="-table"] tbody td {
        padding-inline: .55rem !important;
    }
}