/* ======================================
   Final Cut Diff – Styles (Inconsolata)
   ====================================== */

/* --- Grundlayout --- */
@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/inconsolata-v17-latin-regular.woff2") format("woff2"),
       url("/fonts/inconsolata-v17-latin-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Inconsolata";
  src: url("/fonts/inconsolata-v17-latin-700.woff2") format("woff2"),
       url("/fonts/inconsolata-v17-latin-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

body {
  background: #f6f6f6;
  font-family: "Inconsolata", Courier, monospace;
  color: #000;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}

/* Containerbreite für Header und Content */
.top-bar,
#diff-view, #ab-view {
  max-width: 95%;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* --- Header / Titel --- */
.top-bar {
  display: block; /* Titel und Filterleiste untereinander */
  position: relative;
}

h1 {
  margin: 0;
  font-size: 1rem;
}

/* --- Filterleiste: nur .right-info sticky --- */
.right-info {
  position: sticky;
  top: 0;                 /* klebt am oberen Rand beim Scrollen */
  z-index: 200;
  margin: 0;
  padding: .6rem .8rem;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}

/* --- Buttons --- */
.btn {
  background: #e7e7e7;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: .35rem .8rem;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover {
  background: #dfe2e6;
}
.btn:active {
  transform: scale(.97);
}

/* Farbvarianten */
#toggle-all-merges {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
#toggle-striked {
  background: #bd80ff;
  color: #fff;
  border-color: #bd80ff;
}
#toggle-comments {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* --- Wrapper & Inhalte --- */
.script-wrapper {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  margin: 0.5rem 0;
  padding: .9rem 1rem;
}

.script-meta {
  font-size: 1rem;
  color: #666;
  display: block;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;

}
.script-date-time {
  font-size: 1rem;
  text-align: right;
  color: #333;
}
.final-cut-total-duration {
  font-weight: 400;
  color: #444;
  text-align: right;
}

/* --- Merge Badge & Toggle --- */
.merged .script-meta::before {
  content: "MERGED";
  color: #fff;
  background: darkred;
  padding: 0 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-right: .5rem;
}
.merge-toggle {
  cursor: pointer;
  color: darkred;
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform .2s ease;
  margin-right: 0.5em;
}
.merge-toggle.open {
  transform: rotate(180deg);
}

/* --- Merge Zusammenfassung & Children --- */
.script-content.merge-summary {
  margin-top: .3rem;
}
.merge-children {
  display: none;
  margin-top: .5rem;
}

.child-item {
  position: relative;
  background: #fafafa;
  border-radius: 5px;
  margin: .7rem 0;
  overflow: hidden;
  padding: .7rem 1rem .7rem 1.4rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  border-left: 5px solid transparent;
  border-left: var(--child-gradient, none);
}
.child-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--child-gradient, #ccc);
  border-radius: 5px 0 0 5px;
}

.child.placeholder {
  border: 1px dashed #ccc !important;
  background: transparent !important;
}

.child-meta {
  font-size: .9rem;
  color: #555;
  margin-bottom: .3rem;
}
.child-text {
  line-height: 1.55;
}

/* --- Strikes & Comments --- */
#diff-view s {
  display: none;
}
#diff-view.show-striked s {
  display: inline;
  color: #999;
  text-decoration: line-through;
}
#diff-view .comment,
#diff-view .highlight-comment {
  display: inline;
  color: #3b82f6;
}
.hide-comments .highlight-comment {
  display: none !important;
}

/* --- Badges --- */
.strike-badge {
  background: #bd80ff;
  padding: 1px 4px;
  line-height: 1;
  color: #fff;
  border-radius: 2px;
  text-decoration: line-through;
  font-size: .8em;
}
.comment-badge {
  background: #3b82f6;
  padding: 1px 5px;
  line-height: 1;
  color: #fff;
  border-radius: 2px;
  font-weight: 700;
  font-size: .8em;
}

/* --- Script Text --- */
.script-text,
.script-text p {
  display: inline;
  margin: 0;
}
.child-text p {
  display: inline;
  margin: 0;
}

/* --- Change Icons --*/

.change-icon {
  display:inline-block;
  padding:2px 4px;
  border-radius:4px;
  font-size:16px;
  color:#fff;
  line-height: 16px;
}
.change-strike { background:#bd80ff; } /* Grün */
.change-comment { background:#3b82f6; } /* Blau */

.merge-block .change-icon {
  margin-right: 0.5em;
}

/* --- Utility Farben --- */
:root {
   --color-rene: #d0dfee;         /* hellblau */
  --color-rene-golden: #91a1ce;  /* kräftiges Blau */
  --color-thassos: #fff59f;      /* hellgelb */
  --color-thassos-golden: #f7d748; /* sattes Gelb */
  --color-default-bg: #f0f0f0;
}

.diff-added {
  outline: 2px solid #4caf50;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
  background-color: rgba(76, 175, 80, 0.02) !important;
}
.diff-removed {
  outline: 2px solid #e33 !important;
  opacity: .5;
}
.diff-changed {
  outline: 2px solid #ffeb3b;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
}
.diff-badge {
  font-size: 1.125em;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
  opacity: 1;
  margin: 0 1em 0 0;
}
.diff-added .diff-badge {
  background: #4caf50;
  color: #fff;
}
.diff-removed .diff-badge {
  background: #e33;
  color: #fff !important;
}
.diff-changed .diff-badge {
  background: #ffeb3b;
  color: #000;
}
.diff-removed .script-text {
  opacity: .6;
}
.diff-added span.diff-added {
  color: #2e7d32;
}
.diff-removed span.diff-removed {
  color: #c62828;
  /*text-decoration: line-through;*/
}

/* --- Legende (inline im Header) --- */
.diff-legend-inline {
  position: absolute;
  right:1em;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 1rem;
  color: #444;
}
.diff-legend-inline span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
}
.legend-box {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.legend-added   { background: #4caf50; }
.legend-removed { background: #e33; }
.legend-changed { background: #ffeb3b; border: 1px solid #aaa; }


/*--------------------------------------------------------------
A-B Ansicht – Zwei Spalten mit Trennlinie
--------------------------------------------------------------*/

#ab-view {
  display: flex;
  gap: 0;
  height: auto;
  position: relative;
}

/* vertikale Trennlinie in der Mitte */
#ab-view::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #666;
  pointer-events: none;
}

.diff-col {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.5rem;
  background: transparent;
  border: none;
}

/* Karten wie in Single-Ansicht */
.diff-item {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
}

.diff-item .meta {
  font-size: 1rem;
  color: #666;
  margin-bottom: .4rem;
}

.diff-item .text {
  line-height: 1.55;
  color: #111;
}

/* optisch klar: leere Platzhalter */
.diff-item.empty {
  opacity: .4;
  background: #f4f4f4;
  border: 1px dashed #bbb;
  text-align: center;
  font-style: italic;
  color: #555;
}

/*--------------------------------------------------------------
A–B Ansicht – Titel + Spalten + Trennlinie
--------------------------------------------------------------*/

#ab-view {
  margin-top: 1rem;
}

/* Titelzeile */
.diff-titles {
  display: flex;
  margin-bottom: .5rem;
  font-weight: 700;
  color: #333;
}

.diff-titles .col-title {
  flex: 1;
  text-align: center;
  font-size: 1.5rem;
}

/* Spalten-Wrapper */
.ab-cols {
  display: flex;
  position: relative;
}

/* Vertikale Trennlinie in der Mitte */
.ab-cols::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #666;
  pointer-events: none;
}

/* Spalten */
.diff-col {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.5rem;
  background: transparent;
  border: none;
}

/* Karten */
.diff-item {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  margin: 0.75rem 0;
  padding: 0.9rem 1rem;
}

.diff-item .meta {
  font-size: 1rem;
  color: #666;
  margin-bottom: .4rem;
}

.diff-item .text {
  line-height: 1.55;
  color: #111;
}

/* Leere Slots */
.diff-item.empty {
  opacity: .4;
  background: #f4f4f4;
  border: 1px dashed #bbb;
  text-align: center;
  font-style: italic;
  color: #555;
}

.diff-item.placeholder {
  border: 1px dashed #ccc !important;
  background: transparent !important;
}

.diff-item.added,
.added-merge {
  outline: 2px solid #8bc48b;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
}

.added-child {
  outline: 2px solid #8bc48b;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
  background: #fcfffc;
}

.diff-item.insert.inactive {
  opacity: .5;
}

/*--------------------------------------------------------------
A–B Ansicht – Strikethrough-Steuerung
--------------------------------------------------------------*/

/* Standard: Strikes ausgeblendet */
#ab-view s {
  display: none;
}

/* Sichtbar, wenn Klasse aktiv */
#ab-view.show-striked s {
  display: inline;
  color: #888;
  text-decoration: line-through;
}

/* In geänderten Items alle Strikethroughs anzeigen */
/*.diff-changed s {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: line-through !important;
}*/

.strike-hint {
  font-size: 0.8rem;
  color: #d09;
  margin-top: 0.2rem;
}

/*--------------------------------------------------------------
A–B Ansicht – Kommentare
--------------------------------------------------------------*/

/* Kommentarfarbe */
#ab-view .comment,
#ab-view .highlight-comment {
  color: #3b82f6; /* Blau */
}

/* Wenn Button "Hide comments" aktiv → ausblenden */
#ab-view.hide-comments .comment,
#ab-view.hide-comments .highlight-comment {
  display: none !important;
}

/* Farben für Änderungen in rechter Spalte */
.diff-item.added {
  outline: 2px solid #4caf50;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
}
.diff-item.deleted {
  outline: 2px solid #e33;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
}
.diff-item.changed {
  outline: 2px solid #ffeb3b;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
}

/* ============================= */
/*  Geloeschte Elemente in A–B   */
/* ============================= */

.deleted-child {
  /*border: 1px solid #e33;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;*/
  /*text-decoration: line-through;*/
  color: #e33;
  margin: 0.25rem 0;
  opacity: 0.5;
  background: rgba(255, 230, 230, 0.15); /* ganz leichtes Rot, damit Text lesbar bleibt */
}

/* Auch in Summary sichtbare rote Markierung */
.merge-summary .deleted-child {
  border-color: #e33;
  opacity: 0.6;
}

.merge-children .deleted-child {
  padding: .7rem 1rem .7rem 1.4rem;
  margin: .7rem 0;
}

/* Text weiterhin lesbar, aber etwas blasser */
.deleted-child .child-text,
.deleted-child .script-text {
  color: #a00;
  opacity: 0.8;
}

/* Optional: weicher Übergang beim Öffnen/Schliessen */
.merge-children,
.merge-summary {
  transition: all 0.25s ease;
}

.deleted-merge {
  outline: 2px solid #e33;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
  opacity: 0.6;
  background: rgba(255, 0, 0, 0.02);
}

.merge-children .deleted-child {
  outline: 2px solid #e33;
  outline-offset: -2px; /* damit sie optisch wie eine Border wirkt */
  opacity: 0.6;
  padding: .7rem 1rem .7rem 1.4rem;
  margin: .7rem 0;
}

/*--------------------------------------------------------------
Child Farben
--------------------------------------------------------------*/

/* --- Einzelfarben (ein Origin) --- */
.origin-rene {
  --child-gradient: var(--color-rene);
}

.origin-rene-golden {
  --child-gradient: var(--color-rene-golden);
}

.origin-thassos {
  --child-gradient: var(--color-thassos);
}

.origin-thassos-golden {
  --child-gradient: var(--color-thassos-golden);
}

.origin-insert {
  --child-gradient: var(--color-default-bg);
}

/* --- Zweifarbige Trennlinien (harte 50%-Trennung) --- */
.origin-rene.origin-rene-golden {
  --child-gradient: linear-gradient(to bottom,
    var(--color-rene) 0%,
    var(--color-rene) 50%,
    var(--color-rene-golden) 50%,
    var(--color-rene-golden) 100%);
}

.origin-rene.origin-thassos {
  --child-gradient: linear-gradient(to bottom,
    var(--color-rene) 0%,
    var(--color-rene) 50%,
    var(--color-thassos) 50%,
    var(--color-thassos) 100%);
}

.origin-rene.origin-thassos-golden {
  --child-gradient: linear-gradient(to bottom,
    var(--color-rene) 0%,
    var(--color-rene) 50%,
    var(--color-thassos-golden) 50%,
    var(--color-thassos-golden) 100%);
}

.origin-rene-golden.origin-thassos {
  --child-gradient: linear-gradient(to bottom,
    var(--color-rene-golden) 0%,
    var(--color-rene-golden) 50%,
    var(--color-thassos) 50%,
    var(--color-thassos) 100%);
}

.origin-rene-golden.origin-thassos-golden {
  --child-gradient: linear-gradient(to bottom,
    var(--color-rene-golden) 0%,
    var(--color-rene-golden) 50%,
    var(--color-thassos-golden) 50%,
    var(--color-thassos-golden) 100%);
}

.origin-thassos.origin-thassos-golden {
  --child-gradient: linear-gradient(to bottom,
    var(--color-thassos) 0%,
    var(--color-thassos) 50%,
    var(--color-thassos-golden) 50%,
    var(--color-thassos-golden) 100%);
}

.child-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-left: var(--child-gradient, #ccc);
  border-radius: 4px 0 0 4px;
}

.child-item.placeholder::before {
  background: transparent;
}
.child-item.placeholder {
  background: transparent;
  border: 1px dashed #999;
}