/*!
 * hub-datatables-polish.css - one clean, calm look for every DataTable on the site. Loaded last (after hub-tables.css and
 * hub-automation-tables.css). Rows and controls ease in and out; nothing moves on its own. Rewritten 2026-10-06.
 * Every selector is prefixed with "html body" so it wins over the older table layers without !important.
 */

/* ---- tokens ---- */
html body .dt-container {
    --dtp-ink: #1e2a4a;
    --dtp-mute: #6b7689;
    --dtp-line: #e7eaf2;
    --dtp-soft: #f8f9fc;
    --dtp-hover: #f5f7fc;
    --dtp-field: #d6dbeb;
    --dtp-accent: #3a4aa6;
    --dtp-accent-soft: #eef0fb;
    color: var(--dtp-ink);
    font-size: 13px;
}

/* ---- header: small, quiet, uppercase; sortable columns show their state ---- */
html body table.table-neo > thead > tr > th {
    padding: 10px 14px;
    background: var(--dtp-soft);
    border-bottom: 1px solid var(--dtp-line);
    color: var(--dtp-mute);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
html body table.table-neo > thead > tr > th.sorting,
html body table.table-neo > thead > tr > th.sorting_asc,
html body table.table-neo > thead > tr > th.sorting_desc { cursor: pointer; user-select: none; }
html body table.table-neo > thead > tr > th.sorting_asc,
html body table.table-neo > thead > tr > th.sorting_desc,
html body table.table-neo > thead > tr > th:hover { color: var(--dtp-ink); }

/* ---- body: even spacing, one hairline, a soft hover ---- */
html body table.table-neo > tbody > tr > td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--dtp-line);
    color: var(--dtp-ink);
    font-size: 13px;
    vertical-align: middle;
    transition: background-color .18s ease;
}
html body table.table-neo > tbody > tr:last-child > td { border-bottom: 0; }
html body table.table-neo > tbody > tr:hover > td { background: var(--dtp-hover); }
html body table.table-neo > tbody { transition: opacity .18s ease; }
html body .dt-container.dt-processing table.table-neo > tbody { opacity: .45; }

/* ---- empty and no-match rows ---- */
html body table.table-neo > tbody > tr > td.dt-empty,
html body table.table-neo > tbody > tr > td.dataTables_empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--dtp-mute);
    font-size: 13px;
}

/* ---- controls: one height, one radius, a soft focus ring ---- */
html body .dt-container :is(select.form-select-sm, input[type="search"].form-control-sm, input[type="search"]) {
    height: 34px;
    border-color: var(--dtp-field);
    border-radius: 8px;
    font-size: 13px;
    color: var(--dtp-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body .dt-container :is(select.form-select-sm, input[type="search"]):focus {
    border-color: var(--dtp-accent);
    box-shadow: 0 0 0 3px rgba(84, 98, 194, .14);
    outline: 0;
}
html body .dt-container .dt-length label,
html body .dt-container .dt-search label { font-size: 12px; font-weight: 500; color: var(--dtp-mute); }

/* ---- footer: quiet count, calm pager ---- */
html body .dt-container .dt-info { font-size: 12px; color: var(--dtp-mute); }
html body .dt-container .pagination .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dtp-line);
    border-radius: 8px !important;
    color: var(--dtp-ink);
    font-size: 12.5px;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
html body .dt-container .pagination .page-link:hover { background: var(--dtp-accent-soft); border-color: var(--dtp-accent-soft); color: var(--dtp-accent); }
html body .dt-container .pagination .page-item.active .page-link { background: var(--dtp-accent); border-color: var(--dtp-accent); color: #fff; }
html body .dt-container .pagination .page-item.disabled .page-link { color: #b4bccc; background: var(--dtp-soft); }

/* ---- scroll wrappers: slim scrollbar, no clipped edges ---- */
html body .table-responsive { scrollbar-width: thin; scrollbar-color: rgba(138, 150, 156, .45) transparent; }

/* ---- motion: calm, and off for people who asked for less motion ---- */
@media (prefers-reduced-motion: reduce) {
    html body .dt-container *,
    html body table.table-neo * { transition: none !important; }
}

/* ---- automation consoles (.auto-page): one calm type scale for every table, toolbar and footer. The console tables are dense,
   so the text is a size smaller than the rest of the site. Set once here, so every console matches. ---- */
html body .auto-page .dt-toolbar:empty { display: none; }
html body .auto-page .dt-container { font-size: 12px; }
html body .auto-page table.table-neo > thead > tr > th { font-size: 10px; padding: 8px 12px; letter-spacing: .05em; }
html body .auto-page table.table-neo > tbody > tr > td { font-size: 12px; padding: 9px 12px; line-height: 1.4; }
html body .auto-page table.table-neo > tbody > tr > td .btn { font-size: 11.5px; }
html body .auto-page table.table-neo > tbody > tr > td.dt-empty,
html body .auto-page table.table-neo > tbody > tr > td.dataTables_empty { font-size: 12px; padding: 24px 12px; }
html body .auto-page [data-dt-band] { padding: 10px 12px; }
html body .auto-page [data-dt-band] .form-select,
html body .auto-page [data-dt-band] .form-control,
html body .auto-page [data-dt-band] input[type="search"],
html body .auto-page [data-dt-band] select,
html body .auto-page [data-dt-band] .input-group-text,
html body .auto-page [data-dt-band] .btn {
    font-size: 12px;
    height: 32px;
    min-height: 32px;
}
html body .auto-page [data-dt-band] .btn { padding: 0 10px; }
html body .auto-page .dt-container :is(select.form-select-sm, input[type="search"].form-control-sm, input[type="search"]) { font-size: 12px; height: 32px; }
html body .auto-page .dt-container .dt-length label,
html body .auto-page .dt-container .dt-search label,
html body .auto-page .dt-container .dt-info,
html body .auto-page .dt-container .dt-info-wrap { font-size: 11px; }
html body .auto-page .dt-container .pagination .page-link { font-size: 11.5px; height: 30px; min-width: 30px; padding: 0 8px; }
html body .auto-page .auto-bulk { font-size: 12px; }
html body .auto-page .auto-bulk .btn,
html body .auto-page .auto-bulk select { font-size: 12px; height: 30px; min-height: 30px; }
html body .auto-page .auto-bulk .fw-semibold { font-size: 10px; letter-spacing: .05em; }