/* Global DataTables 3 theme. Load after the DataTables vendor stylesheet. */
:root {
    --dt-border: var(--line-200);
    --dt-hover: var(--mint-100);
    --dt-selected: var(--mint-200);
    --dt-control: var(--forest-900);
}

div.dt-container {
    color: var(--ink-600);
    font-family: var(--font);
    font-size: 13px;
}

div.dt-container .dt-layout-row {
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
}

div.dt-container .dt-layout-row.dt-layout-table {
    display: block;
    padding: 0;
}

div.dt-container .dt-layout-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

div.dt-container label { color: var(--ink-500); font-size: 12px; font-weight: 700; }
div.dt-container select.dt-input,
div.dt-container input.dt-input {
    min-height: 36px;
    border: 1.5px solid var(--line-300);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-900);
    font: 600 13px var(--font);
    outline: none;
}
div.dt-container select.dt-input { padding: 0 30px 0 10px; }
div.dt-container input.dt-input { width: min(240px, 100%); padding: 0 11px; }
div.dt-container select.dt-input:focus,
div.dt-container input.dt-input:focus { border-color: var(--forest-600); box-shadow: 0 0 0 3px rgba(31, 111, 92, .16); }

table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
    color: var(--ink-600);
    font: 13px var(--font);
}
table.dataTable thead > tr > th,
table.dataTable thead > tr > td {
    border-bottom: 1px solid var(--line-300) !important;
    background: var(--paper-100);
    color: var(--ink-500);
    font: 700 10.5px var(--mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
table.dataTable > tbody > tr { background: #fff; }
table.dataTable > tbody > tr:nth-child(even) { background: var(--paper-100); }
table.dataTable > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--mint-100); }
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th { border-top: 1px solid var(--paper-200); }
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px var(--mint-200); color: var(--ink-900); }
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover { color: var(--forest-900); }

div.dt-container .dt-info { color: var(--ink-400); font: 11px var(--mono); }
div.dt-container .dt-paging { display: flex; flex-wrap: wrap; gap: 4px; }
div.dt-container .dt-paging .dt-paging-button {
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    border: 1px solid transparent !important;
    border-radius: 7px;
    background: transparent !important;
    color: var(--ink-600) !important;
    font: 700 12px var(--font);
}
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) { border-color: var(--mint-200) !important; background: var(--mint-100) !important; color: var(--forest-900) !important; }
div.dt-container .dt-paging .dt-paging-button.current { border-color: var(--forest-900) !important; background: var(--forest-900) !important; color: var(--paper-50) !important; }
div.dt-container .dt-paging .dt-paging-button.disabled { color: var(--ink-400) !important; opacity: .55; }

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    border: 0;
    border-radius: 50%;
    background-color: var(--forest-600);
    box-shadow: none;
}
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child span.dtr-title { min-width: 130px; color: var(--ink-500); font: 700 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 600px) {
    div.dt-container .dt-layout-row { align-items: stretch; padding: 12px 14px; }
    div.dt-container .dt-layout-cell { flex-wrap: wrap; }
    div.dt-container input.dt-input { width: 100%; }
    div.dt-container .dt-paging { justify-content: flex-start; }
    table.dataTable > tbody > tr > td,
    table.dataTable > tbody > tr > th { padding-top: 12px; padding-bottom: 12px; }
}