/* Datei-Viewer (public/js/uge-viewer.js): Fenster fast bildschirmfüllend, am Handy ganz */
html.uge-viewer-offen { overflow: hidden; }
.uge-viewer {
  width: min(1100px, calc(100vw - 2rem)); height: calc(100vh - 2rem); height: calc(100dvh - 2rem);
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 1rem; overflow: hidden;
  background: #F3F4F6; color: #111827; box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
  display: none; flex-direction: column;
}
.uge-viewer[open] { display: flex; }
.uge-viewer::backdrop { background: rgba(17,24,39,.72); }
.dark .uge-viewer { background: #1F2937; color: #F3F4F6; }

.uge-viewer-kopf { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem .55rem 1.1rem; background: #fff; border-bottom: 1px solid #E5E7EB; flex: 0 0 auto; }
.dark .uge-viewer-kopf { background: #111827; border-color: rgba(255,255,255,.08); }
.uge-viewer-titel { font-weight: 600; font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uge-viewer-zaehler { color: #6B7280; font-size: .85rem; white-space: nowrap; }
.uge-viewer-werkzeuge { display: flex; gap: .25rem; margin-left: auto; flex: 0 0 auto; }
.uge-viewer-knopf {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: .6rem;
  background: transparent; color: inherit; font: 600 1.25rem/1 system-ui, sans-serif; cursor: pointer; text-decoration: none;
}
.uge-viewer-knopf:hover { background: #E6EDF0; }
.dark .uge-viewer-knopf:hover { background: rgba(255,255,255,.08); }
.uge-viewer-knopf[hidden] { display: none; }
.uge-viewer-zu { font-size: 1.6rem; }
.uge-viewer-knopf:focus-visible, .uge-viewer-flaeche:focus-visible { outline: 3px solid #339933; outline-offset: -3px; }

.uge-viewer-flaeche { position: relative; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 1rem; outline: none; }
.uge-viewer-laedt { position: absolute; inset: 0; display: grid; place-items: center; color: #6B7280; font-size: .95rem; }

/* Blättern zwischen Dateien einer Gruppe (Anhänge einer Mail, Galerie) */
.uge-viewer-zurueck, .uge-viewer-weiter {
  position: absolute; top: 50%; width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.8rem;
  background: rgba(17,24,39,.55); color: #fff; transform: translateY(-50%);
}
.uge-viewer-zurueck { left: .6rem; }
.uge-viewer-weiter { right: .6rem; }
.uge-viewer-zurueck:hover, .uge-viewer-weiter:hover { background: rgba(17,24,39,.8); }

/* Bild: eingepasst, Klick oder + zeigt es groß (scrollbar) */
.ist-bild { display: grid; place-items: center; }
.uge-viewer-bild { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; border-radius: .25rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); background: #fff; }
.uge-viewer-bild.ist-gross { max-width: none; max-height: none; cursor: zoom-out; }
.ist-bild:has(.ist-gross) { place-items: start; }

/* PDF: Seiten untereinander */
.uge-viewer-seiten { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: min-content; }
.uge-viewer-seite { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); flex: 0 0 auto; }
.uge-viewer-seite canvas { display: block; width: 100%; height: 100%; }

/* Word: docx-preview bringt eigene Seitenoptik mit, hier nur Rahmen */
.ist-word { padding: 0; }
.uge-viewer-word .docx-wrapper { background: transparent; padding: 1rem; }
.uge-viewer-word .docx-wrapper > section.docx { box-shadow: 0 2px 10px rgba(0,0,0,.18); margin-bottom: 1rem; }
@media (max-width: 52rem) {
  .uge-viewer-word .docx-wrapper { padding: .5rem; align-items: flex-start; }
  .uge-viewer-word .docx-wrapper > section.docx { transform-origin: top left; }
}

/* Tabellen: Reiter je Blatt, Kopfzeile und erste Spalte bleiben sichtbar */
.ist-tabelle { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.uge-viewer-reiter { display: flex; gap: .25rem; padding: .5rem .75rem 0; overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid #E5E7EB; background: #fff; }
.dark .uge-viewer-reiter { background: #111827; border-color: rgba(255,255,255,.08); }
.uge-viewer-reiter-knopf { border: 0; background: transparent; color: inherit; font: 500 .875rem/1 inherit; padding: .55rem .8rem; border-radius: .5rem .5rem 0 0; cursor: pointer; white-space: nowrap; }
.uge-viewer-reiter-knopf[aria-selected="true"] { background: #F3F4F6; font-weight: 700; color: #203D4C; box-shadow: inset 0 -3px 0 #339933; }
.dark .uge-viewer-reiter-knopf[aria-selected="true"] { background: #1F2937; color: #93C5FD; }
.uge-viewer-tabelle { flex: 1 1 auto; overflow: auto; padding: 0 0 1rem; }
.uge-viewer-tabelle table { border-collapse: separate; border-spacing: 0; font-size: .85rem; background: #fff; color: #111827; }
.uge-viewer-tabelle td, .uge-viewer-tabelle th { border-right: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; padding: .3rem .55rem; white-space: nowrap; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.uge-viewer-tabelle tr:first-child td { position: sticky; top: 0; background: #E6EDF0; font-weight: 600; z-index: 1; }
.uge-viewer-tabelle td:first-child { position: sticky; left: 0; background: #F9FAFB; z-index: 1; }
.uge-viewer-tabelle tr:first-child td:first-child { z-index: 2; background: #E6EDF0; }
.uge-viewer-leer { padding: 1rem; color: #6B7280; font-size: .875rem; }

/* Text */
.uge-viewer-text { margin: 0; padding: 1rem 1.25rem; background: #fff; color: #111827; border-radius: .5rem; white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Keine Vorschau / Fehler */
.uge-viewer-hinweis { height: 100%; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; color: #4B5563; }
.dark .uge-viewer-hinweis { color: #D1D5DB; }
.uge-viewer-hinweis p { margin: 0; max-width: 28rem; }
.uge-viewer-hinweis-knopf { display: inline-block; padding: .65rem 1.2rem; border-radius: 999px; background: #277a27; color: #fff; font-weight: 600; text-decoration: none; }
.uge-viewer-hinweis-knopf:hover { background: #203D4C; }

/* Handy: ganzer Bildschirm */
@media (max-width: 40rem) {
  .uge-viewer { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .uge-viewer-flaeche { padding: .5rem; }
  .uge-viewer-kopf { padding-left: .8rem; gap: .4rem; }
  .uge-viewer-knopf { width: 2.2rem; }
  .uge-viewer-zurueck, .uge-viewer-weiter { top: auto; bottom: .8rem; transform: none; }
}