/* Light & dark backgrounds + transitions */
html.light {
  background: #f4f4f9;
  color:    #333;
}
html.dark {
  background: #181818;
  color:    #f4f4f9;
}

/* Make body fade between themes, keep your font & no margin */
body {
  font-family: 'Poppins', sans-serif;
  margin:      0;
  transition:  background 0.3s, color 0.3s;
}

/* Dark‑mode for fallback textarea and CodeMirror */
html.dark textarea {
  background: #333;
  color:      #f4f4f9;
}
html.dark .CodeMirror {
  background: #282a36;
  color:      #f8f8f2;
}

.cm-theme-solarized-light {
  background-color: #fdf6e3;
  color: #657b83;
}
.cm-theme-solarized-dark {
  background-color: #002b36;
  color: #839496;
}
.cm-theme-dracula {
  background-color: #282a36;
  color: #f8f8f2;
}
.cm-theme-monokai {
  background-color: #272822;
  color: #f8f8f2;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: bold;
}

.site-logo {
  height: 55px;
  margin-right: 10px;
}

.logo-text {
  white-space: nowrap;
}

/* Optional: Adjust dark mode */
html.dark header {
  background-color: #181818;
  color: #f4f4f9;
}

.cm-s-default span.cm-conflict-left     { color: #e06c75; font-weight: bold; }
.cm-s-default span.cm-conflict-divider  { color: #d19a66; font-weight: bold; }
.cm-s-default span.cm-conflict-right    { color: #61afef; font-weight: bold; }

/* Smart Merge Conflict Highlighting */
.cm-conflict-start { background-color: #4a4a00; color: #fff; font-weight: bold; }
.cm-conflict-sep   { background-color: #333; color: #fff; font-style: italic; }
.cm-conflict-end   { background-color: #660000; color: #fff; font-weight: bold; }

/* Highlight block for merge conflicts */
.conflict-highlight {
  background-color: rgba(255, 102, 102, 0.15);
  border-left: 3px solid #e06c75;
}

/* Highlight Git-style conflict blocks */
.conflict-line {
  background-color: #ffdddd;
  color: #900;
  font-weight: bold;
}
html.dark .conflict-line {
  background-color: #402020;
  color: #ff9999;
}

.cm-merge-conflict {
  background-color: rgba(255, 0, 0, 0.2);
  border-left: 3px solid red;
}

/* Flash border on swap */
.flash-border {
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.6);
  transition: box-shadow 0.2s ease-in-out;
}