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) ── */

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

.login-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(124,58,237,.08), 0 1px 4px rgba(0,0,0,.06);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    margin: 1rem;
    border-top: 3px solid #7c3aed;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 .25rem;
    color: #4c1d95;
    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;
}

/* InputText renders <input> without a type attribute — match it too (login field looked unstyled). */
.login-card .field input:not([type]),
.login-card .field input[type="text"],
.login-card .field input[type="email"],
.login-card .field input[type="password"] {
    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: #faf9fc;
    color: #111;
}

.login-card .field input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

.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, #7c3aed 0%, #6d28d9 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(124,58,237,.3);
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124,58,237,.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: #7c3aed;
    box-shadow: 0 2px 12px rgba(124,58,237,.12);
    transform: translateY(-1px);
}

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

.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 {
        background: linear-gradient(135deg, #14111f 0%, #1a1528 50%, #0a0812 100%);
    }

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

    .login-title {
        color: #c4b5fd;
    }

    .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]),
    .login-card .field input[type="text"],
    .login-card .field input[type="email"],
    .login-card .field input[type="password"] {
        background: #2a2640;
        color: #f3f4f6;
        border-color: #4b4563;
    }

    .login-card .field input:focus {
        border-color: #7e6fff;
        box-shadow: 0 0 0 3px rgba(126,111,255,.2);
    }

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

    .login-btn {
        background: linear-gradient(135deg, #7e6fff 0%, #6d28d9 100%);
        box-shadow: 0 2px 8px rgba(126,111,255,.3);
    }

    .login-btn:hover {
        box-shadow: 0 4px 12px rgba(126,111,255,.4);
    }

    .tenant-btn {
        background: #2a2640;
        border-color: #4b4563;
    }

    .tenant-btn:hover {
        border-color: #7e6fff;
        box-shadow: 0 2px 12px rgba(126,111,255,.2);
    }

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

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

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

/* ── File pages (employee, later customer and site), Unit-Plan style (15.10.2026) ──
   Tabs with icons, the active one underlined in the brand colour; content in rounded cards. Colours from the
   MudBlazor theme, so the dark mode keeps working. */

.unit-filetabs {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.unit-filetab,
.unit-filetab-menu .mud-button-root {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 9px;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}

.unit-filetab:hover,
.unit-filetab-menu .mud-button-root:hover {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.unit-filetab.active,
.unit-filetab-menu.active .mud-button-root {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    font-weight: 600;
}

.unit-count {
    display: inline-block;
    min-width: 22px;
    padding: 0 7px;
    border-radius: 11px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.unit-filebody {
    margin-top: 16px !important;
}

.unit-card {
    border-radius: 12px !important;
}

.unit-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Person card: brand band with initials, quick actions, facts with icons. */
.unit-person {
    overflow: hidden;
}

.unit-person-band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
}

.unit-person-avatar.mud-avatar {
    background: #fff;
    color: #6d28d9;
    font-weight: 700;
}

.unit-person-name {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.unit-person-sub {
    font-size: .85rem;
    opacity: .85;
}

.unit-person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.unit-person-facts {
    padding: 8px 20px 16px;
}

.unit-fact {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.unit-fact-label {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.unit-fact-value {
    font-size: .9rem;
}

/* Grey secondary text (the theme's "Secondary" colour is purple). */
.unit-muted {
    color: var(--mud-palette-text-secondary) !important;
}

/* Tables in files: grey header row, name as bold link with a small grey line below. */
.unit-table thead th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.unit-due {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: .8125rem;
    background: var(--mud-palette-background-gray);
}

.unit-due-over {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* ── Dashboard (15.10.2026): more room around the title, key figures as one 2×2 block ── */
.unit-dashboard {
    padding: 8px 12px 0;
}

.unit-dashboard-title.mud-typography {
    margin: 12px 0 28px 4px !important;
}

.unit-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.unit-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}

.unit-kpi:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.unit-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.unit-kpi-label {
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

/* "Auf einen Blick" next to an assignment: one link per line with icon and counter. */
.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);
}

/* 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);
}

/* "Objektplan": sites × days of a week (customer file, planning board). */
.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); }

/* Public holiday at the site / in the header (same tint as on the planning board — Sergey 26.10.2026). */
.unit-siteplan td.sp-holiday,
.unit-siteplan th.sp-holiday { background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent); }

.unit-siteplan .sp-holiday-label {
    font-size: .65rem;
    font-weight: 600;
    color: var(--mud-palette-warning);
    white-space: normal;
}

.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.absent { outline: 2px solid var(--mud-palette-error); }
.unit-siteplan .plan-absent { text-decoration: line-through; 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;
}

/* Ist next to the plan (Sergey 28.10.2026): green-grey, orange when clearly above the plan. */
.plan-ist { font-size: .78rem; font-weight: 600; color: var(--mud-palette-success-darken); }
.plan-ist.over, .plan-ist-over { color: var(--mud-palette-warning-darken) !important; font-weight: 700; }
/* Planned work when it differs from the window (28.10.2026). */
.plan-work { font-size: .75rem; font-style: italic; opacity: .9; }

/* On the filled cards of the employee view: a light pill, so green and orange stay readable on purple. */
.planning-board .plan-ist { display: inline-block; margin-top: 2px; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .92); }
.sp-ist { font-size: .8rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.unit-siteplan .plan-add {
    display: block;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2;
    border-radius: 3px;
}

.unit-siteplan .plan-add:hover {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

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

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

/* "+" in a day of the assignment calendar (new assignment on that day). */
.unit-cal-add {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--mud-palette-text-disabled);
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.unit-cal-add:hover {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* Sortable column header of a client-side list ("Erfasste Zeiten"). */
.unit-sorthead {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

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

/* Link to the employee app on the login page. */
.login-applink {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid #e0d7f7;
    border-radius: 8px;
    background: #f6f2ff;
    color: #4c1d95;
    text-decoration: none;
    line-height: 1.3;
}

.login-applink:hover {
    background: #ede5ff;
    border-color: #7c3aed;
}

.login-applink-icon {
    font-size: 1.6rem;
}

.login-applink small {
    color: #6b5b95;
}

/* Second card "Unit-Plan Ampel" (28.10.2026): closer to the first, the traffic-light icon in the primary colour. */
.login-applink + .login-applink { margin-top: 10px; }
.login-applink-icon svg { display: block; color: #7c3aed; }

/* Search in the app bar (Sergey 19.10.2026): white field in the coloured bar, wide on large screens. */
.unit-global-search { flex: 0 1 560px; min-width: 200px; margin: 0 16px; }
.unit-global-search-field .mud-input-outlined { background: var(--mud-palette-surface); border-radius: 6px; }
.unit-global-search-field .mud-input-slot, .unit-global-search-field .mud-input-adornment { color: var(--mud-palette-text-primary); }
.unit-search-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.unit-search-sub { font-size: .8rem; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) { .unit-global-search { min-width: 120px; margin: 0 8px; } }

/* Phones (Sergey 28.10.2026, from dbs-lager — ad-hoc test at 390 px): the app bar was wider than the screen — help, design
   and the user menu (Abmelden, Mandant wechseln) were off screen. Title and search go, the icons get a little narrower.
   Desktop unchanged. */
@media (max-width: 600px) {
    .unit-appbar-title { display: none; }
    .mud-appbar .mud-toolbar { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 480px) {
    .unit-global-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; }
}

/* Tutorial (Sergey 21.10.2026): explained areas glow, the bar at the bottom shows the page and how to end it. */
body.hilfe-aktiv [data-hilfe],
body.hilfe-aktiv .mud-drawer a.mud-nav-link,
body.hilfe-aktiv .unit-topnav > 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 .unit-main, body.hilfe-aktiv .unit-main-side { padding-bottom: 96px !important; }
.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); }
@media (prefers-reduced-motion: reduce) { body.hilfe-aktiv [data-hilfe] { animation: none; } }

/* Column filter as in Excel (Sergey 21.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; }

/* Row reached by a link with ?highlight= (Sergey 21.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); } }

/* Save bar of record pages (from dbs-lager 21.10.2026, component SaveBar): sticks to the bottom of the window while the page
   scrolls; above the tutorial bar when the help is on. */
.unit-savebar {
    position: sticky; bottom: 8px; z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    margin-top: 24px; 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;
}
.unit-savebar .unit-savebar-note { margin-right: auto; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.unit-savebar .unit-savebar-note.dirty { color: var(--mud-palette-warning-darken); font-weight: 600; }
body.hilfe-aktiv .unit-savebar { bottom: 72px; }

/* Path and kind of record above a page title (Sergey 23.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; }

/* "Zu erledigen" (from dbs-lager 22.10.2026): urgent rows tinted red; the counter sits on the app bar button, not half above it. */
tr.unit-todo-urgent td { background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent); }
.unit-todo-badge .mud-badge.mud-badge-top.right { top: 0 !important; right: -6px !important; transform: none !important; }

/* Sign-in pages (from dbs-lager, Sergey 23.10.2026): footer with help contact, Impressum, Datenschutz and version;
   password eye and Caps-Lock hint; the help page. */
.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f5f3fb 0%, #ede9fe 50%, #e0dce8 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.login-page .login-layout { flex: 1; min-height: 0; background: none; }
.login-footer {
    text-align: center;
    font-size: .8125rem;
    color: #6b7280;
    padding: .75rem 1rem 1.25rem;
    line-height: 1.7;
}
.login-footer a, .login-help-link a, .login-links a, .login-help-card a { color: #6d28d9; }
.login-links { text-align: right; margin-top: .375rem; font-size: .875rem; }
.login-help-link { margin: 1rem 0 0; font-size: .875rem; }
.login-notice {
    background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem;
}
.login-btn-link { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.login-card .field input.login-code { text-transform: uppercase; letter-spacing: .1em; }
.pw-field { position: relative; }
.login-card .pw-field input { padding-right: 2.75rem !important; }
.pw-eye {
    position: absolute; right: .375rem; top: 50%; transform: translateY(-50%);
    width: 2.25rem; height: 2.25rem; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #6b7280; padding: 0;
}
.pw-eye svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.pw-eye.on, .pw-eye:hover { color: #7c3aed; }
.pw-eye:focus-visible { outline: 2px solid #7c3aed; }
.pw-caps { margin-top: .375rem; font-size: .8125rem; color: #b45309; font-weight: 500; }
.login-help-card { max-width: 640px; }
.login-help-card h2 { font-size: 1rem; color: #4c1d95; margin: 1.25rem 0 .375rem; }
.login-help-card p, .login-help-card li { font-size: .9rem; line-height: 1.5; color: #374151; }
.login-help-card ul { padding-left: 1.25rem; margin: 0; }
.login-help-small { font-size: .8125rem !important; color: #6b7280 !important; }

@media (prefers-color-scheme: dark) {
    .login-page { background: linear-gradient(135deg, #14111f 0%, #1a1528 50%, #0a0812 100%); }
    .login-footer { color: #9ca3af; }
    .login-footer a, .login-help-link a, .login-links a, .login-help-card a { color: #c4b5fd; }
    .login-notice { background: #052e16; color: #86efac; border-color: #14532d; }
    .pw-eye { color: #9ca3af; }
    .pw-eye.on, .pw-eye:hover { color: #c4b5fd; }
    .pw-caps { color: #fbbf24; }
    .login-help-card h2 { color: #c4b5fd; }
    .login-help-card p, .login-help-card li { color: #d1d5db; }
}

/* Bar on top of the sign-in pages (Sergey 23.10.2026), like the app bar of the office web. */
.login-topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 16px 0 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.login-topbar-brand { color: #fff !important; text-decoration: none; font-size: 1.25rem; font-weight: 700; letter-spacing: .5px; }
.login-topbar-help { color: #fff !important; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.login-topbar-help:hover, .login-topbar-help:focus-visible { background: rgba(255, 255, 255, .15); outline: none; }
@media (prefers-color-scheme: dark) {
    .login-topbar { background: linear-gradient(180deg, #14111f 0%, #0a0812 100%); }
}

/* Column names in table heads bold and darker, also next to the filter funnels (Sergey 28.10.2026, from dbs-lager 24.10.2026):
   MudTable, MudSimpleTable and our own tables (planning board, Objektplan, file tables). */
.mud-table .mud-table-root .mud-table-head .mud-table-cell,
.mud-table .mud-table-root .mud-table-head .mud-table-sort-label,
.mud-simple-table table thead th,
table.planning-board thead th,
table.unit-siteplan thead th,
table.unit-table thead th { font-weight: 700; color: var(--mud-palette-text-primary); }

/* Dashboard widgets on phones (Sergey 28.10.2026, Samsung A17: badges ran out of the card, tables were cut): the title row
   wraps with its badges below, tables scroll sideways inside the card instead of widening the page. */
@media (max-width: 600px) {
    .mud-paper > .d-flex.justify-space-between { flex-wrap: wrap; row-gap: 6px; }
    .mud-paper > .d-flex.justify-space-between > .d-flex { flex-wrap: wrap; }
    .mud-paper .mud-table-container, .mud-paper .mud-simple-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mud-main-content { overflow-x: hidden; }
}

/* Lists on phones (Sergey 28.10.2026, Samsung A17, Mitarbeitende): the status toggles ("Aktiv (13) · Inaktiv · Ausgetreten ·
   Alle") wrap into rows instead of squeezing "AUSGETRETEN (1)" over itself; chips in the stacked table rows wrap their text
   ("Aufenthaltserlaubnis bis …") instead of running out of the card. */
@media (max-width: 600px) {
    .mud-toggle-group { display: flex !important; flex-wrap: wrap; height: auto !important; }
    .mud-toggle-group .mud-toggle-item { flex: 1 1 auto; white-space: nowrap; min-height: 30px; }
    .mud-table-cell { flex-wrap: wrap; row-gap: 4px; }
    .mud-table-cell .mud-chip { max-width: 100%; height: auto; min-height: 24px; }
    .mud-table-cell .mud-chip .mud-chip-content { white-space: normal; }
}

/* Planning board on phones (Sergey 28.10.2026, Samsung A17: the week was squeezed into the screen width and unreadable): the
   week keeps a real width and scrolls sideways inside its card, the name / site column stays visible on the left. */
@media (max-width: 900px) {
    .planning-board { min-width: 880px; }
    .planning-board .employee-col, .unit-siteplan .sp-site {
        position: sticky; left: 0; z-index: 2;
        background: var(--mud-palette-surface);
        box-shadow: 2px 0 4px -2px rgba(0, 0, 0, .25);
    }
    .planning-board .employee-col { min-width: 130px; width: 130px; }
    .unit-siteplan .sp-site { min-width: 130px; width: 130px; }
    /* The customer line spans the week: its text (not the wide cell) stays on the left. */
    .unit-siteplan tr.sp-customer .sp-customer-label { position: sticky; left: 8px; display: inline-block; }
    /* Cards pass under the fixed column, not over it. */
    .planning-board .employee-col, .unit-siteplan .sp-site { z-index: 3; }
    .planning-board thead th.employee-col { z-index: 4; }
    .planning-board td .assignment-card, .planning-board td .absence-tag, .unit-siteplan td .plan-card { position: relative; z-index: 0; }
}

/* Rows of buttons and chips on phones (Sergey 28.10.2026, Aufgabe: "Stornieren" ran off the screen): any flex row in the page
   content wraps when it does not fit; on wider screens nothing changes. */
@media (max-width: 600px) {
    .mud-main-content .d-flex.gap-1:not(.flex-nowrap),
    .mud-main-content .d-flex.gap-2:not(.flex-nowrap),
    .mud-main-content .d-flex.gap-3:not(.flex-nowrap) { flex-wrap: wrap; }
}

/* A grid column never grows wider than its share because of a wide table inside (Sergey 28.10.2026: the dashboard widgets were
   517 px wide on a 390 px phone) — the table scrolls inside its card instead. */
.mud-grid-item { min-width: 0; }
.mud-main-content .d-flex.flex-column > * { min-width: 0; max-width: 100%; }

/* Page titles on phones (Sergey 28.10.2026: "Materialanforderungen" ran off the screen): a bit smaller, the icon stays beside
   the text, a too long word is hyphenated (German, html lang="de") or broken. */
@media (max-width: 600px) {
    .mud-main-content .mud-typography-h4 { font-size: 1.6rem; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
    .mud-main-content .mud-typography-h4.d-flex { flex-wrap: nowrap !important; min-width: 0; }
    .mud-main-content .mud-typography-h4 .mud-icon-root { font-size: 1.6rem !important; flex: 0 0 auto; }
}

/* ── Reports of the tenant administrator (28.10.2026, from dbs-lager 27.10.2026): "Probleme der Woche", "Leistung",
   "Kunden & Objekte", "Kalender heute". Also loaded by the Unit-Plan Ampel. ── */

/* 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) (Sergey 28.10.2026: at medium width the four tiles squeezed their text 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; }
.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; }

/* "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%; }
.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-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; }
}
/* 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 { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
    .unit-report-views .mud-toggle-item:last-child { grid-column: 1 / -1; }
}
/* Our "Auf einen Blick" tiles are a flex row (icon + text block); the report tiles put icon, value, label and note side by
   side as direct children — a small grid for them only. */
.unit-perf .unit-kpi.perf-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 0; align-items: center; }
.unit-perf .unit-kpi.perf-tile > .mud-icon-root { grid-row: 1 / span 3; }
.unit-perf .unit-kpi.perf-tile > .unit-kpi-value,
.unit-perf .unit-kpi.perf-tile > .unit-kpi-label { grid-column: 2; }
@media (max-width: 600px) {
    .unit-cal .cal-kpis .unit-kpi.perf-tile > .unit-kpi-value,
    .unit-cal .cal-kpis .unit-kpi.perf-tile > .unit-kpi-label { grid-column: 1; }
}

/* "Kalender heute" as a list on phones and in the Ampel (Sergey 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 (Sergey 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; }
}

/* Profile photo of an account (Sergey 29.10.2026): always round, cropped to the circle. */
.unit-user-photo {
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.unit-user-photo--bar { width: 28px; height: 28px; }
.unit-user-photo--list { width: 28px; height: 28px; margin-right: 8px; }
.unit-user-photo--preview { width: 96px; height: 96px; }

/* "Material & Werkzeug — meine Objekte" (Sergey 29.10.2026): cards instead of wide tables, one column on phones (390 px). */
.unit-om-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.unit-om-card { padding: 12px 14px; border-radius: 10px !important; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.unit-om-card .unit-om-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.unit-om-card .unit-om-title { font-weight: 600; overflow-wrap: anywhere; }
.unit-om-card .unit-om-line { font-size: .85rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.unit-om-overdue { color: var(--mud-palette-error); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) { .unit-om-grid { grid-template-columns: 1fr; } }

/* First-time setup /einrichtung (from dbs-lager, 03.11.2026): the state 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: #faf9fc;
    color: #111;
}
.login-card .field select:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.login-hint { font-size: .875rem; color: #4b5563; margin: 0 0 1rem; line-height: 1.45; }
@media (prefers-color-scheme: dark) {
    .login-card .field select { background: #2a2640; color: #f3f4f6; border-color: #4b4563; }
    .login-card .field select:focus { border-color: #7e6fff; box-shadow: 0 0 0 3px rgba(126,111,255,.2); }
    .login-hint { color: #d1d5db; }
}