/* 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;
  --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;
}

* {
  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;
  word-break: break-all;
}

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

.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); }

.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);
}

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

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

.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-tabs-toggles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.result-tabs-toggle {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  padding-top: 0.15rem;
  margin-bottom: 0;
}

.result-tabs-toggle .form-check-label {
  cursor: pointer;
  user-select: none;
}

.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 {
  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: 0.75rem;
  --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);
}

/* 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;
}

.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,
.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: top;
}

.uid-cell.uid-cell--hierarchy {
  width: auto;
  min-width: 15ch;
  max-width: none;
  padding-left: calc(0.5rem + var(--uid-indent-step) * var(--uid-depth, 0));
}

.uid-cell.uid-cell--hierarchy[data-depth]:not([data-depth="0"]) {
  border-left: 2px solid rgba(26, 35, 50, 0.12);
}

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

.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;
}

.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.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;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.file-list-item {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s;
  flex: 0 0 auto;
  min-width: 11rem;
  max-width: 14rem;
  scroll-snap-align: start;
}

.file-list-item.disabled {
  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);
}

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

.file-list-item-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
}

.file-list-item-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.drag-handle {
  cursor: grab;
  color: var(--app-muted);
  padding: 0.15rem 0;
  flex-shrink: 0;
  touch-action: none;
}

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

.file-enable-switch {
  flex-shrink: 0;
  margin: 0;
  min-height: auto;
}

.file-enable-switch .form-check-input {
  margin-top: 0;
}

.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;
}

.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%;
  }
}