@layer reset, tokens, base, layout, components, utilities, pages;

/* Source: resources/css/00-tokens.css */
@layer tokens {
    :root {
        --sr-color-brand-50: #eef4fa;
        --sr-color-brand-100: #d9e7f3;
        --sr-color-brand-200: #b7cfe5;
        --sr-color-brand-500: #2b6aa3;
        --sr-color-brand-600: #1e5c98;
        --sr-color-brand-700: #174b7d;
        --sr-color-brand-800: #103a61;
        --sr-color-brand-900: #0a2d49;
        --sr-color-brand-500-rgb: 43 106 163;
        --sr-color-brand-600-rgb: 30 92 152;
        --sr-color-brand-900-rgb: 10 45 73;

        --sr-color-accent-50: #fdf0f0;
        --sr-color-accent-100: #f8dada;
        --sr-color-accent-500: #ca302d;
        --sr-color-accent-600: #b92a28;
        --sr-color-accent-700: #982321;
        --sr-color-accent-500-rgb: 202 48 45;

        --sr-color-text: #111820;
        --sr-color-text-soft: #303840;
        --sr-color-text-muted: #6a747e;
        --sr-color-border: #e1e6ea;
        --sr-color-border-strong: #ccd5dc;
        --sr-color-surface: #ffffff;
        --sr-color-surface-soft: #f8f9fa;
        --sr-color-background: #f3f5f7;

        --sr-color-success: #177b55;
        --sr-color-success-soft: #e8f5ef;
        --sr-color-action-500: #2fb874;
        --sr-color-action-600: #249b61;
        --sr-color-action-soft: #e8f7ef;
        --sr-color-warning: #95600f;
        --sr-color-warning-soft: #fff4dc;
        --sr-color-danger: #b62e32;
        --sr-color-danger-soft: #fbecee;
        --sr-color-info: var(--sr-color-brand-600);
        --sr-color-info-soft: #eef4fa;

        --sr-space-1: .25rem;
        --sr-space-2: .5rem;
        --sr-space-3: .75rem;
        --sr-space-4: 1rem;
        --sr-space-5: 1.5rem;
        --sr-space-6: 2rem;
        --sr-space-7: 3rem;
        --sr-space-8: 4rem;

        --sr-radius-xs: .4rem;
        --sr-radius-sm: .6rem;
        --sr-radius-md: .8rem;
        --sr-radius-lg: 1rem;
        --sr-radius-xl: 1.25rem;

        --sr-shadow-xs: 0 1px 2px rgb(17 24 32 / 4%);
        --sr-shadow-sm: 0 8px 24px rgb(17 24 32 / 6%);
        --sr-shadow-md: 0 22px 55px rgb(17 24 32 / 11%);
        --sr-shadow-brand: 0 10px 24px rgb(var(--sr-color-brand-600-rgb) / 16%);

        --sr-overlay-backdrop-color: rgb(17 24 32 / 14%);
        --sr-overlay-backdrop-blur: 1px;
        --sr-popover-backdrop-color: transparent;
        --sr-mobile-focus-backdrop-color: rgb(17 24 32 / 12%);
        --sr-mobile-focus-backdrop-blur: 1px;

        --sr-sidebar-expanded-width: 17.5rem;
        --sr-sidebar-collapsed-width: 5.4rem;
        --sr-sidebar-width: var(--sr-sidebar-expanded-width);
        --sr-content-width: 94rem;
        --sr-content-padding: clamp(1.5rem, 3vw, 2.75rem);
        --sr-layout-transition: 220ms ease;
        --sr-topbar-height: 4.75rem;
        --sr-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --sr-transition: 160ms ease;
    }

    @media (min-width: 58.01rem) {
        html.sr-sidebar-collapsed {
            --sr-sidebar-width: var(--sr-sidebar-collapsed-width);
            --sr-content-width: 112rem;
            --sr-content-padding: clamp(1.25rem, 2.2vw, 2.25rem);
        }
    }
}

/* Source: resources/css/01-reset.css */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; color-scheme: light; }
    body { min-height: 100%; margin: 0; }
    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    img, svg { display: block; max-width: 100%; }
    h1, h2, h3, p { margin-top: 0; }
    table { border-collapse: collapse; }
    fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
}

/* Source: resources/css/02-base.css */
@layer base {
    body {
        overscroll-behavior-y: none;
        background: var(--sr-color-background);
        color: var(--sr-color-text);
        font-family: var(--sr-font);
        font-size: 1rem;
        line-height: 1.5;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }

    h1 {
        margin-bottom: var(--sr-space-2);
        color: var(--sr-color-text);
        font-size: clamp(1.8rem, 3vw, 2.35rem);
        font-weight: 780;
        line-height: 1.08;
        letter-spacing: -.045em;
    }

    h2 {
        margin-bottom: var(--sr-space-1);
        color: var(--sr-color-text);
        font-size: 1.13rem;
        font-weight: 760;
        line-height: 1.3;
        letter-spacing: -.02em;
    }

    p { color: var(--sr-color-text); }
    strong { font-weight: 750; }

    :focus-visible {
        outline: 3px solid rgb(var(--sr-color-brand-600-rgb) / 22%);
        outline-offset: 2px;
    }

    [hidden] { display: none !important; }

    ::selection {
        background: var(--sr-color-brand-200);
        color: var(--sr-color-brand-900);
    }
}

/* Source: resources/css/03-layout.css */
@layer layout {
    .sr-skip-link {
        position: fixed;
        top: var(--sr-space-3);
        left: var(--sr-space-3);
        z-index: 100;
        padding: .7rem 1rem;
        border-radius: var(--sr-radius-sm);
        background: var(--sr-color-surface);
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-md);
        transform: translateY(-160%);
        transition: transform var(--sr-transition);
    }

    .sr-skip-link:focus { transform: translateY(0); }

    .sr-shell {
        min-height: 100vh;
        padding-left: var(--sr-sidebar-width);
        background: var(--sr-color-background);
        transition: padding-left var(--sr-layout-transition);
    }

    .sr-shell__main { min-width: 0; }

    .sr-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        display: flex;
        width: var(--sr-sidebar-width);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        overflow: hidden;
        background: var(--sr-color-brand-900);
        color: #fff;
        transition: width var(--sr-layout-transition), transform var(--sr-layout-transition);
        overscroll-behavior: contain;
    }

    .sr-sidebar__header {
        position: relative;
        flex: 0 0 auto;
        border-bottom: 1px solid rgb(255 255 255 / 10%);
    }

    .sr-sidebar__brand {
        display: flex;
        min-height: 6rem;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: .5rem;
        padding: 1.15rem 1.45rem;
    }

    .sr-sidebar__brand-logo {
        display: block;
        height: auto;
        padding: .42rem .58rem;
        border-radius: .55rem;
        background: #fff;
        box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
    }

    .sr-sidebar__brand-logo--full { width: 9.2rem; }
    .sr-sidebar__brand-logo--icon { display: none; width: 3.35rem; padding: .28rem; border-radius: .85rem; }
    .sr-sidebar__brand-text { width: auto; max-width: 100%; color: #fff; font-size: 1rem; font-weight: 820; line-height: 1.2; }
    .sr-sidebar__brand-mark {
        width: 3.35rem;
        height: 3.35rem;
        place-items: center;
        padding: 0;
        border-radius: .85rem;
        background: #fff;
        color: var(--sr-color-brand-800);
        font-size: 1rem;
        font-weight: 850;
        box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
    }

    .sr-sidebar__brand-meta {
        color: rgb(255 255 255 / 62%);
        font-size: .72rem;
        font-weight: 650;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .sr-sidebar__footer {
        margin-top: auto;
        padding: var(--sr-space-5);
        white-space: nowrap;
    }

    .sr-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        min-height: var(--sr-topbar-height);
        align-items: center;
        gap: var(--sr-space-4);
        padding: .7rem clamp(1rem, 3vw, 2.25rem);
        border-bottom: 1px solid var(--sr-color-border);
        background: rgb(255 255 255 / 96%);
        backdrop-filter: blur(14px);
    }

    .sr-topbar__menu {
        display: none;
        flex: 0 0 auto;
    }

    .sr-topbar__sidebar-toggle {
        display: inline-grid;
        flex: 0 0 auto;
        color: var(--sr-color-brand-700);
    }

    .sr-topbar__sidebar-toggle-icon {
        display: block;
        width: 1.22rem;
        height: 1.22rem;
    }

    .sr-topbar__sidebar-toggle-icon--expand { display: none; }
    html.sr-sidebar-collapsed .sr-topbar__sidebar-toggle-icon--collapse { display: none; }
    html.sr-sidebar-collapsed .sr-topbar__sidebar-toggle-icon--expand { display: block; }

    .sr-topbar__search {
        position: relative;
        width: min(38rem, 52vw);
        margin-left: 0;
    }

    .sr-topbar__actions {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: .85rem;
        margin-left: auto;
    }

    .sr-account {
        position: relative;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .sr-main {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: var(--sr-content-padding);
        transition: padding var(--sr-layout-transition);
    }

    .sr-page-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--sr-space-5);
        margin-bottom: var(--sr-space-6);
    }

    .sr-page-heading p {
        max-width: 50rem;
        margin-bottom: 0;
        color: var(--sr-color-text-muted);
    }

    .sr-page-heading__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        margin-bottom: .65rem;
        color: var(--sr-color-brand-600);
        font-size: .7rem;
        font-weight: 840;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .sr-page-heading__eyebrow::before {
        width: 1.45rem;
        height: .16rem;
        border-radius: 999px;
        background: var(--sr-color-accent-500);
        content: "";
    }

    .sr-page-heading--compact { display: block; margin-bottom: var(--sr-space-5); }

    .sr-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sr-space-4);
        margin-bottom: var(--sr-space-5);
    }

    .sr-content-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(21rem, .65fr);
        gap: var(--sr-space-5);
    }

    .sr-component-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sr-space-5);
    }

    .sr-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sr-space-4) var(--sr-space-5);
    }

    .sr-form-grid__wide { grid-column: 1 / -1; }
    .sr-stack { display: flex; flex-direction: column; gap: var(--sr-space-5); }
    .sr-stack--small { gap: var(--sr-space-3); }
    .sr-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-space-3); }

    .sr-install-shell {
        width: min(100% - 2rem, 86rem);
        margin: 0 auto;
        padding: clamp(1.25rem, 4vw, 3rem) 0;
    }

    .sr-install-header {
        display: flex;
        align-items: center;
        gap: var(--sr-space-4);
        margin-bottom: var(--sr-space-6);
    }

    .sr-install-header h1,
    .sr-install-header p { margin-bottom: 0; color: var(--sr-color-text-muted); }

    .sr-install-grid {
        display: grid;
        grid-template-columns: minmax(18rem, .55fr) minmax(0, 1.45fr);
        align-items: start;
        gap: var(--sr-space-5);
    }

    .sr-auth-shell {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: clamp(1.25rem, 4vw, 3rem);
        background: var(--sr-color-background);
    }

    .sr-auth-panel {
        width: min(100%, 38rem);
    }

    .sr-form-grid--compact { gap: .9rem; }

    .sr-backdrop { display: none; }
}

/* Source: resources/css/04-components-01-foundation.css */
@layer components {
    .sr-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    .sr-brand-logo { display: block; width: 10rem; height: auto; }
    .sr-brand-mark {
        display: inline-grid;
        width: 2.8rem;
        height: 2.8rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: var(--sr-radius-sm);
        background: var(--sr-color-brand-600);
        color: #fff;
        box-shadow: var(--sr-shadow-brand);
        font-size: .8rem;
        font-weight: 900;
        letter-spacing: .05em;
    }

    .sr-nav {
        position: relative;
        z-index: 1;
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        gap: .25rem;
        padding: var(--sr-space-4) var(--sr-space-3);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgb(255 255 255 / 18%) transparent;
    }

    .sr-nav__section {
        padding: 1.1rem .75rem .45rem;
        color: rgb(255 255 255 / 37%);
        font-size: .64rem;
        font-weight: 830;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .sr-nav__link {
        position: relative;
        display: flex;
        min-height: 2.85rem;
        align-items: center;
        gap: .78rem;
        padding: .68rem .78rem;
        border: 1px solid transparent;
        border-radius: .75rem;
        color: rgb(255 255 255 / 67%);
        font-size: .92rem;
        font-weight: 680;
        transition: background-color var(--sr-transition), color var(--sr-transition), border-color var(--sr-transition), transform var(--sr-transition);
    }

    .sr-nav__link:hover {
        background: rgb(255 255 255 / 7%);
        color: #fff;
    }

    .sr-nav__link.is-active {
        border-color: rgb(255 255 255 / 12%);
        background: rgb(255 255 255 / 10%);
        color: #fff;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
    }

    .sr-nav__link.is-disabled { cursor: default; opacity: .33; }
    .sr-nav__link.is-disabled:hover { background: transparent; transform: none; }

    .sr-card {
        padding: clamp(1.15rem, 2.5vw, 1.65rem);
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-lg);
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-sm);
    }

    .sr-card--soft { background: var(--sr-color-surface-soft); }
    .sr-card--table { padding: 0; overflow: hidden; }
    .sr-card--feature { border-color: var(--sr-color-border); }

    .sr-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sr-space-4);
        margin-bottom: var(--sr-space-5);
    }

    .sr-card__header p { margin-bottom: 0; color: var(--sr-color-text-muted); }
    .sr-card__header--padded { padding: 1.35rem 1.5rem 0; }

    .sr-button {
        display: inline-flex;
        min-height: 2.8rem;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        padding: .7rem 1.05rem;
        border: 1px solid transparent;
        border-radius: .72rem;
        background: transparent;
        color: var(--sr-color-text);
        font-weight: 750;
        line-height: 1;
        cursor: pointer;
        transition: background-color var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition), box-shadow var(--sr-transition), transform var(--sr-transition);
    }

    .sr-button:hover:not(:disabled) { transform: translateY(-1px); }
    .sr-button:active:not(:disabled) { transform: translateY(0); }
    .sr-button:disabled { cursor: not-allowed; opacity: .48; }

    .sr-button--primary {
        background: var(--sr-color-brand-600);
        color: #fff;
        box-shadow: var(--sr-shadow-brand);
    }

    .sr-button--primary:hover:not(:disabled) {
        background: var(--sr-color-brand-700);
        box-shadow: 0 13px 26px rgb(var(--sr-color-brand-600-rgb) / 20%);
    }

    .sr-button--secondary {
        border-color: var(--sr-color-border-strong);
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-button--secondary:hover:not(:disabled) {
        border-color: var(--sr-color-brand-500);
        color: var(--sr-color-brand-600);
    }

    .sr-button--ghost { color: var(--sr-color-brand-700); }
    .sr-button--ghost:hover:not(:disabled) { background: var(--sr-color-brand-50); }
    .sr-button--danger { background: var(--sr-color-accent-500); color: #fff; box-shadow: 0 10px 24px rgb(var(--sr-color-accent-500-rgb) / 16%); }
    .sr-button--accent { background: var(--sr-color-accent-500); color: #fff; box-shadow: 0 10px 24px rgb(var(--sr-color-accent-500-rgb) / 18%); }
    .sr-button--accent:hover:not(:disabled) { background: var(--sr-color-accent-600); box-shadow: 0 13px 28px rgb(var(--sr-color-accent-500-rgb) / 24%); }
    .sr-button--action { background: var(--sr-color-action-500); color: #fff; box-shadow: 0 10px 24px rgb(47 184 116 / 20%); }
    .sr-button--action:hover:not(:disabled) { background: var(--sr-color-action-600); box-shadow: 0 13px 28px rgb(47 184 116 / 26%); }
    .sr-button--small { min-height: 2.3rem; padding: .5rem .75rem; font-size: .82rem; }
    .sr-button--block { width: 100%; }

    .sr-icon-button {
        display: inline-grid;
        width: 2.65rem;
        height: 2.65rem;
        padding: 0;
        place-items: center;
        border: 1px solid var(--sr-color-border);
        border-radius: .75rem;
        background: var(--sr-color-surface);
        color: var(--sr-color-text-soft);
        box-shadow: var(--sr-shadow-xs);
        cursor: pointer;
        transition: border-color var(--sr-transition), color var(--sr-transition), background-color var(--sr-transition);
    }

    .sr-icon-button:hover { border-color: var(--sr-color-brand-200); background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }

    .sr-notice {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .9rem 1rem;
        border: 1px solid transparent;
        border-radius: var(--sr-radius-sm);
        margin-bottom: var(--sr-space-4);
        font-weight: 650;
    }
    .sr-notice .sr-icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .12rem; }
    .sr-notice__content { display: grid; gap: .18rem; min-width: 0; }
    .sr-notice__content span { font-size: .86rem; font-weight: 500; line-height: 1.45; color: inherit; opacity: .9; }

    .sr-notice--success { border-color: #b8e1cd; background: var(--sr-color-success-soft); color: var(--sr-color-success); }
    .sr-notice--danger { border-color: #efc4c6; background: var(--sr-color-danger-soft); color: var(--sr-color-danger); }
    .sr-notice--info { border-color: #c4deed; background: var(--sr-color-info-soft); color: var(--sr-color-info); }
    .sr-notice--warning { border-color: #f1dfb4; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }

    .sr-badge {
        display: inline-flex;
        min-height: 1.65rem;
        align-items: center;
        width: fit-content;
        padding: .25rem .58rem;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 820;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .sr-badge--success { background: var(--sr-color-success-soft); color: var(--sr-color-success); }
    .sr-badge--warning { background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-badge--danger { background: var(--sr-color-danger-soft); color: var(--sr-color-danger); }
    .sr-badge--neutral { background: #edf2f5; color: #60727e; }
    .sr-badge--brand { background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }

    .sr-status-dot { display: inline-block; width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: #aab8c1; box-shadow: 0 0 0 .25rem rgb(170 184 193 / 11%); }
    .sr-status-dot.is-success { background: var(--sr-color-success); box-shadow: 0 0 0 .25rem rgb(20 122 82 / 11%); }
    .sr-status-dot.is-danger { background: var(--sr-color-danger); box-shadow: 0 0 0 .25rem rgb(181 44 50 / 11%); }

    .sr-stat-card {
        --sr-stat-color: var(--sr-color-brand-600);
        position: relative;
        display: grid;
        min-height: 9.5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto 1fr;
        gap: .35rem .75rem;
        padding: 1.25rem;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-lg);
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-sm);
        transition: transform var(--sr-transition), box-shadow var(--sr-transition), border-color var(--sr-transition);
    }

    .sr-stat-card::before {
        position: absolute;
        top: 0;
        left: 1.25rem;
        width: 2.75rem;
        height: .18rem;
        border-radius: 0 0 999px 999px;
        background: var(--sr-stat-color);
        content: "";
    }

    .sr-stat-card:hover {
        transform: translateY(-2px);
        border-color: var(--sr-color-border-strong);
        box-shadow: 0 12px 30px rgb(17 24 32 / 8%);
    }
    .sr-stat-card--red { --sr-stat-color: var(--sr-color-accent-500); }
    .sr-stat-card--green { --sr-stat-color: var(--sr-color-success); }
    .sr-stat-card--navy { --sr-stat-color: var(--sr-color-brand-900); }

    .sr-stat-card__icon {
        display: grid;
        width: 2.6rem;
        height: 2.6rem;
        grid-column: 2;
        grid-row: 1 / span 2;
        place-items: center;
        border-radius: .8rem;
        background: var(--sr-color-surface-soft);
        color: var(--sr-stat-color);
    }

    .sr-stat-card__label { color: var(--sr-color-text-muted); font-size: .78rem; font-weight: 760; }
    .sr-stat-card__value { grid-column: 1; color: var(--sr-color-text); font-size: 2.25rem; line-height: 1; letter-spacing: -.04em; }
    .sr-stat-card__hint { align-self: end; grid-column: 1 / -1; color: var(--sr-color-text-muted); font-size: .8rem; }

    .sr-field { min-width: 0; }
    .sr-field__label { display: block; margin-bottom: .45rem; color: var(--sr-color-text); font-size: .8rem; font-weight: 760; }

    .sr-field__control {
        width: 100%;
        min-height: 2.95rem;
        padding: .72rem .82rem;
        border: 1px solid var(--sr-color-border-strong);
        border-radius: .7rem;
        background: var(--sr-color-surface);
        color: var(--sr-color-text);
        outline: 0;
        transition: border-color var(--sr-transition), box-shadow var(--sr-transition), background-color var(--sr-transition);
    }

    textarea.sr-field__control { min-height: 7rem; resize: vertical; }
    .sr-field__control:hover { border-color: #aec3cf; }
    .sr-field__control:focus { border-color: var(--sr-color-brand-500); box-shadow: 0 0 0 .23rem rgb(var(--sr-color-brand-600-rgb) / 11%); }
    .sr-field__control::placeholder { color: #9aabb6; }
    .sr-field__control:autofill { box-shadow: 0 0 0 1000px var(--sr-color-surface) inset; -webkit-text-fill-color: var(--sr-color-text); }
    .sr-field__control:-webkit-autofill { box-shadow: 0 0 0 1000px var(--sr-color-surface) inset; -webkit-text-fill-color: var(--sr-color-text); }

    .sr-field__help { display: block; margin-top: .38rem; color: var(--sr-color-text-muted); font-size: .72rem; }
    .sr-field__hint { display: block; margin-top: .38rem; color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.45; }
    .sr-field__error { display: block; margin-top: .38rem; color: var(--sr-color-danger); font-size: .74rem; font-weight: 700; }

    .sr-input-group { display: flex; }
    .sr-input-group .sr-field__control { border-radius: .7rem 0 0 .7rem; }
    .sr-input-group__button { padding: 0 .9rem; border: 1px solid var(--sr-color-border-strong); border-left: 0; border-radius: 0 .7rem .7rem 0; background: var(--sr-color-surface-soft); color: var(--sr-color-brand-700); font-size: .8rem; font-weight: 760; cursor: pointer; }

    .sr-form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sr-space-4);
        padding-top: var(--sr-space-5);
        border-top: 1px solid var(--sr-color-border);
    }

    .sr-form-actions__hint { color: var(--sr-color-text-muted); font-size: .8rem; }

    .sr-switch { display: inline-flex; min-height: 2.95rem; align-items: center; gap: .65rem; cursor: pointer; }
    .sr-switch input { position: absolute; opacity: 0; pointer-events: none; }
    .sr-switch__track { position: relative; width: 2.55rem; height: 1.4rem; border-radius: 999px; background: #cbd2d8; box-shadow: inset 0 0 0 1px rgb(80 98 112 / 8%); transition: background-color var(--sr-transition), box-shadow var(--sr-transition); }
    .sr-switch__track::after { position: absolute; top: .18rem; left: .18rem; width: 1.04rem; height: 1.04rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(8 45 69 / 18%); content: ""; transition: transform var(--sr-transition); }
    .sr-switch input:checked + .sr-switch__track { background: var(--sr-color-action-500); box-shadow: inset 0 0 0 1px rgb(23 123 85 / 8%); }
    .sr-switch input:checked + .sr-switch__track::after { transform: translateX(1.15rem); }
    .sr-switch input:focus-visible + .sr-switch__track { outline: 3px solid rgb(47 184 116 / 20%); outline-offset: 2px; }
    .sr-switch__label { font-size: .88rem; font-weight: 700; }

    .sr-table-wrap { width: 100%; overflow-x: auto; }
    .sr-table { width: 100%; min-width: 48rem; }
    .sr-table th { padding: .9rem 1.1rem; border-bottom: 1px solid var(--sr-color-border); background: #f7fafc; color: var(--sr-color-text-muted); font-size: .66rem; font-weight: 830; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
    .sr-table td { padding: 1rem 1.1rem; border-bottom: 1px solid #e8eef2; vertical-align: middle; }
    .sr-table tbody tr { transition: background-color var(--sr-transition); }
    .sr-table tbody tr:hover { background: #fbfdfe; }
    .sr-table tbody tr:last-child td { border-bottom: 0; }
    .sr-table__subline { display: block; margin-top: .12rem; color: var(--sr-color-text-muted); font-size: .8rem; }
    .sr-table__primary-link { color: inherit; text-decoration: none; }
    .sr-table__primary-link:hover { color: var(--sr-color-brand-700); }
    .sr-table__empty-link { display: inline-flex; align-items: center; gap: .42rem; padding: .34rem .72rem; border: 1px dashed rgb(22 83 141 / 26%); border-radius: 999px; color: var(--sr-color-text-muted); background: rgb(255 255 255 / 82%); text-decoration: none; font-size: .78rem; font-weight: 560; line-height: 1; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
    .sr-table__empty-link::before { content: ""; width: .38rem; height: .38rem; border-radius: 999px; background: currentColor; opacity: .72; }
    .sr-table__empty-link:hover { color: var(--sr-color-brand-700); border-color: rgb(22 83 141 / 42%); background: #fff; transform: translateY(-1px); }
    .sr-table__empty-link:focus-visible { outline: none; border-color: var(--sr-color-brand-600); box-shadow: 0 0 0 3px rgb(22 83 141 / 16%); }
    .sr-table__actions { text-align: right; }
    .sr-report-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .45rem; white-space: nowrap; }
    .sr-icon-button--table { width: 2.45rem; height: 2.45rem; }
    .sr-icon-button--danger { border-color: rgb(var(--sr-color-accent-500-rgb) / 24%); color: var(--sr-color-accent-600); }
    .sr-icon-button--danger:hover { border-color: rgb(var(--sr-color-accent-500-rgb) / 48%); background: rgb(var(--sr-color-accent-500-rgb) / 6%); color: var(--sr-color-accent-700); }

    .sr-user-cell { display: flex; align-items: center; gap: .75rem; }

    .sr-avatar {
        display: inline-grid;
        width: 2.6rem;
        height: 2.6rem;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid var(--sr-color-brand-100);
        border-radius: .75rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
        font-size: .78rem;
        font-weight: 850;
    }

    .sr-avatar--topbar {
        width: 3rem;
        height: 3rem;
        border: 0;
        border-radius: 50%;
        background: var(--sr-color-brand-600);
        color: #fff;
        box-shadow: 0 8px 20px rgb(var(--sr-color-brand-600-rgb) / 16%);
        transition: box-shadow var(--sr-transition), transform var(--sr-transition), background-color var(--sr-transition);
    }

    .sr-avatar--photo { overflow: hidden; padding: 0; background: #fff; color: transparent; }
    .sr-avatar__image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

    .sr-user-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        line-height: 0;
        cursor: pointer;
    }

    .sr-user-trigger:hover .sr-avatar--topbar {
        background: var(--sr-color-brand-700);
        box-shadow: 0 8px 22px rgb(var(--sr-color-brand-600-rgb) / 22%);
        transform: translateY(-1px);
    }

    .sr-user-trigger[aria-expanded="true"] .sr-avatar--topbar {
        box-shadow: 0 0 0 .22rem rgb(var(--sr-color-brand-600-rgb) / 13%);
    }

    .sr-user-dropdown {
        position: absolute;
        top: calc(100% + .65rem);
        right: 0;
        z-index: 90;
        width: min(19rem, calc(100vw - 2rem));
        padding: .55rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .9rem;
        background: var(--sr-color-surface);
        box-shadow: 0 18px 48px rgb(17 24 32 / 17%);
    }

    .sr-user-dropdown__profile {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .65rem;
    }

    .sr-user-dropdown__profile > div {
        display: grid;
        min-width: 0;
        gap: .08rem;
    }

    .sr-user-dropdown__profile strong {
        overflow: hidden;
        color: var(--sr-color-text);
        font-size: .9rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-user-dropdown__profile span:not(.sr-avatar) {
        color: var(--sr-color-text-muted);
        font-size: .75rem;
    }

    .sr-user-dropdown__divider {
        height: 1px;
        margin: .35rem .45rem;
        background: var(--sr-color-border);
    }

    .sr-user-dropdown form { margin: 0; }

    .sr-user-dropdown__action {
        display: flex;
        width: 100%;
        min-height: 2.65rem;
        align-items: center;
        gap: .7rem;
        padding: .65rem .75rem;
        border: 0;
        border-radius: .65rem;
        background: transparent;
        color: var(--sr-color-text);
        font: inherit;
        font-size: .84rem;
        font-weight: 720;
        text-align: left;
        cursor: pointer;
        transition: background-color var(--sr-transition), color var(--sr-transition);
    }

    .sr-user-dropdown__action:hover,
    .sr-user-dropdown__action:focus-visible {
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
        outline: 0;
    }

    .sr-user-dropdown form .sr-user-dropdown__action:hover,
    .sr-user-dropdown form .sr-user-dropdown__action:focus-visible {
        background: var(--sr-color-danger-soft);
        color: var(--sr-color-danger);
    }

    /* Navigationsmuster --------------------------------------------------
       sr-tabs: einzige horizontale Tab-Sprache im System.
       sr-view-switcher: reine Darstellungsumschaltung (z. B. Liste/Kalender). */
    .sr-tabs {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .sr-tabs__list {
        display: flex;
        width: 100%;
        max-width: 100%;
        align-items: stretch;
        gap: 1.7rem;
        overflow-x: auto;
        padding: 0 .1rem;
        border-bottom: 1px solid var(--sr-color-border-strong);
        margin-bottom: var(--sr-space-5);
        scrollbar-width: thin;
    }

    .sr-tabs__tab {
        position: relative;
        display: inline-flex;
        min-height: 3.05rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding: .78rem 0 .88rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--sr-color-text-muted);
        font-size: .83rem;
        font-weight: 650;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: color var(--sr-transition);
    }

    .sr-tabs__tab::after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 3px;
        border-radius: 0;
        background: transparent;
        content: '';
        transition: background-color var(--sr-transition);
    }

    .sr-tabs__tab:hover {
        color: var(--sr-color-brand-600);
    }

    .sr-tabs__tab:hover::after {
        background: var(--sr-color-brand-200);
    }

    .sr-tabs__tab:focus-visible {
        color: var(--sr-color-brand-700);
        outline: 2px solid var(--sr-color-brand-200);
        outline-offset: 3px;
    }

    .sr-tabs__tab.is-active {
        color: var(--sr-color-brand-700);
        font-weight: 760;
    }

    .sr-tabs__tab.is-active::after {
        background: var(--sr-color-brand-600);
    }

    .sr-tabs__tab .sr-icon { width: 1rem; height: 1rem; }
    .sr-tabs__count {
        display: inline-grid;
        min-width: 1.38rem;
        height: 1.38rem;
        place-items: center;
        padding: 0 .34rem;
        border-radius: 999px;
        background: #edf1f4;
        color: var(--sr-color-text-soft);
        font-size: .65rem;
        font-weight: 760;
    }

    .sr-tabs__tab.is-active .sr-tabs__count {
        background: var(--sr-color-brand-100);
        color: var(--sr-color-brand-700);
    }

    .sr-view-switcher {
        display: inline-flex;
        flex: 0 0 auto;
        gap: .2rem;
        padding: .26rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .78rem;
        background: var(--sr-color-surface-soft);
    }

    .sr-view-switcher__item {
        display: inline-flex;
        min-height: 2.45rem;
        align-items: center;
        gap: .42rem;
        padding: .52rem .78rem;
        border-radius: .56rem;
        color: var(--sr-color-text-muted);
        font-size: .79rem;
        font-weight: 730;
        text-decoration: none;
        transition: color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-view-switcher__item:hover,
    .sr-view-switcher__item:focus-visible {
        color: var(--sr-color-brand-700);
        outline: 0;
    }

    .sr-view-switcher__item.is-active {
        background: var(--sr-color-surface);
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-accordion { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); }
    .sr-accordion__item + .sr-accordion__item { border-top: 1px solid var(--sr-color-border); }
    .sr-accordion__item summary { padding: .95rem 1rem; background: var(--sr-color-surface-soft); font-weight: 740; cursor: pointer; }
    .sr-accordion__item[open] summary { color: var(--sr-color-brand-700); background: var(--sr-color-brand-50); }
    .sr-accordion__content { padding: 1rem; color: var(--sr-color-text-muted); }

    .sr-progress-list { display: grid; }
    .sr-progress-list__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--sr-color-border); }
    .sr-progress-list__item:last-child { border-bottom: 0; }
    .sr-progress-list__number { display: inline-grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .7rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); font-weight: 830; }
    .sr-progress-list__item:first-child .sr-progress-list__number { background: var(--sr-color-brand-600); color: #fff; box-shadow: 0 8px 18px rgb(var(--sr-color-brand-600-rgb) / 18%); }
    .sr-progress-list__item div { display: grid; }
    .sr-progress-list__item div span { color: var(--sr-color-text-muted); font-size: .8rem; }

    .sr-activity-card { align-self: start; padding: 0; overflow: hidden; }
    .sr-activity-card__header { margin: 0; padding: 1.25rem 1.35rem .95rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-activity-card__header h2 { font-size: 1.05rem; }
    .sr-activity-card__header p { margin-top: .15rem; font-size: .78rem; }
    .sr-activity-scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .sr-activity-scroll:focus-visible { outline: 3px solid rgb(var(--sr-color-brand-600-rgb) / 16%); outline-offset: -3px; }
    .sr-activity-list { display: grid; padding: .25rem 1.35rem .55rem; }
    .sr-activity-list__item { position: relative; display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 3.65rem; padding: .62rem 0; border-bottom: 1px solid #edf1f4; }
    .sr-activity-list__item:last-child { border-bottom: 0; }
    .sr-activity-list__marker { width: .45rem; height: .45rem; border-radius: 50%; background: var(--sr-color-success); box-shadow: 0 0 0 .22rem var(--sr-color-success-soft); }
    .sr-activity-list__copy { display: grid; min-width: 0; gap: .1rem; }
    .sr-activity-list__copy strong { overflow: hidden; font-size: .82rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .sr-activity-list__copy span { color: var(--sr-color-text-muted); font-size: .69rem; }
    .sr-activity-list__time { display: grid; justify-items: end; gap: .05rem; color: var(--sr-color-text-soft); font-size: .67rem; font-weight: 700; white-space: nowrap; }
    .sr-activity-list__time small { color: var(--sr-color-text-muted); font-size: .63rem; font-weight: 600; }

    .sr-empty-state { display: grid; min-height: 10rem; place-items: center; align-content: center; gap: .5rem; padding: var(--sr-space-6); text-align: center; }
    .sr-empty-state p { max-width: 32rem; margin-bottom: 0; color: var(--sr-color-text-muted); }
    .sr-empty-state--bordered { border: 1px dashed var(--sr-color-border-strong); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-soft); }
    .sr-error-state { min-height: 18rem; }

    .sr-dialog { width: min(100% - 2rem, 35rem); padding: 0; border: 0; border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow-md); }
    .sr-dialog--wide { width: min(100% - 2rem, 46rem); }
    .sr-dialog::backdrop { background: rgb(5 28 43 / 62%); backdrop-filter: blur(4px); }
    .sr-dialog__header, .sr-dialog__footer { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sr-space-4); padding: var(--sr-space-5); }
    .sr-dialog__header { border-bottom: 1px solid var(--sr-color-border); }
    .sr-dialog__header p { margin-bottom: 0; color: var(--sr-color-text-muted); }
    .sr-dialog__body { padding: var(--sr-space-5); }
    .sr-dialog__footer { align-items: center; justify-content: flex-end; border-top: 1px solid var(--sr-color-border); }

    .sr-global-search {
        position: relative;
    }

    .sr-global-search__mobile-toggle,
    .sr-global-search__mobile-close {
        display: none;
    }

    .sr-global-search__control {
        display: flex;
        min-height: 2.8rem;
        align-items: center;
        gap: .65rem;
        padding: 0 .8rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .72rem;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text-muted);
        transition: border-color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-global-search__control:focus-within {
        border-color: var(--sr-color-brand-500);
        background: var(--sr-color-surface);
        box-shadow: 0 0 0 .2rem rgb(var(--sr-color-brand-600-rgb) / 10%);
    }

    .sr-global-search__input {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--sr-color-text);
        font: inherit;
        font-size: .88rem;
    }

    .sr-global-search__input::placeholder { color: #8b959e; }

    .sr-global-search__shortcut {
        padding: .15rem .42rem;
        border: 1px solid var(--sr-color-border-strong);
        border-radius: .35rem;
        background: #fff;
        color: var(--sr-color-text-muted);
        font-size: .66rem;
        font-weight: 720;
        line-height: 1.35;
    }

    .sr-search-panel {
        position: absolute;
        top: calc(100% + .55rem);
        left: 0;
        z-index: 80;
        width: min(34rem, calc(100vw - 2rem));
        overflow: hidden;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-md);
        background: var(--sr-color-surface);
        box-shadow: 0 18px 48px rgb(17 24 32 / 17%);
    }

    .sr-search-panel__header {
        padding: .7rem .9rem;
        border-bottom: 1px solid var(--sr-color-border);
        color: var(--sr-color-text-muted);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .sr-search-results {
        display: grid;
        max-height: 22rem;
        overflow-y: auto;
        padding: .45rem;
    }

    .sr-search-result {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .75rem;
        padding: .72rem .75rem;
        border-radius: .62rem;
        color: var(--sr-color-text);
    }

    .sr-search-result:hover,
    .sr-search-result:focus-visible {
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
        outline: 0;
    }

    .sr-search-result__icon {
        display: grid;
        width: 2rem;
        height: 2rem;
        place-items: center;
        border-radius: .55rem;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-brand-600);
    }

    .sr-search-result__text {
        display: grid;
        line-height: 1.3;
    }

    .sr-search-result__text span {
        color: var(--sr-color-text-muted);
        font-size: .72rem;
    }

    .sr-search-result__key {
        color: var(--sr-color-text-muted);
        font-size: .72rem;
    }

    .sr-search-empty {
        padding: 1.25rem;
        color: var(--sr-color-text-muted);
        text-align: center;
        font-size: .82rem;
    }

    .sr-search-panel[hidden],
    .sr-search-result[hidden],
    .sr-search-empty[hidden] { display: none; }

    .sr-auth-card {
        width: min(100%, 31rem);
        padding: clamp(1.5rem, 4vw, 2.35rem);
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-xl);
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-md);
        margin: 0 auto;
    }

    .sr-auth-panel--wide .sr-auth-card { width: 100%; }

    .sr-auth-card__brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sr-space-4);
        padding-bottom: var(--sr-space-5);
        border-bottom: 1px solid var(--sr-color-border);
        margin-bottom: var(--sr-space-5);
    }

    .sr-auth-card__brand img { width: 8.8rem; }
    .sr-auth-card__brand div { display: grid; text-align: right; }
    .sr-auth-card__brand span { color: var(--sr-color-text-muted); font-size: .72rem; }
    .sr-auth-card__footnote { margin: var(--sr-space-5) 0 0; color: var(--sr-color-text-muted); text-align: center; font-size: .72rem; }

    .sr-form-section + .sr-form-section { padding-top: var(--sr-space-6); border-top: 1px solid var(--sr-color-border); }
    .sr-form-section__heading { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: var(--sr-space-5); }
    .sr-form-section__heading > span { display: inline-grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; background: var(--sr-color-brand-600); color: #fff; font-size: .78rem; font-weight: 830; }
    .sr-form-section__heading h2, .sr-form-section__heading p { margin-bottom: 0; }
    .sr-form-section__heading p { color: var(--sr-color-text-muted); }

    .sr-check-list { display: grid; gap: 1rem; margin-bottom: var(--sr-space-5); }
    .sr-check-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
    .sr-check-list__item strong { font-size: .8rem; }

    .sr-install-logo {
        width: 10rem;
        height: auto;
        padding: .55rem .7rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .8rem;
        background: #fff;
        box-shadow: var(--sr-shadow-sm);
    }



    .sr-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .sr-auth-card__brand--simple {
        justify-content: center;
        padding-bottom: 1.15rem;
        margin-bottom: 1.35rem;
    }

    .sr-auth-card__brand--simple img { width: 7.6rem; }

    .sr-auth-heading { margin-bottom: 1.25rem; text-align: center; }
    .sr-auth-heading h1 { margin-bottom: .35rem; font-size: clamp(1.45rem, 4vw, 1.8rem); }
    .sr-auth-heading p { margin: 0 auto; max-width: 27rem; color: var(--sr-color-text-muted); font-size: .82rem; }

    .sr-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
    .sr-field__label-row .sr-field__label { margin-bottom: .45rem; }
    .sr-auth-link,
    .sr-auth-back { color: var(--sr-color-brand-700); font-size: .74rem; font-weight: 740; }
    .sr-auth-back { display: block; margin-top: 1.15rem; text-align: center; }
}

/* Source: resources/css/04-components-02-reports-feedback.css */
@layer components {

    .sr-code-input {
        min-height: 4.2rem;
        text-align: center;
        font-size: 1.9rem;
        font-weight: 820;
        letter-spacing: .48em;
        padding-left: 1.2rem;
    }

    .sr-auth-meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; color: var(--sr-color-text-muted); font-size: .72rem; }
    .sr-auth-resend { margin-top: .8rem; }

    .sr-check { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
    .sr-check input { margin-top: .2rem; }
    .sr-check span { display: grid; gap: .18rem; }
    .sr-check strong { font-size: .8rem; }
    .sr-check small { color: var(--sr-color-text-muted); font-size: .72rem; }

    .sr-smtp-test {
        display: grid;
        gap: .9rem;
        margin-top: 1.5rem;
        padding: 1rem;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-md);
        background: var(--sr-color-surface-soft);
    }
    .sr-smtp-test > div:first-child { display: grid; gap: .2rem; }
    .sr-smtp-test > div:first-child span { color: var(--sr-color-text-muted); font-size: .75rem; }
    .sr-smtp-test__action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }



    .sr-table--compact { min-width: 38rem; }
    .sr-table--compact th, .sr-table--compact td { padding: .82rem 1rem; }

    .sr-report-filter {
        display: grid;
        grid-template-columns: minmax(18rem, 1fr) minmax(12rem, .3fr) auto;
        align-items: end;
        gap: var(--sr-space-4);
        margin-bottom: var(--sr-space-5);
        padding: 1rem 1.15rem;
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-report-filter__actions { display: flex; align-items: center; gap: .45rem; }
    .sr-report-table { min-width: 64rem; }
    .sr-report-table tbody tr.sr-report-table__row--draft { background: #fffcf6; }
    .sr-report-table tbody tr.sr-report-table__row--draft:hover { background: #fff8ed; }
    .sr-report-table tbody tr.sr-report-table__row--signed { background: #f7fdf9; }
    .sr-report-table tbody tr.sr-report-table__row--signed:hover { background: #eefaf3; }
    .sr-report-table tbody tr.sr-report-table__row--archived { background: #f6f8fa; color: #586675; }
    .sr-report-table tbody tr.sr-report-table__row--archived:hover { background: #eef2f5; }
    .sr-report-table tbody tr.sr-report-table__row--archived .sr-table__primary-link { color: #425365; }
    .sr-report-create-notice { width: min(100%, 76rem); margin: 0 auto 1rem; }
    .sr-icon-button--mail { color: var(--sr-color-brand-700); }
    .sr-icon-button--mail:hover { border-color: rgb(22 83 141 / 34%); background: var(--sr-color-brand-50); }
    .sr-icon-button--archive { color: #667688; }
    .sr-icon-button--archive:hover { border-color: #bdc8d2; background: #f1f4f7; color: #34495e; }

    .sr-empty-state__icon {
        display: grid;
        width: 3.2rem;
        height: 3.2rem;
        place-items: center;
        border-radius: .9rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
    }
    .sr-empty-state__icon .sr-icon { width: 1.45rem; height: 1.45rem; }

    .sr-report-editor { width: min(100%, 78rem); margin: 0 auto; }
    .sr-report-section { overflow: hidden; }
    .sr-report-section .sr-card__header { padding-bottom: 1.05rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-report-section .sr-card__header > div { min-width: 0; }

    .sr-section-kicker {
        display: inline-flex;
        margin-bottom: .45rem;
        color: var(--sr-color-brand-600);
        font-size: .67rem;
        font-weight: 850;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .sr-form-grid--report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sr-stack--report-fields { gap: 1.15rem; }
    .sr-report-textarea { min-height: 10rem; line-height: 1.55; }
    .sr-report-textarea--compact { min-height: 7.5rem; }

    .sr-field-with-unit { position: relative; }
    .sr-field-with-unit .sr-field__control { padding-right: 4.3rem; }
    .sr-field-with-unit > span {
        position: absolute;
        top: 50%;
        right: .85rem;
        color: var(--sr-color-text-muted);
        font-size: .8rem;
        font-weight: 750;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .sr-report-savebar {
        position: sticky;
        bottom: 1rem;
        z-index: 15;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sr-space-5);
        padding: 1rem 1.15rem;
        border: 1px solid var(--sr-color-border-strong);
        border-radius: var(--sr-radius-lg);
        background: rgb(255 255 255 / 96%);
        box-shadow: 0 18px 44px rgb(17 24 32 / 15%);
        backdrop-filter: blur(14px);
    }

    .sr-report-savebar > div { display: grid; gap: .18rem; }
    .sr-report-savebar strong { font-size: .9rem; }
    .sr-report-savebar > div span { color: var(--sr-color-text-muted); font-size: .75rem; }

    .sr-report-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .55fr);
        align-items: start;
        gap: var(--sr-space-5);
    }

    .sr-report-detail-grid > aside { position: sticky; top: calc(var(--sr-topbar-height) + 1.25rem); }

    .sr-report-lock-notice { display: flex; align-items: center; gap: .8rem; }
    .sr-report-lock-notice > .sr-icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
    .sr-report-lock-notice > div { display: grid; gap: .12rem; }
    .sr-report-lock-notice span { font-size: .78rem; font-weight: 620; }

    .sr-description-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-md);
        overflow: hidden;
    }

    .sr-description-grid > div { min-width: 0; padding: .9rem 1rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-description-grid > div:nth-child(odd) { border-right: 1px solid var(--sr-color-border); }
    .sr-description-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .sr-description-grid dt, .sr-description-list dt { margin-bottom: .22rem; color: var(--sr-color-text-muted); font-size: .68rem; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
    .sr-description-grid dd, .sr-description-list dd { margin: 0; color: var(--sr-color-text); font-weight: 700; overflow-wrap: anywhere; }

    .sr-description-list { display: grid; gap: .75rem; margin-top: 1.1rem; }
    .sr-description-list > div { padding-top: .75rem; border-top: 1px solid var(--sr-color-border); }

    .sr-report-copy { color: var(--sr-color-text-soft); line-height: 1.65; overflow-wrap: anywhere; }
    .sr-report-copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
    .sr-report-copy-block { min-width: 0; min-height: 12rem; padding: 1.4rem 1.5rem; }
    .sr-report-copy-block:nth-child(odd) { border-right: 1px solid var(--sr-color-border); }
    .sr-report-copy-block:nth-child(-n + 2) { border-bottom: 1px solid var(--sr-color-border); }
    .sr-report-copy-block h3 { margin-bottom: .75rem; }
    .sr-report-copy-block--internal { background: #fbf8f0; }
    .sr-muted { color: var(--sr-color-text-muted); font-weight: 520; }

    .sr-report-customer-card__company { display: block; margin-bottom: .35rem; font-size: 1.05rem; }
    .sr-report-customer-card address { color: var(--sr-color-text-soft); font-style: normal; line-height: 1.55; }

    .sr-signature-card { scroll-margin-top: calc(var(--sr-topbar-height) + 1rem); }
    .sr-signature-pad { overflow: hidden; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-md); background: #fff; }
    .sr-signature-pad__header { display: flex; min-height: 2.8rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .6rem .45rem .85rem; border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface-soft); }
    .sr-signature-pad__header > span { color: var(--sr-color-text-muted); font-size: .72rem; font-weight: 750; }
    .sr-signature-pad canvas { display: block; width: 100%; height: clamp(10rem, 24vw, 13rem); background: #fff; cursor: crosshair; touch-action: none; }

    .sr-check-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem; color: var(--sr-color-text-soft); font-size: .78rem; line-height: 1.45; cursor: pointer; }
    .sr-check-row input { width: 1.1rem; height: 1.1rem; margin-top: .08rem; accent-color: var(--sr-color-brand-600); }

    .sr-signed-card__check { width: 2rem; height: 2rem; padding: .35rem; border-radius: 50%; background: var(--sr-color-success-soft); color: var(--sr-color-success); }
    .sr-signed-card__image { display: grid; min-height: 9rem; place-items: center; padding: .8rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: #fff; }
    .sr-signed-card__image img { display: block; width: 100%; max-height: 12rem; object-fit: contain; }

    .sr-report-reopen-callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.15rem; border-color: var(--sr-color-border-strong); box-shadow: var(--sr-shadow-xs); }
    .sr-report-reopen-callout--aside { margin-top: 0; }
    .sr-report-reopen-callout__icon { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; border-radius: .9rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-report-reopen-callout__icon .sr-icon { width: 1.25rem; height: 1.25rem; }
    .sr-report-reopen-callout__copy { display: grid; gap: .18rem; min-width: 0; }
    .sr-report-reopen-callout__copy strong { font-size: .92rem; }
    .sr-report-reopen-callout__copy span { color: var(--sr-color-text-muted); font-size: .78rem; line-height: 1.45; }
    .sr-report-reopen-callout__button { justify-self: end; white-space: nowrap; }

    .sr-report-reopen-layer { position: fixed; inset: 0; z-index: 132; display: grid; place-items: center; padding: 1rem; }
    .sr-report-reopen-layer[hidden] { display: none; }
    .sr-report-reopen-backdrop { position: absolute; inset: 0; }
    .sr-report-reopen-modal { position: relative; z-index: 1; width: min(100%, 34rem); max-height: min(88dvh, 42rem); overflow: auto; border: 1px solid var(--sr-color-border); border-radius: 1rem; background: #fff; box-shadow: 0 30px 90px rgb(15 31 46 / 30%); }
    .sr-report-reopen-modal__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-report-reopen-modal__header h3 { margin: .15rem 0 .25rem; font-size: 1.12rem; }
    .sr-report-reopen-modal__header p { margin: 0; color: var(--sr-color-text-muted); font-size: .8rem; line-height: 1.5; }
    .sr-report-reopen-modal__form { display: grid; gap: .9rem; padding: 1rem; }
    .sr-report-reopen-modal__form textarea { min-height: 8rem; }
    .sr-report-reopen-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
    body.sr-report-reopen-open { overflow: hidden; }



    /* Globale Interaktionsfläche für Suche, Modale und Bereichsauswahl. Die
       einzelnen Komponenten definieren nur noch Position und Z-Index. */
    .sr-overlay-backdrop {
        border: 0;
        background: var(--sr-overlay-backdrop-color);
        -webkit-backdrop-filter: blur(var(--sr-overlay-backdrop-blur));
        backdrop-filter: blur(var(--sr-overlay-backdrop-blur));
        cursor: default;
    }



    .sr-inline-form { display: inline-flex; margin: 0; }
    .sr-report-editor { width: min(100%, 92rem); }
    .sr-report-heading { width: min(100%, 92rem); margin-inline: auto; }
    .sr-report-heading > .sr-cluster { justify-content: flex-end; }

    .sr-report-jumpnav {
        position: sticky;
        top: calc(var(--sr-topbar-height) + .65rem);
        z-index: 18;
        display: flex;
        width: min(100%, 92rem);
        gap: .35rem;
        margin: 0 auto var(--sr-space-5);
        padding: .45rem;
        overflow-x: auto;
        border: 1px solid var(--sr-color-border-strong);
        border-radius: var(--sr-radius-lg);
        background: rgb(255 255 255 / 94%);
        box-shadow: var(--sr-shadow-sm);
        backdrop-filter: blur(14px);
        scrollbar-width: thin;
    }
    .sr-report-jumpnav a {
        flex: 1 0 auto;
        padding: .65rem .8rem;
        border-radius: .65rem;
        color: var(--sr-color-text-soft);
        font-size: .72rem;
        font-weight: 780;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }
    .sr-report-jumpnav a:hover { background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-report-section { scroll-margin-top: calc(var(--sr-topbar-height) + 6rem); }
    .sr-report-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sr-space-5); }
    .sr-report-number-chip {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: .45rem;
        padding: .55rem .75rem;
        border: 1px solid var(--sr-color-border);
        border-radius: 999px;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text-muted);
        font-size: .7rem;
        font-weight: 730;
    }
    .sr-report-number-chip strong { color: var(--sr-color-brand-700); font-size: .8rem; }
    .sr-report-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .sr-report-textarea--work { min-height: 14rem; }
    .sr-report-textarea--small { min-height: 5.5rem; }
    .sr-report-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.2rem; }

    .sr-repeater-toolbar {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) auto;
        align-items: end;
        gap: .75rem;
        margin-bottom: 1rem;
        padding: .9rem;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-md);
        background: var(--sr-color-surface-soft);
    }
    .sr-repeater-list { display: grid; gap: .65rem; }
    .sr-repeater-empty {
        padding: 1.1rem;
        border: 1px dashed var(--sr-color-border-strong);
        border-radius: var(--sr-radius-md);
        color: var(--sr-color-text-muted);
        font-size: .78rem;
        text-align: center;
    }
    .sr-repeater-row {
        position: relative;
        display: grid;
        align-items: end;
        gap: .65rem;
        padding: .85rem;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-md);
        background: #fff;
        box-shadow: var(--sr-shadow-xs);
    }
    .sr-repeater-row__number {
        display: grid;
        width: 2rem;
        height: 2rem;
        place-items: center;
        align-self: center;
        border-radius: .6rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
        font-size: .72rem;
        font-weight: 850;
    }
    .sr-service-row {
        grid-template-columns: 2.25rem minmax(8rem, .75fr) minmax(13rem, 1.7fr) 6.5rem 5.5rem 7rem 7.2rem 2.4rem;
        grid-template-areas:
            "number category description quantity unit price total remove"
            "number . detail detail detail . . .";
    }
    .sr-service-row > .sr-repeater-row__number { grid-area: number; }
    .sr-service-row > .sr-field:nth-child(2) { grid-area: category; }
    .sr-service-row__description { grid-area: description; }
    .sr-service-row > .sr-field:nth-child(4) { grid-area: quantity; }
    .sr-service-row > .sr-field:nth-child(5) { grid-area: unit; }
    .sr-service-row__detail { grid-area: detail; }
    .sr-service-row > .sr-field:nth-child(7) { grid-area: price; }
    .sr-service-row > .sr-line-total { grid-area: total; }
    .sr-service-row > .sr-repeater-remove { grid-area: remove; }

    .sr-material-row {
        grid-template-columns: 2.25rem 6.5rem 5.5rem minmax(15rem, 1fr) 7rem 7.2rem 2.4rem;
    }
    .sr-material-row__description { min-width: 0; }
    .sr-repeater-row .sr-field__label { font-size: .64rem; }
    .sr-repeater-row .sr-field__control { min-height: 2.55rem; padding: .58rem .68rem; font-size: .78rem; }
    .sr-repeater-remove { align-self: center; color: var(--sr-color-danger); font-size: 1.3rem; }
    .sr-line-total { display: grid; align-self: stretch; align-content: center; gap: .22rem; padding: .45rem .65rem; border-radius: .55rem; background: var(--sr-color-surface-soft); }
    .sr-line-total span { color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 780; text-transform: uppercase; }
    .sr-line-total strong { font-size: .78rem; white-space: nowrap; }
    .sr-report-status-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
    .sr-report-status-checks .sr-check-row { padding: .9rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-soft); }
    .sr-report-status-checks small { display: block; margin-top: .15rem; color: var(--sr-color-text-muted); }
    .sr-material-notes { margin-top: 1rem; }

    .sr-signature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .sr-signature-block { display: grid; min-width: 0; gap: .65rem; padding: 1rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-soft); }
    .sr-signature-block--signed { align-content: start; }
    .sr-signature-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; }
    .sr-signature-meta span { color: var(--sr-color-text-muted); }
    .sr-signature-acceptance { margin-top: 1rem; padding: 1rem; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-md); background: #fff; }
    .sr-signature-acceptance small { display: block; margin-top: .18rem; color: var(--sr-color-text-muted); }
    .sr-signature-finalize {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1rem;
        padding: 1rem;
        border-radius: var(--sr-radius-md);
        background: var(--sr-color-brand-50);
    }
    .sr-signature-finalize > div { display: grid; gap: .18rem; }
    .sr-signature-finalize > div span { color: var(--sr-color-text-muted); font-size: .73rem; }

    .sr-report-editor .sr-field__control:disabled { border-color: var(--sr-color-border); background: #f7f9fb; color: var(--sr-color-text); -webkit-text-fill-color: var(--sr-color-text); }
    .sr-report-editor input[type="checkbox"]:disabled { opacity: .75; }



    .sr-report-heading { align-items: flex-end; }
    .sr-report-heading__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: .55rem; }
    .sr-report-heading__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; }
    .sr-save-state { display: inline-flex; align-items: center; gap: .45rem; color: var(--sr-color-text-muted); font-size: .75rem; font-weight: 680; }
    .sr-save-state__dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--sr-color-success); box-shadow: 0 0 0 .22rem var(--sr-color-success-soft); }
    .sr-save-state[data-state="dirty"] .sr-save-state__dot { background: var(--sr-color-warning); box-shadow: 0 0 0 .22rem var(--sr-color-warning-soft); }
    .sr-save-state[data-state="saving"] .sr-save-state__dot { background: var(--sr-color-brand-500); box-shadow: 0 0 0 .22rem var(--sr-color-brand-100); animation: sr-save-pulse 1s ease-in-out infinite; }
    .sr-save-state[data-state="error"] { color: var(--sr-color-danger); }
    .sr-save-state[data-state="error"] .sr-save-state__dot { background: var(--sr-color-danger); box-shadow: 0 0 0 .22rem #fdebec; }
    @keyframes sr-save-pulse { 50% { opacity: .35; transform: scale(.8); } }

    .sr-report-editor { width: min(100%, 96rem); }
    .sr-report-workspace { display: grid; grid-template-columns: minmax(15.5rem, 18rem) minmax(0, 1fr); align-items: start; gap: 1.15rem; }
    .sr-report-step-content { display: grid; min-width: 0; gap: 1rem; }
    .sr-report-editor.is-step-mode .sr-report-section[hidden] { display: none; }

    .sr-report-stepper { position: sticky; top: calc(var(--sr-topbar-height) + 1rem); z-index: 12; min-width: 0; }
    .sr-report-stepper__panel { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: rgb(255 255 255 / 96%); box-shadow: var(--sr-shadow-sm); backdrop-filter: blur(14px); }
    .sr-report-stepper__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .22rem .6rem; padding: 1rem; border-bottom: 1px solid var(--sr-color-border); background: linear-gradient(145deg, #fff, var(--sr-color-surface-soft)); }
    .sr-report-stepper__header > strong { min-width: 0; overflow: hidden; color: var(--sr-color-text); font-size: .96rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-stepper__header > .sr-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .sr-report-stepper__eyebrow { color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .sr-report-stepper__nav { display: grid; padding: .55rem; }
    .sr-report-step { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; padding: .78rem .65rem; border: 0; border-radius: .75rem; background: transparent; color: var(--sr-color-text-soft); text-align: left; cursor: pointer; transition: background .16s ease, color .16s ease, transform .16s ease; }
    .sr-report-step:hover { background: var(--sr-color-surface-soft); color: var(--sr-color-text); }
    .sr-report-step.is-active { background: var(--sr-color-brand-50); color: var(--sr-color-brand-800); box-shadow: none; }
    .sr-report-step__status { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--sr-color-border-strong); border-radius: 999px; background: #fff; color: var(--sr-color-text-muted); font-size: .65rem; font-weight: 850; }
    .sr-report-step[data-status="partial"] .sr-report-step__status { border-color: #e4b04f; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-report-step[data-status="complete"] .sr-report-step__status { border-color: var(--sr-color-success); background: var(--sr-color-success); color: #fff; }
    .sr-report-step[data-status="complete"] .sr-report-step__status span { font-size: 0; }
    .sr-report-step[data-status="complete"] .sr-report-step__status span::after { content: "✓"; font-size: .82rem; }
    .sr-report-step__copy { display: grid; min-width: 0; gap: .13rem; }
    .sr-report-step__copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-step__copy small { overflow: hidden; color: var(--sr-color-text-muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-step__label { color: var(--sr-color-text-muted); font-size: .6rem; font-weight: 760; white-space: nowrap; }
    .sr-report-step[data-status="partial"] .sr-report-step__label { color: var(--sr-color-warning); }
    .sr-report-step[data-status="complete"] .sr-report-step__label { color: var(--sr-color-success); }
    .sr-report-stepper__progress { display: grid; gap: .55rem; padding: .85rem 1rem; border-top: 1px solid var(--sr-color-border); background: var(--sr-color-surface-soft); }
    .sr-report-stepper__progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .sr-report-stepper__progress strong, .sr-report-stepper__progress span { font-size: .66rem; }
    .sr-report-stepper__progress span { color: var(--sr-color-text-muted); font-weight: 750; }
    .sr-report-progressbar { overflow: hidden; height: .38rem; border-radius: 999px; background: var(--sr-color-brand-100); }
    .sr-report-progressbar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sr-color-success); transition: width .24s ease; }
    .sr-report-stepper__save-info { display: grid; gap: .2rem; padding: .8rem 1rem; border-top: 1px solid var(--sr-color-border); color: var(--sr-color-text-soft); font-size: .68rem; }
    .sr-report-stepper__save-info small { color: var(--sr-color-text-muted); }
    .sr-report-stepper__mobile-current { display: none; }

    .sr-report-section { min-height: 34rem; }
    .sr-report-step-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: #fff; box-shadow: var(--sr-shadow-xs); }
    .sr-report-step-actions__position { display: grid; justify-items: center; gap: .12rem; color: var(--sr-color-text-soft); text-align: center; }
    .sr-report-step-actions__position span { font-size: .75rem; font-weight: 800; }
    .sr-report-step-actions__position small { color: var(--sr-color-text-muted); font-size: .66rem; }
    .sr-report-step-actions [hidden] { display: none; }



    /* Ruhige, einspaltige Rapport-Arbeitsansicht. */
    .sr-report-heading--workspace,
    .sr-report-editor,
    .sr-report-lock-notice,
    .sr-report-reopen-callout {
        width: min(100%, 82rem);
        margin-right: auto;
        margin-left: auto;
    }
    .sr-report-heading--workspace { align-items: center; margin-bottom: 1rem; }
    .sr-report-heading__main { min-width: 0; }
    .sr-report-heading__titleline { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
    .sr-report-heading__titleline h1 { margin: 0; }
    .sr-report-heading--workspace .sr-page-heading__eyebrow { margin-bottom: .35rem; }
    .sr-report-heading--workspace .sr-report-heading__meta { margin-top: .35rem; }
    .sr-report-editor { display: grid; gap: .75rem; }
    .sr-report-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 19rem); align-items: center; gap: 1.25rem; padding: .85rem 1rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: #fff; box-shadow: var(--sr-shadow-xs); }
    .sr-report-overview__copy { display: grid; gap: .16rem; }
    .sr-report-overview__copy strong { font-size: .82rem; }
    .sr-report-overview__copy span { color: var(--sr-color-text-muted); font-size: .7rem; }
    .sr-report-overview__progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; }
    .sr-report-overview__progress > span { color: var(--sr-color-text-muted); font-size: .7rem; font-weight: 800; }
    .sr-report-accordion { display: grid; gap: .6rem; min-width: 0; }
    .sr-report-accordion__item { min-width: 0; scroll-margin-top: calc(var(--sr-topbar-height) + 1rem); }
    .sr-report-accordion__trigger { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem; align-items: center; gap: .8rem; width: 100%; min-height: 4.15rem; padding: .7rem 1rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-lg); background: #fff; color: var(--sr-color-text); box-shadow: var(--sr-shadow-xs); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
    .sr-report-accordion__trigger:hover { border-color: var(--sr-color-border-strong); background: var(--sr-color-surface-soft); }
    .sr-report-accordion__trigger:focus-visible { outline: 3px solid var(--sr-color-brand-100); outline-offset: 2px; }
    .sr-report-accordion__item.is-active .sr-report-accordion__trigger { border-color: var(--sr-color-brand-500); background: var(--sr-color-brand-50); box-shadow: 0 0 0 1px rgb(27 100 163 / 8%); }
    .sr-report-accordion__copy { display: grid; min-width: 0; gap: .12rem; }
    .sr-report-accordion__copy strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-accordion__copy small { overflow: hidden; color: var(--sr-color-text-muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-accordion__chevron { color: var(--sr-color-text-muted); font-size: 1rem; line-height: 1; transition: transform .18s ease; }
    .sr-report-accordion__item.is-active .sr-report-accordion__chevron { transform: rotate(180deg); }
    .sr-report-accordion__trigger[data-status="partial"] .sr-report-step__status { border-color: #e4b04f; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-report-accordion__trigger[data-status="complete"] .sr-report-step__status { border-color: var(--sr-color-success); background: var(--sr-color-success); color: #fff; }
    .sr-report-accordion__trigger[data-status="complete"] .sr-report-step__status span { font-size: 0; }
    .sr-report-accordion__trigger[data-status="complete"] .sr-report-step__status span::after { content: "✓"; font-size: .82rem; }
    .sr-report-accordion__trigger[data-status="partial"] .sr-report-step__label { color: var(--sr-color-warning); }
    .sr-report-accordion__trigger[data-status="complete"] .sr-report-step__label { color: var(--sr-color-success); }
    .sr-report-accordion__trigger.is-active .sr-report-step__label { font-weight: 850; }
    .sr-report-accordion__item .sr-report-section { min-height: 0; margin-top: .45rem; padding: 1.15rem; border-color: var(--sr-color-border); box-shadow: var(--sr-shadow-sm); }
    .sr-report-accordion__item .sr-report-section[hidden] { display: none; }
    .sr-report-accordion__item .sr-report-section .sr-card__header { padding-bottom: .85rem; }
    .sr-report-accordion__item .sr-report-section .sr-card__header h2 { font-size: 1rem; }
    .sr-report-accordion__item .sr-report-section .sr-card__header p { margin-top: .18rem; font-size: .8rem; }
    .sr-report-step-actions { margin: .05rem 0 .15rem; padding: .7rem; border-color: transparent; background: transparent; box-shadow: none; }
    .sr-report-step-actions__position span { color: var(--sr-color-text-muted); }



    /* App-artiger Rapport-Multistep mit Bottom-Dock. */
    .sr-report-workflow-page {
        --sr-report-workflow-width: 76rem;
        --sr-report-dock-width: 84rem;
    }
    .sr-report-workflow-page .sr-main { padding-bottom: 10.5rem; }
    .sr-report-heading--compact-workflow,
    .sr-report-create-notice,
    .sr-report-editor--multistep,
    .sr-report-workflow-page .sr-report-lock-notice,
    .sr-report-workflow-page .sr-report-reopen-callout {
        width: min(100%, var(--sr-report-workflow-width));
        margin-right: auto;
        margin-left: auto;
        transition: width var(--sr-layout-transition);
    }
    @media (min-width: 58.01rem) {
        html.sr-sidebar-collapsed .sr-report-workflow-page {
            --sr-report-workflow-width: 94rem;
            --sr-report-dock-width: 94rem;
        }
    }
    .sr-report-heading--compact-workflow { align-items: center; margin-bottom: 1rem; }
    .sr-report-heading--compact-workflow .sr-page-heading__eyebrow { margin-bottom: .25rem; }
    .sr-report-heading--compact-workflow .sr-report-heading__titleline { gap: .6rem; }
    .sr-report-heading--compact-workflow h1 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
    .sr-report-heading--compact-workflow .sr-report-heading__meta { margin-top: .25rem; }
    .sr-report-heading__overview { min-height: 2.5rem; }

    .sr-report-editor--multistep { display: grid; gap: 1rem; padding-bottom: 7.75rem; }
    .sr-report-editor--multistep .sr-report-step-panel { min-height: 0; padding: 1.15rem 1.25rem; border-color: var(--sr-color-border); box-shadow: var(--sr-shadow-sm); }
    .sr-report-editor--multistep .sr-report-step-panel[hidden] { display: none; }
    .sr-report-editor--multistep .sr-card__header { margin-bottom: 1rem; padding-bottom: .8rem; }
    .sr-report-editor--multistep .sr-card__header h2 { margin-bottom: .1rem; font-size: 1.08rem; }
    .sr-report-editor--multistep .sr-card__header p { font-size: .8rem; }
    .sr-form-grid--dense { gap: .72rem 1rem; }
    .sr-stack--compact { gap: .8rem; }
    .sr-report-editor--multistep .sr-field__label { margin-bottom: .3rem; font-size: .69rem; }
    .sr-report-editor--multistep .sr-field__control { min-height: 2.75rem; padding: .56rem .72rem; font-size: .82rem; }
    .sr-report-editor--multistep textarea.sr-field__control { padding-top: .68rem; }
    .sr-report-editor--multistep .sr-report-textarea--work { min-height: 9rem; }
    .sr-report-editor--multistep .sr-report-textarea--compact { min-height: 5.8rem; }
    .sr-report-editor--multistep .sr-report-textarea--small { min-height: 4.5rem; }
    .sr-report-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .85rem; }

    .sr-inline-details { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: var(--sr-color-surface-soft); }
    .sr-inline-details summary { padding: .7rem .85rem; color: var(--sr-color-brand-700); font-size: .75rem; font-weight: 760; cursor: pointer; }
    .sr-inline-details[open] summary { border-bottom: 1px solid var(--sr-color-border); }
    .sr-inline-details > .sr-field { padding: .8rem; }

    .sr-position-launcher { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; padding: .85rem .95rem; border: 1px dashed var(--sr-color-border-strong); border-radius: var(--sr-radius-md); background: linear-gradient(135deg, #fff, var(--sr-color-surface-soft)); }
    .sr-position-launcher__copy { display: grid; min-width: 0; gap: .18rem; }
    .sr-position-launcher__copy strong { font-size: .78rem; }
    .sr-position-launcher__copy span { color: var(--sr-color-text-muted); font-size: .66rem; line-height: 1.4; }
    .sr-position-launcher__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
    .sr-position-launcher__actions .sr-button { min-height: 2.45rem; }

    .sr-choice-layer { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 1rem; }
    .sr-choice-layer[hidden] { display: none; }
    .sr-choice-modal-backdrop { position: absolute; inset: 0; }
    .sr-choice-modal { position: relative; z-index: 1; display: flex; width: min(100%, 34rem); max-height: min(78dvh, 42rem); flex-direction: column; padding: .75rem; overflow: hidden; border: 1px solid var(--sr-color-border-strong); border-radius: 1rem; background: #fff; box-shadow: 0 24px 70px rgb(17 24 32 / 28%); }
    .sr-choice-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .15rem .7rem; }
    .sr-choice-modal__header > div { display: grid; gap: .08rem; }
    .sr-choice-modal__header small { color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 760; }
    .sr-choice-modal__header h3 { margin: 0; font-size: 1rem; }
    .sr-choice-modal__search { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: center; gap: .55rem; margin-bottom: .55rem; padding: .55rem .7rem; border: 1px solid var(--sr-color-border); border-radius: .7rem; background: var(--sr-color-surface-soft); }
    .sr-choice-modal__search .sr-icon { color: var(--sr-color-text-muted); }
    .sr-choice-modal__search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sr-color-text); font: inherit; font-size: .8rem; }
    .sr-choice-modal__list { display: grid; flex: 1 1 auto; gap: .35rem; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
    .sr-choice-modal__item { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; gap: .75rem; width: 100%; padding: .65rem .7rem; border: 1px solid var(--sr-color-border); border-radius: .7rem; background: #fff; color: var(--sr-color-text); text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
    .sr-choice-modal__item:hover, .sr-choice-modal__item:focus-visible { border-color: var(--sr-color-brand-400); background: var(--sr-color-brand-50); transform: translateY(-1px); }
    .sr-choice-modal__item:disabled { opacity: .62; cursor: not-allowed; }
    .sr-choice-modal__item:disabled:hover { border-color: var(--sr-color-border); background: #fff; transform: none; }
    .sr-choice-modal__item[hidden] { display: none; }
    .sr-choice-modal__item > span:first-child { display: grid; min-width: 0; gap: .12rem; }
    .sr-choice-modal__item strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-choice-modal__item small { overflow: hidden; color: var(--sr-color-text-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-choice-modal__item > span:last-child { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); font-size: 1rem; font-weight: 750; }
    .sr-choice-modal__no-results, .sr-choice-modal__empty { padding: 1.35rem 1rem; border: 1px dashed var(--sr-color-border-strong); border-radius: .75rem; color: var(--sr-color-text-muted); text-align: center; }
    .sr-choice-modal__no-results[hidden] { display: none; }
    .sr-choice-modal__empty { display: grid; justify-items: center; gap: .32rem; }
    .sr-choice-modal__empty .sr-icon { width: 1.5rem; height: 1.5rem; color: var(--sr-color-brand-600); }
    .sr-choice-modal__empty strong { color: var(--sr-color-text); font-size: .78rem; }
    .sr-choice-modal__empty span { max-width: 26rem; font-size: .68rem; line-height: 1.45; }
    .sr-choice-modal__footer-note { margin-top: .55rem; padding: .55rem .65rem; border-radius: .65rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-800); font-size: .62rem; line-height: 1.4; text-align: center; }
    body.sr-choice-modal-open { overflow: hidden; }

    .sr-position-list { display: grid; gap: .55rem; }
    .sr-position-list.is-sorting { user-select: none; }
    .sr-position-list.has-expanded-card .sr-position-card:not(.is-expanded):not(.is-dragging) { opacity: .5; filter: saturate(.72); transform: scale(.995); }
    .sr-position-list.has-expanded-card .sr-position-card:not(.is-expanded):not(.is-dragging):hover,
    .sr-position-list.has-expanded-card .sr-position-card:not(.is-expanded):not(.is-dragging):focus-within { opacity: .72; filter: saturate(.88); }
    .sr-position-list.has-expanded-card .sr-position-card[data-sr-check-row-state]:not(.is-expanded) { opacity: .82; filter: none; }
    .sr-position-card { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: #fff; box-shadow: 0 2px 8px rgb(17 24 32 / 4%); transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease, transform .16s ease; }
    .sr-position-card.is-expanded { position: relative; z-index: 2; border-color: var(--sr-color-brand-300); box-shadow: 0 14px 34px rgb(var(--sr-color-brand-900-rgb) / 10%), 0 0 0 2px var(--sr-color-brand-50); }
    .sr-position-card.is-dragging { overflow: hidden; opacity: 1; border-color: var(--sr-color-brand-400); box-shadow: 0 24px 56px rgb(var(--sr-color-brand-900-rgb) / 24%), 0 0 0 2px rgb(var(--sr-color-brand-600-rgb) / 10%); transform: rotate(.12deg) scale(1.008); }
    .sr-position-card-placeholder { position: relative; display: grid; min-height: 4rem; place-items: center; overflow: hidden; border: 2px dashed var(--sr-color-brand-300); border-radius: var(--sr-radius-md); background: linear-gradient(135deg, rgb(236 246 255 / 84%), rgb(247 251 255 / 94%)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 75%); animation: sr-position-placeholder-pulse 1.2s ease-in-out infinite alternate; }
    .sr-position-card-placeholder::after { padding: .35rem .65rem; border-radius: 999px; background: #fff; color: var(--sr-color-brand-700); box-shadow: 0 4px 14px rgb(var(--sr-color-brand-600-rgb) / 10%); content: "Hier einfügen"; font-size: .65rem; font-weight: 800; letter-spacing: .02em; }
    @keyframes sr-position-placeholder-pulse { from { border-color: var(--sr-color-brand-200); } to { border-color: var(--sr-color-brand-500); } }
    body.sr-position-dragging { cursor: grabbing; user-select: none; }
    .sr-position-card__head { display: grid; grid-template-columns: 1.45rem 2.55rem minmax(0, 1fr) 6.5rem 2.35rem; align-items: center; gap: .55rem; min-height: 4rem; padding: .5rem .65rem; }
    .sr-position-card__drag, .sr-position-card__drag-spacer { width: 1.25rem; height: 2rem; }
    .sr-position-card__drag { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: .45rem; background: transparent; cursor: grab; touch-action: none; }
    .sr-position-card__drag:active { cursor: grabbing; }
    .sr-position-card__drag:hover { background: transparent; }
    .sr-position-card__drag:focus-visible { background: transparent; outline: 2px solid var(--sr-color-brand-300); outline-offset: 2px; }
    .sr-position-card__drag span, .sr-position-card__drag span::before, .sr-position-card__drag span::after { width: .2rem; height: .2rem; border-radius: 50%; background: var(--sr-color-text-muted); box-shadow: .42rem 0 0 var(--sr-color-text-muted); content: ""; }
    .sr-position-card__drag span { position: relative; display: block; }
    .sr-position-card__drag span::before, .sr-position-card__drag span::after { position: absolute; left: 0; }
    .sr-position-card__drag span::before { top: -.42rem; }
    .sr-position-card__drag span::after { top: .42rem; }
    .sr-position-card__number { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); font-size: .8rem; font-weight: 850; }
    .sr-position-card__summary { display: grid; min-width: 0; gap: .12rem; padding: .2rem 0; border: 0; background: transparent; color: var(--sr-color-text); text-align: left; cursor: pointer; }
    .sr-position-card__summary strong, .sr-position-card__summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sr-position-card__summary strong { font-size: .8rem; }
    .sr-position-card__summary span { color: var(--sr-color-text-muted); font-size: .66rem; }
    .sr-position-card__total { display: grid; justify-items: end; gap: .05rem; }
    .sr-position-card__total small { color: var(--sr-color-text-muted); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .sr-position-card__total strong { font-size: .78rem; }
    .sr-position-card__toggle { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; padding: 0; border: 1px solid var(--sr-color-border-strong); border-radius: .65rem; background: #fff; color: var(--sr-color-brand-800); font-size: 1.05rem; font-weight: 600; cursor: pointer; }
    .sr-position-card__toggle:hover, .sr-position-card__toggle:focus-visible { border-color: var(--sr-color-brand-400); background: var(--sr-color-brand-50); outline: 0; }
    .sr-position-card__editor { padding: .75rem; border-top: 1px solid var(--sr-color-border); background: var(--sr-color-surface-soft); }
    .sr-position-card__editor[hidden] { display: none; }
    .sr-position-edit-grid { display: grid; gap: .65rem .75rem; }
    .sr-position-edit-grid--service { grid-template-columns: minmax(8rem, .8fr) minmax(11rem, 1.5fr) 6.2rem 5.5rem; }
    .sr-position-edit-grid--service .sr-position-edit-grid__detail { grid-column: 1 / 4; }
    .sr-position-edit-grid--material { grid-template-columns: minmax(12rem, 1.7fr) 6rem 6rem 7rem; }
    .sr-position-card .sr-field__control { min-height: 2.45rem; padding: .48rem .6rem; font-size: .8rem; }
    .sr-position-card .sr-field__label { margin-bottom: .2rem; font-size: .61rem; }
    .sr-position-card__remove { display: inline-flex; min-height: 2.2rem; align-items: center; gap: .4rem; margin-top: .65rem; padding: .42rem .62rem; border: 1px solid #efc5c5; border-radius: .6rem; background: #fff; color: var(--sr-color-danger); font-size: .66rem; font-weight: 760; cursor: pointer; }
    .sr-position-card__remove .sr-icon { width: .88rem; height: .88rem; flex: 0 0 auto; }
    .sr-position-card__remove:hover, .sr-position-card__remove:focus-visible, .sr-position-card__remove.is-armed { border-color: var(--sr-color-danger); background: #fff1f1; outline: 0; }
    .sr-repeater-empty { margin-top: .55rem; padding: .85rem; }
    .sr-material-notes { margin-top: .8rem; }
    .sr-report-status-checks { margin-top: .8rem; }
    .sr-report-status-checks .sr-check-row { padding: .7rem .8rem; }
    .sr-report-status-checks small { font-size: .65rem; }

    .sr-signature-grid { gap: .75rem; }
    .sr-signature-block { gap: .55rem; padding: .75rem; }
    .sr-report-editor--multistep .sr-signature-pad canvas { height: 9rem; }
    .sr-signature-acceptance { margin-top: .75rem; padding: .75rem .85rem; }
    .sr-signature-acceptance--switch { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-md); background: #fff; cursor: pointer; }
    .sr-signature-acceptance--switch .sr-switch { min-height: 0; }
    .sr-signature-acceptance__copy { display: grid; min-width: 0; gap: .12rem; }
    .sr-signature-acceptance__copy strong { font-size: .78rem; }
    .sr-signature-acceptance__copy small { color: var(--sr-color-text-muted); font-size: .66rem; }
    .sr-finalize-hint { display: grid; gap: .15rem; margin-top: .75rem; padding: .75rem .85rem; border-radius: var(--sr-radius-md); background: var(--sr-color-brand-50); }
    .sr-finalize-hint--action { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; border: 1px solid var(--sr-color-brand-100); }
    .sr-finalize-hint__copy { display: grid; min-width: 0; gap: .15rem; }
    .sr-finalize-hint--action .sr-button { min-width: 9.5rem; justify-self: end; }
    .sr-finalize-hint strong { font-size: .78rem; }
    .sr-finalize-hint span { color: var(--sr-color-text-muted); font-size: .67rem; }

    .sr-customer-review { display: grid; gap: .9rem; margin-bottom: 1rem; padding: .9rem; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-lg); background: var(--sr-color-surface-soft); }
    .sr-customer-review__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .15rem .1rem .8rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-customer-review__header h3, .sr-signature-intro h3 { margin: .12rem 0 .18rem; font-size: 1rem; }
    .sr-customer-review__header p, .sr-signature-intro p { margin: 0; color: var(--sr-color-text-muted); font-size: .72rem; line-height: 1.45; }
    .sr-customer-review__badge { flex: 0 0 auto; padding: .35rem .55rem; border: 1px solid var(--sr-color-border); border-radius: 999px; background: #fff; color: var(--sr-color-text-muted); font-size: .61rem; font-weight: 800; text-transform: uppercase; }
    .sr-customer-review__groups { display: grid; gap: .7rem; }
    .sr-customer-review__group { overflow: hidden; padding: .8rem; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); background: #fff; }
    .sr-customer-review__group > h4 { margin: 0 0 .65rem; padding-bottom: .5rem; border-bottom: 1px solid var(--sr-color-border); font-size: .82rem; }
    .sr-customer-review__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; }
    .sr-customer-review__facts > div { min-width: 0; padding: .58rem .65rem; border: 1px solid var(--sr-color-border); border-radius: .6rem; background: var(--sr-color-surface-soft); }
    .sr-customer-review__facts > .sr-customer-review__fact--wide { grid-column: 1 / -1; }
    .sr-customer-review__facts dt { margin-bottom: .12rem; color: var(--sr-color-text-muted); font-size: .57rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
    .sr-customer-review__facts dd { margin: 0; overflow-wrap: anywhere; color: var(--sr-color-text); font-size: .73rem; font-weight: 680; line-height: 1.4; }
    .sr-customer-review__facts--times { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .65rem; }
    .sr-customer-review__facts--status { margin-top: .65rem; }
    .sr-customer-review__text-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .55rem; }
    .sr-customer-review__text-block { padding: .65rem; border: 1px solid var(--sr-color-border); border-radius: .65rem; background: var(--sr-color-surface-soft); }
    .sr-customer-review__text-block > span { display: block; margin-bottom: .25rem; color: var(--sr-color-text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
    .sr-customer-review__text-block p { margin: 0; color: var(--sr-color-text); font-size: .73rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
    .sr-customer-review__text-block--notes { margin-top: .65rem; }
    .sr-customer-review__list { display: grid; gap: .35rem; }
    .sr-customer-review__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem .65rem; border: 1px solid var(--sr-color-border); border-radius: .65rem; background: #fff; }
    .sr-customer-review__line > div { display: grid; min-width: 0; gap: .08rem; }
    .sr-customer-review__line > div:last-child { justify-items: end; text-align: right; }
    .sr-customer-review__line strong { overflow-wrap: anywhere; font-size: .72rem; }
    .sr-customer-review__line span { color: var(--sr-color-text-muted); font-size: .62rem; line-height: 1.35; }
    .sr-customer-review__empty { padding: .7rem; border: 1px dashed var(--sr-color-border-strong); border-radius: .65rem; color: var(--sr-color-text-muted); font-size: .69rem; text-align: center; }
    .sr-customer-review__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .45rem; padding: .55rem .65rem; border-radius: .65rem; background: var(--sr-color-brand-50); }
    .sr-customer-review__total span { color: var(--sr-color-brand-800); font-size: .66rem; font-weight: 760; }
    .sr-customer-review__total strong { color: var(--sr-color-brand-900); font-size: .78rem; }
    .sr-customer-review__privacy-note { margin: 0; color: var(--sr-color-text-muted); font-size: .62rem; text-align: center; }
    .sr-signature-intro { margin: .2rem 0 .75rem; padding: .1rem .1rem .7rem; border-bottom: 1px solid var(--sr-color-border); }

    .sr-report-dock { position: fixed; right: 0; bottom: 0; left: var(--sr-sidebar-width); z-index: 65; transition: left .22s ease; padding: .65rem max(1rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); border-top: 1px solid rgb(191 202 212 / 85%); background: rgb(245 248 251 / 94%); box-shadow: 0 -12px 30px rgb(17 24 32 / 10%); backdrop-filter: blur(18px); }
    .sr-report-dock__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .8rem; width: min(100%, var(--sr-report-dock-width)); margin: 0 auto; }
    .sr-report-dock__side { display: flex; align-items: center; gap: .55rem; min-width: 0; }
    .sr-report-dock__side--left { justify-self: start; }
    .sr-report-dock__side--right { justify-self: end; }
    .sr-report-dock button { min-height: 3rem; border-radius: .75rem; font-weight: 780; cursor: pointer; }
    .sr-report-dock__menu, .sr-report-dock__nav, .sr-report-dock__save, .sr-report-dock__finalize { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .85rem; border: 1px solid var(--sr-color-border-strong); background: #fff; color: var(--sr-color-text); }
    .sr-report-dock__menu { color: var(--sr-color-brand-700); }
    .sr-report-dock__save { color: var(--sr-color-brand-700); }
    .sr-report-dock__menu .sr-icon, .sr-report-dock__nav .sr-icon, .sr-report-dock__save .sr-icon, .sr-report-dock__finalize .sr-icon { width: 1rem; height: 1rem; }
    .sr-report-dock__nav:disabled { opacity: .35; cursor: not-allowed; }
    .sr-report-dock__nav--next, .sr-report-dock__finalize { border-color: var(--sr-color-action-500); background: var(--sr-color-action-500); color: #fff; box-shadow: 0 8px 20px rgb(47 184 116 / 22%); }
    .sr-report-dock__nav--next:hover:not(:disabled), .sr-report-dock__finalize:hover:not(:disabled) { border-color: var(--sr-color-action-600); background: var(--sr-color-action-600); box-shadow: 0 10px 24px rgb(47 184 116 / 28%); }
    .sr-report-dock__finalize:disabled { border-color: var(--sr-color-border-strong); background: #dce6ef; color: #7890a5; box-shadow: none; cursor: not-allowed; }
    .sr-report-dock__current { display: grid; min-width: 0; justify-items: center; gap: .05rem; padding: 0 .35rem; text-align: center; }
    .sr-report-dock__current small { color: var(--sr-color-brand-600); font-size: .61rem; font-weight: 850; letter-spacing: .06em; }
    .sr-report-dock__current strong { overflow: hidden; max-width: 100%; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-dock [hidden] { display: none; }

    .sr-report-check-layer { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center; padding: 1rem; }
    .sr-report-check-layer[hidden] { display: none; }
    .sr-report-check-backdrop { position: absolute; inset: 0; }
    .sr-report-check-modal { position: relative; z-index: 1; display: grid; width: min(44rem, calc(100vw - 2rem)); max-height: min(86dvh, 48rem); overflow: auto; border: 1px solid var(--sr-color-border-strong); border-radius: 1rem; background: #fff; box-shadow: 0 28px 80px rgb(10 34 53 / 30%); }
    .sr-report-check-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .85rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-report-check-modal__header h3 { margin: .15rem 0 .25rem; font-size: 1.15rem; }
    .sr-report-check-modal__header p { margin: 0; color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.45; }
    .sr-report-check-summary { display: grid; gap: .6rem; margin: .85rem 1rem; padding: .75rem .8rem; border: 1px solid var(--sr-color-border); border-radius: .75rem; background: var(--sr-color-surface-soft); }
    .sr-report-check-summary > div:first-child { display: grid; gap: .12rem; }
    .sr-report-check-summary strong { font-size: .75rem; }
    .sr-report-check-summary span { color: var(--sr-color-text-muted); font-size: .65rem; }
    .sr-report-check-summary[data-state="warning"] { border-color: #efd7a6; background: #fff9ec; }
    .sr-report-check-summary[data-state="error"] { border-color: #efc5c5; background: #fff3f3; }
    .sr-report-check-summary__bar { overflow: hidden; height: .3rem; border-radius: 999px; background: #dfe7ed; }
    .sr-report-check-summary__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sr-color-success); transition: width .2s ease; }
    .sr-report-check-summary[data-state="warning"] .sr-report-check-summary__bar span { background: var(--sr-color-warning); }
    .sr-report-check-summary[data-state="error"] .sr-report-check-summary__bar span { background: var(--sr-color-danger); }
    .sr-report-check-list { display: grid; margin: 0 1rem; overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: .8rem; }
    .sr-report-check-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: .65rem; padding: .72rem .8rem; background: #fff; }
    .sr-report-check-row + .sr-report-check-row { border-top: 1px solid var(--sr-color-border); }
    .sr-report-check-row__icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; background: #eaf7ef; color: var(--sr-color-success); font-size: .8rem; font-weight: 850; }
    .sr-report-check-row[data-state="warning"] .sr-report-check-row__icon { background: #fff4d9; color: var(--sr-color-warning); }
    .sr-report-check-row[data-state="error"] .sr-report-check-row__icon { background: #ffe6e6; color: var(--sr-color-danger); }
    .sr-report-check-row__copy { display: grid; min-width: 0; gap: .1rem; }
    .sr-report-check-row__copy strong { font-size: .8rem; }
    .sr-report-check-row__copy > span { color: var(--sr-color-text-muted); font-size: .63rem; }
    .sr-report-check-row__copy ul { display: grid; gap: .18rem; margin: .35rem 0 0; padding-left: 1rem; color: var(--sr-color-text-soft); font-size: .63rem; }
    .sr-report-check-row__copy li[data-severity="error"] { color: var(--sr-color-danger); }
    .sr-report-check-row__status { align-self: center; padding: .3rem .48rem; border-radius: 999px; background: #eaf7ef; color: var(--sr-color-success); font-size: .59rem; font-weight: 800; white-space: nowrap; }
    .sr-report-check-row[data-state="warning"] .sr-report-check-row__status { background: #fff4d9; color: var(--sr-color-warning); }
    .sr-report-check-row[data-state="error"] .sr-report-check-row__status { background: #ffe6e6; color: var(--sr-color-danger); }
    .sr-report-check-approval { display: grid; gap: .55rem; margin: .8rem 1rem 0; padding: .75rem .8rem; border: 1px solid #b9dfc8; border-radius: .8rem; background: #f1fbf5; }
    .sr-report-check-approval[hidden] { display: none; }
    .sr-report-check-approval[data-state="warning"] { border-color: #efd7a6; background: #fff9ec; }
    .sr-report-check-approval__intro { display: grid; gap: .12rem; }
    .sr-report-check-approval__intro strong { font-size: .8rem; }
    .sr-report-check-approval__intro span { color: var(--sr-color-text-muted); font-size: .64rem; line-height: 1.45; }
    .sr-signature-acceptance--modal { margin-top: 0; border-color: rgb(24 131 85 / 24%); background: rgb(255 255 255 / 78%); }
    .sr-report-check-approval[data-state="warning"] .sr-signature-acceptance--modal { border-color: rgb(188 126 10 / 22%); }
    .sr-report-check-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding: .9rem 1rem 1rem; }
    .sr-report-check-modal__footer .sr-button:first-child { margin-right: auto; }
    body.sr-report-check-open { overflow: hidden; }

    .sr-step-menu-backdrop { position: fixed; inset: 0 0 0 var(--sr-sidebar-width); z-index: 58; }
    .sr-step-menu-backdrop[hidden], .sr-step-menu[hidden] { display: none; }
    .sr-step-menu { position: fixed; right: auto; bottom: 4.9rem; left: calc(var(--sr-sidebar-width) + 1rem); z-index: 60; display: grid; width: min(30rem, calc(100vw - var(--sr-sidebar-width) - 2rem)); max-height: min(75vh, 39rem); margin: 0; padding: .55rem; overflow: auto; border: 1px solid var(--sr-color-border-strong); border-radius: 1.1rem 1.1rem .7rem .7rem; background: #fff; box-shadow: 0 -20px 55px rgb(17 24 32 / 24%); transition: transform .2s ease; }
    .sr-step-menu.is-dragging { transition: none; }
    .sr-step-menu__handle { display: block; width: 2.8rem; height: .25rem; margin: .1rem auto .35rem; padding: 0; border: 0; border-radius: 999px; background: var(--sr-color-border-strong); color: inherit; cursor: pointer; }
    .sr-step-menu__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem .35rem .65rem; }
    .sr-step-menu__header > div { display: grid; gap: .08rem; }
    .sr-step-menu__header small { color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 750; }
    .sr-step-menu__header strong { font-size: .95rem; }
    .sr-step-menu__progress { display: grid; gap: .45rem; padding: .65rem .75rem; border-radius: .75rem; background: var(--sr-color-surface-soft); }
    .sr-step-menu__progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .sr-step-menu__progress strong, .sr-step-menu__progress span { font-size: .67rem; }
    .sr-step-menu__progress span { color: var(--sr-color-text-muted); font-weight: 780; }
    .sr-step-menu__list { display: grid; gap: .25rem; padding: .45rem 0; }
    .sr-step-menu__item { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; width: 100%; min-height: 3.55rem; padding: .55rem .65rem; border: 0; border-radius: .75rem; background: transparent; color: var(--sr-color-text); text-align: left; cursor: pointer; }
    .sr-step-menu__item:hover, .sr-step-menu__item.is-active { background: var(--sr-color-brand-50); }
    .sr-step-menu__item.is-active { box-shadow: none; }
    .sr-step-menu__item > span:nth-child(2) { display: grid; min-width: 0; gap: .08rem; }
    .sr-step-menu__item strong, .sr-step-menu__item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sr-step-menu__item strong { font-size: .78rem; }
    .sr-step-menu__item small { color: var(--sr-color-text-muted); font-size: .63rem; }
    .sr-step-menu__item[data-status="partial"] .sr-report-step__status { border-color: #e4b04f; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-step-menu__item[data-status="complete"] .sr-report-step__status { border-color: var(--sr-color-success); background: var(--sr-color-success); color: #fff; }
    .sr-step-menu__item[data-status="complete"] .sr-report-step__status span { font-size: 0; }
    .sr-step-menu__item[data-status="complete"] .sr-report-step__status span::after { content: "✓"; font-size: .82rem; }
    .sr-step-menu__item[data-status="partial"] .sr-report-step__label { color: var(--sr-color-warning); }
    .sr-step-menu__item[data-status="complete"] .sr-report-step__label { color: var(--sr-color-success); }
    body.sr-step-menu-open { overflow: hidden; }

    .sr-step-menu__item[data-sr-check-state="error"] .sr-report-step__status { border-color: var(--sr-color-danger); background: var(--sr-color-danger-soft); color: var(--sr-color-danger); box-shadow: 0 0 0 3px rgb(192 52 60 / 8%); }
    .sr-step-menu__item[data-sr-check-state="warning"] .sr-report-step__status { border-color: #dba935; background: var(--sr-color-warning-soft); color: #8a5a00; box-shadow: 0 0 0 3px rgb(219 169 53 / 9%); }
    .sr-step-menu__item[data-sr-check-state="error"] .sr-report-step__label { color: var(--sr-color-danger); }
    .sr-step-menu__item[data-sr-check-state="warning"] .sr-report-step__label { color: #8a5a00; }

    .sr-field.sr-check-highlight--error .sr-field__control,
    .sr-field__control.sr-check-highlight--error,
    .sr-signature-pad.sr-check-highlight--error,
    .sr-signature-pad canvas.sr-check-highlight--error { border-color: #d84f57; background-color: #fff6f6; box-shadow: 0 0 0 3px rgb(216 79 87 / 13%); }
    .sr-field.sr-check-highlight--warning .sr-field__control,
    .sr-field__control.sr-check-highlight--warning,
    .sr-signature-pad.sr-check-highlight--warning,
    .sr-signature-pad canvas.sr-check-highlight--warning { border-color: #d6a325; background-color: #fffbef; box-shadow: 0 0 0 3px rgb(214 163 37 / 14%); }
    .sr-position-card[data-sr-check-row-state="error"] { border-color: #d84f57; box-shadow: 0 0 0 3px rgb(216 79 87 / 12%), 0 12px 28px rgb(117 32 38 / 9%); }
    .sr-position-card[data-sr-check-row-state="warning"] { border-color: #d6a325; box-shadow: 0 0 0 3px rgb(214 163 37 / 12%), 0 12px 28px rgb(126 91 11 / 8%); }
    .sr-check-inline { display: flex; align-items: flex-start; gap: .35rem; margin-top: .32rem; font-size: .62rem; font-weight: 720; line-height: 1.4; }
    .sr-check-inline::before { flex: 0 0 auto; content: "!"; font-weight: 900; }
    .sr-check-inline--error { color: var(--sr-color-danger); }
    .sr-check-inline--warning { color: #8a5a00; }
    .sr-check-highlight--error.is-sr-check-focus,
    .sr-check-highlight--warning.is-sr-check-focus { animation: sr-check-focus-pulse .75s ease-in-out 2; }
    @keyframes sr-check-focus-pulse {
        0%, 100% { transform: translateZ(0); }
        50% { transform: translateY(-2px); filter: brightness(.98); }
    }

    .sr-toast-region { position: fixed; top: calc(var(--sr-topbar-height) + 1rem); right: max(1rem, env(safe-area-inset-right)); z-index: 140; display: grid; width: min(25rem, calc(100vw - 2rem)); gap: .65rem; pointer-events: none; }
    .sr-toast { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.8rem; align-items: start; gap: .7rem; overflow: hidden; padding: .85rem .9rem; border: 2px solid var(--sr-color-brand-200); border-radius: .85rem; background: #f1f7fd; box-shadow: 0 18px 44px rgb(var(--sr-color-brand-900-rgb) / 20%); opacity: 0; pointer-events: auto; transform: translateY(-.65rem) scale(.98); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(16px); }
    .sr-toast::before { content: none; }
    .sr-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
    .sr-toast.is-leaving { opacity: 0; transform: translateY(-.35rem) scale(.98); }
    .sr-toast__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .62rem; background: var(--sr-color-brand-100); color: var(--sr-color-brand-700); font-size: .9rem; font-weight: 900; }
    .sr-toast[data-type="success"] { border-color: #7fc9a3; background: #e9f8f0; box-shadow: 0 18px 44px rgb(18 132 83 / 18%); }
    .sr-toast[data-type="success"]::before { background: var(--sr-color-success); }
    .sr-toast[data-type="success"] .sr-toast__icon { background: #d2f0df; color: #087a49; }
    .sr-toast[data-type="success"] .sr-toast__copy strong { color: #075f3b; }
    .sr-toast[data-type="warning"] { border-color: #e6bd5a; background: #fff6dc; box-shadow: 0 18px 44px rgb(168 112 0 / 16%); }
    .sr-toast[data-type="warning"]::before { background: var(--sr-color-warning); }
    .sr-toast[data-type="warning"] .sr-toast__icon { background: #ffe8ad; color: #8a5a00; }
    .sr-toast[data-type="warning"] .sr-toast__copy strong { color: #704900; }
    .sr-toast[data-type="error"] { border-color: #e58d92; background: #fff0f1; box-shadow: 0 18px 44px rgb(183 43 51 / 18%); }

    .sr-report-template-select-page {
        display: grid;
        min-height: calc(100vh - var(--sr-topbar-height) - 4rem);
        place-items: center;
        padding: 1rem;
    }

    .sr-report-template-select-card {
        display: grid;
        gap: 1rem;
        width: min(100%, 46rem);
        padding: 1.15rem;
        border: 1px solid var(--sr-color-border);
        border-radius: 1rem;
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-card);
    }

    .sr-report-template-select-card__header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .8rem;
        align-items: start;
    }

    .sr-report-template-select-card__header > div { display: grid; gap: .2rem; }
    .sr-report-template-select-card__header h1 { margin: 0; font-size: 1.25rem; }
    .sr-report-template-select-card__header p { margin: 0; color: var(--sr-color-text-muted); font-size: .72rem; line-height: 1.5; }

    .sr-report-template-select-card__icon,
    .sr-report-template-select-option__icon {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .75rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
    }

    .sr-report-template-select-card__icon { width: 2.6rem; height: 2.6rem; }
    .sr-report-template-select-option__icon { width: 2.35rem; height: 2.35rem; }

    .sr-report-template-select-context {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem 1.2rem;
        margin: 0;
        padding: .7rem .8rem;
        border-radius: .75rem;
        background: var(--sr-color-surface-subtle);
    }

    .sr-report-template-select-context > div { display: grid; gap: .08rem; }
    .sr-report-template-select-context dt { color: var(--sr-color-text-muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
    .sr-report-template-select-context dd { margin: 0; font-size: .7rem; font-weight: 750; }

    .sr-report-template-select-list { display: grid; gap: .55rem; }

    .sr-report-template-select-option {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .75rem;
        align-items: center;
        padding: .78rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .85rem;
        background: var(--sr-color-surface);
        color: inherit;
        text-decoration: none;
        transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .sr-report-template-select-option:hover,
    .sr-report-template-select-option:focus-visible {
        border-color: var(--sr-color-brand-300);
        box-shadow: 0 .45rem 1.2rem rgba(28, 74, 108, .09);
        transform: translateY(-1px);
    }

    .sr-report-template-select-option__copy { display: grid; gap: .12rem; min-width: 0; }
    .sr-report-template-select-option__copy strong { font-size: .78rem; }
    .sr-report-template-select-option__copy small { overflow: hidden; color: var(--sr-color-text-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }

    .sr-report-template-select-card__footer {
        display: flex;
        justify-content: flex-start;
        padding-top: .2rem;
    }

}

/* Source: resources/css/04-components-03-settings-reports.css */
@layer components {
    .sr-toast[data-type="error"]::before { background: var(--sr-color-danger); }
    .sr-toast[data-type="error"] .sr-toast__icon { background: #ffd9dc; color: var(--sr-color-danger); }
    .sr-toast[data-type="error"] .sr-toast__copy strong { color: #9a2027; }
    .sr-toast__copy { display: grid; min-width: 0; gap: .16rem; padding-top: .08rem; }
    .sr-toast__copy strong { font-size: .8rem; }
    .sr-toast__copy span { color: #526170; font-size: .69rem; line-height: 1.45; }
    .sr-toast__close { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--sr-color-text-muted); font-size: 1.1rem; cursor: pointer; }
    .sr-toast__close:hover, .sr-toast__close:focus-visible { background: var(--sr-color-surface-soft); color: var(--sr-color-text); outline: 0; }



    .sr-report-editor--locked { padding-bottom: 1.75rem; }
    .sr-report-editor--locked .sr-report-step-panel { scroll-margin-top: 1rem; }

    .sr-report-check-delivery { display: grid; gap: .6rem; padding-top: .15rem; }
    .sr-report-check-delivery .sr-field { margin: 0; padding: .7rem .8rem; border: 1px solid rgb(24 100 163 / 15%); border-radius: .72rem; background: rgb(255 255 255 / 78%); }
    .sr-signature-acceptance.is-disabled { opacity: .55; cursor: not-allowed; }
    .sr-signature-acceptance.is-disabled input { cursor: not-allowed; }

    .sr-report-dock--completed { background: rgb(245 248 251 / 97%); }
    .sr-report-dock__completed-inner { display: grid; grid-template-columns: auto minmax(10rem, 1fr) auto; align-items: center; gap: .7rem; width: min(100%, var(--sr-report-dock-width)); margin: 0 auto; }
    .sr-report-dock__completed-overview { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .85rem; border: 1px solid var(--sr-color-border-strong); border-radius: .75rem; background: #fff; color: var(--sr-color-brand-700); font-size: .78rem; font-weight: 800; text-decoration: none; }
    .sr-report-dock__completed-overview:hover, .sr-report-dock__completed-overview:focus-visible { border-color: var(--sr-color-brand-400); background: var(--sr-color-brand-50); outline: 0; }
    .sr-report-dock__completed-status { display: grid; min-width: 0; justify-items: center; gap: .08rem; text-align: center; }
    .sr-report-dock__completed-status small { color: var(--sr-color-success); font-size: .61rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
    .sr-report-dock__completed-status strong { overflow: hidden; max-width: 100%; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-dock__completed-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
    .sr-report-dock__completed-actions .sr-button { min-height: 3rem; padding: .65rem .82rem; border-radius: .75rem; white-space: nowrap; }

    body.sr-report-email-open { overflow: hidden; }
    .sr-report-email-layer { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1rem; }
    .sr-report-email-layer[hidden] { display: none; }
    .sr-report-email-backdrop { position: absolute; inset: 0; }
    .sr-report-email-modal { position: relative; z-index: 1; width: min(100%, 36rem); max-height: min(88dvh, 44rem); overflow: auto; border: 1px solid var(--sr-color-border); border-radius: 1rem; background: #fff; box-shadow: 0 30px 90px rgb(15 31 46 / 30%); }
    .sr-report-email-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-report-email-modal__header > div { display: grid; min-width: 0; gap: .18rem; }
    .sr-report-email-modal__header h3 { margin: 0; font-size: 1.08rem; }
    .sr-report-email-modal__header p { margin: 0; color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.45; }
    .sr-report-email-modal__form { display: grid; gap: .8rem; padding: 1rem; }
    .sr-report-email-modal__attachment { display: flex; align-items: center; gap: .7rem; padding: .75rem .8rem; border: 1px solid #c9ddeb; border-radius: .75rem; background: #f4f9fd; color: var(--sr-color-brand-700); }
    .sr-report-email-modal__attachment .sr-icon { width: 1.25rem; height: 1.25rem; }
    .sr-report-email-modal__attachment > span { display: grid; gap: .1rem; min-width: 0; }
    .sr-report-email-modal__attachment strong { overflow: hidden; color: var(--sr-color-text); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-report-email-modal__attachment small { color: var(--sr-color-text-muted); font-size: .64rem; }
    .sr-report-email-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding-top: .1rem; }

    .sr-button--danger-ghost { border-color: rgb(var(--sr-color-accent-500-rgb) / 28%); color: var(--sr-color-accent-600); }
    .sr-button--danger-ghost:hover:not(:disabled) { border-color: rgb(var(--sr-color-accent-500-rgb) / 48%); background: rgb(var(--sr-color-accent-500-rgb) / 6%); }

    .sr-alert { display: grid; gap: .18rem; padding: .78rem .9rem; border: 1px solid var(--sr-color-border); border-radius: .8rem; font-size: .8rem; line-height: 1.45; }
    .sr-alert strong { font-size: .82rem; }
    .sr-alert span { color: var(--sr-color-text-muted); }
    .sr-alert--warning { border-color: #efd7a6; background: #fff9ec; }
    .sr-alert--warning strong { color: #7d5200; }


    .sr-template-settings { display: grid; grid-template-columns: minmax(20rem, .75fr) minmax(30rem, 1.25fr); gap: 1.1rem; align-items: start; }
    .sr-template-settings__controls { min-width: 0; }

    .sr-template-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .85rem; border: 1px dashed #b9cbd9; border-radius: .9rem; background: #fbfdff; }
    .sr-template-upload.has-file { border-style: solid; border-color: #bdd6c8; background: #f6fbf8; }
    .sr-template-upload__icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .72rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-template-upload__icon .sr-icon { width: 1.35rem; height: 1.35rem; }
    .sr-template-upload__content { display: grid; min-width: 0; gap: .14rem; }
    .sr-template-upload__content strong { overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-template-upload__content span { color: var(--sr-color-text-muted); font-size: .68rem; line-height: 1.42; }
    .sr-template-upload__button { white-space: nowrap; }
    .sr-template-upload__selected { grid-column: 2 / -1; color: var(--sr-color-brand-700); font-size: .7rem; font-weight: 700; }
    .sr-template-processing { display: grid; grid-column: 1 / -1; gap: .1rem; padding: .62rem .72rem; border: 1px solid var(--sr-color-border); border-radius: .7rem; background: #f8fafc; font-size: .68rem; line-height: 1.42; }
    .sr-template-processing[hidden] { display: none; }
    .sr-template-processing strong { font-size: .72rem; }
    .sr-template-processing span { color: inherit; opacity: .82; }
    .sr-template-processing.is-loading { border-color: #b7cee2; background: var(--sr-color-brand-50); color: var(--sr-color-brand-800); }
    .sr-template-processing.is-success { border-color: #a8d8c3; background: var(--sr-color-success-soft); color: var(--sr-color-success); }
    .sr-template-processing.is-warning { border-color: #eed08d; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-template-processing.is-error { border-color: #efb7ba; background: var(--sr-color-danger-soft); color: var(--sr-color-danger); }

    .sr-module-overview { display: grid; gap: .7rem; }
    .sr-module-card { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; min-height: 4.65rem; padding: .82rem .9rem; border: 1px solid var(--sr-color-border); border-radius: .9rem; background: #fff; transition: opacity .18s ease, background-color .18s ease, border-color .18s ease; }
    .sr-module-card.is-inactive { border-color: #e2e8ee; background: #f7f9fb; opacity: .58; }
    .sr-module-card__icon { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .72rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-module-card.is-inactive .sr-module-card__icon { background: #eef2f5; color: #7d8a96; }
    .sr-module-card__icon .sr-icon { width: 1.2rem; height: 1.2rem; }
    .sr-module-card__content { display: grid; min-width: 0; flex: 1 1 20rem; gap: .16rem; }
    .sr-module-card__title { display: flex; min-width: 0; align-items: center; gap: .45rem; }
    .sr-module-card__title strong { font-size: .84rem; }
    .sr-module-card__content p { margin: 0; color: var(--sr-color-text-muted); font-size: .68rem; line-height: 1.45; }
    .sr-module-card__status { display: flex; flex: 0 0 auto; justify-content: flex-end; margin-left: auto; }
    .sr-module-status { display: inline-flex; min-height: 2rem; align-items: center; justify-content: center; gap: .34rem; padding: .35rem .62rem; border-radius: 999px; font-size: .66rem; font-weight: 750; white-space: nowrap; }
    .sr-module-status .sr-icon { width: .88rem; height: .88rem; }
    .sr-module-status--active { background: var(--sr-color-success-soft); color: var(--sr-color-success); }
    .sr-module-status--inactive { background: #e9eef2; color: #687783; }
    .sr-module-note { margin: .82rem 0 0; padding-top: .78rem; border-top: 1px solid var(--sr-color-border); color: var(--sr-color-text-muted); font-size: .69rem; line-height: 1.45; }

    .sr-template-margin-card { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: .9rem; background: #fff; }
    .sr-template-margin-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .8rem .85rem; border-bottom: 1px solid var(--sr-color-border); background: #f8fafc; }
    .sr-template-margin-card__header > div { display: grid; gap: .1rem; }
    .sr-template-margin-card__header strong { font-size: .82rem; }
    .sr-template-margin-card__header span { color: var(--sr-color-text-muted); font-size: .66rem; }
    .sr-template-margin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .85rem; }
    .sr-input-suffix { position: relative; }
    .sr-input-suffix .sr-field__control { padding-right: 2.6rem; }
    .sr-input-suffix > span { position: absolute; top: 50%; right: .82rem; color: var(--sr-color-text-muted); font-size: .7rem; font-weight: 700; transform: translateY(-50%); pointer-events: none; }
    .sr-template-margin-hint { display: flex; align-items: center; gap: .65rem; padding: .68rem .85rem; border-top: 1px solid var(--sr-color-border); background: #fbfcfd; color: var(--sr-color-text-muted); font-size: .66rem; line-height: 1.4; }
    .sr-template-margin-hint__page { position: relative; display: block; width: 1.65rem; height: 2.15rem; flex: 0 0 auto; border: 1px solid #aebfcd; border-radius: .15rem; background: #fff; }
    .sr-template-margin-hint__page i { position: absolute; inset: .34rem .24rem .38rem; border: 1px dashed var(--sr-color-brand-400); }
    .sr-template-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }

    .sr-template-preview { min-width: 0; overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: .95rem; background: #e8edf2; box-shadow: 0 18px 48px rgb(23 43 61 / 10%); }
    .sr-template-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border-bottom: 1px solid var(--sr-color-border); background: #fff; }
    .sr-template-preview__header > div { display: grid; gap: .08rem; }
    .sr-template-preview__header strong { font-size: .83rem; }
    .sr-template-preview__header span { color: var(--sr-color-text-muted); font-size: .66rem; }
    .sr-template-preview__stage { position: relative; min-height: 47rem; padding: .8rem; }
    .sr-template-preview iframe { display: block; width: 100%; height: 46rem; border: 0; border-radius: .35rem; background: #fff; box-shadow: 0 10px 30px rgb(10 27 42 / 18%); }
    .sr-template-preview__loading { position: absolute; inset: .8rem; display: grid; place-content: center; gap: .7rem; border-radius: .4rem; background: rgb(238 243 247 / 82%); color: var(--sr-color-brand-800); text-align: center; backdrop-filter: blur(3px); }
    .sr-template-preview__loading[hidden] { display: none; }
    .sr-template-preview__loading strong { font-size: .8rem; }
    .sr-spinner { display: block; width: 1.7rem; height: 1.7rem; margin: 0 auto; border: 3px solid rgb(var(--sr-color-brand-600-rgb) / 18%); border-top-color: var(--sr-color-brand-600); border-radius: 50%; animation: sr-template-spin .75s linear infinite; }
    .sr-template-preview__note { margin: 0; padding: .68rem .85rem .8rem; border-top: 1px solid rgb(174 191 205 / 62%); background: #f8fafc; color: var(--sr-color-text-muted); font-size: .64rem; line-height: 1.45; }

    @keyframes sr-template-spin { to { transform: rotate(360deg); } }

    @media (max-width: 78rem) {
        .sr-template-settings { grid-template-columns: 1fr; }
        .sr-template-preview__stage { min-height: 43rem; }
        .sr-template-preview iframe { height: 42rem; }
    }

    @media (max-width: 36rem) {
        .sr-report-lock-notice__controls { align-items: stretch; flex-direction: column; }
        .sr-report-lock-notice__action { width: 100%; justify-content: center; }
    }

    @media (max-width: 42rem) {
        .sr-template-upload { grid-template-columns: auto minmax(0, 1fr); }
        .sr-template-upload__button { grid-column: 1 / -1; width: 100%; }
        .sr-template-margin-grid { grid-template-columns: 1fr 1fr; }
        .sr-template-actions { align-items: stretch; flex-direction: column-reverse; }
        .sr-template-actions .sr-button { width: 100%; }
        .sr-template-preview__header { align-items: stretch; flex-direction: column; }
        .sr-template-preview__header .sr-button { width: 100%; }
        .sr-template-preview__stage { min-height: 36rem; padding: .45rem; }
        .sr-template-preview iframe { height: 35rem; }
    }




    .sr-field__control--mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        letter-spacing: .015em;
    }

    .sr-numbering-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(17rem, .38fr);
        gap: 1.25rem;
        align-items: start;
    }

    .sr-numbering-form {
        min-width: 0;
    }

    .sr-numbering-reset {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(13rem, auto);
        gap: .85rem 1rem;
        align-items: center;
        padding: 1rem;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-md);
        background: var(--sr-color-surface-soft);
    }

    .sr-numbering-reset > div {
        display: grid;
        gap: .2rem;
    }

    .sr-numbering-reset strong {
        font-size: .84rem;
    }

    .sr-numbering-reset span {
        color: var(--sr-color-text-muted);
        font-size: .74rem;
        line-height: 1.45;
    }

    .sr-numbering-reset > .sr-field__error {
        grid-column: 1 / -1;
    }

    .sr-numbering-note {
        display: flex;
        gap: .75rem;
        align-items: flex-start;
        padding: .9rem 1rem;
        border: 1px solid color-mix(in srgb, var(--sr-color-brand-500) 25%, var(--sr-color-border));
        border-radius: var(--sr-radius-md);
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-800);
    }

    .sr-numbering-note > .sr-icon {
        flex: 0 0 auto;
        width: 1.15rem;
        height: 1.15rem;
        margin-top: .05rem;
    }

    .sr-numbering-note > div {
        display: grid;
        gap: .2rem;
    }

    .sr-numbering-note strong {
        font-size: .8rem;
    }

    .sr-numbering-note span {
        color: var(--sr-color-text-muted);
        font-size: .73rem;
        line-height: 1.45;
    }

    .sr-numbering-preview {
        position: sticky;
        top: calc(var(--sr-topbar-height) + 1rem);
        display: grid;
        gap: .6rem;
        padding: 1.25rem;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--sr-color-brand-500) 28%, var(--sr-color-border));
        border-radius: var(--sr-radius-lg);
        background: linear-gradient(145deg, var(--sr-color-brand-50), #fff 72%);
        box-shadow: var(--sr-shadow-sm);
    }

    .sr-numbering-preview::after {
        position: absolute;
        right: -2.6rem;
        bottom: -3rem;
        width: 8.5rem;
        height: 8.5rem;
        border-radius: 50%;
        background: color-mix(in srgb, var(--sr-color-brand-100) 65%, transparent);
        content: "";
        pointer-events: none;
    }

    .sr-numbering-preview > span {
        position: relative;
        z-index: 1;
        color: var(--sr-color-brand-700);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .sr-numbering-preview > strong {
        position: relative;
        z-index: 1;
        overflow-wrap: anywhere;
        color: var(--sr-color-text);
        font-size: clamp(1.25rem, 2.3vw, 2rem);
        line-height: 1.1;
    }

    .sr-numbering-preview > p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: var(--sr-color-text-muted);
        font-size: .75rem;
        line-height: 1.5;
    }

    .sr-numbering-preview dl {
        position: relative;
        z-index: 1;
        display: grid;
        gap: .55rem;
        margin: .3rem 0 0;
    }

    .sr-numbering-preview dl > div {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        padding-top: .55rem;
        border-top: 1px solid var(--sr-color-border);
        font-size: .72rem;
    }

    .sr-numbering-preview dt {
        color: var(--sr-color-text-muted);
    }

    .sr-numbering-preview dd {
        margin: 0;
        font-weight: 800;
    }

    .sr-report-export {
        display: grid;
        grid-template-columns: minmax(15rem, 1fr) minmax(13rem, .32fr) auto;
        gap: .85rem 1rem;
        align-items: end;
        margin-bottom: var(--sr-space-5);
        padding: 1rem 1.15rem;
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-report-export__copy {
        display: flex;
        align-items: center;
        gap: .75rem;
        align-self: center;
    }

    .sr-report-export__icon {
        display: grid;
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        border-radius: .75rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
    }

    .sr-report-export__icon .sr-icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .sr-report-export__copy > div {
        display: grid;
        gap: .15rem;
    }

    .sr-report-export__copy strong {
        font-size: .82rem;
    }

    .sr-report-export__copy span {
        color: var(--sr-color-text-muted);
        font-size: .72rem;
    }

    .sr-report-export__format {
        gap: .35rem;
    }

    .sr-report-export__actions {
        display: flex;
        gap: .55rem;
        align-items: center;
    }

    .sr-report-export__hint {
        grid-column: 1 / -1;
        margin: 0;
        color: var(--sr-color-text-muted);
        font-size: .69rem;
        line-height: 1.45;
    }

    .sr-table__select {
        width: 3rem;
        text-align: center;
    }

    .sr-table-check {
        display: inline-grid;
        width: 1.4rem;
        height: 1.4rem;
        place-items: center;
        cursor: pointer;
    }

    .sr-table-check input {
        width: 1.05rem;
        height: 1.05rem;
        margin: 0;
        accent-color: var(--sr-color-brand-600);
        cursor: pointer;
    }



    .sr-search-panel__section[hidden],
    .sr-search-empty[hidden],
    .sr-search-panel__hint[hidden] { display: none; }

    .sr-search-panel__section + .sr-search-panel__section { border-top: 1px solid var(--sr-color-border); }
    .sr-search-panel__hint {
        padding: .55rem .9rem;
        border-top: 1px solid var(--sr-color-border);
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text-muted);
        font-size: .67rem;
        text-align: center;
    }
    .sr-search-result__icon--report,
    .sr-search-result__icon--customer {
        font-size: .64rem;
        font-weight: 900;
        letter-spacing: .02em;
    }
    .sr-search-result__icon--customer { background: #edf8f3; color: #147a55; }
    .sr-search-result__key { max-width: 7.5rem; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }


    .sr-report-list-tools {
        margin-bottom: .75rem;
        padding: 0 .15rem;
    }

    .sr-report-list-tools__filters {
        display: flex;
        min-width: 0;
        align-items: end;
        gap: .65rem;
    }

    .sr-report-list-tools__summary {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: .5rem;
        margin-right: auto;
        white-space: nowrap;
    }

    .sr-report-list-tools__summary strong {
        color: var(--sr-color-text);
        font-size: .78rem;
    }

    .sr-report-list-tools__summary span {
        color: var(--sr-color-text-muted);
        font-size: .68rem;
    }

    .sr-report-list-tools__controls {
        display: flex;
        align-items: end;
        gap: .5rem;
    }

    .sr-report-list-tools__field {
        display: grid;
        gap: .22rem;
    }

    .sr-report-list-tools__field > span {
        color: var(--sr-color-text-muted);
        font-size: .6rem;
        font-weight: 780;
    }

    .sr-report-list-tools__field .sr-field__control {
        width: 8.25rem;
        min-height: 2.35rem;
        padding-block: .38rem;
        border-radius: .62rem;
        font-size: .72rem;
    }

    .sr-report-list-tools__field--small .sr-field__control {
        width: 4.6rem;
    }

    .sr-report-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem 1rem;
        margin-bottom: var(--sr-space-5);
        padding: .78rem .9rem;
        box-shadow: var(--sr-shadow-xs);
    }
    .sr-report-toolbar__filters,
    .sr-report-toolbar__export {
        display: flex;
        min-width: 0;
        align-items: end;
        gap: .6rem;
    }
    .sr-report-toolbar__filters { flex: 1 1 auto; }
    .sr-report-toolbar__export { flex: 0 1 auto; justify-content: flex-end; }
    .sr-report-toolbar__summary {
        display: grid;
        min-width: 8.7rem;
        align-self: center;
        gap: .05rem;
        padding-right: .2rem;
    }
    .sr-report-toolbar__summary strong { font-size: .8rem; }
    .sr-report-toolbar__summary span,
    .sr-report-toolbar__selection { color: var(--sr-color-text-muted); font-size: .68rem; white-space: nowrap; }
    .sr-report-toolbar__field { display: grid; gap: .28rem; }
    .sr-report-toolbar__field > span { color: var(--sr-color-text-muted); font-size: .64rem; font-weight: 780; }
    .sr-report-toolbar__field .sr-field__control { min-height: 2.55rem; padding-block: .45rem; font-size: .78rem; }
    .sr-report-toolbar__field--small .sr-field__control { width: 5rem; }
    .sr-report-toolbar__field--format .sr-field__control { width: 12.5rem; }
    .sr-report-toolbar__selection { align-self: center; }
    .sr-report-toolbar .sr-button { min-height: 2.55rem; padding: .52rem .72rem; border-radius: .68rem; font-size: .74rem; white-space: nowrap; }

    .sr-filter-chip {
        display: inline-flex;
        max-width: 15rem;
        min-height: 2.45rem;
        align-items: center;
        gap: .45rem;
        align-self: end;
        padding: .45rem .62rem;
        border: 1px solid rgb(var(--sr-color-brand-600-rgb) / 18%);
        border-radius: 999px;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
        font-size: .7rem;
        font-weight: 750;
        text-decoration: none;
    }
    .sr-filter-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sr-filter-chip:hover, .sr-filter-chip:focus-visible { border-color: var(--sr-color-brand-400); outline: 0; }

    .sr-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1rem;
        padding: .2rem .1rem;
    }
    .sr-pagination__summary { color: var(--sr-color-text-muted); font-size: .72rem; }
    .sr-pagination__pages { display: flex; align-items: center; gap: .3rem; }
    .sr-pagination__page,
    .sr-pagination__button {
        display: inline-flex;
        min-width: 2.35rem;
        min-height: 2.35rem;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .4rem .62rem;
        border: 1px solid var(--sr-color-border-strong);
        border-radius: .62rem;
        background: #fff;
        color: var(--sr-color-brand-700);
        font-size: .72rem;
        font-weight: 780;
        text-decoration: none;
    }
    .sr-pagination__page:hover,
    .sr-pagination__button:hover,
    .sr-pagination__page:focus-visible,
    .sr-pagination__button:focus-visible { border-color: var(--sr-color-brand-400); background: var(--sr-color-brand-50); outline: 0; }
    .sr-pagination__page.is-active { border-color: var(--sr-color-brand-600); background: var(--sr-color-brand-600); color: #fff; }
    .sr-pagination__button.is-disabled { opacity: .42; pointer-events: none; }
    .sr-pagination__ellipsis { padding: 0 .15rem; color: var(--sr-color-text-muted); }

    .sr-report-lock-notice {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .9rem;
        padding: .9rem 1rem;
    }
    .sr-report-lock-notice__icon {
        display: grid;
        width: 2.4rem;
        height: 2.4rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .75rem;
        background: rgb(255 255 255 / 62%);
        color: var(--sr-color-success);
    }
    .sr-report-lock-notice__icon .sr-icon { width: 1.15rem; height: 1.15rem; }
    .sr-report-lock-notice__copy { display: grid; gap: .15rem; min-width: 0; }
    .sr-report-lock-notice__copy strong { font-size: .9rem; }
    .sr-report-lock-notice__copy span { color: #356b56; font-size: .75rem; font-weight: 560; line-height: 1.45; }
    .sr-report-lock-notice__controls { display: flex; align-items: center; justify-content: flex-end; gap: .85rem; }
    .sr-report-lock-notice__time {
        display: grid;
        justify-items: end;
        gap: .06rem;
        color: var(--sr-color-success);
        font-style: normal;
        text-align: right;
        white-space: nowrap;
    }
    .sr-report-lock-notice__time small { color: #4f7567; font-size: .6rem; font-weight: 760; text-transform: uppercase; letter-spacing: .05em; }
    .sr-report-lock-notice__time strong { font-size: .76rem; }
    .sr-report-lock-notice__action {
        min-height: 2.15rem;
        padding: .38rem .62rem;
        border-color: rgb(24 134 91 / 18%);
        border-radius: .62rem;
        background: rgb(255 255 255 / 48%);
        color: #286f55;
        box-shadow: none;
        font-size: .7rem;
        font-weight: 740;
        white-space: nowrap;
    }
    .sr-report-lock-notice__action .sr-icon { width: .82rem; height: .82rem; }
    .sr-report-lock-notice--archived { border-color: #cbd6e0; background: #f2f6f9; color: #40566c; }
    .sr-report-lock-notice--archived .sr-report-lock-notice__icon { background: #fff; color: #60758b; }
    .sr-report-lock-notice--archived .sr-report-lock-notice__time { color: #52687c; }
    .sr-report-lock-notice__action:hover,
    .sr-report-lock-notice__action:focus-visible {
        border-color: rgb(24 134 91 / 30%);
        background: rgb(255 255 255 / 82%);
        color: #155f43;
        box-shadow: none;
    }

    .sr-report-dock__completed-inner { display: flex; justify-content: center; width: min(100%, 84rem); margin: 0 auto; }
    .sr-report-dock__completed-actions { justify-content: center; }



    .sr-report-table tbody tr.is-selected,
    .sr-report-table tbody tr.is-selected:hover {
        background: var(--sr-color-brand-50);
    }

    .sr-bulk-export-bar {
        position: fixed;
        z-index: 85;
        right: 0;
        bottom: max(1rem, env(safe-area-inset-bottom));
        left: var(--sr-sidebar-width);
        display: flex;
        justify-content: center;
        width: auto;
        margin: 0;
        padding: 0 1rem;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(100% + 2.25rem)) scale(.985);
        transition:
            left var(--sr-layout-transition),
            opacity .2s ease,
            visibility .2s ease,
            transform .24s cubic-bezier(.2, .8, .2, 1);
    }

    .sr-bulk-export-bar.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .sr-bulk-export-bar__inner {
        display: flex;
        width: min(40rem, 100%);
        min-width: 0;
        pointer-events: auto;
        align-items: center;
        gap: .6rem;
        padding: .58rem;
        border: 1px solid rgb(var(--sr-color-brand-600-rgb) / 18%);
        border-radius: 1rem;
        background: rgb(255 255 255 / 96%);
        box-shadow: 0 1.3rem 3.4rem rgb(13 42 66 / 22%), 0 .2rem .75rem rgb(13 42 66 / 10%);
        backdrop-filter: blur(18px);
    }

    .sr-bulk-export-bar__summary {
        display: flex;
        min-width: 11.5rem;
        align-items: center;
        gap: .58rem;
        padding-right: .15rem;
    }

    .sr-bulk-export-bar__icon {
        display: grid;
        width: 2.35rem;
        height: 2.35rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .78rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
    }

    .sr-bulk-export-bar__icon .sr-icon { width: 1.1rem; height: 1.1rem; }

    .sr-bulk-export-bar__copy {
        display: grid;
        min-width: 0;
        gap: .06rem;
    }

    .sr-bulk-export-bar__copy strong {
        overflow: hidden;
        font-size: .8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-bulk-export-bar__copy > span {
        overflow: hidden;
        color: var(--sr-color-text-muted);
        font-size: .65rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-bulk-export-bar__field {
        display: grid;
        min-width: 11.25rem;
        gap: .18rem;
        margin-left: auto;
    }

    .sr-bulk-export-bar__field > span {
        color: var(--sr-color-text-muted);
        font-size: .61rem;
        font-weight: 790;
    }

    .sr-bulk-export-bar__field .sr-field__control {
        min-height: 2.4rem;
        padding-block: .38rem;
        font-size: .72rem;
    }

    .sr-bulk-export-bar__actions {
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .sr-bulk-export-bar__actions .sr-button {
        min-height: 2.4rem;
        padding: .48rem .72rem;
        border-radius: .68rem;
        font-size: .7rem;
        white-space: nowrap;
    }

    .sr-bulk-export-bar__close {
        display: grid;
        width: 2.2rem;
        height: 2.2rem;
        flex: 0 0 auto;
        place-items: center;
        border: 0;
        border-radius: .68rem;
        background: transparent;
        color: var(--sr-color-text-muted);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        transition: background var(--sr-transition), color var(--sr-transition);
    }

    .sr-bulk-export-bar__close:hover,
    .sr-bulk-export-bar__close:focus-visible {
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text);
    }

    body.sr-bulk-export-open .sr-main { padding-bottom: 6.5rem; }



    /* Report list: the primary create action should feel intentional and clearly
       separate from the compact table controls below it. */
    .sr-page-primary-action {
        align-self: flex-start;
        margin-top: -.55rem;
    }

    .sr-page-primary-action .sr-button {
        min-height: 3.35rem;
        gap: .72rem;
        padding: .78rem 1.22rem;
        border-radius: 1rem;
        box-shadow: 0 .85rem 1.8rem rgb(47 184 116 / 20%), 0 .12rem .35rem rgb(13 42 66 / 10%);
        font-size: .88rem;
        letter-spacing: -.01em;
        transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    }

    .sr-page-primary-action .sr-button .sr-icon {
        width: 1.08rem;
        height: 1.08rem;
    }

    .sr-page-primary-action .sr-button:hover,
    .sr-page-primary-action .sr-button:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 1rem 2.15rem rgb(47 184 116 / 26%), 0 .16rem .45rem rgb(13 42 66 / 12%);
    }

    /* Keep the export selector and action button on one visual baseline. The
       accessible label remains available to screen readers without consuming
       space in the compact floating bar. */

}

/* Source: resources/css/04-components-04-account-auth.css */
@layer components {
    .sr-bulk-export-bar__field {
        display: block;
        min-width: 11.5rem;
    }

    .sr-bulk-export-bar__field .sr-field__control {
        min-height: 2.5rem;
    }




    .sr-search-backdrop {
        position: fixed;
        inset: var(--sr-topbar-height) 0 0 var(--sr-sidebar-width);
        z-index: 18;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: var(--sr-popover-backdrop-color);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transition: opacity var(--sr-transition), visibility var(--sr-transition);
    }

    body.sr-search-open .sr-search-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.sr-search-open .sr-topbar {
        box-shadow: 0 10px 28px rgb(10 30 46 / 9%);
    }

    .sr-auth-remember-device {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
        gap: .7rem;
        padding: .85rem .9rem;
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-sm);
        background: var(--sr-color-surface-soft);
        cursor: pointer;
    }

    .sr-auth-remember-device input { margin-top: .18rem; accent-color: var(--sr-color-brand-600); }
    .sr-auth-remember-device span { display: grid; gap: .15rem; }
    .sr-auth-remember-device strong { font-size: .84rem; }
    .sr-auth-remember-device small { color: var(--sr-color-text-muted); font-size: .74rem; line-height: 1.45; }

    .sr-profile-grid {
        display: grid;
        grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
        align-items: start;
        gap: var(--sr-space-5);
    }

    .sr-profile-summary {
        position: sticky;
        top: calc(var(--sr-topbar-height) + 1.5rem);
        display: grid;
        justify-items: start;
        gap: 1rem;
        padding: var(--sr-space-5);
    }

    .sr-profile-summary__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; width: 100%; }
    .sr-profile-summary__avatar {
        width: 5.2rem;
        height: 5.2rem;
        font-size: 1.28rem;
        border-radius: 1.1rem;
    }
    .sr-avatar--ghost {
        position: relative;
        overflow: hidden;
        border: 2px dashed #c9d5e3;
        background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
        color: #8ea1b5;
    }
    .sr-avatar-ghost__watermark,
    .sr-avatar-ghost__action {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: none;
    }
    .sr-avatar-ghost__watermark {
        color: #b8c8db;
        opacity: .75;
        transform: translateY(-.2rem);
    }
    .sr-avatar-ghost__watermark .sr-icon { width: 2rem; height: 2rem; }
    .sr-avatar-ghost__action {
        inset: auto;
        right: .55rem;
        bottom: .55rem;
        width: 1.45rem;
        height: 1.45rem;
        border-radius: 999px;
        background: rgb(255 255 255 / 88%);
        color: #8aa2bc;
        box-shadow: 0 2px 8px rgb(17 24 32 / 10%);
    }
    .sr-avatar-ghost__action .sr-icon { width: .85rem; height: .85rem; }

    .sr-profile-avatar-editor { display: block; }
    .sr-profile-avatar-editor__preview-wrap { position: relative; width: fit-content; }
    .sr-profile-avatar-editor__trigger { display: inline-flex; text-decoration: none; cursor: pointer; }
    .sr-profile-avatar-editor__trigger:hover .sr-avatar--ghost,
    .sr-profile-avatar-editor__trigger:focus-visible .sr-avatar--ghost {
        border-color: #9bb4d0;
        background: #f8fbff;
    }
    .sr-profile-avatar-editor__trigger:focus-visible { outline: 0; }
    .sr-profile-avatar-editor__remove-button {
        position: absolute;
        right: -.3rem;
        bottom: -.25rem;
        display: grid;
        width: 2.05rem;
        height: 2.05rem;
        place-items: center;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--sr-color-brand-600);
        color: #fff;
        box-shadow: 0 7px 16px rgb(17 24 32 / 18%);
        cursor: pointer;
        transition: background-color var(--sr-transition), transform var(--sr-transition);
    }
    .sr-profile-avatar-editor__remove-button:hover { background: var(--sr-color-danger); transform: translateY(-1px); }
    .sr-profile-avatar-editor__remove-button .sr-icon { width: .85rem; height: .85rem; }
    .sr-profile-avatar-editor .sr-field__error { display: block; margin-top: .6rem; max-width: 12rem; }

    .sr-profile-summary__identity { display: grid; gap: .3rem; align-content: start; padding-top: .15rem; min-width: 0; }
    .sr-profile-summary h2 { margin-bottom: 0; font-size: 1.16rem; }
    .sr-profile-summary p { margin: 0; color: var(--sr-color-text-muted); font-size: .8rem; overflow-wrap: anywhere; }
    .sr-profile-summary__meta { display: grid; width: 100%; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--sr-color-border); }
    .sr-profile-summary__meta div { display: grid; gap: .15rem; }
    .sr-profile-summary__meta dt { color: var(--sr-color-text-muted); font-size: .7rem; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; }
    .sr-profile-summary__meta dd { margin: 0; font-size: .82rem; font-weight: 720; }

    .sr-profile-content { display: grid; gap: var(--sr-space-5); min-width: 0; }
    .sr-profile-content > .sr-card { padding: var(--sr-space-5); }
    .sr-card__header-icon { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-600); }

    .sr-profile-section-heading { padding-top: .25rem; }
    .sr-profile-section-heading > div { display: grid; gap: .2rem; }
    .sr-profile-section-heading strong { font-size: .9rem; }
    .sr-profile-section-heading span { color: var(--sr-color-text-muted); font-size: .8rem; }

    .sr-preference-list { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: var(--sr-radius-md); }
    .sr-preference-row { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--sr-color-border); cursor: pointer; }
    .sr-preference-row:last-child { border-bottom: 0; }
    .sr-preference-row:hover { background: var(--sr-color-surface-soft); }
    .sr-preference-row > span:first-child { display: grid; gap: .18rem; min-width: 0; }
    .sr-preference-row strong { font-size: .84rem; }
    .sr-preference-row small { color: var(--sr-color-text-muted); font-size: .73rem; line-height: 1.45; }
    .sr-preference-row .sr-switch { min-height: 0; flex: 0 0 auto; }

    .sr-profile-content > .sr-card.sr-profile-danger-zone { padding: 0; overflow: hidden; }
    .sr-profile-danger-zone .sr-card__header { padding: var(--sr-space-5); border-bottom: 1px solid var(--sr-color-border); }
    .sr-profile-danger-zone__body { display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-5); padding: var(--sr-space-5); }
    .sr-profile-danger-zone__body > div { display: grid; gap: .25rem; }
    .sr-profile-danger-zone__body > div span { color: var(--sr-color-text-muted); font-size: .8rem; }
    .sr-profile-danger-zone__body form { margin: 0; flex: 0 0 auto; }

    .sr-user-dropdown__action--link { text-decoration: none; }




    .sr-email-template-layout { display: grid; grid-template-columns: minmax(23rem, .92fr) minmax(27rem, 1.08fr); gap: 1.15rem; align-items: start; }
    .sr-email-template-controls { min-width: 0; }
    .sr-settings-subcard { display: grid; gap: .85rem; padding: .95rem; border: 1px solid var(--sr-color-border); border-radius: .95rem; background: #fff; }
    .sr-settings-subcard__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding-bottom: .72rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-settings-subcard__header > div { display: grid; gap: .14rem; }
    .sr-settings-subcard__header strong { font-size: .86rem; }
    .sr-settings-subcard__header span { color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.45; }
    .sr-email-logo-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: center; }
    .sr-email-logo-preview { display: grid; width: 5rem; height: 3.6rem; place-items: center; overflow: hidden; border: 1px dashed #b9cbd9; border-radius: .7rem; background: #f7fafc; color: var(--sr-color-brand-500); }
    .sr-email-logo-preview.has-logo { border-style: solid; background: #fff; }
    .sr-email-logo-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
    .sr-email-logo-preview .sr-icon { width: 1.25rem; height: 1.25rem; }
    .sr-email-logo-row__content { display: grid; gap: .18rem; min-width: 0; }
    .sr-email-logo-row__content > strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-email-logo-row__content > span { color: var(--sr-color-text-muted); font-size: .67rem; }
    .sr-email-logo-row__actions { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .2rem; }
    .sr-email-template-colors { gap: .65rem; }
    .sr-color-field { display: grid; grid-template-columns: 2.65rem minmax(0, 1fr); gap: .45rem; }
    .sr-color-field input[type="color"] { width: 2.65rem; height: 2.65rem; padding: .18rem; border: 1px solid var(--sr-color-border); border-radius: .65rem; background: #fff; cursor: pointer; }
    .sr-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
    .sr-fieldset > legend { margin-bottom: .45rem; font-size: .72rem; font-weight: 760; }
    .sr-segmented-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .22rem; border: 1px solid var(--sr-color-border); border-radius: .72rem; background: #f3f6f8; }
    .sr-segmented-control label { position: relative; cursor: pointer; }
    .sr-segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
    .sr-segmented-control span { display: flex; min-height: 2.2rem; align-items: center; justify-content: center; border-radius: .52rem; color: var(--sr-color-text-muted); font-size: .72rem; font-weight: 720; }
    .sr-segmented-control input:checked + span { background: #fff; color: var(--sr-color-brand-700); box-shadow: 0 2px 7px rgb(17 24 32 / 8%); }
    .sr-segmented-control input:focus-visible + span { outline: 3px solid rgb(22 103 165 / 16%); }
    .sr-email-placeholder-list { display: flex; flex-wrap: wrap; gap: .38rem; }
    .sr-email-placeholder-list code { padding: .26rem .46rem; border-radius: .42rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); font-size: .65rem; font-weight: 720; }
    .sr-field__control--textarea-small { min-height: 5.2rem; resize: vertical; }
    .sr-email-attachment-list { display: grid; overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: .78rem; }
    .sr-email-attachment-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .65rem .72rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-email-attachment-row:last-child { border-bottom: 0; }
    .sr-email-attachment-row__icon { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .58rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-email-attachment-row__copy { display: grid; gap: .08rem; min-width: 0; }
    .sr-email-attachment-row__copy strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-email-attachment-row__copy small { color: var(--sr-color-text-muted); font-size: .64rem; }
    .sr-email-attachment-upload { display: flex; align-items: center; gap: .7rem; padding: .72rem .8rem; border: 1px dashed #b9cbd9; border-radius: .78rem; background: #fbfdff; color: var(--sr-color-brand-700); cursor: pointer; }
    .sr-email-attachment-upload:hover { border-color: var(--sr-color-brand-400); background: var(--sr-color-brand-50); }
    .sr-email-attachment-upload > span { display: grid; gap: .08rem; }
    .sr-email-attachment-upload strong { font-size: .76rem; }
    .sr-email-attachment-upload small { color: var(--sr-color-text-muted); font-size: .65rem; }
    .sr-email-preview { position: sticky; top: calc(var(--sr-topbar-height) + 1rem); min-width: 0; overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: 1rem; background: #fff; box-shadow: 0 18px 48px rgb(23 43 61 / 9%); }
    .sr-email-preview__chrome { display: flex; align-items: center; gap: .65rem; min-height: 3rem; padding: .78rem .9rem; border-bottom: 1px solid var(--sr-color-border); background: #f8fafc; color: #637286; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
    .sr-email-preview__status-dot { width: .62rem; height: .62rem; border-radius: 999px; background: #4169ff; box-shadow: 0 0 0 .34rem rgb(65 105 255 / 12%); }
    .sr-email-preview__mail-header { display: grid; gap: .8rem; padding: 1.1rem 1.15rem 1rem; background: #fff; }
    .sr-email-preview__mail-header > h3 { margin: 0; color: #101722; font-size: 1.18rem; line-height: 1.25; }
    .sr-email-preview__sender { display: flex; align-items: center; gap: .75rem; }
    .sr-email-preview__sender-avatar { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #eef2ff; color: #3155df; font-size: .95rem; font-weight: 800; }
    .sr-email-preview__sender dl { display: grid; gap: .18rem; margin: 0; min-width: 0; }
    .sr-email-preview__sender dl div { display: flex; gap: .32rem; min-width: 0; color: #607089; font-size: .76rem; line-height: 1.35; }
    .sr-email-preview__sender dt { color: #273548; font-weight: 760; }
    .sr-email-preview__sender dd { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
    .sr-email-preview__canvas { min-height: 36rem; padding: 1.35rem; border-top: 1px solid #e7ebf0; background: var(--sr-email-preview-bg, #f2f5f8); }
    .sr-email-preview__message { overflow: hidden; max-width: 35rem; margin: 0 auto; border: 1px solid rgb(17 24 32 / 5%); border-radius: 1rem; background: #fff; box-shadow: 0 12px 32px rgb(17 24 32 / 10%); }
    .sr-email-preview__accent { height: .28rem; background: var(--sr-email-preview-accent, #1767a5); }
    .sr-email-preview__body { padding: 1.75rem 1.8rem 1.45rem; }
    .sr-email-preview__logo { display: flex; min-height: 2.5rem; margin-bottom: 1.35rem; align-items: center; }
    .sr-email-preview__logo.is-left { justify-content: flex-start; }
    .sr-email-preview__logo.is-center { justify-content: center; }
    .sr-email-preview__logo.is-right { justify-content: flex-end; }
    .sr-email-preview__logo img { display: block; max-width: 10.5rem; max-height: 4.2rem; object-fit: contain; }
    .sr-email-preview__logo > span { color: var(--sr-color-brand-700); font-size: .9rem; font-weight: 820; }
    .sr-email-preview__body h3 { margin: 0 0 .75rem; color: #111827; font-size: 1.3rem; line-height: 1.25; }
    .sr-email-preview__body > p { margin: 0; color: #536274; font-size: .8rem; line-height: 1.62; white-space: pre-line; }
    .sr-email-preview__facts { overflow: hidden; margin: 1.1rem 0; border: 1px solid #dce5ed; border-radius: .72rem; background: #f8fafc; }
    .sr-email-preview__facts div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .62rem .75rem; border-bottom: 1px solid #dce5ed; }
    .sr-email-preview__facts div:last-child { border-bottom: 0; }
    .sr-email-preview__facts dt { color: #758392; font-size: .62rem; font-weight: 740; text-transform: uppercase; }
    .sr-email-preview__facts dd { margin: 0; color: #111827; font-size: .7rem; font-weight: 760; }
    .sr-email-preview__attachment { display: flex; align-items: center; gap: .65rem; padding: .68rem .72rem; border-radius: .68rem; background: color-mix(in srgb, var(--sr-email-preview-accent, #1767a5) 10%, white); color: var(--sr-email-preview-accent, #1767a5); }
    .sr-email-preview__attachment > span { display: grid; gap: .08rem; }
    .sr-email-preview__attachment strong { font-size: .72rem; }
    .sr-email-preview__attachment small { color: #5c6b79; font-size: .63rem; }
    .sr-email-preview__footer { margin-top: 1.15rem; }
    .sr-email-preview__privacy { padding: .85rem 1.8rem 1rem; border-top: 1px solid #e6edf2; background: #fbfcfd; color: #7a8794; font-size: .61rem; line-height: 1.5; white-space: pre-line; }


    @media (max-width: 78rem) {
        .sr-email-template-layout { grid-template-columns: 1fr; }
        .sr-email-preview { position: static; }
    }
    @media (max-width: 42rem) {
        .sr-email-logo-row { grid-template-columns: 1fr; }
        .sr-email-template-colors { grid-template-columns: 1fr; }
        .sr-email-attachment-row { grid-template-columns: auto minmax(0, 1fr) auto; }
        .sr-email-attachment-row .sr-switch { grid-column: 2; justify-self: start; }
        .sr-email-attachment-row .sr-icon-button { grid-column: 3; grid-row: 1 / span 2; }
    }



    /* Einheitlicher Auth-Bereich */
    .sr-auth-page--login .sr-auth-shell {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background:
            radial-gradient(circle at 50% 0%, rgb(var(--sr-color-brand-600-rgb) / 7%), transparent 28rem),
            var(--sr-color-background);
    }

    .sr-auth-page--login .sr-auth-shell::before,
    .sr-auth-page--login .sr-auth-shell::after {
        position: absolute;
        z-index: -1;
        width: 22rem;
        height: 22rem;
        border: 1px solid rgb(var(--sr-color-brand-600-rgb) / 6%);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .sr-auth-page--login .sr-auth-shell::before {
        top: -15rem;
        left: -12rem;
    }

    .sr-auth-page--login .sr-auth-shell::after {
        right: -15rem;
        bottom: -16rem;
        border-color: rgb(var(--sr-color-accent-500-rgb) / 6%);
    }

    .sr-auth-panel--login { width: min(100%, 31.5rem); }

    .sr-auth-page--login .sr-auth-card {
        width: 100%;
        padding: clamp(1.55rem, 4vw, 2.25rem);
        border: 1px solid var(--sr-color-border);
        border-radius: var(--sr-radius-xl);
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-md);
    }

    .sr-auth-page--login .sr-auth-card__brand--simple {
        justify-content: center;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--sr-color-border);
        margin-bottom: 1.45rem;
    }

    .sr-auth-page--login .sr-auth-card__brand--simple img {
        width: 9rem;
        height: auto;
    }

    .sr-auth-heading--login { margin-bottom: 1.55rem; }
    .sr-auth-heading--login h1 {
        margin-bottom: .4rem;
        font-size: clamp(1.7rem, 4vw, 2.05rem);
        letter-spacing: -.045em;
    }
    .sr-auth-heading--login p { max-width: 22rem; font-size: .84rem; line-height: 1.5; }

    .sr-auth-login-form { gap: 1.05rem; }
    .sr-auth-login-form .sr-field__label { margin-bottom: .48rem; font-size: .78rem; }

    .sr-auth-control {
        display: grid;
        min-height: 3.45rem;
        grid-template-columns: 3rem minmax(0, 1fr);
        align-items: center;
        overflow: hidden;
        border: 1px solid #d7dfe6;
        border-radius: .9rem;
        background: #f8fafb;
        transition: border-color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-auth-control:hover { border-color: #b9c7d2; }
    .sr-auth-control:focus-within {
        border-color: var(--sr-color-brand-500);
        background: #fff;
        box-shadow: 0 0 0 .25rem rgb(var(--sr-color-brand-600-rgb) / 10%);
    }

    .sr-auth-control--password { grid-template-columns: 3rem minmax(0, 1fr) auto; }

    .sr-auth-control__icon {
        display: grid;
        height: 100%;
        place-items: center;
        color: #80909d;
    }

    .sr-auth-control__icon svg,
    .sr-auth-submit svg,
    .sr-auth-security-note svg {
        width: 1.12rem;
        height: 1.12rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .sr-auth-control .sr-field__control {
        min-height: 3.35rem;
        padding: .75rem .25rem .75rem 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .sr-auth-control .sr-field__control:hover,
    .sr-auth-control .sr-field__control:focus { border: 0; box-shadow: none; }

    .sr-auth-control .sr-field__control:autofill,
    .sr-auth-control .sr-field__control:-webkit-autofill {
        box-shadow: 0 0 0 1000px #f8fafb inset;
        -webkit-box-shadow: 0 0 0 1000px #f8fafb inset;
        -webkit-text-fill-color: var(--sr-color-text);
    }

    .sr-auth-control:focus-within .sr-field__control:autofill,
    .sr-auth-control:focus-within .sr-field__control:-webkit-autofill {
        box-shadow: 0 0 0 1000px #fff inset;
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
    }

    .sr-auth-password-toggle {
        align-self: stretch;
        padding: 0 1rem;
        border: 0;
        border-left: 1px solid #e2e7eb;
        background: transparent;
        color: var(--sr-color-brand-700);
        font-size: .74rem;
        font-weight: 780;
        cursor: pointer;
    }

    .sr-auth-password-toggle:hover { background: var(--sr-color-brand-50); }

    .sr-auth-submit {
        min-height: 3.45rem;
        justify-content: space-between;
        padding-inline: 1.2rem;
        border-radius: .9rem;
        margin-top: .25rem;
        font-size: .92rem;
    }

    .sr-auth-submit svg { width: 1.05rem; height: 1.05rem; }

    .sr-auth-security-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;
        margin-top: 1.25rem;
        color: #84919b;
        font-size: .68rem;
        font-weight: 680;
    }

    .sr-auth-security-note svg { width: .9rem; height: .9rem; }

    /* Minimalistische 404-Seite ohne Card */
    .sr-error-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at 50% 8%, rgb(var(--sr-color-brand-600-rgb) / 6%), transparent 28rem),
            #fff;
    }

    .sr-error-shell {
        display: grid;
        min-height: 100vh;
        place-items: center;
        padding: clamp(1.5rem, 6vw, 4rem);
    }

    .sr-error-view {
        display: grid;
        width: min(100%, 38rem);
        justify-items: center;
        text-align: center;
    }

    .sr-error-view__brand {
        display: inline-flex;
        margin-bottom: clamp(2rem, 5vh, 3rem);
    }

    .sr-error-view__brand img {
        width: clamp(8.5rem, 20vw, 10.5rem);
        height: auto;
    }

    .sr-error-view__code {
        margin-bottom: .25rem;
        color: var(--sr-color-brand-100);
        font-size: clamp(4.8rem, 16vw, 7.3rem);
        font-weight: 860;
        line-height: .9;
        letter-spacing: -.09em;
        user-select: none;
    }

    .sr-error-view__eyebrow {
        position: relative;
        margin-bottom: .75rem;
        color: var(--sr-color-accent-600);
        font-size: .68rem;
        font-weight: 830;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .sr-error-view h1 {
        margin-bottom: .75rem;
        font-size: clamp(2rem, 6vw, 3rem);
        letter-spacing: -.055em;
    }

    .sr-error-view p {
        max-width: 31rem;
        margin: 0;
        color: var(--sr-color-text-muted);
        font-size: clamp(.9rem, 2vw, 1rem);
        line-height: 1.65;
    }

    .sr-error-view__action {
        min-width: 10.5rem;
        margin-top: 1.65rem;
    }



    .sr-order-page-heading { margin-bottom: 1.25rem; }
    .sr-order-title-line { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sr-order-priority { display: inline-flex; width: fit-content; align-items: center; margin-top: .35rem; padding: .2rem .48rem; border-radius: 999px; background: var(--sr-color-surface-soft); color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .02em; }
    .sr-order-priority--low { background: #f1f4f6; color: #60707c; }
    .sr-order-priority--normal { background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-order-priority--high { background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-order-priority--urgent { background: var(--sr-color-danger-soft); color: var(--sr-color-danger); }
    .sr-order-status { display: inline-flex; width: fit-content; align-items: center; gap: .42rem; padding: .34rem .58rem; border-radius: 999px; background: var(--sr-color-surface-soft); color: var(--sr-color-text-soft); font-size: .68rem; font-weight: 800; white-space: nowrap; }
    .sr-order-status__dot, .sr-calendar-legend-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
    .sr-order-status--new { background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-order-status--assigned { background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-order-status--progress, .sr-order-status--in-progress { background: #eeeafb; color: #6650a5; }
    .sr-order-status--completed { background: var(--sr-color-success-soft); color: var(--sr-color-success); }
    .sr-order-unscheduled { display: inline-flex; padding: .28rem .5rem; border: 1px dashed var(--sr-color-border-strong); border-radius: .45rem; color: var(--sr-color-text-muted); font-size: .7rem; }
    .sr-assignee-cell { display: flex; align-items: center; gap: .55rem; }
    .sr-avatar--small { width: 1.9rem; height: 1.9rem; font-size: .66rem; }
    .sr-avatar--mini { width: 1.55rem; height: 1.55rem; font-size: .58rem; }
    .sr-avatar--large { width: 3.4rem; height: 3.4rem; }
    .sr-order-empty-state { padding: 4rem 2rem; text-align: center; }
    .sr-order-empty-state > .sr-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; color: var(--sr-color-brand-500); }

}

/* Source: resources/css/04-components-05-orders-calendar.css */
@layer components {

    .sr-calendar-shell { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: 1rem; background: var(--sr-color-surface); box-shadow: var(--sr-shadow-sm); }
    .sr-calendar-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-calendar-toolbar h2 { margin: 0; font-size: 1rem; }
    .sr-calendar-toolbar__navigation, .sr-calendar-toolbar__legend { display: flex; align-items: center; gap: .45rem; }
    .sr-calendar-toolbar__legend { justify-content: flex-end; color: var(--sr-color-text-muted); font-size: .64rem; }
    .sr-calendar-toolbar__legend > span { display: flex; align-items: center; gap: .3rem; }
    .sr-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; min-height: 43rem; }
    .sr-calendar-grid-wrap { min-width: 0; border-right: 1px solid var(--sr-color-border); }
    .sr-calendar-weekdays, .sr-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sr-calendar-weekdays { border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface-soft); }
    .sr-calendar-weekdays span { padding: .55rem; color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 800; text-align: center; text-transform: uppercase; }
    .sr-calendar-day { min-height: 7.6rem; padding: .45rem; border-right: 1px solid var(--sr-color-border); border-bottom: 1px solid var(--sr-color-border); background: var(--sr-color-surface); }
    .sr-calendar-day:nth-child(7n) { border-right: 0; }
    .sr-calendar-day.is-outside { background: #fafbfc; opacity: .62; }
    .sr-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--sr-color-brand-500); }
    .sr-calendar-day > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
    .sr-calendar-day > header time { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: var(--sr-color-text-muted); font-size: .66rem; font-weight: 800; }
    .sr-calendar-day.is-today > header time { background: var(--sr-color-brand-600); color: white; }
    .sr-calendar-day > header a { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: .4rem; color: var(--sr-color-text-muted); font-weight: 800; text-decoration: none; opacity: 0; }
    .sr-calendar-day:hover > header a { opacity: 1; }
    .sr-calendar-day__orders { display: grid; gap: .25rem; }
    .sr-calendar-event { display: grid; grid-template-columns: auto 1fr; column-gap: .3rem; padding: .32rem .4rem; border-left: 3px solid currentColor; border-radius: .38rem; background: var(--sr-color-surface-soft); color: var(--sr-color-text-soft); font-size: .58rem; text-decoration: none; }
    .sr-calendar-event__time { color: inherit; font-weight: 800; }
    .sr-calendar-event strong { overflow: hidden; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-calendar-event small { grid-column: 1 / -1; overflow: hidden; margin-top: .08rem; color: var(--sr-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
    .sr-calendar-unscheduled { padding: 1rem; background: var(--sr-color-surface-soft); }
    .sr-calendar-unscheduled__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
    .sr-calendar-unscheduled__header h3 { margin: .08rem 0 0; font-size: .9rem; }
    .sr-calendar-unscheduled__header > span { display: grid; min-width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 999px; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); font-size: .68rem; font-weight: 800; }
    .sr-calendar-unscheduled__list { display: grid; gap: .55rem; }
    .sr-calendar-unscheduled-card { display: grid; gap: .15rem; padding: .65rem; border: 1px solid var(--sr-color-border); border-radius: .65rem; background: var(--sr-color-surface); color: inherit; text-decoration: none; }
    .sr-calendar-unscheduled-card > span { color: var(--sr-color-brand-700); font-size: .58rem; font-weight: 850; }
    .sr-calendar-unscheduled-card strong { font-size: .7rem; }
    .sr-calendar-unscheduled-card small { color: var(--sr-color-text-muted); font-size: .61rem; }
    .sr-calendar-unscheduled__empty { display: grid; justify-items: center; gap: .5rem; padding: 2rem .75rem; color: var(--sr-color-text-muted); font-size: .68rem; text-align: center; }

    .sr-order-form { display: grid; gap: 1rem; }
    .sr-order-form__main { display: grid; gap: 1rem; }
    .sr-order-form-card { padding: 1.35rem; }
    .sr-order-form-card > .sr-card__header { align-items: center; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-order-form-card .sr-card__header h2 { margin: .1rem 0; font-size: 1rem; }
    .sr-order-form-card .sr-card__header p { font-size: .75rem; }
    .sr-order-description { min-height: 9rem; }
    .sr-order-scheduling-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: 1.2rem; align-items: stretch; }
    .sr-day-schedule { overflow: hidden; border: 1px solid var(--sr-color-border); border-radius: .8rem; background: var(--sr-color-surface-soft); }
    .sr-day-schedule__header { display: flex; align-items: center; justify-content: space-between; padding: .8rem .9rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-day-schedule__header h3 { margin: .08rem 0 0; font-size: .84rem; }
    .sr-day-schedule__count { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 999px; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); font-size: .65rem; font-weight: 800; }
    .sr-day-schedule__body { display: grid; gap: .45rem; max-height: 19rem; overflow: auto; padding: .75rem; }
    .sr-day-schedule__empty { padding: 1.5rem .5rem; color: var(--sr-color-text-muted); font-size: .68rem; line-height: 1.5; text-align: center; }
    .sr-day-schedule__item { display: grid; grid-template-columns: 3.8rem 1fr; gap: .55rem; padding: .55rem; border: 1px solid var(--sr-color-border); border-radius: .6rem; background: var(--sr-color-surface); color: inherit; text-decoration: none; }
    .sr-day-schedule__time { color: var(--sr-color-brand-700); font-size: .63rem; font-weight: 850; }
    .sr-day-schedule__copy { display: grid; gap: .1rem; min-width: 0; }
    .sr-day-schedule__copy strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-day-schedule__copy span { color: var(--sr-color-text-muted); font-size: .6rem; }
    .sr-order-form-actions { position: sticky; z-index: 20; bottom: 1rem; display: flex; align-items: center; justify-content: flex-end; gap: .65rem; padding: .75rem; border: 1px solid var(--sr-color-border); border-radius: .9rem; background: rgb(255 255 255 / 93%); box-shadow: var(--sr-shadow-md); backdrop-filter: blur(10px); }
    .sr-order-customer-type { display: inline-flex; gap: .35rem; padding: .28rem; margin-bottom: 1rem; border: 1px solid var(--sr-color-border); border-radius: .7rem; background: var(--sr-color-surface-soft); }
    .sr-order-customer-type input { position: absolute; opacity: 0; }
    .sr-order-customer-type span { display: block; padding: .55rem .8rem; border-radius: .5rem; color: var(--sr-color-text-muted); font-size: .72rem; font-weight: 760; cursor: pointer; }
    .sr-order-customer-type input:checked + span { background: var(--sr-color-surface); color: var(--sr-color-brand-700); box-shadow: var(--sr-shadow-xs); }
    .sr-order-quick-customer__errors { margin-top: 1rem; padding: .75rem; border: 1px solid #f0bec1; border-radius: .65rem; background: var(--sr-color-danger-soft); color: var(--sr-color-danger); font-size: .7rem; }

    .sr-order-detail-heading__title, .sr-order-form-heading__title { display: flex; align-items: center; gap: .7rem; }
    .sr-order-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
    .sr-order-detail-main, .sr-order-detail-sidebar { display: grid; gap: 1rem; }
    .sr-order-detail-hero, .sr-order-detail-card, .sr-order-history-card, .sr-order-planning-card, .sr-order-assignee-card, .sr-order-next-step-card { padding: 1.25rem; }
    .sr-order-detail-hero__top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-order-detail-hero__top h2 { margin: .12rem 0 0; font-size: 1.05rem; }
    .sr-order-detail-description { padding: 1.15rem 0 .2rem; color: var(--sr-color-text-soft); font-size: .84rem; line-height: 1.7; }
    .sr-order-internal-note { display: flex; gap: .7rem; margin-top: 1rem; padding: .8rem; border-radius: .7rem; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-order-internal-note .sr-icon { flex: 0 0 auto; }
    .sr-order-internal-note p { margin: .2rem 0 0; color: var(--sr-color-text-soft); font-size: .72rem; line-height: 1.5; }
    .sr-order-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .sr-order-detail-item { display: grid; gap: .18rem; padding: .8rem; border: 1px solid var(--sr-color-border); border-radius: .7rem; background: var(--sr-color-surface-soft); }
    .sr-order-detail-item > span { color: var(--sr-color-text-muted); font-size: .61rem; font-weight: 780; text-transform: uppercase; }
    .sr-order-detail-item strong { font-size: .76rem; }
    .sr-order-detail-item small { color: var(--sr-color-text-muted); font-size: .66rem; }
    .sr-order-timeline { display: grid; gap: 0; }
    .sr-order-timeline__item { position: relative; display: grid; grid-template-columns: 1.4rem 1fr; gap: .55rem; padding-bottom: 1rem; }
    .sr-order-timeline__item:not(:last-child)::before { position: absolute; top: 1rem; bottom: 0; left: .34rem; width: 1px; background: var(--sr-color-border); content: ""; }
    .sr-order-timeline__dot { position: relative; z-index: 1; width: .7rem; height: .7rem; margin-top: .15rem; border: 2px solid var(--sr-color-brand-200); border-radius: 50%; background: var(--sr-color-surface); }
    .sr-order-timeline__item > div { display: grid; gap: .1rem; }
    .sr-order-timeline__item strong { font-size: .72rem; }
    .sr-order-timeline__item span, .sr-order-timeline__item small { color: var(--sr-color-text-muted); font-size: .63rem; }
    .sr-order-planning-card { text-align: center; }
    .sr-order-planning-card__icon { display: grid; width: 2.8rem; height: 2.8rem; margin: 0 auto .75rem; place-items: center; border-radius: .8rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-order-planning-card__date { display: block; margin: .4rem 0 .15rem; font-size: 1.2rem; }
    .sr-order-planning-card > span:not(.sr-section-kicker) { display: block; margin-bottom: .8rem; color: var(--sr-color-text-muted); font-size: .7rem; }
    .sr-order-assignee-card__person { display: flex; align-items: center; gap: .75rem; margin-top: .7rem; }
    .sr-order-assignee-card__person > div { display: grid; gap: .12rem; }
    .sr-order-assignee-card__person span { color: var(--sr-color-text-muted); font-size: .68rem; }
    .sr-order-assignee-card__empty { display: grid; justify-items: center; gap: .4rem; margin-top: .8rem; padding: 1rem .5rem; color: var(--sr-color-text-muted); text-align: center; }
    .sr-order-assignee-card__empty .sr-icon { width: 1.8rem; height: 1.8rem; }
    .sr-order-assignee-card__empty strong { color: var(--sr-color-text-soft); font-size: .76rem; }
    .sr-order-assignee-card__empty span { font-size: .65rem; line-height: 1.4; }
    .sr-order-next-step-card h3 { margin: .35rem 0; font-size: .88rem; }
    .sr-order-next-step-card p { color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.5; }
    .sr-order-next-step-card .sr-button { width: 100%; }
    .sr-order-meta { display: grid; gap: .25rem; padding: 0 .2rem; color: var(--sr-color-text-muted); font-size: .6rem; line-height: 1.4; }



    .sr-search-result__icon--order { background: var(--sr-color-warning-soft); color: var(--sr-color-warning); }
    .sr-dashboard-orders { margin-bottom: 1rem; }



    .sr-order-status--follow-up,
    .sr-order-status--follow-up-open { background: #fff1e6; color: #a85712; }

    .sr-order-next-visit {
        display: inline-grid;
        gap: .18rem;
        min-width: 7.25rem;
        padding: .55rem .65rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .7rem;
        background: var(--sr-color-surface-soft);
    }

    .sr-order-next-visit strong {
        font-size: .74rem;
    }

    .sr-order-next-visit span {
        color: var(--sr-color-text-muted);
        font-size: .67rem;
    }

    .sr-appointments-workspace {
        display: grid;
        gap: 1rem;
        min-height: calc(100dvh - var(--sr-topbar-height) - 3rem);
    }

    .sr-appointments-workspace__toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: start;
    }

    .sr-appointments-workspace__title p {
        max-width: 40rem;
        margin-bottom: 0;
        color: var(--sr-color-text-muted);
    }

    .sr-appointments-workspace__controls {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-end;
        gap: .75rem;
    }

    .sr-appointments-workspace__month {
        display: inline-flex;
        align-items: center;
        min-height: 2.55rem;
        padding: 0 .2rem;
        color: var(--sr-color-text-soft);
        font-size: 1rem;
        font-weight: 820;
        white-space: nowrap;
    }

    .sr-appointments-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-end;
        gap: .65rem;
    }

    .sr-calendar-summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .85rem;
    }

    .sr-calendar-summary-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .9rem;
        padding: .85rem 1rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .9rem;
        background: var(--sr-color-surface);
        color: var(--sr-color-text);
        text-decoration: none;
        box-shadow: var(--sr-shadow-xs);
        transition: var(--sr-transition);
    }

    .sr-calendar-summary-card:hover,
    .sr-calendar-summary-card.is-active {
        border-color: var(--sr-summary-color, var(--sr-color-brand-600));
        box-shadow: 0 12px 28px rgb(17 24 32 / 8%);
    }

    .sr-calendar-summary-card span {
        color: var(--sr-color-text-muted);
        font-size: .73rem;
        font-weight: 760;
    }

    .sr-calendar-summary-card strong {
        color: var(--sr-summary-color, var(--sr-color-brand-700));
        font-size: 1.25rem;
        line-height: 1;
    }

    .sr-calendar-summary-card--all { --sr-summary-color: var(--sr-color-brand-600); }
    .sr-calendar-summary-card--open { --sr-summary-color: var(--sr-color-warning); }
    .sr-calendar-summary-card--completed { --sr-summary-color: #2a5daa; }
    .sr-calendar-summary-card--follow-up { --sr-summary-color: #a85712; }

    .sr-appointments-calendar--fullscreen {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - var(--sr-topbar-height) - 14rem);
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-grid-wrap {
        display: grid;
        grid-template-rows: auto 1fr;
        flex: 1 1 auto;
        min-height: 0;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-grid {
        min-height: 0;
        grid-auto-rows: 1fr;
    }

    .sr-calendar-toolbar--full {
        grid-template-columns: minmax(0, 1.55fr) auto minmax(0, .95fr);
    }

    .sr-calendar-toolbar__navigation--inline {
        flex: 0 0 auto;
    }

    .sr-calendar-toolbar__legend-item {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        color: var(--sr-color-text-muted);
        font-size: .67rem;
        font-weight: 700;
    }

    .sr-calendar-day__orders {
        align-content: start;
    }

    .sr-calendar-event {
        align-items: start;
        gap: .05rem .3rem;
        min-height: 3rem;
        padding: .42rem .46rem;
        border-left: 4px solid currentColor;
        border-radius: .48rem;
        transition: var(--sr-transition);
    }

    .sr-calendar-event:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgb(17 24 32 / 9%);
    }

    .sr-calendar-event__time {
        min-width: 3.2rem;
    }

    .sr-calendar-event--new {
        background: #fff4dc;
        color: #95600f;
    }

    .sr-calendar-event--assigned {
        background: #eef4fa;
        color: var(--sr-color-brand-700);
    }

    .sr-calendar-event--progress {
        background: #eeeafb;
        color: #6650a5;
    }

    .sr-calendar-event--follow-up {
        background: #fff1e6;
        color: #a85712;
    }

    .sr-calendar-event--completed {
        background: #e8f0ff;
        color: #2a5daa;
    }



    .sr-app.sr-calendar-page .sr-shell__main {
        display: flex;
        min-height: 100dvh;
        flex-direction: column;
    }

    .sr-app.sr-calendar-page .sr-main.sr-main--calendar {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        padding: .9rem 1rem 1rem;
        overflow: hidden;
    }

    .sr-appointments-screen {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        gap: .75rem;
    }

    .sr-appointments-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 3.3rem;
    }

    .sr-appointments-topbar__title {
        display: flex;
        align-items: center;
        gap: .95rem;
        min-width: 0;
        flex-wrap: wrap;
    }

    .sr-appointments-topbar__title .sr-page-heading__eyebrow {
        margin-bottom: 0;
    }

    .sr-appointments-topbar__title h1 {
        margin: 0;
        font-size: clamp(1.75rem, 2.5vw, 2.35rem);
        line-height: 1;
    }

    .sr-appointments-topbar__controls,
    .sr-appointments-topbar__filters {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .55rem;
        flex-wrap: wrap;
    }

    .sr-appointments-topbar__controls {
        min-width: 0;
    }

    .sr-appointments-topbar__month {
        color: var(--sr-color-text-soft);
        font-size: 1rem;
        font-weight: 820;
        white-space: nowrap;
    }

    .sr-page-primary-action--compact {
        min-height: 2.35rem;
        padding: .55rem .85rem;
        box-shadow: 0 10px 20px rgb(30 191 115 / 16%);
    }

    .sr-calendar-toolbar--calendar-page {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .85rem;
        padding: .8rem 1rem;
    }

    .sr-appointments-status-pills {
        display: flex;
        align-items: center;
        gap: .55rem;
        min-width: 0;
        overflow-x: auto;
        padding-bottom: .05rem;
    }

    .sr-appointments-status-pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .45rem .7rem;
        border: 1px solid var(--sr-color-border);
        border-radius: 999px;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text);
        font-size: .74rem;
        font-weight: 760;
        text-decoration: none;
        white-space: nowrap;
        transition: var(--sr-transition);
    }

    .sr-appointments-status-pill strong {
        color: var(--sr-color-brand-700);
        font-size: .76rem;
    }

    .sr-appointments-status-pill:hover,
    .sr-appointments-status-pill.is-active {
        border-color: var(--sr-color-brand-400);
        background: var(--sr-color-surface);
        box-shadow: 0 6px 16px rgb(17 24 32 / 6%);
    }

    .sr-calendar-toolbar__legend--visible {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .75rem;
        flex-wrap: wrap;
    }

    .sr-calendar-toolbar__legend-total {
        color: var(--sr-color-text-muted);
        font-size: .68rem;
        font-weight: 700;
    }

    .sr-appointments-calendar--fullscreen {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-grid-wrap {
        display: grid;
        min-height: 0;
        flex: 1 1 auto;
        grid-template-rows: auto 1fr;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-grid {
        min-height: 0;
        height: 100%;
        grid-auto-rows: minmax(0, 1fr);
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-day {
        display: flex;
        min-height: 0;
        flex-direction: column;
        padding: .35rem;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-day__orders {
        min-height: 0;
        flex: 1 1 auto;
        overflow: auto;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-event {
        min-height: 0;
        padding: .38rem .42rem;
        font-size: .73rem;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-event strong {
        font-size: .71rem;
        line-height: 1.25;
    }

    .sr-appointments-calendar--fullscreen .sr-calendar-event small {
        font-size: .62rem;
        line-height: 1.25;
    }



    .sr-page-heading__eyebrow,
    .sr-section-kicker {
        display: none;
    }

    .sr-appointments-topbar {
        gap: .85rem;
        min-height: 2.9rem;
    }

    .sr-appointments-topbar__controls {
        gap: .5rem;
    }

    .sr-calendar-date-filter {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .sr-calendar-date-filter .sr-field__control,
    .sr-calendar-employee-filter .sr-field__control {
        min-width: 8.6rem;
        min-height: 2.3rem;
        padding-top: .44rem;
        padding-bottom: .44rem;
        background: var(--sr-color-surface);
        font-size: .8rem;
    }

    .sr-calendar-date-filter .sr-field__control:first-child {
        min-width: 9.5rem;
    }

    .sr-calendar-toolbar--calendar-page {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .72rem .95rem;
        gap: .7rem;
    }

    .sr-appointments-status-pills {
        gap: .45rem;
    }

    .sr-appointments-status-pill {
        padding: .42rem .68rem;
        border-color: #ccd7e6;
        background: #f7fafe;
        font-size: .72rem;
    }

    .sr-appointments-status-pill strong {
        color: #0f4f8c;
        font-size: .74rem;
    }

    .sr-appointments-status-pill.is-active {
        border-color: #0f4f8c;
        background: #fff;
        color: #0f172a;
        box-shadow: 0 8px 18px rgb(15 79 140 / 12%);
    }

    .sr-calendar-toolbar__legend--visible {
        gap: .65rem;
    }

    .sr-calendar-toolbar__legend-item {
        font-size: .7rem;
        font-weight: 760;
    }

    .sr-calendar-legend-dot {
        width: .62rem;
        height: .62rem;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 36%);
    }

    .sr-calendar-legend-dot.sr-calendar-event--assigned,
    .sr-calendar-event--assigned {
        background: #d7eaff;
        color: #0f4f8c;
    }

    .sr-calendar-legend-dot.sr-calendar-event--progress,
    .sr-calendar-event--progress {
        background: #e4dbff;
        color: #5931b5;
    }

    .sr-calendar-legend-dot.sr-calendar-event--follow-up,
    .sr-calendar-event--follow-up {
        background: #ffe3cf;
        color: #b75510;
    }

    .sr-calendar-legend-dot.sr-calendar-event--completed,
    .sr-calendar-event--completed {
        background: #cfe0ff;
        color: #2054b3;
    }

    .sr-calendar-event--new {
        background: #ffeab2;
        color: #8c5a00;
    }

    .sr-calendar-event {
        border-left-width: 5px;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%);
    }

    .sr-calendar-event strong {
        color: currentColor;
        font-weight: 800;
    }

    .sr-calendar-event small {
        color: color-mix(in srgb, currentColor 72%, white);
        font-weight: 600;
    }

    .sr-calendar-toolbar__legend-total {
        padding-right: .15rem;
        color: var(--sr-color-text-soft);
        font-size: .72rem;
        font-weight: 760;
    }




    .sr-calendar-date-filter {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .sr-calendar-date-filter__group {
        display: grid;
        grid-template-columns: minmax(10rem, 12rem) minmax(5.8rem, 6.8rem);
        gap: .45rem;
        align-items: center;
    }

    .sr-calendar-date-filter .sr-field__control,
    .sr-calendar-date-filter .sr-field__control:first-child {
        width: 100%;
        min-width: 0;
    }



    /* Kalender-Topbar: alle Bedienelemente auf einer sauberen gemeinsamen Höhe. */
    .sr-appointments-topbar__controls {
        --sr-calendar-control-height: 2.55rem;
        align-items: center;
    }

    .sr-appointments-topbar__controls .sr-calendar-toolbar__navigation {
        align-items: center;
        gap: .45rem;
    }

    .sr-appointments-topbar__controls .sr-icon-button,
    .sr-appointments-topbar__controls .sr-button,
    .sr-appointments-topbar__controls .sr-field__control,
    .sr-calendar-date-filter .sr-field__control {
        height: var(--sr-calendar-control-height);
        min-height: var(--sr-calendar-control-height);
        border-radius: .72rem;
    }

    .sr-appointments-topbar__controls .sr-icon-button {
        width: var(--sr-calendar-control-height);
    }

    .sr-appointments-topbar__controls .sr-button,
    .sr-calendar-new-order-button {
        align-self: center;
        margin-top: 0;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

    .sr-calendar-new-order-button {
        min-height: var(--sr-calendar-control-height);
        box-shadow: 0 8px 18px rgb(47 184 116 / 18%);
    }

    .sr-calendar-date-filter,
    .sr-calendar-date-filter__group {
        align-items: center;
    }

    .sr-calendar-date-filter__group {
        grid-template-columns: minmax(9.5rem, 10.75rem) minmax(5.6rem, 6.25rem);
    }

    .sr-calendar-employee-filter {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .sr-calendar-employee-filter .sr-field__control {
        min-width: 12.5rem;
        min-height: 2.35rem;
        height: 2.35rem;
        border-radius: .7rem;
        padding-top: .42rem;
        padding-bottom: .42rem;
        font-size: .78rem;
    }



    .sr-time-heading--simple,
    .sr-time-heading--admin {
        margin-bottom: 1rem;
    }

    .sr-time-area-switch {
        display: inline-flex;
        gap: .3rem;
        margin-bottom: 1rem;
        padding: .3rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .85rem;
        background: var(--sr-color-surface-soft);
    }
}

/* Source: resources/css/04-components-06-time-planning.css */
@layer components {
    .sr-time-area-switch__item {
        display: inline-flex;
        min-height: 2.55rem;
        align-items: center;
        gap: .45rem;
        padding: .55rem .85rem;
        border-radius: .62rem;
        color: var(--sr-color-text-muted);
        font-size: .8rem;
        font-weight: 780;
        text-decoration: none;
        transition: var(--sr-transition);
    }

    .sr-time-area-switch__item:hover {
        color: var(--sr-color-brand-700);
    }

    .sr-time-area-switch__item.is-active {
        background: var(--sr-color-surface);
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-time-clock--employee {
        border-color: var(--sr-color-border);
        background: var(--sr-color-surface);
    }

    .sr-time-clock--employee.sr-time-clock--working {
        border-color: #d5eadf;
        background:
            linear-gradient(135deg, rgb(29 191 115 / 5%), transparent 42%),
            var(--sr-color-surface);
    }

    .sr-time-clock--employee.sr-time-clock--paused {
        border-color: #d6e2f5;
        background:
            linear-gradient(135deg, rgb(79 134 217 / 5%), transparent 42%),
            var(--sr-color-surface);
    }

    .sr-time-clock--employee.sr-time-clock--not_started,
    .sr-time-clock--employee.sr-time-clock--ended {
        border-color: #eadfcd;
        background:
            linear-gradient(135deg, rgb(242 161 38 / 4%), transparent 42%),
            var(--sr-color-surface);
    }

    .sr-time-clock__done {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .7rem .9rem;
        border-radius: .7rem;
        background: var(--sr-color-success-soft);
        color: var(--sr-color-success);
        font-size: .78rem;
        font-weight: 800;
    }

    .sr-time-daily-card {
        padding: 1.15rem;
    }

    .sr-time-daily-card > .sr-card__header {
        margin-bottom: .9rem;
        padding-bottom: .8rem;
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-time-month-card--employee {
        margin-top: .15rem;
    }

    .sr-time-admin-toolbar {
        display: flex;
        align-items: center;
        gap: .7rem;
        margin-bottom: 1rem;
        padding: .8rem 1rem;
    }

    .sr-time-admin-toolbar__month {
        display: flex;
        align-items: center;
        gap: .45rem;
    }

    .sr-time-admin-toolbar__month strong {
        min-width: 5rem;
        text-align: center;
        font-size: .86rem;
    }

    .sr-time-admin-toolbar__employee {
        margin-left: auto;
    }

    .sr-time-admin-toolbar__employee .sr-field__control {
        min-width: 12rem;
        min-height: 2.45rem;
    }

    .sr-time-admin-stats {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .85rem;
        margin-bottom: 1rem;
    }

    .sr-time-admin-stat {
        display: grid;
        gap: .22rem;
        padding: .95rem 1rem;
    }

    .sr-time-admin-stat > span {
        color: var(--sr-color-text-muted);
        font-size: .68rem;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: .035em;
    }

    .sr-time-admin-stat > strong {
        font-size: 1.35rem;
        line-height: 1.1;
        letter-spacing: -.035em;
    }

    .sr-time-admin-stat > small {
        color: var(--sr-color-text-muted);
        font-size: .65rem;
    }

    .sr-time-admin-stat.is-warning {
        border-color: #efcf9a;
        background: #fffaf1;
    }

    .sr-time-employee-overview {
        margin-bottom: 1rem;
    }

    .sr-time-employee-overview tbody tr.is-selected {
        background: var(--sr-color-brand-50);
    }

    .sr-time-admin-detail__meta {
        display: flex;
        align-items: center;
        gap: .45rem;
        flex-wrap: wrap;
    }



    /* Arbeitszeit-Schnellsteuerung: direkter Zugriff, ruhige Statusdarstellung. */
    .sr-topbar-time {
        position: relative;
        display: block;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .sr-topbar-time__trigger {
        position: relative;
        display: inline-flex;
        width: auto;
        min-width: 12.2rem;
        height: 3rem;
        align-items: center;
        justify-content: flex-start;
        gap: .72rem;
        padding: 0 .72rem 0 .58rem;
        border: 1px solid color-mix(in srgb, var(--sr-color-border) 88%, var(--sr-color-brand-200));
        border-radius: 1.05rem;
        background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--sr-color-surface-soft) 58%, #fff) 100%);
        color: var(--sr-color-brand-700);
        box-shadow: 0 1px 2px rgb(17 24 32 / 4%), 0 6px 18px rgb(17 24 32 / 5%);
        transition: border-color var(--sr-transition), box-shadow var(--sr-transition), transform var(--sr-transition), background-color var(--sr-transition);
    }

    .sr-topbar-time__trigger:hover {
        border-color: color-mix(in srgb, var(--sr-color-brand-300) 58%, var(--sr-color-border));
        background: #fff;
        box-shadow: 0 2px 4px rgb(17 24 32 / 5%), 0 10px 24px rgb(17 24 32 / 8%);
        transform: translateY(-1px);
    }

    .sr-topbar-time__trigger:focus-visible {
        outline: none;
        border-color: var(--sr-color-brand-400);
        background: #fff;
        box-shadow: 0 0 0 3px rgb(var(--sr-color-brand-600-rgb) / 12%), 0 10px 24px rgb(17 24 32 / 8%);
    }

    .sr-topbar-time__trigger[aria-expanded="true"] {
        border-color: color-mix(in srgb, var(--sr-color-brand-300) 64%, var(--sr-color-border));
        background: #fff;
        box-shadow: 0 0 0 3px rgb(var(--sr-color-brand-600-rgb) / 8%), 0 10px 24px rgb(17 24 32 / 8%);
        transform: none;
    }

    .sr-topbar-time__icon {
        position: relative;
        display: grid;
        width: 2.1rem;
        height: 2.1rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .76rem;
        background: color-mix(in srgb, var(--sr-color-brand-50) 82%, #fff);
        box-shadow: inset 0 0 0 1px rgb(var(--sr-color-brand-600-rgb) / 5%);
    }

    .sr-topbar-time__icon .sr-icon {
        width: 1.42rem;
        height: 1.42rem;
    }

    .sr-topbar-time__indicator {
        position: absolute;
        right: -.12rem;
        bottom: -.11rem;
        width: .58rem;
        height: .58rem;
        border: 2px solid var(--sr-color-surface);
        border-radius: 50%;
        background: #a7b0b8;
        box-sizing: content-box;
        box-shadow: 0 1px 3px rgb(17 24 32 / 12%);
    }

    .sr-topbar-time__summary {
        display: grid;
        min-width: 6.35rem;
        gap: .08rem;
        text-align: left;
        line-height: 1;
    }

    .sr-topbar-time__summary > span {
        color: var(--sr-color-text-muted);
        font-size: .62rem;
        font-weight: 760;
        letter-spacing: .005em;
        white-space: nowrap;
    }

    .sr-topbar-time__summary > strong {
        color: var(--sr-color-text);
        font-size: .86rem;
        font-variant-numeric: tabular-nums;
        font-weight: 860;
        letter-spacing: -.015em;
        white-space: nowrap;
    }

    .sr-topbar-time__chevron {
        display: grid;
        width: 1.35rem;
        height: 1.35rem;
        margin-left: auto;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .45rem;
        color: var(--sr-color-text-muted);
        transition: color var(--sr-transition), transform var(--sr-transition), background-color var(--sr-transition);
    }

    .sr-topbar-time__chevron .sr-icon {
        width: .92rem;
        height: .92rem;
    }

    .sr-topbar-time__trigger:hover .sr-topbar-time__chevron {
        color: var(--sr-color-brand-700);
        background: var(--sr-color-brand-50);
        transform: translateX(1px);
    }

    .sr-topbar-time__trigger[aria-expanded="true"] .sr-topbar-time__chevron {
        color: var(--sr-color-brand-700);
        transform: rotate(90deg);
    }

    .sr-topbar-time--visual-working .sr-topbar-time__indicator { background: #1dbf73; }
    .sr-topbar-time--visual-paused .sr-topbar-time__indicator { background: #4f86d9; }
    .sr-topbar-time--visual-stopped .sr-topbar-time__indicator { background: #f2a126; }
    .sr-topbar-time--visual-overtime .sr-topbar-time__indicator { background: #dc4b4b; }

    .sr-topbar-time-panel {
        --sr-time-state-color: #f2a126;
        --sr-time-state-soft: #fff7e9;
        position: fixed;
        top: calc(var(--sr-topbar-height) + .55rem);
        right: 1rem;
        z-index: 120;
        display: grid;
        width: min(24rem, calc(100vw - 2rem));
        overflow: hidden;
        border: 1px solid var(--sr-color-border);
        border-radius: 1rem;
        background: var(--sr-color-surface);
        box-shadow: 0 20px 52px rgb(17 24 32 / 17%);
    }

    .sr-topbar-time-backdrop,
    .sr-user-menu-backdrop {
        position: fixed;
        inset: var(--sr-topbar-height) 0 0 var(--sr-sidebar-width);
        z-index: 18;
        display: block;
        padding: 0;
        background: var(--sr-popover-backdrop-color);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .sr-topbar-time-backdrop[hidden],
    .sr-user-menu-backdrop[hidden] { display: none; }

    .sr-topbar-time-panel[hidden] { display: none; }

    .sr-topbar-time-panel--visual-working {
        --sr-time-state-color: #1aa968;
        --sr-time-state-soft: #edf9f3;
    }

    .sr-topbar-time-panel--visual-paused {
        --sr-time-state-color: #3f74c7;
        --sr-time-state-soft: #eef4fd;
    }

    .sr-topbar-time-panel--visual-stopped {
        --sr-time-state-color: #d98a18;
        --sr-time-state-soft: #fff7e9;
    }

    .sr-topbar-time-panel--visual-overtime {
        --sr-time-state-color: #c93d3d;
        --sr-time-state-soft: #fff0f0;
    }

    .sr-topbar-time-panel__header {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1rem;
        padding: 1rem 1.05rem .82rem;
        border-bottom: 1px solid var(--sr-color-border);
        background: var(--sr-time-state-soft);
    }

    .sr-topbar-time-panel__header > div {
        display: grid;
        gap: .1rem;
    }

    .sr-topbar-time-panel__header span {
        color: var(--sr-color-text-muted);
        font-size: .67rem;
        font-weight: 760;
    }

    .sr-topbar-time-panel__header strong {
        color: var(--sr-time-state-color);
        font-size: .98rem;
        font-weight: 850;
        line-height: 1.25;
    }

    .sr-topbar-time-panel__clock {
        position: relative;
        display: grid;
        justify-items: center;
        gap: .22rem;
        padding: 1.35rem 1rem 1.2rem;
        background: linear-gradient(180deg, var(--sr-time-state-soft) 0%, var(--sr-color-surface) 100%);
        text-align: center;
    }

    .sr-topbar-time-panel__state-dot {
        width: .68rem;
        height: .68rem;
        margin-bottom: .25rem;
        border: 2px solid var(--sr-color-surface);
        border-radius: 50%;
        background: var(--sr-time-state-color);
        box-shadow: 0 0 0 .3rem var(--sr-time-state-soft);
    }

    .sr-topbar-time-panel__clock > strong {
        margin-top: .08rem;
        color: var(--sr-color-text);
        font-size: 3.15rem;
        font-variant-numeric: tabular-nums;
        font-weight: 900;
        line-height: .98;
        letter-spacing: -.055em;
    }

    .sr-topbar-time-panel__clock > span {
        color: var(--sr-color-text-soft);
        font-size: .82rem;
        font-weight: 800;
    }

    .sr-topbar-time-panel__clock > small {
        margin-top: .1rem;
        color: var(--sr-color-text-muted);
        font-size: .75rem;
    }

    .sr-topbar-time-panel__feedback {
        display: inline-flex;
        min-height: 1.85rem;
        align-items: center;
        justify-content: center;
        justify-self: center;
        margin-bottom: .35rem;
        padding: .34rem .72rem;
        border: 1px solid #cdebdc;
        border-radius: 999px;
        background: #f0faf5;
        color: #16774c;
        font-size: .71rem;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
    }

    .sr-topbar-time-panel__feedback[hidden] { display: none; }

    .sr-topbar-time-panel__feedback.is-error {
        border-color: #f0caca;
        background: #fff2f2;
        color: #b52d2d;
    }

    .sr-topbar-time-panel__actions,
    .sr-topbar-time-panel__actions--single {
        display: grid;
        grid-template-columns: 1fr;
        gap: .68rem;
        padding: .95rem 1rem 1.05rem;
        border-top: 1px solid var(--sr-color-border);
        background: var(--sr-color-surface);
    }

    .sr-topbar-time-panel__actions .sr-button {
        width: 100%;
        min-height: 3.45rem;
        justify-content: center;
        border-radius: .82rem;
        font-size: .9rem;
        font-weight: 850;
        box-shadow: none;
    }

    .sr-topbar-time-panel--working .sr-topbar-time-panel__primary {
        border-color: #4f86d9;
        background: #4f86d9;
        color: #fff;
    }

    .sr-topbar-time-panel--paused .sr-topbar-time-panel__primary,
    .sr-topbar-time-panel--not_started .sr-topbar-time-panel__primary,
    .sr-topbar-time-panel--ended .sr-topbar-time-panel__primary {
        border-color: #1dbf73;
        background: #1dbf73;
        color: #fff;
    }

    .sr-topbar-time-panel__actions .sr-topbar-time-panel__end {
        width: 100%;
        min-width: 0;
        min-height: 3.1rem;
        justify-self: stretch;
        border-color: var(--sr-color-border-strong);
        background: var(--sr-color-surface);
        color: var(--sr-color-text-soft);
        font-size: .76rem;
        font-weight: 800;
    }

    .sr-topbar-time-panel__actions .sr-button:hover:not(:disabled),
    .sr-topbar-time-panel__actions .sr-button:focus-visible {
        transform: none;
        filter: none;
        box-shadow: none;
    }

    .sr-topbar-time-panel--working .sr-topbar-time-panel__primary:hover:not(:disabled),
    .sr-topbar-time-panel--working .sr-topbar-time-panel__primary:focus-visible {
        border-color: #4278cb;
        background: #4278cb;
        color: #fff;
    }

    .sr-topbar-time-panel--paused .sr-topbar-time-panel__primary:hover:not(:disabled),
    .sr-topbar-time-panel--paused .sr-topbar-time-panel__primary:focus-visible,
    .sr-topbar-time-panel--not_started .sr-topbar-time-panel__primary:hover:not(:disabled),
    .sr-topbar-time-panel--not_started .sr-topbar-time-panel__primary:focus-visible,
    .sr-topbar-time-panel--ended .sr-topbar-time-panel__primary:hover:not(:disabled),
    .sr-topbar-time-panel--ended .sr-topbar-time-panel__primary:focus-visible {
        border-color: #17a965;
        background: #17a965;
        color: #fff;
    }

    .sr-topbar-time-panel__actions .sr-topbar-time-panel__end:hover:not(:disabled),
    .sr-topbar-time-panel__actions .sr-topbar-time-panel__end:focus-visible {
        border-color: var(--sr-color-border-strong);
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text);
    }

    .sr-topbar-time-panel__details {
        position: relative;
        display: flex;
        min-height: 3.55rem;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: .9rem 3rem .9rem 1rem;
        border-top: 1px solid var(--sr-color-border);
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-brand-700);
        font-size: .76rem;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
    }

    .sr-topbar-time-panel__details:hover,
    .sr-topbar-time-panel__details:focus-visible {
        background: var(--sr-color-brand-50);
    }

    .sr-topbar-time-panel__details > span:last-child {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
    }

    @media (min-width: 58.01rem) and (max-width: 72rem) {
        .sr-topbar-time__trigger {
            min-width: 11.35rem;
            padding-right: .64rem;
        }

        .sr-topbar-time__summary { min-width: 5.85rem; }
    }

    @media (max-width: 58rem) {
        body.sr-time-menu-open { overflow: hidden; }

        .sr-topbar-time__trigger {
            width: auto;
            min-width: 11.45rem;
            height: 3rem;
            gap: .6rem;
            padding: 0 .58rem 0 .52rem;
            border-radius: 1rem;
        }

        .sr-topbar-time__icon {
            width: 1.95rem;
            height: 1.95rem;
            border-radius: .7rem;
        }

        .sr-topbar-time__icon .sr-icon {
            width: 1.32rem;
            height: 1.32rem;
        }

        .sr-topbar-time__summary {
            display: grid;
            min-width: 5.55rem;
        }

        .sr-topbar-time__summary > span { font-size: .58rem; }
        .sr-topbar-time__summary > strong { font-size: .8rem; }

        .sr-topbar-time__chevron {
            width: 1.2rem;
            height: 1.2rem;
        }

        .sr-avatar--topbar {
            width: 3rem;
            height: 3rem;
        }

        .sr-user-trigger {
            min-width: 3rem;
            min-height: 3rem;
        }

        .sr-topbar-time-backdrop:not([hidden]) {
            inset: 0;
        }

        .sr-user-menu-backdrop:not([hidden]) {
            inset: var(--sr-topbar-height) 0 0 0;
        }

        /* Bottom sheets and mobile search intentionally take focus. Desktop
           popovers and the account dropdown remain visually layer-free. */
        .sr-topbar-time-backdrop:not([hidden]),
        body.sr-search-open .sr-search-backdrop {
            background: var(--sr-mobile-focus-backdrop-color);
            -webkit-backdrop-filter: blur(var(--sr-mobile-focus-backdrop-blur));
            backdrop-filter: blur(var(--sr-mobile-focus-backdrop-blur));
        }

        .sr-user-menu-backdrop:not([hidden]) {
            background: transparent;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .sr-topbar-time-panel {
            position: fixed;
            inset: auto max(.8rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
            z-index: 120;
            display: grid;
            width: auto;
            max-height: calc(100dvh - 1.6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            overflow: auto;
            border: 1px solid rgb(255 255 255 / 65%);
            border-radius: 1.25rem;
            background: var(--sr-color-surface);
            box-shadow: 0 24px 70px rgb(10 34 52 / 28%);
            overscroll-behavior: contain;
        }

        .sr-topbar-time-panel[hidden] { display: none; }

        .sr-topbar-time-panel__header {
            padding: .95rem 1rem .78rem;
            border-bottom-color: color-mix(in srgb, var(--sr-time-state-color) 16%, var(--sr-color-border));
        }

        .sr-topbar-time-panel__clock {
            min-height: 0;
            padding: 1.15rem 1rem 1.25rem;
        }

        .sr-topbar-time-panel__clock > strong {
            font-size: clamp(3.25rem, 14vw, 4.5rem);
        }

        .sr-topbar-time-panel__clock > span { font-size: .92rem; }
        .sr-topbar-time-panel__clock > small { font-size: .82rem; }

        .sr-topbar-time-panel__state-dot {
            width: .76rem;
            height: .76rem;
        }

        .sr-topbar-time-panel__feedback {
            min-height: 1.9rem;
            margin-bottom: .35rem;
            padding: .38rem .78rem;
            font-size: .78rem;
        }

        .sr-topbar-time-panel__actions,
        .sr-topbar-time-panel__actions--single {
            gap: .65rem;
            padding: .9rem 1rem 1rem;
        }

        .sr-topbar-time-panel__actions .sr-button {
            min-height: 3.65rem;
            border-radius: .9rem;
            font-size: .98rem;
        }

        .sr-topbar-time-panel__actions .sr-topbar-time-panel__end {
            width: 100%;
            min-width: 0;
            min-height: 3.35rem;
            font-size: .92rem;
        }

        .sr-topbar-time-panel__details {
            min-height: 3.75rem;
            margin-top: 0;
            padding: .9rem 3.1rem calc(.9rem + env(safe-area-inset-bottom));
            font-size: .9rem;
        }
    }

    @media (max-width: 42rem) {
        .sr-topbar-time__trigger {
            width: auto;
            min-width: 9.6rem;
            height: 2.75rem;
            gap: .5rem;
            padding: 0 .48rem 0 .46rem;
            border-radius: .92rem;
        }

        .sr-topbar-time__icon {
            width: 1.75rem;
            height: 1.75rem;
            border-radius: .62rem;
        }

        .sr-topbar-time__icon .sr-icon {
            width: 1.18rem;
            height: 1.18rem;
        }

        .sr-topbar-time__summary { min-width: 4.75rem; }
        .sr-topbar-time__summary > span { font-size: .54rem; }
        .sr-topbar-time__summary > strong { font-size: .72rem; }

        .sr-topbar-time__chevron {
            width: 1.05rem;
            height: 1.05rem;
        }

        .sr-topbar-time__chevron .sr-icon {
            width: .78rem;
            height: .78rem;
        }

        .sr-avatar--topbar {
            width: 2.75rem;
            height: 2.75rem;
        }

        .sr-user-trigger {
            min-width: 2.75rem;
            min-height: 2.75rem;
        }

        .sr-topbar-time-panel {
            inset: auto 0 0;
            max-height: min(88dvh, 42rem);
            border-right: 0;
            border-bottom: 0;
            border-left: 0;
            border-radius: 1.35rem 1.35rem 0 0;
        }

        .sr-topbar-time-panel__header {
            padding: .9rem .9rem .75rem;
        }

        .sr-topbar-time-panel__clock {
            padding: 1.05rem .9rem 1.15rem;
        }

        .sr-topbar-time-panel__actions,
        .sr-topbar-time-panel__actions--single {
            padding-right: .9rem;
            padding-left: .9rem;
        }
    }


    .sr-calendar-day > header a {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: #22b86f;
        color: #fff;
        font-size: 1rem;
        line-height: 1;
        opacity: 1;
        box-shadow: 0 5px 12px rgb(34 184 111 / 22%);
        transition: transform var(--sr-transition), background var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-calendar-day > header a:hover,
    .sr-calendar-day > header a:focus-visible {
        background: #179b5d;
        color: #fff;
        outline: 0;
        transform: translateY(-1px);
        box-shadow: 0 7px 16px rgb(34 184 111 / 28%);
    }

    .sr-calendar-day__more {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        max-width: 100%;
        min-height: 1.55rem;
        padding: .18rem .42rem;
        border: 0;
        border-radius: .42rem;
        background: transparent;
        color: var(--sr-color-brand-700);
        font: inherit;
        font-size: .62rem;
        font-weight: 820;
        text-align: left;
        cursor: pointer;
    }

    .sr-calendar-day__more:hover,
    .sr-calendar-day__more:focus-visible {
        background: var(--sr-color-brand-50);
        outline: 0;
    }

    .sr-calendar-day-drawer[hidden] {
        display: none;
    }

    .sr-calendar-day-drawer {
        position: fixed;
        inset: 0;
        z-index: 190;
        display: grid;
        grid-template-columns: 1fr minmax(22rem, 31rem);
        pointer-events: none;
    }

    .sr-calendar-day-drawer__backdrop {
        grid-column: 1 / -1;
        grid-row: 1;
        border: 0;
        background: rgb(6 28 44 / 28%);
        opacity: 0;
        backdrop-filter: blur(2px);
        cursor: default;
        transition: opacity 180ms ease;
    }

    .sr-calendar-day-drawer__panel {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        height: 100dvh;
        overflow: hidden;
        background: #f6f9fc;
        box-shadow: -22px 0 58px rgb(10 34 52 / 18%);
        transform: translateX(100%);
        transition: transform 220ms ease;
    }

    .sr-calendar-day-drawer.is-open {
        pointer-events: auto;
    }

    .sr-calendar-day-drawer.is-open .sr-calendar-day-drawer__backdrop {
        opacity: 1;
    }

    .sr-calendar-day-drawer.is-open .sr-calendar-day-drawer__panel {
        transform: translateX(0);
    }

    .sr-calendar-day-drawer__day {
        display: grid;
        height: 100%;
        min-height: 0;
        grid-template-rows: auto 1fr;
    }

    .sr-calendar-day-drawer__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.2rem 1rem;
        border-bottom: 1px solid var(--sr-color-border);
        background: #fff;
    }

    .sr-calendar-day-drawer__header > div:first-child {
        display: grid;
        gap: .15rem;
    }

    .sr-calendar-day-drawer__header span {
        color: var(--sr-color-brand-700);
        font-size: .72rem;
        font-weight: 820;
    }

    .sr-calendar-day-drawer__header h2 {
        margin: 0;
        font-size: 1.45rem;
        line-height: 1.1;
    }

    .sr-calendar-day-drawer__header p {
        margin: .18rem 0 0;
        color: var(--sr-color-text-muted);
        font-size: .78rem;
        font-weight: 700;
    }

    .sr-calendar-day-drawer__header-actions {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .sr-calendar-day-drawer__add {
        display: grid;
        width: 2.35rem;
        height: 2.35rem;
        place-items: center;
        border-radius: 50%;
        background: #22b86f;
        color: #fff;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 7px 16px rgb(34 184 111 / 22%);
    }

    .sr-calendar-day-drawer__add:hover,
    .sr-calendar-day-drawer__add:focus-visible {
        background: #179b5d;
        color: #fff;
        outline: 0;
    }

    .sr-calendar-day-drawer__close {
        width: 2.35rem;
        height: 2.35rem;
        font-size: 1.25rem;
    }

    .sr-calendar-day-drawer__list {
        display: grid;
        align-content: start;
        gap: .65rem;
        min-height: 0;
        padding: 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .sr-calendar-day-drawer__event {
        display: grid;
        grid-template-columns: 4.25rem minmax(0, 1fr) auto auto;
        gap: .8rem;
        align-items: center;
        min-width: 0;
        padding: .85rem .9rem;
        border: 1px solid rgb(20 61 97 / 8%);
        border-left: 5px solid currentColor;
        border-radius: .85rem;
        text-decoration: none;
        box-shadow: 0 8px 20px rgb(13 38 59 / 5%);
        transition: transform var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-calendar-day-drawer__event:hover,
    .sr-calendar-day-drawer__event:focus-visible {
        outline: 0;
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgb(13 38 59 / 9%);
    }

    .sr-calendar-day-drawer__time {
        display: grid;
        gap: .05rem;
        align-self: start;
    }

    .sr-calendar-day-drawer__time strong {
        font-size: .85rem;
        font-weight: 850;
    }

    .sr-calendar-day-drawer__time span {
        color: color-mix(in srgb, currentColor 72%, #fff);
        font-size: .62rem;
        font-weight: 700;
    }

    .sr-calendar-day-drawer__copy {
        display: grid;
        gap: .14rem;
        min-width: 0;
    }

    .sr-calendar-day-drawer__copy strong {
        overflow: hidden;
        color: currentColor;
        font-size: .82rem;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-calendar-day-drawer__copy span {
        overflow: hidden;
        color: color-mix(in srgb, currentColor 82%, #23384a);
        font-size: .72rem;
        font-weight: 720;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-calendar-day-drawer__copy small {
        overflow: hidden;
        color: var(--sr-color-text-muted);
        font-size: .66rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-calendar-day-drawer__assignee {
        max-width: 7rem;
        overflow: hidden;
        padding: .28rem .48rem;
        border-radius: 999px;
        background: rgb(255 255 255 / 65%);
        color: currentColor;
        font-size: .64rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-calendar-day-drawer__arrow {
        color: currentColor;
        font-size: 1rem;
        font-weight: 900;
    }

    body.sr-calendar-drawer-open {
        overflow: hidden;
    }



    /* Kalender: „Neuer Auftrag“-Plus bewusst dezent, erst bei Zell-Hover grün. */
    .sr-calendar-day > header a {
        display: inline-grid;
        width: 1.45rem;
        height: 1.45rem;
        flex: 0 0 1.45rem;
        place-items: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #e8edf1;
        color: #788692;
        font-size: .92rem;
        font-weight: 850;
        line-height: 1;
        opacity: 1;
        box-shadow: none;
        transform: none;
        transition: background-color var(--sr-transition), color var(--sr-transition);
    }

    .sr-calendar-day:hover > header a,
    .sr-calendar-day > header a:focus-visible {
        background: #79cfa2;
        color: #fff;
        outline: 0;
        box-shadow: none;
        transform: none;
    }

    .sr-calendar-day.is-outside > header a {
        background: #f0f3f5;
        color: #a7b0b7;
    }

    .sr-calendar-day.is-outside:hover > header a,
    .sr-calendar-day.is-outside > header a:focus-visible {
        background: #9bdcb9;
        color: #fff;
    }



    .sr-badge--info {
        background: #e9efff;
        color: #4d3aa7;
    }

    .sr-time-planning-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
        padding: .9rem 1rem;
    }

    .sr-time-planning-toolbar > div {
        display: grid;
        gap: .18rem;
    }

    .sr-time-planning-toolbar > div > span {
        color: var(--sr-color-text-muted);
        font-size: .72rem;
    }

    .sr-time-planning-toolbar form,
    .sr-time-planning-toolbar .sr-field__control {
        min-width: 13rem;
        margin: 0;
    }

    .sr-time-planning-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .8fr);
        gap: 1rem;
        align-items: start;
        margin-bottom: 1rem;
    }

    .sr-time-planning-card {
        padding: 1.1rem;
    }

    .sr-time-schedule-form,
    .sr-time-absence-form {
        display: grid;
        gap: 1rem;
        margin-top: 1rem;
    }

    .sr-time-schedule-valid-from {
        max-width: 18rem;
    }

    .sr-time-week-model {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .55rem;
    }

    .sr-time-week-model__day {
        display: grid;
        gap: .42rem;
        padding: .75rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .8rem;
        background: #fff;
    }

    .sr-time-week-model__day > span {
        color: var(--sr-color-text-soft);
        font-size: .72rem;
        font-weight: 800;
    }

    .sr-time-week-model__day input {
        width: 100%;
        min-width: 0;
        min-height: 2.5rem;
        padding: .45rem .5rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .55rem;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text);
        font: inherit;
        font-size: .82rem;
        font-weight: 750;
    }

    .sr-time-week-model__day small {
        color: var(--sr-color-text-muted);
        font-size: .65rem;
    }

    .sr-time-week-model__day.is-free {
        background: #f8fafb;
    }

    .sr-time-schedule-history {
        display: grid;
        gap: .65rem;
        margin-top: 1.2rem;
        padding-top: 1rem;
        border-top: 1px solid var(--sr-color-border);
    }

    .sr-time-schedule-history h3 {
        margin: 0;
        font-size: .86rem;
    }

    .sr-checkbox-row {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        padding: .75rem .8rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .75rem;
        background: var(--sr-color-surface-soft);
        cursor: pointer;
    }

    .sr-checkbox-row input {
        width: 1.05rem;
        height: 1.05rem;
        margin-top: .08rem;
        accent-color: var(--sr-color-action-500);
    }

    .sr-checkbox-row > span {
        display: grid;
        gap: .15rem;
    }

    .sr-checkbox-row strong {
        font-size: .78rem;
    }

    .sr-checkbox-row small {
        color: var(--sr-color-text-muted);
        font-size: .68rem;
        line-height: 1.45;
    }

    .sr-time-absence-list-card {
        margin-bottom: 1rem;
    }

    .sr-time-summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sr-time-admin-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sr-appointments-view-switcher {
        flex: 0 0 auto;
    }

    .sr-calendar-absence {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .04rem .35rem;
        padding: .38rem .45rem;
        border-left: 4px solid #8a72cb;
        border-radius: .48rem;
        background: #f0ebfb;
        color: #59428e;
    }

    .sr-calendar-absence > span {
        grid-row: 1 / span 2;
        align-self: center;
        padding: .15rem .32rem;
        border-radius: 999px;
        background: rgb(89 66 142 / 10%);
        font-size: .56rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .sr-calendar-absence strong,
    .sr-calendar-absence small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-calendar-absence strong {
        font-size: .67rem;
        line-height: 1.2;
    }

    .sr-calendar-absence small {
        color: #735da5;
        font-size: .58rem;
    }

    .sr-calendar-day.has-absence {
        background: linear-gradient(180deg, rgb(105 79 164 / 3%), transparent 34%);
    }

    .sr-calendar-day-drawer__absence {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: .75rem;
        align-items: center;
        padding: .8rem;
        border: 1px solid #ded5f2;
        border-radius: .75rem;
        background: #f5f1fc;
        color: #59428e;
    }

    .sr-calendar-day-drawer__absence .sr-calendar-day-drawer__copy span {
        color: #735da5;
    }

    .sr-appointments-list-shell {
        overflow: hidden;
    }

    .sr-appointments-list-shell > .sr-calendar-toolbar {
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-appointments-list-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .8rem 1rem;
        border-bottom: 1px solid var(--sr-color-border);
        background: var(--sr-color-surface-soft);
    }

    .sr-appointments-list-summary strong {
        font-size: .8rem;
    }

    .sr-appointments-list-summary span {
        color: var(--sr-color-text-muted);
        font-size: .68rem;
    }

    .sr-day-schedule__absence {
        display: grid;
        gap: .15rem;
        padding: .7rem .75rem;
        border: 1px solid #ded5f2;
        border-radius: .65rem;
        background: #f5f1fc;
        color: #59428e;
    }

    .sr-day-schedule__absence strong {
        font-size: .72rem;
    }

    .sr-day-schedule__absence span {
        color: #735da5;
        font-size: .64rem;
    }



    .sr-work-plan-toolbar {
        display: flex;
        align-items: center;
        gap: .8rem;
        margin-bottom: .9rem;
        padding: .65rem .75rem;
    }

    .sr-work-plan-toolbar__views {
        display: inline-flex;
        gap: .18rem;
        padding: .22rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .72rem;
        background: var(--sr-color-surface-soft);
    }

    .sr-work-plan-toolbar__view {
        padding: .48rem .7rem;
        border-radius: .52rem;
        color: var(--sr-color-text-muted);
        font-size: .73rem;
        font-weight: 800;
        text-decoration: none;
    }

    .sr-work-plan-toolbar__view.is-active {
        background: #fff;
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-work-plan-toolbar__navigation {
        display: flex;
        align-items: center;
        gap: .42rem;
    }

    .sr-work-plan-toolbar__navigation > strong {
        min-width: 10rem;
        padding-left: .3rem;
        font-size: .82rem;
        white-space: nowrap;
    }

    .sr-work-plan-toolbar__legend {
        display: flex;
        align-items: center;
        gap: .8rem;
        margin-left: auto;
        color: var(--sr-color-text-muted);
        font-size: .68rem;
        font-weight: 720;
    }

    .sr-work-plan-toolbar__legend span {
        display: inline-flex;
        align-items: center;
        gap: .32rem;
        white-space: nowrap;
    }

    .sr-work-plan-legend-dot {
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        background: #dce7f4;
    }

    .sr-work-plan-legend-dot.is-work { background: #9fc4ed; }
    .sr-work-plan-legend-dot.is-vacation { background: #b9a7ec; }
    .sr-work-plan-legend-dot.is-sick { background: #e58c8c; }

    .sr-work-plan-board {
        padding: 0;
        overflow: hidden;
    }

    .sr-work-plan-board__scroll {
        width: 100%;
        max-height: calc(100dvh - 17rem);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .sr-work-plan-table {
        width: max-content;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: #fff;
    }

    .sr-work-plan-table th,
    .sr-work-plan-table td {
        border-right: 1px solid var(--sr-color-border);
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-work-plan-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        width: 9.8rem;
        min-width: 9.8rem;
        padding: .62rem .55rem;
        background: #f7f9fb;
        color: var(--sr-color-text-muted);
        text-align: center;
    }

    .sr-work-plan-board--month .sr-work-plan-table thead th {
        width: 8.6rem;
        min-width: 8.6rem;
    }

    .sr-work-plan-board--year .sr-work-plan-table thead th {
        width: 9rem;
        min-width: 9rem;
    }

    .sr-work-plan-table thead th > span {
        display: block;
        font-size: .62rem;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .sr-work-plan-table thead th > strong {
        display: block;
        margin-top: .08rem;
        color: var(--sr-color-text-soft);
        font-size: .74rem;
    }

    .sr-work-plan-table thead th.is-today {
        background: #edf6ff;
        box-shadow: inset 0 -2px 0 var(--sr-color-brand-600);
    }

    .sr-work-plan-table thead th.is-weekend {
        background: #fafbfc;
    }

    .sr-work-plan-table .sr-work-plan-table__employee-head,
    .sr-work-plan-table .sr-work-plan-table__employee {
        position: sticky;
        left: 0;
        z-index: 5;
        width: 14.5rem;
        min-width: 14.5rem;
        background: #fff;
        text-align: left;
    }

    .sr-work-plan-table .sr-work-plan-table__employee-head {
        z-index: 7;
        padding-left: 1rem;
        background: #f7f9fb;
    }

    .sr-work-plan-table__employee {
        padding: 0;
        box-shadow: 8px 0 18px rgb(20 48 70 / 4%);
    }

    .sr-work-plan-employee {
        display: grid;
        width: 100%;
        min-height: 5.8rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .65rem;
        padding: .72rem .85rem;
        border: 0;
        background: transparent;
        color: var(--sr-color-text);
        text-align: left;
        cursor: default;
    }

    button.sr-work-plan-employee {
        cursor: pointer;
    }

    button.sr-work-plan-employee:hover {
        background: var(--sr-color-brand-50);
    }

    .sr-work-plan-employee > span:nth-child(2) {
        min-width: 0;
    }

    .sr-work-plan-employee strong,
    .sr-work-plan-employee small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-work-plan-employee strong { font-size: .78rem; }
    .sr-work-plan-employee small { margin-top: .12rem; color: var(--sr-color-text-muted); font-size: .62rem; }
    .sr-work-plan-employee > .sr-icon { width: .9rem; height: .9rem; color: var(--sr-color-text-muted); }

    .sr-work-plan-cell {
        width: 9.8rem;
        min-width: 9.8rem;
        height: 5.8rem;
        padding: .3rem;
        background: #fff;
        vertical-align: middle;
    }

    .sr-work-plan-board--month .sr-work-plan-cell {
        width: 8.6rem;
        min-width: 8.6rem;
    }

    .sr-work-plan-board--year .sr-work-plan-cell {
        width: 9rem;
        min-width: 9rem;
    }

    .sr-work-plan-cell.is-weekend { background: #fbfcfd; }
    .sr-work-plan-cell.is-today { box-shadow: inset 0 0 0 2px rgb(38 104 166 / 24%); }

    .sr-work-plan-cell__content {
        display: grid;
        width: 100%;
        height: 100%;
        min-height: 4.9rem;
        align-content: center;
        gap: .2rem;
        padding: .52rem .58rem;
        border: 1px solid transparent;
        border-radius: .68rem;
        background: #f8fafc;
        color: var(--sr-color-text-soft);
        text-align: left;
    }

    button.sr-work-plan-cell__content {
        cursor: pointer;
    }

    button.sr-work-plan-cell__content:hover {
        border-color: #b9cddd;
        background: #f3f8fc;
    }

    .sr-work-plan-cell__content strong {
        font-size: .73rem;
        line-height: 1.2;
    }

    .sr-work-plan-cell__content small {
        color: var(--sr-color-text-muted);
        font-size: .59rem;
        line-height: 1.35;
    }

    .sr-work-plan-cell__content.is-work {
        border-color: #d4e4f4;
        background: #edf5fd;
        color: #164e82;
    }

    .sr-work-plan-cell__content.is-free {
        background: transparent;
        color: #9aa7b1;
    }

    .sr-work-plan-cell__content.is-legacy {
        border-color: #ead7a8;
        background: #fff9ec;
        color: #906215;
    }

    .sr-work-plan-cell__content.is-absence {
        color: #fff;
    }

    .sr-work-plan-cell__content.is-vacation { background: #7963be; }
    .sr-work-plan-cell__content.is-sick { background: #c65a5a; }
    .sr-work-plan-cell__content.is-time-off { background: #368b86; }
    .sr-work-plan-cell__content.is-training,
    .sr-work-plan-cell__content.is-school { background: #4d7fbc; }
    .sr-work-plan-cell__content.is-special { background: #8f67a9; }
    .sr-work-plan-cell__content.is-unpaid,
    .sr-work-plan-cell__content.is-other { background: #78838d; }

    .sr-work-plan-cell__content.is-absence small { color: rgb(255 255 255 / 82%); }

    .sr-work-plan-cell--year {
        padding: .32rem;
    }

    .sr-work-plan-cell--year > a {
        display: grid;
        min-height: 4.8rem;
        align-content: center;
        gap: .18rem;
        padding: .55rem;
        border-radius: .65rem;
        background: #f7f9fb;
        color: var(--sr-color-text);
        text-decoration: none;
    }

    .sr-work-plan-cell--year > a:hover { background: var(--sr-color-brand-50); }
    .sr-work-plan-cell--year strong { color: var(--sr-color-brand-700); font-size: .76rem; }
    .sr-work-plan-cell--year small { color: var(--sr-color-text-muted); font-size: .59rem; }

    .sr-work-plan-board__hint {
        padding: .72rem 1rem;
        border-top: 1px solid var(--sr-color-border);
        background: #fbfcfd;
        color: var(--sr-color-text-muted);
        font-size: .66rem;
    }

    .sr-dialog--work-schedule {
        width: min(calc(100% - 2rem), 78rem);
        max-height: 92dvh;
        overflow: auto;
    }

    .sr-work-schedule-meta {
        display: grid;
        grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
        gap: .9rem;
        align-items: end;
        margin-bottom: 1rem;
    }

    .sr-work-schedule-meta .sr-notice {
        min-height: 100%;
        margin: 0;
    }

    .sr-work-schedule-days {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
    }

    .sr-work-schedule-day {
        display: grid;
        gap: .7rem;
        padding: .85rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .8rem;
        background: #fff;
    }

    .sr-work-schedule-day.is-free {
        background: #f7f9fb;
    }

    .sr-work-schedule-day.is-legacy {
        border-color: #e5c98c;
        background: #fffaf0;
    }

    .sr-work-schedule-day__toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: .76rem;
        font-weight: 800;
    }

    .sr-work-schedule-day__toggle input {
        width: 1rem;
        height: 1rem;
        accent-color: var(--sr-color-action-600);
    }

    .sr-work-schedule-day__times {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
    }

    .sr-work-schedule-day__times label,
    .sr-work-schedule-day__breaks > div label {
        display: grid;
        gap: .22rem;
    }

    .sr-work-schedule-day__times span,
    .sr-work-schedule-day__breaks > span,
    .sr-work-schedule-day__breaks small,
    .sr-work-schedule-day footer span {
        color: var(--sr-color-text-muted);
        font-size: .59rem;
        font-weight: 740;
    }

    .sr-work-schedule-day__times input,
    .sr-work-schedule-day__breaks input {
        width: 100%;
        min-height: 2.3rem;
        padding: .4rem .48rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .55rem;
        background: #fff;
        color: var(--sr-color-text);
        font: inherit;
        font-size: .72rem;
        font-weight: 720;
    }

    .sr-work-schedule-day__breaks {
        display: grid;
        gap: .3rem;
    }

    .sr-work-schedule-day__breaks > div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .35rem;
    }

    .sr-work-schedule-day footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .4rem;
        padding-top: .5rem;
        border-top: 1px solid var(--sr-color-border);
    }

    .sr-work-schedule-day footer strong {
        color: var(--sr-color-brand-700);
        font-size: .72rem;
    }

    .sr-dialog--absence {
        width: min(calc(100% - 2rem), 38rem);
    }

    .sr-dialog__footer--split {
        justify-content: space-between;
    }
}

/* Source: resources/css/04-components-07-navigation-users.css */
@layer components {

    .sr-dialog__footer--split > div {
        display: flex;
        gap: .55rem;
        margin-left: auto;
    }



    /* Unterseiten in der Hauptnavigation: bewusst dezent und nur im aktiven Bereich sichtbar. */
    .sr-nav-group {
        display: grid;
        gap: .12rem;
    }

    .sr-nav-submenu {
        display: none;
        gap: .08rem;
        margin: .05rem .45rem .3rem 2.12rem;
        padding: .08rem 0 .08rem .7rem;
        border-left: 1px solid rgb(255 255 255 / 14%);
    }

    .sr-nav-group.is-active .sr-nav-submenu {
        display: grid;
    }

    .sr-nav-submenu__link {
        display: flex;
        min-height: 2rem;
        align-items: center;
        padding: .35rem .5rem;
        border-radius: .5rem;
        color: rgb(255 255 255 / 55%);
        font-size: .76rem;
        font-weight: 680;
        text-decoration: none;
        transition: background-color var(--sr-transition), color var(--sr-transition);
    }

    .sr-nav-submenu__link:hover,
    .sr-nav-submenu__link:focus-visible {
        background: rgb(255 255 255 / 6%);
        color: #fff;
        outline: 0;
    }

    .sr-nav-submenu__link.is-active {
        background: rgb(255 255 255 / 8%);
        color: #fff;
        font-weight: 800;
    }

    .sr-user-heading-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .65rem;
        flex-wrap: wrap;
    }

    .sr-work-schedule-day__breaks small {
        min-height: 1.65rem;
        line-height: 1.25;
    }

    .sr-work-schedule-break-input {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        overflow: hidden;
        border: 1px solid var(--sr-color-border);
        border-radius: .55rem;
        background: #fff;
    }

    .sr-work-schedule-day__breaks .sr-work-schedule-break-input input {
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .sr-work-schedule-break-input > span {
        padding: 0 .42rem 0 .15rem;
        color: var(--sr-color-text-muted);
        font-size: .58rem;
        font-weight: 760;
        white-space: nowrap;
    }

    .sr-work-schedule-break-input:focus-within {
        border-color: var(--sr-color-brand-500);
        box-shadow: 0 0 0 .2rem rgb(var(--sr-color-brand-600-rgb) / 9%);
    }



    /* Hierarchische Sidebar-Navigation: Hauptbereich + klar eingerückte Unterseiten. */
    .sr-nav-group {
        position: relative;
        display: grid;
        gap: .12rem;
    }

    .sr-nav-group__row {
        position: relative;
        display: grid;
    }

    .sr-nav-group__row .sr-nav__link {
        width: 100%;
        padding-right: 2.65rem;
    }

    .sr-nav-group__toggle {
        position: absolute;
        top: 50%;
        right: .48rem;
        z-index: 2;
        display: inline-grid;
        width: 1.85rem;
        height: 1.85rem;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: .55rem;
        background: transparent;
        color: rgb(255 255 255 / 42%);
        cursor: pointer;
        transform: translateY(-50%);
        transition: background-color var(--sr-transition), color var(--sr-transition);
    }

    .sr-nav-group__toggle .sr-icon {
        width: .82rem;
        height: .82rem;
        transition: transform .18s ease;
    }

    .sr-nav-group__toggle:hover,
    .sr-nav-group__toggle:focus-visible {
        background: rgb(255 255 255 / 8%);
        color: #fff;
        outline: 0;
    }

    .sr-nav-group.is-open .sr-nav-group__toggle .sr-icon {
        transform: rotate(90deg);
    }

    .sr-nav-submenu {
        position: relative;
        display: none;
        gap: .08rem;
        margin: .08rem .42rem .38rem 2.35rem;
        padding: .08rem 0 .08rem .92rem;
        border-left: 1px solid rgb(255 255 255 / 15%);
    }

    .sr-nav-group.is-open .sr-nav-submenu {
        display: grid;
    }

    .sr-nav-submenu__link {
        position: relative;
        display: flex;
        min-height: 2.12rem;
        align-items: center;
        padding: .4rem .58rem;
        border: 1px solid transparent;
        border-radius: .55rem;
        color: rgb(255 255 255 / 52%);
        font-size: .76rem;
        font-weight: 680;
        line-height: 1.25;
        text-decoration: none;
        transition: background-color var(--sr-transition), border-color var(--sr-transition), color var(--sr-transition);
    }

    .sr-nav-submenu__link::before {
        position: absolute;
        top: 50%;
        left: -.94rem;
        width: .62rem;
        height: 1px;
        background: rgb(255 255 255 / 15%);
        content: "";
    }

    .sr-nav-submenu__link:hover,
    .sr-nav-submenu__link:focus-visible {
        border-color: rgb(255 255 255 / 7%);
        background: rgb(255 255 255 / 6%);
        color: rgb(255 255 255 / 88%);
        outline: 0;
    }

    .sr-nav-submenu__link.is-active {
        border-color: rgb(255 255 255 / 9%);
        background: rgb(255 255 255 / 10%);
        color: #fff;
        font-weight: 800;
        box-shadow: inset 2px 0 0 rgb(255 255 255 / 32%);
    }



    .sr-nav-group.is-active:not(.is-open) .sr-nav-submenu {
        display: none;
    }



    /* Subnavigation bewusst ruhig: keine zweite Card-/Pill-Ebene. */
    .sr-nav-submenu__link {
        border-color: transparent;
        border-radius: 0;
        background: transparent;
        color: rgb(255 255 255 / 52%);
        box-shadow: none;
        transition: color var(--sr-transition), opacity var(--sr-transition);
    }

    .sr-nav-submenu__link:hover,
    .sr-nav-submenu__link:focus-visible {
        border-color: transparent;
        background: transparent;
        color: #fff;
        box-shadow: none;
        outline: 0;
    }

    .sr-nav-submenu__link.is-active {
        border-color: transparent;
        background: transparent;
        color: #fff;
        font-weight: 820;
        box-shadow: none;
    }



    .sr-time-admin-toolbar--overview,
    .sr-time-admin-toolbar--employee-detail {
        justify-content: space-between;
    }

    .sr-time-admin-toolbar__hint {
        display: grid;
        gap: .12rem;
        margin-left: auto;
        text-align: right;
    }

    .sr-time-admin-toolbar__hint > span {
        color: var(--sr-color-text-soft);
        font-size: .76rem;
        font-weight: 800;
    }

    .sr-time-admin-toolbar__hint > small {
        color: var(--sr-color-text-muted);
        font-size: .66rem;
    }

    .sr-time-admin-toolbar__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .55rem;
        margin-left: auto;
    }

    .sr-time-employee-link {
        display: inline-grid;
        gap: .14rem;
    }

    .sr-time-employee-link > span {
        color: var(--sr-color-text-muted);
        font-size: .65rem;
        font-weight: 600;
    }

    .sr-time-employee-table tbody tr {
        transition: background-color var(--sr-transition-fast);
    }

    .sr-time-employee-table tbody tr:hover {
        background: var(--sr-color-surface-soft);
    }

    .sr-time-admin-detail--standalone {
        margin-top: 0;
    }

    .sr-time-admin-stats--employee {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }



    .sr-time-range-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 1rem;
        align-items: center;
    }

    .sr-time-range-switcher {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .25rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .8rem;
        background: var(--sr-color-surface-soft);
    }

    .sr-time-range-switcher__item {
        display: inline-flex;
        min-height: 2.2rem;
        align-items: center;
        justify-content: center;
        padding: .45rem .8rem;
        border-radius: .58rem;
        color: var(--sr-color-text-muted);
        font-size: .74rem;
        font-weight: 760;
        text-decoration: none;
        transition: color var(--sr-transition-fast), background-color var(--sr-transition-fast), box-shadow var(--sr-transition-fast);
    }

    .sr-time-range-switcher__item:hover {
        color: var(--sr-color-text);
    }

    .sr-time-range-switcher__item.is-active {
        background: var(--sr-color-surface);
        color: var(--sr-color-brand-700);
        font-weight: 830;
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-time-range-navigation {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: .55rem;
    }

    .sr-time-range-navigation > strong {
        min-width: 10rem;
        color: var(--sr-color-text);
        font-size: .9rem;
        font-weight: 830;
        text-align: center;
        white-space: nowrap;
    }

    .sr-dialog--time-export {
        width: min(100% - 2rem, 35rem);
    }

    .sr-time-export-dialog__body {
        display: grid;
        gap: 1rem;
    }

    .sr-time-export-dialog__dates {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
    }



    .sr-time-custom-range {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .sr-time-custom-range__field {
        display: grid;
        gap: .22rem;
    }

    .sr-time-custom-range__field > span {
        color: var(--sr-color-text-muted);
        font-size: .63rem;
        font-weight: 780;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .sr-time-custom-range__field .sr-field__control {
        min-width: 9.4rem;
        min-height: 2.35rem;
        padding-top: .42rem;
        padding-bottom: .42rem;
        font-size: .78rem;
    }

    .sr-time-custom-range__separator {
        display: inline-flex;
        min-height: 2.35rem;
        align-items: center;
        padding-bottom: .05rem;
        color: var(--sr-color-text-muted);
        font-size: .72rem;
        font-weight: 700;
    }



    /* Zentrale Benutzerakte: Basisdaten + modulabhängige Benutzereinstellungen. */
    .sr-user-profile-heading {
        margin-bottom: 1rem;
    }

    .sr-user-profile-panel {
        overflow: hidden;
    }

    .sr-user-profile-panel__header {
        margin: -1rem -1rem 1rem;
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-user-profile-panel__header h2,
    .sr-user-work-schedule-history h2 {
        margin: 0;
        font-size: 1rem;
    }

    .sr-user-profile-panel__header p,
    .sr-user-work-schedule-history .sr-card__header p {
        margin: .18rem 0 0;
        color: var(--sr-color-text-muted);
        font-size: .76rem;
    }

    .sr-user-work-schedule {
        margin-bottom: 1rem;
    }

    .sr-user-work-schedule__form {
        padding: 0 1rem 1rem;
    }

    .sr-user-work-schedule__intro {
        display: grid;
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        gap: .9rem;
        align-items: stretch;
        margin-bottom: 1rem;
    }

    .sr-user-work-schedule__notice {
        min-height: 100%;
        margin: 0;
    }

    .sr-user-work-schedule__days {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
    }

    .sr-user-work-schedule .sr-work-schedule-day {
        min-width: 0;
    }

    .sr-user-work-schedule .sr-work-schedule-day__breaks {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .35rem;
    }

    .sr-user-work-schedule .sr-work-schedule-day__breaks label {
        display: grid;
        min-width: 0;
        gap: .22rem;
    }

    .sr-user-work-schedule .sr-work-schedule-day__breaks label > span:first-child {
        min-height: 1.8rem;
        color: var(--sr-color-text-muted);
        font-size: .57rem;
        font-weight: 740;
        line-height: 1.25;
    }

    .sr-user-work-schedule .sr-input-suffix .sr-field__control {
        min-height: 2.3rem;
        padding: .4rem 2.15rem .4rem .48rem;
        font-size: .72rem;
        font-weight: 720;
    }

    .sr-user-work-schedule__actions {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--sr-color-border);
    }

    .sr-user-work-schedule-history {
        overflow: hidden;
    }

    .sr-user-work-schedule-history__empty {
        min-height: 9rem;
    }

    .sr-user-work-schedule-history__empty span {
        max-width: 36rem;
        color: var(--sr-color-text-muted);
        text-align: center;
    }



    .sr-user-work-schedule__table {
        overflow: hidden;
        border: 1px solid var(--sr-color-border);
        border-radius: .85rem;
        background: var(--sr-color-surface);
    }

    .sr-user-work-schedule__table-head,
    .sr-user-work-schedule .sr-work-schedule-day--row {
        display: grid;
        grid-template-columns: minmax(9.5rem, 1.2fr) minmax(7rem, .85fr) minmax(7rem, .85fr) repeat(3, minmax(7.3rem, .9fr)) minmax(6rem, .7fr);
        gap: .65rem;
        align-items: center;
    }

    .sr-user-work-schedule__table-head {
        padding: .62rem .75rem;
        border-bottom: 1px solid var(--sr-color-border);
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text-muted);
        font-size: .61rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .sr-user-work-schedule__days {
        display: block;
    }

    .sr-user-work-schedule .sr-work-schedule-day--row {
        padding: .65rem .75rem;
        border: 0;
        border-bottom: 1px solid var(--sr-color-border);
        border-radius: 0;
        background: #fff;
    }

    .sr-user-work-schedule .sr-work-schedule-day--row:last-child {
        border-bottom: 0;
    }

    .sr-user-work-schedule .sr-work-schedule-day--row.is-free {
        background: #fafbfc;
    }

    .sr-user-work-schedule .sr-work-schedule-day--row.is-free .sr-work-schedule-row__field,
    .sr-user-work-schedule .sr-work-schedule-day--row.is-free .sr-work-schedule-row__target {
        opacity: .56;
    }

    .sr-user-work-schedule .sr-work-schedule-day__toggle {
        min-height: 2.35rem;
        gap: .55rem;
        margin: 0;
    }

    .sr-user-work-schedule .sr-work-schedule-day__toggle .sr-switch__label {
        font-size: .76rem;
        font-weight: 800;
    }

    .sr-work-schedule-row__field {
        display: grid;
        min-width: 0;
        gap: .2rem;
        margin: 0;
    }

    .sr-work-schedule-row__field > span:first-child,
    .sr-work-schedule-row__target > span {
        display: none;
        color: var(--sr-color-text-muted);
        font-size: .59rem;
        font-weight: 760;
    }

    .sr-user-work-schedule .sr-work-schedule-row__field .sr-field__control,
    .sr-user-work-schedule .sr-work-schedule-row__field .sr-input-suffix .sr-field__control {
        width: 100%;
        min-height: 2.35rem;
        padding: .42rem .52rem;
        font-size: .74rem;
        font-weight: 720;
    }

    .sr-user-work-schedule .sr-work-schedule-row__field .sr-input-suffix .sr-field__control {
        padding-right: 2.15rem;
    }

    .sr-work-schedule-row__target {
        display: grid;
        min-height: 2.35rem;
        align-content: center;
        justify-items: end;
        gap: .15rem;
    }

    .sr-work-schedule-row__target strong {
        color: var(--sr-color-brand-700);
        font-size: .76rem;
        font-weight: 850;
        white-space: nowrap;
    }



    .sr-time-admin-stats,
    .sr-time-admin-stats--employee {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }



    /* Kalenderlegende bewusst zurückhaltend: reine Orientierung, kein Bedienelement. */
    .sr-calendar-toolbar__legend-item {
        color: var(--sr-color-text-muted);
        font-weight: 500;
    }

    .sr-calendar-toolbar__legend-item .sr-calendar-legend-dot {
        width: .56rem;
        height: .56rem;
        box-shadow: none;
    }

    /* Pastellige Statusfarben für eine ruhige, schnell erfassbare Einsatzplanung. */
    .sr-calendar-event--assigned {
        background: #fff7d6;
        color: #816311;
    }

    .sr-calendar-event--progress {
        background: #e4f1ff;
        color: #2f659c;
    }

    .sr-calendar-event--follow-up {
        background: #ffe8d7;
        color: #aa571e;
    }

    .sr-calendar-event--completed {
        background: #e3f4e9;
        color: #2b714b;
    }

    .sr-calendar-legend-dot.sr-calendar-event--assigned {
        background: #dfc35c;
        color: #dfc35c;
    }

    .sr-calendar-legend-dot.sr-calendar-event--progress {
        background: #79aee3;
        color: #79aee3;
    }

    .sr-calendar-legend-dot.sr-calendar-event--follow-up {
        background: #e58b49;
        color: #e58b49;
    }

    .sr-calendar-legend-dot.sr-calendar-event--completed {
        background: #72b98d;
        color: #72b98d;
    }

    /* Abwesenheiten bleiben bewusst violett und kollidieren dadurch mit keinem Einsatzstatus. */
    .sr-calendar-absence {
        border-left-color: #8a72cb;
        background: #f0ebfb;
        color: #59428e;
    }



    .sr-order-status--cancelled,
    .sr-order-status--cancelled .sr-order-status__dot {
        color: #a43b3b;
    }

    .sr-order-status--cancelled {
        background: #fff0f0;
    }

    .sr-order-status--cancelled .sr-order-status__dot {
        background: #d75c5c;
    }

    .sr-order-detail-heading--clean {
        margin-bottom: .85rem;
    }

    .sr-order-detail-heading--clean > div:first-child {
        display: grid;
        gap: .25rem;
    }

    .sr-order-detail-heading--clean p {
        margin: 0;
    }

    .sr-order-state-notice {
        margin-bottom: .85rem;
    }

    .sr-order-overview-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 1rem;
        overflow: hidden;
        border: 1px solid var(--sr-color-border);
        border-radius: 1rem;
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-order-overview-strip__item {
        display: grid;
        gap: .18rem;
        min-width: 0;
        padding: .9rem 1rem;
        color: inherit;
        text-decoration: none;
    }

    .sr-order-overview-strip__item + .sr-order-overview-strip__item {
        border-left: 1px solid var(--sr-color-border);
    }

    .sr-order-overview-strip__item > span {
        color: var(--sr-color-text-muted);
        font-size: .61rem;
        font-weight: 780;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .sr-order-overview-strip__item strong {
        overflow: hidden;
        font-size: .78rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-order-overview-strip__item small {
        overflow: hidden;
        color: var(--sr-color-text-muted);
        font-size: .64rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    a.sr-order-overview-strip__item:hover {
        background: var(--sr-color-surface-soft);
    }

    .sr-order-detail-layout--refined {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: 1rem;
    }

    .sr-order-detail-layout--refined .sr-order-detail-main {
        gap: .85rem;
    }

    .sr-order-task-card,
    .sr-order-process-card,
    .sr-order-contact-card,
    .sr-order-side-info-card {
        padding: 1.1rem;
    }

    .sr-order-task-card__header,
    .sr-order-process-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-order-task-card__header h2,
    .sr-order-contact-card h3 {
        margin: 0;
        font-size: .9rem;
    }

    .sr-order-task-card__header p {
        margin: .12rem 0 0;
        color: var(--sr-color-text-muted);
        font-size: .66rem;
    }

    .sr-order-task-card__title {
        padding-top: .9rem;
        font-size: .95rem;
        font-weight: 820;
    }

    .sr-order-task-card .sr-order-detail-description {
        padding: .5rem 0 0;
    }

    .sr-card__header--padded-compact {
        padding: 1rem 1.1rem .8rem;
    }

    .sr-card__header--padded-compact h2,
    .sr-order-report-card .sr-card__header h2,
    .sr-order-attachment-card .sr-card__header h2,
    .sr-order-history-card .sr-card__header h2 {
        margin: 0;
        font-size: .9rem;
    }

    .sr-card__header--padded-compact p,
    .sr-order-report-card .sr-card__header p,
    .sr-order-attachment-card .sr-card__header p,
    .sr-order-history-card .sr-card__header p {
        margin: .15rem 0 0;
        font-size: .66rem;
    }

    .sr-order-visit-list--refined {
        padding: 0 .85rem .75rem;
    }

    .sr-order-visit--refined {
        position: relative;
        grid-template-columns: 7.6rem minmax(0, 1fr) auto;
        padding: .75rem .8rem;
        border-radius: .7rem;
        box-shadow: none;
    }

    .sr-order-visit--refined.is-cancelled {
        opacity: .62;
        background: #fbf5f5;
    }

    .sr-order-inline-details {
        position: relative;
    }

    .sr-order-inline-details > summary,
    .sr-order-add-panel > summary,
    .sr-order-process-details > summary,
    .sr-order-cancel-details > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
    }

    .sr-order-inline-details > summary::-webkit-details-marker,
    .sr-order-add-panel > summary::-webkit-details-marker,
    .sr-order-process-details > summary::-webkit-details-marker,
    .sr-order-cancel-details > summary::-webkit-details-marker {
        display: none;
    }

    .sr-order-inline-details > summary {
        color: var(--sr-color-brand-700);
        font-size: .66rem;
        font-weight: 760;
    }
}

/* Source: resources/css/04-components-08-order-detail.css */
@layer components {
    .sr-order-reschedule-form {
        position: absolute;
        z-index: 40;
        top: calc(100% + .45rem);
        right: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(8rem, 1fr));
        gap: .65rem;
        width: min(34rem, 78vw);
        padding: .85rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .85rem;
        background: var(--sr-color-surface);
        box-shadow: var(--sr-shadow-md);
    }

    .sr-order-reschedule-form__notes,
    .sr-order-reschedule-form > .sr-check,
    .sr-order-reschedule-form > .sr-button {
        grid-column: 1 / -1;
    }

    .sr-order-add-panel {
        margin: 0 .85rem .85rem;
        border: 1px dashed var(--sr-color-border-strong);
        border-radius: .75rem;
        background: var(--sr-color-surface-soft);
    }

    .sr-order-add-panel > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding: .7rem;
        color: var(--sr-color-brand-700);
        font-size: .7rem;
        font-weight: 780;
    }

    .sr-order-add-panel[open] > summary {
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-order-add-panel .sr-order-visit-form,
    .sr-order-add-panel .sr-order-attachment-form {
        margin: 0;
        padding: .85rem;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .sr-order-process-card {
        position: sticky;
        top: calc(var(--sr-topbar-height) + 1rem);
    }

    .sr-order-process-card__header > div {
        display: grid;
        gap: .1rem;
    }

    .sr-order-process-card__header > div > span {
        color: var(--sr-color-text-muted);
        font-size: .61rem;
        font-weight: 780;
        text-transform: uppercase;
    }

    .sr-order-process-card__header > div > strong {
        font-size: .88rem;
    }

    .sr-order-process-card__header > .sr-order-status {
        padding: .35rem;
    }

    .sr-order-process-copy,
    .sr-order-process-result {
        display: grid;
        gap: .25rem;
        margin: .9rem 0 .75rem;
    }

    .sr-order-process-copy strong,
    .sr-order-process-result strong {
        font-size: .8rem;
    }

    .sr-order-process-copy span,
    .sr-order-process-result span {
        color: var(--sr-color-text-muted);
        font-size: .67rem;
        line-height: 1.5;
    }

    .sr-order-process-result {
        padding: .75rem;
        border-radius: .7rem;
    }

    .sr-order-process-result--success {
        background: #edf8f2;
        color: #18744c;
    }

    .sr-order-process-result--cancelled {
        background: #fff1f1;
        color: #a43b3b;
    }

    .sr-order-process-card form > .sr-button,
    .sr-order-process-card > .sr-button {
        width: 100%;
    }

    .sr-order-process-hint {
        display: flex;
        gap: .45rem;
        align-items: flex-start;
        margin-top: .55rem;
        padding: .6rem;
        border-radius: .6rem;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text-muted);
        font-size: .63rem;
        line-height: 1.4;
    }

    .sr-order-process-hint .sr-icon {
        flex: 0 0 auto;
        width: .9rem;
        height: .9rem;
    }

    .sr-order-process-details,
    .sr-order-cancel-details {
        margin-top: .75rem;
        padding-top: .7rem;
        border-top: 1px solid var(--sr-color-border);
    }

    .sr-order-process-details > summary,
    .sr-order-cancel-details > summary {
        color: var(--sr-color-brand-700);
        font-size: .68rem;
        font-weight: 760;
    }

    .sr-order-cancel-details > summary {
        color: var(--sr-color-danger);
    }

    .sr-order-process-details form,
    .sr-order-cancel-details form {
        display: grid;
        gap: .65rem;
        margin-top: .7rem;
    }

    .sr-order-contact-card .sr-card__header {
        align-items: center;
        padding-bottom: .65rem;
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-order-contact-list,
    .sr-order-side-info-card {
        display: grid;
        gap: .75rem;
    }

    .sr-order-contact-list > div,
    .sr-order-side-info-row {
        display: grid;
        gap: .12rem;
    }

    .sr-order-contact-list span,
    .sr-order-side-info-row > span {
        color: var(--sr-color-text-muted);
        font-size: .59rem;
        font-weight: 760;
        text-transform: uppercase;
    }

    .sr-order-contact-list strong,
    .sr-order-side-info-row strong {
        font-size: .72rem;
    }

    .sr-order-contact-list small,
    .sr-order-side-info-row small {
        color: var(--sr-color-text-muted);
        font-size: .62rem;
    }



    /* Auftrag: finaler Vorgang bleibt im normalen Dokumentfluss und überlagert keine Inhalte. */
    .sr-order-process-card {
        position: static;
        top: auto;
    }

    .sr-order-attachment-upload {
        display: grid;
        gap: .85rem;
        padding: 0 1rem 1rem;
    }

    .sr-order-dropzone {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .85rem;
        align-items: center;
        min-height: 7.5rem;
        padding: 1rem 1.1rem;
        border: 1.5px dashed #b8c8d8;
        border-radius: .85rem;
        background: #f9fbfd;
        color: var(--sr-color-text);
        cursor: pointer;
        transition: border-color 160ms ease, background 160ms ease;
    }

    .sr-order-dropzone:hover,
    .sr-order-dropzone:focus-visible,
    .sr-order-dropzone.is-dragover {
        border-color: #6da7d4;
        background: #f2f8fc;
        outline: 0;
    }

    .sr-order-dropzone.is-ready {
        border-style: solid;
        border-color: #8bc9aa;
        background: #f4fbf7;
    }

    .sr-order-dropzone__icon {
        display: grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border-radius: 999px;
        background: #e8f1f8;
        color: var(--sr-color-brand-700);
    }

    .sr-order-dropzone__icon .sr-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .sr-order-dropzone.is-ready .sr-order-dropzone__icon {
        background: #dff3e8;
        color: #17764c;
    }

    .sr-order-dropzone__copy {
        display: grid;
        min-width: 0;
        gap: .16rem;
    }

    .sr-order-dropzone__copy strong {
        font-size: .82rem;
    }

    .sr-order-dropzone__copy span,
    .sr-order-dropzone__copy small {
        color: var(--sr-color-text-muted);
        font-size: .68rem;
        line-height: 1.45;
    }

    .sr-order-dropzone__file {
        max-width: 14rem;
        overflow: hidden;
        padding: .45rem .62rem;
        border-radius: .55rem;
        background: #eef3f7;
        color: var(--sr-color-text-soft);
        font-size: .68rem;
        font-weight: 720;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-order-dropzone.is-ready .sr-order-dropzone__file {
        background: #e4f4eb;
        color: #176a45;
    }

    .sr-order-upload-options {
        display: grid;
        grid-template-columns: minmax(12rem, .9fr) minmax(14rem, 1.4fr) auto;
        gap: .75rem;
        align-items: end;
    }

    .sr-order-upload-options .sr-button {
        min-height: 2.7rem;
        white-space: nowrap;
    }

    .sr-order-upload-options .sr-button:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .sr-order-readonly-note {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 0 1rem 1rem;
        padding: .7rem .8rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .65rem;
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text-muted);
        font-size: .68rem;
        line-height: 1.45;
    }

    .sr-order-readonly-note .sr-icon {
        flex: 0 0 auto;
        width: .95rem;
        height: .95rem;
    }



    .sr-order-media-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: .85rem;
        padding: 0 1rem 1rem;
    }

    .sr-order-media-tile {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--sr-color-border);
        border-radius: .85rem;
        background: var(--sr-color-surface);
    }

    .sr-order-media-tile__preview {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--sr-color-border);
        background: #eef3f7;
        cursor: zoom-in;
    }

    .sr-order-media-tile__preview img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 180ms ease;
    }

    .sr-order-media-tile__preview:hover img,
    .sr-order-media-tile__preview:focus-visible img {
        transform: scale(1.025);
    }

    .sr-order-media-tile__preview:focus-visible {
        outline: 2px solid var(--sr-color-brand-500);
        outline-offset: -2px;
    }

    .sr-order-media-tile__zoom {
        position: absolute;
        right: .55rem;
        bottom: .55rem;
        display: grid;
        width: 2rem;
        height: 2rem;
        place-items: center;
        border-radius: 999px;
        background: rgb(8 23 36 / 74%);
        color: #fff;
        opacity: 0;
        transform: translateY(.2rem);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .sr-order-media-tile__preview:hover .sr-order-media-tile__zoom,
    .sr-order-media-tile__preview:focus-visible .sr-order-media-tile__zoom {
        opacity: 1;
        transform: translateY(0);
    }

    .sr-order-media-tile__zoom .sr-icon {
        width: 1rem;
        height: 1rem;
    }

    .sr-order-media-tile__body {
        display: grid;
        gap: .22rem;
        padding: .72rem .78rem .78rem;
    }

    .sr-order-media-tile__body strong {
        overflow: hidden;
        font-size: .76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-order-media-tile__body small,
    .sr-order-media-tile__body span {
        color: var(--sr-color-text-muted);
        font-size: .64rem;
        line-height: 1.4;
    }

    .sr-order-media-tile__body span {
        margin-top: .08rem;
        color: var(--sr-color-text-soft);
    }

    .sr-order-media-tile__download {
        justify-self: start;
        margin-top: .25rem;
        color: var(--sr-color-brand-700);
        font-size: .67rem;
        font-weight: 760;
        text-decoration: none;
    }

    .sr-order-media-tile__download:hover {
        text-decoration: underline;
    }

    .sr-order-document-block {
        display: grid;
        gap: .55rem;
        padding: 0 1rem 1rem;
    }

    .sr-order-document-block h3 {
        margin: 0;
        font-size: .78rem;
    }

    .sr-order-document-block .sr-order-attachment-list {
        gap: .5rem;
    }

    body.sr-order-lightbox-open {
        overflow: hidden;
    }


    .sr-order-lightbox {
        position: fixed;
        inset: 0;
        z-index: 420;
        display: grid;
        place-items: center;
        padding: 1rem;
    }

    .sr-order-lightbox__backdrop {
        position: absolute;
        inset: 0;
        background: rgb(7 17 27 / 90%);
        backdrop-filter: blur(4px);
    }

    .sr-order-lightbox__dialog {
        position: relative;
        z-index: 1;
        display: grid;
        width: min(94vw, 92rem);
        height: min(92dvh, 62rem);
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        border: 1px solid rgb(255 255 255 / 14%);
        border-radius: 1rem;
        background: #101922;
        box-shadow: 0 28px 90px rgb(0 0 0 / 42%);
        color: #fff;
    }

    .sr-order-lightbox__topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .8rem .9rem;
        border-bottom: 1px solid rgb(255 255 255 / 10%);
        background: #15212c;
    }

    .sr-order-lightbox__heading {
        display: grid;
        gap: .08rem;
        min-width: 0;
    }

    .sr-order-lightbox__heading strong,
    .sr-order-lightbox__heading span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-order-lightbox__heading strong {
        font-size: .82rem;
    }

    .sr-order-lightbox__heading span {
        color: #aebdca;
        font-size: .65rem;
    }

    .sr-order-lightbox__actions {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex: 0 0 auto;
    }

    .sr-order-lightbox__actions .sr-button {
        border-color: rgb(255 255 255 / 18%);
        background: rgb(255 255 255 / 8%);
        color: #fff;
    }

    .sr-order-lightbox__actions .sr-icon-button {
        border-color: rgb(255 255 255 / 18%);
        background: rgb(255 255 255 / 8%);
        color: #fff;
        font-size: 1.25rem;
    }

    .sr-order-lightbox__stage {
        position: relative;
        display: grid;
        min-height: 0;
        place-items: center;
        overflow: hidden;
        padding: 1rem 4rem;
        background: #0b1219;
    }

    .sr-order-lightbox__stage img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: .35rem;
        box-shadow: 0 14px 45px rgb(0 0 0 / 35%);
    }

    .sr-order-lightbox__nav {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: grid;
        width: 2.8rem;
        height: 2.8rem;
        place-items: center;
        padding: 0;
        border: 1px solid rgb(255 255 255 / 18%);
        border-radius: 999px;
        background: rgb(255 255 255 / 9%);
        color: #fff;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .sr-order-lightbox__nav:hover,
    .sr-order-lightbox__nav:focus-visible {
        background: rgb(255 255 255 / 16%);
        outline: 0;
    }

    .sr-order-lightbox__nav--prev { left: .85rem; }
    .sr-order-lightbox__nav--next { right: .85rem; }

    .sr-order-lightbox__caption {
        padding: .75rem 1rem;
        border-top: 1px solid rgb(255 255 255 / 10%);
        background: #15212c;
        color: #d8e2ea;
        font-size: .72rem;
        line-height: 1.45;
    }

    @media (max-width: 58rem) {
        .sr-order-media-gallery {
            grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        }

        .sr-order-lightbox {
            padding: 0;
        }

        .sr-order-lightbox__dialog {
            width: 100%;
            height: 100dvh;
            border: 0;
            border-radius: 0;
        }

        .sr-order-lightbox__stage {
            padding: .75rem 3rem;
        }
    }

    @media (max-width: 36rem) {
        .sr-order-media-gallery {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .65rem;
        }

        .sr-order-media-tile__body {
            padding: .6rem;
        }

        .sr-order-media-tile__body small {
            display: none;
        }

        .sr-order-lightbox__topbar {
            align-items: flex-start;
        }

        .sr-order-lightbox__actions .sr-button {
            display: none;
        }

        .sr-order-lightbox__stage {
            padding: .5rem 2.8rem;
        }

        .sr-order-lightbox__nav {
            width: 2.3rem;
            height: 2.3rem;
        }

        .sr-order-lightbox__nav--prev { left: .35rem; }
        .sr-order-lightbox__nav--next { right: .35rem; }
    }



    /* Upload-Zeile und Galerie: einheitlich und thumbnail-orientiert. */
    .sr-order-dropzone {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 7rem;
    }

    .sr-order-dropzone__visual {
        position: relative;
        display: grid;
        width: 3.35rem;
        height: 3.35rem;
        place-items: center;
        flex: 0 0 auto;
    }

    .sr-order-dropzone__visual .sr-order-dropzone__icon {
        width: 3.35rem;
        height: 3.35rem;
    }

    .sr-order-dropzone__preview {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 1px solid #c9d6e1;
        border-radius: .72rem;
        background: #eef3f7;
    }


    .sr-order-dropzone.is-ready.has-image .sr-order-dropzone__icon {
        opacity: 0;
    }

    .sr-order-upload-options {
        grid-template-columns: minmax(13rem, .9fr) minmax(17rem, 1.45fr) minmax(11rem, .62fr);
        gap: .75rem;
        align-items: end;
    }

    .sr-order-upload-options .sr-field__control,
    .sr-order-upload-options .sr-button {
        width: 100%;
        height: 3rem;
        min-height: 3rem;
        border-radius: .72rem;
        font-size: .8rem;
    }

    .sr-order-upload-options .sr-field__control {
        padding-block: .62rem;
    }

    .sr-order-upload-options .sr-order-upload-submit {
        padding-inline: .9rem;
        box-shadow: none;
        transform: none;
    }

    .sr-order-upload-options .sr-order-upload-submit:hover:not(:disabled),
    .sr-order-upload-options .sr-order-upload-submit:active:not(:disabled) {
        transform: none;
    }

    .sr-order-media-gallery-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: 0 1rem .55rem;
    }

    .sr-order-media-gallery-head h3 {
        margin: 0;
        font-size: .8rem;
    }

    .sr-order-media-gallery-head span {
        color: var(--sr-color-text-muted);
        font-size: .66rem;
        font-weight: 700;
    }

    .sr-order-media-gallery {
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 12rem));
        justify-content: start;
        gap: .7rem;
    }

    .sr-order-media-tile {
        border-radius: .72rem;
        box-shadow: none;
    }

    .sr-order-media-tile__preview {
        aspect-ratio: 4 / 3;
        border-bottom-color: #dfe7ed;
    }

    .sr-order-media-tile__body {
        gap: .16rem;
        padding: .58rem .62rem .64rem;
    }

    .sr-order-media-tile__body strong {
        font-size: .7rem;
    }

    .sr-order-media-tile__body small,
    .sr-order-media-tile__body span {
        font-size: .59rem;
    }

    .sr-order-media-tile__download {
        margin-top: .18rem;
        font-size: .62rem;
    }

    .sr-order-lightbox__heading > span {
        display: flex;
        align-items: center;
        gap: .42rem;
        min-width: 0;
    }

    .sr-order-lightbox__heading > span > span:first-child:not(:empty)::after {
        content: "·";
        margin-left: .42rem;
        color: #708596;
    }



    /* Helle, reduzierte Bild-Lightbox auf Desktop, Tablet und Mobile. */
    .sr-order-lightbox__backdrop {
        background: rgb(15 23 42 / 58%);
        backdrop-filter: blur(3px);
    }

    .sr-order-lightbox__dialog {
        width: min(92vw, 72rem);
        height: min(88dvh, 52rem);
        border: 1px solid #dce4ec;
        border-radius: .85rem;
        background: #fff;
        box-shadow: 0 24px 70px rgb(15 23 42 / 22%);
        color: #111827;
    }

    .sr-order-lightbox__topbar {
        min-height: 3.6rem;
        padding: .55rem .65rem .55rem .85rem;
        border-bottom: 1px solid #e4eaf0;
        background: #fff;
    }

    .sr-order-lightbox__heading {
        gap: .04rem;
    }

    .sr-order-lightbox__heading strong {
        color: #111827;
        font-size: .78rem;
        font-weight: 780;
    }

    .sr-order-lightbox__heading span {
        color: #697586;
        font-size: .62rem;
        font-weight: 560;
    }

    .sr-order-lightbox__actions {
        gap: .35rem;
    }

    .sr-order-lightbox__actions .sr-icon-button,
    .sr-order-lightbox__download,
    .sr-order-lightbox__close {
        width: 2.35rem;
        height: 2.35rem;
        min-width: 2.35rem;
        border: 1px solid #d9e2ea;
        border-radius: .65rem;
        background: #fff;
        color: #174f7d;
        box-shadow: none;
    }

    .sr-order-lightbox__actions .sr-icon-button:hover,
    .sr-order-lightbox__actions .sr-icon-button:focus-visible,
    .sr-order-lightbox__download:hover,
    .sr-order-lightbox__download:focus-visible,
    .sr-order-lightbox__close:hover,
    .sr-order-lightbox__close:focus-visible {
        border-color: #c7d3dd;
        background: #f5f8fb;
        color: #123f65;
        box-shadow: none;
        transform: none;
    }

    .sr-order-lightbox__close {
        color: #445160;
        font-size: 1.2rem;
    }

    .sr-order-lightbox__stage {
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 1rem 4rem;
        background: #f7f9fb;
    }

    .sr-order-lightbox__stage img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        flex: 0 1 auto;
        object-fit: contain;
        border-radius: .35rem;
        box-shadow: 0 6px 24px rgb(15 23 42 / 8%);
    }

    .sr-order-lightbox__nav {
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid #d6e0e8;
        background: rgb(255 255 255 / 94%);
        color: #174f7d;
        box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
    }

    .sr-order-lightbox__nav:hover,
    .sr-order-lightbox__nav:focus-visible {
        border-color: #c7d3dd;
        background: #fff;
        color: #123f65;
        box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
    }

    .sr-order-lightbox__caption {
        padding: .65rem .85rem;
        border-top: 1px solid #e4eaf0;
        background: #fff;
        color: #596575;
        font-size: .68rem;
    }

    @media (max-width: 58rem) {
        .sr-order-lightbox__dialog {
            width: 100%;
            height: 100dvh;
            border: 0;
            border-radius: 0;
        }

        .sr-order-lightbox__topbar {
            min-height: 3.7rem;
            padding: calc(.5rem + env(safe-area-inset-top)) .55rem .5rem .75rem;
        }

        .sr-order-lightbox__stage {
            padding: .75rem 3rem;
        }
    }

    @media (max-width: 36rem) {
        .sr-order-lightbox__topbar {
            align-items: center;
        }

        .sr-order-lightbox__actions .sr-icon-button,
        .sr-order-lightbox__download,
        .sr-order-lightbox__close {
            display: grid;
            width: 2.4rem;
            height: 2.4rem;
            min-width: 2.4rem;
        }

        .sr-order-lightbox__stage {
            padding: .5rem 2.65rem;
        }
    }



    /* Arbeitszeitplanung: "Heute" ruhig als Fläche statt als Rahmen hervorheben. */
    .sr-work-plan-table thead th.is-today {
        background: #eaf3fc;
        box-shadow: none;
        color: var(--sr-color-text);
    }

    .sr-work-plan-table thead th.is-today > span,
    .sr-work-plan-table thead th.is-today > strong {
        color: #245f96;
    }

    .sr-work-plan-cell.is-today {
        background: #f3f8fd;
        box-shadow: none;
    }

    /* Klickbare Tageszellen: nur ein sehr zurückhaltender Hover. */
    button.sr-work-plan-cell__content:hover {
        border-color: #d9e2ea;
        background: #f6f8fa;
        box-shadow: none;
        transform: none;
    }

    button.sr-work-plan-cell__content.is-free:hover {
        border-color: transparent;
        background: #f5f7f9;
        color: #8796a2;
    }

    button.sr-work-plan-cell__content.is-work:hover {
        border-color: #cfdfef;
        background: #e8f2fc;
        color: #164e82;
    }

    button.sr-work-plan-cell__content.is-legacy:hover {
        border-color: #e6d09d;
        background: #fff7e6;
        color: #906215;
    }

    /* Abwesenheiten behalten beim Hover immer ihre Statusfarbe. */
    button.sr-work-plan-cell__content.is-absence:hover {
        border-color: transparent;
        box-shadow: none;
        transform: none;
        filter: brightness(.96);
    }

    button.sr-work-plan-cell__content.is-vacation:hover { background: #7963be; }
    button.sr-work-plan-cell__content.is-sick:hover { background: #c65a5a; }
    button.sr-work-plan-cell__content.is-time-off:hover { background: #368b86; }
    button.sr-work-plan-cell__content.is-training:hover,
    button.sr-work-plan-cell__content.is-school:hover { background: #4d7fbc; }
    button.sr-work-plan-cell__content.is-special:hover { background: #8f67a9; }
    button.sr-work-plan-cell__content.is-unpaid:hover,
    button.sr-work-plan-cell__content.is-other:hover { background: #78838d; }

    button.sr-work-plan-cell__content:focus-visible {
        outline: 2px solid #6ba6dc;
        outline-offset: -2px;
    }
}

/* Source: resources/css/04-components-09-settings-navigation.css */
@layer components {
    .sr-settings-shell {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--sr-space-4);
    }

    .sr-settings-nav {
        flex: 1 1 100%;
        min-width: 0;
    }

    .sr-settings-content {
        flex: 1 1 48rem;
        min-width: 0;
    }

    .sr-settings-panel {
        min-width: 0;
    }

    .sr-settings-nav__mobile {
        display: grid;
        gap: .42rem;
    }

    .sr-settings-nav__desktop {
        display: none;
    }

    .sr-settings-nav__root-link,
    .sr-settings-nav__summary {
        display: flex;
        min-height: 2.35rem;
        align-items: center;
        gap: .58rem;
        padding: .48rem .58rem;
        border-radius: .48rem;
        color: var(--sr-color-text);
        font-size: .82rem;
        font-weight: 400;
        line-height: 1.25;
        white-space: nowrap;
    }

    .sr-settings-nav__root-link {
        text-decoration: none;
        transition: color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-settings-nav__root-link:hover,
    .sr-settings-nav__root-link:focus-visible,
    .sr-settings-nav__summary:hover,
    .sr-settings-nav__summary:focus-visible {
        background: transparent;
        color: var(--sr-color-brand-600);
        outline: 0;
    }

    .sr-settings-nav__root-link.is-active {
        background: var(--sr-color-surface);
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-xs);
        font-weight: 500;
    }

    .sr-settings-nav__group {
        margin-top: .14rem;
    }

    .sr-settings-nav__summary {
        cursor: pointer;
        list-style: none;
        user-select: none;
        transition: color var(--sr-transition);
    }

    .sr-settings-nav__summary::-webkit-details-marker {
        display: none;
    }

    .sr-settings-nav__item-icon {
        width: 1rem;
        height: 1rem;
        flex: 0 0 auto;
        color: currentColor;
    }

    .sr-settings-nav__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-settings-nav__chevron {
        width: .88rem;
        height: .88rem;
        margin-left: auto;
        flex: 0 0 auto;
        color: var(--sr-color-text-soft);
        transition: transform var(--sr-transition), color var(--sr-transition);
    }

    .sr-settings-nav__summary:hover .sr-settings-nav__chevron,
    .sr-settings-nav__summary:focus-visible .sr-settings-nav__chevron {
        color: var(--sr-color-brand-600);
    }

    .sr-settings-nav__group[open] > .sr-settings-nav__summary .sr-settings-nav__chevron {
        transform: rotate(90deg);
    }

    .sr-settings-nav__links {
        display: grid;
        gap: .02rem;
        padding: .06rem 0 .24rem 1.58rem;
    }

    .sr-settings-nav__link {
        display: flex;
        min-height: 2rem;
        align-items: center;
        padding: .38rem .55rem;
        border-radius: .44rem;
        color: var(--sr-color-text-muted);
        font-size: .8rem;
        font-weight: 400;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition);
    }

    .sr-settings-nav__link:hover,
    .sr-settings-nav__link:focus-visible {
        background: transparent;
        color: var(--sr-color-brand-600);
        outline: 0;
    }

    .sr-settings-nav__link.is-active {
        background: var(--sr-color-surface);
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-xs);
        font-weight: 500;
    }

    @media (min-width: 58.01rem) {
        .sr-settings-nav[data-layout="responsive"] {
            position: sticky;
            top: calc(var(--sr-topbar-height) + 1rem);
            flex: 0 0 14.25rem;
            max-height: calc(100dvh - var(--sr-topbar-height) - 2rem);
            padding: .18rem .7rem .18rem 0;
            overflow-y: auto;
        }

        .sr-settings-nav[data-layout="responsive"] .sr-settings-nav__mobile {
            display: none;
        }

        .sr-settings-nav[data-layout="responsive"] .sr-settings-nav__desktop {
            display: block;
        }
    }
}


/* Source: resources/css/04-components-10-order-workbook.css */
@layer components {
    .sr-order-workbook {
        display: grid;
        min-width: 0;
        gap: 1rem;
    }

    .sr-order-workbook-ready .sr-order-overview-strip {
        display: none;
    }

    .sr-order-workbook__tabs .sr-tabs__list {
        margin-bottom: 0;
    }

    .sr-order-workbook__panel {
        min-width: 0;
    }

    .sr-order-workbook__panel > .sr-card,
    .sr-order-workbook__overview-main > .sr-card,
    .sr-order-workbook__overview-aside > .sr-card,
    .sr-order-workbook__info-grid > .sr-card {
        margin: 0;
    }

    .sr-order-workbook__overview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: 1rem;
        align-items: start;
    }

    .sr-order-workbook__overview-main,
    .sr-order-workbook__overview-aside {
        display: grid;
        min-width: 0;
        gap: .85rem;
    }

    .sr-order-workbook__info-grid {
        display: grid;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    .sr-order-workbook__info-grid > .sr-order-contact-card,
    .sr-order-workbook__info-grid > .sr-order-side-info-card {
        height: 100%;
    }

    .sr-order-workbook__overview-aside .sr-order-process-card {
        position: sticky;
        top: 1rem;
    }

    .sr-order-workbook-next-card {
        display: grid;
        gap: .8rem;
        padding: 1.1rem;
    }

    .sr-order-workbook-next-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    .sr-order-workbook-next-card__header > div {
        display: grid;
        gap: .12rem;
    }

    .sr-order-workbook-next-card__header span {
        color: var(--sr-color-text-muted);
        font-size: .62rem;
        font-weight: 760;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .sr-order-workbook-next-card__header strong {
        color: var(--sr-color-text);
        font-size: .88rem;
    }

    .sr-order-workbook-next-card__meta {
        color: var(--sr-color-text-muted);
        font-size: .7rem;
    }

    .sr-order-workbook-next-card__link {
        color: var(--sr-color-brand-700);
        font-size: .68rem;
        font-weight: 760;
        text-decoration: none;
        white-space: nowrap;
    }

    .sr-order-workbook-next-card__link:hover,
    .sr-order-workbook-next-card__link:focus-visible {
        color: var(--sr-color-brand-600);
        text-decoration: underline;
    }

    .sr-order-workbook__empty-overview {
        padding: 1.1rem;
        color: var(--sr-color-text-muted);
        font-size: .74rem;
        line-height: 1.55;
    }

    @media (max-width: 68rem) {
        .sr-order-workbook__overview {
            grid-template-columns: 1fr;
        }

        .sr-order-workbook__overview-aside .sr-order-process-card {
            position: static;
        }
    }

    @media (max-width: 48rem) {
        .sr-order-workbook {
            gap: .8rem;
        }

        .sr-order-workbook__info-grid {
            grid-template-columns: 1fr;
        }

        .sr-order-workbook-next-card__header {
            align-items: flex-start;
            flex-direction: column;
        }
    }
}

@layer components {
    /* 0.18.3: robuster, kompakter Terminplaner. */
    .sr-order-add-panel--appointment {
        background: var(--sr-color-surface);
    }

    .sr-order-add-panel--appointment[open] {
        border-style: solid;
        border-color: var(--sr-color-border);
        box-shadow: var(--sr-shadow-xs);
    }

    .sr-order-add-panel--appointment > summary {
        min-height: 3rem;
        padding: .75rem 1rem;
        justify-content: flex-start;
        font-size: .76rem;
    }

    .sr-order-add-panel--appointment[open] > summary {
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text);
        border-bottom: 1px solid var(--sr-color-border);
    }

    .sr-order-add-panel--appointment .sr-order-appointment-form {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
        gap: .8rem;
        margin: 0;
        padding: 1rem;
        border: 0;
        background: transparent;
    }

    /* Kernfelder – sowohl über JS-Klassen als auch direkt über die Feldnamen. */
    .sr-order-appointment-form__date,
    .sr-order-appointment-form > :has([name="scheduled_date"]) { grid-column: span 3; }

    .sr-order-appointment-form__start,
    .sr-order-appointment-form > :has([name="scheduled_start_time"]) { grid-column: span 2; }

    .sr-order-appointment-form__end,
    .sr-order-appointment-form > :has([name="scheduled_end_time"]) { grid-column: span 2; }

    .sr-order-appointment-form__employee,
    .sr-order-appointment-form > :has([name="assigned_to"]) { grid-column: span 3; }

    .sr-order-appointment-form__all-day,
    .sr-order-appointment-form > :has([name="is_all_day"]) {
        grid-column: span 2;
        display: flex;
        min-height: 2.75rem;
        align-items: center;
        gap: .45rem;
        padding: 0 .15rem .15rem;
    }

    .sr-order-appointment-form__all-day .sr-field__label,
    .sr-order-appointment-form > :has([name="is_all_day"]) .sr-field__label {
        margin: 0;
        white-space: nowrap;
    }

    .sr-order-appointment-form__note,
    .sr-order-appointment-form > :has([name="notes"]) {
        grid-column: 1 / span 9;
    }

    .sr-order-appointment-form__actions,
    .sr-order-appointment-form > .sr-form-actions {
        grid-column: 10 / -1;
        display: flex;
        align-items: end;
        justify-content: flex-end;
        align-self: end;
        gap: .55rem;
        margin: 0;
        padding: 0;
    }

    .sr-order-appointment-form .sr-field__label {
        margin-bottom: .34rem;
        font-size: .68rem;
    }

    .sr-order-appointment-form .sr-field__control {
        width: 100%;
        min-height: 2.75rem;
    }

    .sr-order-appointment-form textarea.sr-field__control {
        min-height: 4.25rem;
        resize: vertical;
    }

    .sr-order-appointment-form__submit,
    .sr-order-appointment-form > .sr-form-actions .sr-button[type="submit"] {
        width: auto !important;
        min-width: 11rem;
        min-height: 2.75rem;
    }

    @media (max-width: 68rem) {
        .sr-order-add-panel--appointment .sr-order-appointment-form {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sr-order-appointment-form__date,
        .sr-order-appointment-form__start,
        .sr-order-appointment-form__end,
        .sr-order-appointment-form__employee,
        .sr-order-appointment-form__all-day,
        .sr-order-appointment-form__note,
        .sr-order-appointment-form__actions,
        .sr-order-appointment-form > :has([name="scheduled_date"]),
        .sr-order-appointment-form > :has([name="scheduled_start_time"]),
        .sr-order-appointment-form > :has([name="scheduled_end_time"]),
        .sr-order-appointment-form > :has([name="assigned_to"]),
        .sr-order-appointment-form > :has([name="is_all_day"]),
        .sr-order-appointment-form > :has([name="notes"]),
        .sr-order-appointment-form > .sr-form-actions {
            grid-column: span 1;
        }

        .sr-order-appointment-form__note,
        .sr-order-appointment-form__actions,
        .sr-order-appointment-form > :has([name="notes"]),
        .sr-order-appointment-form > .sr-form-actions {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 42rem) {
        .sr-order-add-panel--appointment .sr-order-appointment-form {
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-form__date,
        .sr-order-appointment-form__start,
        .sr-order-appointment-form__end,
        .sr-order-appointment-form__employee,
        .sr-order-appointment-form__all-day,
        .sr-order-appointment-form__note,
        .sr-order-appointment-form__actions,
        .sr-order-appointment-form > :has([name="scheduled_date"]),
        .sr-order-appointment-form > :has([name="scheduled_start_time"]),
        .sr-order-appointment-form > :has([name="scheduled_end_time"]),
        .sr-order-appointment-form > :has([name="assigned_to"]),
        .sr-order-appointment-form > :has([name="is_all_day"]),
        .sr-order-appointment-form > :has([name="notes"]),
        .sr-order-appointment-form > .sr-form-actions {
            grid-column: 1 / -1;
        }

        .sr-order-appointment-form__actions,
        .sr-order-appointment-form__submit,
        .sr-order-appointment-form > .sr-form-actions,
        .sr-order-appointment-form > .sr-form-actions .sr-button[type="submit"] {
            width: 100% !important;
        }
    }
}

/* Source: resources/css/05-pages.css */
@layer pages {

    /* Orders: leave enough room for employee names plus context counters. */
    .sr-report-list-tools__field--employee .sr-field__control {
        width: 10.5rem;
    }


    .sr-debug-card { padding: 1rem; }
    .sr-debug-stack { display: grid; gap: .55rem; }
    .sr-debug-entry { padding: .75rem .9rem; box-shadow: none; }
    .sr-debug-entry__summary { display: flex; cursor: pointer; align-items: center; flex-wrap: wrap; gap: .75rem; }
    .sr-debug-entry__context { margin: .75rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .72rem; line-height: 1.45; }
    /* The mobile navigation trigger must stay hidden on desktop. This rule lives
       in the highest CSS layer so the generic icon-button display cannot win. */
    .sr-topbar__menu { display: none; }


    @media (min-width: 58.01rem) {
        html.sr-sidebar-collapsed .sr-sidebar__brand {
            min-height: 6rem;
            align-items: center;
            padding: .85rem .55rem;
        }

        html.sr-sidebar-collapsed .sr-sidebar__brand-logo--full,
        html.sr-sidebar-collapsed .sr-sidebar__brand-meta,
        html.sr-sidebar-collapsed .sr-nav__section,
        html.sr-sidebar-collapsed .sr-nav__link > span,
        html.sr-sidebar-collapsed .sr-sidebar__footer { display: none; }

        html.sr-sidebar-collapsed .sr-sidebar__brand-logo--icon { display: block; }
        html.sr-sidebar-collapsed .sr-sidebar__brand-mark { display: grid; }
        html.sr-sidebar-collapsed .sr-nav { align-items: center; padding: 1rem .65rem; }
        html.sr-sidebar-collapsed .sr-nav__link {
            width: 3.15rem;
            min-height: 3.15rem;
            justify-content: center;
            gap: 0;
            padding: .65rem;
            border-radius: .9rem;
        }
        html.sr-sidebar-collapsed .sr-nav__link .sr-icon { width: 1.3rem; height: 1.3rem; }
    }

    @media (max-width: 82rem) {
        .sr-topbar__search { width: min(36rem, 50vw); }
    }

    @media (max-width: 74rem) {
        .sr-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-content-grid, .sr-install-grid { grid-template-columns: 1fr; }
        .sr-install-grid > aside { position: static; }
        .sr-topbar__search { width: min(34rem, 54vw); }
    }

    @media (max-width: 58rem) {
        .sr-shell { padding-left: 0; }
        .sr-sidebar { left: 0; width: min(88vw, var(--sr-sidebar-expanded-width)); transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--sr-shadow-md); }
        .sr-topbar__sidebar-toggle { display: none; }
        .sr-shell.is-nav-open .sr-sidebar { transform: translateX(0); }
        .sr-backdrop { position: fixed; inset: 0; z-index: 25; border: 0; background: rgb(var(--sr-color-brand-900-rgb) / 48%); backdrop-filter: blur(3px); }
        .sr-shell.is-nav-open .sr-backdrop { display: block; }
        .sr-topbar__menu { display: inline-grid; }
        .sr-topbar__search { width: auto; flex: 1; }
        .sr-component-grid, .sr-content-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 46rem) {
        .sr-global-search__shortcut { display: none; }
    }

    @media (max-width: 42rem) {
        .sr-main { padding: 1.1rem; }
        .sr-topbar { min-height: 4.3rem; gap: .6rem; padding: .7rem 1rem; }
        .sr-avatar--topbar { width: 2.45rem; height: 2.45rem; }
        .sr-user-dropdown { position: fixed; top: 4.75rem; right: .75rem; width: min(19rem, calc(100vw - 1.5rem)); }
        .sr-page-heading { align-items: stretch; flex-direction: column; margin-bottom: var(--sr-space-5); }
        .sr-page-heading > .sr-button { width: 100%; }
        .sr-stats-grid, .sr-form-grid, .sr-component-grid { grid-template-columns: 1fr; }
        .sr-form-grid__wide { grid-column: auto; }
        .sr-form-actions { align-items: stretch; flex-direction: column; }
        .sr-form-actions .sr-button { width: 100%; }
        .sr-progress-list__item { grid-template-columns: auto minmax(0, 1fr); }
        .sr-progress-list__item > .sr-badge { grid-column: 2; }
        .sr-install-shell { width: min(100% - 1rem, 86rem); padding: .5rem 0 1rem; }
        .sr-install-header { padding: .75rem; }
        .sr-card { border-radius: var(--sr-radius-md); }
        .sr-auth-shell { padding: 1rem; }
        .sr-auth-card { padding: 1.35rem; border-radius: var(--sr-radius-lg); }
        .sr-auth-card__brand { align-items: flex-start; flex-direction: column; }
        .sr-auth-card__brand div { text-align: left; }
        .sr-search-panel { position: fixed; top: 4.75rem; left: .75rem; right: .75rem; width: auto; }
    }



    @media (max-width: 42rem) {
        .sr-smtp-test__action { grid-template-columns: 1fr; }
        .sr-auth-meta { align-items: center; flex-direction: column; }
        .sr-code-input { letter-spacing: .35em; }
    }



    @media (max-width: 72rem) {
        .sr-report-detail-grid { grid-template-columns: 1fr; }
        .sr-report-detail-grid > aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-report-detail-grid > aside > * { min-width: 0; }
        .sr-signature-card, .sr-signed-card { grid-column: 1 / -1; }
    }

    @media (max-width: 58rem) {
        .sr-report-filter { grid-template-columns: 1fr 13rem; }
        .sr-report-filter__actions { grid-column: 1 / -1; }
        .sr-form-grid--report { grid-template-columns: 1fr; }
        .sr-form-grid--report .sr-form-grid__wide { grid-column: auto; }
        .sr-report-copy-grid { grid-template-columns: 1fr; }
        .sr-report-copy-block:nth-child(odd) { border-right: 0; }
        .sr-report-copy-block:nth-child(-n + 3) { border-bottom: 1px solid var(--sr-color-border); }
        .sr-report-copy-block:last-child { border-bottom: 0; }
    }

    @media (max-width: 42rem) {
        .sr-report-filter { grid-template-columns: 1fr; }
        .sr-report-filter__actions { grid-column: auto; align-items: stretch; flex-direction: column; }
        .sr-report-filter__actions .sr-button { width: 100%; }
        .sr-report-savebar { position: static; align-items: stretch; flex-direction: column; }
        .sr-report-savebar .sr-button { width: 100%; }
        .sr-report-detail-grid > aside { grid-template-columns: 1fr; }
        .sr-description-grid { grid-template-columns: 1fr; }
        .sr-description-grid > div:nth-child(odd) { border-right: 0; }
        .sr-description-grid > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--sr-color-border); }
        .sr-description-grid > div:last-child { border-bottom: 0; }
        .sr-signature-pad canvas { height: 11rem; }
        .sr-report-lock-notice { align-items: flex-start; }
    }



    @media (max-width: 86rem) {
        .sr-service-row {
            grid-template-columns: 2.25rem minmax(8rem, .75fr) minmax(12rem, 1.5fr) 6rem 5rem 6.5rem 6.8rem 2.4rem;
        }
    }

    @media (max-width: 72rem) {
        .sr-report-jumpnav { top: calc(var(--sr-topbar-height) + .35rem); }
        .sr-service-row {
            grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr)) 2.4rem;
            grid-template-areas:
                "number category description remove"
                "number quantity unit ."
                "number detail detail ."
                "number price total .";
        }
        .sr-material-row { grid-template-columns: 2.25rem repeat(2, minmax(0, 1fr)) 2.4rem; }
        .sr-material-row > .sr-repeater-row__number { grid-column: 1; grid-row: 1 / span 3; }
        .sr-material-row > .sr-field:nth-child(2) { grid-column: 2; }
        .sr-material-row > .sr-field:nth-child(3) { grid-column: 3; }
        .sr-material-row__description { grid-column: 2 / 4; }
        .sr-material-row > .sr-field:nth-child(5) { grid-column: 2; }
        .sr-material-row > .sr-line-total { grid-column: 3; }
        .sr-material-row > .sr-repeater-remove { grid-column: 4; grid-row: 1; }
    }

    @media (max-width: 58rem) {
        .sr-report-section__header { align-items: stretch; flex-direction: column; }
        .sr-report-number-chip { align-self: flex-start; }
        .sr-report-time-grid, .sr-report-subgrid, .sr-signature-grid { grid-template-columns: 1fr; }
        .sr-repeater-toolbar { grid-template-columns: 1fr; }
        .sr-repeater-toolbar .sr-button { width: 100%; }
        .sr-report-status-checks { grid-template-columns: 1fr; }
        .sr-signature-finalize { align-items: stretch; flex-direction: column; }
        .sr-signature-finalize .sr-button { width: 100%; }
    }

    @media (max-width: 42rem) {
        .sr-report-jumpnav { position: static; margin-bottom: 1rem; }
        .sr-report-jumpnav a { flex: 0 0 auto; }
        .sr-repeater-row, .sr-service-row, .sr-material-row {
            grid-template-columns: 2.25rem minmax(0, 1fr) 2.4rem;
            grid-template-areas: none;
            align-items: start;
        }
        .sr-repeater-row > * { grid-column: 2; grid-row: auto; }
        .sr-repeater-row > .sr-repeater-row__number { grid-column: 1; grid-row: 1; }
        .sr-repeater-row > .sr-repeater-remove { grid-column: 3; grid-row: 1; }
        .sr-repeater-row > .sr-line-total { min-height: 3.2rem; }
        .sr-report-savebar { margin-top: 0; }
        .sr-signature-meta { align-items: flex-start; flex-direction: column; }
    }



    @media (max-width: 78rem) {
        .sr-report-workspace { grid-template-columns: 14.5rem minmax(0, 1fr); }
        .sr-report-step { grid-template-columns: 2rem minmax(0, 1fr); }
        .sr-report-step__label { display: none; }
    }

    @media (max-width: 68rem) {
        .sr-report-heading { align-items: stretch; }
        .sr-report-heading__actions { justify-content: flex-start; }
        .sr-report-workspace { grid-template-columns: 1fr; gap: .8rem; }
        .sr-report-stepper { top: calc(var(--sr-topbar-height) + .45rem); }
        .sr-report-stepper__mobile-current { display: flex; width: 100%; min-height: 3.9rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem 1rem; border: 1px solid var(--sr-color-border-strong); border-radius: var(--sr-radius-lg); background: rgb(255 255 255 / 97%); color: var(--sr-color-text); box-shadow: var(--sr-shadow-sm); text-align: left; backdrop-filter: blur(14px); }
        .sr-report-stepper__mobile-current > span:first-child { display: grid; gap: .1rem; }
        .sr-report-stepper__mobile-current small { color: var(--sr-color-brand-600); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
        .sr-report-stepper__mobile-current strong { font-size: .9rem; }
        .sr-report-stepper__chevron { color: var(--sr-color-text-muted); font-size: 1.2rem; transition: transform .18s ease; }
        .sr-report-stepper.is-open .sr-report-stepper__chevron { transform: rotate(180deg); }
        .sr-report-stepper__panel { display: none; position: absolute; top: calc(100% + .45rem); left: 0; right: 0; max-height: min(70vh, 36rem); overflow: auto; box-shadow: var(--sr-shadow-md); }
        .sr-report-stepper.is-open .sr-report-stepper__panel { display: block; }
        .sr-report-section { min-height: 0; }
    }

    @media (max-width: 42rem) {
        .sr-report-heading__actions { display: grid; grid-template-columns: 1fr 1fr; }
        .sr-report-heading__actions .sr-button { width: 100%; }
        .sr-report-heading__meta { align-items: flex-start; flex-direction: column; }
        .sr-report-step-actions { grid-template-columns: 1fr 1fr; }
        .sr-report-step-actions__position { grid-column: 1 / -1; grid-row: 1; }
        .sr-report-step-actions > .sr-button { width: 100%; }
        .sr-report-step-actions__position small { display: none; }
        .sr-report-section { padding: 1rem; }
    }



    @media (max-width: 58rem) {
        .sr-report-overview { grid-template-columns: 1fr; gap: .65rem; }
        .sr-report-overview__progress { grid-template-columns: auto minmax(0, 1fr); }
        .sr-report-accordion__item .sr-report-section { padding: 1rem; }
    }
    @media (max-width: 42rem) {
        .sr-report-heading--workspace { gap: .8rem; }
        .sr-report-heading__titleline { justify-content: space-between; }
        .sr-report-heading__actions { grid-template-columns: 1fr; }
        .sr-report-heading__actions .sr-button { min-height: 2.75rem; }
        .sr-report-overview { padding: .75rem; }
        .sr-report-overview__copy span { display: none; }
        .sr-report-accordion__trigger { grid-template-columns: 2.1rem minmax(0, 1fr) auto .9rem; gap: .6rem; min-height: 3.75rem; padding: .62rem .72rem; }
        .sr-report-accordion__copy small { display: none; }
        .sr-report-step__label { font-size: .58rem; }
        .sr-report-accordion__item .sr-report-section { margin-top: .35rem; padding: .85rem; }
        .sr-report-step-actions { grid-template-columns: 1fr 1fr; padding: .45rem 0; }
        .sr-report-step-actions__position { grid-column: 1 / -1; grid-row: 1; }
    }



    @media (max-width: 72rem) {
        .sr-position-edit-grid--service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-position-edit-grid--service .sr-position-edit-grid__detail { grid-column: 1 / -1; }
        .sr-position-edit-grid--material { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(5rem, .6fr)); }
    }

    @media (max-width: 58rem) {
        .sr-report-workflow-page .sr-topbar { min-height: 3.7rem; padding-top: .45rem; padding-bottom: .45rem; }
        .sr-report-workflow-page .sr-topbar__search { display: none; }
        .sr-report-workflow-page .sr-main { padding: .8rem 1rem 6.6rem; }
        .sr-report-workflow-page .sr-report-heading--compact-workflow { min-height: 3.35rem; margin-bottom: .7rem; }
        .sr-report-heading--compact-workflow .sr-page-heading__eyebrow { display: none; }
        .sr-report-heading--compact-workflow h1 { font-size: 1.45rem; }
        .sr-report-heading--compact-workflow .sr-report-heading__overview { min-height: 2.35rem; padding: .5rem .65rem; }
        .sr-report-editor--multistep .sr-report-step-panel { padding: .9rem; }
        .sr-customer-review { padding: .75rem; }
        .sr-customer-review__group { padding: .7rem; }
        .sr-form-grid--report, .sr-report-subgrid, .sr-signature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-form-grid--report .sr-form-grid__wide { grid-column: 1 / -1; }
        .sr-report-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .sr-position-edit-grid--material { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-position-edit-grid--material .sr-position-edit-grid__description { grid-column: 1 / -1; }
        .sr-report-dock { left: 0; }
        .sr-step-menu-backdrop { left: 0; }
        .sr-step-menu { right: .5rem; bottom: 4.45rem; left: .5rem; width: auto; max-height: min(78dvh, 39rem); }
        .sr-step-menu__handle { height: .32rem; cursor: grab; touch-action: none; }
        .sr-step-menu.is-dragging .sr-step-menu__handle { cursor: grabbing; }
        .sr-report-dock { padding-right: .65rem; padding-left: .65rem; }
        .sr-report-dock__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .4rem; }
        .sr-report-dock__side { gap: .4rem; }
        .sr-report-dock button { min-height: 2.85rem; }
        .sr-report-dock__menu, .sr-report-dock__nav, .sr-report-dock__save, .sr-report-dock__finalize { padding: .58rem .7rem; }
        .sr-report-dock__menu > span, .sr-report-dock__nav--previous > span, .sr-report-dock__save > span { display: none; }
        .sr-report-dock__menu, .sr-report-dock__nav--previous, .sr-report-dock__save { width: 2.85rem; padding: 0; }
        .sr-position-launcher { align-items: stretch; flex-direction: column; }
        .sr-position-launcher__actions { justify-content: flex-start; }
    }

    @media (max-width: 42rem) {
        .sr-report-workflow-page .sr-main { padding-right: .65rem; padding-left: .65rem; }
        .sr-report-heading--compact-workflow { align-items: center; flex-direction: row; }
        .sr-report-heading--compact-workflow .sr-report-heading__overview span { display: none; }
        .sr-report-heading--compact-workflow .sr-report-heading__overview { width: 2.55rem; padding: 0; }
        .sr-form-grid--report, .sr-report-subgrid, .sr-signature-grid { grid-template-columns: 1fr; }
        .sr-customer-review__header { align-items: stretch; flex-direction: column; gap: .55rem; }
        .sr-customer-review__badge { align-self: flex-start; }
        .sr-customer-review__facts, .sr-customer-review__facts--times, .sr-customer-review__text-grid { grid-template-columns: 1fr; }
        .sr-customer-review__fact--wide { grid-column: auto; }
        .sr-form-grid--report .sr-form-grid__wide { grid-column: auto; }
        .sr-report-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-report-time-grid .sr-field:last-child { grid-column: 1 / -1; }
        .sr-position-card__head { grid-template-columns: 1.2rem 2.25rem minmax(0, 1fr) 5.4rem 2.15rem; gap: .38rem; padding: .45rem .5rem; }
        .sr-position-card__number { width: 2.1rem; height: 2.1rem; font-size: .74rem; }
        .sr-position-card__summary strong { font-size: .75rem; }
        .sr-position-card__summary span { font-size: .61rem; }
        .sr-position-card__total strong { font-size: .7rem; }
        .sr-position-edit-grid--service, .sr-position-edit-grid--material { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-position-edit-grid--service .sr-position-edit-grid__description,
        .sr-position-edit-grid--service .sr-position-edit-grid__detail,
        .sr-position-edit-grid--material .sr-position-edit-grid__description { grid-column: 1 / -1; }
        .sr-report-status-checks { grid-template-columns: 1fr; }
        .sr-report-editor--multistep .sr-signature-pad canvas { height: 8.5rem; }
        .sr-finalize-hint--action { grid-template-columns: 1fr; }
        .sr-finalize-hint--action .sr-button { width: 100%; min-width: 0; justify-self: stretch; }
        .sr-toast-region { top: .65rem; right: .65rem; width: calc(100vw - 1.3rem); }
        .sr-report-dock__current strong { font-size: .7rem; }
        .sr-report-dock__nav--next span:first-child, .sr-report-dock__finalize span { display: none; }
        .sr-report-dock__nav--next, .sr-report-dock__finalize { width: 2.85rem; padding: 0; }
        .sr-report-dock__finalize .sr-icon { display: block; }
        .sr-activity-list { padding-right: 1rem; padding-left: 1rem; }
        .sr-activity-list__item { grid-template-columns: .5rem minmax(0, 1fr) auto; gap: .55rem; }
        .sr-activity-list__time span { display: none; }
        .sr-position-launcher__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-position-launcher__actions .sr-button { width: 100%; }
        .sr-choice-layer { align-items: end; padding: .55rem; }
        .sr-choice-modal { width: 100%; max-height: min(82dvh, 42rem); border-radius: 1rem 1rem .7rem .7rem; }
        .sr-report-check-layer { align-items: end; padding: .55rem; }
        .sr-report-check-modal { width: 100%; max-height: min(88dvh, 48rem); border-radius: 1rem 1rem .7rem .7rem; }
        .sr-report-check-modal__footer { display: grid; grid-template-columns: 1fr 1fr; }
        .sr-report-check-modal__footer .sr-button { width: 100%; }
        .sr-report-check-modal__footer .sr-button:first-child { margin-right: 0; }
        .sr-report-check-modal__footer .sr-button:last-child { grid-column: 1 / -1; }
    }

    @media (max-width: 34rem) {
        .sr-report-time-grid, .sr-position-edit-grid--service, .sr-position-edit-grid--material { grid-template-columns: 1fr; }
        .sr-report-time-grid .sr-field:last-child,
        .sr-position-edit-grid--service .sr-position-edit-grid__description,
        .sr-position-edit-grid--service .sr-position-edit-grid__detail,
        .sr-position-edit-grid--material .sr-position-edit-grid__description { grid-column: auto; }
        .sr-position-card__head { grid-template-columns: 1.15rem 2.1rem minmax(0, 1fr) 2.05rem; }
        .sr-position-card__total { display: none; }
        .sr-report-check-row { grid-template-columns: 1.8rem minmax(0, 1fr); }
        .sr-report-check-row__status { grid-column: 2; justify-self: start; }
        .sr-customer-review__line { grid-template-columns: 1fr; gap: .35rem; }
        .sr-customer-review__line > div:last-child { grid-template-columns: 1fr auto; justify-items: initial; text-align: left; }
        .sr-customer-review__line > div:last-child strong { text-align: right; }
        .sr-report-dock__current small { display: none; }
        .sr-position-launcher__actions { grid-template-columns: 1fr; }
        .sr-position-launcher { padding: .75rem; }
    }



    @media (max-width: 58rem) {
        .sr-report-dock__completed-inner { grid-template-columns: auto minmax(5rem, 1fr) auto; gap: .45rem; }
        .sr-report-dock__completed-overview { width: 2.85rem; padding: 0; }
        .sr-report-dock__completed-overview span { display: none; }
        .sr-report-dock__completed-actions { gap: .38rem; }
        .sr-report-dock__completed-actions .sr-button { width: 2.85rem; padding: 0; }
        .sr-report-dock__completed-actions .sr-button span { display: none; }
    }

    @media (max-width: 42rem) {
        .sr-report-editor--locked { padding-bottom: 9.8rem; }
        .sr-report-dock--completed { padding: .5rem .55rem max(.5rem, env(safe-area-inset-bottom)); }
        .sr-report-dock__completed-inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "overview status" "actions actions"; }
        .sr-report-dock__completed-overview { grid-area: overview; }
        .sr-report-dock__completed-status { grid-area: status; justify-items: start; text-align: left; }
        .sr-report-dock__completed-actions { grid-area: actions; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
        .sr-report-dock__completed-actions .sr-button { width: 100%; min-width: 0; padding: .55rem .35rem; }
        .sr-report-dock__completed-actions .sr-button span { display: inline; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
        .sr-report-email-layer { align-items: end; padding: .55rem; }
        .sr-report-email-modal { width: 100%; max-height: min(88dvh, 44rem); border-radius: 1rem 1rem .7rem .7rem; }
        .sr-report-email-modal__footer { display: grid; grid-template-columns: 1fr 1fr; }
        .sr-report-email-modal__footer .sr-button { width: 100%; }
        .sr-report-reopen-callout { grid-template-columns: 1fr; align-items: start; }
        .sr-report-reopen-callout__button { width: 100%; justify-self: stretch; justify-content: center; }
        .sr-report-reopen-layer { align-items: end; padding: .55rem; }
        .sr-report-reopen-modal { width: 100%; max-height: min(88dvh, 42rem); border-radius: 1rem 1rem .7rem .7rem; }
        .sr-report-reopen-modal__footer { display: grid; grid-template-columns: 1fr 1fr; }
        .sr-report-reopen-modal__footer .sr-button { width: 100%; }
    }

    @media (max-width: 31rem) {
        .sr-report-dock__completed-actions .sr-button span { display: none; }
    }



    @media (max-width: 74rem) {
        .sr-numbering-layout { grid-template-columns: 1fr; }
        .sr-numbering-preview { position: static; }
        .sr-report-export { grid-template-columns: minmax(0, 1fr) minmax(13rem, .45fr); }
        .sr-report-export__actions { grid-column: 1 / -1; justify-content: flex-end; }
    }

    @media (max-width: 48rem) {
        .sr-numbering-reset { grid-template-columns: 1fr; }
        .sr-numbering-reset .sr-field__control { width: 100%; }
        .sr-report-export { grid-template-columns: 1fr; }
        .sr-report-export__actions { grid-column: auto; align-items: stretch; flex-direction: column; }
        .sr-report-export__actions .sr-button { width: 100%; }
        .sr-report-export__hint { grid-column: auto; }
        .sr-table__select { width: 2.5rem; }
    }



    @media (max-width: 48rem) {
        .sr-report-list-tools__filters {
            align-items: stretch;
            flex-wrap: wrap;
        }
        .sr-report-list-tools__summary {
            flex: 1 1 100%;
        }
        .sr-report-list-tools__controls {
            width: 100%;
        }
        .sr-report-list-tools__field {
            flex: 1 1 9rem;
        }
        .sr-report-list-tools__field .sr-field__control,
        .sr-report-list-tools__field--small .sr-field__control {
            width: 100%;
        }
        .sr-filter-chip {
            max-width: 100%;
        }
    }



    @media (max-width: 78rem) {
        .sr-report-toolbar { align-items: stretch; flex-direction: column; }
        .sr-report-toolbar__filters, .sr-report-toolbar__export { width: 100%; }
        .sr-report-toolbar__export { justify-content: flex-end; padding-top: .65rem; border-top: 1px solid var(--sr-color-border); }
    }

    @media (max-width: 58rem) {
        .sr-report-dock__completed-inner { display: flex; justify-content: center; }
        .sr-report-dock__completed-actions { justify-content: center; gap: .38rem; }
        .sr-report-dock__completed-actions .sr-button { width: auto; min-width: 2.85rem; padding: 0 .75rem; }
        .sr-report-dock__completed-actions .sr-button span { display: inline; }
    }

    @media (max-width: 48rem) {
        .sr-report-toolbar__filters, .sr-report-toolbar__export { flex-wrap: wrap; }
        .sr-report-toolbar__summary { flex: 1 1 100%; }
        .sr-report-toolbar__field { flex: 1 1 8rem; }
        .sr-report-toolbar__field .sr-field__control,
        .sr-report-toolbar__field--small .sr-field__control,
        .sr-report-toolbar__field--format .sr-field__control { width: 100%; }
        .sr-report-toolbar__selection { flex: 1 1 100%; }
        .sr-report-toolbar__export .sr-button { flex: 1 1 auto; }
        .sr-pagination { align-items: stretch; flex-direction: column; }
        .sr-pagination__summary { text-align: center; }
        .sr-pagination__pages { justify-content: center; flex-wrap: wrap; }
        .sr-report-lock-notice { grid-template-columns: auto minmax(0, 1fr); }
        .sr-report-lock-notice__time { grid-column: 2; justify-items: start; padding: .55rem 0 0; border-top: 1px solid rgb(24 134 91 / 18%); border-left: 0; text-align: left; }
    }

    @media (max-width: 42rem) {
        .sr-report-editor--locked { padding-bottom: 6.7rem; }
        .sr-report-dock__completed-inner { display: flex; }
        .sr-report-dock__completed-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
        .sr-report-dock__completed-actions .sr-button { width: 100%; min-width: 0; padding: .55rem .35rem; }
        .sr-report-dock__completed-actions .sr-button span { display: inline; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
    }

    @media (max-width: 31rem) {
        .sr-report-dock__completed-actions .sr-button span { display: none; }
        .sr-pagination__button span { display: none; }
    }



    @media (max-width: 64rem) {
        .sr-bulk-export-bar { width: min(40rem, calc(100vw - var(--sr-sidebar-width) - 1.25rem)); }
        .sr-bulk-export-bar__inner { flex-wrap: wrap; }
        .sr-bulk-export-bar__summary { flex: 1 1 13rem; }
        .sr-bulk-export-bar__field { min-width: 11rem; margin-left: 0; }
        .sr-bulk-export-bar__actions { margin-left: auto; }
    }

    @media (max-width: 58rem) {
        .sr-bulk-export-bar {
            left: 50%;
            width: min(42rem, calc(100vw - 1.25rem));
        }
    }

    @media (max-width: 44rem) {
        .sr-bulk-export-bar {
            bottom: 0;
            width: 100%;
            transform: translate(-50%, calc(100% + 1rem));
        }
        .sr-bulk-export-bar.is-visible { transform: translate(-50%, 0); }
        .sr-bulk-export-bar__inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: .65rem;
            padding: .8rem .8rem max(.8rem, env(safe-area-inset-bottom));
            border-right: 0;
            border-bottom: 0;
            border-left: 0;
            border-radius: 1rem 1rem 0 0;
        }
        .sr-bulk-export-bar__summary { min-width: 0; }
        .sr-bulk-export-bar__copy > span { display: none; }
        .sr-bulk-export-bar__close { grid-column: 2; grid-row: 1; }
        .sr-bulk-export-bar__field { grid-column: 1 / -1; width: 100%; }
        .sr-bulk-export-bar__actions {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: 1fr;
            width: 100%;
            margin-left: 0;
        }
        .sr-bulk-export-bar__actions .sr-button { width: 100%; min-width: 0; }
        body.sr-bulk-export-open .sr-main { padding-bottom: 12rem; }
    }

    @media (max-width: 32rem) {
        body.sr-bulk-export-open .sr-main { padding-bottom: 12.5rem; }
    }



    @media (max-width: 64rem) {
        .sr-bulk-export-bar { width: min(38rem, calc(100vw - var(--sr-sidebar-width) - 1.25rem)); }
    }

    @media (max-width: 58rem) {
        .sr-bulk-export-bar { width: min(39rem, calc(100vw - 1.25rem)); }
    }

    @media (max-width: 42rem) {
        .sr-page-primary-action {
            width: 100%;
            margin-top: 0;
        }

        .sr-page-primary-action .sr-button {
            width: 100%;
            justify-content: center;
        }
    }




    @media (max-width: 58rem) {
        .sr-search-backdrop,
        .sr-topbar-time-backdrop,
        .sr-user-menu-backdrop { left: 0; }
        .sr-profile-grid { grid-template-columns: 1fr; }
        .sr-profile-summary { position: static; }
    }

    @media (max-width: 42rem) {
        .sr-profile-content > .sr-card { padding: var(--sr-space-4); }
        .sr-profile-danger-zone .sr-card__header,
        .sr-profile-danger-zone__body { padding: var(--sr-space-4); }
        .sr-profile-danger-zone__body { align-items: stretch; flex-direction: column; }
        .sr-profile-danger-zone__body .sr-button { width: 100%; }
        .sr-preference-row { align-items: flex-start; }
    }



    @media (max-width: 42rem) {
        .sr-auth-page--login .sr-auth-shell { padding: 1rem; }
        .sr-auth-page--login .sr-auth-card { padding: 1.35rem; }
        .sr-auth-page--login .sr-auth-card__brand--simple { margin-bottom: 1.3rem; }
        .sr-auth-page--login .sr-auth-card__brand--simple img { width: 8.25rem; }
        .sr-auth-heading--login { margin-bottom: 1.35rem; }
        .sr-auth-heading--login h1 { font-size: 1.75rem; }
        .sr-auth-password-toggle { padding-inline: .8rem; }

        .sr-error-shell { padding: 1.25rem; }
        .sr-error-view__brand { margin-bottom: 2rem; }
        .sr-error-view__code { margin-bottom: .15rem; }
    }



    /* The floating export bar is centered inside the currently visible app area.
       It therefore follows the sidebar width instead of relying on a fixed offset. */
    @media (max-width: 64rem) {
        .sr-bulk-export-bar {
            right: 0;
            left: var(--sr-sidebar-width);
            width: auto;
        }
        .sr-bulk-export-bar__inner { width: min(38rem, 100%); }
    }

    @media (max-width: 58rem) {
        .sr-bulk-export-bar {
            right: 0;
            left: 0;
            width: auto;
        }
    }

    @media (max-width: 44rem) {
        .sr-bulk-export-bar {
            right: 0;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
            transform: translateY(calc(100% + 1rem));
        }
        .sr-bulk-export-bar.is-visible { transform: translateY(0); }
        .sr-bulk-export-bar__inner { width: 100%; }
    }



    .sr-page-heading__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .65rem;
        flex-wrap: wrap;
    }

    .sr-customer-page-actions { align-self: flex-start; margin-top: -.55rem; }
    .sr-customer-page-actions .sr-page-primary-action { margin-top: 0; }
    .sr-customer-page-actions .sr-button { min-height: 3rem; border-radius: .9rem; }
    .sr-customer-sync-modal { width: min(100%, 38rem); }
    .sr-customer-sync-modal__notice { margin-bottom: .65rem; }
    .sr-customer-sync-overview { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
    .sr-customer-table-card { box-shadow: 0 14px 36px rgb(17 24 32 / 5%); }
    .sr-customer-table th { white-space: nowrap; }
    .sr-customer-table td { vertical-align: middle; }
    .sr-table-link { color: var(--sr-color-brand-800); font-weight: 820; }
    .sr-table-link:hover { color: var(--sr-color-brand-600); }
    .sr-table__muted { color: var(--sr-color-text-muted); font-size: .85rem; }
    .sr-customer-cell { display: inline-flex; min-width: 13rem; align-items: center; gap: .75rem; color: inherit; }
    .sr-customer-cell__icon {
        display: grid;
        width: 2.55rem;
        height: 2.55rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .75rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-600);
    }
    .sr-customer-cell__icon .sr-icon { width: 1.2rem; height: 1.2rem; }
    .sr-customer-cell > span:last-child { display: grid; gap: .15rem; min-width: 0; }
    .sr-customer-cell strong { color: var(--sr-color-text); }
    .sr-customer-cell small { overflow: hidden; color: var(--sr-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
    .sr-customer-counts { display: grid; gap: .13rem; color: var(--sr-color-text-soft); font-size: .78rem; }

    .sr-customer-type-filter .sr-field__control { width: 10.75rem; }

    .sr-customer-table {
        min-width: 82rem;
        table-layout: fixed;
    }
    .sr-customer-table th:nth-child(1) { width: 19%; }
    .sr-customer-table th:nth-child(2) { width: 19%; }
    .sr-customer-table th:nth-child(3) { width: 10%; }
    .sr-customer-table th:nth-child(4) { width: 12%; }
    .sr-customer-table th:nth-child(5) { width: 9%; }
    .sr-customer-table th:nth-child(6) { width: 11%; }
    .sr-customer-table th:nth-child(7) { width: 11%; }
    .sr-customer-table th:nth-child(8) { width: 9%; }
    .sr-customer-table th:nth-child(3),
    .sr-customer-table th:nth-child(4),
    .sr-customer-table th:nth-child(5),
    .sr-customer-table__count-cell { text-align: center; }
    .sr-customer-table tbody tr.is-archived { background: #f7f9fa; color: var(--sr-color-text-soft); }

    .sr-customer-cell--identity { min-width: 0; }
    .sr-customer-cell--identity > span:last-child { overflow: hidden; }
    .sr-customer-cell--identity strong,
    .sr-customer-cell--identity small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sr-customer-cell--identity small {
        color: var(--sr-color-text-muted);
        font-size: .72rem;
        font-weight: 500;
        line-height: 1.35;
    }

    .sr-customer-table__stack,
    .sr-customer-table__metric,
    .sr-customer-table__contact {
        display: grid;
        min-width: 0;
        gap: .18rem;
    }
    .sr-customer-table__stack strong,
    .sr-customer-table__metric strong,
    .sr-customer-table__contact strong {
        overflow: hidden;
        color: var(--sr-color-text);
        font-size: .82rem;
        font-weight: 760;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sr-customer-table__stack small,
    .sr-customer-table__metric small,
    .sr-customer-table__contact a {
        overflow: hidden;
        color: var(--sr-color-text-muted);
        font-size: .72rem;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sr-customer-table__contact a:hover { color: var(--sr-color-brand-700); }
    .sr-customer-table__metric--compact {
        justify-items: start;
        align-content: center;
    }
    .sr-customer-table__metric--compact strong {
        font-size: 1rem;
        line-height: 1;
    }

    .sr-customer-table__count {
        display: inline-grid;
        min-width: 2.5rem;
        place-items: center;
        color: var(--sr-color-text);
    }
    .sr-customer-table__count strong {
        font-size: 1rem;
        font-weight: 820;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .sr-customer-table__action-group {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: .42rem;
        white-space: nowrap;
    }

    .sr-customer-lexware-notice { width: 100%; max-width: none; margin: 0 0 1.25rem; }
    .sr-customer-form { width: 100%; max-width: none; margin-inline: 0; }
    .sr-customer-form-card { padding: clamp(1.15rem, 2vw, 1.6rem); }
    .sr-customer-type-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.35rem; }
    .sr-customer-type-option { position: relative; cursor: pointer; }
    .sr-customer-type-option input { position: absolute; opacity: 0; pointer-events: none; }
    .sr-customer-type-option > span {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: .18rem .75rem;
        align-items: center;
        min-height: 5rem;
        padding: .95rem 1rem;
        border: 1px solid var(--sr-color-border-strong);
        border-radius: .85rem;
        background: var(--sr-color-surface-soft);
        transition: border-color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition), transform var(--sr-transition);
    }
    .sr-customer-type-option .sr-icon { grid-row: 1 / span 2; width: 1.35rem; height: 1.35rem; color: var(--sr-color-brand-600); }
    .sr-customer-type-option strong { font-size: .92rem; }
    .sr-customer-type-option small { color: var(--sr-color-text-muted); line-height: 1.35; }
    .sr-customer-type-option input:checked + span { border-color: var(--sr-color-brand-500); background: var(--sr-color-brand-50); box-shadow: 0 0 0 3px rgb(43 106 163 / 10%); }
    .sr-customer-type-option input:focus-visible + span { outline: 3px solid rgb(43 106 163 / 18%); outline-offset: 2px; }

    .sr-customer-repeater__section-header { align-items: center; }
    .sr-customer-repeater { display: grid; gap: .65rem; }
    .sr-customer-repeater__empty {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .85rem;
        min-height: 5.2rem;
        padding: .95rem 1rem;
        border: 1px dashed var(--sr-color-border-strong);
        border-radius: .9rem;
        background: var(--sr-color-surface-soft);
    }
    .sr-customer-repeater__empty[hidden] { display: none; }
    .sr-customer-repeater__empty-icon {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: .75rem;
        background: var(--sr-color-success-soft);
        color: var(--sr-color-success);
    }
    .sr-customer-repeater__empty-icon .sr-icon { width: 1.15rem; height: 1.15rem; }
    .sr-customer-repeater__empty > div { display: grid; gap: .18rem; min-width: 0; }
    .sr-customer-repeater__empty strong { font-size: .88rem; }
    .sr-customer-repeater__empty span:not(.sr-customer-repeater__empty-icon):not(.sr-badge) { color: var(--sr-color-text-muted); font-size: .76rem; line-height: 1.45; }
    .sr-customer-repeater__item { min-width: 0; }
    .sr-customer-repeater__item .sr-position-card__editor { background: var(--sr-color-surface-soft); }
    .sr-customer-repeater__options { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--sr-color-border); }
    .sr-switch--compact { gap: .55rem; }
    .sr-switch--compact .sr-switch__label { font-size: .78rem; }
    .sr-customer-textarea { min-height: 5rem; resize: vertical; }
    .sr-customer-textarea--large { min-height: 8rem; }
    .sr-customer-form-actions { position: sticky; bottom: 1rem; z-index: 10; padding: .8rem 1rem; border: 1px solid var(--sr-color-border); border-radius: .9rem; background: rgb(255 255 255 / 94%); box-shadow: var(--sr-shadow-md); backdrop-filter: blur(12px); }

    .sr-customer-detail-heading__badges { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; }
    .sr-customer-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
    .sr-customer-detail-card { min-width: 0; }
    .sr-customer-detail-card__icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .8rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-600); }
    .sr-customer-definition-list { display: grid; gap: .9rem; margin: 0; }
    .sr-customer-definition-list > div { display: grid; grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr); gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-customer-definition-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
    .sr-customer-definition-list dt { color: var(--sr-color-text-muted); font-size: .78rem; font-weight: 760; }
    .sr-customer-definition-list dd { margin: 0; color: var(--sr-color-text); font-weight: 680; text-align: right; overflow-wrap: anywhere; }
    .sr-customer-definition-list dd small { display: block; margin-top: .15rem; color: var(--sr-color-text-muted); font-weight: 500; }
    .sr-customer-definition-list--compact { gap: .7rem; }
    .sr-customer-sync-description { margin-bottom: 1rem; color: var(--sr-color-text-muted); }
    .sr-customer-sync-hint { margin-top: 1rem; }
    .sr-customer-detail-section { margin-bottom: 1rem; }
    .sr-customer-location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
    .sr-customer-location-card { display: grid; gap: .6rem; padding: 1rem; border: 1px solid var(--sr-color-border); border-radius: .85rem; background: var(--sr-color-surface-soft); }
    .sr-customer-location-card.is-inactive, .sr-customer-contact-row.is-inactive { opacity: .55; }
    .sr-customer-location-card__header { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
    .sr-customer-location-card__header > div { display: grid; gap: .12rem; }
    .sr-customer-location-card__header small { color: var(--sr-color-text-muted); }
    .sr-customer-location-card p { margin: 0; line-height: 1.45; }
    .sr-customer-location-card__meta { color: var(--sr-color-text-muted); font-size: .78rem; }
    .sr-customer-location-card__lexware { width: fit-content; padding: .3rem .5rem; border-radius: .5rem; background: var(--sr-color-info-soft); color: var(--sr-color-info); font-size: .72rem; font-weight: 760; }
    .sr-customer-contact-list { display: grid; gap: .6rem; }
    .sr-customer-contact-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, auto) auto; gap: .85rem; align-items: center; padding: .8rem; border: 1px solid var(--sr-color-border); border-radius: .8rem; }
    .sr-customer-contact-row > div:nth-child(2) { display: grid; gap: .1rem; }
    .sr-customer-contact-row > div:nth-child(2) span, .sr-customer-contact-row__details { color: var(--sr-color-text-muted); font-size: .78rem; }
    .sr-customer-contact-row__details { display: grid; gap: .15rem; text-align: right; }
    .sr-customer-note { color: var(--sr-color-text-soft); line-height: 1.65; }
    .sr-customer-danger-zone { display: flex; justify-content: flex-end; margin-top: 1rem; }
    .sr-empty-state--compact { min-height: auto; padding: 2rem 1rem; }

    .sr-report-customer-picker {
        display: grid;
        gap: .85rem;
        margin-bottom: 1.15rem;
        padding: .9rem;
        border: 1px solid #c9dce9;
        border-radius: .85rem;
        background: linear-gradient(135deg, #f7fbfe, var(--sr-color-brand-50));
    }
    .sr-report-customer-picker__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .sr-report-customer-picker__header > div { display: grid; gap: .15rem; }
    .sr-report-customer-picker__header strong { color: var(--sr-color-brand-900); font-size: .86rem; }
    .sr-report-customer-picker__header span { color: var(--sr-color-text-muted); font-size: .76rem; line-height: 1.4; }
    .sr-report-customer-picker__fields { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: .65rem; align-items: start; }
    .sr-report-customer-picker__open { align-self: start; margin-top: 1.12rem; }
    .sr-report-customer-picker__open.is-disabled { opacity: .4; pointer-events: none; }
    .sr-report-customer-picker__status { color: var(--sr-color-brand-700); font-size: .72rem; font-weight: 650; }

    .sr-customer-combobox { position: relative; }
    .sr-customer-combobox__input { padding-left: 2.45rem; padding-right: 2.5rem; }
    .sr-customer-combobox__input::-webkit-search-cancel-button { display: none; }
    .sr-customer-combobox__icon { position: absolute; top: 50%; left: .82rem; z-index: 2; width: 1rem; height: 1rem; color: var(--sr-color-text-muted); transform: translateY(-50%); pointer-events: none; }
    .sr-customer-combobox__clear { position: absolute; top: 50%; right: .55rem; z-index: 3; display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 0; border-radius: .55rem; background: transparent; color: var(--sr-color-text-muted); font-size: 1.2rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
    .sr-customer-combobox__clear:hover { background: var(--sr-color-surface-soft); color: var(--sr-color-brand-700); }
    .sr-customer-combobox__results { position: absolute; top: calc(100% + .42rem); right: 0; left: 0; z-index: 40; max-height: 21rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--sr-color-border-strong); border-radius: .8rem; background: var(--sr-color-surface); box-shadow: var(--sr-shadow-md); }
    .sr-customer-combobox__option { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .72rem .75rem; border: 0; border-radius: .62rem; background: transparent; color: var(--sr-color-text); text-align: left; cursor: pointer; }
    .sr-customer-combobox__option:hover, .sr-customer-combobox__option.is-active { background: var(--sr-color-brand-50); }
    .sr-customer-combobox__option-main { display: grid; min-width: 0; gap: .15rem; }
    .sr-customer-combobox__option-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
    .sr-customer-combobox__option-main span { overflow: hidden; color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
    .sr-customer-combobox__number { flex: 0 0 auto; }
    .sr-customer-combobox__empty { padding: .9rem; color: var(--sr-color-text-muted); font-size: .76rem; text-align: center; }

    .sr-customer-match-dialog__notice { margin-bottom: 1rem; }
    .sr-customer-match-list { display: grid; gap: .75rem; }
    .sr-customer-match-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: center; padding: 1rem; border: 1px solid var(--sr-color-border); border-radius: .85rem; background: var(--sr-color-surface-soft); }
    .sr-customer-match-card__header { display: flex; grid-column: 1 / -1; align-items: flex-start; justify-content: space-between; gap: 1rem; }
    .sr-customer-match-card__header > div { display: grid; min-width: 0; gap: .12rem; }
    .sr-customer-match-card__header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sr-customer-match-card__header > div > span { color: var(--sr-color-text-muted); font-size: .72rem; }
    .sr-customer-match-card__address { display: grid; min-width: 0; gap: .12rem; }
    .sr-customer-match-card__address span { color: var(--sr-color-text-muted); font-size: .68rem; font-weight: 720; text-transform: uppercase; letter-spacing: .06em; }
    .sr-customer-match-card__address strong { font-size: .82rem; }
    .sr-customer-match-card__reasons { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .4rem; }
    .sr-customer-match-card__reasons span { padding: .28rem .5rem; border-radius: 999px; background: #edf2f5; color: #5f7180; font-size: .66rem; font-weight: 700; }
    .sr-customer-match-card > .sr-button { grid-column: 2; grid-row: 2; }

    .sr-customer-report-history__header { align-items: center; margin-bottom: 0; padding-bottom: 1.15rem; }
    .sr-customer-report-history__table { min-width: 58rem; }
    .sr-customer-report-history__table th:nth-child(1) { width: 18%; }
    .sr-customer-report-history__table th:nth-child(2) { width: 11%; }
    .sr-customer-report-history__table th:nth-child(3) { width: 29%; }
    .sr-customer-report-history__table th:nth-child(4) { width: 15%; }
    .sr-customer-report-history__table th:nth-child(5) { width: 13%; }
    .sr-customer-report-history__table tbody tr.is-draft { background: #fffcf6; }
    .sr-customer-report-history__table tbody tr.is-signed { background: #f7fdf9; }
    .sr-customer-report-history__table tbody tr.is-archived { background: #f6f8fa; color: #586675; }
    .sr-customer-report-history__location { display: grid; gap: .12rem; }
    .sr-customer-report-history__location strong { font-size: .8rem; }
    .sr-customer-report-history__location span { color: var(--sr-color-text-muted); font-size: .72rem; }

    @media (max-width: 74rem) {
        .sr-customer-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-customer-contact-row { grid-template-columns: auto minmax(0, 1fr) auto; }
        .sr-customer-contact-row__details { grid-column: 2; text-align: left; }
    }

    @media (max-width: 58rem) {
        .sr-customer-detail-grid { grid-template-columns: 1fr; }
        .sr-report-customer-picker__fields { grid-template-columns: 1fr 1fr auto; }
    }

    @media (max-width: 42rem) {
        .sr-page-heading__actions, .sr-page-heading__actions .sr-button { width: 100%; }
        .sr-page-heading__actions { display: grid; grid-template-columns: 1fr; }
        .sr-customer-page-actions { margin-top: 0; }
        .sr-customer-type-switch { grid-template-columns: 1fr; }
        .sr-customer-repeater__section-header, .sr-report-customer-picker__header { align-items: stretch; flex-direction: column; }
        .sr-customer-repeater__section-header .sr-button { width: 100%; }
        .sr-customer-repeater__empty { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
        .sr-customer-repeater__empty > .sr-badge { grid-column: 2; justify-self: start; }
        .sr-customer-repeater__options { align-items: flex-start; flex-direction: column; }
        .sr-customer-form-actions { position: static; }
        .sr-customer-location-grid { grid-template-columns: 1fr; }
        .sr-customer-contact-row { grid-template-columns: auto minmax(0, 1fr); }
        .sr-customer-contact-row > .sr-badge { grid-column: 2; justify-self: start; }
        .sr-report-customer-picker__fields { grid-template-columns: 1fr; }
        .sr-report-customer-picker__open { width: 100%; margin-top: 0; }
        .sr-customer-match-card { grid-template-columns: 1fr; }
        .sr-customer-match-card > .sr-button { width: 100%; grid-column: 1; grid-row: auto; }
        .sr-customer-definition-list > div { grid-template-columns: 1fr; gap: .2rem; }
        .sr-customer-definition-list dd { text-align: left; }
    }


    /* Customer person identity: compact honorific fields and balanced name fields. */
    .sr-customer-person-grid {
        grid-template-columns: minmax(8rem, .7fr) minmax(8rem, .8fr) minmax(12rem, 1.45fr) minmax(12rem, 1.45fr);
        align-items: start;
    }

    .sr-field__optional {
        color: var(--sr-color-text-muted);
        font-size: .75rem;
        font-weight: 600;
        margin-left: .25rem;
    }

    @media (max-width: 1180px) {
        .sr-customer-person-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 700px) {
        .sr-customer-person-grid {
            grid-template-columns: 1fr;
        }
    }



    @media (max-width: 82rem) {
        .sr-order-detail-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
    }
    @media (max-width: 64rem) {
        .sr-order-detail-layout, .sr-order-scheduling-grid, .sr-calendar-layout { grid-template-columns: 1fr; }
        .sr-calendar-grid-wrap { border-right: 0; }
        .sr-calendar-unscheduled { border-top: 1px solid var(--sr-color-border); }
        .sr-order-detail-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-order-meta { grid-column: 1 / -1; }
    }
    @media (max-width: 48rem) {
        .sr-view-switcher { width: 100%; }
        .sr-view-switcher__item { flex: 1; justify-content: center; }
        .sr-order-detail-sidebar, .sr-order-detail-grid { grid-template-columns: 1fr; }
        .sr-calendar-toolbar { grid-template-columns: 1fr; justify-items: center; }
        .sr-calendar-toolbar__legend { display: none; }
        .sr-calendar-day { min-height: 5.3rem; padding: .25rem; }
        .sr-calendar-event { display: block; padding: .28rem; border-left-width: 2px; }
        .sr-calendar-event strong, .sr-calendar-event small { display: none; }
        .sr-calendar-event__time { font-size: .55rem; }
        .sr-order-form-actions { bottom: .5rem; }
    }


    /* Multi-visit work orders and optional time-tracking module. */


    .sr-card__header-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
    .sr-order-workflow-card,
    .sr-order-attachment-card { overflow: hidden; }
    .sr-order-visit-list,
    .sr-order-attachment-list,
    .sr-time-event-list,
    .sr-time-report-list,
    .sr-time-audit-list { display: grid; gap: .65rem; }
    .sr-order-visit,
    .sr-order-attachment,
    .sr-time-event,
    .sr-time-report { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .82rem .9rem; border: 1px solid var(--sr-color-border); border-radius: .75rem; background: var(--sr-color-surface); }
    .sr-order-visit__date { display: grid; min-width: 4.4rem; padding-right: .85rem; border-right: 1px solid var(--sr-color-border); text-align: center; }
    .sr-order-visit__date strong { font-size: .82rem; }
    .sr-order-visit__date span,
    .sr-order-visit__main span,
    .sr-order-attachment__copy span,
    .sr-time-event span,
    .sr-time-report span,
    .sr-time-audit-list span,
    .sr-time-audit-list small { color: var(--sr-color-text-muted); font-size: .72rem; }
    .sr-order-visit__main { display: grid; gap: .18rem; min-width: 0; }
    .sr-order-visit__actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
    .sr-order-visit-form,
    .sr-order-attachment-form,
    .sr-order-follow-up-form { display: grid; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sr-color-border); }
    .sr-order-visit-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sr-order-visit-form .sr-field--wide { grid-column: span 2; }
    .sr-order-visit-form .sr-form-actions { grid-column: 1 / -1; }
    .sr-order-inline-form-heading { grid-column: 1 / -1; margin: 0; font-size: .82rem; }
    .sr-order-attachment-form { grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) minmax(12rem, 1.5fr) auto; align-items: end; }
    .sr-order-attachment__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .6rem; background: var(--sr-color-surface-soft); color: var(--sr-color-brand-700); }
    .sr-order-attachment__copy { display: grid; gap: .15rem; min-width: 0; }
    .sr-order-attachment__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sr-order-follow-up-notice { display: grid; gap: .25rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid #efd4b9; border-radius: .75rem; background: #fff8f1; }
    .sr-order-follow-up-notice strong { color: #8b4b12; }

    .sr-time-admin-filter { display: flex; justify-content: flex-end; margin-bottom: .85rem; }
    .sr-time-clock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.15rem; }
    .sr-time-clock__status { display: grid; gap: .25rem; }
    .sr-time-clock__status > span { color: var(--sr-color-text-muted); font-size: .75rem; font-weight: 700; }
    .sr-time-clock__status strong { font-size: clamp(1.35rem, 3vw, 2rem); }
    .sr-time-clock__actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
    .sr-time-clock__primary { min-width: 11rem; min-height: 3rem; }
    .sr-time-today-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; margin-bottom: 1rem; }
    .sr-time-summary,
    .sr-time-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
    .sr-time-summary { padding: .9rem 1rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-time-summary > div,
    .sr-time-detail-summary > div { display: grid; gap: .18rem; }
    .sr-time-summary span,
    .sr-time-detail-summary span { color: var(--sr-color-text-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
    .sr-time-summary strong,
    .sr-time-detail-summary strong { font-size: 1rem; }
    .sr-time-month-card { overflow: hidden; }
    .sr-time-month-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-time-detail-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 1rem; }
    .sr-time-detail-summary > .sr-card { padding: .85rem 1rem; }
    .sr-time-detail-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .75fr); gap: 1rem; align-items: start; }
    .sr-time-event--detail { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
    .sr-time-event time { font-weight: 800; }
    .sr-time-event > div { display: grid; min-width: 0; }
    .sr-time-event details { justify-self: end; }
    .sr-time-event summary { cursor: pointer; color: var(--sr-color-brand-700); font-size: .72rem; font-weight: 800; }
    .sr-time-correction-form { display: grid; grid-template-columns: 7rem minmax(11rem, 1fr) auto; gap: .45rem; margin-top: .55rem; min-width: min(29rem, 60vw); }
    .sr-time-report { grid-template-columns: minmax(0, 1fr); text-decoration: none; color: inherit; }
    .sr-time-report > div { display: grid; gap: .2rem; }
    .sr-time-warning { display: block; padding: .45rem .55rem; border-radius: .5rem; background: var(--sr-color-warning-soft); color: var(--sr-color-warning); font-weight: 700; }
    .sr-time-audit-list > div { display: grid; gap: .18rem; padding-bottom: .65rem; border-bottom: 1px solid var(--sr-color-border); }
    .sr-time-audit-list > div:last-child { padding-bottom: 0; border-bottom: 0; }

    @media (max-width: 64rem) {
        .sr-order-visit-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-order-attachment-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-time-today-grid,
        .sr-time-detail-grid { grid-template-columns: 1fr; }
        .sr-time-detail-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 42rem) {
        .sr-order-visit,
        .sr-order-attachment { grid-template-columns: 1fr; align-items: stretch; }
        .sr-order-visit__date { grid-template-columns: auto auto; justify-content: start; gap: .4rem; min-width: 0; padding: 0 0 .55rem; border-right: 0; border-bottom: 1px solid var(--sr-color-border); text-align: left; }
        .sr-order-visit__actions { justify-content: stretch; }
        .sr-order-visit__actions .sr-button { flex: 1; }
        .sr-order-visit-form,
        .sr-order-attachment-form { grid-template-columns: 1fr; }
        .sr-order-visit-form .sr-field--wide { grid-column: auto; }
        .sr-time-clock { grid-template-columns: 1fr; }
        .sr-time-clock__actions { display: grid; grid-template-columns: 1fr; justify-content: stretch; }
        .sr-time-clock__actions .sr-button { width: 100%; }
        .sr-time-summary,
        .sr-time-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-time-event--detail { grid-template-columns: 3.3rem minmax(0, 1fr); align-items: start; }
        .sr-time-event details { grid-column: 1 / -1; justify-self: stretch; }
        .sr-time-correction-form { grid-template-columns: 1fr; min-width: 0; }
        .sr-time-month-header { align-items: stretch; flex-direction: column; }
    }

    @media (max-width: 72rem) {
        .sr-calendar-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sr-appointments-workspace__toolbar {
            grid-template-columns: 1fr;
        }

        .sr-appointments-workspace__controls,
        .sr-appointments-filters {
            justify-content: flex-start;
        }

        .sr-calendar-toolbar--full {
            grid-template-columns: 1fr;
            justify-items: start;
        }

        .sr-calendar-toolbar--full .sr-calendar-toolbar__legend {
            justify-content: flex-start;
        }
    }

    @media (max-width: 58rem) {
        .sr-calendar-summary-grid {
            grid-template-columns: 1fr;
        }

        .sr-appointments-filters {
            display: grid;
            grid-template-columns: 1fr;
            justify-content: stretch;
        }

        .sr-appointments-filters .sr-button {
            width: 100%;
        }

        .sr-appointments-workspace {
            min-height: auto;
        }

        .sr-appointments-calendar--fullscreen {
            min-height: auto;
        }
    }



    @media (max-width: 82rem) {
        .sr-appointments-topbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .sr-appointments-topbar__controls {
            justify-content: flex-start;
        }
    }

    @media (max-width: 62rem) {
        .sr-app.sr-calendar-page .sr-main.sr-main--calendar {
            overflow: auto;
        }

        .sr-appointments-topbar__controls,
        .sr-appointments-topbar__filters {
            justify-content: flex-start;
        }

        .sr-calendar-toolbar--calendar-page {
            grid-template-columns: 1fr;
        }

        .sr-calendar-toolbar__legend--visible {
            justify-content: flex-start;
        }
    }

    @media (max-width: 48rem) {
        .sr-appointments-topbar__controls,
        .sr-appointments-topbar__filters {
            display: grid;
            width: 100%;
            grid-template-columns: 1fr;
        }

        .sr-appointments-topbar__month {
            min-height: auto;
        }

        .sr-page-primary-action--compact,
        .sr-appointments-topbar__filters .sr-button {
            width: 100%;
        }
    }



    @media (max-width: 78rem) {
        .sr-calendar-toolbar--calendar-page {
            grid-template-columns: 1fr;
        }

        .sr-calendar-toolbar__legend--visible {
            justify-content: flex-start;
        }
    }

    @media (max-width: 62rem) {
        .sr-calendar-date-filter,
        .sr-calendar-employee-filter {
            width: 100%;
        }

        .sr-calendar-date-filter .sr-field__control,
        .sr-calendar-employee-filter .sr-field__control {
            min-width: 0;
            width: 100%;
        }
    }




    @media (max-width: 62rem) {
        .sr-calendar-date-filter__group {
            grid-template-columns: minmax(0, 1fr) minmax(5.4rem, 6.5rem);
        }
    }

    @media (max-width: 48rem) {
        .sr-calendar-date-filter__group {
            grid-template-columns: 1fr 1fr;
            width: 100%;
        }
    }



    @media (max-width: 78rem) {
        .sr-time-admin-stats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 58rem) {
        .sr-time-area-switch {
            width: 100%;
        }

        .sr-time-area-switch__item {
            flex: 1;
            justify-content: center;
        }

        .sr-time-admin-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .sr-time-admin-toolbar__employee {
            margin-left: 0;
        }

        .sr-time-admin-toolbar__employee .sr-field__control,
        .sr-time-admin-toolbar > .sr-button {
            width: 100%;
        }

        .sr-time-admin-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 38rem) {
        .sr-time-area-switch {
            display: grid;
            grid-template-columns: 1fr;
        }

        .sr-time-admin-stats {
            grid-template-columns: 1fr;
        }
    }



    @media (max-width: 58rem) {
        .sr-topbar__search,
        .sr-report-workflow-page .sr-topbar__search {
            display: block;
            width: auto;
            flex: 0 0 auto;
        }

        .sr-global-search__mobile-toggle {
            display: inline-grid;
            width: 2.65rem;
            height: 2.65rem;
            transition: opacity .18s ease, transform .22s ease, width .22s ease;
        }

        .sr-global-search__control {
            display: none;
        }

        .sr-global-search__mobile-close {
            display: none;
            width: 2.35rem;
            height: 2.35rem;
            flex: 0 0 auto;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: .72rem;
            background: transparent;
            color: var(--sr-color-text-muted);
            font: inherit;
            font-size: 1.45rem;
            line-height: 1;
            cursor: pointer;
        }

        .sr-global-search__mobile-close:hover,
        .sr-global-search__mobile-close:focus-visible {
            background: var(--sr-color-surface-soft);
            color: var(--sr-color-text);
            outline: 0;
        }

        .sr-topbar__actions {
            max-width: 24rem;
            overflow: visible;
            opacity: 1;
            transform: scale(1);
            transform-origin: right center;
            transition: max-width .22s ease, opacity .16s ease, transform .22s ease, margin .22s ease, gap .22s ease;
        }

        body.sr-search-open {
            overflow: hidden;
        }

        body.sr-search-open .sr-topbar {
            z-index: 160;
            gap: .55rem;
            box-shadow: 0 8px 24px rgb(17 24 32 / 7%);
        }

        body.sr-search-open .sr-topbar__actions {
            max-width: 0;
            margin-left: 0;
            gap: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transform: scale(.94);
        }

        body.sr-search-open .sr-topbar__search,
        body.sr-search-open .sr-report-workflow-page .sr-topbar__search {
            position: relative;
            inset: auto;
            z-index: 165;
            width: auto;
            min-width: 0;
            flex: 1 1 auto;
        }

        body.sr-search-open .sr-global-search__mobile-toggle {
            position: absolute;
            width: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transform: scale(.78);
        }

        body.sr-search-open .sr-global-search__control {
            display: flex;
            width: 100%;
            min-height: 3rem;
            gap: .6rem;
            padding: 0 .42rem 0 .85rem;
            border-color: var(--sr-color-border-strong);
            border-radius: .9rem;
            background: #fff;
            box-shadow: 0 7px 22px rgb(17 24 32 / 8%);
            transform-origin: left center;
            animation: sr-mobile-search-expand .22s cubic-bezier(.22, .72, .2, 1) both;
        }

        body.sr-search-open .sr-global-search__control > .sr-icon {
            width: 1.15rem;
            height: 1.15rem;
            flex: 0 0 auto;
        }

        body.sr-search-open .sr-global-search__input {
            font-size: .92rem;
        }

        body.sr-search-open .sr-global-search__shortcut {
            display: none;
        }

        body.sr-search-open .sr-global-search__mobile-close {
            display: inline-grid;
        }

        body.sr-search-open .sr-search-panel {
            position: fixed;
            top: var(--sr-mobile-search-top, var(--sr-topbar-height));
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 150;
            display: block;
            width: auto;
            max-height: none;
            overflow-y: auto;
            border: 0;
            border-radius: 0;
            background: #fff;
            box-shadow: none;
            overscroll-behavior: contain;
            animation: sr-mobile-search-surface-in .16s ease both;
        }

        body.sr-search-open .sr-search-panel[hidden] {
            display: none;
        }

        body.sr-search-open .sr-search-panel__section {
            width: min(100%, 42rem);
            margin: 0 auto;
            border: 0;
        }

        body.sr-search-open .sr-search-panel__section + .sr-search-panel__section {
            border-top: 0;
        }

        body.sr-search-open .sr-search-panel__header {
            padding: 1.15rem 1.2rem .7rem;
            border-bottom: 0;
            font-size: .68rem;
            letter-spacing: .1em;
        }

        body.sr-search-open .sr-search-results {
            max-height: none;
            overflow: visible;
            padding: .15rem .8rem 1rem;
        }

        body.sr-search-open .sr-search-result {
            min-height: 4.2rem;
            gap: .8rem;
            padding: .7rem .75rem;
            border-radius: .8rem;
        }

        body.sr-search-open .sr-search-result + .sr-search-result {
            border-top: 1px solid var(--sr-color-border);
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        body.sr-search-open .sr-search-result__icon {
            width: 2.35rem;
            height: 2.35rem;
            border-radius: .7rem;
        }

        body.sr-search-open .sr-search-result__text strong {
            font-size: .94rem;
        }

        body.sr-search-open .sr-search-result__text span,
        body.sr-search-open .sr-search-result__key {
            font-size: .72rem;
        }

        body.sr-search-open .sr-search-panel__hint {
            width: min(100%, 42rem);
            margin: 0 auto;
            padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--sr-color-border);
            background: #fff;
        }

        body.sr-search-open .sr-search-backdrop {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: transparent;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        @keyframes sr-mobile-search-expand {
            from { opacity: .35; transform: scaleX(.32); }
            to { opacity: 1; transform: scaleX(1); }
        }

        @keyframes sr-mobile-search-surface-in {
            from { opacity: 0; transform: translateY(-.25rem); }
            to { opacity: 1; transform: translateY(0); }
        }

    }

    @media (max-width: 42rem) {
        .sr-topbar {
            gap: .45rem;
            padding-right: .7rem;
            padding-left: .7rem;
        }

        .sr-topbar__menu,
        .sr-global-search__mobile-toggle {
            width: 2.55rem;
            height: 2.55rem;
        }
    }



    @media (max-width: 58rem) {
        .sr-calendar-day > header a {
            width: 1.4rem;
            height: 1.4rem;
            font-size: .9rem;
        }

        .sr-calendar-day__more {
            min-height: 1.35rem;
            padding: .12rem .3rem;
            font-size: .57rem;
        }

        .sr-calendar-day-drawer {
            grid-template-columns: 1fr;
        }

        .sr-calendar-day-drawer__panel {
            grid-column: 1;
            width: min(100%, 28rem);
            margin-left: auto;
        }

        .sr-calendar-day-drawer__event {
            grid-template-columns: 3.75rem minmax(0, 1fr) auto;
        }

        .sr-calendar-day-drawer__assignee {
            display: none;
        }
    }

    @media (max-width: 34rem) {
        .sr-calendar-day-drawer__panel {
            width: 100%;
        }

        .sr-calendar-day-drawer__event {
            grid-template-columns: 3.5rem minmax(0, 1fr) auto;
            gap: .6rem;
            padding: .75rem;
        }
    }



    @media (max-width: 58rem) {
        .sr-calendar-day > header a {
            width: 1.35rem;
            height: 1.35rem;
            flex-basis: 1.35rem;
            font-size: .86rem;
        }
    }



    @media (max-width: 90rem) {
        .sr-time-week-model {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .sr-time-admin-stats {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 72rem) {
        .sr-time-planning-grid {
            grid-template-columns: 1fr;
        }

        .sr-time-week-model {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 58rem) {
        .sr-time-planning-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .sr-time-planning-toolbar form,
        .sr-time-planning-toolbar .sr-field__control {
            width: 100%;
            min-width: 0;
        }

        .sr-time-summary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sr-appointments-topbar__title {
            width: 100%;
            justify-content: space-between;
        }

        .sr-appointments-view-switcher {
            margin-left: auto;
        }
    }

    @media (max-width: 42rem) {
        .sr-time-week-model {
            grid-template-columns: 1fr;
        }

        .sr-time-admin-stats {
            grid-template-columns: 1fr;
        }

        .sr-appointments-topbar__title {
            align-items: flex-start;
            flex-direction: column;
        }

        .sr-appointments-view-switcher {
            width: 100%;
            margin-left: 0;
        }

        .sr-appointments-view-switcher .sr-view-switcher__item {
            flex: 1;
            justify-content: center;
        }
    }



    @media (max-width: 70rem) {
        .sr-work-plan-toolbar {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .sr-work-plan-toolbar__legend {
            width: 100%;
            margin-left: 0;
        }

        .sr-work-schedule-days {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 50rem) {
        .sr-work-plan-toolbar__navigation {
            flex-wrap: wrap;
        }

        .sr-work-plan-toolbar__navigation > strong {
            min-width: 0;
            width: 100%;
            padding: .25rem 0 0;
        }

        .sr-work-plan-table .sr-work-plan-table__employee-head,
        .sr-work-plan-table .sr-work-plan-table__employee {
            width: 11.5rem;
            min-width: 11.5rem;
        }

        .sr-work-schedule-meta,
        .sr-work-schedule-days {
            grid-template-columns: 1fr;
        }

        .sr-dialog--work-schedule {
            width: calc(100% - 1rem);
        }

        .sr-dialog__footer--split {
            align-items: stretch;
            flex-direction: column;
        }

        .sr-dialog__footer--split > div {
            width: 100%;
            margin-left: 0;
        }

        .sr-dialog__footer--split > div .sr-button,
        .sr-dialog__footer--split > form .sr-button {
            flex: 1 1 auto;
            width: 100%;
        }
    }



    @media (min-width: 58.01rem) {
        html.sr-sidebar-collapsed .sr-nav-group {
            width: 3.15rem;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu {
            display: none;
        }
    }

    @media (max-width: 58rem) {
        .sr-user-heading-actions {
            width: 100%;
            justify-content: stretch;
        }

        .sr-user-heading-actions .sr-button {
            flex: 1 1 auto;
        }
    }



    @media (min-width: 58.01rem) {
        html.sr-sidebar-collapsed .sr-sidebar,
        html.sr-sidebar-collapsed .sr-nav {
            overflow: visible;
        }

        html.sr-sidebar-collapsed .sr-nav-group,
        html.sr-sidebar-collapsed .sr-nav-group__row {
            width: 3.15rem;
        }

        html.sr-sidebar-collapsed .sr-nav-group__row .sr-nav__link {
            padding-right: .65rem;
        }

        html.sr-sidebar-collapsed .sr-nav-group__toggle {
            display: none;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu,
        html.sr-sidebar-collapsed .sr-nav-group.is-open .sr-nav-submenu {
            position: absolute;
            top: -.45rem;
            left: calc(100% + .72rem);
            z-index: 120;
            display: none;
            width: 13.75rem;
            gap: .18rem;
            margin: 0;
            padding: 2.55rem .55rem .55rem;
            border: 1px solid rgb(255 255 255 / 10%);
            border-left: 1px solid rgb(255 255 255 / 10%);
            border-radius: .82rem;
            background: #08283f;
            box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
        }

        html.sr-sidebar-collapsed .sr-nav-submenu::before {
            position: absolute;
            top: .75rem;
            left: .85rem;
            color: rgb(255 255 255 / 48%);
            content: attr(data-nav-title);
            font-size: .65rem;
            font-weight: 820;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        html.sr-sidebar-collapsed .sr-nav-group:hover .sr-nav-submenu,
        html.sr-sidebar-collapsed .sr-nav-group:focus-within .sr-nav-submenu {
            display: grid;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link {
            min-height: 2.35rem;
            padding: .5rem .7rem;
            border-radius: .58rem;
            color: rgb(255 255 255 / 62%);
            font-size: .79rem;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link::before {
            display: none;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link.is-active {
            background: rgb(255 255 255 / 10%);
            box-shadow: none;
        }
    }

    @media (max-width: 58rem) {
        .sr-nav-group__row .sr-nav__link {
            padding-right: 2.8rem;
        }

        .sr-nav-submenu {
            margin-right: .3rem;
        }
    }




    @media (min-width: 58.01rem) {
        /* Im eingeklappten Zustand bleibt das Flyout beim Weg vom Icon erreichbar. */
        html.sr-sidebar-collapsed .sr-nav-submenu {
            isolation: isolate;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu::after {
            position: absolute;
            top: 0;
            right: 100%;
            bottom: 0;
            width: .9rem;
            content: "";
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link,
        html.sr-sidebar-collapsed .sr-nav-submenu__link:hover,
        html.sr-sidebar-collapsed .sr-nav-submenu__link:focus-visible,
        html.sr-sidebar-collapsed .sr-nav-submenu__link.is-active {
            border-color: transparent;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link {
            color: rgb(255 255 255 / 58%);
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link:hover,
        html.sr-sidebar-collapsed .sr-nav-submenu__link:focus-visible {
            color: #fff;
        }

        html.sr-sidebar-collapsed .sr-nav-submenu__link.is-active {
            color: #fff;
            font-weight: 820;
        }
    }



    @media (max-width: 78rem) {
        .sr-time-admin-stats--employee {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 58rem) {
        .sr-time-admin-toolbar--overview,
        .sr-time-admin-toolbar--employee-detail {
            align-items: stretch;
            flex-direction: column;
        }

        .sr-time-admin-toolbar__hint {
            margin-left: 0;
            text-align: left;
        }

        .sr-time-admin-toolbar__actions {
            justify-content: flex-start;
            margin-left: 0;
            flex-wrap: wrap;
        }

        .sr-time-admin-stats--employee {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 40rem) {
        .sr-time-admin-stats--employee {
            grid-template-columns: 1fr;
        }

        .sr-time-admin-toolbar__actions .sr-button {
            width: 100%;
        }
    }



    @media (max-width: 78rem) {
        .sr-time-range-toolbar {
            grid-template-columns: 1fr auto;
        }

        .sr-time-range-navigation {
            grid-column: 1 / -1;
            grid-row: 2;
            justify-content: flex-start;
        }
    }

    @media (max-width: 58rem) {
        .sr-time-range-toolbar {
            display: flex;
            align-items: stretch;
            flex-direction: column;
        }

        .sr-time-range-switcher {
            width: 100%;
        }

        .sr-time-range-switcher__item {
            flex: 1 1 0;
        }

        .sr-time-range-navigation {
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .sr-time-range-navigation > strong {
            min-width: 0;
        }
    }

    @media (max-width: 40rem) {
        .sr-time-export-dialog__dates {
            grid-template-columns: 1fr;
        }
    }



    @media (max-width: 78rem) {
        .sr-time-custom-range {
            grid-column: 1 / -1;
            grid-row: 2;
            justify-content: flex-start;
        }
    }

    @media (max-width: 58rem) {
        .sr-time-custom-range {
            display: grid;
            width: 100%;
            grid-template-columns: 1fr auto 1fr auto;
            align-items: end;
        }

        .sr-time-custom-range__field .sr-field__control {
            width: 100%;
            min-width: 0;
        }
    }

    @media (max-width: 40rem) {
        .sr-time-custom-range {
            grid-template-columns: 1fr 1fr;
        }

        .sr-time-custom-range__separator {
            display: none;
        }

        .sr-time-custom-range .sr-button {
            grid-column: 1 / -1;
            width: 100%;
        }
    }



    @media (max-width: 78rem) {
        .sr-user-work-schedule__days {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 58rem) {
        .sr-user-work-schedule__intro,
        .sr-user-work-schedule__days {
            grid-template-columns: 1fr;
        }

        .sr-user-work-schedule .sr-work-schedule-day__breaks {
            grid-template-columns: 1fr;
        }

        .sr-user-work-schedule .sr-work-schedule-day__breaks label > span:first-child {
            min-height: 0;
        }
    }



    @media (max-width: 82rem) {
        .sr-user-work-schedule__table {
            overflow-x: auto;
        }

        .sr-user-work-schedule__table-head,
        .sr-user-work-schedule .sr-work-schedule-day--row {
            min-width: 64rem;
        }
    }

    @media (max-width: 58rem) {
        .sr-user-work-schedule__table {
            overflow: visible;
            border: 0;
            background: transparent;
        }

        .sr-user-work-schedule__table-head {
            display: none;
        }

        .sr-user-work-schedule__days {
            display: grid;
            gap: .65rem;
        }

        .sr-user-work-schedule .sr-work-schedule-day--row {
            min-width: 0;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .6rem;
            padding: .75rem;
            border: 1px solid var(--sr-color-border);
            border-radius: .8rem;
        }

        .sr-user-work-schedule .sr-work-schedule-day__toggle,
        .sr-work-schedule-row__target {
            grid-column: 1 / -1;
        }

        .sr-work-schedule-row__field > span:first-child,
        .sr-work-schedule-row__target > span {
            display: block;
        }

        .sr-work-schedule-row__target {
            min-height: auto;
            grid-template-columns: 1fr auto;
            align-items: center;
            justify-items: initial;
            padding-top: .55rem;
            border-top: 1px solid var(--sr-color-border);
        }
    }

    @media (max-width: 40rem) {
        .sr-user-work-schedule .sr-work-schedule-day--row {
            grid-template-columns: 1fr;
        }

        .sr-user-work-schedule .sr-work-schedule-day__toggle,
        .sr-work-schedule-row__target {
            grid-column: auto;
        }
    }



    @media (max-width: 82rem) {
        .sr-order-overview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-order-overview-strip__item:nth-child(3) { border-left: 0; border-top: 1px solid var(--sr-color-border); }
        .sr-order-overview-strip__item:nth-child(4) { border-top: 1px solid var(--sr-color-border); }
        .sr-order-detail-layout--refined { grid-template-columns: minmax(0, 1fr) 19rem; }
    }

    @media (max-width: 68rem) {
        .sr-order-detail-layout--refined { grid-template-columns: 1fr; }
        .sr-order-detail-sidebar--refined { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sr-order-process-card { position: static; }
        .sr-order-side-info-card { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 48rem) {
        .sr-order-overview-strip { grid-template-columns: 1fr; }
        .sr-order-overview-strip__item + .sr-order-overview-strip__item { border-top: 1px solid var(--sr-color-border); border-left: 0; }
        .sr-order-detail-sidebar--refined { grid-template-columns: 1fr; }
        .sr-order-side-info-card { grid-column: auto; grid-template-columns: 1fr; }
        .sr-order-visit--refined { grid-template-columns: 1fr; }
        .sr-order-reschedule-form { position: static; width: 100%; grid-template-columns: 1fr; margin-top: .55rem; box-shadow: none; }
        .sr-order-reschedule-form > * { grid-column: auto; }
    }



    @media (max-width: 68rem) {
        .sr-order-upload-options {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sr-order-upload-options .sr-button {
            grid-column: 1 / -1;
            width: 100%;
        }
    }

    @media (max-width: 48rem) {
        .sr-order-dropzone {
            grid-template-columns: auto minmax(0, 1fr);
            min-height: 8.5rem;
            padding: 1rem;
        }

        .sr-order-dropzone__file {
            grid-column: 1 / -1;
            width: 100%;
            max-width: none;
            text-align: center;
        }

        .sr-order-upload-options {
            grid-template-columns: 1fr;
        }

        .sr-order-upload-options .sr-button {
            grid-column: auto;
            min-height: 3.1rem;
            font-size: .82rem;
        }
    }



    @media (max-width: 68rem) {
        .sr-order-upload-options {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sr-order-upload-options .sr-order-upload-submit {
            grid-column: 1 / -1;
        }

        .sr-order-media-gallery {
            grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr));
        }
    }

    @media (max-width: 48rem) {
        .sr-order-dropzone {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .sr-order-dropzone__file {
            grid-column: 1 / -1;
        }

        .sr-order-upload-options {
            grid-template-columns: 1fr;
        }

        .sr-order-upload-options .sr-order-upload-submit {
            grid-column: auto;
        }
    }

    @media (max-width: 36rem) {
        .sr-order-media-gallery {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }



    /* Persönliche Monatsübersicht: fünf Kennzahlen sauber in einer Reihe. */
    .sr-time-month-card--employee .sr-time-summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    @media (max-width: 64rem) {
        .sr-time-month-card--employee .sr-time-summary {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 40rem) {
        .sr-time-month-card--employee .sr-time-summary {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }


    /* Stechuhr-Seite: Hauptaktion klar, Ausstempeln bewusst sekundär. */
    .sr-time-clock__actions {
        display: grid;
        min-width: 13.5rem;
        grid-template-columns: 1fr;
        gap: .55rem;
        justify-items: stretch;
    }

    .sr-time-clock__actions .sr-time-clock__primary {
        width: 100%;
        min-width: 13.5rem;
    }

    .sr-time-clock__actions .sr-time-clock__end {
        width: auto;
        min-width: 9rem;
        min-height: 2.55rem;
        justify-self: center;
        border-color: var(--sr-color-border-strong);
        background: var(--sr-color-surface);
        color: var(--sr-color-text-soft);
        font-size: .78rem;
        font-weight: 800;
    }

    .sr-time-clock__actions .sr-time-clock__end:hover:not(:disabled),
    .sr-time-clock__actions .sr-time-clock__end:focus-visible {
        border-color: var(--sr-color-border-strong);
        background: var(--sr-color-surface-soft);
        color: var(--sr-color-text);
        transform: none;
    }

    @media (max-width: 42rem) {
        .sr-time-clock__actions {
            width: 100%;
            min-width: 0;
        }

        .sr-time-clock__actions .sr-time-clock__primary {
            min-width: 0;
        }
    }


    /* Mobile Dashboard: bewusst als kompakte Arbeits-App statt gestauchter Desktop-Ansicht. */
    @media (max-width: 42rem) {
        body.sr-dashboard-page .sr-main {
            padding: .85rem .75rem 1.25rem;
        }

        body.sr-dashboard-page .sr-page-heading {
            gap: .85rem;
            margin-bottom: .9rem;
        }

        body.sr-dashboard-page .sr-page-heading__eyebrow {
            display: none;
        }

        body.sr-dashboard-page .sr-page-heading h1 {
            margin-bottom: .28rem;
            font-size: clamp(1.75rem, 8vw, 2.1rem);
            line-height: 1.02;
            letter-spacing: -.035em;
        }

        body.sr-dashboard-page .sr-page-heading p {
            max-width: 34rem;
            font-size: .88rem;
            line-height: 1.42;
        }

        body.sr-dashboard-page .sr-page-heading__actions {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .55rem;
        }

        body.sr-dashboard-page .sr-page-heading__actions .sr-button {
            width: 100%;
            min-height: 3rem;
            gap: .5rem;
            padding: .62rem .7rem;
            border-radius: .85rem;
            font-size: .86rem;
            font-weight: 820;
            box-shadow: none;
        }

        body.sr-dashboard-page .sr-page-heading__actions .sr-button--action {
            box-shadow: 0 8px 18px rgb(47 184 116 / 14%);
        }

        body.sr-dashboard-page .sr-stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .65rem;
            margin-bottom: .85rem;
        }

        body.sr-dashboard-page .sr-stat-card {
            min-height: 7.35rem;
            gap: .2rem .5rem;
            padding: .9rem;
            border-radius: 1rem;
            box-shadow: 0 8px 20px rgb(17 24 32 / 5%);
        }

        body.sr-dashboard-page .sr-stat-card::before {
            left: .9rem;
            width: 2.1rem;
            height: .15rem;
        }

        body.sr-dashboard-page .sr-stat-card:hover {
            border-color: var(--sr-color-border);
            box-shadow: 0 8px 20px rgb(17 24 32 / 5%);
            transform: none;
        }

        body.sr-dashboard-page .sr-stat-card__icon {
            width: 2.15rem;
            height: 2.15rem;
            border-radius: .7rem;
        }

        body.sr-dashboard-page .sr-stat-card__icon .sr-icon {
            width: 1.1rem;
            height: 1.1rem;
        }

        body.sr-dashboard-page .sr-stat-card__label {
            padding-top: .15rem;
            font-size: .7rem;
            line-height: 1.2;
        }

        body.sr-dashboard-page .sr-stat-card__value {
            font-size: 1.9rem;
        }

        body.sr-dashboard-page .sr-stat-card__hint {
            font-size: .69rem;
            line-height: 1.28;
        }

        body.sr-dashboard-page .sr-dashboard-orders,
        body.sr-dashboard-page .sr-content-grid {
            margin-top: 0;
        }

        body.sr-dashboard-page .sr-card__header--padded,
        body.sr-dashboard-page .sr-activity-card__header {
            padding: .95rem 1rem .8rem;
        }

        body.sr-dashboard-page .sr-card__header h2,
        body.sr-dashboard-page .sr-activity-card__header h2 {
            font-size: .98rem;
        }

        body.sr-dashboard-page .sr-card__header p,
        body.sr-dashboard-page .sr-activity-card__header p {
            font-size: .73rem;
            line-height: 1.35;
        }

        body.sr-dashboard-page .sr-empty-state {
            min-height: 7rem;
            padding: 1.25rem 1rem;
        }
    }

    @media (max-width: 24rem) {
        body.sr-dashboard-page .sr-page-heading__actions,
        body.sr-dashboard-page .sr-stats-grid {
            grid-template-columns: 1fr;
        }
    }


    /* System Update Engine */
    .sr-update-overview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .sr-update-status-card,
    .sr-update-upload-card,
    .sr-update-history-card { align-content: start; }

    .sr-update-checks { display: grid; gap: .55rem; }
    .sr-update-check {
        display: grid;
        grid-template-columns: 2.35rem minmax(0, 1fr);
        align-items: center;
        gap: .7rem;
        min-height: 3.2rem;
        padding: .55rem .65rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .78rem;
        background: var(--sr-color-surface-soft);
    }
    .sr-update-check__icon {
        display: grid;
        width: 2.1rem;
        height: 2.1rem;
        place-items: center;
        border-radius: .68rem;
        background: #fff;
        color: var(--sr-color-text-muted);
    }
    .sr-update-check__icon .sr-icon { width: 1rem; height: 1rem; }
    .sr-update-check.is-ok .sr-update-check__icon { background: #edf9f3; color: #148756; }
    .sr-update-check.is-error .sr-update-check__icon { background: #fff3f2; color: #c63e3e; }
    .sr-update-check > span:last-child { display: grid; gap: .08rem; min-width: 0; }
    .sr-update-check strong { font-size: .78rem; }
    .sr-update-check small { color: var(--sr-color-text-muted); font-size: .68rem; line-height: 1.35; }

    .sr-update-protected,
    .sr-update-alert {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        padding: .8rem .9rem;
        border-radius: .82rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-800);
    }
    .sr-update-protected > .sr-icon,
    .sr-update-alert > .sr-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .08rem; }
    .sr-update-protected > div,
    .sr-update-alert > div { display: grid; gap: .12rem; }
    .sr-update-protected strong,
    .sr-update-alert strong { font-size: .76rem; }
    .sr-update-protected span,
    .sr-update-alert span { font-size: .68rem; line-height: 1.45; }
    .sr-update-alert { margin-bottom: 1rem; }
    .sr-update-alert--danger { background: #fff3f2; color: #a83232; }

    .sr-update-dropzone {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        align-items: center;
        gap: .85rem;
        min-height: 6.4rem;
        padding: .9rem;
        border: 1px dashed var(--sr-color-border-strong);
        border-radius: .9rem;
        background: var(--sr-color-surface-soft);
        cursor: pointer;
        transition: border-color var(--sr-transition), background var(--sr-transition);
    }
    .sr-update-dropzone:hover,
    .sr-update-dropzone:focus-within { border-color: var(--sr-color-brand-400); background: var(--sr-color-brand-50); }
    .sr-update-dropzone.is-dragover {
        border-style: solid;
        border-color: var(--sr-color-brand-500);
        background: var(--sr-color-brand-50);
        box-shadow: 0 0 0 3px rgb(var(--sr-color-brand-500-rgb) / 12%);
    }
    .sr-update-dropzone.is-ready {
        border-style: solid;
        border-color: #bfe8d4;
        background: #f2fbf7;
    }
    .sr-update-dropzone__icon {
        display: grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border-radius: .9rem;
        background: #fff;
        color: var(--sr-color-brand-700);
        box-shadow: var(--sr-shadow-xs);
    }
    .sr-update-dropzone__icon .sr-icon { width: 1.35rem; height: 1.35rem; }
    .sr-update-dropzone.is-dragover .sr-update-dropzone__icon,
    .sr-update-dropzone.is-ready .sr-update-dropzone__icon { background: #fff; color: #148756; }
    .sr-update-dropzone > span:nth-child(2) { display: grid; gap: .16rem; min-width: 0; }
    .sr-update-dropzone strong { font-size: .84rem; }
    .sr-update-dropzone small { color: var(--sr-color-text-muted); font-size: .7rem; line-height: 1.45; }

    .sr-update-package {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: .8rem;
        padding: .9rem;
        border: 1px solid #bfe8d4;
        border-radius: .9rem;
        background: #f2fbf7;
    }
    .sr-update-package__icon {
        display: grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border-radius: .9rem;
        background: #dff5e9;
        color: #148756;
    }
    .sr-update-package__icon .sr-icon { width: 1.35rem; height: 1.35rem; }
    .sr-update-package__copy { display: grid; gap: .05rem; align-content: center; min-width: 0; }
    .sr-update-package__copy > span { color: #148756; font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
    .sr-update-package__copy > strong { font-size: 1rem; }
    .sr-update-package__copy > small { overflow: hidden; color: var(--sr-color-text-muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
    .sr-update-package dl {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
        margin: .15rem 0 0;
    }
    .sr-update-package dl > div { display: grid; gap: .05rem; padding: .55rem .65rem; border-radius: .68rem; background: rgb(255 255 255 / 75%); }
    .sr-update-package dt { color: var(--sr-color-text-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; }
    .sr-update-package dd { margin: 0; font-size: .75rem; font-weight: 800; }

    .sr-update-confirmation { padding: .2rem .1rem; }
    .sr-update-confirmation .sr-checkbox-row { align-items: flex-start; }

    .sr-update-history { display: grid; }
    .sr-update-history__row {
        display: grid;
        grid-template-columns: .65rem minmax(0, 1fr) auto;
        align-items: center;
        gap: .7rem;
        min-height: 3.5rem;
        padding: .55rem .15rem;
        border-bottom: 1px solid var(--sr-color-border);
    }
    .sr-update-history__row:last-child { border-bottom: 0; }
    .sr-update-history__status { width: .5rem; height: .5rem; border-radius: 50%; background: #a7b0b8; }
    .sr-update-history__status.is-ok { background: #1dbf73; }
    .sr-update-history__status.is-error { background: #dc4b4b; }
    .sr-update-history__row > div { display: grid; gap: .08rem; }
    .sr-update-history__row strong { font-size: .76rem; }
    .sr-update-history__row span { color: var(--sr-color-text-muted); font-size: .68rem; }
    .sr-update-history__row time { color: var(--sr-color-text-muted); font-size: .66rem; white-space: nowrap; }

    .sr-control-foundation-card { margin-bottom: 1rem; align-content: start; }
    .sr-control-foundation__identity {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        align-items: center;
        gap: .85rem;
        padding: .9rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .9rem;
        background: var(--sr-color-surface-soft);
    }
    .sr-control-foundation__identity-icon {
        display: grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border-radius: .9rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-700);
    }
    .sr-control-foundation__identity-icon .sr-icon { width: 1.35rem; height: 1.35rem; }
    .sr-control-foundation__identity > div:last-child { display: grid; gap: .12rem; min-width: 0; }
    .sr-control-foundation__identity span { color: var(--sr-color-text-muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
    .sr-control-foundation__identity strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; }
    .sr-control-foundation__identity strong code { font-size: inherit; white-space: nowrap; }
    .sr-control-foundation__identity small { color: var(--sr-color-text-muted); font-size: .68rem; line-height: 1.4; }

    .sr-control-foundation__facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .55rem;
        margin: .7rem 0 0;
    }
    .sr-control-foundation__facts > div {
        display: grid;
        gap: .08rem;
        padding: .65rem .72rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .75rem;
        background: #fff;
        min-width: 0;
    }
    .sr-control-foundation__facts dt { color: var(--sr-color-text-muted); font-size: .59rem; text-transform: uppercase; letter-spacing: .05em; }
    .sr-control-foundation__facts dd { overflow: hidden; margin: 0; font-size: .74rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

    .sr-control-health-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        margin-top: .7rem;
    }
    .sr-control-health-item {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        align-items: center;
        gap: .6rem;
        min-height: 3rem;
        padding: .5rem .58rem;
        border: 1px solid var(--sr-color-border);
        border-radius: .75rem;
        background: var(--sr-color-surface-soft);
    }
    .sr-control-health-item__status {
        display: grid;
        width: 1.85rem;
        height: 1.85rem;
        place-items: center;
        border-radius: .6rem;
        background: #fff;
        color: var(--sr-color-text-muted);
    }
    .sr-control-health-item__status .sr-icon { width: .9rem; height: .9rem; }
    .sr-control-health-item.is-ok .sr-control-health-item__status { background: #edf9f3; color: #148756; }
    .sr-control-health-item.is-warning .sr-control-health-item__status { background: #fff8e8; color: #b57910; }
    .sr-control-health-item.is-error .sr-control-health-item__status { background: #fff3f2; color: #c63e3e; }
    .sr-control-health-item > span:last-child { display: grid; gap: .05rem; min-width: 0; }
    .sr-control-health-item strong { font-size: .72rem; }
    .sr-control-health-item small { color: var(--sr-color-text-muted); font-size: .64rem; line-height: 1.35; }

    .sr-control-foundation__note {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        margin-top: .7rem;
        padding: .8rem .9rem;
        border-radius: .82rem;
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-800);
    }
    .sr-control-foundation__note > .sr-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .08rem; }
    .sr-control-foundation__note > div { display: grid; gap: .12rem; }
    .sr-control-foundation__note strong { font-size: .76rem; }
    .sr-control-foundation__note span { font-size: .68rem; line-height: 1.45; }

    .sr-maintenance-state { display: grid; gap: 1rem; justify-items: center; padding: 1.4rem .5rem .6rem; text-align: center; }
    .sr-maintenance-state__icon { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 1.2rem; background: var(--sr-color-brand-50); color: var(--sr-color-brand-700); }
    .sr-maintenance-state__icon .sr-icon { width: 1.8rem; height: 1.8rem; }
    .sr-maintenance-state > div { display: grid; gap: .45rem; justify-items: center; }
    .sr-maintenance-state h1 { margin: 0; font-size: 1.45rem; }
    .sr-maintenance-state p { max-width: 28rem; margin: 0; color: var(--sr-color-text-muted); line-height: 1.6; }

    @media (max-width: 58rem) {
        .sr-update-overview { grid-template-columns: 1fr; }
        .sr-update-dropzone { grid-template-columns: 2.75rem minmax(0, 1fr); }
        .sr-update-dropzone > .sr-button { grid-column: 1 / -1; width: 100%; }
        .sr-control-foundation__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 36rem) {
        .sr-update-package dl,
        .sr-control-foundation__facts,
        .sr-control-health-grid { grid-template-columns: 1fr; }
        .sr-update-history__row { grid-template-columns: .55rem minmax(0, 1fr); }
        .sr-update-history__row time { grid-column: 2; }
        .sr-control-foundation__identity { grid-template-columns: 2.6rem minmax(0, 1fr); }
        .sr-control-foundation__identity-icon { width: 2.6rem; height: 2.6rem; }
    }

}


/* Source: resources/css/04-components-10-order-workbook.css (0.18.1 appointment UI additions) */
@layer components {
    .sr-order-add-panel--appointment { background: var(--sr-color-surface); }
    .sr-order-add-panel--appointment[open] { border-style: solid; border-color: var(--sr-color-border); box-shadow: var(--sr-shadow-xs); }
    .sr-order-add-panel--appointment > summary { min-height: 3rem; padding: .75rem 1rem; font-size: .72rem; }
    .sr-order-add-panel--appointment[open] > summary { justify-content: flex-start; background: var(--sr-color-surface-soft); color: var(--sr-color-text); font-size: .78rem; }
    .sr-order-add-panel--appointment .sr-order-appointment-form {
        display: grid;
        grid-template-columns: minmax(10rem, 1.15fr) minmax(7rem, .7fr) minmax(7rem, .7fr) minmax(10rem, 1fr);
        grid-template-areas: "date start end allday" "employee note note note" "actions actions actions actions";
        align-items: end;
        gap: .8rem;
        padding: 1rem;
    }
    .sr-order-appointment-form__date { grid-area: date; }
    .sr-order-appointment-form__start { grid-area: start; }
    .sr-order-appointment-form__end { grid-area: end; }
    .sr-order-appointment-form__employee { grid-area: employee; }
    .sr-order-appointment-form__all-day { grid-area: allday; display: flex; min-height: 2.8rem; align-items: center; padding: .15rem .2rem; }
    .sr-order-appointment-form__note { grid-area: note; }
    .sr-order-appointment-form__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding-top: .1rem; }
    .sr-order-appointment-form .sr-field__label { margin-bottom: .34rem; font-size: .68rem; }
    .sr-order-appointment-form .sr-field__control { min-height: 2.75rem; }
    .sr-order-appointment-form textarea.sr-field__control { min-height: 4.25rem; resize: vertical; }
    .sr-order-appointment-form__submit { width: auto !important; min-width: 10rem; min-height: 2.75rem; }
    @media (max-width: 68rem) {
        .sr-order-add-panel--appointment .sr-order-appointment-form {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-areas: "date start" "end allday" "employee employee" "note note" "actions actions";
        }
    }
    @media (max-width: 42rem) {
        .sr-order-add-panel--appointment .sr-order-appointment-form {
            grid-template-columns: 1fr;
            grid-template-areas: "date" "start" "end" "allday" "employee" "note" "actions";
        }
        .sr-order-appointment-form__actions, .sr-order-appointment-form__submit { width: 100% !important; }
    }
}



@layer components {
    /* 0.18.4: Terminplanung als Modal statt Inline-Formular. */
    .sr-order-appointment-launch {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        width: 100%;
        min-height: 3rem;
        margin-top: .75rem;
        padding: .8rem 1rem;
        border: 1px dashed var(--sr-color-border-strong);
        border-radius: .9rem;
        background: #fff;
        color: var(--sr-color-brand-700);
        font-size: .8rem;
        font-weight: 760;
        cursor: pointer;
        transition: border-color var(--sr-transition), background-color var(--sr-transition), color var(--sr-transition), transform var(--sr-transition);
    }

    .sr-order-appointment-launch:hover,
    .sr-order-appointment-launch:focus-visible {
        border-color: var(--sr-color-brand-400);
        background: var(--sr-color-brand-50);
        color: var(--sr-color-brand-800);
        outline: 0;
        transform: translateY(-1px);
    }

    .sr-order-appointment-dialog {
        width: min(100% - 2rem, 42rem);
    }

    .sr-order-appointment-dialog__header h3 {
        margin: .15rem 0 .2rem;
        font-size: 1.1rem;
    }

    .sr-order-appointment-dialog__header p {
        margin: 0;
        color: var(--sr-color-text-muted);
        font-size: .74rem;
        line-height: 1.45;
    }

    .sr-order-appointment-modal-form-shell {
        display: grid;
        gap: 1rem;
    }

    .sr-order-appointment-modal-form {
        display: grid;
        gap: 1rem;
    }

    .sr-order-appointment-modal-form__time-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .85rem;
    }

    .sr-order-appointment-modal-form .sr-field__control {
        width: 100%;
        min-height: 2.85rem;
    }

    .sr-order-appointment-modal-form textarea.sr-field__control {
        min-height: 7rem;
        resize: vertical;
    }

    .sr-order-appointment-modal-form__all-day {
        display: flex;
        align-items: center;
    }

    .sr-order-appointment-modal-form__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .65rem;
        margin: 0;
        padding: 0;
    }

    .sr-order-appointment-modal-form__actions .sr-button[type="submit"],
    .sr-order-appointment-modal-form__actions input[type="submit"] {
        min-width: 11rem;
    }

    @media (max-width: 42rem) {
        .sr-order-appointment-dialog {
            width: 100%;
        }

        .sr-order-appointment-modal-form__time-row {
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-modal-form__actions {
            display: grid;
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-modal-form__actions .sr-button,
        .sr-order-appointment-modal-form__actions input[type="submit"] {
            width: 100% !important;
        }
    }
}


@layer components {
    /* 0.18.5: stabile Feldzuordnung und klare Modal-Reihenfolge. */
    .sr-order-appointment-dialog__close {
        flex: 0 0 auto;
        font-size: 1.25rem;
        line-height: 1;
    }

    .sr-order-appointment-modal-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sr-order-appointment-modal-form__employee,
    .sr-order-appointment-modal-form__note,
    .sr-order-appointment-modal-form__all-day,
    .sr-order-appointment-modal-form__actions {
        width: 100%;
        min-width: 0;
    }

    .sr-order-appointment-modal-form__time-row {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
        gap: .85rem;
        align-items: end;
    }

    .sr-order-appointment-modal-form__all-day {
        min-height: auto;
        padding: .15rem 0;
    }

    .sr-order-appointment-modal-form__actions {
        padding-top: .2rem;
    }

    @media (max-width: 42rem) {
        .sr-order-appointment-modal-form__time-row {
            grid-template-columns: 1fr;
        }
    }
}


@layer components {
    /* 0.18.6: robustes Modal-Layout mit Feldreihenfolge Mitarbeiter > Datum/Beginn > Notizen > Ganztägig > Aktion. */
    .sr-order-appointment-dialog .sr-order-appointment-modal-form-shell {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .sr-order-appointment-dialog .sr-order-appointment-modal-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sr-order-appointment-dialog .sr-order-appointment-modal-form__time-row {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
        gap: .85rem;
        align-items: end;
    }

    .sr-order-appointment-dialog .sr-order-appointment-modal-form__employee,
    .sr-order-appointment-dialog .sr-order-appointment-modal-form__date,
    .sr-order-appointment-dialog .sr-order-appointment-modal-form__start,
    .sr-order-appointment-dialog .sr-order-appointment-modal-form__note,
    .sr-order-appointment-dialog .sr-order-appointment-modal-form__all-day,
    .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions {
        width: 100%;
        min-width: 0;
        grid-column: auto;
    }

    .sr-order-appointment-dialog .sr-order-appointment-modal-form__all-day {
        min-height: 2rem;
        padding: 0;
    }

    .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .65rem;
        margin: 0;
        padding-top: .15rem;
    }

    .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions .sr-button[type="submit"],
    .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions input[type="submit"] {
        width: auto !important;
        min-width: 11rem;
    }

    @media (max-width: 42rem) {
        .sr-order-appointment-dialog .sr-order-appointment-modal-form__time-row {
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions {
            display: grid;
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions .sr-button,
        .sr-order-appointment-dialog .sr-order-appointment-modal-form__actions input[type="submit"] {
            width: 100% !important;
        }
    }
}


@layer components {
    /* 0.18.7: Terminmodal komplett neu aus einzelnen echten Formularfeldern aufgebaut. */
    .sr-order-appointment-dialog--v2 {
        width: min(100% - 2rem, 39rem);
    }

    .sr-order-appointment-dialog--v2 .sr-order-appointment-dialog__body {
        padding: 1.25rem;
    }

    .sr-order-appointment-dialog--v2 .sr-order-appointment-v2-shell {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .sr-order-appointment-v2 {
        display: grid;
        gap: 1rem;
    }

    .sr-order-appointment-v2__field {
        display: grid;
        min-width: 0;
        gap: .35rem;
    }

    .sr-order-appointment-v2__field .sr-field__label {
        margin: 0;
        color: var(--sr-color-text);
        font-size: .7rem;
        font-weight: 780;
    }

    .sr-order-appointment-v2__field .sr-field__control {
        width: 100%;
        min-height: 2.9rem;
    }

    .sr-order-appointment-v2__time-row {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
        gap: .85rem;
    }

    .sr-order-appointment-v2__notes textarea.sr-field__control {
        min-height: 7.25rem;
        resize: vertical;
    }

    .sr-order-appointment-v2__all-day {
        display: flex;
        align-items: center;
        min-height: 2.3rem;
    }

    .sr-order-appointment-v2__switch {
        min-height: 0;
    }

    .sr-order-appointment-v2__start.is-disabled {
        opacity: .52;
    }

    .sr-order-appointment-v2__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .65rem;
        padding-top: .2rem;
    }

    .sr-order-appointment-v2__submit {
        min-width: 11rem;
    }

    @media (max-width: 42rem) {
        .sr-order-appointment-dialog--v2 {
            width: 100%;
        }

        .sr-order-appointment-v2__time-row {
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-v2__footer {
            display: grid;
            grid-template-columns: 1fr;
        }

        .sr-order-appointment-v2__footer .sr-button {
            width: 100%;
        }
    }
}