/* tools/diff-viewer/css/style.css */

/* Action bar */
#action-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 14px; background: #1e1e2e; border-bottom: 2px solid #45475a;
  flex-shrink: 0; flex-wrap: wrap;
}
#action-buttons { display: flex; gap: 6px; }
#action-buttons button {
  background: #313244; color: #cdd6f4; border: 1px solid #45475a;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#action-buttons button:hover { background: #45475a; }
#btn-compare { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; font-weight: 600; }
#btn-compare:hover { background: #74c7ec; }

#stats-badge { font-size: 13px; display: flex; gap: 10px; }
.stat-added   { color: #a6e3a1; }
.stat-removed { color: #f38ba8; }
.stat-modified { color: #f9e2af; }
.stat-equal   { color: #6c7086; }

#legend { display: flex; gap: 12px; margin-left: auto; }
.legend-item { font-size: 11px; font-family: monospace; padding: 2px 8px; border-radius: 3px; }
.legend-removed { background: rgba(243, 139, 168, 0.2); color: #f38ba8; }
.legend-added   { background: rgba(166, 227, 161, 0.2); color: #a6e3a1; }
.legend-modified { background: rgba(249, 226, 175, 0.15); color: #f9e2af; }

/* Main layout */
#main {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}

/* Input row */
#input-row {
  display: flex; flex: 0 0 180px; border-bottom: 2px solid #45475a;
}
.input-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.input-pane:first-child { border-right: 1px solid #45475a; }

.pane-header {
  padding: 5px 12px; background: #181825; font-size: 12px; color: #6c7086;
  border-bottom: 1px solid #313244; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.05em;
}

#original-input, #modified-input {
  flex: 1; background: #1e1e2e; color: #cdd6f4; border: none; outline: none;
  padding: 10px 12px; font-family: 'Fira Code', monospace; font-size: 13px;
  line-height: 1.6; resize: none; white-space: pre; overflow: auto;
}

/* Unified diff output */
#diff-result {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
#diff-output {
  flex: 1; overflow: auto; background: #1e1e2e;
  font-family: 'Fira Code', monospace; font-size: 13px; line-height: 1.6;
}

/* Diff rows */
.diff-row {
  display: flex; align-items: baseline; padding: 0 12px; white-space: pre;
}
.diff-row:hover { filter: brightness(1.1); }

.diff-line-no {
  min-width: 40px; text-align: right; color: #45475a; font-size: 12px;
  user-select: none; padding-right: 6px; flex-shrink: 0;
}
.diff-line-no-right {
  min-width: 40px; text-align: right; color: #45475a; font-size: 12px;
  user-select: none; padding-right: 10px; flex-shrink: 0;
}

.diff-sign {
  min-width: 18px; flex-shrink: 0; font-weight: 700; user-select: none;
}

.diff-line-text {
  flex: 1; white-space: pre-wrap; word-break: break-all;
}

/* Line backgrounds */
.diff-removed  { background: rgba(243, 139, 168, 0.12); }
.diff-removed .diff-sign { color: #f38ba8; }
.diff-removed .diff-line-text { color: #f38ba8; }

.diff-added    { background: rgba(166, 227, 161, 0.12); }
.diff-added .diff-sign { color: #a6e3a1; }
.diff-added .diff-line-text { color: #a6e3a1; }

.diff-modified-old { background: rgba(249, 226, 175, 0.08); }
.diff-modified-old .diff-sign { color: #f38ba8; }
.diff-modified-new { background: rgba(249, 226, 175, 0.08); }
.diff-modified-new .diff-sign { color: #a6e3a1; }

.diff-equal .diff-line-text { color: #6c7086; }
.diff-equal .diff-sign { color: #313244; }

/* Word-level highlights */
.word-removed { background: rgba(243, 139, 168, 0.35); border-radius: 2px; color: #f38ba8; }
.word-added   { background: rgba(166, 227, 161, 0.35); border-radius: 2px; color: #a6e3a1; }

/* Context collapse */
.diff-separator {
  padding: 4px 12px; color: #45475a; font-size: 12px; text-align: center;
  background: #181825; border-top: 1px solid #313244; border-bottom: 1px solid #313244;
  user-select: none;
}

/* Empty state */
.diff-empty {
  color: #45475a; font-style: italic; padding: 20px; text-align: center;
}