/* Admin modern tables — owned by card F2.

   Example (no .am-table-wrap in the markup: amDataTable's dom option generates it):

     <table class="am-table" id="t">
         <thead>
             <tr>
                 <th class="noExport"></th>
                 <th>Date</th>
                 <th>Reference</th>
                 <th class="am-right">Credit</th>
                 <th class="am-right">Debit</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td><button type="button" class="btn btn-sm">Edit</button></td>
                 <td class="am-num" data-sort="20261004">10/4/2026</td>
                 <td><a class="am-link am-mono" href="#">TX-1042</a></td>
                 <td class="am-right am-num am-is-in">$1,250.00</td>
                 <td class="am-right am-num am-is-zero">$0.00</td>
             </tr>
         </tbody>
     </table>

     amDataTable($('#t'), { order: [[1, 'desc']] });
*/

.am-admin .am-table-wrap {
    border: 1px solid var(--am-hair);
    border-radius: var(--am-radius-lg);
    background: var(--am-paper);
    overflow-x: auto;
}

.am-admin .am-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--am-text-base);
    color: var(--am-ink);
    background: var(--am-paper);
}

.am-admin .am-table.is-wide {
    min-width: 1080px;
    min-width: max(1080px, 100%);
}

.am-admin .am-table thead th {
    padding: 11px 10px;
    background: var(--am-surface);
    border-top: 0;
    border-bottom: 1px solid var(--am-hair);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--am-slate);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.am-admin .am-table thead .sorting::before,
.am-admin .am-table thead .sorting::after,
.am-admin .am-table thead .sorting_asc::before,
.am-admin .am-table thead .sorting_asc::after,
.am-admin .am-table thead .sorting_desc::before,
.am-admin .am-table thead .sorting_desc::after {
    bottom: 50%;
    transform: translateY(50%);
    color: var(--am-gray);
}

/* The sort arrows sit in the header's right padding, so right-aligned body and footer cells get the same padding:
   values and totals then line up under the header text. */
.am-admin .am-table.dataTable thead th.am-right,
.am-admin .am-table.dataTable tbody td.am-right,
.am-admin .am-table.dataTable tfoot td.am-right {
    padding-right: 30px;
}

.am-admin .am-table tbody td {
    padding: 11px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--am-hair-2);
    font-size: var(--am-text-base);
    color: var(--am-ink);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.am-admin .am-table tbody tr:last-child td {
    border-bottom: 0;
}

.am-admin .am-table tbody tr:hover > td {
    background: var(--am-surface);
}

.am-admin .am-table.table-striped tbody tr:nth-of-type(odd),
.am-admin .am-table.table-hover tbody tr:hover {
    background-color: transparent;
}

.am-admin .am-table .am-right {
    text-align: right;
}

.am-admin .am-table .am-center {
    text-align: center;
}

.am-admin .am-table td label {
    margin: 0;
    font-weight: inherit;
}

.am-admin .am-table .am-is-zero {
    color: var(--am-faint);
    font-weight: 400;
}

.am-admin .am-table .am-is-in {
    color: var(--am-accent);
}

.am-admin .am-table .am-is-out {
    color: var(--am-navy-2);
}

.am-admin .am-table .am-link {
    color: var(--am-blue);
}

.am-admin .am-table .am-link:hover {
    color: var(--am-navy-2);
}

.am-admin .am-table td.dataTables_empty {
    padding: 28px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--am-gray);
    white-space: normal;
}

.am-admin .am-table tbody tr:hover > td.dataTables_empty {
    background: transparent;
}

.am-admin .am-dt-controls,
.am-admin .am-dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.am-admin .am-dt-controls {
    margin-bottom: 12px;
}

/* Page toolbars moved onto the controls row by amDataTable (data-dt-slot) drop their own spacing; a panel moved
   under the row (data-dt-under) keeps a gap to the table. */
.am-admin .am-dt-left > [data-dt-slot] {
    margin: 0;
}

.am-admin .dataTables_wrapper > [data-dt-under] {
    margin-bottom: 12px;
}

.am-admin .am-dt-footer {
    margin-top: 12px;
}

/* .am-dt-left is the top-left slot pages fill with their filter chips; .am-dt-foot is the footer's own left slot
   (row count + page size) and must keep a different name, or chips appended to ".am-dt-left" land in both. */
.am-admin .am-dt-left,
.am-admin .am-dt-foot,
.am-admin .am-dt-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.am-admin .dataTables_wrapper .dataTables_length,
.am-admin .dataTables_wrapper .dataTables_filter {
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.am-admin .dataTables_wrapper .dataTables_length label,
.am-admin .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 7px;
    float: none;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--am-slate);
    white-space: nowrap;
}

.am-admin .dataTables_wrapper .dataTables_length select,
.am-admin .dataTables_wrapper .dataTables_filter input {
    height: auto;
    margin: 0;
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-sm);
    font-family: var(--am-font);
    font-size: 13px;
    color: var(--am-ink);
    background-color: var(--am-paper);
}

.am-admin .dataTables_wrapper .dataTables_length select {
    width: auto;
    padding: 5px 8px;
}

.am-admin .dataTables_wrapper .dataTables_filter input {
    width: 220px;
    max-width: 100%;
    padding: 6px 10px;
}

.am-admin .dataTables_wrapper .dataTables_filter input::placeholder {
    color: var(--am-faint);
}

.am-admin .dataTables_wrapper .dataTables_length select:focus,
.am-admin .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--am-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--am-accent-soft);
}

.am-admin .dataTables_wrapper .dataTables_info {
    float: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--am-slate);
    white-space: nowrap;
}

.am-admin .dataTables_wrapper .dataTables_paginate {
    float: none;
    margin: 0;
    padding: 0;
}

.am-admin .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
}

.am-admin .dataTables_wrapper .dataTables_paginate .page-link {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    line-height: 1.4;
    color: var(--am-ink-2);
    background-color: var(--am-paper);
    box-shadow: none;
}

.am-admin .dataTables_wrapper .dataTables_paginate .page-link:hover {
    color: var(--am-navy);
    background-color: var(--am-navy-soft);
}

.am-admin .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    color: var(--am-paper);
    background-color: var(--am-navy);
    border-color: var(--am-navy);
}

.am-admin .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: var(--am-faint);
    background-color: var(--am-paper);
    border-color: var(--am-hair);
}

.am-admin .dataTables_wrapper .dt-buttons {
    width: auto;
    margin: 0;
    text-align: left;
}

.am-admin .dataTables_wrapper .dt-buttons:empty {
    display: none;
}

.am-admin .dataTables_wrapper .dt-buttons .btn {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--am-navy-line);
    border-radius: var(--am-radius-md);
    font-family: var(--am-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--am-ink);
    background: var(--am-paper);
    box-shadow: none;
}

.am-admin .dataTables_wrapper .dt-buttons .btn:hover,
.am-admin .dataTables_wrapper .dt-buttons .btn:focus {
    color: var(--am-navy);
    background: var(--am-navy-soft);
    border-color: var(--am-navy-line);
}

.am-admin .dataTables_wrapper .dataTables_processing {
    padding: 10px 16px;
    border: 1px solid var(--am-hair);
    border-radius: var(--am-radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--am-ink-2);
    background-color: var(--am-paper);
    box-shadow: 0 6px 20px var(--am-navy-line);
}