/* Tables */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.panel-flush > .table-wrap,
.panel .table-wrap.is-flush,
.list-panel > .table-wrap,
.list-panel > form > .table-wrap { border: 0; border-radius: 0; }

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

th,
td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

tbody tr:last-child > td { border-bottom: 0; }
tbody tr:hover > td { background: var(--surface-soft); }
tr.is-link { cursor: pointer; }
tr.is-link:hover .row-link { text-decoration: underline; }
tr.is-selected > td { background: #f6f3ea; }
tr.is-muted > td { color: var(--muted); }

.row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.cell-sub { display: block; margin-top: 1px; color: var(--muted); font-size: 13px; font-weight: 400; }
.cell-strong { font-weight: 600; }

.numeric,
.table-number,
td.numeric,
th.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.date-value { white-space: nowrap; }
.cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.table-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

.record-select-cell { width: 40px; padding-right: 0; text-align: center; }
.record-select-cell input { display: inline-block; vertical-align: middle; }

.record-table[data-record-tools] .record-cell-content {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.record-table[data-record-tools] tr.is-expanded .record-cell-content { display: block; overflow: visible; }

/* List toolbar: search and the main filter stay visible, the rest folds away */
.list-panel {
    margin-bottom: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.list-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
}

.list-toolbar > * { margin: 0; }
.list-toolbar select { width: auto; min-width: 150px; }

.search-field { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-field .icon { position: absolute; top: 50%; left: 10px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search-field input { padding-left: 34px; }

.toolbar-spacer { flex: 1 1 auto; }

.filter-toggle[aria-expanded="true"] { background: var(--surface-muted); }
.filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.filter-panel-actions { display: flex; gap: var(--space-2); justify-content: flex-end; grid-column: -2 / -1; }

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
}

.filter-tag:hover { border-color: var(--control-line); color: var(--ink); }
.filter-tag .icon { color: var(--muted); }

.list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    color: var(--muted);
    font-size: 13px;
}

.list-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
}

/* Queue tabs with counts */
.tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 var(--space-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}

.list-panel > .tabs { margin: 0; padding: 0 var(--space-3); }

.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    margin-bottom: -1px;
    padding: 0 var(--space-3);
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.tab:hover { color: var(--ink); }
.tab.is-current { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }

.tab-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tab-count.is-attention { background: var(--danger); color: #fff; }

/* Selection bar: appears only while records are selected */
.bulk-bar {
    position: sticky;
    bottom: var(--space-4);
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) var(--space-4);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-float);
}

.bulk-bar .bulk-count { font-weight: 600; white-space: nowrap; }
.bulk-bar .bulk-fields { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; }
.bulk-bar select,
.bulk-bar input { width: auto; min-width: 200px; min-height: var(--control-height-sm); border-color: transparent; }
.bulk-bar .btn { min-height: var(--control-height-sm); padding: 5px 10px; font-size: 13px; }
.bulk-bar .btn-secondary { border-color: rgba(255, 255, 255, 0.3); background: transparent; color: #fff; }
.bulk-bar .btn-secondary:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.bulk-bar .btn-light { border-color: #fff; background: #fff; color: var(--ink); }
.bulk-bar .btn-light:hover:not(:disabled) { background: #ecece8; border-color: #ecece8; color: var(--ink); }
.bulk-bar .hint { color: rgba(255, 255, 255, 0.75); }

/* Empty and no-result states */
.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    color: var(--muted);
    text-align: center;
}

.empty-state .icon { color: #a2a69e; }
.empty-state h3 { color: var(--ink); font-size: 15px; }
.empty-state p { max-width: 46ch; margin: 0; }
.empty-state .btn { margin-top: var(--space-2); }
td.empty-cell { padding: 0; }
tbody tr:hover > td.empty-cell { background: transparent; }

/* Pagination */
.pagination { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }
.pagination:empty { display: none; }
.portal-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.portal-pagination-summary { margin: 0; color: var(--muted); font-size: 13px; }
.portal-pagination-links,
.portal-page-numbers { display: flex; align-items: center; gap: 4px; }

.portal-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

a.portal-page-link:hover { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.portal-page-link.is-current { background: var(--ink); color: #fff; }
.portal-page-link.is-disabled { color: #a2a69e; cursor: not-allowed; }
.portal-page-direction { min-width: 0; padding-inline: 10px; }

/* Narrow screens: each row becomes a compact two-line record */
@media (max-width: 720px) {
    .list-toolbar { padding: var(--space-3); }
    .search-field { flex-basis: 100%; max-width: none; }
    .list-toolbar select { flex: 1 1 140px; min-width: 0; }
    .filter-panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
    .filter-panel-actions { grid-column: auto; }
    .filter-panel-actions .btn { flex: 1 1 auto; }

    .table-wrap { overflow: visible; }
    .table-wrap > table:not(.table-scroll),
    .table-wrap > table:not(.table-scroll) > tbody { display: block; }
    .table-wrap > table:not(.table-scroll) > thead { display: none; }

    .table-wrap > table:not(.table-scroll) > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px 14px;
        padding: 12px var(--space-4);
        border-bottom: 1px solid var(--line);
    }

    .table-wrap > table:not(.table-scroll) > tbody > tr:last-child { border-bottom: 0; }

    .table-wrap > table:not(.table-scroll) > tbody > tr > td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent !important;
        color: var(--ink-2);
        font-size: 13px;
        text-align: left;
        white-space: normal;
    }

    .table-wrap > table:not(.table-scroll) > tbody > tr > td[data-label]:not(.cell-title):not(.cell-status):not(.no-label)::before {
        content: attr(data-label) ' ';
        color: var(--muted);
    }

    .table-wrap > table:not(.table-scroll) > tbody > tr > td.cell-title,
    .table-wrap > table:not(.table-scroll) > tbody > tr > td:first-child:not(.record-select-cell),
    .table-wrap > table:not(.table-scroll) > tbody > tr > td.record-select-cell + td {
        flex: 1 1 55%;
        order: -2;
        color: var(--ink);
        font-size: 14px;
    }

    .table-wrap > table:not(.table-scroll) > tbody > tr > td.cell-status { order: -1; margin-left: auto; }
    .table-wrap > table:not(.table-scroll) > tbody > tr > td.record-select-cell { order: -3; width: auto; }
    .table-wrap > table:not(.table-scroll) > tbody > tr > td.cell-actions,
    .table-wrap > table:not(.table-scroll) > tbody > tr > td.record-actions { flex-basis: 100%; margin-top: 6px; }
    .table-wrap > table:not(.table-scroll) > tbody > tr > td[colspan] { flex-basis: 100%; }
    .table-wrap > table:not(.table-scroll) .hide-mobile { display: none; }
    .table-wrap > table:not(.table-scroll) .record-cell-content { display: inline !important; }
    .table-wrap > table:not(.table-scroll) td:not(.cell-title) .cell-sub { display: inline; margin-left: 4px; }
    .table-wrap > table:not(.table-scroll) td:not(.cell-title) .cell-sub::before { content: '· '; }

    .table-scroll { min-width: 640px; }

    .bulk-bar { margin: var(--space-3); padding: var(--space-3); }
    .bulk-bar .bulk-fields { flex-basis: 100%; }
    .bulk-bar select, .bulk-bar input { flex: 1 1 100%; min-width: 0; }

    .portal-pagination { flex-direction: column; align-items: stretch; }
    .portal-page-numbers { display: none; }
    .portal-pagination-links { justify-content: space-between; }
}

.table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.table-tools .check { margin-right: auto; font-size: 13px; }

.list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--line);
}

.list-toolbar > .filter-panel {
    flex: 1 1 100%;
    margin: var(--space-1) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

@media (max-width: 720px) {
    .list-toolbar > .filter-panel { margin-inline: calc(-1 * var(--space-3)); }
}

.table-tools.inset { margin: 0; padding: var(--space-2) var(--space-4) 0; }
.table-tools.inset:empty { display: none; }

.date-range { display: inline-flex; align-items: center; gap: var(--space-2); }
.date-range label { color: var(--muted); font-weight: 400; }
.date-range input { width: auto; }

@media (max-width: 720px) {
    .date-range { flex: 1 1 100%; flex-wrap: wrap; }
    .date-range input { flex: 1 1 120px; }
}

.list-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
}

.list-footer-pages { flex: 1 1 auto; }
.per-page { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: 13px; }
.per-page label { color: var(--muted); font-weight: 400; }
.per-page select { width: auto; min-height: var(--control-height-sm); padding-block: 4px; }