/* Data tables & grids — extends table.table from components.css */
:root{
  --table-row-h: 40px; /* @kind spacing */
  --table-row-h-compact: 32px; /* @kind spacing */
  --table-row-h-comfy: 52px; /* @kind spacing */
  --grid-cell-h: 30px; /* @kind spacing */
  --table-select-bg: var(--primary-lt);
  --table-stripe: var(--bg-surface-secondary);
}
.table-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.table-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-color-light);flex-wrap:wrap}
.table-toolbar .table-title{font-size:13px;font-weight:var(--font-weight-bold);color:var(--text)}
.table-toolbar .table-count{font-size:11.5px;color:var(--text-muted)}
.table-toolbar .spacer{flex:1}
.table-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--border-color-light);font-size:12px;color:var(--text-muted)}
.table-filters .chip b{font-weight:var(--font-weight-bold);margin-inline-end:3px}
.table-filters .clear{background:none;border:0;font:inherit;font-size:12px;color:var(--primary);cursor:pointer;padding:0 4px}
.table-bulkbar{display:flex;align-items:center;gap:8px;padding:6px 16px;min-height:44px;background:var(--table-select-bg);border-bottom:1px solid var(--border-color-light);font-size:12.5px;font-weight:var(--font-weight-medium);color:var(--primary)}
.table-bulkbar .spacer{flex:1}
table.table .num,table.table th.num{text-align:end;font-variant-numeric:tabular-nums}
table.table .col-check{width:44px;padding-inline-end:0}
table.table .col-actions{width:48px;text-align:end}
table.table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
table.table th.sortable:hover{color:var(--text-secondary)}
table.table th .sort{display:inline-flex;vertical-align:-2px;margin-inline-start:4px;opacity:.35}
table.table th.sorted{color:var(--text)}
table.table th.sorted .sort{opacity:1;color:var(--primary)}
table.table tbody tr.is-selected{background:var(--table-select-bg)}
table.table tbody tr.is-selected td{color:var(--text)}
table.table.is-compact th{padding:6px 12px}
table.table.is-compact td{padding:5px 12px;font-size:12.5px}
table.table.is-comfy td{padding:14px 16px}
table.table.is-striped tbody tr:nth-child(even){background:var(--table-stripe)}
table.table.is-bordered th,table.table.is-bordered td{border-inline-end:1px solid var(--border-color-light)}
table.table.is-bordered th:last-child,table.table.is-bordered td:last-child{border-inline-end:0}
.table-scroll{overflow:auto;max-height:var(--table-max-h,none)}
.table-scroll thead th{position:sticky;top:0;z-index:2}
.table-scroll .sticky-col{position:sticky;inset-inline-start:0;z-index:1;background:var(--bg-surface);box-shadow:1px 0 0 var(--border-color-light)}
.table-scroll thead .sticky-col{z-index:3;background:var(--bg-surface-secondary)}
.row-actions{display:inline-flex;gap:2px;opacity:0;transition:opacity 100ms}
table.table tbody tr:hover .row-actions,table.table tbody tr:focus-within .row-actions{opacity:1}
.row-toggle{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:transform 150ms,background 100ms}
.row-toggle:hover{background:var(--bg-surface-secondary)}
tr.is-expanded .row-toggle{transform:rotate(90deg);color:var(--text)}
table.table tr.row-detail td{background:var(--bg-surface-secondary);padding:12px 16px 14px 60px;font-size:12.5px}
table.table tr.row-group td{background:var(--bg-surface-secondary);color:var(--text);font-weight:var(--font-weight-bold);font-size:12px;padding-top:6px;padding-bottom:6px}
table.table tfoot td{border-top:1px solid var(--border-color);border-bottom:0;color:var(--text);font-weight:var(--font-weight-bold);background:var(--bg-surface-secondary)}
.table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--border-color-light);font-size:12px;color:var(--text-muted);flex-wrap:wrap}
.table-footer .per-page{display:flex;align-items:center;gap:6px}
.cell-sub{display:block;font-size:11.5px;color:var(--text-muted);margin-top:1px}
.cell-trunc{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-pos,table.table td.cell-pos{color:var(--green)}.cell-neg,table.table td.cell-neg{color:var(--red)}
.cell-muted,table.table td.cell-muted{color:var(--text-disabled)}
table.table td.cell-strong{color:var(--text);font-weight:var(--font-weight-medium)}
table.table td.cell-strong.cell-neg{color:var(--red)}table.table td.cell-strong.cell-pos{color:var(--green)}
table.table td.cell-mono{color:var(--text)}
.cell-bar{display:flex;align-items:center;gap:8px;min-width:120px}
.cell-bar .track{flex:1;height:4px;border-radius:2px;background:var(--border-color-light);overflow:hidden}
.cell-bar .fill{height:100%;background:var(--primary);border-radius:2px}
.cell-bar .val{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;min-width:34px;text-align:end}
.cell-tags{display:flex;gap:4px;flex-wrap:wrap}
table.table td.table-empty{padding:0}

/* Data grid — spreadsheet-style editable grid */
.data-grid{border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:auto;background:var(--bg-surface)}
.data-grid table{border-collapse:separate;border-spacing:0;font-size:12.5px;width:100%}
.data-grid th,.data-grid td{height:var(--grid-cell-h);padding:0 8px;border-inline-end:1px solid var(--border-color-light);border-bottom:1px solid var(--border-color-light);white-space:nowrap;color:var(--text);text-align:start}
.data-grid th{background:var(--bg-surface-secondary);font-size:11.5px;font-weight:var(--font-weight-bold);color:var(--text-secondary);position:sticky;top:0;z-index:1}
.data-grid .rownum{width:36px;text-align:center;color:var(--text-muted);background:var(--bg-surface-secondary);font-size:11px;font-variant-numeric:tabular-nums}
.data-grid .num{text-align:end;font-variant-numeric:tabular-nums}
.data-grid td.is-active{box-shadow:inset 0 0 0 2px var(--primary)}
.data-grid td.is-range{background:var(--primary-lt)}
.data-grid td.is-editing{padding:0;box-shadow:inset 0 0 0 2px var(--primary),var(--shadow-pop)}
.data-grid td.is-editing input{width:100%;height:100%;border:0;outline:0;padding:0 8px;font:inherit;color:var(--text);background:var(--bg-surface)}
.data-grid td.is-invalid{background:var(--red-lt);box-shadow:inset 0 0 0 1px var(--red)}
.data-grid td.is-readonly{color:var(--text-muted);background:var(--bg-surface-secondary)}
.data-grid td.is-dirty{position:relative}
.data-grid td.is-dirty::after{content:'';position:absolute;top:0;inset-inline-end:0;border-style:solid;border-width:0 6px 6px 0;border-color:transparent var(--primary) transparent transparent}
.data-grid th.is-col-selected,.data-grid .rownum.is-row-selected{background:var(--primary-lt);color:var(--primary)}

/* Card grid + key-value grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-grid-min,220px),1fr));gap:16px}
.kv-grid{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;font-size:13px;margin:0}
.kv-grid dt{color:var(--text-muted);font-size:12px}
.kv-grid dd{margin:0;color:var(--text)}
.kv-grid.cols-2{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr)}