/* ==========================================================================
   Bereich „Schwärzung" — /room/:roomId/schwaerzung
   IHC - Invest in Healthcare GmbH

   Ergänzt style.css. Farben und Maße stammen aus den dort gesetzten
   Variablen (--navy, --red, --line, --soft, --radius …).

   Hinweis zur Vorschau: Lage UND Grundaussehen der Fundstellen-Rahmen stehen
   als style-Attribut am Element (views/schwaerzung-doc.ejs). Die Lage muss
   dort stehen — sie ist für jeden Rahmen verschieden. Das Grundaussehen steht
   bewusst daneben, damit die Vorschau auch ohne dieses Stylesheet aussagekräftig
   bleibt. Was hier folgt, ist der Feinschliff: Zustände, Übergänge, Anordnung.
   ========================================================================== */

/* ---------- Grundgerüst der Prüfseite ---------- */
.sw-wrap { max-width: 1440px; }

.sw-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sw-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.sw-col-pick { position: sticky; top: 84px; }
.sw-col-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }

/* Ab genügend Breite stehen Fundstellenliste und Vorschau nebeneinander –
   so ist beim Abwählen sofort zu sehen, welcher Rahmen verschwindet. */
@media (min-width: 1180px) {
  /* Reihenfolge der Spalten = Reihenfolge der Nummern: 1 Auswahl, 2 Fundstellen,
     3 Vorschau. Vorher lag die Vorschau links neben der Fundstellenliste – von
     links nach rechts las sich die Seite als 1, 3, 2, und die Reihenfolge beim
     Durchtabben stimmte nicht mit dem Bild überein. Die Breiten bleiben gleich. */
  .sw-col-main { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
  .sw-col-main .sw-hits { grid-row: 1; grid-column: 1; position: sticky; top: 84px; }
  .sw-col-main .sw-preview { grid-row: 1; grid-column: 2; }
}
@media (max-width: 900px) {
  .sw-layout { grid-template-columns: minmax(0, 1fr); }
  .sw-col-pick { position: static; }
}

/* ---------- Auswahlspalte ---------- */
.sw-fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.sw-legend {
  padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--grey); text-transform: uppercase; letter-spacing: .5px;
}
.sw-checks { display: grid; gap: 7px; }
.sw-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 500; color: var(--navy); }
.sw-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sw-buttons .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Warnhinweis ---------- */
.sw-warn { margin-bottom: 20px; line-height: 1.5; }
.sw-warn b { font-weight: 600; }

/* ---------- Fundstellenliste ---------- */
.sw-hits .sw-hitbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sw-hitlist { max-height: 62vh; overflow: auto; border: 1px solid var(--soft); border-radius: var(--radius-sm); }
.sw-hitlist table.list th { position: sticky; top: 0; background: #fff; z-index: 1; }
.sw-hitlist td { padding: 8px 10px; }
.sw-hittext { word-break: break-word; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--navy); }
.sw-hitmeta { margin-top: 2px; }
.sw-pick { width: 1%; white-space: nowrap; }
.sw-pick input { width: auto; accent-color: var(--red); }

/* Abgewählte Zeile tritt zurück, verschwindet aber nicht: sie soll
   wiederauffindbar bleiben. */
tr[data-sw-row].off td { opacity: .5; }
tr[data-sw-row].off .sw-hittext { text-decoration: line-through; }

/* Javascript blendet die Rahmen sofort ein und aus. Der Hinweis darauf,
   dass es auch ohne geht, ist dann überflüssig. */
.js .sw-nojs { display: none; }

/* ---------- Vorschau ---------- */
.sw-preview .sw-page { margin: 0 0 22px; }
.sw-preview .sw-page:last-child { margin-bottom: 0; }
.sw-canvas {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-sm);
}
.sw-preview figcaption { margin-top: 6px; }

/* Der Rahmen zeigt, WAS geschwärzt würde – deshalb Akzentfarbe statt Schwarz.
   Lage und Grundaussehen kommen aus dem style-Attribut; hier stehen die
   Feinheiten. */
.sw-box {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset;
  transition: opacity .12s ease, box-shadow .12s ease;
  pointer-events: auto;
}
.sw-box:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .8) inset; }
.sw-box.off { display: none !important; }

/* ---------- Manuelle Schwärzung in der Vorschau ----------
   Alles hier Beschriebene setzt Javascript voraus: Ohne Javascript lässt sich
   kein Rechteck aufziehen. Die zugehörigen Bedienelemente tragen deshalb die
   Klasse .sw-jsonly und erscheinen nur, wenn public/app-red.js die Klasse .js
   am Wurzelelement gesetzt hat. Umgekehrt zeigt .sw-nojs den Hinweis darauf,
   dass diese eine Zugabe fehlt — alles Übrige der Seite bleibt bedienbar. */
.sw-jsonly { display: none; }
.js .sw-manualbar.sw-jsonly { display: flex; }
.js .sw-del.sw-jsonly { display: flex; }

/* Kein display hier: Die Anzeige regelt allein die Regel oben mit .js davor.
   Stünde an dieser Stelle „display:flex", überschriebe es wegen gleicher
   Spezifität und späterer Stellung das display:none von .sw-jsonly — der
   Umschalter erschiene dann auch ohne Javascript und täte nichts. */
.sw-manualbar {
  align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--soft); border-radius: var(--radius-sm); background: #f7f9fc;
}
.sw-manualswitch { margin: 0; flex: 0 0 auto; font-weight: 500; white-space: nowrap; }
.sw-manualswitch input { width: auto; accent-color: #0b5ca8; }
.sw-manualhint { flex: 1 1 320px; min-width: 0; line-height: 1.45; }

/* Im Zeichenmodus ist das Seitenbild eine Zeichenfläche: Fadenkreuz als
   Mauszeiger, keine Textauswahl, und auf Berührungsgeräten kein Wischen –
   sonst scrollt die Seite, statt ein Rechteck zu entstehen. Die vorhandenen
   Rahmen nehmen keine Zeigerereignisse mehr an, damit ein Zug auch über einer
   bereits gefundenen Stelle beginnen kann; nur das Löschkreuz bleibt
   erreichbar. */
.sw-canvas.draw { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.sw-canvas.draw img { pointer-events: none; }
.sw-canvas.draw .sw-box { pointer-events: none; }
.sw-canvas.draw .sw-del { pointer-events: auto; }

/* Das Rechteck während des Ziehens: gestrichelt, damit es sich von den
   fertigen Rahmen unterscheidet. */
.sw-drag {
  position: absolute; pointer-events: none; z-index: 3;
  border: 2px dashed #0b5ca8; background: rgba(11, 92, 168, .14); border-radius: 2px;
}

/* Der fertige eigene Bereich. Andere Farbe als die Mustertreffer (dort das Rot
   der Hausfarbe), damit ohne Nachdenken zu sehen ist, was von Hand kam. */
.sw-box-manual { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset; }
.sw-box-manual:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) inset; }

/* Löschkreuz in der oberen rechten Ecke des eigenen Bereichs. Es sitzt halb
   außerhalb, damit es auch einen sehr flachen Bereich nicht ganz verdeckt. */
.sw-del {
  position: absolute; top: -9px; right: -9px; width: 20px; height: 20px;
  display: none; align-items: center; justify-content: center;
  padding: 0; margin: 0; line-height: 1; font-size: 14px; font-weight: 700;
  color: #fff; background: #0b5ca8; border: 2px solid #fff; border-radius: 50%;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.sw-del:hover { background: var(--red, #9e0000); }
.sw-del:focus-visible { outline: 2px solid #0b5ca8; outline-offset: 2px; }

/* Eine in der Liste angetippte Fundstelle wird kurz hervorgehoben. */
.sw-box.flash { animation: sw-flash 1.1s ease-out 2; }
@keyframes sw-flash {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) inset; }
  50%      { box-shadow: 0 0 0 3px rgba(158, 0, 0, .55); }
}

/* ---------- Übersicht ---------- */
.sw-filter-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.sw-field { display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1 1 200px; }
.sw-field > span { font-size: 13px; color: var(--grey); }
.sw-field-btn { flex: 0 0 auto; min-width: 0; flex-direction: row; gap: 8px; }
.sw-table td { vertical-align: middle; }
.sw-table td:last-child { white-space: nowrap; }
.sw-bulkhead { font-size: 14px; font-weight: 600; color: var(--navy); margin: 20px 0 8px; }
.sw-bulkbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sw-bulkbar .small { max-width: 720px; }

/* ---------- KI-Karte ---------- */
.sw-ai h2 { display: flex; align-items: center; gap: 8px; }
.sw-ai svg { flex: 0 0 auto; }

/* ===========================================================================
   Der Ablauf in drei Schritten — Kopf der Schwärzungsübersicht
   ---------------------------------------------------------------------------
   Diese Seite war eine Liste mit einem Textlink in der letzten Spalte. Wer sie
   zum ersten Mal öffnete, konnte nicht erkennen, dass die eigentliche Arbeit
   dahinter liegt. Die drei Schritte stehen deshalb vor der Liste, bevor
   irgendetwas anderes kommt.
   =========================================================================== */
.sw-ablauf {
  display: grid; gap: 10px; margin: 0 0 8px; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none; counter-reset: none;
}
.sw-ablauf li {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-top: 3px solid var(--red);
  border-radius: var(--radius-sm); background: #fff;
  padding: 12px 14px;
}
.sw-ablauf li b { color: var(--navy); font-size: 14px; }
.sw-ablauf li span { color: var(--grey); font-size: 13px; line-height: 1.5; }
/* Der Satz, der die wichtigste Zusage der ganzen Seite trägt: Das Original
   bleibt liegen. Er steht abgesetzt und nicht als vierte Kachel — er ist kein
   Schritt, sondern das Ergebnis. */
.sw-ablauf-fuss { margin: 0 0 14px; }

/* ---------- Zustandszeile: was ist zu tun, was ist getan ---------- */
.sw-stand { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.sw-stand-teil {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; padding: 8px 14px; text-decoration: none; color: var(--navy);
}
a.sw-stand-teil:hover { border-color: var(--red); background: var(--rose-bg); }
.sw-stand-teil.an { border-color: var(--red); background: var(--rose-bg); }
.sw-stand-teil b { font-size: 19px; font-variant-numeric: tabular-nums; }
.sw-stand-teil span { font-size: 13px; color: var(--grey); }
/* Die dritte Angabe ist kein Weg, sondern eine Auskunft — sie sieht deshalb
   anders aus und reagiert nicht auf den Zeiger. */
.sw-stand-info { background: var(--bg); cursor: help; }