.ds-table-wrap {
    background: var(--surface-card);
    border: var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.ds-table th {
    padding: 11px 16px;
    background: var(--surface-subtle);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.ds-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--color-heading);
    vertical-align: middle;
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--surface-subtle); }
/* Row state: overdue / warning */
.ds-table tr.ds-row--warn td        { background: var(--color-red-light) !important; }
.ds-table tr.ds-row--warn:hover td  { background: var(--color-red-border) !important; }
/* Action link inside table cell */
.ds-table-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    transition: .15s ease;
    white-space: nowrap;
}
.ds-table-link--view          { color: var(--ds-indigo); background: var(--ds-indigo-light); }
.ds-table-link--view:hover    { background: var(--ds-indigo-border); }
.ds-table-link--edit          { color: var(--ds-indigo); background: var(--ds-indigo-light); }
.ds-table-link--edit:hover    { background: var(--ds-indigo-border); }
.ds-table-link--delete        { color: var(--color-red); background: var(--color-red-light); }
.ds-table-link--delete:hover  { background: var(--color-red-border); }
.ds-table-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
/* Progress bar inside table */
.ds-progress-wrap { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.ds-progress-bar  { flex: 1; height: 5px; background: var(--border-color); border-radius: 3px; overflow: hidden; min-width: 50px; }
.ds-progress-fill { height: 100%; border-radius: 3px; }
.ds-progress-pct  { font-size: 10px; color: var(--color-faint); width: 28px; text-align: right; font-family: var(--font-mono); }
/* ╔══════════════════════════════════════════════════════════
   ║  PAGINATION
   ╚══════════════════════════════════════════════════════════ */
.ds-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}
.ds-pagination__info { font-size: 13px; color: var(--color-muted); }
.ds-pagination__btns { display: flex; gap: 4px; }
.ds-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: var(--border);
    background: var(--surface-card);
    color: var(--color-body);
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: none;
    transition: .15s;
}
.ds-page-btn:hover     { border-color: var(--ds-indigo); color: var(--ds-indigo); }
.ds-page-btn--active   { background: var(--ds-indigo); color: white; border-color: var(--ds-indigo); }
.ds-page-btn--disabled { opacity: .4; pointer-events: none; }
.ds-page-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }