/* Дропзона */
.dropzone {
  border: 2px dashed #4a90d9;
  border-radius: 12px;
  background: #0e2a45;
  transition: border-color 0.2s, background 0.2s;
}
.dropzone:hover,
.dropzone--hover {
  border-color: #6ab0f0;
  background: #122f4d;
}
.dropzone--large {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Таблицы */
.tbl-scroll {
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.tbl-scroll:hover {
  scrollbar-color: rgba(0,0,0,0.28) transparent;
}
.tbl-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}
.tbl-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.tbl-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.28);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: #f7f7f8;
  color: #313139;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid #e9e9eb;
  user-select: none;
}
.data-table.sortable thead th[data-sort] {
  cursor: pointer;
}
.data-table.sortable thead th[data-sort]:hover {
  background: #ededf0;
}
.data-table.sortable thead th[data-sort]::after {
  content: ' ⇅';
  font-size: 10px;
  color: #b0b0b8;
}
.data-table.sortable thead th.sort-asc::after {
  content: ' ↑';
  color: #313139;
}
.data-table.sortable thead th.sort-desc::after {
  content: ' ↓';
  color: #313139;
}
.data-table tbody td {
  padding: 6px 12px;
  color: #313139;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}
.data-table tbody tr:hover td {
  background: #fafafb;
}

/* Метрики */
.metric-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  flex: 1;
}
.metric-card--accent {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.metric-value {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.metric-label {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}