/* Bau-Paket „Berichte“ und Unterschrift (public/js/views/bericht.js, berichte-reiter.js, unterschrift.js).
   Papier, Leiste und Fuß kommen von der Beleg-Maske (app.css: .papier, .beleg-leiste, .beleg-fuss-mobil) –
   hier nur, was Berichte zusätzlich brauchen. Keine eigenen Farben: Papier schwarz-weiß, Firmenfarbe über die Vorlage. */

/* ---------- Projekt-Reiter ---------- */
.b-liste-karte { padding: 8px; }
.b-liste-karte > .karten-kopf { padding: 8px 8px 4px; gap: 10px; flex-wrap: wrap; }
.b-filter { gap: 6px; flex-wrap: wrap; }
.b-liste .b-zeile { cursor: default; gap: 10px; }
.b-zeile-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none !important; min-height: 44px; }
.b-zeile-link .haupt { flex: 1; min-width: 0; }
.b-zeile .neben { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .b-zeile .chip { display: none; } }

/* ---------- Leiste ---------- */
.b-leiste .gespeichert[data-stand="offline"], .b-fuss-mobil .gespeichert[data-stand="offline"] { color: var(--warn); }
.b-leiste .gespeichert[data-stand="fehler"], .b-fuss-mobil .gespeichert[data-stand="fehler"] { color: var(--fehler); }
.b-leiste .werkzeug-leiste { margin-left: 4px; }
.b-fuss-rechts { display: flex; align-items: center; gap: 8px; min-width: 0; }
.b-fuss-rechts .gespeichert { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-fuss-mobil .knopf.haupt { height: 44px; }

/* ---------- Papier: Kopf ---------- */
.papier .b-anschrift div { line-height: 4.6mm; }
.papier .b-ohne-kunde { display: flex; align-items: center; gap: 8px; color: #6b6b6b; font-family: var(--schrift); font-size: 12.5px; margin-top: 2mm; flex-wrap: wrap; }
.papier .b-ohne-kunde .knopf { font-size: 12px; }
.papier .b-projekt-link { color: inherit; text-decoration: none; }
.papier .b-datum { text-align: right; width: auto; margin-left: auto; }
.papier .p-betreff { margin-bottom: 1mm; }

/* ---------- Papier: Abschnitte (Maße wie im PDF: Titel 10 pt fett mit Linie, Text 9,5 pt) ---------- */
.b-abschnitte { margin-top: 2mm; }
.papier .b-abschnitt { margin-top: 5mm; break-inside: avoid; }
.papier .b-titel { font-size: 10pt; font-weight: bold; color: var(--titel-farbe, #111); border-bottom: .2mm solid #e3e3e3; padding-bottom: 1.2mm; margin: 0 0 2.6mm; display: flex; align-items: center; gap: 6px; letter-spacing: 0; }
.papier .b-titel .info-tipp { font-family: var(--schrift); }
.papier .b-abschnitt textarea.papier-feld { min-height: 8mm; }
.papier .mit-mikro { display: flex; align-items: flex-start; gap: 4px; width: 100%; }
.papier .mit-mikro > .papier-feld { flex: 1; min-width: 0; }
.papier .b-neu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2.4mm; font-family: var(--schrift); }
.papier .b-neu .knopf { height: 34px; font-size: 13px; }
.papier .feld-markiert { box-shadow: 0 0 0 2px var(--fehler) !important; background: var(--fehler-weich) !important; }

/* Tabellen: gleiche Kopfzeile wie die Positionen (Band der Vorlage) */
.papier table.b-tab { table-layout: auto; margin-top: 0; }
.papier .b-tab td { vertical-align: middle; }
.papier .b-tab tbody tr + tr td { border-top: var(--zeilen-linie, 0); }
.papier .b-tab td.c-anzahl, .papier .b-tab td.c-pause { width: 15mm; }
.papier .b-tab td.c-von, .papier .b-tab td.c-bis { width: 21mm; }
.papier .b-tab td.c-stunden, .papier .b-tab td.c-menge { width: 20mm; }
.papier .b-tab td.c-einheit { width: 16mm; }
.papier .b-tab td.c-frist { width: 30mm; }
.papier .b-tab td.c-zustaendig { width: 36mm; }
.papier .b-tab td.c-nr { width: 8mm; color: #333; }
.papier .b-tab td.c-weg { width: 8mm; padding: 0; text-align: right; }
.papier .b-tab tfoot td { font-weight: bold; border-top: .2mm solid #bdbdbd; padding-top: 1.6mm; }
.papier .b-tab tfoot td:first-child { text-align: right; }
.papier .b-tab input[type=time], .papier .b-tab input[type=date] { font: inherit; text-align: right; }
.papier .b-weg { width: 28px; height: 28px; opacity: .45; }
.papier .b-weg:hover, .papier .b-weg:focus-visible { opacity: 1; }
.papier.gesperrt .b-tab td.c-weg { display: none; }
.papier .b-aufgabe { display: inline-flex; align-items: center; gap: 3px; font-family: var(--schrift); text-decoration: none; margin-top: .6mm; }

/* Wetter */
.papier .b-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2mm; font-family: var(--schrift); }
.papier .b-chips .chip.wahl { height: 32px; }
.papier .b-wetter { display: flex; align-items: baseline; gap: 6mm; }
.papier .b-wetter > .papier-feld { flex: 1; }
.papier .b-temp-box { display: inline-flex; align-items: baseline; gap: 1mm; }
.papier .b-temp { width: 14mm; text-align: right; }

/* Fotos: Raster wie die Foto-App, im Papier drei Spalten */
.papier .b-foto-raster { grid-template-columns: repeat(auto-fill, minmax(36mm, 1fr)); gap: 2.4mm; border-radius: 0; overflow: visible; }
.papier .b-foto { margin: 0; position: relative; min-width: 0; }
.papier .b-foto .foto-kachel { width: 100%; border-radius: 1.4mm; display: block; position: relative; }
.papier .b-foto figcaption { font-size: 7.5pt; color: #6b6b6b; margin-top: 1mm; }
.papier .b-foto figcaption .papier-feld { font-size: 8pt; }
.papier .b-foto-weg { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(17, 17, 17, .62); color: #fff; display: grid; place-items: center; cursor: pointer; }
.papier .b-foto-weg:hover { background: rgba(17, 17, 17, .85); }
.papier .b-foto.wartet img { opacity: .55; }
.papier .b-foto-stand { position: absolute; inset: auto 0 0 0; padding: 4px 6px; font: 600 11px var(--schrift); color: #fff; background: rgba(17, 17, 17, .55); display: flex; justify-content: center; }
.papier .b-foto.fehler .b-foto-stand { background: rgba(185, 28, 28, .8); }
.papier .b-foto.wartet .knopf { margin-top: 1mm; width: 100%; }

/* ---------- Unterschrift im Papier (Maße wie im PDF: Feld 16 mm hoch, Linie, Rolle, Name · Ort, Datum) ---------- */
.u-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 20mm; margin-top: 2mm; }
.u-felder.einzeln { grid-template-columns: minmax(0, 80mm); justify-content: end; }
.u-feld { min-width: 0; }
.u-feld-flaeche { height: 16mm; display: flex; align-items: flex-end; justify-content: flex-start; }
.u-feld-flaeche svg { height: 100%; max-width: 100%; display: block; }
.u-feld-linie { border-top: .2mm solid #555; }
.u-feld-label { font-size: 7.5pt; color: #6b6b6b; margin-top: 1mm; }
.u-feld-zeile { font-size: 7.5pt; color: #6b6b6b; }
.u-feld.gesetzt .u-feld-zeile { color: #333; }
.u-knopf { font-family: var(--schrift); height: 40px; margin-bottom: 1.5mm; }

/* ---------- Dialog „Unterschreiben“ ---------- */
.dialog.unterschrift { width: min(720px, 100%); }
.u-dialog { display: flex; flex-direction: column; gap: 12px; }
.u-rollen { gap: 6px; }
.u-feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.u-flaeche { position: relative; height: clamp(170px, 34vh, 280px); border: 1.5px dashed var(--linie-2, #c9cfdb); border-radius: 14px; background: #fff; overflow: hidden; }
.u-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; display: block; }
.u-linie { position: absolute; left: 7%; right: 7%; bottom: 24%; border-top: 1.5px solid #c4c4c4; pointer-events: none; }
.u-hinweis { position: absolute; left: 0; right: 0; bottom: calc(24% + 14px); display: flex; justify-content: center; align-items: center; gap: 6px; color: #9a9a9a; font-size: 14px; pointer-events: none; transition: opacity var(--tempo); }
.u-flaeche.hat-striche .u-hinweis { opacity: 0; }
.u-angaben { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.u-fehler[hidden] { display: none; }
.u-datum { margin-top: -4px; }
@media (max-width: 700px) {
  .u-angaben { grid-template-columns: 1fr; }
  .u-flaeche { height: clamp(180px, 38vh, 320px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .u-flaeche { height: 52vh; }
  .u-angaben { grid-template-columns: 1fr 1fr; }
}

/* ---------- Senden ohne Postfach ---------- */
.b-senden-wege { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ---------- Handy: das Papier wird Formular (wie die Beleg-Maske) ---------- */
@media (max-width: 860px) {
  .papier .b-abschnitt { margin-top: 22px; }
  .papier .b-titel { font-size: 16px; padding-bottom: 6px; margin-bottom: 10px; }
  .papier .b-abschnitt textarea.papier-feld, .papier .b-abschnitt > .mit-mikro > .papier-feld, .papier .b-wetter .papier-feld, .papier .p-betreff, .papier .p-info input.papier-feld { border: 1px solid #e3e3e3; border-radius: 10px; padding: 9px 11px; min-height: 44px; background: #fff; }
  .papier .p-info .z input.papier-feld { text-align: right; }
  .papier .b-neu .knopf { height: 44px; font-size: 15px; flex: 1 1 auto; justify-content: center; }
  .papier .b-chips .chip.wahl { height: 40px; }
  .papier .b-tab tbody tr { border: 1px solid #e5e7eb; border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; position: relative; width: 100% !important; }
  .papier .b-tab tbody tr td { padding: 0; font-size: 15px; width: auto !important; min-width: 0; }
  .papier .b-tab tbody tr td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: #6b6b6b; margin-bottom: 2px; }
  .papier .b-tab td.c-name, .papier .b-tab td.c-text, .papier .b-tab td.c-firma { grid-column: 1 / -1; padding-right: 40px !important; }
  .papier .b-punkte td.c-zustaendig { grid-column: 1 / 3; }
  .papier .b-tab td.c-nr { position: absolute; top: 10px; left: 12px; font-size: 12px; display: none !important; }
  .papier .b-tab td.c-weg { position: absolute; top: 6px; right: 6px; width: auto !important; }
  .papier .b-weg { width: 40px; height: 40px; opacity: .7; }
  .papier .b-tab tfoot, .papier .b-tab tfoot tr { display: block; }
  .papier .b-tab tfoot tr { display: flex; justify-content: space-between; padding: 6px 4px; font-size: 16px; }
  .papier .b-tab tfoot td { border: 0; padding: 0; width: auto !important; }
  .papier .b-tab tfoot td:empty { display: none; }
  .papier .b-tab .papier-feld { width: 100%; }
  .papier .b-tab input[type=time], .papier .b-tab input[type=date] { text-align: left; }
  .papier .b-foto-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .papier .b-foto .foto-kachel { border-radius: 8px; }
  .papier .b-foto figcaption { font-size: 12px; }
  .u-felder { grid-template-columns: 1fr; gap: 18px; }
  .u-felder.einzeln { grid-template-columns: 1fr; }
  .u-feld-flaeche { height: 64px; }
  .u-feld-label, .u-feld-zeile { font-size: 12.5px; }
  .u-knopf { height: 44px; }
}

/* Festgeschrieben: Text statt Feld */
.papier .b-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.papier .b-absatz { white-space: pre-wrap; }
.papier .b-tab td.r .b-text { text-align: right; }
.papier .p-info .b-text { text-align: right; }
@media (max-width: 700px) {
  .b-leiste .titel .chip, .b-leiste .b-summe, .b-leiste .titel-art { display: none; }
  .b-leiste .titel { flex: 1 1 auto; min-width: 0; }
  .b-leiste .titel-text { font-size: 15px; flex-shrink: 1; }
}
@media (max-width: 860px) {
  .papier.gesperrt .b-tab tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 12px; }
  .papier.gesperrt .b-tab td.c-name, .papier.gesperrt .b-tab td.c-text { padding-right: 0 !important; }
  .papier.gesperrt .b-tab td.c-weg { display: none; }
}
/* Leiste: der Titel gibt Platz ab, nie die Knöpfe */
.b-leiste .titel { flex: 1 1 auto; min-width: 0; }
.b-leiste .titel-text { flex-shrink: 1; }
.b-leiste > div[style] { flex: 0 1 0 !important; }
.b-fuss-mobil > div:first-child { min-width: 0; flex: none; }
.b-fuss-rechts { flex: 1 1 auto; justify-content: flex-end; }
.b-fuss-rechts .gespeichert { max-width: 30vw; }
@media (max-width: 400px) { .b-fuss-rechts .gespeichert[data-stand="gespeichert"] { display: none; } }
.b-leiste .werkzeug-leiste { flex: none; }
.b-fuss-rechts { min-width: 0; }
.b-fuss-mobil .knopf.haupt { min-width: 0; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-dialog .feld-fehler[hidden] { display: none; }
@media (max-width: 860px) {
  .papier .b-tab tbody td.r, .papier .b-tab tbody td.r .papier-feld, .papier .b-tab tbody td.r .b-text { text-align: left; }
  .papier .b-tab tbody td .papier-feld { padding: 8px 10px; }
}