/* Portable data grid styles. Pairs with grid.js and DataTables' own
 * jquery.dataTables.min.css. Origin: fpbcs/css/fpbcs.css section 15.
 * Change the tokens below to match the project's palette; nothing else
 * needs editing. */
:root {
    --grid-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --grid-surface: #ffffff;
    --grid-surface-2: #f8f9fb;
    --grid-surface-3: #f1f3f6;
    --grid-text: #1f2937;
    --grid-text-muted: #6b7280;
    --grid-text-soft: #9ca3af;
    --grid-border: #e5e7eb;
    --grid-border-strong: #d1d5db;
    --grid-accent: #1a2561;          /* brand color: current page, sorted column, focus ring */
    --grid-focus: 0 0 0 3px rgba(26, 37, 97, .30);
    --grid-radius: 8px;
    --grid-control-h: 38px;
}

.grid-top,
.grid-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem .25rem;
}

.grid-top .dataTables_filter,
.grid-bottom .dataTables_length {
    margin-right: auto;
    float: none;
    text-align: left;
}

.dataTables_wrapper .dataTables_filter input {
    height: var(--grid-control-h);
    min-width: 260px;
    margin-left: 0;
    padding: 0 1rem;
    border: 1px solid var(--grid-border-strong);
    border-radius: 999px;
    background: var(--grid-surface);
    font-size: .875rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: 0;
    border-color: var(--grid-accent);
    box-shadow: var(--grid-focus);
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0;
    font-size: .8125rem;
    color: var(--grid-text-muted);
}

.grid-clear {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--grid-accent);
}

.dataTables_wrapper .dataTables_length select {
    height: 34px;
    padding: 0 .5rem;
    border: 1px solid var(--grid-border-strong);
    border-radius: var(--grid-radius);
    background: var(--grid-surface);
    font-size: .8125rem;
}

.dataTables_wrapper .dataTables_paginate {
    float: none;
    padding-top: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    padding: .3rem .6rem;
    margin-left: .15rem;
    border: 1px solid transparent !important;
    border-radius: var(--grid-radius);
    background: transparent !important;
    color: var(--grid-text-muted) !important;
    font-size: .8125rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--grid-surface-3) !important;
    color: var(--grid-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--grid-accent) !important;
    border-color: var(--grid-accent) !important;
    color: #fff !important;
}

table.dataTable thead tr.grid-filters th {
    padding: .25rem .3rem .45rem;
    background: var(--grid-surface-2);
    border-bottom: 1px solid var(--grid-border-strong);
}

.grid-filters input {
    width: 100%;
    min-width: 80px;
    height: 28px;
    padding: 0 .5rem;
    border: 1px solid var(--grid-border);
    border-radius: var(--grid-radius);
    background: var(--grid-surface);
    font: 500 .75rem/1 var(--grid-font);
    color: var(--grid-text);
    text-transform: none;
    letter-spacing: 0;
}

.grid-filters input::placeholder {
    color: var(--grid-text-soft);
    font-weight: 400;
}

.grid-filters input:focus {
    outline: 0;
    border-color: var(--grid-accent);
    box-shadow: var(--grid-focus);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--grid-accent);
}

table[data-grid-list].dataTable,
table[data-grid-report].dataTable {
    width: 100% !important;
}

table[data-grid-list].dataTable thead th {
    white-space: normal;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }

    .grid-top .dataTables_filter {
        width: 100%;
    }
}

/* drclaim: follow the UI v2 theme tokens (css/v2/app.css) when dark mode is on. */
:root[data-theme="dark"] {
    --grid-surface: var(--surface, #171d2d);
    --grid-surface-2: var(--surface-alt, #1d2437);
    --grid-surface-3: var(--thead-bg, #202841);
    --grid-text: var(--text, #e6e9f0);
    --grid-text-muted: var(--text-muted, #9aa3b5);
    --grid-text-soft: var(--placeholder, #7b8599);
    --grid-border: var(--border, #2b3449);
    --grid-border-strong: var(--border-strong, #3a4460);
    --grid-accent: var(--link, #7fb3ff);
    --grid-focus: 0 0 0 3px var(--focus, rgba(99, 155, 255, .35));
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
:root[data-theme="dark"] .grid-filters input {
    color: var(--grid-text);
}

:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #0f1420 !important;
}

/* drclaim: the DataTables sort images (images/sort_*.png) were never shipped,
 * so draw the sort indicator with text instead of a background image. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
    position: relative;
    padding-right: 1.4rem;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    content: "\2195";
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .75rem;
    opacity: .35;
}

table.dataTable thead .sorting_asc::after { content: "\2191"; opacity: 1; }
table.dataTable thead .sorting_desc::after { content: "\2193"; opacity: 1; }