.dt-filter-mount {
  display: flex;
  align-items: center;
  flex: none;
}
.dt-filter-mount:empty { display: none; }


.dt-search-input {
  height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}


.dt-toolbar-right { flex-wrap: wrap; row-gap: var(--space-2); min-width: 0; }
.dt-extra { flex-wrap: wrap; min-width: 0; }


.dt-chips:empty { display: none; }


.dt .qf-fb-chips {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}


.dt-num { font-variant-numeric: tabular-nums; }


.dt-pagesize .qf-select {
  width: auto;
  min-width: 62px;
  flex: none;
}
.dt-pagesize .qf-select-trigger {
  min-height: 28px;
  padding: 3px 6px 3px 8px;
  font-size: var(--t-sm);
}
.dt-pagesize > span { color: var(--ink-tertiary); }


.dt-pagebtn:disabled {
  opacity: 1;
  color: var(--ink-tertiary);
  background: var(--surface-container);
  border-color: var(--rule);
}


.dt-state.is-empty,
.dt-state.is-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.dt-state-msg { margin: 0; }


.dt.dt-no-rows .dt-head-row .qf-bulk-check { visibility: hidden; }


.dt-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}


.dt-sticky-head { display: none; }

.dt-table-frame.dt-pinned .dt-sticky-head {
  display: block;
  position: sticky;
  top: var(--topbar-height);
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}


.dt-sticky-table { table-layout: fixed; }

.dt-table-frame::before,
.dt-table-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.dt-table-frame::before {
  left: 0;
  background: linear-gradient(to right, var(--ink), transparent);
}
.dt-table-frame::after {
  right: 0;
  background: linear-gradient(to left, var(--ink), transparent);
}
.dt-table-frame.has-overflow:not(.at-start)::before { opacity: 0.14; }
.dt-table-frame.has-overflow:not(.at-end)::after { opacity: 0.14; }


.dt-head-row .qf-bulk-cell { cursor: default; }


.dt-bulk-empty .qf-bulkbar { display: none; }

@media (max-width: 700px) {
  .dt-filter-mount { flex: 1 1 auto; }
  .dt-filter-mount .qf-fb-btn { width: 100%; justify-content: center; }


  .dt-toolbar .qf-bulkbar {
    flex-wrap: wrap;
    align-content: center;
    row-gap: var(--space-1);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .dt-toolbar .qf-bulkbar-lead { flex: 1 0 100%; }
  .dt-toolbar .qf-bulkbar-actions { margin-left: 0; }
}