/* Ergänzungen zu Entwurf 6. Der Prototyp baut alles aus <button> und kennt keine Vorschauleiste
   im Betrieb; hier steht nur, was der echte Betrieb zusätzlich braucht. Farben und Maße kommen
   aus den Variablen in entwurf6/style.css. */

/* Ohne die 38px hohe Vorschauleiste des Prototyps */
.portal-layout { min-height: 100dvh; }
.portal-login { min-height: 100dvh; }
@media (max-width: 850px) {
  .portal-sidebar { inset: 0 auto 0 0; height: 100dvh; }
  .menu-open .nav-backdrop { inset: 0; }
}

/* Links, die wie Knöpfe und Menüpunkte des Entwurfs aussehen */
a.btn, a.portal-nav-item, a.system-link, a.folder-row, a.task-row { text-decoration: none; color: var(--ink); }
a.portal-nav-item.selected { color: #713704; }
/* Zahl der offenen Aufgaben am Menüpunkt (13.10.2026): nur sichtbar, wenn etwas zu tun ist */
.nav-zahl { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--orange); color: #fff;
            font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.nav-zahl[hidden] { display: none; }
a.btn:hover, a.system-link:hover, a.task-row:hover, a.folder-row:hover, a.portal-nav-item:hover { filter: brightness(.97); }
.subnav a.btn { background: none; border-color: transparent; }
.subnav a.btn.active { background: var(--orange-tint); border-color: #d8ab7b; color: #713704; }
.inline-tabs { display: flex; }
.inline-tabs a.btn.active { background: var(--orange-tint); border-color: #d8ab7b; color: #713704; }
form.zeile { display: inline; }

/* Meldung nach einer Aktion bleibt auf der Seite stehen, ein Fehlertext darf nicht nach drei Sekunden weg sein */
.notice > .ico { color: var(--orange-deep); }
.notice.warning > .ico { color: #705500; }

/* Sortierbare Tabellen: Klick auf die Überschrift, Pfeil zeigt die Richtung */
table.sortierbar thead th { cursor: pointer; user-select: none; }
table.sortierbar thead th[aria-sort="ascending"]::after { content: " ↑"; }
table.sortierbar thead th[aria-sort="descending"]::after { content: " ↓"; }

/* Rechnungsliste: ganze Zeile wählt die Rechnung */
.invoice-list tbody tr { cursor: pointer; }
.invoice-list tbody tr:hover:not(.selected) { background: #fbfaf7; }
.row-select b { font-weight: 650; }
.detail-list dd small { display: block; color: var(--muted); margin-top: 3px; }
.project-card a { color: inherit; }
.detail-section form { margin: 0; }

/* Sprungziele mit den Markenlogos statt der Buchstaben des Prototyps (Festlegung Fabian 18.09.2026),
   grau wenn das Ziel fehlt */
.system-link img { width: 18px; height: 18px; display: block; }
.system-link .ico { width: 18px; height: 18px; }
.system-link.aus { color: var(--muted); background: var(--surface); cursor: default; }
.system-link.aus img { filter: grayscale(1); opacity: .4; }
.system-link.aus .ico { opacity: .4; }

/* Vorgangsauswahl im Dialog */
#zuordnen-treffer { max-height: 46vh; overflow-y: auto; padding: 2px; }
.project-choice { width: 100%; }
.project-choice small { color: var(--muted); }

/* Ordnerpfad als Brotkrumen */
.folder-path a { color: var(--muted); text-decoration: none; font-weight: 600; }
.folder-path a:hover { color: var(--ink); }
.folder-path .aktuell { color: var(--ink); font-weight: 700; }
.folder-row .ico { color: var(--orange-deep); }
.folder-row small { color: var(--muted); }

/* Startseite: Zahl wird nachgeladen */
.task-row.static { cursor: default; }
.task-number.laedt { color: var(--muted); font-weight: 400; font-size: 14px; }
.home-tasks .loading { margin: 22px 24px; }

.invoice-detail [data-detail] > .notice { margin: 0 20px 20px; }
.filterbar form.row { flex-wrap: wrap; gap: 18px; }
.pfad { overflow-wrap: anywhere; }
.leerzeile td { color: var(--muted); }

/* Serverseitig sortierte Tabellen (Avise): Spaltenkopf ist ein Link, Pfeil zeigt die Richtung */
.portal-table th a { color: inherit; text-decoration: none; }
.portal-table th a:hover { color: var(--ink); }
.portal-table th[aria-sort="ascending"] a::after { content: " \2191"; }
.portal-table th[aria-sort="descending"] a::after { content: " \2193"; }
/* Stand-Chips mit Zähler; ein Klick schaltet den Stand ein oder aus */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); text-decoration: none; font-size: 14px; }
.chip b { font-weight: 700; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.chip.aktiv { color: var(--ink); border-color: #b9b5ad; }
.chip.aktiv.fehlt .dot { background: var(--red); }
.chip.aktiv.ohne_vorgang .dot { background: #aa8110; }
.chip.aktiv.in_hero .dot { background: var(--green); }
.chip.aktiv.kein_vorgang .dot { background: var(--green); }
.chip:not(.aktiv) { opacity: .7; }
.avis-summe { text-align: right; font-variant-numeric: tabular-nums; }
.avis-summe span { display: block; color: var(--muted); font-size: 13px; }

/* Zuordnen-Dialog mit Avis links (PDF.js), Vorgangswahl rechts */
.modal.breit { width: min(1500px, 96vw); }
.zuordnen-koerper { display: flex; gap: 24px; align-items: flex-start; }
.zuordnen-wahl { flex: 1 1 0; min-width: 0; }
.zuordnen-avis { flex: 0 0 58%; height: 78dvh; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zuordnen-umschalter { display: flex; gap: 6px; }
.zuordnen-umschalter .btn.active { background: var(--orange-tint); border-color: #d8ab7b; color: #713704; }
.zuordnen-avis iframe { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #f3f3f3; }
.breit #zuordnen-treffer { max-height: 56vh; }
@media (max-width: 1100px) {
  .zuordnen-koerper { flex-direction: column; }
  .zuordnen-avis { flex-basis: auto; width: 100%; height: 45dvh; }
}

/* Reiter Downloads (23.09.2026): zwei Anleitungen nebeneinander, auf dem Handy untereinander */
.download-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; align-items: start; }
.download-layout > .panel { min-width: 0; }
.anleitung ol, .anleitung ul, .anleitung p { overflow-wrap: anywhere; }
.anleitung h3 { font-size: 17px; margin: 26px 0 10px; }
.anleitung ol, .anleitung ul { padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.anleitung p { margin: 0 0 12px; line-height: 1.5; }
.download-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.download-adresse { font-size: 19px; }
.download-bilder { display: flex; flex-wrap: wrap; gap: 20px; }
.download-bilder .install-guide { flex: 1 1 240px; margin: 12px 0; }
/* Logbuch je Programm: eine Zeile je Version mit Datum rechts, darunter die Punkte;
   ältere Versionen hinter einem aufklappbaren Abschnitt, damit die Seite kurz bleibt */
.anleitung ol.logbuch { list-style: none; padding-left: 0; gap: 14px; }
.anleitung ol.logbuch > li { border-left: 3px solid var(--orange); padding-left: 12px; }
.logbuch-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.anleitung ol.logbuch ul { margin: 0; gap: 4px; }
.logbuch-alt { margin-top: 12px; }
.logbuch-alt > summary { cursor: pointer; color: var(--orange-deep); font-weight: 600; padding: 6px 0; }
.logbuch-alt > ol.logbuch { margin-top: 10px; }
/* Team und Baustellen (Etappe 4 der Tagesmeldung-App, 05.10.2026): Meldungskarten mit
   aufklappbarem Korrekturformular, kompakte Eingabefelder in der Tabelle, Tagesspalten */
/* Plan gegen Tag (08.10.2026): links der Einsatzplan mit Zustand, rechts der Zeitstrahl des Tages mit Symbol je Art */
.tagesvergleich { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.tagesvergleich.ohne-plan { grid-template-columns: minmax(0, 1fr); }
.tagesvergleich h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.plan-eintrag { border: 1px solid var(--line); border-left: 4px solid var(--green, #1E7B3E); border-radius: 5px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 5px; justify-items: start; background: #fff; }
.plan-eintrag.nicht_besucht { border-left-color: var(--red, #C4121F); background: var(--red-tint, #FBE7E9); }
.plan-eintrag.ungeplant { border-left-color: var(--orange); background: var(--orange-tint); }
.plan-kopf { display: flex; align-items: center; gap: 8px; }
.plan-kopf .nr { width: 24px; height: 24px; border-radius: 5px; background: var(--surface); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.plan-eintrag .einsatz-notiz { margin: 0; font-size: 14px; }
.zeitstrahl { list-style: none; margin: 0; padding: 0; }
.zeitstrahl li { display: grid; grid-template-columns: 58px 36px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.zeitstrahl li:last-child { border-bottom: 0; }
.zs-zeit { display: grid; font-variant-numeric: tabular-nums; line-height: 1.3; }
.zs-zeit small { color: var(--muted); }
.zs-symbol { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); }
.zs-symbol .ico { width: 20px; height: 20px; }
.zs-fahrt .zs-symbol { background: #E8EDF3; color: #5F7086; }
.zs-arbeit .zs-symbol { background: var(--orange-tint); color: var(--orange-deep); }
.zs-pause .zs-symbol { background: #FFF5CC; color: #705500; }
.zs-intern .zs-symbol { background: #F0EDF7; color: #61538C; }
.zs-heimfahrt .zs-symbol { background: var(--surface); color: var(--muted); }
.zs-text { display: grid; gap: 4px; min-width: 0; }
.zs-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zs-titel .pill { font-size: 12px; padding: 3px 8px; }
.zs-hinweis { display: flex; gap: 6px; align-items: flex-start; margin: 2px 0 0; font-size: 14px; color: #705500; }
.zs-hinweis .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.zs-hinweis.rot { color: var(--red, #C4121F); }
@media (max-width: 760px) { .tagesvergleich { grid-template-columns: minmax(0, 1fr); } }
.queue-card .korrektur { margin-top: 18px; }
.queue-card .ruecksendung { margin-top: 10px; }
.queue-card .ruecksendung textarea { width: 100%; max-width: 640px; min-height: 84px; padding: 8px 10px; font: inherit; border: 1px solid #969187; border-radius: 5px; background: #fff; resize: vertical; }
.notice.ruecklauf p + p { margin-top: 8px; }
.beim-monteur-karte { border-left: 4px solid var(--orange, #E97B15); }
.queue-card .korrektur > summary { list-style: none; display: inline-flex; cursor: pointer; }
.queue-card .korrektur > summary::-webkit-details-marker { display: none; }
.korrektur-tabelle td { vertical-align: top; }
.korrektur-tabelle input, .korrektur-tabelle select { min-height: 40px; padding: 6px 8px; font-size: 14px; border: 1px solid #969187; border-radius: 5px; background: #fff; }
.korrektur-tabelle input[type=time] { width: 7.5em; }
.korrektur-tabelle .projekt-suche { width: 16em; }
.korrektur-tabelle td select + select { margin-top: 6px; display: block; }
.korrektur-tabelle .checklabel { min-height: 40px; }
.day-panel .person-row:last-child { border-bottom: 0; }
.day-panel .person-row > div { min-width: 0; }
.day-panel .person-row .btn { margin-top: 8px; }
.filterbar form label input[type=date] { min-height: 40px; }
.access-field legend .checklabel { min-height: 0; }
/* Einladungscode groß und kopierbar (Befund Handtest 05.10.) */
.code-anzeige { margin-bottom: 18px; }
.code-anzeige .code { font-size: 40px; letter-spacing: .18em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.code-anzeige .row { gap: 20px; margin: 10px 0 8px; }

/* Einsatzplan (3h): Monteur mal Tag, kleine Einsatzkarten je Zelle */
.planungsbrett th, .planungsbrett td { vertical-align: top; min-width: 150px; }
.planungsbrett th.heute, .planungsbrett td.heute { background: var(--orange-tint); }
.planungsbrett th.wochenende, .planungsbrett td.wochenende { background: #f6f6f4; }
.planungsbrett th small { display: block; font-weight: 400; color: var(--muted); }
.einsatz { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: white; }
.einsatz-kopf { display: flex; gap: 8px; align-items: baseline; }
.plan-titel { margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.einsatz-zeit { color: #713704; }
.einsatz small { display: block; color: var(--muted); }
.einsatz-notiz { font-size: 13px; margin: 6px 0 0; white-space: pre-line; }
.einsatz-aktionen { display: flex; gap: 2px; margin-top: 6px; }
.einsatz-aktionen form { display: inline; }
.plan-neu { width: 100%; }
.zs-zone { display: block; color: var(--muted); }
/* Tagesansicht (Punkt 8, Call 09.10.2026): eine Spalte je Monteur mit fester Breite, waagerecht scrollbar; Abwesende grau */
.tagesnav .datum { font-weight: 700; font-size: 18px; min-width: 220px; text-align: center; }
.tagesbrett { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.tagesspalte { flex: 0 0 250px; width: 250px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: white; }
.tagesspalte h3 { margin: 0 0 8px; font-size: 15px; }
.tagesspalte.abwesend { background: #f1f1ef; color: var(--muted); }
.tagesspalte.abwesend .einsatz { opacity: .7; }

/* Projektnummer als Feld in der Farbe des Hero-Status, Klick öffnet den Vorgang in Hero im eigenen Fenster (Festlegung Fabian 08.10.2026) */
.projektnr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.45; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.projektnr.gruen { background: #EDF5EE; border-color: #A9CDB4; color: var(--green); }
.projektnr.gelb { background: var(--yellow-tint); border-color: #E2C766; color: #705500; }
.projektnr.rot { background: var(--red-tint); border-color: #EBAFB5; color: var(--red); }
.projektnr[data-fenster] { cursor: pointer; }
.projektnr[data-fenster]::after { content: "↗"; font-size: 11px; font-weight: 600; opacity: .65; }
.projektnr[data-fenster]:hover { border-color: currentColor; }
.projektnr[data-fenster]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nicht-geplant { font-size: 12px; font-weight: 600; color: var(--orange-deep); }