/* ==========================================================================
   PulpyDiff – Main Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --pd-font:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
  --pd-mono:          "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --pd-radius:        4px;
   --pd-bg:            #0d0d0d;
  --pd-surface:       #1a0a00;
  --pd-border:        rgba(200, 80, 0, 0.3);

  /* Diff colours */
  --pd-equal-bg:      #ffffff;
  --pd-equal-num:     #888888;

  --pd-insert-bg:     #e6ffed;
  --pd-insert-word:   #acf2bd;
  --pd-insert-num:    #4caf50;
  --pd-insert-border: #34d058;

  --pd-delete-bg:     #ffeef0;
  --pd-delete-word:   #fdb8c0;
  --pd-delete-num:    #f44336;
  --pd-delete-border: #e53935;

  --pd-replace-bg-l:  #fff5b1;
  --pd-replace-bg-r:  #e6ffed;
  --pd-replace-word:  #f8e0a0;

  /* Buttons */
  --pd-btn-merge:     #0d6efd;
  --pd-btn-merge-h:   #0b5ed7;
  --pd-btn-primary:   #E05A00;
  --pd-btn-primary-h: #c44d00;
  --pd-btn-secondary: #1a0a00;
  --pd-btn-secondary-h: #2a1200;
  --pd-btn-txt:       #fffff

  --pd-toolbar-bg:    #fff;
  --pd-toolbar-border:#dcdcde;

  --pd-output-row-h:  24px;
  --pd-line-num-w:    52px;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.pulpydiff-container {
  font-family: var(--pd-font);
  font-size:   14px;
  color:       #fff;
  box-sizing:  border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100vh;
  background: #0d0d0d;
}

.pulpydiff-container-inner {
    width: 100%;
    max-width: min(100%, 1140px);
    margin-inline: auto;
    padding-block: 30px;
}
.pulpydiff-container *,
.pulpydiff-container *::before,
.pulpydiff-container *::after {
  box-sizing: inherit;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.pulpydiff-toolbar {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 0;
  background:      var(--pd-toolbar-bg);
  border-bottom:   1px solid var(--pd-toolbar-border);
  flex-wrap:       wrap;
  justify-content: space-between;
}
.pulpydiff-tool-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.pulpydiff-toolbar h1 {
    font-size: 24px;
    line-height: 1.5;
    font-family: Inter;
    margin: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.pulpydiff-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         7px 14px;
  border:          none;
  border-radius:   var(--pd-radius);
  cursor:          pointer;
  font-size:       13px;
  font-weight:     600;
  line-height:     1.4;
  transition:      background 0.15s, color 0.15s;
  white-space:     nowrap;
}

.pulpydiff-container .pulpydiff-btn--primary {
  background: var(--pd-btn-primary);
  color:      var(--pd-btn-txt);
  border-color: var(--pd-btn-primary);
}
.pulpydiff-container .pulpydiff-btn--primary:hover,
.pulpydiff-container .pulpydiff-btn--primary:active,
.pulpydiff-container .pulpydiff-btn--primary:focus{
  background: var(--pd-btn-primary-h);
}

.pulpydiff-container .pulpydiff-btn--secondary {
  background: var(--pd-btn-secondary);
  color:      #fff;
  border:     1px solid var(--pd-border);
}
.pulpydiff-container .pulpydiff-btn--secondary:hover,
.pulpydiff-container .pulpydiff-btn--secondary:active,
.pulpydiff-container .pulpydiff-btn--secondary:focus{
  background: var(--pd-btn-secondary-h);
}

.pulpydiff-btn--merge {
  background: var(--pd-btn-merge);
  color:      var(--pd-btn-txt);
  font-size:  12px;
  padding:    5px 12px;
}
.pulpydiff-btn--merge:hover {
  background: var(--pd-btn-merge-h);
}

/* per-hunk merge buttons that sit inline in the diff table */
.pulpydiff-row__merge {
  background:    transparent;
  border:        1px solid var(--pd-border);
  border-radius: 3px;
  cursor:        pointer;
  font-size:     11px;
  padding:       1px 6px;
  line-height:   1.4;
  color:         #fff;
  white-space:   nowrap;
  transition:    background 0.12s;
}
.pulpydiff-row__merge:hover {
  background: var(--pd-btn-secondary-h);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.pulpydiff-spinner {
  width:         18px;
  height:        18px;
  border:        3px solid var(--pd-border);
  border-top:    3px solid var(--pd-btn-primary);
  border-radius: 50%;
  animation:     pd-spin 0.7s linear infinite;
  display:       none;
  margin-right: 10px;
}
.pulpydiff-spinner--active {
  display: block;
}
@keyframes pd-spin {
  to { transform: rotate(360deg); }
}

/* ── Status text ─────────────────────────────────────────────────────────── */
.pulpydiff-status {
  font-size:   13px;
  color:       #646970;
}
.pulpydiff-status--error {
  color: #cc1818;
}
.pulpydiff-status--success {
  color: #276749;
}

/* ── Merge-all banner ────────────────────────────────────────────────────── */
.pulpydiff-merge-all {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         8px 12px;
  background:      #f0f6fc;
  border:          1px solid #b6d4fe;
  border-radius:   var(--pd-radius);
  margin-bottom:   10px;
  flex-wrap:       wrap;
}

.pulpydiff-merge-all__stats {
  font-size:  12px;
  color:      #444d56;
  flex:       1;
  text-align: center;
}

/* ── Editor row ──────────────────────────────────────────────────────────── */
.pulpydiff-editors {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       12px;
  margin-bottom: 12px;
  margin-top: 12px;
  flex-grow: 1;
}

@media (max-width: 700px) {
  .pulpydiff-editors {
    grid-template-columns: 1fr;
  }
}

.pulpydiff-editor-pane {
  display:        flex;
  flex-direction: column;
  border:         1px solid var(--pd-border);
  border-radius:  var(--pd-radius);
  overflow:       hidden;
}

.pulpydiff-editor-pane__header {
  display:         flex;
  align-items:     center;
  padding:         6px 10px;
  background:      #111111;
  border-bottom:   1px solid var(--pd-border);
  font-size:       12px;
  font-weight:     600;
  color:           #E05A00;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
}
.pulpydiff-editor {
  width:       100%;
  min-height:  280px;
  height: 100%;
  padding:     10px;
  border:      none;
  resize:      vertical;
  font-family: var(--pd-mono);
  font-size:   13px;
  line-height: 1.6;
  background:  var(--pd-surface);
  color:       #fff;
  outline:     none;
}
.pulpydiff-editor:focus {
  box-shadow: inset 0 0 0 2px #E05A00;
}

/* ── Diff output ──────────────────────────────────────────────────────────── */
.pulpydiff-output {
  border:        1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  overflow:      hidden;
  margin-top:    4px;
}

.pulpydiff-output__header {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  background:            var(--pd-bg);
  border-bottom:         1px solid var(--pd-border);
}

.pulpydiff-output__col-title {
  padding:        6px 10px;
  font-size:      12px;
  font-weight:    600;
  color:          #646970;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pulpydiff-output__body {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 800px;
}

/* ── Diff table ───────────────────────────────────────────────────────────── */
.pulpydiff-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--pd-mono);
  font-size:       13px;
  line-height:     1.6;
  table-layout:    fixed;
}

.pulpydiff-table col.col-num-l,
.pulpydiff-table col.col-num-r {
  width: var(--pd-line-num-w);
}
.pulpydiff-table col.col-merge {
  width: 60px;
}

/* Line-number cells */
.pulpydiff-cell-num {
  user-select:  none;
  text-align:   right;
  padding:      0 8px;
  min-width:    var(--pd-line-num-w);
  color:        var(--pd-equal-num);
  font-size:    11px;
  vertical-align: top;
  white-space:  nowrap;
}

/* Code cells */
.pulpydiff-cell-code {
  padding:        0 8px;
  white-space:    pre-wrap;
  word-break:     break-all;
  vertical-align: top;
  color: #000;
}

/* Merge cell */
.pulpydiff-cell-merge {
  text-align:  center;
  vertical-align: middle;
  padding:     2px 4px;
  white-space: nowrap;
}

/* Divider between left half and right half */
.pulpydiff-cell-divider {
  width:      2px;
  background: var(--pd-border);
  padding:    0;
}

/* Row type styles */
.pulpydiff-row--equal td {
  background: var(--pd-equal-bg);
}

.pulpydiff-row--insert .pulpydiff-cell-code--right,
.pulpydiff-row--insert .pulpydiff-cell-num--right {
  background: var(--pd-insert-bg);
}
.pulpydiff-row--insert .pulpydiff-cell-num--right {
  color: var(--pd-insert-num);
}
.pulpydiff-row--insert .pulpydiff-cell-code--left,
.pulpydiff-row--insert .pulpydiff-cell-num--left {
  background: var(--pd-equal-bg);
}

.pulpydiff-row--delete .pulpydiff-cell-code--left,
.pulpydiff-row--delete .pulpydiff-cell-num--left {
  background: var(--pd-delete-bg);
}
.pulpydiff-row--delete .pulpydiff-cell-num--left {
  color: var(--pd-delete-num);
}
.pulpydiff-row--delete .pulpydiff-cell-code--right,
.pulpydiff-row--delete .pulpydiff-cell-num--right {
  background: var(--pd-equal-bg);
}

.pulpydiff-row--replace .pulpydiff-cell-code--left,
.pulpydiff-row--replace .pulpydiff-cell-num--left {
  background: var(--pd-replace-bg-l);
}
.pulpydiff-row--replace .pulpydiff-cell-code--right,
.pulpydiff-row--replace .pulpydiff-cell-num--right {
  background: var(--pd-replace-bg-r);
}

/* Inline word-level highlights */
.pulpydiff-word--insert {
  background:    var(--pd-insert-word);
  border-radius: 2px;
}
.pulpydiff-word--delete {
  background:    var(--pd-delete-word);
  border-radius: 2px;
  text-decoration: line-through;
  opacity: 0.8;
}

/* ── Save modal ──────────────────────────────────────────────────────────── */
.pulpydiff-modal {
  position: fixed;
  inset:    0;
  z-index:  99999;
  display:  flex;
  align-items: center;
  justify-content: center;
}

.pulpydiff-modal__backdrop {
  position: absolute;
  inset:    0;
  background: rgba(0, 0, 0, 0.55);
}

.pulpydiff-modal__box {
  position:      relative;
  border-radius: 6px;
  padding:       24px 28px;
  min-width:     340px;
  max-width:     90vw;
  box-shadow:    0 8px 32px rgba(0,0,0,0.18);
  background: #1a0a00;
  border: 1px solid rgba(200, 80, 0, 0.3);
}

.pulpydiff-modal__box h2 {
  margin:      0 0 16px;
  font-size:   18px;
  font-weight: 600;
}

.pulpydiff-modal__box label {
  display:     block;
  font-size:   13px;
  font-weight: 600;
  margin-bottom: 6px;
  color:       #fff;
}

.pulpydiff-modal__input {
  width:         100%;
  padding:       8px 10px;
  border:        1px solid var(--pd-border);
  border-radius: var(--pd-radius);
  font-size:     14px;
  margin-bottom: 16px;
  outline:       none;
}

.pulpydiff-modal__box h2,
.pulpydiff-modal__box label {
  color: #ffffff;
}
.pulpydiff-modal__input {
  background: #0d0d0d;
  border-color: rgba(200, 80, 0, 0.3);
  color: #ffffff;
}
.pulpydiff-modal__input:focus {
  border-color: var(--pd-btn-primary);
  box-shadow:   0 0 0 2px rgba(34, 113, 177, 0.25);
}

.pulpydiff-modal__actions {
  display:  flex;
  gap:      8px;
  justify-content: flex-end;
}

/* ── Hunk separator ───────────────────────────────────────────────────────── */
.pulpydiff-row--hunk-sep td {
  
  font-size:    11px;
  padding:      3px 8px;
  border-top:   1px dashed var(--pd-border);
  border-bottom:1px dashed var(--pd-border);
  text-align:   center;
  
  background: #1a0a00;
  color:      #888888;
  border-color: rgba(200, 80, 0, 0.2);
}

/* ── Admin-specific tweaks ─────────────────────────────────────────────── */
.pulpydiff-wrap .pulpydiff-toolbar {
  margin-top: 8px;
}