/* ═══════════════════════════════════════════════════════════════
   DataTables, wearing the suite's own clothes.

   The library ships a stylesheet of its own, and it looks like the
   library: grey arrows, blue links, its own idea of a text box. None
   of that is this product, so the stylesheet is not loaded anywhere -
   this file dresses the markup DataTables generates in the tokens
   every other control already uses.

   One file for all three sites. The signature workspace loads it
   beside site.css and the two consoles beside shell.css; both of
   those declare the tokens below, so this has nothing of its own to
   declare and nothing to keep in step.
   ═══════════════════════════════════════════════════════════════ */

.dataTables_wrapper {
    font-size: 13px;
    color: var(--text-mute);
}

/* ── The row above the table: searching on the left, how many on the
      right. The search box is the reason most people are here, so it
      leads rather than sitting in a corner. ──────────────────────── */
.dt-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.dt-tools-right { margin-left: auto; }

.dataTables_filter { position: relative; }
.dataTables_filter label {
    display: block;
    margin: 0;
    font-size: 0;           /* the library's "Search:" text; the icon says it */
}
.dataTables_filter input {
    width: 240px;
    max-width: 100%;
    height: var(--control-height);
    padding: 0 10px 0 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-base) no-repeat 9px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%236b7d94' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' stroke='%236b7d94' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-body);
    transition: border-color .15s;
}
.dataTables_filter input::placeholder { color: var(--text-dim); }
.dataTables_filter input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-mute);
}
.dataTables_length select {
    height: var(--control-height);
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-base);
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-body);
}
.dataTables_length select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── The row below: what you are looking at, and how to move ───── */
.dt-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.dt-foot-right { margin-left: auto; }

.dataTables_info {
    font-size: 12px;
    color: var(--text-mute);
    padding: 0;
}

.dataTables_paginate { display: flex; gap: 4px; align-items: center; }
.dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-mute);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}
.dataTables_paginate .paginate_button:hover {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-hi);
    text-decoration: none;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-dim);
    cursor: default;
}
.dataTables_paginate .ellipsis { color: var(--text-dim); padding: 0 2px; }

/* ── Sortable headings ─────────────────────────────────────────── */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    padding-right: 24px;
    position: relative;
    user-select: none;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    line-height: 1;
}
/* Unsorted says "you may sort by this" quietly; the sorted column says
   which way, and says it in the accent so it is findable at a glance. */
table.dataTable thead th.sorting::after {
    content: "\25B2\25BC";
    letter-spacing: -2px;
    opacity: .3;
    color: var(--text-mute);
}
table.dataTable thead th.sorting_asc::after {
    content: "\25B2";
    color: var(--accent);
}
table.dataTable thead th.sorting_desc::after {
    content: "\25BC";
    color: var(--accent);
}
table.dataTable thead th.sorting:hover::after { opacity: .7; }

/* ── Nothing matched ──────────────────────────────────────────────
   The library's own message, in the voice the rest of the page uses:
   an empty table and a filter that matched nothing look identical
   otherwise, and the difference is the whole question. */
table.dataTable td.dataTables_empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--text-mute);
    font-size: 13px;
}

/* DataTables sets inline widths on the table; our tables are content
   sized and would otherwise jump about on the first draw. */
table.dataTable { margin: 0 !important; }

/* A framed table - one standing on its own rather than inside a card -
   keeps the controls inside the frame, on their own band above and below
   the rows, instead of letting them sit flush against the border. */
.pm-table-wrap > .dataTables_wrapper > .dt-tools,
.tl-table-wrap > .dataTables_wrapper > .dt-tools,
.g-table-wrap > .dataTables_wrapper > .dt-tools {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.pm-table-wrap > .dataTables_wrapper > .dt-foot,
.tl-table-wrap > .dataTables_wrapper > .dt-foot,
.g-table-wrap > .dataTables_wrapper > .dt-foot {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}
/* ...and inside a card the card's own padding is the inset already. */
.tl-card > .tl-table-wrap > .dataTables_wrapper > .dt-tools,
.tl-card > .g-table-wrap > .dataTables_wrapper > .dt-tools,
.g-card > .g-table-wrap > .dataTables_wrapper > .dt-tools,
.g-card > .tl-table-wrap > .dataTables_wrapper > .dt-tools {
    padding: 0 0 12px;
    border-bottom: 0;
}
.tl-card > .tl-table-wrap > .dataTables_wrapper > .dt-foot,
.tl-card > .g-table-wrap > .dataTables_wrapper > .dt-foot,
.g-card > .g-table-wrap > .dataTables_wrapper > .dt-foot,
.g-card > .tl-table-wrap > .dataTables_wrapper > .dt-foot {
    padding: 12px 0 0;
    border-top: 0;
}

/* A long list inside a card still scrolls sideways rather than
   stretching the page. */
.dataTables_wrapper .dataTables_scroll { width: 100%; }

@media (max-width: 700px) {
    .dataTables_filter input { width: 100%; }
    .dt-tools-right, .dt-foot-right { margin-left: 0; }
}