// ─────────────────────────────────────────────────────────────────────────────
// Component: Diff viewer  (.df3-* prefix)
// File:      src/scss/components/_diff.scss
//
// Visual rules only — colors, typography, backgrounds, borders, animations.
// Structural layout lives in pages/_diff.scss.
// Covers: diff.html (shell SSR + diff.ts client-rendered content)
// ─────────────────────────────────────────────────────────────────────────────

// ── Header ────────────────────────────────────────────────────────────────────

.df3-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.df3-back {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  &:hover { color: var(--text-primary); }
}

.df3-sha {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent-link);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.df3-branch {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}

.df3-msg {
  font-size: 13px;
  color: var(--text-secondary);
}

.df3-meta-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

// ── Loading state ─────────────────────────────────────────────────────────────

.df3-loading {
  color: var(--text-muted);
  font-size: 13px;
}

// ── Stats bar ─────────────────────────────────────────────────────────────────

.df3-stats-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.df3-stat {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
}

.df3-stat-n { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.df3-stat-l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.df3-stat-add .df3-stat-n { color: var(--color-success); }
.df3-stat-del .df3-stat-n { color: var(--color-danger); }
.df3-stat-mod .df3-stat-n { color: var(--color-accent); }

.df3-stats-meta { font-size: 11px; color: var(--text-muted); }

.df3-root-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-radius: var(--radius-full);
}

.df3-vs { color: var(--text-muted); font-size: 11px; }

.df3-parent-sha {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-link);
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

// ── File cards ────────────────────────────────────────────────────────────────

.df3-file-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.df3-file-hd {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.df3-op-dot {
  font-size: 11px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}

.df3-op-add { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.df3-op-del { background: color-mix(in srgb, var(--color-danger)  15%, transparent); color: var(--color-danger); }
.df3-op-mod { background: color-mix(in srgb, var(--color-accent)  12%, transparent); color: var(--color-accent); }

.df3-file-path {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  text-decoration: none;
  &:hover { text-decoration: underline; color: var(--color-accent-link); }
}

.df3-ext {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.df3-line-stat {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);

  .df3-stat-add { color: var(--color-success); }
  .df3-stat-del { color: var(--color-danger); }
}

.df3-raw-link {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  &:hover { color: var(--color-accent-link); }
}

.df3-no-content {
  font-size: 12px;
  color: var(--text-muted);
}

.df3-empty {
  font-size: 13px;
  color: var(--text-muted);
}

// ── Diff table ────────────────────────────────────────────────────────────────

.df3-table {
  font-size: 12px;
  font-family: var(--font-mono);
  tab-size: 4;
}

.df3-dl-add  { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
.df3-dl-del  { background: color-mix(in srgb, var(--color-danger)  8%, transparent); }
.df3-dl-ctx  { }
.df3-dl-hunk { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }

.df3-ln-sign {
  width: 16px;
  text-align: center;
  user-select: none;
  color: var(--text-muted);

  .df3-dl-add & { color: var(--color-success); }
  .df3-dl-del & { color: var(--color-danger); }
}

.df3-ln-num {
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--border-subtle);
}

.df3-ln-code {
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre;
}

.df3-ln-hunk  { color: var(--color-accent); font-style: italic; }
.df3-ln-trunc { color: var(--text-muted); font-style: italic; }

// ── Symbol panel ──────────────────────────────────────────────────────────────

.df3-sym-panel {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.df3-sym-hd {
  border-bottom: 1px solid var(--border-subtle);
}

.df3-sym-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.df3-sym-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border-radius: var(--radius-full);
}

.df3-sym-row { font-size: 11px; &:hover { background: var(--bg-hover); } }

.df3-sym-dot {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.df3-sym-name { color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; }
.df3-sym-desc { font-size: 10px; color: var(--text-muted); }

.df3-sym-indent { color: var(--text-muted); opacity: 0.5; flex-shrink: 0; }

// ── Kind chips ────────────────────────────────────────────────────────────────

.df3-kind {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  border: 1px solid;
  white-space: nowrap;
}

.df3-k-class  { color: var(--color-orange);      border-color: color-mix(in srgb, var(--color-orange)      30%, transparent); background: color-mix(in srgb, var(--color-orange)      8%, transparent); }
.df3-k-method { color: var(--color-accent-link);  border-color: color-mix(in srgb, var(--color-accent-link) 30%, transparent); background: color-mix(in srgb, var(--color-accent-link) 8%, transparent); }
.df3-k-func   { color: var(--color-accent);       border-color: color-mix(in srgb, var(--color-accent)      30%, transparent); background: color-mix(in srgb, var(--color-accent)      8%, transparent); }
.df3-k-import { color: var(--text-muted);         border-color: var(--border-subtle);                                           background: var(--bg-overlay); }
.df3-k-var    { color: var(--color-purple);       border-color: color-mix(in srgb, var(--color-purple)      30%, transparent); background: color-mix(in srgb, var(--color-purple)      8%, transparent); }