/* ============================================================
 * File: css/tools/diff.css
 * Module: Tool CSS — Diff Checker
 * ============================================================ */

/* Two inputs side by side (stack on narrow) */
.dt-diff-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .dt-diff-inputs {
    grid-template-columns: 1fr;
  }
}

/* Diff view container */
.dt-diff-view {
  max-height: 380px;
  overflow: auto;
  background-color: var(--color-bg-subtle);
}

.dt-diff-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;

  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* Each cell is one half of a row */
.dt-diff-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  padding: 1px 10px 1px 0;
  min-height: 20px;

  border-right: var(--border-thin) solid var(--color-border);
  white-space: pre;
  overflow: hidden;
}

/* Remove right border on right-side cells (every 2nd) */
.dt-diff-cell:nth-child(2n) {
  border-right: none;
  border-left: var(--border-thin) solid var(--color-border);
}

/* Line number column */
.dt-diff-line-num {
  flex: 0 0 auto;
  width: 42px;
  padding: 0 8px;

  text-align: right;
  font-size: 10px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  user-select: none;
  background-color: var(--color-bg-subtle);
}

/* Content column */
.dt-diff-line-content {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text);
}

/* Removed line — red */
.dt-diff-cell--remove {
  background-color: #fee2e2;
}
.dt-diff-cell--remove .dt-diff-line-num {
  background-color: #fecaca;
  color: #7f1d1d;
}
.dt-diff-cell--remove .dt-diff-line-content {
  color: #7f1d1d;
}

[data-theme='dark'] .dt-diff-cell--remove {
  background-color: rgba(220, 38, 38, 0.18);
}
[data-theme='dark'] .dt-diff-cell--remove .dt-diff-line-num {
  background-color: rgba(220, 38, 38, 0.3);
  color: #fecaca;
}
[data-theme='dark'] .dt-diff-cell--remove .dt-diff-line-content {
  color: #fecaca;
}

/* Added line — green */
.dt-diff-cell--add {
  background-color: #d1fae5;
}
.dt-diff-cell--add .dt-diff-line-num {
  background-color: #a7f3d0;
  color: #064e3b;
}
.dt-diff-cell--add .dt-diff-line-content {
  color: #064e3b;
}

[data-theme='dark'] .dt-diff-cell--add {
  background-color: rgba(16, 185, 129, 0.18);
}
[data-theme='dark'] .dt-diff-cell--add .dt-diff-line-num {
  background-color: rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
}
[data-theme='dark'] .dt-diff-cell--add .dt-diff-line-content {
  color: #a7f3d0;
}

/* Empty cell (no line on this side) */
.dt-diff-cell--empty {
  background-color: var(--color-bg-subtle);
}
.dt-diff-cell--empty .dt-diff-line-num {
  background-color: var(--color-bg-subtle);
  color: transparent;
}

/* Identical banner */
.dt-diff-identical {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 14px 16px;

  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-success);
  background-color: var(--color-success-soft);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.dt-diff-identical .dt-badge--success {
  padding: 0;
  background: transparent;
  color: var(--color-success);
}

/* Stat pill variants */
.dt-stat--add {
  background-color: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.28);
}
.dt-stat--add .dt-stat__value {
  color: #059669;
}

.dt-stat--remove {
  background-color: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.28);
}
.dt-stat--remove .dt-stat__value {
  color: #b91c1c;
}

[data-theme='dark'] .dt-stat--add {
  background-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}
[data-theme='dark'] .dt-stat--add .dt-stat__value {
  color: #6ee7b7;
}

[data-theme='dark'] .dt-stat--remove {
  background-color: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.4);
}
[data-theme='dark'] .dt-stat--remove .dt-stat__value {
  color: #fca5a5;
}
/* Word-level highlights inside an edited line pair */
.dt-diff-word { border-radius: 2px; padding: 0 1px; }
.dt-diff-word--add { background-color: rgba(22, 163, 74, 0.38); }
.dt-diff-word--del { background-color: rgba(220, 38, 38, 0.34); }