h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.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."
    }

/* ── Login / account pages (static SSR, no MudBlazor components) ── */

/* Top bar of the sign-in pages (23.10.2026), like the one inside: logo left, help right. */
.login-page {
    min-height: 100vh; display: flex; flex-direction: column;
    background: linear-gradient(135deg, #f7f7f7 0%, #efefef 50%, #e4e4e4 100%);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.login-page .login-layout { background: transparent; }
.login-topbar {
    height: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    background: #222222;
    color: #ffffff;
    border-bottom: 3px solid #eb7223;
}
.login-help {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: #ffffff;
    font: 700 1.2rem/1 'Lato', sans-serif;
    text-decoration: none;
}
.login-help:hover, .login-help:focus-visible { background: #eb7223; border-color: #eb7223; }
.login-layout .login-card.login-help-card { max-width: 720px; }
.login-help-card h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; color: #eb7223; }
.login-help-card ol, .login-help-card ul { padding-left: 1.3rem; margin: .3rem 0; line-height: 1.55; }
.login-help-card p { line-height: 1.55; margin: .4rem 0; }
@media (max-width: 600px) { .login-topbar .um-brand-name { display: none; } .login-topbar { padding: 0 12px; } }
/* Password with eye and Caps Lock hint (23.10.2026). */
.pw-field { position: relative; }
.pw-field input { padding-right: 2.8rem !important; width: 100%; box-sizing: border-box; }
.pw-eye {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 2.2rem; height: 2.2rem; border: 0; background: transparent; cursor: pointer; color: #777;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.pw-eye:focus-visible, .pw-eye.on { color: #eb7223; }
@media (hover: hover) { .pw-eye:hover { color: #eb7223; } } /* no sticky hover colour after a tap on phones */
.pw-eye svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.pw-caps { margin-top: .35rem; font-size: .85rem; color: #b45309; font-weight: 600; }
.login-links { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; font-size: .9rem; }
.login-footer { text-align: center; font-size: .8rem; color: #777; padding: 1rem; }
.login-footer a { color: inherit; }
.login-help-contact { margin-top: 1rem; padding: .75rem 1rem; border-radius: 8px; background: #fff7f0; border: 1px solid #f5c9a6; font-size: .9rem; }

.login-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7f7f7 0%, #efefef 50%, #e4e4e4 100%);
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.login-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(34,34,34,.10), 0 1px 4px rgba(0,0,0,.06);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    margin: 1rem;
    border-top: 4px solid #eb7223;
}

.login-title {
    font-family: 'Teko', 'Lato', sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 .25rem;
    color: #222222;
    letter-spacing: .5px;
}

.login-subtitle {
    text-align: center;
    color: #666;
    margin: 0 0 1.5rem;
}

.login-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .875rem;
}

.login-card .field {
    margin-bottom: 1.25rem;
}

.login-card .field > label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: .375rem;
}

.login-card .field input:not([type="checkbox"]) {
    width: 100%;
    padding: .75rem .875rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    background: #fafafa;
    color: #111;
}

.login-card .field input:focus {
    outline: none;
    border-color: #eb7223;
    box-shadow: 0 0 0 3px rgba(235,114,35,.15);
}

.login-card .field.checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.login-card .field.checkbox label {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .875rem;
}

.login-btn {
    width: 100%;
    padding: .75rem;
    background: linear-gradient(135deg, #eb7223 0%, #c95a12 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(235,114,35,.3);
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(235,114,35,.4);
}

.login-btn:active {
    transform: translateY(0);
}

.tenant-btn {
    width: 100%;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    margin-bottom: .75rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    font-family: inherit;
    font-size: inherit;
}

.tenant-btn:hover {
    border-color: #eb7223;
    box-shadow: 0 2px 12px rgba(235,114,35,.15);
    transform: translateY(-1px);
}

.tenant-btn .tenant-name {
    font-weight: 600;
    display: block;
    color: #222222;
}

.tenant-btn .tenant-role {
    font-size: .8125rem;
    color: #6b7280;
}

/* ── Login dark mode (OS preference for static SSR pages) ── */

@media (prefers-color-scheme: dark) {
    .login-layout, .login-page {
        background: linear-gradient(135deg, #1c1c1c 0%, #161616 50%, #0d0d0d 100%);
    }
    .login-page .login-layout { background: transparent; }
    .login-footer { color: #aaa; }

    .login-card {
        background: #262626;
        border-top-color: #f0843e;
        box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
    }

    .login-title {
        color: #f5a874;
    }

    .login-subtitle {
        color: #9ca3af;
    }

    .login-error {
        background: #451a1a;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    .login-card .field > label {
        color: #d1d5db;
    }

    .login-card .field input:not([type="checkbox"]) {
        background: #2e2e2e;
        color: #f3f4f6;
        border-color: #4a4a4a;
    }

    .login-card .field input:focus {
        border-color: #f0843e;
        box-shadow: 0 0 0 3px rgba(240,132,62,.25);
    }

    .login-card .field.checkbox label {
        color: #d1d5db;
    }

    .login-btn {
        background: linear-gradient(135deg, #f0843e 0%, #c95a12 100%);
        box-shadow: 0 2px 8px rgba(240,132,62,.3);
    }

    .login-btn:hover {
        box-shadow: 0 4px 12px rgba(240,132,62,.4);
    }

    .tenant-btn {
        background: #2e2e2e;
        border-color: #4a4a4a;
    }

    .tenant-btn:hover {
        border-color: #f0843e;
        box-shadow: 0 2px 12px rgba(240,132,62,.25);
    }

    .tenant-btn .tenant-name {
        color: #f5a874;
    }

    .tenant-btn .tenant-role {
        color: #9ca3af;
    }

    .validation-message {
        color: #fca5a5;
    }
}

/* ── App bar accent (deinbrandschutz.com: dark bar with orange line) ── */

.unit-appbar-light,
.unit-appbar-dark {
    border-bottom: 3px solid var(--mud-palette-primary);
}

/* ── Dashboard management reports (Plan/Ist, Auslastung) ──
   Thin bars with rounded data ends, 2px gap between paired bars, recessive track.
   Series colours come from --series-* set on the widget (validated for colour-vision deficiency). */

.unit-legend {
    display: flex;
    gap: 1rem;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.unit-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: .375rem;
    vertical-align: -1px;
}

.unit-report-row {
    display: grid;
    grid-template-columns: minmax(110px, 30%) 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.unit-report-row:last-child {
    border-bottom: none;
}

.unit-report-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.unit-report-name {
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unit-report-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.unit-report-track {
    background: var(--mud-palette-lines-default);
    border-radius: 0 4px 4px 0;
    height: 10px;
}

.unit-bar {
    height: 8px;
    border-radius: 0 4px 4px 0;
    min-width: 0;
}

.unit-bar-single {
    height: 10px;
}

.unit-report-target {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--mud-palette-text-secondary);
}

.unit-report-value {
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.unit-report-note {
    margin-left: .25rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 600px) {
    .unit-report-row {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
}

/* Download page of the employee app (/app) */
.app-download-button {
    display: block; text-align: center; padding: .8rem 1rem; border-radius: 6px;
    background: #eb7223; color: #fff; font-weight: 700; text-decoration: none; text-transform: uppercase;
}
.app-download-steps { padding-left: 1.2rem; line-height: 1.6; }
.app-download-hash { font-size: .75rem; color: #666; word-break: break-all; }
.login-app-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.25rem;
    padding: 12px 14px;
    border: 1px solid rgba(235,114,35,.35);
    border-radius: 10px;
    background: #fff7f1;
    color: #222222;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.login-app-link:hover { background: #ffeee2; border-color: #eb7223; box-shadow: 0 2px 10px rgba(235,114,35,.18); }
.login-app-link strong { display: block; color: #eb7223; }
.login-app-link small { display: block; color: #666666; }
.login-app-icon { width: 34px; height: 34px; flex: none; fill: #eb7223; }

/* Setup page /einrichtung (14.10.2026): select like the inputs, hint text. */
.login-card .field select {
    width: 100%;
    padding: .75rem .875rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .9375rem;
    font-family: inherit;
    box-sizing: border-box;
    background: #fafafa;
    color: #111;
}
.login-hint { font-size: .875rem; color: #555; margin: 0 0 1rem; line-height: 1.45; }
.login-success { background: #e8f5e9; color: #1b5e20; border-radius: 8px; padding: .75rem .875rem; margin-bottom: 1rem; }
@media (prefers-color-scheme: dark) {
    .login-card .field select { background: #2e2e2e; color: #f3f4f6; border-color: #4a4a4a; }
    .login-hint { color: #bbb; }
    .login-success { background: #1b3a1e; color: #c8e6c9; }
}

/* ── Modern design (16.10.2026, per user): top bar + horizontal menu, cards with soft shadows ──
   Everything is scoped to .unit-modern (or the um-* popover classes), the classic design is not affected. */

.unit-modern {
    --um-shadow: 0 1px 2px rgba(34,34,34,.06), 0 4px 18px rgba(34,34,34,.08);
    --um-shadow-strong: 0 2px 6px rgba(34,34,34,.10), 0 12px 32px rgba(34,34,34,.14);
    --um-topbar-height: 64px; /* 56 → 64 px (22.10.2026): room for the counter on the "Zu erledigen" symbol */
    --um-nav-height: 48px;
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.mud-theme-dark .unit-modern,
.unit-modern.mud-theme-dark {
    --um-shadow: 0 1px 2px rgba(0,0,0,.40), 0 4px 18px rgba(0,0,0,.35);
    --um-shadow-strong: 0 2px 6px rgba(0,0,0,.50), 0 12px 32px rgba(0,0,0,.45);
}

.um-topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    height: var(--um-topbar-height);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 3px solid var(--mud-palette-primary);
}

.um-burger { display: none !important; }

.um-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
}

.um-brand-mark {
    width: 12px;
    height: 26px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--mud-palette-primary) 0%, var(--mud-palette-tertiary) 100%);
    flex: none;
}

.um-brand-name {
    font-family: 'Teko', 'Lato', sans-serif;
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.um-search-wrap {
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
}

.um-search .mud-input.mud-input-outlined {
    background: var(--mud-palette-surface);
    border-radius: 8px;
}

.um-search .mud-input-outlined-border { border-radius: 8px; }

/* Phones (02.11.2026): the search field had no room left (a 14 px box over "Zu erledigen"). A magnifier opens it as a
   full-width line under the bar instead. */
.um-search-toggle { display: none !important; }
@media (max-width: 600px) {
    .um-search-toggle { display: inline-flex !important; }
    .um-search-wrap { display: none; }
    /* the hidden field no longer pushes the symbols to the right: logo on the left, symbols on the right */
    .um-topbar-actions { margin-left: auto; }
    .um-search-wrap.um-search-open {
        display: block;
        position: absolute;
        left: 8px;
        right: 8px;
        top: calc(100% + 6px);
        max-width: none;
        margin: 0;
        z-index: 1300;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
        border-radius: 8px;
    }
}

/* Search in the app bar of the classic design (19.10.2026): white field in the coloured bar. */
.unit-classic-search { flex: 0 1 520px; min-width: 180px; margin: 0 16px; }
.unit-classic-search .mud-input-slot, .unit-classic-search .mud-input-adornment { color: var(--mud-palette-text-primary); }
@media (max-width: 600px) { .unit-classic-search { min-width: 120px; margin: 0 8px; } }

/* Phones (28.10.2026, ad-hoc test at 390 px): in the classic design the bar was 606 px wide — help, design and the user
   menu (Abmelden, Problem melden) were off screen. Title and search go, the icons get a little narrower. */
@media (max-width: 600px) {
    .unit-appbar-title { display: none; }
    .mud-appbar .mud-toolbar { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 480px) {
    .unit-classic-search { display: none; }
    .mud-appbar .mud-icon-button { padding: 8px; }
}

/* Page headers (title + buttons) wrap on phones instead of pushing the buttons off screen (28.10.2026). */
@media (max-width: 600px) {
    .d-flex.justify-space-between:has(> .mud-typography-h4) { flex-wrap: wrap; gap: 8px; }
    .d-flex.justify-space-between:has(> .mud-typography-h4) > .d-flex { flex-wrap: wrap; }
}

.um-topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.um-nav {
    position: sticky;
    top: calc(var(--um-topbar-height) + 3px);
    z-index: 1100;
    height: var(--um-nav-height);
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 20px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 10px rgba(34,34,34,.08);
    overflow-x: auto;
    scrollbar-width: none;
}

.um-nav .mud-menu,
.um-nav .mud-menu-activator {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch;
    height: 100%;
}

.um-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    transition: color .15s, background-color .15s, border-color .15s;
}

.um-nav-item:hover {
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .06);
}

.um-nav-item.active {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .08);
}

.um-main {
    padding: 28px 32px 40px;
    max-width: 1680px;
    margin: 0 auto;
}

/* Cards and papers: rounded with a soft shadow instead of flat borders */
.unit-modern .um-main .mud-paper[class*="mud-elevation-"]:not(.mud-elevation-0),
.unit-modern .um-main .mud-card {
    border-radius: 12px;
    box-shadow: var(--um-shadow);
}

.unit-modern .um-main .mud-paper.mud-elevation-0 { border-radius: 12px; }

.unit-modern .um-main .mud-table-container { border-radius: 12px; }

.unit-modern .um-main .mud-table-head .mud-table-cell {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.unit-modern .um-main .mud-button-filled { box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), .30); }

/* Dropdowns of the top bar and menu (rendered by the popover provider, outside .unit-modern) */
.um-dropdown-popover.mud-popover {
    border-radius: 10px;
    border-top: 3px solid var(--mud-palette-primary);
    box-shadow: 0 2px 6px rgba(34,34,34,.10), 0 12px 32px rgba(34,34,34,.16) !important;
    min-width: 220px;
}

.um-dropdown .mud-menu-item:hover { color: var(--mud-palette-primary); }

.um-dropdown-caption {
    padding: 10px 16px 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.um-search-popover.mud-popover {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(34,34,34,.10), 0 12px 32px rgba(34,34,34,.16) !important;
}

.um-search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.um-search-icon { color: var(--mud-palette-primary); flex: none; }
.um-search-text { flex: 1; min-width: 0; }
.um-search-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-search-detail { font-size: .8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.um-search-group {
    flex: none;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-radius: 999px;
    padding: 2px 8px;
}

@media (max-width: 959.98px) {
    .um-nav { display: none; }
    .um-burger { display: inline-flex !important; }
    .um-main { padding: 20px 16px 32px; }
}

@media (max-width: 599.98px) {
    .um-topbar { gap: 8px; padding: 0 8px; }
    .um-brand-name { display: none; }
}

/* Record pages of the modern design: heading row + two columns */
.um-record-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 20px;
}

.um-record-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }

.um-record-name {
    font-family: 'Teko', 'Lato', sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.um-record-sub { font-size: 1.05rem; color: var(--mud-palette-text-secondary); font-weight: 600; }

.um-record-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.um-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.um-record-main, .um-record-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.um-record-grid.um-record-grid-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1099.98px) {
    .um-record-grid { grid-template-columns: minmax(0, 1fr); }
}

.um-side-card { overflow: hidden; }

.um-side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.um-side-card-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.um-side-card-body { padding: 14px 18px 16px; }

.um-tabs-paper { overflow: hidden; }
.um-tabs-paper .mud-tabs-tabbar { border-bottom: 1px solid var(--mud-palette-divider); }
.um-tabs-paper .mud-tab { text-transform: none; font-weight: 700; letter-spacing: .01em; min-width: 0; padding: 12px 18px; }
.um-tabs-paper .mud-tab.mud-tab-active { color: var(--mud-palette-primary); }
.um-tab-body { padding: 20px 22px 24px; }

.um-block + .um-block { margin-top: 28px; }

.um-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.um-block-title h2 {
    font-family: 'Teko', 'Lato', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.um-count { color: var(--mud-palette-text-secondary); font-size: .95rem; font-weight: 600; margin-left: 6px; font-family: 'Lato', sans-serif; }

.um-empty {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
}

.um-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .92rem; }
.um-kv dt { color: var(--mud-palette-text-secondary); }
.um-kv dd { margin: 0; overflow-wrap: anywhere; }

.um-link-row { cursor: pointer; }

/* Filter rows (16.10.2026, both designs): MudBlazor gives labelled outlined fields 8px top margin for the label,
   unlabelled ones none, and the action button sat at the bottom. Fields and button now share one top line and height. */
:is(.um-main, .mud-main-content) .mud-grid-item > .mud-input-control.mud-input-input-control:not(.mud-input-outlined-with-label):has(.mud-input-outlined) {
    margin-top: 8px;
}

:is(.um-main, .mud-main-content) .mud-grid-item.d-flex.align-end:has(> .mud-button, > .mud-menu, > .mud-tooltip-root) {
    align-items: flex-start !important;
}

:is(.um-main, .mud-main-content) .mud-grid-item.d-flex.align-end > .mud-button,
:is(.um-main, .mud-main-content) .mud-grid-item.d-flex.align-end > .mud-menu > .mud-button,
:is(.um-main, .mud-main-content) .mud-grid-item.d-flex.align-end > .mud-tooltip-root > .mud-button {
    margin-top: 8px;
    height: 56px;
}

/* Letters above the lists (Kunden, Objekte, Mitarbeitende). */
.unit-letterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 12px;
}

.unit-letterbar button {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    cursor: pointer;
}

.unit-letterbar button:hover {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.unit-letterbar button.active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Modern record pages: blocks shared with the classic design keep their classic max width (900px) and top margin;
   in the two columns they take the full column. History panels in the right column look like cards. */
.unit-modern .um-record-main .mud-paper { max-width: none !important; }
.unit-modern .um-record-main > .mud-paper.mt-4,
.unit-modern .um-record-main > .mud-alert,
.unit-modern .um-record-side > .mud-expansion-panels { margin-top: 0 !important; margin-bottom: 0 !important; }
.unit-modern .um-record-main > .mud-alert { max-width: none !important; }

.unit-modern .um-record-side .mud-expansion-panels {
    border-radius: 12px;
    box-shadow: var(--um-shadow);
    overflow: hidden;
}
.unit-modern .um-record-side .mud-expansion-panels .mud-expand-panel { box-shadow: none; }

/* "+" in the days of the employee's assignment calendar (16.10.2026): always visible; grey for past days and days off. */
.up-cal-add {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -2px 0 4px 4px;
    padding: 0;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.up-cal-add:hover:not(:disabled) {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-style: solid;
}

.up-cal-add.up-cal-add-off {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}
.up-cal-add-menu { float: right; }
.up-cal-add-menu .up-cal-add { float: none; }

/* Sortable header of simple tables (SortableTh, 16.10.2026) — looks like MudTableSortLabel. */
.up-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.up-sort-icon { opacity: 0; transition: opacity .15s; }
.up-sort-btn:hover .up-sort-icon { opacity: .5; }
.up-sort-icon.active { opacity: 1; }


/* "Objektplan": sites × days of a week (customer file, planning board; from unit-plan-android 16.10.2026). */
.unit-siteplan {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.unit-siteplan th,
.unit-siteplan td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 4px;
    vertical-align: top;
    font-size: .85rem;
}

.unit-siteplan thead th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    text-align: center;
}

.unit-siteplan .sp-date {
    font-weight: 400;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.unit-siteplan .sp-site {
    width: 200px;
    min-width: 160px;
    text-align: left;
}

.unit-siteplan .site-name {
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}

.unit-siteplan .site-name:hover { color: var(--mud-palette-primary); }

.unit-siteplan .site-number { font-size: .75rem; }

.unit-siteplan td.sp-weekend,
.unit-siteplan th.sp-weekend { background: color-mix(in srgb, var(--mud-palette-text-secondary) 5%, transparent); }

.unit-siteplan th.sp-today { color: var(--mud-palette-primary); }

.unit-siteplan td.sp-today { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }

.unit-siteplan .sp-customer td {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    font-weight: 600;
}

.unit-siteplan .sp-customer a { color: var(--mud-palette-primary); text-decoration: none; }

.unit-siteplan .plan-card {
    display: block;
    margin-bottom: 4px;
    padding: 3px 5px;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    color: inherit;
    text-decoration: none;
}

.unit-siteplan .plan-card:hover { background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface)); }

.unit-siteplan .plan-card.open { border-left-color: var(--mud-palette-error); }

.unit-siteplan .plan-card.cancelled {
    opacity: .55;
    text-decoration: line-through;
    border-left-color: var(--mud-palette-text-disabled);
}

.unit-siteplan .plan-time { font-weight: 600; }

.unit-siteplan .plan-people { font-size: .78rem; }

.unit-siteplan .plan-open {
    font-size: .78rem;
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* "+" like in the calendars (17.10.2026): always visible, grey and not clickable for past days. */
.unit-siteplan .plan-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    margin: 2px auto 0;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 6px;
    color: var(--mud-palette-primary);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
}

.unit-siteplan a.plan-add:hover {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-style: solid;
}

.unit-siteplan .plan-add.off {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.unit-siteplan tfoot td {
    background: var(--mud-palette-background-gray);
    text-align: center;
}

.unit-siteplan tfoot td.sp-site { text-align: left; }

.unit-muted { color: var(--mud-palette-text-secondary); }

/* "Auf einen Blick" of an assignment: counters as links (from unit-plan-android). */
.unit-glance a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: inherit;
    text-decoration: none;
    font-size: .875rem;
}

.unit-glance a:hover { color: var(--mud-palette-primary); }

/* Cards inside a tab of a record page: no second shadow inside the tab card, a thin border instead. */
.unit-modern .um-tab-body .mud-paper[class*="mud-elevation-"]:not(.mud-elevation-0) {
    box-shadow: none;
    border: 1px solid var(--mud-palette-divider);
}

/* Dashboard "Auf einen Blick": key figures as tiles with links (17.10.2026). */
.unit-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.unit-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.unit-kpi:hover { border-color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .05); }
.unit-kpi .mud-icon-root { grid-row: 1 / span 2; }
.unit-kpi-value { font-family: 'Teko', 'Lato', sans-serif; font-size: 1.9rem; line-height: 1; font-weight: 500; }
.unit-kpi-label { font-size: .78rem; color: var(--mud-palette-text-secondary); }

/* Objektplan (19.10.2026, from unit-plan-android-ohne-gps): assignment with an employee on approved leave or sick — to re-plan. */
.unit-siteplan .plan-card.absent { outline: 2px solid var(--mud-palette-error); }
.unit-siteplan .plan-absent { text-decoration: line-through; color: var(--mud-palette-error); }

/* Company logo in the top bars (21.10.2026): fits the bar height, keeps its proportions. The Dein BrandSchutz logo is the
   light variant for dark bars; the light bar of the classic design gets a dark plate behind it. */
.um-brand-logo, .unit-appbar-logo { height: 44px; max-width: 160px; object-fit: contain; }
.unit-appbar-light .unit-appbar-logo { background: #222; border-radius: 4px; padding: 2px 4px; }

/* Save bar of record pages (21.10.2026): sticks to the bottom of the window while the page scrolls. */
.um-record-footer {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 10px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    border-radius: 8px;
}
.um-record-footer .um-footer-note { margin-right: auto; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.um-record-footer .um-footer-note.dirty { color: var(--mud-palette-warning-darken); font-weight: 600; }

/* Phones (02.11.2026, automatic phone check of all pages): button texts in capitals with letter spacing are ~20 % wider and
   broke into two lines ("Zurück zur Liste", "Anforderung anlegen", "Ausgetreten (1)"). Below 600 px they are written as typed;
   quick status filters stay on one line and scroll sideways if needed; the save bar puts its note on its own line. */
@media (max-width: 600px) {
    /* MudBlazor takes case and spacing of buttons from these theme variables (set on :root); body wins for the page. */
    body { --mud-typography-button-text-transform: none; --mud-typography-button-letterspacing: .01em; }
    /* Quick status filters only (not the report switcher, it has its own layout): the group is a grid of equal columns
       (inline style) — columns as wide as their text instead, scrolling sideways. */
    .unit-quickstatus { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: max-content;
        max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .unit-quickstatus .mud-toggle-item { white-space: nowrap; padding-left: 10px !important; padding-right: 10px !important; }
    .um-record-footer { flex-wrap: wrap; row-gap: 4px; }
    .um-record-footer .um-footer-note { flex-basis: 100%; }
}

/* Counter on the "Zu erledigen" symbol (22.10.2026): on the button, not half above it — it was cut off by the top edge. */
.um-todo-badge .mud-badge.mud-badge-top.right { top: 0 !important; right: -6px !important; transform: none !important; }

/* Column filter as in Excel (Sergey 21.10.2026, from the branch ohne-gps 24.10.2026). */
.unit-colfilter { display: inline-block; vertical-align: middle; }
th:has(.unit-colfilter) { white-space: nowrap; }
.unit-colfilter-button { padding: 2px !important; margin-left: 2px; }
.unit-colfilter-button .mud-icon-root { font-size: 1rem; }
.unit-colfilter-panel { padding: 12px; min-width: 240px; max-width: 340px; }
.unit-colfilter-values { max-height: 280px; overflow-y: auto; }
.unit-colfilter-panel .mud-checkbox { margin: 0; }

/* Path and kind of record above a page title (Sergey 23.10.2026, from the branch ohne-gps 24.10.2026). */
.unit-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .85rem; color: var(--mud-palette-text-secondary); margin-bottom: 2px; }
.unit-trail a { color: var(--mud-palette-primary); text-decoration: none; }
.unit-trail a:hover { text-decoration: underline; }
.unit-trail-sep { opacity: .6; }
.unit-kind { display: flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-primary); margin-bottom: -4px; }

/* Column names in table heads bold and darker, also next to the filter funnels (Sergey 24.10.2026). */
.mud-table .mud-table-root .mud-table-head .mud-table-cell, .mud-simple-table table thead th { font-weight: 700; color: var(--mud-palette-text-primary); }
.unit-modern .um-main .mud-table-head .mud-table-cell { color: var(--mud-palette-text-primary); }

/* Row reached by a link with ?highlight= (ported from ohne-gps 21.10.2026, here 24.10.2026): marked for a while. */
.unit-row-highlight > td { animation: unit-row-highlight 4s ease-out 1; background-color: var(--mud-palette-warning-hover) !important; }
.unit-row-highlight > td:first-child { box-shadow: inset 4px 0 0 var(--mud-palette-warning); }
@keyframes unit-row-highlight { 0%, 60% { background-color: var(--mud-palette-warning-lighten); } }

/* Help and tutorial (Sergey 24.10.2026, from the branch ohne-gps): explained areas glow, the bar at the bottom shows the page
   and how to end it. Both designs: classic side menu and app bar, modern top bar, menu bar and drop-downs. */
body.hilfe-aktiv [data-hilfe],
body.hilfe-aktiv .mud-drawer a.mud-nav-link,
body.hilfe-aktiv .um-nav > a,
body.hilfe-aktiv .mud-popover a.mud-menu-item {
    outline: 2px dashed var(--mud-palette-warning);
    outline-offset: 2px;
    border-radius: 4px;
    animation: hilfe-puls 1.6s ease-in-out infinite;
    cursor: help;
}
body.hilfe-aktiv [data-hilfe] [data-hilfe] { animation: none; }
@keyframes hilfe-puls { 0%, 100% { outline-color: var(--mud-palette-warning); } 50% { outline-color: var(--mud-palette-warning-lighten); } }
body.hilfe-aktiv .mud-main-content, body.hilfe-aktiv .um-main { padding-bottom: 112px !important; }
body.hilfe-aktiv .um-record-footer { bottom: 96px; }
.hilfe-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1350;
    display: flex; align-items: center; padding: 10px 16px;
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    border-top: 3px solid var(--mud-palette-warning); box-shadow: 0 -2px 8px rgba(0,0,0,.15);
    font-size: .95rem;
}
.hilfe-leiste-tipp { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.hilfe-leiste-ende { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 600px) {
    .hilfe-leiste { flex-wrap: wrap; gap: 8px; font-size: .9rem; }
    .hilfe-leiste-ende { margin-left: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.hilfe-aktiv [data-hilfe],
    body.hilfe-aktiv .mud-drawer a.mud-nav-link,
    body.hilfe-aktiv .um-nav > a,
    body.hilfe-aktiv .mud-popover a.mud-menu-item { animation: none; }
}

/* Report "Leistung der Mitarbeitenden" (27.10.2026): ring meter, tiles, list "Probleme zuerst", weekly columns, trend.
   Colours from the MudBlazor palette (light and dark); status colours only for good / warning / critical, always with
   icon + text; the series of the charts in the primary hue. Works down to 390 px without horizontal scrolling. */
.unit-perf { min-width: 0; }
.unit-perf .st-good { --st: var(--mud-palette-success); --st-rgb: var(--mud-palette-success-rgb); }
.unit-perf .st-warning { --st: var(--mud-palette-warning); --st-rgb: var(--mud-palette-warning-rgb); }
.unit-perf .st-critical { --st: var(--mud-palette-error); --st-rgb: var(--mud-palette-error-rgb); }
.unit-perf .st-over { --st: var(--mud-palette-info); --st-rgb: var(--mud-palette-info-rgb); }
.unit-perf .st-noplan { --st: var(--mud-palette-text-secondary); --st-rgb: var(--mud-palette-text-primary-rgb); }
.unit-perf .perf-muted, .unit-perf .perf-muted-link { color: var(--mud-palette-text-secondary); }
.unit-perf .perf-muted-link { text-decoration: none; }
.unit-perf .perf-muted-link:hover { text-decoration: underline; }
.unit-perf .perf-small { font-size: .82rem; }
.unit-perf .perf-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.unit-perf .perf-month { display: flex; align-items: center; gap: 2px; }
.unit-perf .perf-month-name { min-width: 8.5em; text-align: center; font-weight: 600; }
.unit-perf .perf-tabs .mud-tabs-tabbar { border-bottom: 1px solid var(--mud-palette-divider); }
.unit-perf .perf-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-transform: none; }
.unit-perf .perf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st); flex: none; }

/* Status: icon + text in the text colour, the icon in the status colour. */
.unit-perf .perf-status { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.unit-perf .perf-status .mud-icon-root { color: var(--st); }
.unit-perf .perf-flag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-weight: 600;
    color: var(--mud-palette-text-primary); }
.unit-perf .perf-flag .mud-icon-root { color: var(--mud-palette-warning); }

/* Ring meter */
.unit-perf .perf-top { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.unit-perf .perf-ring { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex: 0 1 auto; }
.unit-perf .perf-ring > svg { width: 150px; height: 150px; flex: none; }
.unit-perf .perf-ring circle { fill: none; stroke-width: 10; }
.unit-perf .perf-ring-track { stroke: rgba(var(--st-rgb), .18); }
.unit-perf .perf-ring-fill { stroke: var(--st); stroke-linecap: round; }
.unit-perf .perf-ring-value { font-size: 26px; font-weight: 600; fill: var(--mud-palette-text-primary); }
.unit-perf .perf-ring-caption { font-size: 10px; fill: var(--mud-palette-text-secondary); }
.unit-perf .perf-ring-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.unit-perf .perf-ring-hours a { color: var(--mud-palette-text-primary); font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.unit-perf .perf-ring-hours a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
    .unit-perf .perf-ring-fill { transition: stroke-dasharray .5s ease-out; }
    .unit-perf .perf-meter > div { transition: width .4s ease-out; }
}

/* Tiles (the classes of "Auf einen Blick") */
/* At least 240 px per tile (four in a row or two by two; from ohne-gps 28.10.2026: at medium width the tiles stood three
   plus one and squeezed "Einsätze ohne Anwesenheit" into three lines). */
.unit-perf .perf-tiles { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; min-width: 0; }
.unit-perf .perf-tile-sub { grid-column: 2; font-size: .75rem; line-height: 1.3; overflow-wrap: normal; }
/* Phones keep two by two (29.10.2026: one tile per row only made the page longer at 360–390 px). */
@media (max-width: 599.98px) { .unit-perf .perf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; } }
.unit-perf .perf-delta { font-weight: 600; }
.unit-perf .perf-delta-good { color: var(--mud-palette-success); }
.unit-perf .perf-delta-bad { color: var(--mud-palette-error); }

/* List "Probleme zuerst" */
.unit-perf .perf-list { display: flex; flex-direction: column; }
.unit-perf .perf-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 2fr) 15rem; gap: 4px 16px;
    align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--mud-palette-divider); cursor: pointer; }
.unit-perf .perf-row:hover, .unit-perf .perf-row:focus-visible { background: rgba(var(--mud-palette-primary-rgb), .05); outline: none; }
.unit-perf .perf-row-name { font-weight: 600; overflow-wrap: anywhere; }
.unit-perf .perf-row-figs { display: flex; justify-content: flex-end; gap: 12px; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.unit-perf .perf-row-figs > span { display: inline-flex; align-items: center; gap: 2px; }
.unit-perf .perf-row-figs .mud-icon-root { color: var(--mud-palette-text-secondary); }
.unit-perf .perf-meter { height: 8px; border-radius: 4px; background: rgba(var(--st-rgb), .18); overflow: hidden; margin-bottom: 3px; }
.unit-perf .perf-meter > div { height: 100%; border-radius: 4px; background: var(--st); }
@media (max-width: 700px) {
    .unit-perf .perf-row { grid-template-columns: 1fr; }
    .unit-perf .perf-row-figs { flex-wrap: wrap; white-space: normal; justify-content: flex-start; }
}

/* Legend and columns per week: one hue, plan light, Ist dark; 2 px gap, 4 px rounded data end. */
.unit-perf .perf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: .8rem;
    color: var(--mud-palette-text-secondary); margin-bottom: 8px; }
.unit-perf .perf-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.unit-perf .perf-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.unit-perf .perf-swatch-plan, .unit-perf .perf-bar-plan { background: rgba(var(--mud-palette-primary-rgb), .38); }
.unit-perf .perf-swatch-ist, .unit-perf .perf-bar-ist { background: var(--mud-palette-primary); }
.unit-perf .perf-bars { position: relative; display: flex; align-items: stretch; height: 190px; padding: 18px 0 22px 44px; }
.unit-perf .perf-bars-grid { position: absolute; left: 44px; right: 0; top: 18px; bottom: 22px; pointer-events: none; }
.unit-perf .perf-bars-grid > span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--mud-palette-lines-default); }
.unit-perf .perf-bars-grid em { position: absolute; right: calc(100% + 6px); top: -.6em; font-style: normal; font-size: .72rem;
    color: var(--mud-palette-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.unit-perf .perf-bar-group { position: relative; flex: 1 1 0; min-width: 0; display: flex !important; flex-direction: column; height: 100%; }
.unit-perf .perf-bar-pair { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.unit-perf .perf-bar { position: relative; width: min(24px, 40%); border-radius: 4px 4px 0 0; }
.unit-perf .perf-bar-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px;
    font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; }
.unit-perf .perf-bar-axis { position: absolute; top: 100%; left: 0; right: 0; text-align: center; padding-top: 4px;
    font-size: .72rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.unit-perf .perf-bar-group:hover .perf-bar-pair { background: rgba(var(--mud-palette-primary-rgb), .06); border-radius: 4px; }

/* Trend line: one series, 2 px line, 8 px dots with a 2 px ring in the surface colour, crosshair on hover. */
.unit-perf .perf-trend { padding-left: 44px; }
.unit-perf .perf-trend-plot { position: relative; height: 170px; margin-top: 12px; }
.unit-perf .perf-trend-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.unit-perf .perf-trend-plot polyline { fill: none; stroke: var(--mud-palette-primary); stroke-width: 2px; stroke-linejoin: round;
    stroke-linecap: round; vector-effect: non-scaling-stroke; }
.unit-perf .perf-trend-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--mud-palette-lines-default); pointer-events: none; }
.unit-perf .perf-trend-grid em { position: absolute; right: calc(100% + 6px); top: -.6em; font-style: normal; font-size: .72rem;
    color: var(--mud-palette-text-secondary); white-space: nowrap; }
.unit-perf .perf-trend-target { border-top-color: var(--mud-palette-text-secondary); opacity: .6; }
.unit-perf .perf-trend-hit { position: absolute !important; top: 0; bottom: 0; display: block !important; }
.unit-perf .perf-trend-cross { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--mud-palette-text-secondary);
    opacity: 0; }
.unit-perf .perf-trend-hit:hover .perf-trend-cross { opacity: .5; }
.unit-perf .perf-trend-dot { position: absolute; left: 50%; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%;
    background: var(--mud-palette-primary); border: 2px solid var(--mud-palette-surface); }
.unit-perf .perf-trend-label { position: absolute; left: 50%; margin: 0 0 10px 0; transform: translateX(-50%); font-size: .8rem;
    font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; }
.unit-perf .perf-trend-axis { position: relative; height: 22px; }
.unit-perf .perf-trend-axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: .72rem;
    color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* Notable assignments */
.unit-perf .perf-notable { display: flex; flex-direction: column; }
.unit-perf .perf-notable-row { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 2px 12px; padding: 6px 4px;
    border-bottom: 1px solid var(--mud-palette-divider); color: inherit; text-decoration: none; font-size: .9rem; }
.unit-perf .perf-notable-row:hover { background: rgba(var(--mud-palette-primary-rgb), .05); }
.unit-perf .perf-notable-site { overflow-wrap: anywhere; color: var(--mud-palette-primary); }
.unit-perf .perf-notable-hours { color: var(--mud-palette-text-secondary); white-space: nowrap; }
@media (max-width: 600px) {
    .unit-perf .perf-notable-row { grid-template-columns: 6.5em 1fr; }
    .unit-perf .perf-notable-hours { grid-column: 2; white-space: normal; }
    .unit-perf .perf-ring > svg { width: 130px; height: 130px; }
}

/* "Probleme der Woche" (27.10.2026): status tiles with sparkline, one chart per area. Builds on ".unit-perf" (status
   classes, legend, delta). Series colours from the MudBlazor palette (light and dark): status colours only for good /
   warning / critical and always with a text label; identity series in the info hue (two steps) and a neutral gray. Thin
   marks, 2 px surface gaps, 4 px rounded data ends, recessive grid. Down to 390 px without horizontal scrolling. */
.unit-probs .sw-good { background: var(--mud-palette-success); }
.unit-probs .sw-warning { background: var(--mud-palette-warning); }
.unit-probs .sw-critical { background: var(--mud-palette-error); }
.unit-probs .sw-info { background: var(--mud-palette-info); }
.unit-probs .sw-info-light { background: rgba(var(--mud-palette-info-rgb), .42); }
.unit-probs .sw-neutral { background: rgba(var(--mud-palette-text-primary-rgb), .28); }
.unit-probs .sw-under { background: var(--mud-palette-primary); }
.unit-probs .sw-over { background: var(--mud-palette-info); }
.unit-probs .pc-week-name { min-width: 0; font-variant-numeric: tabular-nums; }

/* Tiles */
.unit-probs .pt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; margin-bottom: 20px; }
.unit-probs .pt-tile { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name name" "status status" "count spark" "summary summary" "foot foot";
    align-items: center; gap: 2px 8px; text-align: left; padding: 10px 12px 8px; border-radius: 8px; cursor: pointer; font: inherit;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
    border-top: 4px solid var(--st); min-width: 0; }
.unit-probs .pt-tile:hover, .unit-probs .pt-tile:focus-visible { background: rgba(var(--st-rgb), .06); outline: none; }
.unit-probs .pt-tile:focus-visible { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.unit-probs .pt-name { grid-area: name; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; min-width: 0; }
.unit-probs .pt-name .mud-icon-root { color: var(--mud-palette-text-secondary); }
.unit-probs .pt-status { grid-area: status; font-size: .8rem; }
.unit-probs .pt-count { grid-area: count; font-size: 1.7rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.unit-probs .pt-summary { grid-area: summary; font-size: .75rem; line-height: 1.25; color: var(--mud-palette-text-secondary); min-width: 0; }
.unit-probs .pt-foot { grid-area: foot; font-size: .72rem; margin-top: 2px; }
.unit-probs .pt-spark { grid-area: spark; position: relative; width: 60px; height: 20px; margin-right: 3px; }
.unit-probs .pc-spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.unit-probs .pc-spark polyline { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 1.5px; stroke-linejoin: round;
    stroke-linecap: round; vector-effect: non-scaling-stroke; }
.unit-probs .pc-spark-dot { position: absolute; right: -3px; width: 6px; height: 6px; margin-bottom: -3px; border-radius: 50%; background: var(--st); }

/* Chart cards */
.unit-probs .pc-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.unit-probs .pc-card { min-width: 0; padding: 14px 14px 10px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
    scroll-margin-top: 80px; }
.unit-probs .pc-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.unit-probs .pc-card-foot { text-align: right; margin-top: 6px; }
.unit-probs .pc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .78rem;
    color: var(--mud-palette-text-secondary); margin-bottom: 6px; }
.unit-probs .pc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.unit-probs .pc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.unit-probs .pc-swatch-line { width: 16px; height: 0; border-top: 2px solid var(--mud-palette-text-primary); display: inline-block; }
.unit-probs .pc-marker-sign { color: var(--mud-palette-error); font-weight: 700; }

/* Columns (stacked per day, pairs per week) */
.unit-probs .pc-cols { position: relative; display: flex; align-items: stretch; height: 200px; padding: 18px 0 38px 30px; }
.unit-probs .pc-grid, .unit-probs .pc-line-layer { position: absolute; left: 30px; right: 0; top: 18px; bottom: 38px; pointer-events: none; }
.unit-probs .pc-grid > span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--mud-palette-lines-default); }
.unit-probs .pc-grid em { position: absolute; right: calc(100% + 6px); top: -.6em; font-style: normal; font-size: .72rem;
    color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.unit-probs .pc-col { position: relative; flex: 1 1 0; min-width: 0; display: flex !important; flex-direction: column; height: 100%; }
.unit-probs .pc-slot { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.unit-probs .pc-col:hover .pc-slot { background: rgba(var(--mud-palette-primary-rgb), .06); border-radius: 4px; }
.unit-probs .pc-stack { position: relative; width: min(30px, 62%); display: flex; flex-direction: column-reverse; gap: 2px;
    border-radius: 4px 4px 0 0; }
.unit-probs .pc-seg { display: block; flex: 1 1 0; min-height: 3px; }
.unit-probs .pc-stack > .pc-seg:last-child { border-radius: 4px 4px 0 0; }
.unit-probs .pc-seg:hover, .unit-probs .pc-bar:hover, .unit-probs .ph-seg:hover { filter: brightness(1.1); outline: 2px solid var(--mud-palette-surface); }
.unit-probs .pc-total { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: .72rem;
    font-weight: 600; color: var(--mud-palette-text-primary); }
.unit-probs .pc-axis { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center;
    padding-top: 3px; font-size: .72rem; line-height: 1.2; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.unit-probs .pc-axis small { font-size: .65rem; }
.unit-probs .pc-col-muted .pc-slot { border: 1px dashed var(--mud-palette-lines-default); border-bottom: 0; border-radius: 4px 4px 0 0;
    margin: 0 18%; }
.unit-probs .pc-col-muted .pc-axis { opacity: .6; }
.unit-probs .pc-pair { gap: 2px; }
.unit-probs .pc-bar { display: block; width: min(16px, 36%); border-radius: 4px 4px 0 0; min-height: 0; }
.unit-probs .pc-col-current .pc-axis { font-weight: 600; color: var(--mud-palette-text-primary); }
.unit-probs .pc-line-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.unit-probs .pc-line-layer polyline { fill: none; stroke: var(--mud-palette-text-primary); stroke-width: 2px; stroke-linejoin: round;
    stroke-linecap: round; vector-effect: non-scaling-stroke; }
.unit-probs .pc-dot { position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; z-index: 1;
    background: var(--mud-palette-text-primary); border: 2px solid var(--mud-palette-surface); }
.unit-probs .pc-dot-label { position: absolute; bottom: 100%; right: 0; padding-bottom: 3px; font-size: .72rem; font-weight: 600;
    color: var(--mud-palette-text-primary); white-space: nowrap; }

/* Horizontal bars */
.unit-probs .ph-rows { display: flex; flex-direction: column; gap: 6px; }
.unit-probs .ph-row-root { display: block !important; width: 100%; }
.unit-probs .ph-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px; align-items: center; min-height: 22px; }
.unit-probs .ph-label { font-size: .82rem; color: var(--mud-palette-text-primary); text-decoration: none; overflow-wrap: anywhere; }
.unit-probs .ph-label:hover { text-decoration: underline; }
.unit-probs .ph-track { display: flex; align-items: center; gap: 6px; min-width: 0; }
.unit-probs .ph-bar { display: flex; gap: 2px; height: 14px; border-radius: 0 4px 4px 0; overflow: hidden; flex: none; }
.unit-probs .ph-seg { display: block; flex: 1 1 0; min-width: 3px; }
.unit-probs .ph-value { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Diverging bars (hours against contract) */
.unit-probs .pd-scale { display: grid; grid-template-columns: minmax(110px, 30%) 1fr 1fr 1fr minmax(92px, 22%); font-size: .7rem;
    color: var(--mud-palette-text-secondary); }
.unit-probs .pd-scale > span:first-child { grid-column: 2; }
.unit-probs .pd-scale > span:nth-child(2) { grid-column: 3; text-align: center; }
.unit-probs .pd-scale > span:nth-child(3) { grid-column: 4; text-align: right; }
.unit-probs .pd-rows { display: flex; flex-direction: column; }
.unit-probs .pd-row { display: grid; grid-template-columns: minmax(110px, 30%) 1fr minmax(92px, 22%); gap: 8px; align-items: center;
    padding: 4px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--mud-palette-divider); }
.unit-probs .pd-row:hover { background: rgba(var(--mud-palette-primary-rgb), .05); }
.unit-probs .pd-name { font-size: .82rem; overflow-wrap: anywhere; }
.unit-probs .pd-track { position: relative; height: 14px; }
.unit-probs .pd-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1px solid var(--mud-palette-text-secondary); opacity: .6; }
.unit-probs .pd-bar { position: absolute; top: 0; bottom: 0; }
.unit-probs .pd-under { right: 50%; margin-right: 1px; border-radius: 4px 0 0 4px; }
.unit-probs .pd-over { left: 50%; margin-left: 1px; border-radius: 0 4px 4px 0; }
.unit-probs .pd-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: .75rem;
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.unit-probs .pd-value .mud-icon-root { color: var(--st); }
@media (max-width: 600px) {
    .unit-probs .pt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .unit-probs .pt-tile { padding: 8px 9px 6px; }
    .unit-probs .pt-count { font-size: 1.4rem; }
    .unit-probs .pt-spark { width: 44px; }
    .unit-probs .pc-kw { display: none; }
    .unit-probs .pc-card { padding: 10px 8px 8px; }
    .unit-probs .pc-cols { padding-left: 24px; }
    .unit-probs .pc-grid, .unit-probs .pc-line-layer { left: 24px; }
    .unit-probs .pd-row, .unit-probs .pd-scale { grid-template-columns: minmax(84px, 32%) 1fr minmax(80px, 26%); }
    .unit-probs .pd-scale { grid-template-columns: minmax(84px, 32%) 1fr 1fr 1fr minmax(80px, 26%); }
    .unit-probs .ph-row { grid-template-columns: minmax(90px, 40%) 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
    .unit-probs .pc-stack, .unit-probs .pc-bar, .unit-probs .ph-bar, .unit-probs .pd-bar { transition: height .3s ease-out, width .3s ease-out; }
}
.unit-report-views { flex-wrap: wrap; }
/* The five report views as cells with 1 px lines between them (29.10.2026, Sergey: narrowed, the views wrapped their labels
   and the 2 × 2 grid lost its lines): the group's primary background shows through the 1 px gaps. Labels stay on one line;
   below 1100 px three plus two cells, below 600 px two plus two plus one. */
.unit-report-views { gap: 1px; padding: 0; background: var(--mud-palette-primary); border: 1px solid var(--mud-palette-primary); overflow: hidden; }
.unit-report-views .mud-toggle-item { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; white-space: nowrap; min-width: 0; }
.unit-report-views .mud-toggle-item:not(.mud-toggle-item-selected) { background: var(--mud-palette-surface); }
.unit-report-views .mud-toggle-item .mud-button-label { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1099.98px) {
    .unit-report-views { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .unit-report-views .mud-toggle-item { grid-column: span 2; padding-left: 6px; padding-right: 6px; }
    .unit-report-views .mud-toggle-item:nth-child(n + 4) { grid-column: span 3; }
}
/* The office has four views (no "Leistung"): four in a row, two by two on phones. */
@media (min-width: 600px) and (max-width: 1099.98px) {
    .unit-report-views-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .unit-report-views-4 .mud-toggle-item, .unit-report-views-4 .mud-toggle-item:nth-child(n + 4) { grid-column: auto; }
}

/* "Kunden & Objekte" (27.10.2026): status tiles as filter, one compact bullet row per site (GPS time on site in percent of
   the site's plan, the plan as a 2 px marker at 100 %), the counts as links with icon + text. */
.unit-sites .so-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; }
.unit-sites .so-tile { grid-template-areas: "status status" "count count" "summary summary"; }
.unit-sites .so-tile-on { box-shadow: 0 0 0 2px var(--st); background: rgba(var(--st-rgb), .08); }
.unit-sites .so-legend-plan { display: inline-block; width: 0; height: 14px; border-left: 2px solid var(--mud-palette-text-primary); }
.unit-sites .so-scale, .unit-sites .so-bullet { display: grid; grid-template-columns: minmax(0, 1fr) 11.5rem; gap: 10px; align-items: center; }
.unit-sites .so-scale { font-size: .7rem; color: var(--mud-palette-text-secondary); height: 16px; }
.unit-sites .so-scale-track { position: relative; height: 100%; }
.unit-sites .so-scale-track em { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
.unit-sites .so-scale-track em:first-child { transform: none; }
.unit-sites .so-scale-track em:last-child { transform: translateX(-100%); }
.unit-sites .so-rows { display: flex; flex-direction: column; }
.unit-sites .so-row { padding: 8px 0 8px; border-bottom: 1px solid var(--mud-palette-divider); min-width: 0; }
.unit-sites .so-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-bottom: 4px; min-width: 0; }
.unit-sites .so-status { font-size: .8rem; white-space: nowrap; }
.unit-sites .so-names { font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
.unit-sites .so-customer { color: var(--mud-palette-text-secondary); text-decoration: none; }
.unit-sites .so-site { color: var(--mud-palette-text-primary); font-weight: 600; text-decoration: none; }
.unit-sites .so-customer:hover, .unit-sites .so-site:hover { text-decoration: underline; }
.unit-sites .so-sep { color: var(--mud-palette-text-secondary); margin: 0 4px; }
.unit-sites .so-bullet-root { display: block !important; width: 100%; }
/* Office view (29.10.2026): plan and visits as one line instead of the GPS bullet. */
.unit-sites .so-plain { display: block; margin: 2px 0 4px; font-size: .85rem; color: inherit; text-decoration: none; }
.unit-sites .so-bullet { color: inherit; text-decoration: none; border-radius: 4px; }
.unit-sites .so-bullet:hover .so-track { background: rgba(var(--mud-palette-primary-rgb), .14); }
.unit-sites .so-track { position: relative; height: 14px; border-radius: 0 4px 4px 0; background: rgba(var(--mud-palette-text-primary-rgb), .07); }
.unit-sites .so-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.unit-sites .so-plan { position: absolute; top: -3px; bottom: -3px; width: 0; margin-left: -1px; border-left: 2px solid var(--mud-palette-text-primary); }
.unit-sites .so-value { font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); }
.unit-sites .so-value b { color: var(--mud-palette-text-primary); }
.unit-sites .so-counts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: .78rem; }
.unit-sites .so-count { display: inline-flex; align-items: center; gap: 3px; color: var(--mud-palette-text-primary); text-decoration: none;
    font-variant-numeric: tabular-nums; }
.unit-sites .so-count .mud-icon-root { color: var(--st); }
.unit-sites .so-count:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .unit-sites .so-scale, .unit-sites .so-bullet { grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 6px; }
    .unit-sites .so-value span { display: none; }
    .unit-sites .so-tiles { gap: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
    .unit-sites .so-bar { transition: width .3s ease-out; }
}

/* "Kalender heute" (27.10.2026): a timeline per employee. Bars in a light tint of the state colour with a 3 px accent and
   the state icon; text in text colours. The name column stays put, the timeline scrolls sideways inside its box on phones. */
.unit-cal .cal-kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-width: 760px; }
.unit-cal .cal-legend > span { gap: 4px; }
.unit-cal .cal-legend .cal-legend-icon { color: var(--st); }
.unit-cal .cal-legend-open { display: inline-block; width: 16px; height: 12px; border: 1px dashed var(--mud-palette-text-secondary); border-radius: 3px; }
.unit-cal .cal-legend-now { display: inline-block; width: 0; height: 14px; border-left: 2px solid var(--mud-palette-error); }
.unit-cal .cal-scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.unit-cal .cal-scroll:focus-visible { outline: 2px solid var(--mud-palette-primary); }
.unit-cal .cal-grid { min-width: 720px; }
.unit-cal .cal-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: stretch; min-height: 36px;
    border-bottom: 1px solid var(--mud-palette-divider); }
.unit-cal .cal-row:last-child { border-bottom: 0; }
.unit-cal .cal-name { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 1px;
    padding: 4px 8px; background: var(--mud-palette-surface); border-right: 1px solid var(--mud-palette-divider); font-size: .82rem; min-width: 0; }
.unit-cal .cal-name a { color: var(--mud-palette-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-cal .cal-name a:hover { text-decoration: underline; }
.unit-cal .cal-absent-flag { font-size: .72rem; color: var(--mud-palette-error); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-cal .cal-absent-flag:not(.cal-absent-conflict) { color: var(--mud-palette-text-secondary); font-weight: 400; }
.unit-cal .cal-absent-flag.cal-absent-conflict { white-space: normal; display: block; line-height: 1.25; }
.unit-cal .cal-absent-group { margin-bottom: 8px; }
.unit-cal .cal-absent-title { display: block; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 6px 0 4px; }
/* "Einsatz trotz Abwesenheit" (29.10.2026): amber card, each line a link to the assignment. */
.unit-cal .cal-conflicts { border: 1px solid var(--mud-palette-warning); border-left-width: 4px; border-radius: 8px; padding: 10px 12px;
    background: rgba(var(--mud-palette-warning-rgb), .08); }
.unit-cal .cal-conflicts-head { display: flex; align-items: center; gap: 6px; color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); }
.unit-cal .cal-conflicts-head a { color: inherit; text-decoration: none; }
.unit-cal .cal-conflicts-head a:hover { text-decoration: underline; }
.unit-cal .cal-conflicts-text { margin: 4px 0 6px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.unit-cal .cal-conflict { display: block; padding: 4px 0; font-size: .9rem; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.unit-cal a.cal-conflict:hover { color: var(--mud-palette-primary); }
.unit-cal .cal-track { position: relative; margin: 0 14px; }
.unit-cal .cal-axis { min-height: 24px; }
.unit-cal .cal-axis em { position: absolute; top: 4px; transform: translateX(-50%); font-style: normal; font-size: .72rem;
    color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.unit-cal .cal-section { padding: 6px 8px 2px; font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider); position: sticky; left: 0; width: fit-content; }
.unit-cal .cal-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--mud-palette-error); z-index: 1; pointer-events: none; }
.unit-cal .cal-bar-root { position: absolute !important; top: 5px; bottom: 5px; display: block !important; min-width: 6px; }
.unit-cal .cal-bar { display: flex; align-items: center; gap: 4px; height: 100%; padding: 0 6px 0 4px; overflow: hidden; border-radius: 4px;
    background: rgba(var(--st-rgb), .16); border-left: 3px solid var(--st); color: var(--mud-palette-text-primary); text-decoration: none;
    font-size: .75rem; white-space: nowrap; }
.unit-cal .cal-bar.st-noplan { background: rgba(var(--mud-palette-text-primary-rgb), .07); }
.unit-cal .cal-bar:hover, .unit-cal .cal-bar:focus-visible { background: rgba(var(--st-rgb), .28); outline: 2px solid var(--mud-palette-surface); }
.unit-cal .cal-bar-icon { color: var(--st); flex: none; }
.unit-cal .cal-bar-text { overflow: hidden; text-overflow: ellipsis; }
.unit-cal .cal-bar-open { border: 1px dashed var(--mud-palette-text-secondary); border-left: 3px solid var(--st); }
.unit-cal .cal-row-open .cal-name a { color: var(--mud-palette-text-secondary); }
.unit-cal .cal-absent { display: flex; flex-wrap: wrap; gap: 8px; }
.unit-cal .cal-absent-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); text-decoration: none; font-size: .82rem; }
.unit-cal .cal-absent-chip.st-critical { border-color: var(--mud-palette-error); }
.unit-cal .cal-absent-chip:hover { background: rgba(var(--mud-palette-primary-rgb), .05); }
.unit-cal .cal-absent-name { font-weight: 600; }
@media (max-width: 600px) {
    .unit-cal .cal-row { grid-template-columns: 116px minmax(0, 1fr); }
    .unit-cal .cal-grid { min-width: 640px; }
}

/* Modern top bar at phone width (27.10.2026): the five symbols were 48 px each and made the page 400 px wide at 390 px. */
.um-topbar-actions { flex: none; min-width: 0; }
.um-search-wrap { min-width: 0; }
@media (max-width: 599.98px) {
    .um-topbar { gap: 4px; padding: 0 4px; }
    .um-topbar-actions { gap: 0; }
    .um-topbar-actions .mud-icon-button { padding: 8px; }
    .um-burger { padding: 8px !important; }
}
/* A share above the end of the axis: square end with a zigzag cut instead of the rounded data end. */
.unit-sites .so-bar-clipped { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%); }
@media (max-width: 600px) {
    .unit-cal .cal-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .unit-cal .cal-kpis .unit-kpi { padding: 8px; grid-template-columns: 1fr; }
    .unit-cal .cal-kpis .unit-kpi > .mud-icon-root { display: none; }
    .unit-cal .cal-kpis .perf-tile-sub { grid-column: 1; }
    /* five report views (a grid with inline columns): two per row instead of squeezing the labels, the last one full width */
    .unit-report-views { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .unit-report-views .mud-toggle-item, .unit-report-views .mud-toggle-item:nth-child(n + 4) { grid-column: auto; }
    .unit-report-views .mud-toggle-item:last-child { grid-column: 1 / -1; }
    .unit-report-views-4 .mud-toggle-item:last-child { grid-column: auto; }
    /* The three dashboard tabs across the whole width, and an odd last report tile over both columns (29.10.2026). */
    .unit-dash-tabs { width: 100%; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: auto; }
    .unit-dash-tabs .mud-toggle-item { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
    .unit-probs .pt-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* "Kalender heute" as a list on phones and in the Ampel (from ohne-gps 28.10.2026, variant B); the timeline above 600 px in the web. */
.unit-cal .cal-list { display: none; }
.unit-cal .cal-list.cal-list-only { display: block; }
.unit-cal .cal-hidden { display: none !important; }
@media (max-width: 600px) {
    .unit-cal .cal-list { display: block; }
    .unit-cal .cal-scroll { display: none; }
}
.cal-list-person { padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cal-list-person:last-child { border-bottom: 0; }
.cal-list-name { font-weight: 600; margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cal-list-name a { color: inherit; text-decoration: none; }
.cal-list-item {
    display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 8px;
    border-left: 4px solid var(--st, var(--mud-palette-primary));
    background: rgba(var(--st-rgb, 124, 77, 255), .08); color: inherit; text-decoration: none;
}
.cal-list-icon { color: var(--st, var(--mud-palette-primary)); margin-top: 2px; flex: 0 0 auto; }
.cal-list-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cal-list-state { font-size: .8rem; font-weight: 600; color: var(--st, var(--mud-palette-primary)); white-space: nowrap; }
.cal-list-item.cal-bar-open { border-left-style: dashed; }

/* Reports for 20 … 100+ people (from ohne-gps 28.10.2026): distribution columns, state bar, hour chart, grouped lists with
   native <details> (problem groups open), "alle anzeigen" after 10 / 15, a name search. Status always icon + text; colours
   from the MudBlazor palette (light and dark). Down to 390 px without horizontal scrolling. */
.unit-probs #probleme-employees { grid-column: 1 / -1; }
.unit-perf .rg-card-title { font-weight: 600; margin-bottom: 6px; }
.unit-perf .rg-summary { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 8px 0 10px; font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Distribution: one column per band */
.unit-perf .rg-dist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; margin: 4px 0 6px; }
.unit-perf .rg-dist-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 4px 2px 6px; border: 0;
    border-radius: 8px; background: transparent; font: inherit; color: var(--mud-palette-text-primary); cursor: pointer; text-decoration: none; }
.unit-perf .rg-dist-col:hover, .unit-perf .rg-dist-col:focus-visible { background: rgba(var(--st-rgb), .08); outline: none; }
.unit-perf .rg-dist-col:focus-visible { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.unit-perf .rg-dist-col.rg-on { background: rgba(var(--st-rgb), .12); box-shadow: 0 0 0 2px var(--st); }
/* Room above the tallest column for its count (Sergey 28.10.2026: the "13" ran into the text above). */
.unit-perf .rg-dist-slot { position: relative; height: 96px; padding-top: 22px; box-sizing: content-box; display: flex; align-items: flex-end; justify-content: center; }
.unit-perf .rg-dist-bar { position: relative; width: min(44px, 70%); min-height: 2px; background: var(--st); border-radius: 4px 4px 0 0; }
.unit-perf .rg-dist-count { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: .9rem;
    font-weight: 700; font-variant-numeric: tabular-nums; }
.unit-perf .rg-dist-label { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .72rem; line-height: 1.2;
    text-align: center; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.unit-perf .rg-dist-label .mud-icon-root { color: var(--st); }

/* State bar of the day */
.unit-perf .rg-statebar { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; margin: 2px 0 8px; }
.unit-perf .rg-statebar-seg { display: block; min-width: 4px; background: var(--st); }
.unit-perf .rg-statebar-seg.st-noplan { background: rgba(var(--mud-palette-text-primary-rgb), .25); }
.unit-perf .rg-statebar-seg.rg-dim { opacity: .3; }
.unit-perf .rg-statebar-empty { flex: 1; background: rgba(var(--mud-palette-text-primary-rgb), .07); }
.unit-perf .rg-statekeys { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-perf .rg-statekey { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 10px; border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); font: inherit; font-size: .82rem;
    color: var(--mud-palette-text-primary); cursor: pointer; text-decoration: none; }
.unit-perf .rg-statekey .mud-icon-root { color: var(--st); }
.unit-perf .rg-statekey b { font-variant-numeric: tabular-nums; }
.unit-perf .rg-statekey.rg-on { border-color: var(--st); box-shadow: 0 0 0 1px var(--st); background: rgba(var(--st-rgb), .1); }
.unit-perf .rg-statekey:focus-visible { outline: 2px solid var(--mud-palette-primary); }
.unit-perf .rg-swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--st); display: inline-block; }
.unit-perf .rg-statekey.st-noplan .rg-swatch { background: rgba(var(--mud-palette-text-primary-rgb), .25); }

/* People per hour (plan light, on site solid) */
.unit-probs .rg-hc { --rg-hc-left: 30px; height: 170px; }
.unit-probs .rg-hc .pc-bar { width: min(12px, 42%); }
.unit-probs .rg-hc-plan { background: rgba(var(--mud-palette-primary-rgb), .32); }
.unit-probs .rg-hc-ist { background: var(--mud-palette-primary); }
.unit-probs .rg-hc-none { height: 0; }
.unit-probs .rg-hc-skip { visibility: hidden; }
.unit-probs .rg-hc-now { position: absolute; top: 18px; bottom: 38px; width: 0; border-left: 2px solid var(--mud-palette-error); z-index: 1; pointer-events: none; }
@media (max-width: 600px) { .unit-probs .rg-hc { --rg-hc-left: 24px; } }

/* Grouped lists */
.unit-perf .rg-list { display: flex; flex-direction: column; gap: 8px; }
.unit-perf .rg-group { border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid var(--st); border-radius: 8px; min-width: 0; }
.unit-perf .rg-group > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; cursor: pointer;
    font-weight: 600; list-style: none; }
.unit-perf .rg-group > summary::-webkit-details-marker { display: none; }
.unit-perf .rg-group > summary::after { content: "▸"; margin-left: 4px; color: var(--mud-palette-text-secondary); transition: transform .15s; }
.unit-perf .rg-group[open] > summary::after { transform: rotate(90deg); }
.unit-perf .rg-group > summary:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; border-radius: 8px; }
.unit-perf .rg-icon { color: var(--st); flex: none; }
.unit-perf .rg-label { flex: 1 1 auto; min-width: 0; }
.unit-perf .rg-count { min-width: 2em; padding: 0 8px; border-radius: 12px; background: rgba(var(--st-rgb), .14); text-align: center;
    font-variant-numeric: tabular-nums; }
.unit-perf .rg-items { display: flex; flex-direction: column; padding: 0 10px; }
.unit-perf .rg-group > .rg-items:last-child, .unit-perf .rg-more[open] > .rg-items { padding-bottom: 6px; }
.unit-perf .rg-item { min-width: 0; }
.unit-perf .rg-item[hidden] { display: none; }
.unit-perf .rg-more { padding: 0 0 4px; }
.unit-perf .rg-more > summary { padding: 8px 12px; min-height: 40px; cursor: pointer; color: var(--mud-palette-primary); font-weight: 600; font-size: .88rem; }
.unit-perf .rg-more[open] > summary { display: none; }
.unit-perf .rg-empty { margin: 4px 0; color: var(--mud-palette-text-secondary); font-size: .9rem; }
.unit-perf .rg-filter-note { margin: 0 0 8px; font-size: .85rem; }
.unit-perf .rg-link { border: 0; background: none; padding: 0; font: inherit; color: var(--mud-palette-primary); cursor: pointer; text-decoration: underline; }
.unit-perf .rg-filter-note a { color: var(--mud-palette-primary); }
.unit-perf .rg-back { display: inline-block; margin-bottom: 8px; color: var(--mud-palette-primary); font-weight: 600; text-decoration: none; min-height: 32px; }
.unit-perf .rg-search { margin: 0 0 10px; max-width: 420px; }
.unit-perf .rg-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.unit-perf .rg-search input[type=search] { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 1rem;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px; }
.unit-perf .rg-search input[type=search]:focus { outline: 2px solid var(--mud-palette-primary); border-color: var(--mud-palette-primary); }

/* A person (or a day's entry) that opens its details */
.unit-perf .rg-person > summary { list-style: none; cursor: pointer; }
.unit-perf .rg-person > summary::-webkit-details-marker { display: none; }
.unit-perf .rg-person > summary:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.unit-perf .rg-person[open] > summary { background: rgba(var(--mud-palette-primary-rgb), .05); }
.unit-perf .rg-detail { padding: 6px 4px 10px; border-bottom: 1px solid var(--mud-palette-divider); font-size: .85rem; }
.unit-perf .rg-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-bottom: 6px; color: var(--mud-palette-text-secondary); }
.unit-perf .rg-days { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.unit-perf .rg-days th, .unit-perf .rg-days td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--mud-palette-divider); }
.unit-perf .rg-days th:first-child, .unit-perf .rg-days td:first-child, .unit-perf .rg-days th:last-child, .unit-perf .rg-days td:last-child { text-align: left; }
.unit-perf .rg-days th { font-weight: 600; color: var(--mud-palette-text-secondary); font-size: .75rem; }
.unit-cal .cal-entry > summary { padding: 6px 0 0; }
.unit-cal .cal-entry-name { display: block; font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.unit-cal .cal-entry .cal-list-item { margin-top: 2px; }
.unit-cal .cal-list { margin-top: 8px; }
@media (max-width: 600px) {
    .unit-perf .rg-dist { gap: 2px; }
    .unit-perf .rg-dist-slot { height: 80px; }
    .unit-perf .rg-dist-label { font-size: .66rem; }
    .unit-perf .rg-items { padding: 0 6px; }
    .unit-perf .rg-days th, .unit-perf .rg-days td { padding: 3px 3px; }
}

/* Smallest phones (29.10.2026, 360 px): the dashboard tabs and the report views on one line each, a bit smaller. */
@media (max-width: 420px) {
    .unit-dash-tabs .mud-toggle-item, .unit-report-views .mud-toggle-item { font-size: .78rem; letter-spacing: 0; padding-left: 4px; padding-right: 4px; }
}

/* Labels of sites (29.10.2026): a small chip in the label's colour; colour choice as round swatches. */
.site-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .75rem; font-weight: 600; line-height: 1.5;
    white-space: nowrap; margin: 1px 4px 1px 0; }
.color-choice { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.color-choice-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.color-choice-swatch.on { border-color: var(--mud-palette-text-primary); box-shadow: 0 0 0 2px var(--mud-palette-surface) inset; }
.planning-hint { white-space: pre-line; }

/* Jumps inside a report land below the sticky bars (02.11.2026). */
.perf-anchor { scroll-margin-top: 140px; }

/* Product name "Mobile Mitarbeiter – Dein BrandSchutz" in the header (Sergey 02.11.2026); on a phone only the product. */
@media (max-width: 599.98px) { .unit-brand-company { display: none; } }
/* Login cards: the product large, the company below in a second line (like the header of the employee app). */
.login-company { display: block; margin-top: .15em; font-size: .5em; letter-spacing: .08em; opacity: .75; }

/* Projects in TerraGrid on site, customer and employee pages (Sergey 02.11.2026). */
.tg-project { padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.tg-project:first-of-type { border-top: none; }
.tg-archived { opacity: .65; }
.tg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tg-site { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.tg-badge { font-size: .75rem; padding: 0 6px; border-radius: 8px; background: var(--mud-palette-action-disabled-background); }
.tg-sum { font-size: .875rem; margin-top: 2px; }
.tg-overdue { color: var(--mud-palette-error); }
.tg-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .85rem; }
.tg-table th, .tg-table td { padding: 4px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tg-table th:first-child, .tg-table td:first-child { text-align: left; white-space: normal; }
.tg-table th { font-weight: 600; color: var(--mud-palette-text-secondary); }
.tg-short { display: none; }
@media (max-width: 599.98px) {
    .tg-long { display: none; }
    .tg-short { display: inline; }
    .tg-table th, .tg-table td { padding: 4px 3px; }
}
/* The product name stays on one line; the company only where there is room next to the search. */
.unit-appbar-title { white-space: nowrap; }
@media (max-width: 1439.98px) { .unit-appbar-title .unit-brand-company { display: none; } }