/* nrOffice – App-spezifische Stile: Writer, Calc, PDF, Bilder. */

/* ══ WRITER ══════════════════════════════════════════════════════════════ */
.app-writer { display: flex; flex-direction: column; height: 100%; }
.werkzeugleiste {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--bg2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.werkzeuggruppe { display: flex; align-items: center; gap: 2px; }
.werkzeug-trenner { width: 1px; height: 20px; background: var(--border); margin: 0 5px; }
.wz {
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px; font-size: 13px;
  color: var(--fg2); display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid transparent;
}
.wz:hover { background: var(--bg3); color: var(--fg); }
.wz.aktiv { background: var(--auswahl); color: var(--haupt); border-color: var(--haupt); }
.wz select { height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); padding: 0 4px; font-size: 12.5px; }
.wz-eingabe { width: 84px; height: 28px; padding: 0 7px; font-size: 12.5px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); }

.papier-huelle { flex: 1; overflow-y: auto; padding: 22px 16px 60px; display: flex; justify-content: center; }
.papier {
  width: min(820px, 100%); min-height: 100%; background: var(--papier);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 46px 52px;
}
.papier .ql-editor { min-height: 460px; outline: none; }
.papier .ql-editor.ql-blank::before { color: var(--fg3); font-style: normal; content: attr(data-platzhalter); }
.ql-editor h1 { font-size: 26px; margin: 18px 0 8px; line-height: 1.25; }
.ql-editor h2 { font-size: 21px; margin: 16px 0 6px; line-height: 1.3; }
.ql-editor h3 { font-size: 17px; margin: 14px 0 5px; }
.ql-editor p { margin: 0 0 10px; }
.ql-editor blockquote { border-left: 3px solid var(--border-hell); padding-left: 14px; color: var(--fg2); margin: 0 0 10px; }
.ql-editor pre.ql-syntax { background: var(--bg3); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; }
.ql-editor img { max-width: 100%; border-radius: 6px; }
.ql-editor a { color: var(--haupt); text-decoration: underline; }
.ql-editor li { margin-bottom: 3px; }
.ql-snow .ql-picker { color: var(--fg); }
.ql-snow .ql-picker-label { border-color: transparent; }
.ql-snow .ql-picker-options { background: var(--bg2); border-color: var(--border-hell); box-shadow: var(--schatten); border-radius: var(--radius-sm); }
.ql-snow .ql-picker-item:hover { color: var(--haupt); }
.ql-tooltip { background: var(--bg2); border-color: var(--border-hell); box-shadow: var(--schatten); }
.ql-tooltip input[type=text] { background: var(--bg); color: var(--fg); border-color: var(--border); }
.ql-formats { background: transparent; }
.titel-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.titel-eingabe {
  flex: 1; background: none; border: none; border-bottom: 1px dashed transparent;
  font-size: 15px; font-weight: 600; color: var(--fg); padding: 4px 2px;
}
.titel-eingabe:hover { border-bottom-color: var(--border); }
.titel-eingabe:focus { outline: none; border-bottom-color: var(--haupt); }

/* ══ CALC ════════════════════════════════════════════════════════════════ */
.app-calc { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.formelzeile {
  display: flex; align-items: stretch; gap: 0; background: var(--bg2);
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.formelzeile .referenz {
  width: 108px; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--mono);
  font-size: 12px; border-right: 1px solid var(--border); color: var(--fg2);
}
.formelzeile input {
  flex: 1; min-width: 0; background: none; border: none; padding: 7px 12px;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg);
}
.formelzeile input:focus { outline: none; background: var(--bg); }

.blatt { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--bg); }
.blatt-sizer { position: relative; }
.blatt-koerper { position: absolute; top: 0; left: 0; will-change: transform; }
.blatt-zeile { display: flex; height: var(--zeilenhoehe); }

/* Die Kopfzeile bleibt beim Scrollen stehen; der Körper startet darunter
   (translateY in zeichnen()). Beide brauchen dieselbe Zeilenhöhe. */
.blatt-kopf {
  display: flex; height: var(--zeilenhoehe);
  position: sticky; top: 0; z-index: 6; background: var(--bg2);
}
.blatt-kopf .blatt-ecke {
  width: var(--kopfspalten); flex: 0 0 auto; position: sticky; left: 0; z-index: 5;
  background: var(--bg2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.blatt-spaltkopf { position: relative; flex: 0 0 auto; }
.blatt-spaltkopf span.k {
  display: grid; place-items: center; height: var(--zeilenhoehe); background: var(--bg2);
  font-size: 10.5px; color: var(--fg3); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
.blatt-spaltkopf span.k:hover { background: var(--bg3); color: var(--fg); }
.blatt-greifer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 4; }
.blatt-greifer:hover { background: var(--haupt); opacity: .5; }

.blatt-zeile .spaltennummer {
  width: var(--kopfspalten); flex: 0 0 auto; display: grid; place-items: center;
  font-size: 10.5px; color: var(--fg3); border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--gitter); background: var(--bg2);
  position: sticky; left: 0; z-index: 4; user-select: none;
}
.zelle {
  flex: 0 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 5px; font-size: 12.5px; border-right: 1px solid var(--gitter);
  border-bottom: 1px solid var(--gitter); cursor: cell; user-select: none;
}
.zelle.zahl { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.zelle.markiert { background: var(--auswahl); }
.zelle.aktiv { outline: 2px solid var(--haupt); outline-offset: -2px; z-index: 3; background: var(--bg2); }
.zelle.in-bearbeitung { outline: 2px solid var(--haupt); outline-offset: -2px; background: var(--bg2); }
.zelle.fehler { color: var(--fehler); font-weight: 600; }
.zelle.fehler::after { content: 'ⓘ'; font-size: 9px; margin-left: 3px; opacity: .7; }
.zellen-editor {
  position: absolute; z-index: 20; font-size: 12.5px; font-family: var(--mono);
  padding: 0 4px; border: 2px solid var(--haupt); border-radius: 2px; background: var(--bg2); color: var(--fg);
  box-shadow: var(--schatten);
}
.calc-leiste { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.calc-hinweis { font-size: 11.5px; color: var(--fg3); }

/* ══ PDF ═════════════════════════════════════════════════════════════════ */
.app-pdf { display: flex; flex-direction: column; height: 100%; }
.pdf-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--bg3); }
.pdf-seite { position: relative; background: #fff; box-shadow: var(--schatten); border-radius: 3px; overflow: hidden; }
.pdf-seite canvas { display: block; }
.pdf-textebene { position: absolute; inset: 0; overflow: hidden; line-height: 1; }
.pdf-textebene > span { position: absolute; white-space: pre; transform-origin: 0 0; color: transparent; }
.pdf-textebene mark { background: rgba(255, 205, 60, .85); color: transparent; border-radius: 2px; }
.pdf-textebene mark.aktuell { background: rgba(255, 120, 60, .95); }
.pdf-lade { padding: 40px; text-align: center; color: var(--fg3); font-size: 13px; }
.pdf-fehler {
  position: absolute; inset: auto 8px 8px 8px; z-index: 3; padding: 6px 10px;
  font-size: 11.5px; color: #7a1d1d; background: rgba(255, 235, 235, .95);
  border: 1px solid rgba(180, 60, 60, .3); border-radius: 6px;
}

/* ══ BILDER ═══════════════════════════════════════════════════════════════ */
.app-media { height: 100%; display: flex; flex-direction: column; }
.bilder-raster { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; align-content: start; }
.kachel { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg2); text-align: left; display: flex; flex-direction: column; }
.kachel:hover { border-color: var(--haupt); }
.kachel.aktiv { border-color: var(--haupt); box-shadow: 0 0 0 2px var(--auswahl); }
.kachel .bild { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--bg3); }
.kachel .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel .text { padding: 7px 9px; }
.kachel .name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel .meta { font-size: 11px; color: var(--fg3); }
.bilder-werkzeuge { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }

.bilder-buehne {
  position: fixed; inset: 0; z-index: 250; background: rgba(6, 6, 12, .92);
  display: flex; flex-direction: column;
}
.bilder-buehne .kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; background: rgba(0, 0, 0, .35); }
.bilder-buehne .kopf .name { flex: 1; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilder-buehne .flaeche { flex: 1; overflow: auto; display: grid; place-items: center; padding: 20px; }
.bilder-buehne img { max-width: 100%; max-height: 100%; transform-origin: center center; transition: transform .12s ease; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }

@media (max-width: 620px) {
  .papier { padding: 26px 20px; }
  .formelzeile .referenz { width: 76px; }
}