/* ============================================================= JanAbnahmen — Design-System Light = default, Dark via [data-theme="dark"] auf ============================================================= */ :root { /* Neutrals — kuehl, leicht blaeulich */ --jab-bg: oklch(0.985 0.003 250); --jab-surface: #ffffff; --jab-surface-2: oklch(0.975 0.004 250); --jab-surface-3: oklch(0.955 0.005 250); --jab-border: oklch(0.92 0.006 250); --jab-border-strong: oklch(0.85 0.008 250); --jab-ink: oklch(0.18 0.01 250); --jab-ink-2: oklch(0.38 0.01 250); --jab-ink-3: oklch(0.58 0.008 250); --jab-ink-4: oklch(0.72 0.006 250); /* Status */ --jab-ok: oklch(0.58 0.15 150); --jab-ok-bg: oklch(0.965 0.04 150); --jab-ok-ink: oklch(0.38 0.12 150); --jab-warn: oklch(0.72 0.15 75); --jab-warn-bg: oklch(0.97 0.05 85); --jab-warn-ink: oklch(0.48 0.13 65); --jab-fail: oklch(0.58 0.2 27); --jab-fail-bg: oklch(0.965 0.04 27); --jab-fail-ink: oklch(0.45 0.17 27); /* Akzent — Winterhoff Amber */ --jab-accent: oklch(0.78 0.15 75); --jab-accent-ink: oklch(0.25 0.05 75); --jab-accent-bg: oklch(0.97 0.04 80); --jab-accent-strong: oklch(0.7 0.17 75); /* Typo */ --jab-font-sans: "Geist", "Roboto", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --jab-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Radien */ --jab-r-xs: 4px; --jab-r-sm: 6px; --jab-r-md: 8px; --jab-r-lg: 12px; /* Dichte Komfort (Default) */ --jab-row-h: 44px; --jab-cell-y: 10px; } [data-theme="dark"] { /* Hintergrund tiefer als die Karten — Flaechen heben sich ab */ --jab-bg: oklch(0.145 0.008 250); --jab-surface: oklch(0.215 0.009 250); --jab-surface-2: oklch(0.255 0.01 250); --jab-surface-3: oklch(0.33 0.011 250); /* Rahmen sichtbar: Tabellen, Feldgitter, Karten bekommen Kanten */ --jab-border: oklch(0.4 0.012 250); --jab-border-strong: oklch(0.5 0.014 250); --jab-ink: oklch(0.97 0.003 250); --jab-ink-2: oklch(0.82 0.006 250); /* Sekundaertext lesbar statt Grau-auf-Grau */ --jab-ink-3: oklch(0.72 0.008 250); --jab-ink-4: oklch(0.62 0.008 250); --jab-ok: oklch(0.72 0.17 150); --jab-ok-bg: oklch(0.33 0.06 150); --jab-ok-ink: oklch(0.9 0.14 150); --jab-warn: oklch(0.82 0.15 78); --jab-warn-bg: oklch(0.35 0.06 70); --jab-warn-ink: oklch(0.92 0.13 80); --jab-fail: oklch(0.68 0.2 27); --jab-fail-bg: oklch(0.32 0.08 27); --jab-fail-ink: oklch(0.88 0.15 27); --jab-accent-bg: oklch(0.35 0.05 75); --jab-accent-ink: oklch(0.92 0.1 75); } /* ============ Base ============ */ html, body { font-family: var(--jab-font-sans); background-color: var(--jab-bg); color: var(--jab-ink); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--jab-ok); } .invalid { outline: 1px solid var(--jab-fail); } .validation-message { color: var(--jab-fail-ink); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* ============ Utility ============ */ .jab-mono { font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; } .jab-muted { color: var(--jab-ink-3); } /* ============ Page ============ */ .jab-page { padding: 24px 28px 64px; max-width: 1480px; } /* Breite Masken: Listen mit vielen Spalten (Anlagen eines Kunden) laufen bis an den Rand. 1480px sind fuer Fliesstext die richtige Grenze, fuer eine zehnspaltige Tabelle nicht — dort bleibt rechts sonst Weissraum, waehrend links Standort und Hersteller abgeschnitten werden. */ .jab-page.wide { max-width: none; } .jab-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--jab-border); flex-wrap: wrap; } .jab-page-title { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px; color: var(--jab-ink); } .jab-page-sub { color: var(--jab-ink-3); font-size: 13.5px; } /* ============ Card ============ */ .jab-card { background: var(--jab-surface); border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); } .jab-card-head { padding: 12px 16px; border-bottom: 1px solid var(--jab-border); display: flex; align-items: center; gap: 10px; } .jab-card-title { font-weight: 600; font-size: 14px; color: var(--jab-ink); } .jab-card-body { padding: 16px; } .jab-spacer { flex: 1; } .section-card { border-left: 3px solid var(--jab-accent); } /* ============ KPI Cards ============ */ .jab-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } @media (max-width: 1100px) { .jab-kpis { grid-template-columns: repeat(2, 1fr); } } .jab-kpi { border: 1px solid var(--jab-border); background: var(--jab-surface); border-radius: var(--jab-r-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; position: relative; } .jab-kpi-label { font-size: 11.5px; color: var(--jab-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--jab-font-mono); display: flex; align-items: center; gap: 6px; } .jab-kpi-value { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--jab-ink); } .jab-kpi-value .unit { font-size: 16px; color: var(--jab-ink-3); font-weight: 500; margin-left: 2px; } .jab-kpi-delta { font-size: 12px; color: var(--jab-ink-3); display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .jab-kpi-delta.up { color: var(--jab-ok-ink); } .jab-kpi-delta.down { color: var(--jab-fail-ink); } /* Vier Kacheln nebeneinander — die Uebersicht zeigt Handlungen, nicht drei Kennzahlen. */ .jab-kpis.four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1400px) { .jab-kpis.four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .jab-kpis.four { grid-template-columns: 1fr; } } /* Handlungskachel: dieselbe Kachel, aber ein Knopf — sie fuehrt dorthin, wo man mit der Zahl etwas tun kann. Der Pfeil sitzt in der Ecke und ruecht beim Ueberfahren nach. */ .jab-kpi.action { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: border-color 0.12s ease, background 0.12s ease; } .jab-kpi.action:hover { border-color: var(--jab-border-strong); background: var(--jab-surface-2); } .jab-kpi.action:focus-visible { outline: 2px solid var(--jab-accent); outline-offset: 2px; } .jab-kpi-go { position: absolute; top: 14px; right: 12px; color: var(--jab-ink-4); transition: transform 0.12s ease, color 0.12s ease; } .jab-kpi.action:hover .jab-kpi-go { color: var(--jab-ink-2); transform: translateX(2px); } /* „Nichts liegt an" ist eine gute Nachricht und darf zurueckhaltend aussehen. */ .jab-kpi-value.leer { color: var(--jab-ink-4); } /* Anklickbare Zeile der Tagesliste */ .jab-tour-item.jab-tour-link { cursor: pointer; border-radius: var(--jab-r-sm); } .jab-tour-item.jab-tour-link:hover { background: var(--jab-surface-2); } /* ============ Pills / Chips ============ */ .jab-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; font-family: var(--jab-font-mono); letter-spacing: 0.01em; white-space: nowrap; border: 1px solid transparent; } .jab-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .jab-pill.ok { background: var(--jab-ok-bg); color: var(--jab-ok-ink); } .jab-pill.warn { background: var(--jab-warn-bg); color: var(--jab-warn-ink); } .jab-pill.warn-ng { background: var(--jab-warn-bg); color: var(--jab-warn-ink); border-color: var(--jab-warn); } .jab-pill.fail { background: var(--jab-fail-bg); color: var(--jab-fail-ink); } .jab-pill.accent { background: var(--jab-accent-bg); color: var(--jab-accent-ink); } .jab-pill.neutral { background: var(--jab-surface-2); color: var(--jab-ink-3); border-color: var(--jab-border); } .jab-pill.neutral::before { background: var(--jab-ink-4); } /* Bericht ausgefüllt, aber noch nicht im Kundenportal — bewusst gestrichelt, damit „fertig" nicht suggeriert wird */ .jab-pill.portal { background: var(--jab-warn-bg); color: var(--jab-warn-ink); border-style: dashed; border-color: var(--jab-warn); } /* ============ Legende und freie Etiketten ============ Die Legende steht ueber den Spalten der Bearbeiter-Ansicht: eine Farbe, die man erst erfragen muss, ist keine Marke. Die Etiketten selbst tragen ihre Farbe als Inline-Stil — sie kommt aus dem Katalog und nicht aus dem Designsystem. */ .jab-legende { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 2px 12px; } .jab-legende-trenner { width: 1px; height: 16px; background: var(--jab-border); margin: 0 2px; } .jab-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; } /* Etiketten unter dem Kundennamen. Bis 09/2026 standen sie in der Buendelzeile als 9-px-Punkte mit dem Namen im Tooltip — nach der Ueberlegung „in der Zeile zaehlt, DASS etwas dranhaengt". Fuer eine abgeleitete Marke stimmt das; ein freies Etikett dagegen hat der Bearbeiter selbst hingehaengt, damit er es sieht. Jetzt traegt es seinen Namen. */ .jab-tag-reihe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .jab-tag-mehr { background: var(--jab-surface-2); color: var(--jab-ink-3); border: 1px solid var(--jab-border); cursor: default; } /* Der Punkt bleibt, wo der Name daneben steht — im Etiketten-Menue am Termin. */ .jab-tag-punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } /* Farbwahl am Etikett: Farbfeld plus Pfeil ist der Knopf, das Raster die Palette dahinter. Der blosse Punkt sah aus wie eine Anzeige — man musste wissen, dass er sich anklicken laesst. */ .jab-farbwahl { display: inline-flex; align-items: center; gap: 1px; padding: 2px 1px 2px 3px; border: 1px solid var(--jab-border); border-radius: var(--jab-r-sm); background: var(--jab-surface); cursor: pointer; } .jab-farbwahl:hover { border-color: var(--jab-border-strong); background: var(--jab-surface-2); } .jab-farbwahl .mud-icon-root { color: var(--jab-ink-3); } .jab-farbpunkt { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--jab-border-strong); flex-shrink: 0; cursor: pointer; } /* „Eigene Farbe" — das native Feld liegt im Label, ein Klick irgendwo in die Zeile oeffnet den Farbwaehler des Systems. Kein zweiter Dialog mehr dazwischen. */ .jab-farb-eigene { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--jab-ink-2); cursor: pointer; } .jab-farb-eigene:hover { background: var(--jab-surface-2); } .jab-farb-eigene > span { flex: 1 1 auto; } .jab-farb-nativ { width: 34px; height: 22px; padding: 0; border: 1px solid var(--jab-border-strong); border-radius: var(--jab-r-xs); background: none; cursor: pointer; flex-shrink: 0; } .jab-farb-nativ::-webkit-color-swatch-wrapper { padding: 2px; } .jab-farb-nativ::-webkit-color-swatch { border: none; border-radius: 2px; } .jab-farbraster { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; padding: 12px; } .jab-farbfeld { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--jab-border-strong); cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; } .jab-farbfeld:hover { transform: scale(1.12); } .jab-farbfeld.gewaehlt { box-shadow: 0 0 0 2px var(--jab-surface), 0 0 0 4px var(--jab-accent-strong); } /* ============ Filter-Chips ============ */ .jab-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; } .jab-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--jab-border); border-radius: 999px; font-size: 12px; color: var(--jab-ink-2); background: var(--jab-bg); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; font-family: var(--jab-font-sans); } .jab-chip:hover { background: var(--jab-surface-2); } .jab-chip.active { background: var(--jab-ink); color: var(--jab-bg); border-color: var(--jab-ink); } .jab-chip .count { font-family: var(--jab-font-mono); font-size: 10.5px; opacity: 0.7; } /* ============ Data-Table ============ */ .jab-table-wrap { border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); background: var(--jab-surface); overflow: hidden; } table.jab-data { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--jab-ink); } table.jab-data th { text-align: left; font-weight: 500; font-size: 11px; color: var(--jab-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--jab-font-mono); padding: 8px 14px; border-bottom: 1px solid var(--jab-border); background: var(--jab-surface-2); white-space: nowrap; } table.jab-data td { padding: var(--jab-cell-y) 14px; border-bottom: 1px solid var(--jab-border); vertical-align: middle; height: var(--jab-row-h); } table.jab-data tr:last-child td { border-bottom: none; } table.jab-data tbody tr:hover { background: var(--jab-surface-2); cursor: pointer; } table.jab-data tbody tr.selected { background: var(--jab-accent-bg); } .jab-td-stack { display: flex; flex-direction: column; line-height: 1.3; } .jab-td-stack .sub { font-size: 11.5px; color: var(--jab-ink-3); } /* ============ Report-Head (Pruefbericht-Kopf) ============ */ .jab-report-head { border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); background: var(--jab-surface); overflow: hidden; } .jab-report-head-top { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .jab-report-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--jab-ink); } .jab-pb-nr { font-family: var(--jab-font-mono); font-size: 13px; color: var(--jab-ink-3); background: var(--jab-surface-2); padding: 3px 8px; border-radius: var(--jab-r-xs); border: 1px solid var(--jab-border); font-weight: 500; } .jab-report-meta { display: flex; gap: 18px; font-size: 12.5px; color: var(--jab-ink-3); margin-top: 10px; flex-wrap: wrap; } .jab-report-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .jab-report-meta .k { color: var(--jab-ink-4); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--jab-font-mono); } .jab-report-meta .v { color: var(--jab-ink); font-size: 13px; } /* ============ Field-Grid (Anlagendaten) ============ */ .jab-field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--jab-border); } @media (max-width: 900px) { .jab-field-grid { grid-template-columns: repeat(2, 1fr); } } .jab-field { padding: 12px 14px; border-right: 1px solid var(--jab-border); border-bottom: 1px solid var(--jab-border); display: flex; flex-direction: column; gap: 3px; } .jab-field:nth-child(4n) { border-right: none; } @media (max-width: 900px) { .jab-field:nth-child(4n) { border-right: 1px solid var(--jab-border); } .jab-field:nth-child(2n) { border-right: none; } } .jab-field .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--jab-ink-4); font-family: var(--jab-font-mono); } .jab-field .v { font-size: 13.5px; color: var(--jab-ink); font-weight: 500; } .jab-field .mud-input-control { margin: 0; } .jab-field .mud-input.mud-input-underline::before, .jab-field .mud-input.mud-input-underline::after { display: none; } /* ============ Progress-Bar ============ */ .jab-progress-shell { height: 6px; background: var(--jab-surface-2); border-radius: 4px; overflow: hidden; display: flex; } .jab-progress-seg { height: 100%; } .jab-progress-seg.ok { background: var(--jab-ok); } .jab-progress-seg.fail { background: var(--jab-fail); } .jab-progress-seg.ng { background: var(--jab-warn); } .jab-progress-seg.open { background: var(--jab-surface-3); } /* ============ Photo-Strip ============ */ .jab-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .jab-photo-item { display: flex; flex-direction: column; gap: 6px; } .jab-photo { aspect-ratio: 4/3; width: 100%; border-radius: var(--jab-r-sm); background: var(--jab-surface-2); background-image: linear-gradient(135deg, var(--jab-surface-2) 25%, var(--jab-surface-3) 25%, var(--jab-surface-3) 50%, var(--jab-surface-2) 50%, var(--jab-surface-2) 75%, var(--jab-surface-3) 75%); background-size: 10px 10px; border: 1px solid var(--jab-border); position: relative; overflow: hidden; cursor: pointer; display: block; } .jab-photo-caption-row { display: flex; align-items: center; gap: 2px; } .jab-caption-input { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.3; padding: 5px 7px; border: 1px solid var(--jab-border); border-radius: var(--jab-r-sm); background: var(--jab-surface); color: var(--jab-ink); } .jab-caption-input::placeholder { color: var(--jab-ink-4); } .jab-caption-input:focus { outline: none; border-color: var(--jab-accent-strong); } .jab-photo .label { position: absolute; bottom: 6px; left: 6px; font-family: var(--jab-font-mono); font-size: 10px; color: var(--jab-ink-3); background: var(--jab-surface); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--jab-border); max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ Pruefpunkt-Tabelle ("Tabelle"-Layout) ============ */ .pp-table-wrap { border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); background: var(--jab-surface); overflow: hidden; } .pp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--jab-ink); } .pp-table thead th { text-align: left; font-weight: 500; font-size: 11px; color: var(--jab-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--jab-font-mono); padding: 8px 14px; background: var(--jab-surface-2); border-bottom: 1px solid var(--jab-border); white-space: nowrap; } .pp-table tbody td { padding: var(--jab-cell-y) 14px; border-bottom: 1px solid var(--jab-border); border-right: 1px solid var(--jab-border); vertical-align: middle; height: var(--jab-row-h); color: var(--jab-ink); } .pp-table tbody td:last-child { border-right: none; } .pp-table tbody tr:last-child td { border-bottom: none; } .pp-table tbody tr.pp-group-head td { background: var(--jab-surface-2); color: var(--jab-ink-3); font-family: var(--jab-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; padding: 10px 14px; border-right: none; } .pp-idx { width: 52px; font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; color: var(--jab-ink-4); font-size: 12px; text-align: center; background: var(--jab-surface-2); } .pp-label { font-weight: 500; } .pp-status { width: 248px; padding: 6px 10px !important; text-align: center; } .pp-bem { min-width: 220px; } @media (max-width: 900px) { .pp-table-wrap { overflow-x: auto; } .pp-bem { min-width: 160px; } .pp-status { width: 208px; padding: 6px 6px !important; } .jab-tristate button { min-width: 42px; padding: 5px 6px; } } @media (max-width: 600px) { .pp-idx { width: 38px; } .pp-status { width: 184px; } .jab-tristate button { min-width: 38px; padding: 5px 4px; font-size: 11px; } } .pp-table tbody tr.row-ok .pp-idx { color: var(--jab-ok-ink); } .pp-table tbody tr.row-fail .pp-idx { color: var(--jab-fail-ink); } .pp-table tbody tr.row-fail .pp-status { background: var(--jab-fail-bg); } .pp-table tbody tr.row-ng .pp-idx { color: var(--jab-warn-ink); } .pp-table tbody tr.row-ng .pp-status { background: var(--jab-warn-bg); } .pp-table tbody tr:hover td:not(.pp-idx) { background: var(--jab-surface-2); } /* TriState — 3 Pill-Buttons i.O./n.i.O./n.z. nach Design (styles.css:584–605) */ .jab-tristate { display: inline-flex; background: var(--jab-surface-2); border: 1px solid var(--jab-border); border-radius: var(--jab-r-sm); padding: 2px; gap: 2px; } .jab-tristate button { padding: 5px 8px; font-size: 12px; font-weight: 500; border-radius: 4px; color: var(--jab-ink-3); font-family: var(--jab-font-mono); min-width: 50px; border: none; background: transparent; cursor: pointer; transition: background 0.1s, color 0.1s; } .jab-tristate button:hover:not(.active) { color: var(--jab-ink); } .jab-tristate button.active[data-state="ok"] { background: var(--jab-ok); color: #fff; } .jab-tristate button.active[data-state="fail"] { background: var(--jab-fail); color: #fff; } .jab-tristate button.active[data-state="ng"] { background: #d97706; color: #fff; } .jab-tristate button.active[data-state="na"] { background: var(--jab-ink); color: var(--jab-bg); } .pp-legend { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-family: var(--jab-font-mono); font-weight: 500; } .pp-legend.ok { background: var(--jab-ok-bg); color: var(--jab-ok-ink); } .pp-legend.fail { background: var(--jab-fail-bg); color: var(--jab-fail-ink); } .pp-legend.ng { background: var(--jab-warn-bg); color: var(--jab-warn-ink); } .pp-legend.warn { background: var(--jab-warn-bg); color: var(--jab-warn-ink); } .pp-legend.na { background: var(--jab-ink); color: var(--jab-bg); } /* Erklaerende Kuerzel-Legende unter der Pruefpunkt-Tabelle */ .pp-legend-key { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 11px 16px; border-top: 1px solid var(--jab-border); font-size: 11.5px; color: var(--jab-ink-3); } .pp-legend-key .pp-legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } /* ============ Status-Kacheln im Editor ============ */ .jab-status-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .jab-status-tile { padding: 10px 12px; border-radius: var(--jab-r-sm); display: flex; flex-direction: column; gap: 2px; } .jab-status-tile .k { font-family: var(--jab-font-mono); font-size: 11px; letter-spacing: 0.04em; } .jab-status-tile .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .jab-status-tile.ok { background: var(--jab-ok-bg); color: var(--jab-ok-ink); } .jab-status-tile.fail { background: var(--jab-fail-bg); color: var(--jab-fail-ink); } .jab-status-tile.ng { background: var(--jab-warn-bg); color: var(--jab-warn-ink); } .jab-status-tile.na { background: var(--jab-surface-2); color: var(--jab-ink-2); } .jab-status-tile.open { background: var(--jab-surface-2); color: var(--jab-ink-2); } .jab-status-tile.span-2 { grid-column: span 2; } /* ============ Editor-Layout ============ */ .jab-editor { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; } @media (max-width: 1200px) { .jab-editor { grid-template-columns: 1fr; } } .jab-editor-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .jab-editor-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 68px; } @media (max-width: 1200px) { .jab-editor-side { position: static; } } /* ============ Sidebar-Brand im MudDrawer ============ */ .jab-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--jab-border); } .jab-brand-mark { width: 30px; height: 30px; background: #0b0b0c; border-radius: 6px; display: grid; place-items: center; color: var(--jab-accent); font-weight: 700; font-family: var(--jab-font-mono); font-size: 14px; letter-spacing: -0.02em; } .jab-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .jab-brand-name { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; color: var(--jab-ink); } .jab-brand-sub { font-size: 10.5px; color: var(--jab-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--jab-font-mono); } .jab-drawer-foot { margin-top: auto; border-top: 1px solid var(--jab-border); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .jab-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--jab-accent); color: #1a1d23; display: grid; place-items: center; font-weight: 600; font-size: 12px; font-family: var(--jab-font-mono); } .jab-user-name { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--jab-ink); } .jab-user-role { font-size: 11px; color: var(--jab-ink-3); font-family: var(--jab-font-mono); } /* ============ Tagestour-Liste im Dashboard ============ */ .jab-tour-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--jab-border); align-items: center; } .jab-tour-item:last-child { border-bottom: none; } /* ============ Dashboard-Grid ============ */ .jab-dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; } @media (max-width: 1100px) { .jab-dash-grid { grid-template-columns: 1fr; } } /* ============ Customer-Detail ============ */ .jab-cust-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .jab-cust-grid { grid-template-columns: 1fr; } } .jab-cust-item { padding: 12px 14px; border-bottom: 1px solid var(--jab-border); cursor: pointer; border-left: 2px solid transparent; transition: background 0.12s ease, border-color 0.12s ease; } .jab-cust-item:hover { background: var(--jab-surface-2); } .jab-cust-item.active { background: var(--jab-surface-2); border-left-color: var(--jab-accent); } /* ============ Utility-Forms ============ */ .form-group { margin-bottom: 0rem !important; } /* ============ MudBlazor Font-Override ============ */ .mud-typography, .mud-input, .mud-input input, .mud-input textarea, .mud-input-slot, .mud-input-slot input, .mud-input-label, .mud-input-label-text, .mud-select, .mud-select-input, .mud-list-item-text, .mud-button, .mud-button-label, .mud-icon-button, .mud-chip-content, .mud-chip-label, .mud-nav-link, .mud-nav-link-text, .mud-app-bar, .mud-toolbar, .mud-drawer, .mud-menu-list, .mud-dialog, .mud-dialog-title, .mud-table, .mud-table-cell, .mud-data-grid, .mud-data-grid-cell, .mud-snackbar, .mud-alert-message { font-family: var(--jab-font-sans) !important; } /* Mono-Felder: Zahlen/IDs mit Geist Mono */ .mud-input.jab-mono input, .mud-input .jab-mono, input.jab-mono { font-family: var(--jab-font-mono) !important; font-variant-numeric: tabular-nums; } /* ============ Kompakte Inline-Inputs (Field-Grid) ============ */ .jab-inline-input { border: none; background: transparent; padding: 0; margin: 0; width: 100%; font-size: 13.5px; color: var(--jab-ink); font-weight: 500; outline: none; font-family: var(--jab-font-sans); border-bottom: 1px solid transparent; line-height: 1.3; transition: border-color 0.12s ease; } .jab-inline-input:hover { border-bottom-color: var(--jab-border); } .jab-inline-input:focus { border-bottom-color: var(--jab-accent); } .jab-inline-input::placeholder { color: var(--jab-ink-4); } .jab-inline-input.mono { font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; } /* Dichterer Field-Grid */ .jab-field { padding: 9px 12px; gap: 2px; } .jab-field .k { font-size: 10px; letter-spacing: 0.08em; } /* 3-/6-Spalten-Field-Grid */ .jab-field-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--jab-border); } .jab-field-grid-3 .jab-field { border-right: 1px solid var(--jab-border); border-bottom: 1px solid var(--jab-border); } .jab-field-grid-3 .jab-field:nth-child(3n) { border-right: none; } @media (max-width: 900px) { .jab-field-grid-3 { grid-template-columns: repeat(2, 1fr); } .jab-field-grid-3 .jab-field:nth-child(3n) { border-right: 1px solid var(--jab-border); } .jab-field-grid-3 .jab-field:nth-child(2n) { border-right: none; } } /* Kompakter MudSelect in Field-Cells: Label weg, dünn */ .jab-field .mud-input-control, .jab-field .mud-select { margin: 0 !important; } .jab-field .mud-input-control-helper-container, .jab-field .mud-input-helper-text { display: none !important; } .jab-field .mud-input { margin-top: 0 !important; min-height: 0 !important; } .jab-field .mud-input.mud-input-underline::before, .jab-field .mud-input.mud-input-underline::after { display: none !important; } .jab-field .mud-select-input, .jab-field .mud-input input { padding: 0 !important; font-size: 13.5px !important; font-weight: 500; color: var(--jab-ink) !important; min-height: 0 !important; height: auto !important; background: transparent !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .jab-field .mud-input-adornment { margin: 0 !important; } /* Mehrzeilige Textareas (Lines > 1) muessen wachsen duerfen */ .jab-field .mud-input textarea { padding: 4px 0 !important; font-size: 13.5px !important; color: var(--jab-ink) !important; line-height: 1.45 !important; min-height: auto !important; height: auto !important; white-space: pre-wrap; overflow: auto; } /* Outlined-Textarea (Situation, Hinweise, Schlussbemerkung): mit echtem Rahmen darstellen */ .jab-field .mud-input.mud-input-outlined { background: var(--jab-surface); } .jab-field .mud-input.mud-input-outlined textarea, .jab-side-field .mud-input.mud-input-outlined textarea { padding: 8px 10px !important; } .jab-field .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--jab-border); border-radius: var(--jab-r-xs); } .jab-field .mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--jab-border-strong); } /* Editor-Layout dichter */ .jab-editor { gap: 16px; } .jab-editor-main { gap: 12px; } .jab-editor-side { gap: 12px; } .jab-card-head { padding: 10px 14px; } .jab-card-body { padding: 12px 14px; } .jab-page { padding: 16px 24px 48px; } .jab-page-head { margin-bottom: 16px; padding-bottom: 14px; } @media (max-width: 900px) { .jab-page { padding: 12px 14px 32px; } .jab-report-head-top { padding: 14px 14px; gap: 12px; } .jab-report-title { font-size: 19px; gap: 8px; } .jab-title-edit .mud-input input, .jab-title-edit .mud-input-slot input { font-size: 19px !important; } } @media (max-width: 600px) { .jab-page { padding: 10px 10px 24px; } .jab-report-head-top { padding: 12px 12px; } .jab-report-title { font-size: 17px; } .jab-title-edit .mud-input input, .jab-title-edit .mud-input-slot input { font-size: 17px !important; } } /* Kompakter Foto-Upload */ .jab-fotoupload-activator .mud-paper { padding: 6px 8px !important; } /* Address-Line im Report-Head */ .jab-address-row { display: flex; gap: 8px; align-items: center; padding: 8px 22px 12px; font-size: 13px; color: var(--jab-ink-2); flex-wrap: wrap; } .jab-address-row .jab-inline-input { font-size: 13px; font-weight: 400; } .jab-address-row .sep { color: var(--jab-ink-4); } /* MudBlazor-Anpassungen */ .mud-appbar .jab-brand-mark { color: var(--jab-accent) !important; } /* Status-Kacheln dichter */ .jab-status-tile { padding: 8px 10px; } .jab-status-tile .v { font-size: 20px; } /* ============ Dichte-Toggle ============ */ [data-density="compact"] { --jab-row-h: 34px; --jab-cell-y: 6px; } [data-density="compact"] .jab-card-head { padding: 8px 12px; } [data-density="compact"] .jab-card-body { padding: 10px 12px; } [data-density="compact"] .jab-kpi { padding: 12px 14px; } [data-density="compact"] .jab-kpi-value { font-size: 26px; } [data-density="compact"] .jab-page-head { margin-bottom: 12px; padding-bottom: 10px; } [data-density="compact"] .jab-field { padding: 6px 10px; } /* ============ Sidebar-Gruppen + Keyboard-Shortcuts ============ */ .jab-nav-group { font-size: 10.5px; color: var(--jab-ink-4); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 14px 6px; font-family: var(--jab-font-mono); font-weight: 500; } .jab-kbd { margin-left: auto; font-family: var(--jab-font-mono); font-size: 10.5px; color: var(--jab-ink-4); padding: 2px 5px; border: 1px solid var(--jab-border); border-radius: 3px; background: var(--jab-bg); line-height: 1; font-weight: 500; } /* ============ Topbar (Breadcrumb + Search + Actions) ============ */ .jab-topbar { height: 52px; border-bottom: 1px solid var(--jab-border); background: var(--jab-surface); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 10; font-family: var(--jab-font-sans); } .jab-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jab-ink-3); min-width: 0; flex-shrink: 1; overflow: hidden; } .jab-crumb .sep { color: var(--jab-ink-4); } .jab-crumb .here { color: var(--jab-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jab-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .jab-search { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--jab-border); border-radius: var(--jab-r-sm); background: var(--jab-bg); width: 280px; font-size: 13px; color: var(--jab-ink-3); transition: border-color 0.12s ease; } .jab-search:focus-within { border-color: var(--jab-border-strong); } .jab-search input { border: none; outline: none; background: none; flex: 1; min-width: 0; font-size: 13px; color: var(--jab-ink); font-family: var(--jab-font-sans); } .jab-search input::placeholder { color: var(--jab-ink-4); } /* ============ Native btn-Varianten (neben MudButton) ============ */ .jab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--jab-r-sm); font-size: 13px; font-weight: 500; border: 1px solid var(--jab-border); background: var(--jab-surface); color: var(--jab-ink); font-family: var(--jab-font-sans); cursor: pointer; white-space: nowrap; line-height: 1.2; transition: background 0.12s ease, border-color 0.12s ease; } .jab-btn:hover { background: var(--jab-surface-2); } .jab-btn.sm { padding: 4px 8px; font-size: 12px; } .jab-btn.primary { background: var(--jab-ink); color: var(--jab-bg); border-color: var(--jab-ink); } .jab-btn.primary:hover { background: var(--jab-ink-2); border-color: var(--jab-ink-2); } /* Dark: Primaeraktion als Winterhoff-Amber statt Weiss-auf-Weiss */ [data-theme="dark"] .jab-btn.primary { background: var(--jab-accent); color: #0b0b0c; border-color: var(--jab-accent); } [data-theme="dark"] .jab-btn.primary:hover { background: var(--jab-accent-strong); border-color: var(--jab-accent-strong); } .jab-btn.accent { background: var(--jab-accent); color: #0b0b0c; border-color: var(--jab-accent); } .jab-btn.accent:hover { filter: brightness(0.96); } .jab-btn.ghost { background: transparent; border-color: transparent; color: var(--jab-ink-2); } .jab-btn.ghost:hover { background: var(--jab-surface-2); color: var(--jab-ink); } /* Zerstoerende Aktion (Entwurf verwerfen): rot, aber ohne Flaeche — sie steht neben Alltagsknoepfen und darf nicht wie die Primaeraktion aussehen. */ .jab-btn.danger { background: transparent; border-color: transparent; color: var(--jab-fail-ink); } .jab-btn.danger:hover { background: var(--jab-fail-bg); color: var(--jab-fail-ink); } .jab-btn.icon { padding: 6px; } /* ============ MudBlazor weitere Overrides ============ */ .mud-drawer { background: var(--jab-surface) !important; border-right: 1px solid var(--jab-border) !important; } .mud-nav-link { font-size: 13.5px !important; padding: 8px 14px !important; border-radius: var(--jab-r-sm); margin: 1px 6px; color: var(--jab-ink-2) !important; font-weight: 500 !important; } .mud-nav-link:hover { background: var(--jab-surface-2) !important; color: var(--jab-ink) !important; } .mud-nav-link.active, .mud-nav-link.mud-nav-link-active { background: var(--jab-surface-3) !important; color: var(--jab-ink) !important; border-left: none !important; } .mud-nav-link .mud-nav-link-icon, .mud-nav-link .mud-icon-default { color: var(--jab-ink-3) !important; font-size: 18px !important; } .mud-nav-link.active .mud-nav-link-icon, .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--jab-ink) !important; } /* Dark: aktiver Nav-Eintrag traegt den Amber statt einer weiteren Grau-Stufe */ [data-theme="dark"] .mud-nav-link.active, [data-theme="dark"] .mud-nav-link.mud-nav-link-active { background: var(--jab-accent-bg) !important; color: var(--jab-accent-ink) !important; box-shadow: inset 2px 0 0 var(--jab-accent); } [data-theme="dark"] .mud-nav-link.active .mud-nav-link-icon, [data-theme="dark"] .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--jab-accent) !important; } .mud-nav-menu { padding: 4px 0; } /* AppBar: falls noch verwendet, sehr schlicht */ .mud-appbar { box-shadow: none !important; border-bottom: 1px solid var(--jab-border); } /* Progressbar pro Tabellenzeile */ .jab-row-progress { display: flex; flex-direction: column; gap: 4px; min-width: 140px; } .jab-row-progress .sub { font-size: 10.5px; color: var(--jab-ink-3); font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; } /* KPI Sparkline */ .jab-kpi-chart { position: absolute; right: 10px; bottom: 10px; color: var(--jab-ink-4); opacity: 0.5; pointer-events: none; } /* Auslastungs-Balken (Dashboard) */ /* Tour-Item im Dashboard */ .jab-tour-time { font-family: var(--jab-font-mono); font-size: 14px; font-weight: 600; line-height: 1.1; color: var(--jab-ink); } .jab-tour-date { font-family: var(--jab-font-mono); font-size: 11px; color: var(--jab-ink-3); line-height: 1.1; margin-top: 2px; } /* Editor-Main: Report-Head fix-breit zum Proto (kein Sprung bei langen Namen) */ .jab-report-head-top .jab-edit-btn { align-self: flex-start; margin-left: 12px; } /* Map-Placeholder fuer Kunden-Detail */ .jab-map-placeholder { aspect-ratio: 16/10; background: var(--jab-surface-2); border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); position: relative; overflow: hidden; background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 24px 24px; } [data-theme="dark"] .jab-map-placeholder { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); } .jab-map-pin { position: absolute; left: 45%; top: 40%; width: 14px; height: 14px; border-radius: 50%; background: var(--jab-accent); border: 3px solid var(--jab-surface); box-shadow: 0 0 0 1px var(--jab-accent); } /* Sidebar-Foot: Toggles */ .jab-foot-toggles { display: flex; gap: 4px; padding: 0 8px 10px; border-top: 1px solid var(--jab-border); padding-top: 8px; margin-top: 4px; } .jab-foot-toggles .jab-btn { padding: 4px 8px; font-size: 11.5px; } /* Address-Zeile kompakter */ .jab-address-row { padding: 6px 22px 10px; font-size: 13px; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--jab-border-strong); border-radius: 5px; border: 2px solid var(--jab-bg); } ::-webkit-scrollbar-track { background: transparent; } /* ============ Inline-Editor (Bearbeiten-Popup entfallen) ============ */ /* Titel-Bereich: Anlagenbetreiber inline editierbar */ .jab-title-edit { flex: 1 1 240px; min-width: 0; display: inline-flex; align-items: baseline; overflow: hidden; } .jab-title-edit .mud-input-control, .jab-title-edit .mud-input, .jab-title-edit .mud-input-slot { width: 100%; min-width: 0; } .jab-title-edit .mud-input-control { margin: 0; } .jab-title-edit .mud-input.mud-input-underline::before, .jab-title-edit .mud-input.mud-input-underline::after { display: none; } .jab-title-edit .mud-input input, .jab-title-edit .mud-input-slot input { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: var(--jab-ink) !important; padding: 0 !important; line-height: 1.25 !important; } .jab-title-edit .mud-input input::placeholder { color: var(--jab-ink-4); font-weight: 500; } /* Kleiner Icon-Button (z. B. Kunden-Suche neben Titel) */ .jab-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--jab-border); border-radius: var(--jab-r-xs); background: var(--jab-surface); color: var(--jab-ink-3); cursor: pointer; transition: all 0.12s ease; flex-shrink: 0; } .jab-icon-btn:hover { background: var(--jab-surface-2); color: var(--jab-ink); border-color: var(--jab-border-strong); } /* Adress-Zeile unter dem Titel (Straße, PLZ, Ort) */ .jab-address-line { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 13.5px; flex-wrap: wrap; } .jab-address-line .mud-input-control { margin: 0; flex: 1 1 140px; min-width: 0; } .jab-address-line .mud-input-control[style*="max-width"] { flex: 0 0 auto; } .jab-address-line .mud-input.mud-input-underline::before { border-bottom-style: dotted; border-color: var(--jab-border); } .jab-address-line .mud-input.mud-input-underline::after { border-bottom-color: var(--jab-accent); } .jab-address-line .mud-input input { font-size: 13.5px !important; color: var(--jab-ink-2) !important; padding: 2px 0 !important; } /* Erweiterte Felder-Grid-Varianten */ .jab-field-grid-meta { grid-template-columns: repeat(4, 1fr); } .jab-field-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--jab-border); } .jab-field-grid-5 .jab-field, .jab-field-grid-meta .jab-field { padding: 12px 14px; border-right: 1px solid var(--jab-border); border-bottom: 1px solid var(--jab-border); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .jab-field-grid-5 .jab-field:nth-child(5n) { border-right: none; } .jab-field-grid-meta .jab-field:nth-child(4n) { border-right: none; } /* Felder, die zwei Spalten überspannen */ .jab-field.jab-field-wide { grid-column: span 2; } /* ---- Responsive Breakpoints fuer Felder-Grids ---- */ @media (max-width: 1100px) { .jab-field-grid-meta { grid-template-columns: repeat(3, 1fr); } .jab-field-grid-meta .jab-field { border-right: 1px solid var(--jab-border); } .jab-field-grid-meta .jab-field:nth-child(3n) { border-right: none; } .jab-field-grid-5 { grid-template-columns: repeat(3, 1fr); } .jab-field-grid-5 .jab-field { border-right: 1px solid var(--jab-border); } .jab-field-grid-5 .jab-field:nth-child(3n) { border-right: none; } } @media (max-width: 900px) { .jab-field-grid-meta { grid-template-columns: repeat(2, 1fr); } .jab-field-grid-meta .jab-field { border-right: 1px solid var(--jab-border); } .jab-field-grid-meta .jab-field:nth-child(2n) { border-right: none; } .jab-field-grid-5 { grid-template-columns: repeat(2, 1fr); } .jab-field-grid-5 .jab-field { border-right: 1px solid var(--jab-border); } .jab-field-grid-5 .jab-field:nth-child(2n) { border-right: none; } } @media (max-width: 600px) { .jab-field-grid-meta, .jab-field-grid-5 { grid-template-columns: 1fr; } .jab-field-grid-meta .jab-field, .jab-field-grid-5 .jab-field { border-right: none; } .jab-field.jab-field-wide { grid-column: span 1; } } /* Anlage-Karten (Kran/Hubwerk) ohne doppelte Border oben */ .jab-anlage-card .jab-field-grid-5 { border-top: 1px solid var(--jab-border); } /* Kran-Popover: Liste der wählbaren Krane */ .jab-kran-popover { min-width: 320px; max-width: 420px; background: var(--jab-surface); border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); box-shadow: var(--jab-shadow-md, 0 8px 24px rgba(0,0,0,0.08)); padding: 4px 0; } .jab-kran-pop-state { padding: 14px 16px; font-size: 13px; color: var(--jab-ink-3); display: flex; align-items: center; gap: 10px; } .jab-kran-mi { padding: 0 !important; } .jab-kran-mi.selected { background: var(--jab-surface-2); } .jab-kran-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; width: 100%; } .jab-kran-item .dot { color: var(--jab-ink-3); margin-top: 2px; } .jab-kran-mi.selected .jab-kran-item .dot { color: var(--jab-accent); } .jab-kran-item .info { flex: 1; min-width: 0; } .jab-kran-item .info .name { font-size: 13.5px; font-weight: 500; color: var(--jab-ink); line-height: 1.3; } .jab-kran-item .info .sub { font-size: 11.5px; color: var(--jab-ink-3); font-family: var(--jab-font-mono); margin-top: 1px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sidebar: editierbare Bewertung-Felder */ .jab-side-field { display: flex; flex-direction: column; gap: 4px; } .jab-side-label { font-family: var(--jab-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jab-ink-4); } .jab-side-field .mud-input-control { margin: 0; } .jab-side-field .mud-input.mud-input-underline::before { border-bottom-style: dotted; border-color: var(--jab-border); } .jab-side-field .mud-input input, .jab-side-field .mud-input textarea, .jab-side-field .mud-select .mud-select-input input { font-size: 13px !important; color: var(--jab-ink) !important; padding: 4px 0 !important; } /* MudDatePicker / MudSelect innerhalb jab-field aufräumen */ .jab-field .mud-picker { width: 100%; } .jab-field .mud-picker .mud-input-control { margin: 0; } .jab-field .mud-picker .mud-input.mud-input-underline::before, .jab-field .mud-picker .mud-input.mud-input-underline::after { display: none; } .jab-field .mud-picker input { font-size: 13.5px !important; color: var(--jab-ink) !important; padding: 0 !important; } /* ============================================================ Prüfmaske (hierarchische Prüfung — PruefungMaske.razor) Design: Pruefmaske.dc.html (Claude Design, 07/2026) ============================================================ */ :root { --jab-pruef-r-pad: 12px 15px; } [data-density="compact"] { --jab-pruef-r-pad: 8px 12px; } .jab-pruef-page .jab-card { border-radius: var(--jab-r-lg); overflow: hidden; } /* --- Kopfkarte --- */ .jab-pruef-head { display: flex; gap: 28px; padding: 20px 22px; align-items: flex-start; flex-wrap: wrap; } [data-density="compact"] .jab-pruef-head { padding: 14px 16px; } .jab-pruef-head-main { flex: 1; min-width: 300px; } .jab-pruef-head-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .jab-pruef-head-title h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .jab-pbnr-chip { font-family: var(--jab-font-mono); font-size: 12.5px; color: var(--jab-ink-3); background: var(--jab-surface-2); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--jab-border); } .jab-pruef-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 18px; background: var(--jab-border); border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); overflow: hidden; } .jab-pruef-fields .jab-field { background: var(--jab-surface); padding: 10px 14px; border: none; } .jab-pruef-fields .jab-field .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .jab-pruef-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .jab-pruef-fields { grid-template-columns: 1fr; } } .jab-pruef-head-side { display: flex; gap: 18px; align-items: center; flex: 0 0 auto; } .jab-ring { position: relative; width: 80px; height: 80px; flex: 0 0 auto; } .jab-ring .pct { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; font-size: 17px; font-weight: 600; font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; } .jab-count-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .jab-count-tile { background: var(--jab-surface-2); border: 1px solid var(--jab-border); border-radius: var(--jab-r-md); padding: 7px 11px; min-width: 78px; display: flex; flex-direction: column; gap: 2px; } .jab-count-tile .v { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; font-family: var(--jab-font-mono); } .jab-count-tile .k { font-size: 10.5px; color: var(--jab-ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--jab-font-mono); } .jab-count-tile.ok .v { color: var(--jab-ok-ink); } .jab-count-tile.fail .v { color: var(--jab-fail-ink); } .jab-count-tile.nz .v { color: var(--jab-ink-3); } .jab-count-tile.open .v { color: var(--jab-warn-ink); } .jab-pruef-progress { padding: 2px 22px 18px; } [data-density="compact"] .jab-pruef-progress { padding: 2px 16px 14px; } .jab-pruef-progress .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; } .jab-pruef-progress .head .l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--jab-ink-4); font-family: var(--jab-font-mono); } .jab-pruef-progress .head .r { font-size: 12px; color: var(--jab-ink-3); font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; } .jab-pruef-bar { height: 9px; border-radius: 5px; overflow: hidden; display: flex; background: var(--jab-surface-2); border: 1px solid var(--jab-border); } .jab-pruef-bar .seg { height: 100%; flex-shrink: 1; flex-basis: 0; } .jab-pruef-bar .seg.ok { background: var(--jab-ok); } .jab-pruef-bar .seg.fail { background: var(--jab-fail); } .jab-pruef-bar .seg.nz { background: var(--jab-ink-4); } .jab-pruef-bar .seg.open { background: transparent; } /* --- Grid Navigation | Zeilen --- */ .jab-pruef-grid { display: grid; grid-template-columns: 292px 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .jab-pruef-grid { grid-template-columns: 1fr; } .jab-pruef-grid > .jab-card:first-child { position: static !important; max-height: none !important; overflow: visible !important; } .jab-pruef-grid > .jab-card:first-child .jab-pruef-navlist { overflow: visible !important; } } /* Oberpunkt-Navigation */ .jab-pruef-navlist { padding: 6px; display: flex; flex-direction: column; gap: 2px; } .jab-pruef-nav { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid transparent; background: transparent; border-radius: var(--jab-r-md); cursor: pointer; color: var(--jab-ink-2); font-size: 13px; font-family: var(--jab-font-sans); transition: background 0.12s ease, color 0.12s ease; } .jab-pruef-nav:hover { background: var(--jab-surface-2); } .jab-pruef-nav:focus { outline: none; } .jab-pruef-nav:focus-visible { outline: 2px solid var(--jab-border-strong); outline-offset: 1px; } .jab-pruef-nav.active { background: var(--jab-accent-bg); color: var(--jab-ink); font-weight: 500; border-color: var(--jab-accent); } .jab-pruef-nav .nr { font-family: var(--jab-font-mono); font-size: 11.5px; color: var(--jab-ink-3); min-width: 20px; } .jab-pruef-nav .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jab-pruef-nav .cnt { font-family: var(--jab-font-mono); font-size: 11px; color: var(--jab-ink-4); font-variant-numeric: tabular-nums; } .jab-pruef-dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; background: var(--jab-ink-4); } .jab-pruef-dot.ok { background: var(--jab-ok); } .jab-pruef-dot.fail { background: var(--jab-fail); } .jab-pruef-dot.open { background: var(--jab-warn); } .jab-pruef-dot.nz { background: var(--jab-ink-4); } /* Unterpunkt-Zeilen */ .jab-pruef-rows { padding: 8px; display: flex; flex-direction: column; gap: 8px; } .jab-pruef-row { border: 1px solid var(--jab-border); border-radius: 10px; background: var(--jab-surface-2); padding: var(--jab-pruef-r-pad); border-left: 3px solid var(--jab-border); } .jab-pruef-row.row-ok { border-left-color: var(--jab-ok); } .jab-pruef-row.row-fail { border-left-color: var(--jab-fail); } .jab-pruef-row.row-nz { border-left-color: var(--jab-ink-4); } .jab-pruef-row.row-open { border-left-color: var(--jab-warn); } .jab-pruef-row-head { display: flex; align-items: center; gap: 14px; } .jab-pruef-row-head .nr { font-family: var(--jab-font-mono); font-size: 11.5px; color: var(--jab-ink-4); min-width: 34px; font-variant-numeric: tabular-nums; } .jab-pruef-row-head .txt { flex: 1; font-size: 14px; line-height: 1.35; text-wrap: pretty; } .jab-pruef-row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } @media (max-width: 700px) { .jab-pruef-row-fields { grid-template-columns: 1fr; } } /* Boxed Inputs (Bemerkung / Interne Notiz) */ .jab-box-input { width: 100%; background: var(--jab-surface); border: 1px solid var(--jab-border); border-radius: 7px; padding: 8px 10px; font-size: 13px; color: var(--jab-ink); outline: none; font-family: var(--jab-font-sans); transition: border-color 0.12s ease; } .jab-box-input:focus { border-color: var(--jab-accent); } .jab-box-input::placeholder { color: var(--jab-ink-4); } /* ---- Interne Notiz: ausgefuellt muss man sehen ---- Bis 09/2026 trug der eingetragene Text dieselbe gedaempfte Kursive wie der Erklaerungstext im Hintergrund — gefuellt und leer sahen gleich aus. Jetzt ist nur der Platzhalter gedaempft, der Text steht im Vordergrund, und das Feld traegt eine Amber-Fahne. Den Zustand sagt `:placeholder-shown`: er greift genau dann nicht mehr, wenn etwas drinsteht — kein zweiter Zustand im Code, der mit dem Wert auseinanderlaufen koennte. */ .jab-box-input.intern, .jab-inline-input.intern { color: var(--jab-ink); font-style: normal; } .jab-box-input.intern::placeholder, .jab-inline-input.intern::placeholder { color: var(--jab-ink-4); font-style: italic; } .jab-box-input.intern:not(:placeholder-shown) { background: var(--jab-accent-bg); border-color: var(--jab-accent); border-left: 3px solid var(--jab-accent-strong); padding-left: 8px; font-weight: 500; } .jab-inline-input.intern:not(:placeholder-shown) { font-weight: 500; border-bottom-color: var(--jab-accent-strong); } /* Dasselbe fuer das bericht-weite Feld im Maskenkopf (MudTextField, outlined). Dort steht der Zustand als Klasse am Feld — MudBlazor setzt den Platzhalter auf die innere Textarea, an die das Feldgitter nicht herankommt. */ .jab-intern-feld .mud-input.mud-input-outlined textarea { color: var(--jab-ink) !important; } .jab-intern-feld .mud-input.mud-input-outlined textarea::placeholder { font-style: italic; } .jab-intern-feld.hat-notiz .mud-input.mud-input-outlined { background: var(--jab-accent-bg); } .jab-intern-feld.hat-notiz .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--jab-accent-strong); border-width: 2px; } .jab-intern-feld.hat-notiz .mud-input.mud-input-outlined textarea { font-weight: 500; } /* „Hier haengt eine Notiz dran" — Marke fuer Listen, Navigation und Feldbeschriftung. In der Zeile zaehlt, *dass* etwas drinsteht; der Wortlaut steht im aufgeklappten Buendel bzw. im Feld selbst. */ .jab-notiz-marke { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; background: var(--jab-accent-bg); color: var(--jab-accent-ink); border: 1px solid var(--jab-accent); font-family: var(--jab-font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; vertical-align: middle; flex: 0 0 auto; } .jab-notiz-marke .mud-icon-root { font-size: 13px !important; } /* Die Notiz des letzten Berichts an derselben Anlage ist Inhalt, kein Hilfetext — sie bekommt deshalb eine Kante statt nur graue Schrift. */ .jab-notiz-vorher { margin-top: 6px; padding: 5px 8px; border-left: 3px solid var(--jab-border-strong); border-radius: var(--jab-r-xs); background: var(--jab-surface-2); color: var(--jab-ink-2); font-size: 12px; line-height: 1.45; } .jab-notiz-vorher .mud-icon-root { font-size: 14px !important; vertical-align: -2px; } .jab-notiz-vorher .q { color: var(--jab-ink); font-weight: 500; } /* Hybrid-Eingabe */ .jab-pruef-input { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; } .jab-pruef-input button { padding: 7px 13px; font-size: 12.5px; font-weight: 600; border-radius: 7px; border: 1px solid var(--jab-border); background: var(--jab-surface-3); color: var(--jab-ink-3); font-family: var(--jab-font-mono); cursor: pointer; white-space: nowrap; letter-spacing: 0.01em; transition: all 0.12s ease; } [data-density="compact"] .jab-pruef-input button { padding: 5px 10px; font-size: 12px; } .jab-pruef-input button:hover { color: var(--jab-ink); } .jab-pruef-input .io.active { background: var(--jab-ok); border-color: var(--jab-ok); color: #fff; } .jab-pruef-input .nio.active { background: var(--jab-fail); border-color: var(--jab-fail); color: #fff; } .jab-pruef-input .nio.menu-open { border-color: var(--jab-fail); color: var(--jab-fail-ink); } .jab-pruef-input .nz.active { background: var(--jab-ink); border-color: var(--jab-ink); color: var(--jab-bg); } .jab-pruef-input .nv.active { background: var(--jab-surface); border-color: var(--jab-border-strong); color: var(--jab-ink); } /* Gesamtergebnis: bestanden / nicht bestanden */ .jab-ergebnis-wahl { display: flex; gap: 10px; flex-wrap: wrap; } .jab-ergebnis-wahl button { display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; font-size: 14px; font-weight: 650; border-radius: 9px; border: 1px solid var(--jab-border); background: var(--jab-surface-3); color: var(--jab-ink-3); cursor: pointer; transition: all 0.12s ease; } [data-density="compact"] .jab-ergebnis-wahl button { padding: 8px 15px; font-size: 13px; } .jab-ergebnis-wahl button:hover { color: var(--jab-ink); border-color: var(--jab-border-strong); } .jab-ergebnis-wahl .ja.active { background: var(--jab-ok); border-color: var(--jab-ok); color: #fff; } .jab-ergebnis-wahl .nein.active { background: var(--jab-fail); border-color: var(--jab-fail); color: #fff; } /* Inline-Mangel-Code-Picker */ .jab-pruef-codes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--jab-border); } .jab-pruef-codes .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--jab-ink-4); font-family: var(--jab-font-mono); margin-right: 2px; } .jab-pruef-code { padding: 5px 10px; font-size: 11.5px; border-radius: 6px; border: 1px solid var(--jab-border); background: var(--jab-surface); color: var(--jab-ink-2); font-family: var(--jab-font-mono); cursor: pointer; white-space: nowrap; transition: all 0.12s ease; } .jab-pruef-code:hover { color: var(--jab-ink); border-color: var(--jab-border-strong); } .jab-pruef-code.active { background: var(--jab-fail-bg); border-color: var(--jab-fail); color: var(--jab-fail-ink); } /* Foto-hinzufügen-Kachel */ .jab-photo-strip .mud-file-upload { width: 100%; margin: 0; } .mud-button-root.jab-photo-add { width: 100%; aspect-ratio: 4/3; border-radius: var(--jab-r-md); border: 1px dashed var(--jab-border-strong); background: transparent; color: var(--jab-ink-3); cursor: pointer; font-size: 12.5px; font-family: var(--jab-font-sans); text-transform: none; min-width: 0; padding: 0; transition: border-color 0.12s ease, color 0.12s ease; } .mud-button-root.jab-photo-add:hover { border-color: var(--jab-accent); color: var(--jab-ink); background: transparent; } .jab-photo-add .mud-button-label { display: flex; flex-direction: column; align-items: center; gap: 6px; } .jab-photo-add .plus { font-size: 22px; line-height: 1; } /* ============================================================= Anlagen-Auswahl (AnlagenAuswahlDialog) Ein Kunde kann mehrere hundert Anlagen haben — der Dialog ist deshalb ein Arbeitsmittel mit Suche, Filtern und sortierbaren Spalten, keine Liste. Feste Zeilenhoehe (--jab-pick-h), damit die Virtualisierung rechnen kann. ============================================================= */ .jab-picker { --jab-pick-h: 56px; display: flex; flex-direction: column; height: min(66vh, 620px); min-height: 320px; } /* Feste Zeilenhoehe, auch in der dichten Ansicht: die Virtualisierung und das Scrollen zur markierten Zeile rechnen damit. */ /* ---- Kopf: Suche + Filter ---- */ .jab-picker-tools { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--jab-border); background: var(--jab-surface); flex: 0 0 auto; } .jab-picker-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--jab-border); border-radius: var(--jab-r-sm); background: var(--jab-bg); color: var(--jab-ink-3); transition: border-color 0.12s ease; } .jab-picker-search:focus-within { border-color: var(--jab-accent); } .jab-picker-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--jab-font-sans); font-size: 14px; color: var(--jab-ink); } .jab-picker-search input::placeholder { color: var(--jab-ink-4); } .jab-picker-search .clear { border: none; background: none; color: var(--jab-ink-4); cursor: pointer; padding: 0 2px; line-height: 1; display: flex; } .jab-picker-search .clear:hover { color: var(--jab-ink); } .jab-picker-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .jab-picker-filters .sep { width: 1px; height: 18px; background: var(--jab-border); margin: 0 2px; } /* Native Selects im Systemlook der Maske (Standort, Anlagenart) */ .jab-select { appearance: none; -webkit-appearance: none; padding: 4px 24px 4px 9px; border: 1px solid var(--jab-border); border-radius: 999px; background-color: var(--jab-surface); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 11px center, right 7px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; color: var(--jab-ink-2); font-family: var(--jab-font-sans); font-size: 12px; font-weight: 500; line-height: 1.5; cursor: pointer; max-width: 190px; text-overflow: ellipsis; } .jab-select:hover { background-color: var(--jab-surface-2); } .jab-select:focus-visible { outline: 2px solid var(--jab-accent); outline-offset: 1px; } .jab-select.gesetzt { background-color: var(--jab-ink); border-color: var(--jab-ink); color: var(--jab-bg); } [data-theme="dark"] .jab-select.gesetzt { background-color: var(--jab-accent); border-color: var(--jab-accent); color: #0b0b0c; } .jab-select option { color: var(--jab-ink); background: var(--jab-surface); } /* ---- Spaltenkopf (zugleich Sortierschalter) ---- */ .jab-picker-head, .jab-picker-row { display: grid; grid-template-columns: 104px minmax(0, 2.4fr) minmax(0, 1.3fr) 136px 34px; align-items: center; gap: 12px; padding: 0 16px; } .jab-picker-head { flex: 0 0 auto; height: 32px; border-bottom: 1px solid var(--jab-border); background: var(--jab-surface-2); } .jab-picker-head button, .jab-picker-head span.h { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 0; font-family: var(--jab-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--jab-ink-3); cursor: pointer; white-space: nowrap; } .jab-picker-head span.h { cursor: default; } .jab-picker-head button:hover { color: var(--jab-ink); } .jab-picker-head button.aktiv { color: var(--jab-ink); } .jab-picker-head .pfeil { font-size: 9px; opacity: 0.85; } /* ---- Liste ---- */ .jab-picker-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; background: var(--jab-surface); } .jab-picker-row { height: var(--jab-pick-h); border-bottom: 1px solid var(--jab-border); border-left: 2px solid transparent; padding-left: 14px; cursor: pointer; background: var(--jab-surface); } .jab-picker-row:hover { background: var(--jab-surface-2); } .jab-picker-row.aktiv { background: var(--jab-accent-bg); border-left-color: var(--jab-accent); } .jab-picker-row.erfasst { opacity: 0.72; } .jab-picker-nr { font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; color: var(--jab-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jab-picker-nr.leer { color: var(--jab-ink-4); font-weight: 400; } .jab-picker-cell { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; gap: 1px; } .jab-picker-cell .t { font-size: 13.5px; font-weight: 500; color: var(--jab-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jab-picker-cell .s { font-size: 11.5px; color: var(--jab-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jab-picker-cell .s .mono { font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; } .jab-picker-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .jab-picker-title-row .jab-pill { flex: 0 0 auto; } .jab-picker-faellig { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .jab-picker-faellig .d { font-family: var(--jab-font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--jab-ink-2); } .jab-picker-faellig .d.leer { color: var(--jab-ink-4); } .jab-picker-edit { border: none; background: none; color: var(--jab-ink-4); cursor: pointer; padding: 5px; border-radius: var(--jab-r-xs); display: flex; align-items: center; justify-content: center; } .jab-picker-edit:hover { background: var(--jab-surface-3); color: var(--jab-ink); } /* Nur sichtbar, wenn die Standort-Spalte weggefallen ist */ .jab-picker-eng { display: none; } /* ---- Leerzustaende ---- */ .jab-picker-leer { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 24px; text-align: center; color: var(--jab-ink-3); font-size: 13.5px; background: var(--jab-surface); } .jab-picker-leer .gross { font-size: 15px; color: var(--jab-ink); font-weight: 500; } /* ---- Hinweisband (Termin-Kontext) ---- */ .jab-picker-hint { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 12.5px; border-bottom: 1px solid var(--jab-border); background: var(--jab-accent-bg); color: var(--jab-accent-ink); flex: 0 0 auto; } .jab-picker-hint.warn { background: var(--jab-warn-bg); color: var(--jab-warn-ink); } .jab-picker-hint.fail { background: var(--jab-fail-bg); color: var(--jab-fail-ink); } /* ---- Titel und Fuss ---- */ .jab-picker-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .jab-picker-title .t { font-size: 16px; font-weight: 600; color: var(--jab-ink); letter-spacing: -0.01em; } .jab-picker-title .s { font-size: 12px; color: var(--jab-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jab-picker-foot { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: wrap; } .jab-picker-count { font-family: var(--jab-font-mono); font-size: 11.5px; color: var(--jab-ink-3); font-variant-numeric: tabular-nums; } .jab-picker-kbd { font-family: var(--jab-font-mono); font-size: 10.5px; color: var(--jab-ink-4); white-space: nowrap; } /* Dialoghuelle: der Dialog fuehrt seine Raender selbst */ .mud-dialog.jab-picker-dlg { max-height: 92vh; } .mud-dialog .jab-picker-dlg-content { padding: 0 !important; margin: 0 !important; overflow: hidden; } .mud-dialog .jab-picker-dlg-title { padding: 12px 16px; border-bottom: 1px solid var(--jab-border); } .mud-dialog .jab-picker-dlg-actions { padding: 10px 16px; border-top: 1px solid var(--jab-border); } @media (max-width: 880px) { .jab-picker-head, .jab-picker-row { grid-template-columns: 84px minmax(0, 1fr) 118px 34px; gap: 10px; } /* Spezifischer als „.jab-picker-head button" bzw. „.jab-picker-cell" — sonst bliebe die Standort-Spalte stehen, waehrend das Raster sie schon nicht mehr vorsieht. */ .jab-picker-head button.jab-picker-col-ort, .jab-picker-row .jab-picker-col-ort { display: none; } .jab-picker-eng { display: inline; } .jab-picker { height: min(72vh, 620px); } } /* ============ QR-Bindung im Anlagen-Dialog ============ Welches Etikett an dieser Anlage klebt — eine Zeile über den Reitern, weil der QR-Code der Anlage gehört und nicht einem ihrer Reiter. */ .jab-qr-bindung { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 4px; border: 1px solid var(--jab-border); border-radius: 8px; background: var(--jab-surface-2); } .jab-qr-bindung img { border-radius: 4px; background: #fff; /* ein QR braucht weissen Grund, auch im Dunkeldesign */ padding: 4px; flex: 0 0 auto; } .jab-qr-bindung a { color: var(--jab-accent); }