/* Production lists and forms share the component catalog's design tokens. */
.filter-chips {
  display: inline-flex; align-items: center; flex: 1 1 auto; flex-wrap: nowrap;
  gap: 4px; max-width: 100%; min-width: 0; padding: 4px;
  overflow-x: auto; border: 1px solid var(--line, #e2eaf3);
  border-radius: 10px; background: var(--surface-soft, #f6f8fc);
  scrollbar-width: thin;
}
.filter-chip,
.dictionary-panel .filter-chip {
  flex: none; min-height: 33px; padding: 7px 11px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text-secondary, #74849a);
  font-size: 11px; line-height: 1.5; white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s;
}
.filter-chip:hover,
.dictionary-panel .filter-chip:hover {
  border-color: var(--theme-accent-line, #d8e6ff);
  background: var(--theme-hover, #edf3ff); color: var(--primary, #3b82f6);
}
.filter-chip.active,
.dictionary-panel .filter-chip.active {
  border-color: var(--line, #e2eaf3); background: var(--surface, #fff);
  color: var(--primary, #3b82f6);
  box-shadow: var(--theme-shadow, 0 2px 8px #254f3d12);
}
.filter-chip:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface, #fff); font-size: 12px; }
.list-bulk-bar,
.list-bulk-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; }
.list-bulk-bar { padding: 8px 22px 4px; }
.list-select-cell { width: 48px; min-width: 48px; text-align: center !important; }
.list-select-cell input { vertical-align: middle; }
.menu-table-container { overflow-x: auto; }
.menu-tree-table { min-width: 900px; }
:is(.data-table,.menu-tree-table,.dictionary-table) th {
  padding: 13px 14px; border-bottom: 1px solid var(--line, #e2eaf3);
  background: linear-gradient(100deg, var(--surface-soft, #f6f8fc), var(--theme-hover, #f0f5ff));
  color: var(--text-secondary, #74849a); font-size: 11px;
  font-weight: 550; letter-spacing: .25px; text-align: left;
}
.data-table td {
  padding: 14px; border-bottom: 1px solid var(--line, #e2eaf3);
  background: transparent; color: var(--ink, #273449);
  vertical-align: middle;
}
:is(.data-table,.menu-tree-table,.dictionary-table) tbody tr { transition: background .18s; }
:is(.data-table,.menu-tree-table,.dictionary-table) tbody tr:hover { background: var(--theme-hover, #f0f5ff); }
:is(.data-table,.menu-tree-table,.dictionary-table) tbody tr:last-child td { border-bottom: 0; }
.data-table .empty-cell { padding: 42px 16px; color: var(--muted, #8593a6); text-align: center; }

:is(.permission-item,.permission-heading,.field-option,.attachment-table,.menu-tree-table,.dictionary-table) input[type="checkbox"],
.group-check {
  appearance: none; display: inline-block; flex: 0 0 16px;
  width: 16px; height: 16px; min-height: 16px; margin: 0;
  border: 1px solid var(--line-strong, #d5e0ed); border-radius: 5px;
  background: var(--surface, #fff) center / 11px 11px no-repeat;
  box-shadow: inset 0 1px 0 #ffffff80; cursor: pointer;
  vertical-align: middle; transition: border-color .18s, background-color .18s, box-shadow .18s;
}
:is(.permission-item,.permission-heading,.field-option,.attachment-table,.menu-tree-table,.dictionary-table) input[type="checkbox"]:hover,
.group-check:hover { border-color: var(--primary, #3b82f6); }
:is(.permission-item,.permission-heading,.field-option,.attachment-table,.menu-tree-table,.dictionary-table) input[type="checkbox"]:checked,
.group-check:checked {
  border-color: var(--primary, #3b82f6); background-color: var(--primary, #3b82f6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 8 3.2 3.2L13 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.permission-item,.permission-heading,.field-option,.attachment-table,.menu-tree-table,.dictionary-table) input[type="checkbox"]:indeterminate,
.group-check:indeterminate {
  border-color: var(--primary, #3b82f6); background-color: var(--primary, #3b82f6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.field-option input[type="radio"] {
  appearance: none; display: inline-block; flex: 0 0 16px;
  width: 16px; height: 16px; min-height: 16px; margin: 0;
  border: 1px solid var(--line-strong, #d5e0ed); border-radius: 50%;
  background: var(--surface, #fff); cursor: pointer; vertical-align: middle;
  transition: border-color .18s, box-shadow .18s;
}
.field-option input[type="radio"]:checked {
  border-color: var(--primary, #3b82f6);
  background: radial-gradient(circle, var(--primary, #3b82f6) 0 4px, var(--surface, #fff) 4.5px);
}
:is(.permission-item,.permission-heading,.field-option,.attachment-table,.menu-tree-table,.dictionary-table) input:is([type="checkbox"],[type="radio"]):focus-visible,
.group-check:focus-visible { outline: 2px solid var(--primary, #3b82f6); outline-offset: 2px; }
:is(.permission-item,.permission-heading,.field-option,.attachment-table,.menu-tree-table,.dictionary-table) input:is([type="checkbox"],[type="radio"]):disabled,
.group-check:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 760px) {
  .filter-chips { flex-basis: 100%; }
  .data-table { min-width: 680px; }
  .attachment-panel .table-container { overflow-x: auto; }
}