/* design_system/tables.css — Tables and responsive stat grid */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Tables */
.table-block__heading { margin-bottom: 0.75rem; }
.table-block__subtitle {
    margin: 0.15rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.table-wrap {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-surface);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
}
.table-wrap--scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.table-wrap:not(.table-wrap--scroll) tbody td {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.table-wrap--embedded {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: var(--radius-input);
}
.table-group { margin-bottom: 0; }
.table-group .table-wrap { margin-bottom: 0; }
.table-group + .table-group { margin-top: 0; }
.table-group__sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.table-group__eyebrow {
    margin: 0 0 0.35rem;
}
.table-group__eyebrow + .view-section-title {
    margin-bottom: 1.25rem;
}
.table-group__eyebrow + .table-group__section-title {
    margin-top: 0;
}
.table-group__total {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-ui);
    font-weight: 600;
    color: var(--color-text);
}
.table-summary {
    margin-top: 2rem;
}
.table-summary dl {
    margin: 0;
    margin-left: auto;
    max-width: 28rem;
    display: grid;
    gap: 0.75rem;
}
.table-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
}
.table-summary__row dt {
    margin: 0;
    font-size: var(--text-ui);
    color: var(--color-text-muted);
}
.table-summary__row dd {
    margin: 0;
    font-size: var(--text-ui);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    text-align: right;
}
.table-summary__row--total {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.table-summary__row--total dt,
.table-summary__row--total dd {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text);
}
table,
.ds-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.table-wrap--scroll .ds-table {
    min-width: 500px;
}
thead { background: var(--color-bg-alt); }
thead th {
    padding: 0.875rem 1.25rem;
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
    white-space: normal;
    border-bottom: 1px solid var(--color-border);
    vertical-align: bottom;
}
.table-wrap--scroll thead th {
    white-space: nowrap;
}
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--color-bg-alt); }
tbody td {
    padding: 1rem 1.25rem;
    font-size: var(--text-md);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tfoot td {
    padding: 0.875rem 1.25rem;
    font-size: var(--text-ui);
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-bg-alt);
    border-top: 2px solid var(--color-border);
    vertical-align: middle;
}
.table-empty {
    padding: 2rem 1.25rem !important;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-ui);
}
.table-empty--standalone {
    padding: 0 !important;
    margin: 0;
}
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.table-actions a,
.table-actions button {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
.table-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table-date {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
.table-cell--muted { color: var(--color-text-muted); }
.table-cell--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 12rem;
}
.table-row--muted {
    background: var(--color-bg-alt);
    box-shadow: inset 4px 0 0 0 var(--slate-border);
}
.table-row--muted td { color: var(--color-text-muted); }
.table-cell--wide {
    min-width: 24rem;
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
}
.row-name { font-weight: 600; color: var(--color-accent); cursor: pointer; }
.row-name:hover { text-decoration: underline; }
.row-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.kebab-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 8px;
    color: var(--color-text-muted);
    transition: all 0.2s;
}
.kebab-btn:hover { color: var(--color-accent); background: var(--color-accent-soft); }
.table-section-title {
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}
.table-drag-col {
    width: 2.5rem;
    padding-left: 0.75rem !important;
    padding-right: 0.5rem !important;
    color: var(--color-text-muted);
}
.table-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color 0.15s;
}
tbody tr:hover .table-drag-handle { color: var(--color-accent); }
.cursor-move { cursor: grab; }
.cursor-move:active { cursor: grabbing; }
.opacity-50 { opacity: 0.5; }
.bg-blue-50 { background-color: var(--color-accent-soft); }
.bg-blue-100 { background-color: var(--color-accent-soft); }
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900 { color: var(--color-accent); }
.hover\:text-blue-800:hover,
.hover\:text-blue-900:hover { color: var(--color-accent-hover); }
.border-blue-600 { border-color: var(--color-accent); }
.hover\:bg-blue-50:hover,
.focus\:bg-blue-50:focus { background-color: var(--color-accent-soft); }
.file\:bg-blue-50::file-selector-button { background-color: var(--color-accent-soft); }
.file\:text-blue-700::file-selector-button { color: var(--color-accent); }
.hover\:file\:bg-blue-100:hover::file-selector-button { background-color: rgba(10, 79, 255, 0.16); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.table-compact thead th,
.ds-table--compact thead th { padding: 0.65rem 1rem; font-size: var(--text-micro); }
.table-compact tbody td,
.ds-table--compact tbody td { padding: 0.75rem 1rem; font-size: var(--text-ui); }
.table-compact tfoot td,
.ds-table--compact tfoot td { padding: 0.65rem 1rem; font-size: var(--text-sm); }
.table-striped tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.table-striped tbody tr:nth-child(even):hover { background: rgba(248,249,250,0.9); }
.table-bordered th, .table-bordered td { border: 1px solid var(--color-border); }
.table-bordered thead th { border-bottom-width: 2px; }
.ds-table--articles { min-width: 72rem; }

/* Development step statistics */