/*
 * Hausmeister-Liste (protel-frontend-app/hausmeister.js): Wartungsauftraege als Karten, gruppiert nach Wichtigkeit
 * oder Ort. Geladen vom protel Front End (Housekeeping > Hausmeister) und von der Hausmeister-Web-App (/hausmeister/).
 * Eigenstaendig: braucht nur die Tokens aus shared/app-theme.css (mit Ersatzwerten), keine Klassen aus
 * protel-frontend-app/styles.css.
 */

/* ---------- Suche und Filter ---------- */
.pf-hm__filter { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) minmax(160px, 1fr); gap: 10px 12px; align-items: start; padding: 12px 16px 4px; }
/* Beschriftung und Feld in allen drei Spalten gleich hoch (label.field und details.field) */
.pf-hm__filter > .field { display: grid; gap: 6px; margin: 0; }
.pf-hm__chips, .pf-hm__leiste { grid-column: 1 / -1; }
.pf-hm__chips { display: flex; gap: 6px; padding: 4px 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pf-hm__chips::-webkit-scrollbar { display: none; }
.pf-hm__chip { flex: none; min-height: 36px; padding: 4px 14px; border: 1px solid var(--border, #d1d5db); border-radius: 999px; background: var(--surface, #fff); color: var(--text, #0f172a); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.pf-hm__chip.is-active { border-color: var(--primary, #4f46e5); background: var(--primary, #4f46e5); color: #fff; }
.pf-hm__suche, .pf-hm__auswahl { min-width: 0; }
.pf-hm__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.pf-hm__summe { font-size: 13px; }

/* Gruppieren: Segment-Schalter Wichtigkeit | Ort */
.pf-hm__gruppierung { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-3, #f1f5f9); }
.pf-hm__gruppierung-label { padding: 0 8px 0 6px; color: var(--muted, #6b7280); font-size: 12px; }
.pf-hm__segment { min-height: 32px; padding: 4px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2, #334155); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pf-hm__segment.is-active { background: var(--surface, #fff); color: var(--primary, #4f46e5); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14); }

/* Ort: Mehrfachauswahl (details/summary) */
.pf-hm__mehrfach { position: relative; }
.pf-hm__mehrfach-kopf { display: grid; gap: 6px; list-style: none; cursor: pointer; }
.pf-hm__mehrfach-kopf::-webkit-details-marker { display: none; }
.pf-hm__mehrfach-kopf::marker { content: ""; }
.pf-hm__mehrfach-text { display: block; min-height: 38px; padding: 8px 28px 8px 10px; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6'/></svg>") no-repeat right 10px center; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.pf-hm__mehrfach[open] .pf-hm__mehrfach-text { border-color: var(--primary, #4f46e5); }
.pf-hm__mehrfach-liste { position: absolute; left: 0; top: 100%; z-index: 20; min-width: 100%; max-height: 280px; overflow-y: auto; margin-top: 4px; padding: 6px; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); box-sizing: border-box; }
.pf-hm__mehrfach-eintrag { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; font-size: 0.95rem; white-space: nowrap; cursor: pointer; }
.pf-hm__mehrfach-eintrag:hover { background: var(--primary-soft, #eef2ff); }
.pf-hm__mehrfach-eintrag input { margin: 0; }
.pf-hm__mehrfach-eintrag--alle { margin-bottom: 4px; border-bottom: 1px solid var(--border, #e5e7eb); border-radius: 0; }

/* ---------- Gruppen ---------- */
.pf-hm__liste { display: grid; gap: 20px; }
.pf-hm__leer { margin: 8px 0; }
.pf-hm__gruppe { display: grid; gap: 10px; min-width: 0; }
.pf-hm__gruppe-titel { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 2px; color: var(--text-2, #334155); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pf-hm__gruppe-titel::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hm-ton, #94a3b8); }
.pf-hm__gruppe-titel::after { content: ""; flex: 1; height: 1px; background: var(--border, #e5e7eb); }
.pf-hm__gruppe-zahl { order: 2; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--hm-ton-soft, #f1f5f9); color: var(--hm-ton-text, #475569); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pf-hm__gruppe-titel::after { order: 1; }
.pf-hm__gruppe.is-hoch { --hm-ton: #dc2626; --hm-ton-soft: #fee2e2; --hm-ton-text: #b91c1c; }
.pf-hm__gruppe.is-ueberfaellig { --hm-ton: #d97706; --hm-ton-soft: #fef3c7; --hm-ton-text: #92400e; }
.pf-hm__gruppe.is-normal { --hm-ton: #64748b; }
.pf-hm__gruppe.is-ort { --hm-ton: var(--primary, #4f46e5); --hm-ton-soft: var(--primary-soft, #eef2ff); --hm-ton-text: var(--primary, #4338ca); }
.pf-hm__gruppe.is-erledigt { --hm-ton: #059669; --hm-ton-soft: #dcfce7; --hm-ton-text: #166534; }
.pf-hm__gruppe.is-abgelehnt { --hm-ton: #94a3b8; --hm-ton-soft: #e2e8f0; --hm-ton-text: #475569; }
/* nach Ort: der Ort steht gross im Gruppenkopf und nicht noch einmal auf jeder Karte */
.pf-hm__gruppe.is-ort .pf-hm__gruppe-titel { color: var(--text, #0f172a); font-size: 17px; letter-spacing: 0; text-transform: none; }
.pf-hm__gruppe.is-ort .pf-hm__ort { display: none; }

/* ---------- Karten ---------- */
.pf-hm__karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pf-hm__karte { display: grid; gap: 8px; min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--border, #e5e7eb); border-left: 4px solid #cbd5e1; border-radius: 14px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); box-sizing: border-box; }
.pf-hm__karte.is-in_arbeit { border-left-color: var(--primary, #4f46e5); }
.pf-hm__karte.is-ueberfaellig { border-left-color: #d97706; }
.pf-hm__karte.is-hoch { border-left-color: #dc2626; }
.pf-hm__karte.is-erledigt { border-left-color: #059669; background: var(--surface-2, #f8fafc); box-shadow: none; }
.pf-hm__karte.is-erledigt .pf-hm__beschreibung { color: var(--muted, #6b7280); text-decoration: line-through; }
.pf-hm__karte.is-abgelehnt { border-left-color: #94a3b8; background: var(--surface-2, #f8fafc); box-shadow: none; }
.pf-hm__karte.is-abgelehnt .pf-hm__beschreibung { color: var(--muted, #6b7280); text-decoration: line-through; }
.pf-hm__kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-hm__ort { flex: none; max-width: 60%; overflow: hidden; padding: 2px 10px; border-radius: 8px; background: var(--surface-3, #f1f5f9); color: var(--text, #0f172a); font-size: 18px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-hm__marken { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pf-hm__marke { padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.pf-hm__marke.is-hoch { background: #fee2e2; color: #b91c1c; }
.pf-hm__marke.is-ueberfaellig { background: #fef3c7; color: #92400e; }
.pf-hm__marke.is-in_arbeit { background: var(--primary-soft, #eef2ff); color: var(--primary, #4338ca); }
.pf-hm__marke.is-erledigt { background: #dcfce7; color: #166534; }
.pf-hm__marke.is-geloescht { background: #fef2f2; color: #b91c1c; }
.pf-hm__marke.is-abgelehnt { background: #e2e8f0; color: #475569; }
.pf-hm__marke.is-rueckfrage { background: #ede9fe; color: #6d28d9; }
.pf-hm__karte:has(.pf-hm__marke.is-rueckfrage) { box-shadow: 0 0 0 1px #c4b5fd, 0 1px 2px rgba(15, 23, 42, 0.05); }

/* Kommentare, Rueckfragen, Antworten (Karte und Planungs-Dialog) */
.pf-hm__notizen { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-hm__notiz { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid #cbd5e1; border-radius: 8px; background: var(--surface-2, #f8fafc); font-size: 13px; }
.pf-hm__notiz.is-rueckfrage { border-left-color: #7c3aed; background: #f5f3ff; }
.pf-hm__notiz.is-antwort { border-left-color: #059669; background: #f0fdf4; }
.pf-hm__notiz-kopf { color: var(--muted, #6b7280); font-size: 12px; }
.pf-hm__notiz-text { color: var(--text, #0f172a); white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-hm__notiz-mehr { color: var(--muted, #6b7280); font-size: 12px; }
.pf-hm__notiz-art { margin-bottom: 4px; }
.pf-wa__notizen { display: grid; gap: 8px; margin-top: 12px; }
.pf-wa__notizen-kopf { display: flex; align-items: center; gap: 8px; }
.pf-wa__notiz-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pf-wa__rueckfrage { margin-left: 4px; }
.pf-hm__nr { flex: none; margin-left: auto; color: var(--muted, #6b7280); font-size: 12px; white-space: nowrap; }
.pf-hm__beschreibung { margin: 0; color: var(--text, #0f172a); font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pf-hm__zusatz { margin: 0; color: var(--text-2, #475569); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-hm__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; border-top: 1px solid var(--border, #eef0f3); font-size: 13px; line-height: 1.4; }
.pf-hm__meta-eintrag { display: inline-flex; gap: 5px; min-width: 0; }
.pf-hm__meta-label { flex: none; color: var(--muted, #6b7280); }
.pf-hm__meta-wert { min-width: 0; color: var(--text, #0f172a); font-weight: 500; overflow-wrap: anywhere; }
.pf-hm__meta-eintrag.is-warnung .pf-hm__meta-wert { color: #b45309; }
.pf-hm__aktionen { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }
.pf-hm__aktionen .btn { width: 100%; min-height: 44px; justify-content: center; }

/* Bilder */
.pf-hm__bilder { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-hm__bild { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; cursor: zoom-in; }
.pf-hm__bild-platz { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 8px; background: #f3f4f6; color: var(--muted, #6b7280); }
.pf-hm__vorschau img { max-width: 100%; max-height: 240px; margin-top: 8px; border-radius: 8px; }

/* ---------- Handy ---------- */
@media (max-width: 700px) {
    .pf-hm__filter { grid-template-columns: 1fr 1fr; }
    .pf-hm__suche { grid-column: 1 / -1; }
    .pf-hm__karten { grid-template-columns: 1fr; }
}