.data-toolbar { display: flex; align-items: center; gap: 8px; }
.data-toolbar input { width: min(220px, 34vw); height: 30px; font-size: 10.5px; }
.data-toolbar select { width: auto; min-width: 130px; height: 30px; font-size: 10.5px; }
.data-table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.data-table th, .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table th { border-top: 0; color: var(--subtle); font-size: 9.5px; letter-spacing: .06em; }
.data-table th button { display: inline-flex; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; }
.data-table th button:hover { color: var(--text); }
.data-table th button span { min-width: 8px; color: var(--accent); }
.data-table tbody tr:hover { background: rgb(86 217 255 / 3%); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td strong { color: var(--text); }
.data-table td small { display: block; max-width: 460px; margin-top: 2px; overflow: hidden; color: var(--subtle); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.data-table .primary-cell { min-width: 170px; color: var(--text); font-weight: 720; }
.data-table .empty { height: 72px; border-bottom: 0; }
.data-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 42px; padding: 7px 12px; border-top: 1px solid var(--border); color: var(--subtle); font-size: 10px; font-variant-numeric: tabular-nums; }
.data-pager button { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); }
.data-pager button:hover:not(:disabled) { border-color: var(--accent); }
.data-pager button:disabled { opacity: .3; cursor: default; }
.compact-metrics { gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.compact-metrics .metric { min-height: 84px; padding: 12px 15px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; }
.compact-metrics .metric:last-child { border-right: 0; }

@media (max-width: 680px) {
  .data-toolbar { align-items: stretch; flex-direction: column; width: 100%; }
  .data-toolbar input, .data-toolbar select { width: 100%; }
  .data-table { min-width: 680px; }
}

@media (max-width: 1100px) {
  .compact-metrics .metric:nth-child(2) { border-right: 0; }
  .compact-metrics .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}