/* Design tokens — status colors align with object/attribute badge semantics. */
:root {
  --app-bg: #f0f2f5;
  --app-surface: #ffffff;
  --app-border: #d8dee6;
  --app-text: #1a2332;
  --app-muted: #5c6b7a;
  --app-primary: #1e5a8a;
  --app-primary-light: #e8f1f8;
  --app-primary-hover: #174a70;
  --app-primary-active: #133d5c;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 30, 90, 138;
  --bs-primary-text-emphasis: var(--app-primary-active);
  --bs-primary-bg-subtle: var(--app-primary-light);
  --bs-primary-border-subtle: #b3cfe0;
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
  --status-equal: #1a7f4b;
  --status-equal-bg: #e6f4ec;
  --status-diff: #b45309;
  --status-diff-bg: #fef3c7;
  --status-partial: #9a6700;
  --status-partial-bg: #fff4d6;
  --status-missing: #c2410c;
  --status-missing-bg: #ffedd5;
  --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "Liberation Mono", monospace;
}

/* Align Bootstrap primary controls with --app-primary (Bootstrap hardcodes #0d6efd in places). */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

.form-check-input:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:focus:not(:focus-visible) {
  box-shadow: none;
  border-color: var(--bs-border-color);
}

.form-check-input:checked:focus:not(:focus-visible) {
  border-color: var(--app-primary);
}

/* Bootstrap paints switch knobs blue on :focus — reset after mouse click. */
.form-switch .form-check-input {
  --form-switch-bg-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  --form-switch-bg-off-hover: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.38%29'/%3e%3c/svg%3e");
  --form-switch-bg-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  --form-switch-bg-focus: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235a94c4'/%3e%3c/svg%3e");
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-switch .form-check-input:hover:not(:disabled):not(:focus-visible) {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.form-switch .form-check-input:not(:checked):hover:not(:disabled):not(:focus-visible) {
  --bs-form-switch-bg: var(--form-switch-bg-off-hover);
}

.form-switch .form-check-input:checked:hover:not(:disabled):not(:focus-visible) {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

.form-switch .form-check-input:focus:not(:focus-visible) {
  --bs-form-switch-bg: var(--form-switch-bg-off);
}

.form-switch .form-check-input:checked:focus:not(:focus-visible) {
  --bs-form-switch-bg: var(--form-switch-bg-on);
}

.form-switch .form-check-input:focus-visible {
  --bs-form-switch-bg: var(--form-switch-bg-focus);
}

.form-switch .form-check-input:checked:focus-visible {
  --bs-form-switch-bg: var(--form-switch-bg-on);
}

.form-control:focus-visible,
.form-select:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Focus rings only for keyboard navigation — not after mouse click. */
:where(
  .btn,
  .btn-link,
  .nav-link,
  .form-check-input,
  .multi-select-toggle,
  .settings-toggle,
  .file-remove-btn,
  .file-compare-toggle,
  .file-col-header--settable
):focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-ui);
  min-height: 100vh;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--app-primary);
  background: var(--app-primary-light);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

.app-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 1.5rem;
}

.app-title {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.app-subtitle {
  color: var(--app-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.section-heading {
  font-size: 1.1rem;
  font-weight: 600;
}

.upload-section.card {
  border-radius: 0.5rem;
  overflow: hidden;
}

.upload-section .card-body {
  background: var(--app-surface);
}

.drop-zone {
  border: 2px dashed var(--app-border);
  border-radius: 0.75rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: #fafbfc;
}

.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.drag-over {
  border-color: var(--app-primary);
  background: var(--app-primary-light);
  outline: none;
}

.drop-zone-title {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Parsed filename: version primary */
.file-display {
  min-width: 0;
}

.file-display-version {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  min-height: calc(1.2em * 2);
}

.file-card-count {
  font-size: 0.75rem;
  color: var(--app-muted);
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

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

.summary-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  height: 100%;
}

.summary-card .value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.summary-card .label {
  font-size: 0.8rem;
  color: var(--app-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.summary-card.equal .value { color: var(--status-equal); }
.summary-card.diff .value { color: var(--status-diff); }
.summary-card.partial .value { color: var(--status-partial); }

.compare-results-panel {
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface);
  --result-tabs-offset: 3.5rem;
}

.result-tabs-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-inline: 0.75rem 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  border-radius: 0.5rem 0.5rem 0 0;
}

.result-tabs-bar .compare-tabs {
  border-bottom: none;
  margin-bottom: -1px;
}

#resultTabContent.card {
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Page scroll: no overflow clip on ancestors (breaks sticky thead). */
#objectsPanel > .table-responsive,
#attributesPanel > .table-responsive {
  overflow: visible;
}

.result-tabs-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  margin-bottom: 0.35rem;
  min-width: 0;
  flex-shrink: 0;
}

.result-tabs-actions-divider {
  width: 1px;
  align-self: stretch;
  min-height: 1.75rem;
  background: var(--app-border);
  flex-shrink: 0;
}

.result-settings-dropdown .result-settings-toggle {
  display: inline-flex;
  align-items: center;
}

.result-settings-menu {
  min-width: 20rem;
  border-color: var(--app-border);
  box-shadow: 0 0.35rem 1rem rgba(26, 35, 50, 0.1);
}

.result-settings-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0.4rem 0.55rem;
  padding-left: 0.55rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.result-settings-option + .result-settings-option {
  margin-top: 0.15rem;
}

.result-settings-option:hover {
  background: rgba(26, 35, 50, 0.04);
}

.result-settings-option .form-check-input {
  margin-top: 0;
  margin-left: 0;
  float: none;
  flex-shrink: 0;
}

.result-settings-option .form-check-label {
  cursor: pointer;
  user-select: none;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  flex: 1;
}

.result-tabs-search {
  margin-left: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 0;
}

.compare-tabs {
  border-bottom-color: var(--app-border);
}

.compare-tabs .nav-link:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

.compare-tabs .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  outline: none;
}

.compare-tabs .nav-link {
  color: var(--app-muted);
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
}

.compare-tabs .nav-link.active {
  color: var(--app-primary);
  border-bottom-color: var(--app-primary);
  background: transparent;
}

.compare-tabs .badge {
  background: var(--app-border);
  color: var(--app-text);
  font-weight: 500;
}

.compare-tabs .nav-link.active .badge {
  background: var(--app-primary);
  color: #fff;
}

.compare-table {
  font-size: 0.875rem;
  --sticky-expand-width: 2rem;
  --uid-indent-step: 1rem;
  --uid-text-base: 0.5rem;
  --uid-tree-elbow-gap: 0.35rem;
  --uid-tree-guide-color: rgba(26, 35, 50, 0.14);
  --uid-tree-guide-width: 1px;
  --compare-row-hover-bg: rgba(26, 35, 50, 0.02);
  --compare-col-hover-bg: rgba(26, 35, 50, 0.015);
  --compare-row-col-hover-bg: rgba(26, 35, 50, 0.025);
  --sticky-uid-edge-shadow: 2px 0 4px -2px rgba(26, 35, 50, 0.1);
}

/* Sticky headers keep file columns visible while scrolling long result sets. */
.compare-table thead th {
  background: #f8f9fb;
  border-bottom-width: 1px;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--app-border);
}

#objectsPanel > .table-responsive > .compare-table thead th,
#attributesPanel > .table-responsive > .compare-table thead th {
  top: var(--result-tabs-offset, 3.5rem);
  z-index: 3;
}

/* Sticky first column(s) on horizontal scroll */
.compare-table .sticky-col-expand {
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--sticky-expand-width);
  min-width: var(--sticky-expand-width);
  max-width: var(--sticky-expand-width);
  background: inherit;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.25rem;
}

.compare-table .sticky-col-uid {
  position: sticky;
  left: var(--sticky-expand-width, 0);
  z-index: 1;
  background: inherit;
  box-shadow: var(--sticky-uid-edge-shadow);
}

.compare-table thead th.sticky-col-expand,
.compare-table thead th.sticky-col-uid {
  z-index: 4;
  background: #f8f9fb;
}

#objectsPanel > .table-responsive > .compare-table thead th.sticky-col-expand,
#objectsPanel > .table-responsive > .compare-table thead th.sticky-col-uid,
#attributesPanel > .table-responsive > .compare-table thead th.sticky-col-expand,
#attributesPanel > .table-responsive > .compare-table thead th.sticky-col-uid {
  z-index: 6;
}

.compare-table tbody tr .sticky-col-expand,
.compare-table tbody tr .sticky-col-uid {
  background: var(--app-surface);
}

/* Match Bootstrap table-hover inset tint (sticky cells override box-shadow otherwise). */
.compare-table tbody tr:hover .sticky-col-expand:not(.col-hover) {
  box-shadow: inset 0 0 0 9999px var(--compare-row-hover-bg);
}

.compare-table tbody tr:hover .sticky-col-uid:not(.col-hover) {
  box-shadow: inset 0 0 0 9999px var(--compare-row-hover-bg), var(--sticky-uid-edge-shadow);
}

/* Attributes table has no expand column — UID sticks at left edge */
.compare-table:not(:has(.sticky-col-expand)) {
  --sticky-expand-width: 0;
}

.compare-table:not(:has(.sticky-col-expand)) .sticky-col-uid {
  left: 0;
}

.compare-table tbody tr {
  cursor: default;
}

/* Skip layout/paint for off-screen rows; sticky cells remain on painted rows. */
.compare-table tbody > tr:not(.detail-row) {
  content-visibility: auto;
  contain-intrinsic-size: auto 2.5rem;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
}

/* Scroll sentinel for infinite-style table pagination (IntersectionObserver target). */
.compare-table tr.table-load-sentinel,
.compare-table tr.table-load-sentinel td {
  height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 0;
  pointer-events: none;
  visibility: hidden;
  content-visibility: visible;
}

.compare-table tbody tr.expandable {
  cursor: pointer;
}

/* Subtle row hover — lighter than Bootstrap's default table-hover */
.compare-table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--compare-row-hover-bg);
}

.compare-table tbody tr.expandable:hover {
  background: var(--compare-row-hover-bg);
}

.compare-table th.col-hover,
.compare-table td.col-hover {
  background-color: var(--compare-col-hover-bg);
}

.compare-table thead th.col-hover {
  background-color: #f3f4f6;
}

.compare-table tbody tr .sticky-col-expand.col-hover,
.compare-table tbody tr .sticky-col-uid.col-hover {
  background-color: var(--compare-col-hover-bg);
}

.compare-table tbody tr .sticky-col-uid.col-hover {
  box-shadow: var(--sticky-uid-edge-shadow);
}

.compare-table tbody tr:hover .sticky-col-expand.col-hover,
.compare-table tbody tr:hover .sticky-col-uid.col-hover {
  background-color: var(--compare-row-col-hover-bg);
}

.uid-cell {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  width: 15ch;
  min-width: 15ch;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.compare-table thead th.uid-header {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  width: 15ch;
  min-width: 15ch;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: left;
}

.uid-cell.uid-cell--hierarchy {
  width: auto;
  min-width: 15ch;
  max-width: none;
  padding-left: var(--uid-text-base);
}

.uid-cell.uid-cell--hierarchy:not([data-depth="0"]) {
  padding-left: calc(
    var(--uid-text-base) + var(--uid-indent-step) * var(--uid-depth, 0)
  );
}

/* Stage A: one vertical guide per ancestor level (depth-only, no sibling logic). */
.uid-cell.uid-cell--hierarchy::before {
  content: '';
  position: absolute;
  left: var(--uid-text-base);
  top: 0;
  bottom: 0;
  width: calc(var(--uid-indent-step) * var(--uid-depth, 0));
  background: repeating-linear-gradient(
    to right,
    var(--uid-tree-guide-color) 0,
    var(--uid-tree-guide-color) var(--uid-tree-guide-width),
    transparent var(--uid-tree-guide-width),
    transparent var(--uid-indent-step)
  );
  pointer-events: none;
}

.uid-cell.uid-cell--hierarchy:not([data-depth="0"])::after {
  content: '';
  position: absolute;
  left: calc(var(--uid-text-base) + var(--uid-indent-step) * (var(--uid-depth, 0) - 1));
  top: 50%;
  width: calc(var(--uid-indent-step) - var(--uid-tree-elbow-gap));
  border-top: var(--uid-tree-guide-width) solid var(--uid-tree-guide-color);
  pointer-events: none;
}

.compare-table.compare-table--hierarchy-indent .sticky-col-uid {
  box-shadow: none;
}

.compare-table.compare-table--hierarchy-indent thead th.uid-header {
  width: auto;
  min-width: 15ch;
  max-width: none;
  padding-left: var(--uid-text-base);
}

.compare-table.compare-table--hierarchy-indent tbody tr .uid-cell.uid-cell--hierarchy::before,
.compare-table.compare-table--hierarchy-indent tbody tr .uid-cell.uid-cell--hierarchy::after {
  opacity: 1;
}

.compare-table.compare-table--hierarchy-indent tbody tr:hover .uid-cell.uid-cell--hierarchy::before,
.compare-table.compare-table--hierarchy-indent tbody tr:hover .uid-cell.uid-cell--hierarchy::after {
  --uid-tree-guide-color: rgba(26, 35, 50, 0.18);
}

.component-cell {
  color: var(--app-muted);
  font-size: 0.8rem;
}

.attribute-diff-cell {
  font-size: 0.8rem;
  vertical-align: top;
  max-width: 14rem;
}

.attribute-diff-cell--count {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.attribute-diff-cell--list {
  line-height: 1.45;
}

.attribute-diff-name {
  display: inline-block;
  font-size: 0.72rem;
  margin: 0 0.2rem 0.2rem 0;
  padding: 0.05rem 0.3rem;
  background: var(--bs-secondary-bg);
  border-radius: 0.2rem;
  white-space: nowrap;
}

.label-cell {
  color: var(--app-text);
  font-size: 0.8rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-mismatch-icon {
  color: #c99700;
  font-size: 0.75rem;
  margin-left: 0.2rem;
  vertical-align: 0.05em;
  cursor: help;
}

.status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: 2rem;
  white-space: nowrap;
}

.status-badge.equal {
  background: var(--status-equal-bg);
  color: var(--status-equal);
}

.status-badge.diff {
  background: var(--status-diff-bg);
  color: var(--status-diff);
}

.status-badge.partial {
  background: var(--status-partial-bg);
  color: var(--status-partial);
}

.presence-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin: 0 0.15rem;
}

.presence-dot.yes {
  background: var(--status-equal);
}

.presence-dot.no {
  background: #c5cdd6;
}

.attr-value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  word-break: break-word;
  white-space: pre-wrap;
  display: block;
}

/* Main attribute tab only — applied via JS when "Werte kürzen" is on */
.attr-value.attr-value--truncate {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.attr-value.attr-value--expanded {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Attribute tab: click row to expand truncated values */
.compare-table tbody tr.attr-row-expandable {
  cursor: pointer;
}

.compare-table tbody tr.attr-row-expanded {
  background: rgba(26, 35, 50, 0.03);
}

.compare-table tbody tr.attr-row-expanded .sticky-col-uid {
  background: rgba(26, 35, 50, 0.03);
}

.multi-select-dropdown .multi-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.multi-select-dropdown .multi-select-toggle--active {
  border-color: var(--app-primary);
  background-color: var(--app-primary-light);
  color: var(--app-primary);
  box-shadow: inset 0 0 0 1px rgba(30, 90, 138, 0.08);
}

.multi-select-dropdown .multi-select-toggle--active:hover,
.multi-select-dropdown .multi-select-toggle--active:focus-visible {
  border-color: var(--app-primary);
  background-color: #dceaf4;
  color: var(--app-primary-hover);
}

.multi-select-dropdown .multi-select-toggle:focus:not(:focus-visible) {
  box-shadow: none;
}

.multi-select-dropdown .multi-select-toggle--active .multi-select-summary {
  font-weight: 600;
}

.filter-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.filter-selection-count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-selection-count--active {
  color: var(--app-primary);
  font-weight: 600;
}

.filter-label--active {
  color: var(--app-primary);
}

.multi-select-dropdown .multi-select-toggle::after {
  margin-left: auto;
}

.multi-select-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.multi-select-menu {
  max-height: 16rem;
  overflow-x: visible;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}

.multi-select-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.25rem 0.5rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--app-border);
  font-size: 0.8125rem;
}

.multi-select-action {
  text-decoration: none;
  line-height: 1.2;
}

.multi-select-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
}

.multi-select-option .form-check-input {
  float: none;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 0.2em;
}

.multi-select-option:hover {
  background: #f8f9fb;
}

.multi-select-option .form-check-label {
  flex: 1;
  min-width: 0;
  width: auto;
  cursor: pointer;
  font-size: 0.875rem;
}

.attr-value.attr-value--pseudo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.attr-value.changed {
  background: var(--status-diff-bg);
  color: var(--status-diff);
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid #fcd34d;
}

.attr-value.missing {
  background: var(--status-missing-bg);
  color: var(--status-missing);
  font-style: italic;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid #fdba74;
}

.detail-row td {
  background: #f8f9fb;
  padding: 0.75rem 1rem;
}

.detail-attr-table-wrap {
  margin-top: 0.25rem;
}

.detail-attr-table thead th {
  position: static;
}

.detail-raw-block pre {
  margin: 0;
  font-size: 0.75rem;
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.detail-row pre {
  margin: 0;
  font-size: 0.75rem;
  max-height: 200px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--app-muted);
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--status-equal);
  display: block;
  margin-bottom: 0.75rem;
}

.search-group {
  width: 220px;
}

.settings-toggle .settings-chevron {
  transition: transform 0.2s;
}

.settings-toggle[aria-expanded="false"] .settings-chevron,
#settingsSection:has(#settingsPanel:not(.show)) .settings-chevron {
  transform: rotate(-90deg);
}

/* Horizontal file strip: order matches table column order after drag-reorder. */
.files-sortable-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.file-list-item {
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(26, 35, 50, 0.06), 0 0 0 1px rgba(26, 35, 50, 0.02);
  transition: border-color 0.15s, box-shadow 0.15s;
  flex: 0 0 14rem;
  width: 14rem;
  scroll-snap-align: start;
  overflow: hidden;
}

.file-list-item.disabled .file-list-item-content {
  opacity: 0.55;
}

.file-list-item.dragging {
  opacity: 0.45;
}

.file-list-item.drag-over {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 2px var(--app-primary-light), 0 1px 2px rgba(26, 35, 50, 0.06);
}

.file-list-item-error {
  border-color: var(--status-diff-bg);
}

.file-list-item-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.file-list-item-header {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0.45rem 0.35rem 0.35rem;
}

.file-list-item-content {
  flex: 1;
  min-width: 0;
}

.file-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.25rem;
  margin-top: auto;
  flex-shrink: 0;
  padding: 0.4rem 0.5rem;
  border: none;
  border-top: 1px solid var(--app-border);
  background: var(--app-primary-light);
  color: var(--app-primary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.file-compare-toggle:hover {
  background: #dceaf4;
  color: var(--app-primary-hover);
}

.file-compare-toggle--on:hover {
  background: #d0e3f0;
}

.file-list-item.disabled .file-compare-toggle {
  background: #f3f5f7;
  color: var(--app-muted);
}

.file-list-item.disabled .file-compare-toggle:hover {
  background: #e8ecef;
  color: var(--app-text);
}

.file-compare-toggle:active {
  transform: scale(0.96);
}

.file-remove-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--app-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.file-remove-btn::before {
  content: '';
  position: absolute;
  inset: -0.625rem;
}

.file-remove-btn:hover {
  background: rgba(26, 35, 50, 0.06);
  color: var(--app-text);
}

.file-remove-btn:active {
  transform: scale(0.96);
}

.drag-handle {
  position: relative;
  cursor: grab;
  color: var(--app-muted);
  flex-shrink: 0;
  touch-action: none;
  line-height: 1;
}

.drag-handle::before {
  content: '';
  position: absolute;
  inset: -0.625rem;
}

.drag-handle:active {
  cursor: grabbing;
}

.compare-table .file-col-header {
  vertical-align: bottom;
  min-width: 7rem;
}

.file-col-header-inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}

.file-col-version {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.file-col-header--baseline {
  position: relative;
  background: var(--app-primary-light);
}

.file-col-baseline-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--app-primary);
  background: rgba(30, 90, 138, 0.14);
  border-radius: 0 0 0.2rem 0.2rem;
  padding: 0.08rem 0.35rem;
  white-space: nowrap;
}

.file-col-header--baseline .file-col-baseline-marker {
  pointer-events: none;
}

.file-col-header--settable {
  cursor: pointer;
  transition: background-color 0.15s;
}

.file-col-header--settable:hover,
.file-col-header--settable:focus-visible {
  background: rgba(30, 90, 138, 0.08);
}

.file-col-header--settable .file-col-baseline-set-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.file-col-header--settable:hover .file-col-baseline-set-hint,
.file-col-header--settable:focus-visible .file-col-baseline-set-hint {
  opacity: 1;
}

.file-col-header--settable:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: -2px;
}

.min-w-0 {
  min-width: 0;
}

@media (max-width: 768px) {
  .result-tabs-actions {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
  }

  .result-tabs-search.search-group {
    width: 100%;
    flex: 1 1 100%;
  }
}